feat: replace private workspaces with private usernames (#1783)

2022-10-12 13:52:34 -05:00
parent 038e456c6a
commit 18c821d8eb
12 changed files with 84 additions and 108 deletions
--- a/packages/web/src/javascripts/Components/AccountMenu/AdvancedOptions.tsx
+++ b/packages/web/src/javascripts/Components/AccountMenu/AdvancedOptions.tsx
@@ -10,7 +10,7 @@ type Props = {
  application: WebApplication
  viewControllerManager: ViewControllerManager
  disabled?: boolean
-  onPrivateWorkspaceChange?: (isPrivate: boolean, identifier?: string) => void
+  onPrivateUsernameModeChange?: (isPrivate: boolean, identifier?: string) => void
  onStrictSignInChange?: (isStrictSignIn: boolean) => void
  children?: ReactNode
 }
@@ -19,54 +19,46 @@ const AdvancedOptions: FunctionComponent<Props> = ({
  viewControllerManager,
  application,
  disabled = false,
-  onPrivateWorkspaceChange,
+  onPrivateUsernameModeChange,
  onStrictSignInChange,
  children,
 }) => {
  const { server, setServer, enableServerOption, setEnableServerOption } = viewControllerManager.accountMenuController
  const [showAdvanced, setShowAdvanced] = useState(false)

-  const [isPrivateWorkspace, setIsPrivateWorkspace] = useState(false)
-  const [privateWorkspaceName, setPrivateWorkspaceName] = useState('')
-  const [privateWorkspaceUserphrase, setPrivateWorkspaceUserphrase] = useState('')
+  const [isPrivateUsername, setIsPrivateUsername] = useState(false)
+  const [privateUsername, setPrivateUsername] = useState('')

  const [isStrictSignin, setIsStrictSignin] = useState(false)

  useEffect(() => {
-    const recomputePrivateWorkspaceIdentifier = async () => {
-      const identifier = await application.computePrivateWorkspaceIdentifier(
-        privateWorkspaceName,
-        privateWorkspaceUserphrase,
-      )
+    const recomputePrivateUsername = async () => {
+      const identifier = await application.computePrivateUsername(privateUsername)

      if (!identifier) {
-        if (privateWorkspaceName?.length > 0 && privateWorkspaceUserphrase?.length > 0) {
-          application.alertService.alert('Unable to compute private workspace name.').catch(console.error)
+        if (privateUsername?.length > 0) {
+          application.alertService.alert('Unable to compute private username.').catch(console.error)
        }
        return
      }
-      onPrivateWorkspaceChange?.(true, identifier)
+      onPrivateUsernameModeChange?.(true, identifier)
    }

-    if (privateWorkspaceName && privateWorkspaceUserphrase) {
-      recomputePrivateWorkspaceIdentifier().catch(console.error)
+    if (privateUsername) {
+      recomputePrivateUsername().catch(console.error)
    }
-  }, [privateWorkspaceName, privateWorkspaceUserphrase, application, onPrivateWorkspaceChange])
+  }, [privateUsername, application, onPrivateUsernameModeChange])

  useEffect(() => {
-    onPrivateWorkspaceChange?.(isPrivateWorkspace)
-  }, [isPrivateWorkspace, onPrivateWorkspaceChange])
+    onPrivateUsernameModeChange?.(isPrivateUsername)
+  }, [isPrivateUsername, onPrivateUsernameModeChange])

-  const handleIsPrivateWorkspaceChange = useCallback(() => {
-    setIsPrivateWorkspace(!isPrivateWorkspace)
-  }, [isPrivateWorkspace])
+  const handleIsPrivateUsernameChange = useCallback(() => {
+    setIsPrivateUsername(!isPrivateUsername)
+  }, [isPrivateUsername])

-  const handlePrivateWorkspaceNameChange = useCallback((name: string) => {
-    setPrivateWorkspaceName(name)
-  }, [])
-
-  const handlePrivateWorkspaceUserphraseChange = useCallback((userphrase: string) => {
-    setPrivateWorkspaceUserphrase(userphrase)
+  const handlePrivateUsernameNameChange = useCallback((name: string) => {
+    setPrivateUsername(name)
  }, [])

  const handleServerOptionChange: ChangeEventHandler<HTMLInputElement> = useCallback(
@@ -114,35 +106,28 @@ const AdvancedOptions: FunctionComponent<Props> = ({
          <div className="mb-1 flex items-center justify-between">
            <Checkbox
              name="private-workspace"
-              label="Private workspace"
-              checked={isPrivateWorkspace}
+              label="Private username mode"
+              checked={isPrivateUsername}
              disabled={disabled}
-              onChange={handleIsPrivateWorkspaceChange}
+              onChange={handleIsPrivateUsernameChange}
            />
            <a href="https://standardnotes.com/help/80" target="_blank" rel="noopener noreferrer" title="Learn more">
              <Icon type="info" className="text-neutral" />
            </a>
          </div>

-          {isPrivateWorkspace && (
+          {isPrivateUsername && (
            <>
              <DecoratedInput
                className={{ container: 'mb-2' }}
-                left={[<Icon type="server" className="text-neutral" />]}
+                left={[<Icon type="account-circle" className="text-neutral" />]}
                type="text"
-                placeholder="Userphrase"
-                value={privateWorkspaceUserphrase}
-                onChange={handlePrivateWorkspaceUserphraseChange}
-                disabled={disabled}
-              />
-              <DecoratedInput
-                className={{ container: 'mb-2' }}
-                left={[<Icon type="folder" className="text-neutral" />]}
-                type="text"
-                placeholder="Name"
-                value={privateWorkspaceName}
-                onChange={handlePrivateWorkspaceNameChange}
+                placeholder="Username"
+                value={privateUsername}
+                onChange={handlePrivateUsernameNameChange}
                disabled={disabled}
+                spellcheck={false}
+                autocomplete={false}
              />
            </>
          )}
--- a/packages/web/src/javascripts/Components/AccountMenu/CreateAccount.tsx
+++ b/packages/web/src/javascripts/Components/AccountMenu/CreateAccount.tsx
@@ -40,7 +40,7 @@ const CreateAccount: FunctionComponent<Props> = ({
 }) => {
  const emailInputRef = useRef<HTMLInputElement>(null)
  const passwordInputRef = useRef<HTMLInputElement>(null)
-  const [isPrivateWorkspace, setIsPrivateWorkspace] = useState(false)
+  const [isPrivateUsername, setIsPrivateUsername] = useState(false)

  useEffect(() => {
    if (emailInputRef.current) {
@@ -98,11 +98,11 @@ const CreateAccount: FunctionComponent<Props> = ({
    setPassword('')
  }, [setEmail, setMenuPane, setPassword])

-  const onPrivateWorkspaceChange = useCallback(
-    (isPrivateWorkspace: boolean, privateWorkspaceIdentifier?: string) => {
-      setIsPrivateWorkspace(isPrivateWorkspace)
-      if (isPrivateWorkspace && privateWorkspaceIdentifier) {
-        setEmail(privateWorkspaceIdentifier)
+  const onPrivateUsernameChange = useCallback(
+    (isPrivateUsername: boolean, privateUsernameIdentifier?: string) => {
+      setIsPrivateUsername(isPrivateUsername)
+      if (isPrivateUsername && privateUsernameIdentifier) {
+        setEmail(privateUsernameIdentifier)
      }
    },
    [setEmail],
@@ -123,7 +123,7 @@ const CreateAccount: FunctionComponent<Props> = ({
      <form onSubmit={handleRegisterFormSubmit} className="mb-1 px-3">
        <DecoratedInput
          className={{ container: 'mb-2' }}
-          disabled={isPrivateWorkspace}
+          disabled={isPrivateUsername}
          left={[<Icon type="email" className="text-neutral" />]}
          onChange={handleEmailChange}
          onKeyDown={handleKeyDown}
@@ -147,7 +147,7 @@ const CreateAccount: FunctionComponent<Props> = ({
      <AdvancedOptions
        application={application}
        viewControllerManager={viewControllerManager}
-        onPrivateWorkspaceChange={onPrivateWorkspaceChange}
+        onPrivateUsernameModeChange={onPrivateUsernameChange}
      />
    </>
  )
--- a/packages/web/src/javascripts/Components/AccountMenu/SignIn.tsx
+++ b/packages/web/src/javascripts/Components/AccountMenu/SignIn.tsx
@@ -29,7 +29,7 @@ const SignInPane: FunctionComponent<Props> = ({ application, viewControllerManag
  const [isStrictSignin, setIsStrictSignin] = useState(false)
  const [isSigningIn, setIsSigningIn] = useState(false)
  const [shouldMergeLocal, setShouldMergeLocal] = useState(true)
-  const [isPrivateWorkspace, setIsPrivateWorkspace] = useState(false)
+  const [isPrivateUsername, setIsPrivateUsername] = useState(false)

  const emailInputRef = useRef<HTMLInputElement>(null)
  const passwordInputRef = useRef<HTMLInputElement>(null)
@@ -100,11 +100,11 @@ const SignInPane: FunctionComponent<Props> = ({ application, viewControllerManag
      })
  }, [viewControllerManager, application, email, isEphemeral, isStrictSignin, password, shouldMergeLocal])

-  const onPrivateWorkspaceChange = useCallback(
-    (newIsPrivateWorkspace: boolean, privateWorkspaceIdentifier?: string) => {
-      setIsPrivateWorkspace(newIsPrivateWorkspace)
-      if (newIsPrivateWorkspace && privateWorkspaceIdentifier) {
-        setEmail(privateWorkspaceIdentifier)
+  const onPrivateUsernameChange = useCallback(
+    (newisPrivateUsername: boolean, privateUsernameIdentifier?: string) => {
+      setIsPrivateUsername(newisPrivateUsername)
+      if (newisPrivateUsername && privateUsernameIdentifier) {
+        setEmail(privateUsernameIdentifier)
      }
    },
    [setEmail],
@@ -161,7 +161,7 @@ const SignInPane: FunctionComponent<Props> = ({ application, viewControllerManag
          onChange={handleEmailChange}
          onFocus={resetInvalid}
          onKeyDown={handleKeyDown}
-          disabled={isSigningIn || isPrivateWorkspace}
+          disabled={isSigningIn || isPrivateUsername}
          ref={emailInputRef}
        />
        <DecoratedPasswordInput
@@ -206,7 +206,7 @@ const SignInPane: FunctionComponent<Props> = ({ application, viewControllerManag
        viewControllerManager={viewControllerManager}
        application={application}
        disabled={isSigningIn}
-        onPrivateWorkspaceChange={onPrivateWorkspaceChange}
+        onPrivateUsernameModeChange={onPrivateUsernameChange}
        onStrictSignInChange={handleStrictSigninChange}
      />
    </>
--- a/packages/web/src/javascripts/Components/Input/DecoratedInput.tsx
+++ b/packages/web/src/javascripts/Components/Input/DecoratedInput.tsx
@@ -20,6 +20,7 @@ const DecoratedInput = forwardRef(
  (
    {
      autocomplete = false,
+      spellcheck = true,
      className,
      disabled = false,
      id,
@@ -68,6 +69,7 @@ const DecoratedInput = forwardRef(
          title={title}
          type={type}
          value={value}
+          spellCheck={spellcheck}
        />

        {right && (
--- a/packages/web/src/javascripts/Components/Input/DecoratedInputProps.ts
+++ b/packages/web/src/javascripts/Components/Input/DecoratedInputProps.ts
@@ -2,6 +2,7 @@ import { FocusEventHandler, KeyboardEventHandler, ReactNode } from 'react'

 export type DecoratedInputProps = {
  autocomplete?: boolean
+  spellcheck?: boolean
  className?: {
    container?: string
    input?: string