Merge branch 'release/3.8.16' into main

2021-07-12 16:15:50 -03:00
parent 2cb9af325e 8ccdb954d8
commit bd65ca0815
34 changed files with 1635 additions and 1030 deletions
--- a/.eslintrc
+++ b/.eslintrc
@@ -7,7 +7,7 @@
    "prettier",
    "plugin:react-hooks/recommended"
  ],
-  "plugins": ["@typescript-eslint", "react"],
+  "plugins": ["@typescript-eslint", "react", "react-hooks"],
  "parserOptions": {
    "project": "./app/assets/javascripts/tsconfig.json"
  },
@@ -17,7 +17,9 @@
    "no-console": "off",
    "semi": 1,
    "camelcase": "warn",
-    "sort-imports": "off"
+    "sort-imports": "off",
+    "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
+    "react-hooks/exhaustive-deps": "error" // Checks effect dependencies
  },
  "env": {
    "browser": true
--- a/app/assets/icons/ic-settings-filled.svg
+++ b/app/assets/icons/ic-settings-filled.svg
@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.0001 12.9167C9.22656 12.9167 8.4847 12.6095 7.93772 12.0625C7.39073 11.5155 7.08344 10.7736 7.08344 10.0001C7.08344 9.22653 7.39073 8.48467 7.93772 7.93769C8.4847 7.39071 9.22656 7.08342 10.0001 7.08342C10.7737 7.08342 11.5155 7.39071 12.0625 7.93769C12.6095 8.48467 12.9168 9.22653 12.9168 10.0001C12.9168 10.7736 12.6095 11.5155 12.0625 12.0625C11.5155 12.6095 10.7737 12.9167 10.0001 12.9167ZM16.1918 10.8084C16.2251 10.5417 16.2501 10.2751 16.2501 10.0001C16.2501 9.72508 16.2251 9.45008 16.1918 9.16675L17.9501 7.80841C18.1084 7.68341 18.1501 7.45841 18.0501 7.27508L16.3834 4.39175C16.2834 4.20841 16.0584 4.13341 15.8751 4.20842L13.8001 5.04175C13.3668 4.71675 12.9168 4.43341 12.3918 4.22508L12.0834 2.01675C12.0501 1.81675 11.8751 1.66675 11.6668 1.66675H8.33344C8.12511 1.66675 7.95011 1.81675 7.91678 2.01675L7.60844 4.22508C7.08344 4.43341 6.63344 4.71675 6.20011 5.04175L4.12511 4.20842C3.94178 4.13341 3.71678 4.20841 3.61678 4.39175L1.95011 7.27508C1.84178 7.45841 1.89178 7.68341 2.05011 7.80841L3.80844 9.16675C3.77511 9.45008 3.75011 9.72508 3.75011 10.0001C3.75011 10.2751 3.77511 10.5417 3.80844 10.8084L2.05011 12.1917C1.89178 12.3167 1.84178 12.5417 1.95011 12.7251L3.61678 15.6084C3.71678 15.7917 3.94178 15.8584 4.12511 15.7917L6.20011 14.9501C6.63344 15.2834 7.08344 15.5667 7.60844 15.7751L7.91678 17.9834C7.95011 18.1834 8.12511 18.3334 8.33344 18.3334H11.6668C11.8751 18.3334 12.0501 18.1834 12.0834 17.9834L12.3918 15.7751C12.9168 15.5584 13.3668 15.2834 13.8001 14.9501L15.8751 15.7917C16.0584 15.8584 16.2834 15.7917 16.3834 15.6084L18.0501 12.7251C18.1501 12.5417 18.1084 12.3167 17.9501 12.1917L16.1918 10.8084Z" fill="#72767E"/>
-</svg>
--- a/app/assets/icons/ic-settings.svg
+++ b/app/assets/icons/ic-settings.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0001 6.66675C10.8842 6.66675 11.732 7.01794 12.3571 7.64306C12.9823 8.26818 13.3334 9.11603 13.3334 10.0001C13.3334 10.8841 12.9823 11.732 12.3571 12.3571C11.732 12.9822 10.8842 13.3334 10.0001 13.3334C9.11606 13.3334 8.26821 12.9822 7.64309 12.3571C7.01797 11.732 6.66678 10.8841 6.66678 10.0001C6.66678 9.11603 7.01797 8.26818 7.64309 7.64306C8.26821 7.01794 9.11606 6.66675 10.0001 6.66675ZM10.0001 8.33342C9.55808 8.33342 9.13416 8.50901 8.8216 8.82157C8.50904 9.13413 8.33344 9.55805 8.33344 10.0001C8.33344 10.4421 8.50904 10.866 8.8216 11.1786C9.13416 11.4912 9.55808 11.6667 10.0001 11.6667C10.4421 11.6667 10.8661 11.4912 11.1786 11.1786C11.4912 10.866 11.6668 10.4421 11.6668 10.0001C11.6668 9.55805 11.4912 9.13413 11.1786 8.82157C10.8661 8.50901 10.4421 8.33342 10.0001 8.33342ZM8.33344 18.3334C8.12511 18.3334 7.95011 18.1834 7.91678 17.9834L7.60844 15.7751C7.08344 15.5667 6.63344 15.2834 6.20011 14.9501L4.12511 15.7917C3.94178 15.8584 3.71678 15.7917 3.61678 15.6084L1.95011 12.7251C1.84178 12.5417 1.89178 12.3167 2.05011 12.1917L3.80844 10.8084L3.75011 10.0001L3.80844 9.16675L2.05011 7.80841C1.89178 7.68341 1.84178 7.45841 1.95011 7.27508L3.61678 4.39175C3.71678 4.20841 3.94178 4.13341 4.12511 4.20842L6.20011 5.04175C6.63344 4.71675 7.08344 4.43341 7.60844 4.22508L7.91678 2.01675C7.95011 1.81675 8.12511 1.66675 8.33344 1.66675H11.6668C11.8751 1.66675 12.0501 1.81675 12.0834 2.01675L12.3918 4.22508C12.9168 4.43341 13.3668 4.71675 13.8001 5.04175L15.8751 4.20842C16.0584 4.13341 16.2834 4.20841 16.3834 4.39175L18.0501 7.27508C18.1584 7.45841 18.1084 7.68341 17.9501 7.80841L16.1918 9.16675L16.2501 10.0001L16.1918 10.8334L17.9501 12.1917C18.1084 12.3167 18.1584 12.5417 18.0501 12.7251L16.3834 15.6084C16.2834 15.7917 16.0584 15.8667 15.8751 15.7917L13.8001 14.9584C13.3668 15.2834 12.9168 15.5667 12.3918 15.7751L12.0834 17.9834C12.0501 18.1834 11.8751 18.3334 11.6668 18.3334H8.33344ZM9.37511 3.33341L9.06678 5.50841C8.06678 5.71675 7.18344 6.25008 6.54178 6.99175L4.53344 6.12508L3.90844 7.20841L5.66678 8.50008C5.33344 9.47508 5.33344 10.5334 5.66678 11.5001L3.90011 12.8001L4.52511 13.8834L6.55011 13.0167C7.19178 13.7501 8.06678 14.2834 9.05844 14.4834L9.36678 16.6667H10.6334L10.9418 14.4917C11.9334 14.2834 12.8084 13.7501 13.4501 13.0167L15.4751 13.8834L16.1001 12.8001L14.3334 11.5084C14.6668 10.5334 14.6668 9.47508 14.3334 8.50008L16.0918 7.20841L15.4668 6.12508L13.4584 6.99175C12.8168 6.25008 11.9334 5.71675 10.9334 5.51675L10.6251 3.33341H9.37511Z" fill="#72767E"/>
+</svg>
--- a/app/assets/javascripts/app.ts
+++ b/app/assets/javascripts/app.ts
@@ -34,7 +34,6 @@ import {
 } from './directives/functional';

 import {
-  AccountMenu,
  ActionsMenu,
  ComponentModal,
  ComponentView,
@@ -59,6 +58,7 @@ import { SessionsModalDirective } from './components/SessionsModal';
 import { NoAccountWarningDirective } from './components/NoAccountWarning';
 import { NoProtectionsdNoteWarningDirective } from './components/NoProtectionsNoteWarning';
 import { SearchOptionsDirective } from './components/SearchOptions';
+import { AccountMenuDirective } from './components/AccountMenu';
 import { ConfirmSignoutDirective } from './components/ConfirmSignoutModal';
 import { MultipleSelectedNotesDirective } from './components/MultipleSelectedNotes';
 import { NotesContextMenuDirective } from './components/NotesContextMenu';
@@ -138,7 +138,6 @@ const startApplication: StartApplication = async function startApplication(
  // Directives - Views
  angular
    .module('app')
-    .directive('accountMenu', () => new AccountMenu())
    .directive('accountSwitcher', () => new AccountSwitcher())
    .directive('actionsMenu', () => new ActionsMenu())
    .directive('challengeModal', () => new ChallengeModal())
@@ -154,6 +153,7 @@ const startApplication: StartApplication = async function startApplication(
    .directive('historyMenu', () => new HistoryMenu())
    .directive('syncResolutionMenu', () => new SyncResolutionMenu())
    .directive('sessionsModal', SessionsModalDirective)
+    .directive('accountMenu', AccountMenuDirective)
    .directive('noAccountWarning', NoAccountWarningDirective)
    .directive('protectedNotePanel', NoProtectionsdNoteWarningDirective)
    .directive('searchOptions', SearchOptionsDirective)
--- a/app/assets/javascripts/components/AccountMenu/Authentication.tsx
+++ b/app/assets/javascripts/components/AccountMenu/Authentication.tsx
@@ -0,0 +1,386 @@
+import { confirmDialog } from '@Services/alertService';
+import {
+  STRING_ACCOUNT_MENU_UNCHECK_MERGE,
+  STRING_GENERATING_LOGIN_KEYS,
+  STRING_GENERATING_REGISTER_KEYS,
+  STRING_NON_MATCHING_PASSWORDS
+} from '@/strings';
+import { JSXInternal } from 'preact/src/jsx';
+import TargetedEvent = JSXInternal.TargetedEvent;
+import TargetedKeyboardEvent = JSXInternal.TargetedKeyboardEvent;
+import { WebApplication } from '@/ui_models/application';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import TargetedMouseEvent = JSXInternal.TargetedMouseEvent;
+import { observer } from 'mobx-react-lite';
+import { AppState } from '@/ui_models/app_state';
+
+type Props = {
+  application: WebApplication;
+  appState: AppState;
+}
+
+const Authentication = observer(({
+                                   application,
+                                   appState,
+                                 }: Props) => {
+
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [isAuthenticating, setIsAuthenticating] = useState(false);
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [passwordConfirmation, setPasswordConfirmation] = useState<string>('');
+  const [status, setStatus] = useState<string | undefined>(undefined);
+  const [isEmailFocused, setIsEmailFocused] = useState(false);
+
+  const [isEphemeral, setIsEphemeral] = useState(false);
+  const [isStrictSignIn, setIsStrictSignIn] = useState(false);
+  const [shouldMergeLocal, setShouldMergeLocal] = useState(true);
+
+  const {
+    server,
+    notesAndTagsCount,
+    showLogin,
+    showRegister,
+    setShowLogin,
+    setShowRegister,
+    setServer,
+    closeAccountMenu
+  } = appState.accountMenu;
+
+  const user = application.getUser();
+
+  useEffect(() => {
+    if (isEmailFocused) {
+      emailInputRef.current.focus();
+      setIsEmailFocused(false);
+    }
+  }, [isEmailFocused]);
+
+  // Reset password and confirmation fields when hiding the form
+  useEffect(() => {
+    if (!showLogin && !showRegister) {
+      setPassword('');
+      setPasswordConfirmation('');
+    }
+  }, [showLogin, showRegister]);
+
+  const handleHostInputChange = (event: TargetedEvent<HTMLInputElement>) => {
+    const { value } = event.target as HTMLInputElement;
+    setServer(value);
+    application.setCustomHost(value);
+  };
+
+  const emailInputRef = useRef<HTMLInputElement>();
+  const passwordInputRef = useRef<HTMLInputElement>();
+  const passwordConfirmationInputRef = useRef<HTMLInputElement>();
+
+  const handleSignInClick = () => {
+    setShowLogin(true);
+    setIsEmailFocused(true);
+  };
+
+  const handleRegisterClick = () => {
+    setShowRegister(true);
+    setIsEmailFocused(true);
+  };
+
+  const blurAuthFields = () => {
+    emailInputRef.current.blur();
+    passwordInputRef.current.blur();
+    passwordConfirmationInputRef.current?.blur();
+  };
+
+  const login = async () => {
+    setStatus(STRING_GENERATING_LOGIN_KEYS);
+    setIsAuthenticating(true);
+
+    const response = await application.signIn(
+      email,
+      password,
+      isStrictSignIn,
+      isEphemeral,
+      shouldMergeLocal
+    );
+    const error = response.error;
+    if (!error) {
+      setIsAuthenticating(false);
+      setPassword('');
+      setShowLogin(false);
+
+      closeAccountMenu();
+      return;
+    }
+
+    setShowLogin(true);
+    setStatus(undefined);
+    setPassword('');
+
+    if (error.message) {
+      await application.alertService.alert(error.message);
+    }
+
+    setIsAuthenticating(false);
+  };
+
+  const register = async () => {
+    if (passwordConfirmation !== password) {
+      application.alertService.alert(STRING_NON_MATCHING_PASSWORDS);
+      return;
+    }
+    setStatus(STRING_GENERATING_REGISTER_KEYS);
+    setIsAuthenticating(true);
+
+    const response = await application.register(
+      email,
+      password,
+      isEphemeral,
+      shouldMergeLocal
+    );
+
+    const error = response.error;
+    if (error) {
+      setStatus(undefined);
+      setIsAuthenticating(false);
+
+      application.alertService.alert(error.message);
+    } else {
+      setIsAuthenticating(false);
+      setShowRegister(false);
+      closeAccountMenu();
+    }
+  };
+
+  const handleAuthFormSubmit = (event:
+                                  TargetedEvent<HTMLFormElement> |
+                                  TargetedMouseEvent<HTMLButtonElement> |
+                                  TargetedKeyboardEvent<HTMLButtonElement>
+  ) => {
+    event.preventDefault();
+
+    if (!email || !password) {
+      return;
+    }
+
+    blurAuthFields();
+
+    if (showLogin) {
+      login();
+    } else {
+      register();
+    }
+  };
+
+  const handleKeyPressKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      handleAuthFormSubmit(event as TargetedKeyboardEvent<HTMLButtonElement>);
+    }
+  };
+
+  const handlePasswordChange = (event: TargetedEvent<HTMLInputElement>) => {
+    const { value } = event.target as HTMLInputElement;
+    setPassword(value);
+  };
+
+  const handleEmailChange = (event: TargetedEvent<HTMLInputElement>) => {
+    const { value } = event.target as HTMLInputElement;
+    setEmail(value);
+  };
+
+  const handlePasswordConfirmationChange = (event: TargetedEvent<HTMLInputElement>) => {
+    const { value } = event.target as HTMLInputElement;
+    setPasswordConfirmation(value);
+  };
+
+  const handleMergeLocalData = async (event: TargetedEvent<HTMLInputElement>) => {
+    const { checked } = event.target as HTMLInputElement;
+
+    setShouldMergeLocal(checked);
+    if (!checked) {
+      const confirmResult = await confirmDialog({
+        text: STRING_ACCOUNT_MENU_UNCHECK_MERGE,
+        confirmButtonStyle: 'danger'
+      });
+      setShouldMergeLocal(!confirmResult);
+    }
+  };
+
+  return (
+    <>
+      {!user && !showLogin && !showRegister && (
+        <div className="sk-panel-section sk-panel-hero">
+          <div className="sk-panel-row">
+            <div className="sk-h1">Sign in or register to enable sync and end-to-end encryption.</div>
+          </div>
+          <div className="flex my-1">
+            <button
+              className="sn-button info flex-grow text-base py-3 mr-1.5"
+              onClick={handleSignInClick}
+            >
+              Sign In
+            </button>
+            <button
+              className="sn-button info flex-grow text-base py-3 ml-1.5"
+              onClick={handleRegisterClick}
+            >
+              Register
+            </button>
+          </div>
+          <div className="sk-panel-row sk-p">
+            Standard Notes is free on every platform, and comes
+            standard with sync and encryption.
+          </div>
+        </div>
+      )}
+      {(showLogin || showRegister) && (
+        <div className="sk-panel-section">
+          <div className="sk-panel-section-title">
+            {showLogin ? 'Sign In' : 'Register'}
+          </div>
+          <form className="sk-panel-form" onSubmit={handleAuthFormSubmit} noValidate>
+            <div className="sk-panel-section">
+              <input
+                className="sk-input contrast"
+                name="email"
+                type="email"
+                value={email}
+                onChange={handleEmailChange}
+                placeholder="Email"
+                required
+                spellcheck={false}
+                ref={emailInputRef}
+              />
+              <input
+                className="sk-input contrast"
+                name="password"
+                type="password"
+                value={password}
+                onChange={handlePasswordChange}
+                placeholder="Password"
+                required
+                onKeyPress={handleKeyPressKeyDown}
+                onKeyDown={handleKeyPressKeyDown}
+                ref={passwordInputRef}
+              />
+              {showRegister &&
+              <input
+                className="sk-input contrast"
+                name="password_conf"
+                type="password"
+                placeholder="Confirm Password"
+                required
+                onKeyPress={handleKeyPressKeyDown}
+                onKeyDown={handleKeyPressKeyDown}
+                value={passwordConfirmation}
+                onChange={handlePasswordConfirmationChange}
+                ref={passwordConfirmationInputRef}
+              />}
+              <div className="sk-panel-row" />
+              <button
+                type="button"
+                className="sk-a info font-bold text-left p-0 cursor-pointer hover:underline mr-1 ml-1"
+                onClick={() => {
+                  setShowAdvanced(!showAdvanced);
+                }}>
+                Advanced Options
+              </button>
+            </div>
+            {showAdvanced && (
+              <div className="sk-notification unpadded contrast advanced-options sk-panel-row">
+                <div className="sk-panel-column stretch">
+                  <div className="sk-notification-title sk-panel-row padded-row">
+                    Advanced Options
+                  </div>
+                  <div className="bordered-row padded-row">
+                    <label className="sk-label">Sync Server Domain</label>
+                    <input
+                      className="sk-input sk-base"
+                      name="server"
+                      placeholder="Server URL"
+                      onChange={handleHostInputChange}
+                      value={server}
+                      required
+                    />
+                  </div>
+                  {showLogin && (
+                    <label className="sk-label padded-row sk-panel-row justify-left">
+                      <div className="sk-horizontal-group tight cursor-pointer">
+                        <input
+                          className="sk-input"
+                          type="checkbox"
+                          checked={isStrictSignIn}
+                          onChange={() => setIsStrictSignIn(prevState => !prevState)}
+                        />
+                        <p className="sk-p">Use strict sign in</p>
+                        <span>
+                                <a className="info"
+                                   href="https://standardnotes.com/help/security" rel="noopener"
+                                   target="_blank"
+                                >
+                                  (Learn more)
+                                </a>
+                              </span>
+                      </div>
+                    </label>
+                  )}
+                </div>
+              </div>
+            )}
+            {!isAuthenticating && (
+              <div className="sk-panel-section form-submit">
+                <button className="sn-button info text-base py-3 text-center" type="submit"
+                        disabled={isAuthenticating}>
+                  {showLogin ? 'Sign In' : 'Register'}
+                </button>
+              </div>
+            )}
+            {showRegister && (
+              <div className="sk-notification neutral">
+                <div className="sk-notification-title">No Password Reset.</div>
+                <div className="sk-notification-text">
+                  Because your notes are encrypted using your password,
+                  Standard Notes does not have a password reset option.
+                  You cannot forget your password.
+                </div>
+              </div>
+            )}
+            {status && (
+              <div className="sk-panel-section no-bottom-pad">
+                <div className="sk-horizontal-group">
+                  <div className="sk-spinner small neutral" />
+                  <div className="sk-label">{status}</div>
+                </div>
+              </div>
+            )}
+            {!isAuthenticating && (
+              <div className="sk-panel-section no-bottom-pad">
+                <label className="sk-panel-row justify-left">
+                  <div className="sk-horizontal-group tight cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={!isEphemeral}
+                      onChange={() => setIsEphemeral(prevState => !prevState)}
+                    />
+                    <p className="sk-p">Stay signed in</p>
+                  </div>
+                </label>
+                {notesAndTagsCount > 0 && (
+                  <label className="sk-panel-row justify-left">
+                    <div className="sk-horizontal-group tight cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={shouldMergeLocal}
+                        onChange={handleMergeLocalData}
+                      />
+                      <p className="sk-p">Merge local data ({notesAndTagsCount}) notes and tags</p>
+                    </div>
+                  </label>
+                )}
+              </div>
+            )}
+          </form>
+        </div>
+      )}</>
+  );
+});
+
+export default Authentication;
--- a/app/assets/javascripts/components/AccountMenu/DataBackup.tsx
+++ b/app/assets/javascripts/components/AccountMenu/DataBackup.tsx
@@ -0,0 +1,180 @@
+import { isDesktopApplication } from '@/utils';
+import { alertDialog } from '@Services/alertService';
+import {
+  STRING_IMPORT_SUCCESS,
+  STRING_INVALID_IMPORT_FILE,
+  STRING_UNSUPPORTED_BACKUP_FILE_VERSION,
+  StringImportError
+} from '@/strings';
+import { BackupFile } from '@standardnotes/snjs';
+import { useRef, useState } from 'preact/hooks';
+import { WebApplication } from '@/ui_models/application';
+import { JSXInternal } from 'preact/src/jsx';
+import TargetedEvent = JSXInternal.TargetedEvent;
+import { AppState } from '@/ui_models/app_state';
+import { observer } from 'mobx-react-lite';
+
+type Props = {
+  application: WebApplication;
+  appState: AppState;
+}
+
+const DataBackup = observer(({
+                               application,
+                               appState
+                             }: Props) => {
+
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const [isImportDataLoading, setIsImportDataLoading] = useState(false);
+
+  const { isBackupEncrypted, isEncryptionEnabled, setIsBackupEncrypted } = appState.accountMenu;
+
+  const downloadDataArchive = () => {
+    application.getArchiveService().downloadBackup(isBackupEncrypted);
+  };
+
+  const readFile = async (file: File): Promise<any> => {
+    return new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        try {
+          const data = JSON.parse(e.target!.result as string);
+          resolve(data);
+        } catch (e) {
+          application.alertService.alert(STRING_INVALID_IMPORT_FILE);
+        }
+      };
+      reader.readAsText(file);
+    });
+  };
+
+  const performImport = async (data: BackupFile) => {
+    setIsImportDataLoading(true);
+
+    const result = await application.importData(data);
+
+    setIsImportDataLoading(false);
+
+    if (!result) {
+      return;
+    }
+
+    let statusText = STRING_IMPORT_SUCCESS;
+    if ('error' in result) {
+      statusText = result.error;
+    } else if (result.errorCount) {
+      statusText = StringImportError(result.errorCount);
+    }
+    void alertDialog({
+      text: statusText
+    });
+  };
+
+  const importFileSelected = async (event: TargetedEvent<HTMLInputElement, Event>) => {
+    const { files } = (event.target as HTMLInputElement);
+
+    if (!files) {
+      return;
+    }
+    const file = files[0];
+    const data = await readFile(file);
+    if (!data) {
+      return;
+    }
+
+    const version = data.version || data.keyParams?.version || data.auth_params?.version;
+    if (!version) {
+      await performImport(data);
+      return;
+    }
+
+    if (
+      application.protocolService.supportedVersions().includes(version)
+    ) {
+      await performImport(data);
+    } else {
+      setIsImportDataLoading(false);
+      void alertDialog({ text: STRING_UNSUPPORTED_BACKUP_FILE_VERSION });
+    }
+  };
+
+  // Whenever "Import Backup" is either clicked or key-pressed, proceed the import
+  const handleImportFile = (event: TargetedEvent<HTMLSpanElement, Event> | KeyboardEvent) => {
+    if (event instanceof KeyboardEvent) {
+      const { code } = event;
+
+      // Process only when "Enter" or "Space" keys are pressed
+      if (code !== 'Enter' && code !== 'Space') {
+        return;
+      }
+      // Don't proceed the event's default action
+      // (like scrolling in case the "space" key is pressed)
+      event.preventDefault();
+    }
+
+    (fileInputRef.current as HTMLInputElement).click();
+  };
+
+  return (
+    <>
+      {isImportDataLoading ? (
+        <div className="sk-spinner small info" />
+      ) : (
+        <div className="sk-panel-section">
+          <div className="sk-panel-section-title">Data Backups</div>
+          <div className="sk-p">Download a backup of all your data.</div>
+          {isEncryptionEnabled && (
+            <form className="sk-panel-form sk-panel-row">
+              <div className="sk-input-group">
+                <label className="sk-horizontal-group tight">
+                  <input
+                    type="radio"
+                    onChange={() => setIsBackupEncrypted(true)}
+                    checked={isBackupEncrypted}
+                  />
+                  <p className="sk-p">Encrypted</p>
+                </label>
+                <label className="sk-horizontal-group tight">
+                  <input
+                    type="radio"
+                    onChange={() => setIsBackupEncrypted(false)}
+                    checked={!isBackupEncrypted}
+                  />
+                  <p className="sk-p">Decrypted</p>
+                </label>
+              </div>
+            </form>
+          )}
+          <div className="sk-panel-row" />
+          <div className="flex">
+            <button className="sn-button small info" onClick={downloadDataArchive}>Download Backup</button>
+            <button
+              type="button"
+              className="sn-button small flex items-center info ml-2"
+              tabIndex={0}
+              onClick={handleImportFile}
+              onKeyDown={handleImportFile}
+            >
+              <input
+                type="file"
+                ref={fileInputRef}
+                onChange={importFileSelected}
+                className="hidden"
+              />
+              Import Backup
+            </button>
+          </div>
+          {isDesktopApplication() && (
+            <p className="mt-5">
+              Backups are automatically created on desktop and can be managed
+              via the "Backups" top-level menu.
+            </p>
+          )}
+          <div className="sk-panel-row" />
+        </div>
+      )}
+    </>
+  );
+});
+
+export default DataBackup;
--- a/app/assets/javascripts/components/AccountMenu/Encryption.tsx
+++ b/app/assets/javascripts/components/AccountMenu/Encryption.tsx
@@ -0,0 +1,33 @@
+import { AppState } from '@/ui_models/app_state';
+import { observer } from 'mobx-react-lite';
+
+type Props = {
+  appState: AppState;
+}
+
+const Encryption = observer(({ appState }: Props) => {
+  const { isEncryptionEnabled, encryptionStatusString, notesAndTagsCount } = appState.accountMenu;
+
+  const getEncryptionStatusForNotes = () => {
+    const length = notesAndTagsCount;
+    return `${length}/${length} notes and tags encrypted`;
+  };
+
+  return (
+    <div className="sk-panel-section">
+      <div className="sk-panel-section-title">
+        Encryption
+      </div>
+      {isEncryptionEnabled && (
+        <div className="sk-panel-section-subtitle info">
+          {getEncryptionStatusForNotes()}
+        </div>
+      )}
+      <p className="sk-p">
+        {encryptionStatusString}
+      </p>
+    </div>
+  );
+});
+
+export default Encryption;
--- a/app/assets/javascripts/components/AccountMenu/ErrorReporting.tsx
+++ b/app/assets/javascripts/components/AccountMenu/ErrorReporting.tsx
@@ -0,0 +1,80 @@
+import { useState } from 'preact/hooks';
+import { storage, StorageKey } from '@Services/localStorage';
+import { disableErrorReporting, enableErrorReporting, errorReportingId } from '@Services/errorReporting';
+import { alertDialog } from '@Services/alertService';
+import { observer } from 'mobx-react-lite';
+import { AppState } from '@/ui_models/app_state';
+
+type Props = {
+  appState: AppState;
+}
+
+const ErrorReporting = observer(({ appState }: Props) => {
+  const [isErrorReportingEnabled] = useState(() => storage.get(StorageKey.DisableErrorReporting) === false);
+  const [errorReportingIdValue] = useState(() => errorReportingId());
+
+  const toggleErrorReportingEnabled = () => {
+    if (isErrorReportingEnabled) {
+      disableErrorReporting();
+    } else {
+      enableErrorReporting();
+    }
+    if (!appState.sync.inProgress) {
+      window.location.reload();
+    }
+  };
+
+  const openErrorReportingDialog = () => {
+    alertDialog({
+      title: 'Data sent during automatic error reporting',
+      text: `
+        We use <a target="_blank" rel="noreferrer" href="https://www.bugsnag.com/">Bugsnag</a>
+        to automatically report errors that occur while the app is running. See
+        <a target="_blank" rel="noreferrer" href="https://docs.bugsnag.com/platforms/javascript/#sending-diagnostic-data">
+          this article, paragraph 'Browser' under 'Sending diagnostic data',
+        </a>
+        to see what data is included in error reports.
+        <br><br>
+        Error reports never include IP addresses and are fully
+        anonymized. We use error reports to be alerted when something in our
+        code is causing unexpected errors and crashes in your application
+        experience.
+      `
+    });
+  };
+
+  return (
+    <div className="sk-panel-section">
+      <div className="sk-panel-section-title">Error Reporting</div>
+      <div className="sk-panel-section-subtitle info">
+        Automatic error reporting is {isErrorReportingEnabled ? 'enabled' : 'disabled'}
+      </div>
+      <p className="sk-p">
+        Help us improve Standard Notes by automatically submitting
+        anonymized error reports.
+      </p>
+      {errorReportingIdValue && (
+        <>
+          <p className="sk-p selectable">
+            Your random identifier is <span className="font-bold">{errorReportingIdValue}</span>
+          </p>
+          <p className="sk-p">
+            Disabling error reporting will remove that identifier from your
+            local storage, and a new identifier will be created should you
+            decide to enable error reporting again in the future.
+          </p>
+        </>
+      )}
+      <div className="sk-panel-row">
+        <button className="sn-button small info" onClick={toggleErrorReportingEnabled}>
+          {isErrorReportingEnabled ? 'Disable' : 'Enable'} Error Reporting
+        </button>
+      </div>
+      <div className="sk-panel-row">
+        <a className="sk-a" onClick={openErrorReportingDialog}>What data is being sent?</a>
+      </div>
+    </div>
+  );
+});
+
+export default ErrorReporting;
--- a/app/assets/javascripts/components/AccountMenu/Footer.tsx
+++ b/app/assets/javascripts/components/AccountMenu/Footer.tsx
@@ -0,0 +1,68 @@
+import { AppState } from '@/ui_models/app_state';
+import { useState } from 'preact/hooks';
+import { WebApplication } from '@/ui_models/application';
+import { observer } from 'mobx-react-lite';
+
+type Props = {
+  application: WebApplication;
+  appState: AppState;
+}
+
+const Footer = observer(({
+                           application,
+                           appState,
+                         }: Props) => {
+  const {
+    showLogin,
+    showRegister,
+    setShowLogin,
+    setShowRegister,
+    setSigningOut
+  } = appState.accountMenu;
+
+  const user = application.getUser();
+
+  const { showBetaWarning, disableBetaWarning: disableAppStateBetaWarning } = appState;
+
+  const [appVersion] = useState(() => `v${((window as any).electronAppVersion || application.bridge.appVersion)}`);
+
+  const disableBetaWarning = () => {
+    disableAppStateBetaWarning();
+  };
+
+  const signOut = () => {
+    setSigningOut(true);
+  };
+
+  const hidePasswordForm = () => {
+    setShowLogin(false);
+    setShowRegister(false);
+  };
+
+  return (
+    <div className="sk-panel-footer">
+      <div className="sk-panel-row">
+        <div className="sk-p left neutral">
+          <span>{appVersion}</span>
+          {showBetaWarning && (
+            <span>
+                  <span> (</span>
+                  <a className="sk-a" onClick={disableBetaWarning}>Hide beta warning</a>
+                  <span>)</span>
+                </span>
+          )}
+        </div>
+        {(showLogin || showRegister) && (
+          <a className="sk-a right" onClick={hidePasswordForm}>Cancel</a>
+        )}
+        {!showLogin && !showRegister && (
+          <a className="sk-a right danger capitalize" onClick={signOut}>
+            {user ? 'Sign out' : 'Clear session data'}
+          </a>
+        )}
+      </div>
+    </div>
+  );
+});
+
+export default Footer;
--- a/app/assets/javascripts/components/AccountMenu/PasscodeLock.tsx
+++ b/app/assets/javascripts/components/AccountMenu/PasscodeLock.tsx
@@ -0,0 +1,273 @@
+import {
+  STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_CHANGE,
+  STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_REMOVAL, STRING_E2E_ENABLED, STRING_ENC_NOT_ENABLED, STRING_LOCAL_ENC_ENABLED,
+  STRING_NON_MATCHING_PASSCODES,
+  StringUtils,
+  Strings
+} from '@/strings';
+import { WebApplication } from '@/ui_models/application';
+import { preventRefreshing } from '@/utils';
+import { JSXInternal } from 'preact/src/jsx';
+import TargetedEvent = JSXInternal.TargetedEvent;
+import { alertDialog } from '@Services/alertService';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { ApplicationEvent } from '@standardnotes/snjs';
+import TargetedMouseEvent = JSXInternal.TargetedMouseEvent;
+import { observer } from 'mobx-react-lite';
+import { AppState } from '@/ui_models/app_state';
+
+type Props = {
+  application: WebApplication;
+  appState: AppState;
+};
+
+const PasscodeLock = observer(({
+                                 application,
+                                 appState,
+                               }: Props) => {
+  const keyStorageInfo = StringUtils.keyStorageInfo(application);
+  const passcodeAutoLockOptions = application.getAutolockService().getAutoLockIntervalOptions();
+
+  const { setIsEncryptionEnabled, setIsBackupEncrypted, setEncryptionStatusString } = appState.accountMenu;
+
+  const passcodeInputRef = useRef<HTMLInputElement>();
+
+  const [passcode, setPasscode] = useState<string | undefined>(undefined);
+  const [passcodeConfirmation, setPasscodeConfirmation] = useState<string | undefined>(undefined);
+  const [selectedAutoLockInterval, setSelectedAutoLockInterval] = useState<unknown>(null);
+  const [isPasscodeFocused, setIsPasscodeFocused] = useState(false);
+  const [showPasscodeForm, setShowPasscodeForm] = useState(false);
+  const [canAddPasscode, setCanAddPasscode] = useState(!application.isEphemeralSession());
+  const [hasPasscode, setHasPasscode] = useState(application.hasPasscode());
+
+
+  const handleAddPassCode = () => {
+    setShowPasscodeForm(true);
+    setIsPasscodeFocused(true);
+  };
+
+  const changePasscodePressed = () => {
+    handleAddPassCode();
+  };
+
+  const reloadAutoLockInterval = useCallback(async () => {
+    const interval = await application.getAutolockService().getAutoLockInterval();
+    setSelectedAutoLockInterval(interval);
+  }, [application]);
+
+  const refreshEncryptionStatus = useCallback(() => {
+    const hasUser = application.hasAccount();
+    const hasPasscode = application.hasPasscode();
+
+    setHasPasscode(hasPasscode);
+
+    const encryptionEnabled = hasUser || hasPasscode;
+
+    const encryptionStatusString = hasUser
+      ? STRING_E2E_ENABLED
+      : hasPasscode
+        ? STRING_LOCAL_ENC_ENABLED
+        : STRING_ENC_NOT_ENABLED;
+
+    setEncryptionStatusString(encryptionStatusString);
+    setIsEncryptionEnabled(encryptionEnabled);
+    setIsBackupEncrypted(encryptionEnabled);
+  }, [application, setEncryptionStatusString, setIsBackupEncrypted, setIsEncryptionEnabled]);
+
+  const selectAutoLockInterval = async (interval: number) => {
+    if (!(await application.authorizeAutolockIntervalChange())) {
+      return;
+    }
+    await application.getAutolockService().setAutoLockInterval(interval);
+    reloadAutoLockInterval();
+  };
+
+  const removePasscodePressed = async () => {
+    await preventRefreshing(
+      STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_REMOVAL,
+      async () => {
+        if (await application.removePasscode()) {
+          await application
+            .getAutolockService()
+            .deleteAutolockPreference();
+          await reloadAutoLockInterval();
+          refreshEncryptionStatus();
+        }
+      }
+    );
+  };
+
+  const handlePasscodeChange = (event: TargetedEvent<HTMLInputElement>) => {
+    const { value } = event.target as HTMLInputElement;
+    setPasscode(value);
+  };
+
+  const handleConfirmPasscodeChange = (event: TargetedEvent<HTMLInputElement>) => {
+    const { value } = event.target as HTMLInputElement;
+    setPasscodeConfirmation(value);
+  };
+
+  const submitPasscodeForm = async (event: TargetedEvent<HTMLFormElement> | TargetedMouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+
+    if (!passcode || passcode.length === 0) {
+      await alertDialog({
+        text: Strings.enterPasscode,
+      });
+    }
+
+    if (passcode !== passcodeConfirmation) {
+      await alertDialog({
+        text: STRING_NON_MATCHING_PASSCODES
+      });
+      setIsPasscodeFocused(true);
+      return;
+    }
+
+    await preventRefreshing(
+      STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_CHANGE,
+      async () => {
+        const successful = application.hasPasscode()
+          ? await application.changePasscode(passcode as string)
+          : await application.addPasscode(passcode as string);
+
+        if (!successful) {
+          setIsPasscodeFocused(true);
+        }
+      }
+    );
+
+    setPasscode(undefined);
+    setPasscodeConfirmation(undefined);
+    setShowPasscodeForm(false);
+
+    refreshEncryptionStatus();
+  };
+
+  useEffect(() => {
+    refreshEncryptionStatus();
+  }, [refreshEncryptionStatus]);
+
+  // `reloadAutoLockInterval` gets interval asynchronously, therefore we call `useEffect` to set initial
+  // value of `selectedAutoLockInterval`
+  useEffect(() => {
+    reloadAutoLockInterval();
+  }, [reloadAutoLockInterval]);
+
+  useEffect(() => {
+    if (isPasscodeFocused) {
+      passcodeInputRef.current.focus();
+      setIsPasscodeFocused(false);
+    }
+  }, [isPasscodeFocused]);
+
+  // Add the required event observers
+  useEffect(() => {
+    const removeKeyStatusChangedObserver = application.addEventObserver(
+      async () => {
+        setCanAddPasscode(!application.isEphemeralSession());
+        setHasPasscode(application.hasPasscode());
+        setShowPasscodeForm(false);
+      },
+      ApplicationEvent.KeyStatusChanged
+    );
+
+    return () => {
+      removeKeyStatusChangedObserver();
+    };
+  }, [application]);
+
+  return (
+    <div className="sk-panel-section">
+      <div className="sk-panel-section-title">Passcode Lock</div>
+      {!hasPasscode && (
+        <div>
+          {canAddPasscode && (
+            <>
+              {!showPasscodeForm && (
+                <div className="sk-panel-row">
+                  <button className="sn-button small info" onClick={handleAddPassCode}>
+                    Add Passcode
+                  </button>
+                </div>
+              )}
+              <p className="sk-p">
+                Add a passcode to lock the application and
+                encrypt on-device key storage.
+              </p>
+              {keyStorageInfo && (
+                <p>{keyStorageInfo}</p>
+              )}
+            </>
+          )}
+          {!canAddPasscode && (
+            <p className="sk-p">
+              Adding a passcode is not supported in temporary sessions. Please sign
+              out, then sign back in with the "Stay signed in" option checked.
+            </p>
+          )}
+        </div>
+      )}
+      {showPasscodeForm && (
+        <form className="sk-panel-form" onSubmit={submitPasscodeForm}>
+          <div className="sk-panel-row" />
+          <input
+            className="sk-input contrast"
+            type="password"
+            ref={passcodeInputRef}
+            value={passcode}
+            onChange={handlePasscodeChange}
+            placeholder="Passcode"
+          />
+          <input
+            className="sk-input contrast"
+            type="password"
+            value={passcodeConfirmation}
+            onChange={handleConfirmPasscodeChange}
+            placeholder="Confirm Passcode"
+          />
+          <button className="sn-button small info mt-2" onClick={submitPasscodeForm}>
+            Set Passcode
+          </button>
+          <button className="sn-button small outlined ml-2" onClick={() => setShowPasscodeForm(false)}>
+            Cancel
+          </button>
+        </form>
+      )}
+      {hasPasscode && !showPasscodeForm && (
+        <>
+          <div className="sk-panel-section-subtitle info">Passcode lock is enabled</div>
+          <div className="sk-notification contrast">
+            <div className="sk-notification-title">Options</div>
+            <div className="sk-notification-text">
+              <div className="sk-panel-row">
+                <div className="sk-horizontal-group">
+                  <div className="sk-h4 sk-bold">Autolock</div>
+                  {passcodeAutoLockOptions.map(option => {
+                    return (
+                      <a
+                        className={`sk-a info ${option.value === selectedAutoLockInterval ? 'boxed' : ''}`}
+                        onClick={() => selectAutoLockInterval(option.value)}>
+                        {option.label}
+                      </a>
+                    );
+                  })}
+                </div>
+              </div>
+              <div className="sk-p">The autolock timer begins when the window or tab loses focus.</div>
+              <div className="sk-panel-row" />
+              <a className="sk-a info sk-panel-row condensed" onClick={changePasscodePressed}>
+                Change Passcode
+              </a>
+              <a className="sk-a danger sk-panel-row condensed" onClick={removePasscodePressed}>
+                Remove Passcode
+              </a>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+});
+
+export default PasscodeLock;
--- a/app/assets/javascripts/components/AccountMenu/Protections.tsx
+++ b/app/assets/javascripts/components/AccountMenu/Protections.tsx
@@ -0,0 +1,100 @@
+import { WebApplication } from '@/ui_models/application';
+import { FunctionalComponent } from 'preact';
+import { useCallback, useState } from 'preact/hooks';
+import { useEffect } from 'preact/hooks';
+import { ApplicationEvent } from '@standardnotes/snjs';
+import { isSameDay } from '@/utils';
+
+type Props = {
+  application: WebApplication;
+};
+
+const Protections: FunctionalComponent<Props> = ({ application }) => {
+  const enableProtections = () => {
+    application.clearProtectionSession();
+  };
+
+  const [hasProtections, setHasProtections] = useState(() => application.hasProtectionSources());
+
+  const getProtectionsDisabledUntil = useCallback((): string | null => {
+    const protectionExpiry = application.getProtectionSessionExpiryDate();
+    const now = new Date();
+    if (protectionExpiry > now) {
+      let f: Intl.DateTimeFormat;
+      if (isSameDay(protectionExpiry, now)) {
+        f = new Intl.DateTimeFormat(undefined, {
+          hour: 'numeric',
+          minute: 'numeric'
+        });
+      } else {
+        f = new Intl.DateTimeFormat(undefined, {
+          weekday: 'long',
+          day: 'numeric',
+          month: 'short',
+          hour: 'numeric',
+          minute: 'numeric'
+        });
+      }
+
+      return f.format(protectionExpiry);
+    }
+    return null;
+  }, [application]);
+
+  const [protectionsDisabledUntil, setProtectionsDisabledUntil] = useState(getProtectionsDisabledUntil());
+
+  useEffect(() => {
+    const removeProtectionSessionExpiryDateChangedObserver = application.addEventObserver(
+      async () => {
+        setProtectionsDisabledUntil(getProtectionsDisabledUntil());
+      },
+      ApplicationEvent.ProtectionSessionExpiryDateChanged
+    );
+
+    const removeKeyStatusChangedObserver = application.addEventObserver(
+      async () => {
+        setHasProtections(application.hasProtectionSources());
+      },
+      ApplicationEvent.KeyStatusChanged
+    );
+
+    return () => {
+      removeProtectionSessionExpiryDateChangedObserver();
+      removeKeyStatusChangedObserver();
+    };
+  }, [application, getProtectionsDisabledUntil]);
+
+  if (!hasProtections) {
+    return null;
+  }
+
+  return (
+    <div className="sk-panel-section">
+      <div className="sk-panel-section-title">Protections</div>
+      {protectionsDisabledUntil && (
+        <div className="sk-panel-section-subtitle info">
+          Protections are disabled until {protectionsDisabledUntil}
+        </div>
+      )}
+      {!protectionsDisabledUntil && (
+        <div className="sk-panel-section-subtitle info">
+          Protections are enabled
+        </div>
+      )}
+      <p className="sk-p">
+        Actions like viewing protected notes, exporting decrypted backups,
+        or revoking an active session, require additional authentication
+        like entering your account password or application passcode.
+      </p>
+      {protectionsDisabledUntil && (
+        <div className="sk-panel-row">
+          <button className="sn-button small info" onClick={enableProtections}>
+            Enable protections
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Protections;
--- a/app/assets/javascripts/components/AccountMenu/User.tsx
+++ b/app/assets/javascripts/components/AccountMenu/User.tsx
@@ -0,0 +1,69 @@
+import { observer } from 'mobx-react-lite';
+import { AppState } from '@/ui_models/app_state';
+import { PasswordWizardType } from '@/types';
+import { WebApplication } from '@/ui_models/application';
+import { User } from '@standardnotes/snjs/dist/@types/services/api/responses';
+
+type Props = {
+  appState: AppState;
+  application: WebApplication;
+}
+
+const User = observer(({
+                         appState,
+                         application,
+                       }: Props) => {
+  const { server, closeAccountMenu } = appState.accountMenu;
+  const user = application.getUser();
+
+  const openPasswordWizard = () => {
+    closeAccountMenu();
+    application.presentPasswordWizard(PasswordWizardType.ChangePassword);
+  };
+
+  const openSessionsModal = () => {
+    closeAccountMenu();
+    appState.openSessionsModal();
+  };
+
+  return (
+    <div className="sk-panel-section">
+      {appState.sync.errorMessage && (
+        <div className="sk-notification danger">
+          <div className="sk-notification-title">Sync Unreachable</div>
+          <div className="sk-notification-text">
+            Hmm...we can't seem to sync your account.
+            The reason: {appState.sync.errorMessage}
+          </div>
+          <a
+            className="sk-a info-contrast sk-bold sk-panel-row"
+            href="https://standardnotes.com/help"
+            rel="noopener"
+            target="_blank"
+          >
+            Need help?
+          </a>
+        </div>
+      )}
+      <div className="sk-panel-row">
+        <div className="sk-panel-column">
+          <div className="sk-h1 sk-bold wrap">
+            {(user as User).email}
+          </div>
+          <div className="sk-subtitle neutral">
+            {server}
+          </div>
+        </div>
+      </div>
+      <div className="sk-panel-row" />
+      <a className="sk-a info sk-panel-row condensed" onClick={openPasswordWizard}>
+        Change Password
+      </a>
+      <a className="sk-a info sk-panel-row condensed" onClick={openSessionsModal}>
+        Manage Sessions
+      </a>
+    </div>
+  );
+});
+
+export default User;
--- a/app/assets/javascripts/components/AccountMenu/index.tsx
+++ b/app/assets/javascripts/components/AccountMenu/index.tsx
@@ -0,0 +1,91 @@
+import { observer } from 'mobx-react-lite';
+import { toDirective } from '@/components/utils';
+import { AppState } from '@/ui_models/app_state';
+import { WebApplication } from '@/ui_models/application';
+import { ConfirmSignoutContainer } from '@/components/ConfirmSignoutModal';
+import Authentication from '@/components/AccountMenu/Authentication';
+import Footer from '@/components/AccountMenu/Footer';
+import User from '@/components/AccountMenu/User';
+import Encryption from '@/components/AccountMenu/Encryption';
+import Protections from '@/components/AccountMenu/Protections';
+import PasscodeLock from '@/components/AccountMenu/PasscodeLock';
+import DataBackup from '@/components/AccountMenu/DataBackup';
+import ErrorReporting from '@/components/AccountMenu/ErrorReporting';
+import { useEffect } from 'preact/hooks';
+
+type Props = {
+  appState: AppState;
+  application: WebApplication;
+};
+
+const AccountMenu = observer(({ application, appState }: Props) => {
+  const {
+    show: showAccountMenu,
+    showLogin,
+    showRegister,
+    setShowLogin,
+    setShowRegister,
+    closeAccountMenu
+  } = appState.accountMenu;
+
+  const user = application.getUser();
+
+  useEffect(() => {
+    // Reset "Login" and "Registration" sections state when hiding account menu,
+    // so the next time account menu is opened these sections are closed
+    if (!showAccountMenu) {
+      setShowLogin(false);
+      setShowRegister(false);
+    }
+  }, [setShowLogin, setShowRegister, showAccountMenu]);
+
+  return (
+    <div className="sn-component">
+      <div id="account-panel" className="sk-panel">
+        <div className="sk-panel-header">
+          <div className="sk-panel-header-title">Account</div>
+          <a className="sk-a info close-button" onClick={closeAccountMenu}>Close</a>
+        </div>
+        <div className="sk-panel-content">
+          <Authentication
+            application={application}
+            appState={appState}
+          />
+          {!showLogin && !showRegister && (
+            <div>
+              {user && (
+                <User
+                  application={application}
+                  appState={appState}
+                />
+              )}
+              <Encryption appState={appState} />
+              <Protections application={application} />
+              <PasscodeLock
+                application={application}
+                appState={appState}
+              />
+              <DataBackup
+                application={application}
+                appState={appState}
+              />
+              <ErrorReporting appState={appState} />
+            </div>
+          )}
+        </div>
+        <ConfirmSignoutContainer
+          application={application}
+          appState={appState}
+        />
+        <Footer
+          application={application}
+          appState={appState}
+        />
+      </div>
+    </div>
+  );
+});
+
+export const AccountMenuDirective = toDirective<Props>(
+  AccountMenu
+);
--- a/app/assets/javascripts/components/ConfirmSignoutModal.tsx
+++ b/app/assets/javascripts/components/ConfirmSignoutModal.tsx
@@ -15,7 +15,7 @@ type Props = {
  appState: AppState;
 };

-const ConfirmSignoutContainer = observer((props: Props) => {
+export const ConfirmSignoutContainer = observer((props: Props) => {
  if (!props.appState.accountMenu.signingOut) {
    return null;
  }
--- a/app/assets/javascripts/components/Icon.tsx
+++ b/app/assets/javascripts/components/Icon.tsx
@@ -19,12 +19,13 @@ import HelpIcon from '../../icons/ic-help.svg';
 import KeyboardIcon from '../../icons/ic-keyboard.svg';
 import ListedIcon from '../../icons/ic-listed.svg';
 import SecurityIcon from '../../icons/ic-security.svg';
-import SettingsFilledIcon from '../../icons/ic-settings-filled.svg';
+import SettingsIcon from '../../icons/ic-settings.svg';
 import StarIcon from '../../icons/ic-star.svg';
 import ThemesIcon from '../../icons/ic-themes.svg';
 import UserIcon from '../../icons/ic-user.svg';

 import { toDirective } from './utils';
+import { FunctionalComponent } from 'preact';

 const ICONS = {
  'pencil-off': PencilOffIcon,
@@ -47,7 +48,7 @@ const ICONS = {
  keyboard: KeyboardIcon,
  listed: ListedIcon,
  security: SecurityIcon,
-  'settings-filled': SettingsFilledIcon,
+  settings: SettingsIcon,
  star: StarIcon,
  themes: ThemesIcon,
  user: UserIcon,
@@ -60,7 +61,7 @@ type Props = {
  className?: string;
 };

-export const Icon: React.FC<Props> = ({ type, className }) => {
+export const Icon: FunctionalComponent<Props> = ({ type, className }) => {
  const IconComponent = ICONS[type];
  return <IconComponent className={`sn-icon ${className}`} />;
 };
--- a/app/assets/javascripts/components/preferences/content.tsx
+++ b/app/assets/javascripts/components/preferences/content.tsx
@@ -0,0 +1,28 @@
+import { FunctionalComponent } from 'preact';
+
+export const Title: FunctionalComponent = ({ children }) => (
+  <h2 className="text-base m-0 mb-3">{children}</h2>
+);
+
+export const Subtitle: FunctionalComponent = ({ children }) => (
+  <h4 className="font-medium text-sm m-0 mb-1">{children}</h4>
+);
+
+export const Text: FunctionalComponent = ({ children }) => (
+  <p className="text-xs">{children}</p>
+);
+
+export const Button: FunctionalComponent<{ label: string; link: string }> = ({
+  label,
+  link,
+}) => (
+  <a
+    target="_blank"
+    className="block bg-default color-text rounded border-solid border-1 
+    border-gray-300 px-4 py-2 font-bold text-sm fit-content mt-3
+    focus:bg-contrast hover:bg-contrast "
+    href={link}
+  >
+    {label}
+  </a>
+);
--- a/app/assets/javascripts/components/preferences/help-feedback.tsx
+++ b/app/assets/javascripts/components/preferences/help-feedback.tsx
@@ -0,0 +1,92 @@
+import { FunctionalComponent } from 'preact';
+import { PreferencesGroup, PreferencesPane, PreferencesSegment } from './pane';
+import { Title, Subtitle, Text, Button } from './content';
+
+export const HelpAndFeedback: FunctionalComponent = () => (
+  <PreferencesPane>
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>Frequently asked questions</Title>
+        <Subtitle>Who can read my private notes?</Subtitle>
+        <Text>
+          Quite simply: no one but you. Not us, not your ISP, not a hacker, and
+          not a government agency. As long as you keep your password safe, and
+          your password is reasonably strong, then you are the only person in
+          the world with the ability to decrypt your notes. For more on how we
+          handle your privacy and security, check out our easy to read{' '}
+          <a target="_blank" href="https://standardnotes.com/privacy">
+            Privacy Manifesto.
+          </a>
+        </Text>
+      </PreferencesSegment>
+      <PreferencesSegment>
+        <Subtitle>Can I collaborate with others on a note?</Subtitle>
+        <Text>
+          Because of our encrypted architecture, Standard Notes does not
+          currently provide a real-time collaboration solution. Multiple users
+          can share the same account however, but editing at the same time may
+          result in sync conflicts, which may result in the duplication of
+          notes.
+        </Text>
+      </PreferencesSegment>
+      <PreferencesSegment>
+        <Subtitle>Can I use Standard Notes totally offline?</Subtitle>
+        <Text>
+          Standard Notes can be used totally offline without an account, and
+          without an internet connection. You can find{' '}
+          <a
+            target="_blank"
+            href="https://standardnotes.com/help/59/can-i-use-standard-notes-totally-offline"
+          >
+            more details here.
+          </a>
+        </Text>
+      </PreferencesSegment>
+      <PreferencesSegment>
+        <Subtitle>Can’t find your question here?</Subtitle>
+        <Button label="Open FAQ" link="https://standardnotes.com/help" />
+      </PreferencesSegment>
+    </PreferencesGroup>
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>Community forum</Title>
+        <Text>
+          If you have an issue, found a bug or want to suggest a feature, you
+          can browse or post to the forum. It’s recommended for non-account
+          related issues. Please read our{' '}
+          <a target="_blank" href="https://standardnotes.com/longevity/">
+            Longevity statement
+          </a>{' '}
+          before advocating for a feature request.
+        </Text>
+        <Button
+          label="Go to the forum"
+          link="https://forum.standardnotes.org/"
+        />
+      </PreferencesSegment>
+    </PreferencesGroup>
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>Slack group</Title>
+        <Text>
+          Want to meet other passionate note-takers and privacy enthusiasts?
+          Want to share your feedback with us? Join the Standard Notes Slack
+          group for discussions on security, themes, editors and more.
+        </Text>
+        <Button
+          link="https://standardnotes.com/slack"
+          label="Join our Slack group"
+        />
+      </PreferencesSegment>
+    </PreferencesGroup>
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>Account related issue?</Title>
+        <Text>
+          Send an email to help@standardnotes.org and we’ll sort it out.
+        </Text>
+        <Button link="mailto: help@standardnotes.org" label="Email us" />
+      </PreferencesSegment>
+    </PreferencesGroup>
+  </PreferencesPane>
+);
--- a/app/assets/javascripts/components/preferences/menu.tsx
+++ b/app/assets/javascripts/components/preferences/menu.tsx
@@ -0,0 +1,23 @@
+import { observer } from 'mobx-react-lite';
+import { FunctionComponent } from 'preact';
+import { PreferencesMenuItem } from '../PreferencesMenuItem';
+import { Preferences } from './preferences';
+
+interface PreferencesMenuProps {
+  preferences: Preferences;
+}
+
+export const PreferencesMenu: FunctionComponent<PreferencesMenuProps> =
+  observer(({ preferences }) => (
+    <div className="min-w-55 overflow-y-auto flex flex-col px-3 py-6">
+      {preferences.items.map((pref) => (
+        <PreferencesMenuItem
+          key={pref.id}
+          iconType={pref.icon}
+          label={pref.label}
+          selected={pref.selected}
+          onClick={() => preferences.selectItem(pref.id)}
+        />
+      ))}
+    </div>
+  ));
--- a/app/assets/javascripts/components/preferences/pane.tsx
+++ b/app/assets/javascripts/components/preferences/pane.tsx
@@ -1,33 +1,33 @@
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { PreferencesMenuItem } from '../PreferencesMenuItem';
-import { MockState } from './mock-state';
+import { FunctionalComponent } from 'preact';

-interface PreferencesMenuProps {
-  store: MockState;
-}
+const HorizontalLine: FunctionalComponent<{ index: number; length: number }> =
+  ({ index, length }) =>
+    index < length - 1 ? (
+      <hr className="h-1px w-full bg-border no-border" />
+    ) : null;

-const PreferencesMenu: FunctionComponent<PreferencesMenuProps> = observer(
-  ({ store }) => (
-    <div className="h-full w-auto flex flex-col px-3 py-6">
-      {store.items.map((pref) => (
-        <PreferencesMenuItem
-          key={pref.id}
-          iconType={pref.icon}
-          label={pref.label}
-          selected={pref.selected}
-          onClick={() => store.select(pref.id)}
-        />
-      ))}
-    </div>
-  )
+export const PreferencesSegment: FunctionalComponent = ({ children }) => (
+  <div>{children}</div>
 );

-export const PreferencesPane: FunctionComponent = () => {
-  const store = new MockState();
-  return (
-    <div className="h-full w-full flex flex-row">
-      <PreferencesMenu store={store}></PreferencesMenu>
+export const PreferencesGroup: FunctionalComponent = ({ children }) => (
+  <div className="bg-default border-1 border-solid rounded border-gray-300 px-6 py-6 flex flex-col gap-2">
+    {!Array.isArray(children)
+      ? children
+      : children.map((c, i, arr) => (
+          <>
+            {c}
+            <HorizontalLine index={i} length={arr.length} />
+          </>
+        ))}
+  </div>
+);
+
+export const PreferencesPane: FunctionalComponent = ({ children }) => (
+  <div className="preferences-pane flex-grow flex flex-row overflow-y-auto min-h-0">
+    <div className="flex-grow flex flex-col py-6 items-center">
+      <div className="max-w-124 flex flex-col gap-3">{children}</div>
    </div>
-  );
-};
+    <div className="flex-basis-55 flex-shrink-max" />
+  </div>
+);
--- a/app/assets/javascripts/components/preferences/preferences.ts
+++ b/app/assets/javascripts/components/preferences/preferences.ts
@@ -11,7 +11,7 @@ interface PreferenceListItem extends PreferenceItem {
 }

 const predefinedItems: PreferenceItem[] = [
-  { label: 'General', icon: 'settings-filled' },
+  { label: 'General', icon: 'settings' },
  { label: 'Account', icon: 'user' },
  { label: 'Appearance', icon: 'themes' },
  { label: 'Security', icon: 'security' },
@@ -22,22 +22,23 @@ const predefinedItems: PreferenceItem[] = [
  { label: 'Help & feedback', icon: 'help' },
 ];

-export class MockState {
+export class Preferences {
  private readonly _items: PreferenceListItem[];
  private _selectedId = 0;

  constructor(items: PreferenceItem[] = predefinedItems) {
-    makeObservable<MockState, '_selectedId'>(this, {
+    makeObservable<Preferences, '_selectedId'>(this, {
      _selectedId: observable,
+      selectedItem: computed,
      items: computed,
-      select: action,
+      selectItem: action,
    });

    this._items = items.map((p, idx) => ({ ...p, id: idx }));
    this._selectedId = this._items[0].id;
  }

-  select(id: number) {
+  selectItem(id: number) {
    this._selectedId = id;
  }

@@ -47,4 +48,8 @@ export class MockState {
      selected: p.id === this._selectedId,
    }));
  }
+
+  get selectedItem(): PreferenceListItem {
+    return this._items.find((item) => item.id === this._selectedId)!;
+  }
 }
--- a/app/assets/javascripts/components/preferences/view.tsx
+++ b/app/assets/javascripts/components/preferences/view.tsx
@@ -1,28 +1,45 @@
 import { IconButton } from '@/components/IconButton';
 import { TitleBar, Title } from '@/components/TitleBar';
 import { FunctionComponent } from 'preact';
-import { PreferencesPane } from './pane';
+import { Preferences } from './preferences';
+import { PreferencesMenu } from './menu';
+import { HelpAndFeedback } from './help-feedback';
+import { observer } from 'mobx-react-lite';

 interface PreferencesViewProps {
  close: () => void;
 }

-export const PreferencesView: FunctionComponent<PreferencesViewProps> = ({
-  close,
-}) => (
-  <div className="sn-full-screen flex flex-col bg-contrast z-index-preferences">
-    <TitleBar className="items-center justify-between">
-      {/* div is added so flex justify-between can center the title */}
-      <div className="h-8 w-8" />
-      <Title className="text-lg">Your preferences for Standard Notes</Title>
-      <IconButton
-        onClick={() => {
-          close();
-        }}
-        type="normal"
-        iconType="close"
-      />
-    </TitleBar>
-    <PreferencesPane />
+export const PreferencesCanvas: FunctionComponent<{
+  preferences: Preferences;
+}> = observer(({ preferences: prefs }) => (
+  <div className="flex flex-row flex-grow min-h-0 justify-between">
+    <PreferencesMenu preferences={prefs}></PreferencesMenu>
+    {/* Temporary selector until a full solution is implemented */}
+    {prefs.selectedItem.label === 'Help & feedback' ? (
+      <HelpAndFeedback />
+    ) : null}
  </div>
-);
+));
+
+export const PreferencesView: FunctionComponent<PreferencesViewProps> =
+  observer(({ close }) => {
+    const prefs = new Preferences();
+    return (
+      <div className="sn-full-screen flex flex-col bg-contrast z-index-preferences">
+        <TitleBar className="items-center justify-between">
+          {/* div is added so flex justify-between can center the title */}
+          <div className="h-8 w-8" />
+          <Title className="text-lg">Your preferences for Standard Notes</Title>
+          <IconButton
+            onClick={() => {
+              close();
+            }}
+            type="normal"
+            iconType="close"
+          />
+        </TitleBar>
+        <PreferencesCanvas preferences={prefs} />
+      </div>
+    );
+  });
--- a/app/assets/javascripts/directives/views/accountMenu.ts
+++ b/app/assets/javascripts/directives/views/accountMenu.ts
@@ -1,618 +0,0 @@
-import { WebDirective } from './../../types';
-import { isDesktopApplication, isSameDay, preventRefreshing } from '@/utils';
-import template from '%/directives/account-menu.pug';
-import { PureViewCtrl } from '@Views/abstract/pure_view_ctrl';
-import {
-  STRING_ACCOUNT_MENU_UNCHECK_MERGE,
-  STRING_E2E_ENABLED,
-  STRING_LOCAL_ENC_ENABLED,
-  STRING_ENC_NOT_ENABLED,
-  STRING_IMPORT_SUCCESS,
-  STRING_NON_MATCHING_PASSCODES,
-  STRING_NON_MATCHING_PASSWORDS,
-  STRING_INVALID_IMPORT_FILE,
-  STRING_GENERATING_LOGIN_KEYS,
-  STRING_GENERATING_REGISTER_KEYS,
-  StringImportError,
-  STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_CHANGE,
-  STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_REMOVAL,
-  STRING_UNSUPPORTED_BACKUP_FILE_VERSION,
-  StringUtils,
-  Strings,
-} from '@/strings';
-import { PasswordWizardType } from '@/types';
-import {
-  ApplicationEvent,
-  BackupFile,
-  ContentType,
-} from '@standardnotes/snjs';
-import { confirmDialog, alertDialog } from '@/services/alertService';
-import { storage, StorageKey } from '@/services/localStorage';
-import {
-  disableErrorReporting,
-  enableErrorReporting,
-  errorReportingId,
-} from '@/services/errorReporting';
-
-const ELEMENT_NAME_AUTH_EMAIL = 'email';
-const ELEMENT_NAME_AUTH_PASSWORD = 'password';
-const ELEMENT_NAME_AUTH_PASSWORD_CONF = 'password_conf';
-
-type FormData = {
-  email: string;
-  user_password: string;
-  password_conf: string;
-  confirmPassword: boolean;
-  showLogin: boolean;
-  showRegister: boolean;
-  showPasscodeForm: boolean;
-  strictSignin?: boolean;
-  ephemeral: boolean;
-  mergeLocal?: boolean;
-  url: string;
-  authenticating: boolean;
-  status: string;
-  passcode: string;
-  confirmPasscode: string;
-  changingPasscode: boolean;
-};
-
-type AccountMenuState = {
-  formData: Partial<FormData>;
-  appVersion: string;
-  passcodeAutoLockOptions: any;
-  user: any;
-  mutable: any;
-  importData: any;
-  encryptionStatusString?: string;
-  server?: string;
-  encryptionEnabled?: boolean;
-  selectedAutoLockInterval?: unknown;
-  showBetaWarning: boolean;
-  errorReportingEnabled: boolean;
-  syncInProgress: boolean;
-  syncError?: string;
-  showSessions: boolean;
-  errorReportingId: string | null;
-  keyStorageInfo: string | null;
-  protectionsDisabledUntil: string | null;
-};
-
-class AccountMenuCtrl extends PureViewCtrl<unknown, AccountMenuState> {
-  public appVersion: string;
-  /** @template */
-  private closeFunction?: () => void;
-  private removeProtectionLengthObserver?: () => void;
-
-  public passcodeInput!: JQLite;
-
-  /* @ngInject */
-  constructor($timeout: ng.ITimeoutService, appVersion: string) {
-    super($timeout);
-    this.appVersion = appVersion;
-  }
-
-  /** @override */
-  getInitialState() {
-    return {
-      appVersion: 'v' + ((window as any).electronAppVersion || this.appVersion),
-      passcodeAutoLockOptions: this.application
-        .getAutolockService()
-        .getAutoLockIntervalOptions(),
-      user: this.application.getUser(),
-      formData: {
-        mergeLocal: true,
-        ephemeral: false,
-      },
-      mutable: {},
-      showBetaWarning: false,
-      errorReportingEnabled:
-        storage.get(StorageKey.DisableErrorReporting) === false,
-      showSessions: false,
-      errorReportingId: errorReportingId(),
-      keyStorageInfo: StringUtils.keyStorageInfo(this.application),
-      importData: null,
-      syncInProgress: false,
-      protectionsDisabledUntil: this.getProtectionsDisabledUntil(),
-    };
-  }
-
-  getState() {
-    return this.state as AccountMenuState;
-  }
-
-  async onAppKeyChange() {
-    super.onAppKeyChange();
-    this.setState(this.refreshedCredentialState());
-  }
-
-  async onAppLaunch() {
-    super.onAppLaunch();
-    this.setState(this.refreshedCredentialState());
-    this.loadHost();
-    this.reloadAutoLockInterval();
-    this.refreshEncryptionStatus();
-  }
-
-  refreshedCredentialState() {
-    return {
-      user: this.application.getUser(),
-      canAddPasscode: !this.application.isEphemeralSession(),
-      hasPasscode: this.application.hasPasscode(),
-      showPasscodeForm: false,
-    };
-  }
-
-  async $onInit() {
-    super.$onInit();
-    this.setState({
-      showSessions: await this.application.userCanManageSessions(),
-    });
-
-    const sync = this.appState.sync;
-    this.autorun(() => {
-      this.setState({
-        syncInProgress: sync.inProgress,
-        syncError: sync.errorMessage,
-      });
-    });
-    this.autorun(() => {
-      this.setState({
-        showBetaWarning: this.appState.showBetaWarning,
-      });
-    });
-
-    this.removeProtectionLengthObserver = this.application.addEventObserver(
-      async () => {
-        this.setState({
-          protectionsDisabledUntil: this.getProtectionsDisabledUntil(),
-        });
-      },
-      ApplicationEvent.ProtectionSessionExpiryDateChanged
-    );
-  }
-
-  deinit() {
-    this.removeProtectionLengthObserver?.();
-    super.deinit();
-  }
-
-  close() {
-    this.$timeout(() => {
-      this.closeFunction?.();
-    });
-  }
-
-  hasProtections() {
-    return this.application.hasProtectionSources();
-  }
-
-  private getProtectionsDisabledUntil(): string | null {
-    const protectionExpiry = this.application.getProtectionSessionExpiryDate();
-    const now = new Date();
-    if (protectionExpiry > now) {
-      let f: Intl.DateTimeFormat;
-      if (isSameDay(protectionExpiry, now)) {
-        f = new Intl.DateTimeFormat(undefined, {
-          hour: 'numeric',
-          minute: 'numeric',
-        });
-      } else {
-        f = new Intl.DateTimeFormat(undefined, {
-          weekday: 'long',
-          day: 'numeric',
-          month: 'short',
-          hour: 'numeric',
-          minute: 'numeric',
-        });
-      }
-
-      return f.format(protectionExpiry);
-    }
-    return null;
-  }
-
-  async loadHost() {
-    const host = await this.application.getHost();
-    this.setState({
-      server: host,
-      formData: {
-        ...this.getState().formData,
-        url: host,
-      },
-    });
-  }
-
-  enableProtections() {
-    this.application.clearProtectionSession();
-  }
-
-  onHostInputChange() {
-    const url = this.getState().formData.url!;
-    this.application!.setCustomHost(url);
-  }
-
-  refreshEncryptionStatus() {
-    const hasUser = this.application!.hasAccount();
-    const hasPasscode = this.application!.hasPasscode();
-    const encryptionEnabled = hasUser || hasPasscode;
-
-    this.setState({
-      encryptionStatusString: hasUser
-        ? STRING_E2E_ENABLED
-        : hasPasscode
-        ? STRING_LOCAL_ENC_ENABLED
-        : STRING_ENC_NOT_ENABLED,
-      encryptionEnabled,
-      mutable: {
-        ...this.getState().mutable,
-        backupEncrypted: encryptionEnabled,
-      },
-    });
-  }
-
-  submitMfaForm() {
-    this.login();
-  }
-
-  blurAuthFields() {
-    const names = [
-      ELEMENT_NAME_AUTH_EMAIL,
-      ELEMENT_NAME_AUTH_PASSWORD,
-      ELEMENT_NAME_AUTH_PASSWORD_CONF,
-    ];
-    for (const name of names) {
-      const element = document.getElementsByName(name)[0];
-      if (element) {
-        element.blur();
-      }
-    }
-  }
-
-  submitAuthForm() {
-    if (
-      !this.getState().formData.email ||
-      !this.getState().formData.user_password
-    ) {
-      return;
-    }
-    this.blurAuthFields();
-    if (this.getState().formData.showLogin) {
-      this.login();
-    } else {
-      this.register();
-    }
-  }
-
-  async setFormDataState(formData: Partial<FormData>) {
-    return this.setState({
-      formData: {
-        ...this.getState().formData,
-        ...formData,
-      },
-    });
-  }
-
-  async login() {
-    await this.setFormDataState({
-      status: STRING_GENERATING_LOGIN_KEYS,
-      authenticating: true,
-    });
-    const formData = this.getState().formData;
-    const response = await this.application!.signIn(
-      formData.email!,
-      formData.user_password!,
-      formData.strictSignin,
-      formData.ephemeral,
-      formData.mergeLocal
-    );
-    const error = response.error;
-    if (!error) {
-      await this.setFormDataState({
-        authenticating: false,
-        user_password: undefined,
-      });
-      this.close();
-      return;
-    }
-    await this.setFormDataState({
-      showLogin: true,
-      status: undefined,
-      user_password: undefined,
-    });
-    if (error.message) {
-      this.application!.alertService!.alert(error.message);
-    }
-    await this.setFormDataState({
-      authenticating: false,
-    });
-  }
-
-  async register() {
-    const confirmation = this.getState().formData.password_conf;
-    if (confirmation !== this.getState().formData.user_password) {
-      this.application!.alertService!.alert(STRING_NON_MATCHING_PASSWORDS);
-      return;
-    }
-    await this.setFormDataState({
-      confirmPassword: false,
-      status: STRING_GENERATING_REGISTER_KEYS,
-      authenticating: true,
-    });
-    const response = await this.application!.register(
-      this.getState().formData.email!,
-      this.getState().formData.user_password!,
-      this.getState().formData.ephemeral,
-      this.getState().formData.mergeLocal
-    );
-    const error = response.error;
-    if (error) {
-      await this.setFormDataState({
-        status: undefined,
-      });
-      await this.setFormDataState({
-        authenticating: false,
-      });
-      this.application!.alertService!.alert(error.message);
-    } else {
-      await this.setFormDataState({ authenticating: false });
-      this.close();
-    }
-  }
-
-  async mergeLocalChanged() {
-    if (!this.getState().formData.mergeLocal) {
-      this.setFormDataState({
-        mergeLocal: !(await confirmDialog({
-          text: STRING_ACCOUNT_MENU_UNCHECK_MERGE,
-          confirmButtonStyle: 'danger',
-        })),
-      });
-    }
-  }
-
-  openPasswordWizard() {
-    this.close();
-    this.application!.presentPasswordWizard(PasswordWizardType.ChangePassword);
-  }
-
-  openSessionsModal() {
-    this.close();
-    this.appState.openSessionsModal();
-  }
-
-  signOut() {
-    this.appState.accountMenu.setSigningOut(true);
-  }
-
-  showRegister() {
-    this.setFormDataState({
-      showRegister: true,
-    });
-  }
-
-  async readFile(file: File): Promise<any> {
-    return new Promise((resolve) => {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        try {
-          const data = JSON.parse(e.target!.result as string);
-          resolve(data);
-        } catch (e) {
-          this.application!.alertService!.alert(STRING_INVALID_IMPORT_FILE);
-        }
-      };
-      reader.readAsText(file);
-    });
-  }
-
-  /**
-   * @template
-   */
-  async importFileSelected(files: File[]) {
-    const file = files[0];
-    const data = await this.readFile(file);
-    if (!data) {
-      return;
-    }
-    if (data.version || data.auth_params || data.keyParams) {
-      const version =
-        data.version || data.keyParams?.version || data.auth_params?.version;
-      if (
-        this.application.protocolService.supportedVersions().includes(version)
-      ) {
-        await this.performImport(data);
-      } else {
-        await this.setState({ importData: null });
-        void alertDialog({ text: STRING_UNSUPPORTED_BACKUP_FILE_VERSION });
-      }
-    } else {
-      await this.performImport(data);
-    }
-  }
-
-  async performImport(data: BackupFile) {
-    await this.setState({
-      importData: {
-        ...this.getState().importData,
-        loading: true,
-      },
-    });
-    const result = await this.application.importData(data);
-    this.setState({
-      importData: null,
-    });
-    if (!result) {
-      return;
-    } else if ('error' in result) {
-      void alertDialog({
-        text: result.error,
-      });
-    } else if (result.errorCount) {
-      void alertDialog({
-        text: StringImportError(result.errorCount),
-      });
-    } else {
-      void alertDialog({
-        text: STRING_IMPORT_SUCCESS,
-      });
-    }
-  }
-
-  async downloadDataArchive() {
-    this.application
-      .getArchiveService()
-      .downloadBackup(this.getState().mutable.backupEncrypted);
-  }
-
-  notesAndTagsCount() {
-    return this.application.getItems([ContentType.Note, ContentType.Tag])
-      .length;
-  }
-
-  encryptionStatusForNotes() {
-    const length = this.notesAndTagsCount();
-    return length + '/' + length + ' notes and tags encrypted';
-  }
-
-  async reloadAutoLockInterval() {
-    const interval = await this.application!.getAutolockService().getAutoLockInterval();
-    this.setState({
-      selectedAutoLockInterval: interval,
-    });
-  }
-
-  async selectAutoLockInterval(interval: number) {
-    if (!(await this.application.authorizeAutolockIntervalChange())) {
-      return;
-    }
-    await this.application!.getAutolockService().setAutoLockInterval(interval);
-    this.reloadAutoLockInterval();
-  }
-
-  hidePasswordForm() {
-    this.setFormDataState({
-      showLogin: false,
-      showRegister: false,
-      user_password: undefined,
-      password_conf: undefined,
-    });
-  }
-
-  hasPasscode() {
-    return this.application!.hasPasscode();
-  }
-
-  addPasscodeClicked() {
-    this.setFormDataState({
-      showPasscodeForm: true,
-    });
-  }
-
-  async submitPasscodeForm() {
-    const passcode = this.getState().formData.passcode;
-
-    if (!passcode || passcode.length === 0) {
-      await alertDialog({
-        text: Strings.enterPasscode,
-      });
-      this.passcodeInput[0].focus();
-      return;
-    }
-
-    if (passcode !== this.getState().formData.confirmPasscode) {
-      await alertDialog({
-        text: STRING_NON_MATCHING_PASSCODES,
-      });
-      this.passcodeInput[0].focus();
-      return;
-    }
-
-    await preventRefreshing(
-      STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_CHANGE,
-      async () => {
-        const successful = this.application.hasPasscode()
-          ? await this.application.changePasscode(passcode)
-          : await this.application.addPasscode(passcode);
-        if (!successful) {
-          this.passcodeInput[0].focus();
-        }
-      }
-    );
-    this.setFormDataState({
-      passcode: undefined,
-      confirmPasscode: undefined,
-      showPasscodeForm: false,
-    });
-    this.refreshEncryptionStatus();
-  }
-
-  async changePasscodePressed() {
-    this.getState().formData.changingPasscode = true;
-    this.addPasscodeClicked();
-  }
-
-  async removePasscodePressed() {
-    await preventRefreshing(
-      STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_REMOVAL,
-      async () => {
-        if (await this.application!.removePasscode()) {
-          await this.application
-            .getAutolockService()
-            .deleteAutolockPreference();
-          await this.reloadAutoLockInterval();
-          this.refreshEncryptionStatus();
-        }
-      }
-    );
-  }
-
-  openErrorReportingDialog() {
-    alertDialog({
-      title: 'Data sent during automatic error reporting',
-      text: `
-        We use <a target="_blank" rel="noreferrer" href="https://www.bugsnag.com/">Bugsnag</a>
-        to automatically report errors that occur while the app is running. See
-        <a target="_blank" rel="noreferrer" href="https://docs.bugsnag.com/platforms/javascript/#sending-diagnostic-data">
-          this article, paragraph 'Browser' under 'Sending diagnostic data',
-        </a>
-        to see what data is included in error reports.
-        <br><br>
-        Error reports never include IP addresses and are fully
-        anonymized. We use error reports to be alerted when something in our
-        code is causing unexpected errors and crashes in your application
-        experience.
-      `,
-    });
-  }
-
-  toggleErrorReportingEnabled() {
-    if (this.state.errorReportingEnabled) {
-      disableErrorReporting();
-    } else {
-      enableErrorReporting();
-    }
-    if (!this.state.syncInProgress) {
-      window.location.reload();
-    }
-  }
-
-  isDesktopApplication() {
-    return isDesktopApplication();
-  }
-}
-
-export class AccountMenu extends WebDirective {
-  constructor() {
-    super();
-    this.restrict = 'E';
-    this.template = template;
-    this.controller = AccountMenuCtrl;
-    this.controllerAs = 'self';
-    this.bindToController = true;
-    this.scope = {
-      closeFunction: '&',
-      application: '=',
-    };
-  }
-}
--- a/app/assets/javascripts/directives/views/index.ts
+++ b/app/assets/javascripts/directives/views/index.ts
@@ -1,4 +1,3 @@
-export { AccountMenu } from './accountMenu';
 export { ActionsMenu } from './actionsMenu';
 export { ComponentModal } from './componentModal';
 export { ComponentView } from './componentView';
--- a/app/assets/javascripts/ui_models/app_state/account_menu_state.ts
+++ b/app/assets/javascripts/ui_models/app_state/account_menu_state.ts
@@ -1,29 +1,112 @@
-import { action, makeObservable, observable } from "mobx";
+import { action, computed, makeObservable, observable, runInAction } from 'mobx';
+import { ApplicationEvent, ContentType } from '@standardnotes/snjs';
+import { WebApplication } from '@/ui_models/application';
+import { SNItem } from '@standardnotes/snjs/dist/@types/models/core/item';

 export class AccountMenuState {
  show = false;
  signingOut = false;
+  server: string | undefined = undefined;
+  notesAndTags: SNItem[] = [];
+  isEncryptionEnabled = false;
+  encryptionStatusString = '';
+  isBackupEncrypted = false;
+  showLogin = false;
+  showRegister = false;

-  constructor() {
+  constructor(
+    private application: WebApplication,
+    private appEventListeners: (() => void)[]
+  ) {
    makeObservable(this, {
      show: observable,
      signingOut: observable,
+      server: observable,
+      notesAndTags: observable,
+      isEncryptionEnabled: observable,
+      encryptionStatusString: observable,
+      isBackupEncrypted: observable,
+      showLogin: observable,
+      showRegister: observable,

      setShow: action,
      toggleShow: action,
      setSigningOut: action,
+      setIsEncryptionEnabled: action,
+      setEncryptionStatusString: action,
+      setIsBackupEncrypted: action,
+
+      notesAndTagsCount: computed
    });
+
+    this.addAppLaunchedEventObserver();
+    this.streamNotesAndTags();
  }

+  addAppLaunchedEventObserver = (): void => {
+    this.appEventListeners.push(
+      this.application.addEventObserver(async () => {
+        runInAction(() => {
+          this.setServer(this.application.getHost());
+        });
+      }, ApplicationEvent.Launched)
+    );
+  };
+
+  streamNotesAndTags = (): void => {
+    this.appEventListeners.push(
+      this.application.streamItems(
+        [ContentType.Note, ContentType.Tag],
+        () => {
+          runInAction(() => {
+            this.notesAndTags = this.application.getItems([ContentType.Note, ContentType.Tag]);
+          });
+        }
+      )
+    );
+  };
+
  setShow = (show: boolean): void => {
    this.show = show;
-  }
+  };
+
+  closeAccountMenu = (): void => {
+    this.setShow(false);
+  };

  setSigningOut = (signingOut: boolean): void => {
    this.signingOut = signingOut;
-  }
+  };
+
+  setServer = (server: string | undefined): void => {
+    this.server = server;
+  };
+
+  setIsEncryptionEnabled = (isEncryptionEnabled: boolean): void => {
+    this.isEncryptionEnabled = isEncryptionEnabled;
+  };
+
+  setEncryptionStatusString = (encryptionStatusString: string): void => {
+    this.encryptionStatusString = encryptionStatusString;
+  };
+
+  setIsBackupEncrypted = (isBackupEncrypted: boolean): void => {
+    this.isBackupEncrypted = isBackupEncrypted;
+  };
+
+  setShowLogin = (showLogin: boolean): void => {
+    this.showLogin = showLogin;
+  };
+
+  setShowRegister = (showRegister: boolean): void => {
+    this.showRegister = showRegister;
+  };

  toggleShow = (): void => {
    this.show = !this.show;
+  };
+
+  get notesAndTagsCount(): number {
+    return this.notesAndTags.length;
  }
 }
--- a/app/assets/javascripts/ui_models/app_state/app_state.ts
+++ b/app/assets/javascripts/ui_models/app_state/app_state.ts
@@ -14,7 +14,6 @@ import { Editor } from '@/ui_models/editor';
 import { action, makeObservable, observable } from 'mobx';
 import { Bridge } from '@/services/bridge';
 import { storage, StorageKey } from '@/services/localStorage';
-import { AccountMenuState } from './account_menu_state';
 import { ActionsMenuState } from './actions_menu_state';
 import { NoteTagsState } from './note_tags_state';
 import { NoAccountWarningState } from './no_account_warning_state';
@@ -22,6 +21,7 @@ import { SyncState } from './sync_state';
 import { SearchOptionsState } from './search_options_state';
 import { NotesState } from './notes_state';
 import { TagsState } from './tags_state';
+import { AccountMenuState } from '@/ui_models/app_state/account_menu_state';
 import { PreferencesState } from './preferences_state';

 export enum AppStateEvent {
@@ -62,7 +62,7 @@ export class AppState {
  onVisibilityChange: any;
  selectedTag?: SNTag;
  showBetaWarning: boolean;
-  readonly accountMenu = new AccountMenuState();
+  readonly accountMenu: AccountMenuState;
  readonly actionsMenu = new ActionsMenuState();
  readonly preferences = new PreferencesState();
  readonly noAccountWarning: NoAccountWarningState;
@@ -103,6 +103,10 @@ export class AppState {
      application,
      this.appEventObserverRemovers
    );
+    this.accountMenu = new AccountMenuState(
+      application,
+      this.appEventObserverRemovers,
+    );
    this.searchOptions = new SearchOptionsState(
      application,
      this.appEventObserverRemovers
--- a/app/assets/javascripts/views/footer/footer-view.pug
+++ b/app/assets/javascripts/views/footer/footer-view.pug
@@ -13,11 +13,11 @@
        .sk-app-bar-item-column
          .sk-label.title(ng-class='{red: ctrl.hasError}') Account
        account-menu(
-          close-function='ctrl.closeAccountMenu()',
          ng-click='$event.stopPropagation()',
-          ng-if='ctrl.showAccountMenu',
+          app-state='ctrl.appState'
          application='ctrl.application'
-          )
+          ng-if='ctrl.showAccountMenu',
+        )
      .sk-app-bar-item(
        ng-click='ctrl.clickPreferences()'
        ng-if='ctrl.appState.enableUnfinishedFeatures'
--- a/app/assets/stylesheets/_preferences.scss
+++ b/app/assets/stylesheets/_preferences.scss
@@ -30,6 +30,7 @@
    @extend .border-gray-300;
    @extend .border-solid;
    @extend .border-1;
+    @extend .bg-default;
  }
 }

--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -4,6 +4,14 @@
  height: 90vh;
 }

+.hidden {
+  display: none;
+}
+
+.hover\:underline:hover {
+  text-decoration: underline;
+}
+
 .sn-icon {
  @extend .h-5;
  @extend .w-5;
--- a/app/assets/stylesheets/_ui.scss
+++ b/app/assets/stylesheets/_ui.scss
@@ -193,6 +193,10 @@ $screen-md-max:              ($screen-lg-min - 1) !default;

 .cursor-pointer {
  cursor: pointer;
+
+  input[type="checkbox"] {
+    cursor: pointer;
+  }
 }

 .fill-current {
--- a/app/assets/templates/directives/account-menu.pug
+++ b/app/assets/templates/directives/account-menu.pug
@@ -1,324 +0,0 @@
-.sn-component
-  #account-panel.sk-panel
-    .sk-panel-header
-      .sk-panel-header-title Account
-      a.sk-a.info.close-button(ng-click='self.close()') Close
-    .sk-panel-content
-      .sk-panel-section.sk-panel-hero(
-        ng-if=`
-          !self.state.user &&
-          !self.state.formData.showLogin &&
-          !self.state.formData.showRegister`
-        )
-        .sk-panel-row
-          .sk-h1 Sign in or register to enable sync and end-to-end encryption.
-        .flex.my-1
-          button(
-            class="sn-button info flex-grow text-base py-3 mr-1.5"
-            ng-click='self.state.formData.showLogin = true'
-          ) Sign In
-          button(
-            class="sn-button info flex-grow text-base py-3 ml-1.5"
-            ng-click='self.showRegister()'
-          ) Register
-        .sk-panel-row.sk-p
-          | Standard Notes is free on every platform, and comes
-          | standard with sync and encryption.
-      .sk-panel-section(ng-if=`
-          self.state.formData.showLogin ||
-          self.state.formData.showRegister`
-        )
-        .sk-panel-section-title
-          | {{self.state.formData.showLogin ? "Sign In" : "Register"}}
-        form.sk-panel-form(ng-submit='self.submitAuthForm()' novalidate)
-          .sk-panel-section
-            input.sk-input.contrast(
-              name='email',
-              ng-model='self.state.formData.email',
-              ng-model-options='{allowInvalid: true}',
-              placeholder='Email',
-              required='',
-              should-focus='true',
-              sn-autofocus='true',
-              spellcheck='false',
-              type='email'
-              )
-            input.sk-input.contrast(
-              name='password',
-              ng-model='self.state.formData.user_password',
-              placeholder='Password',
-              required='',
-              sn-enter='self.submitAuthForm()',
-              type='password'
-              )
-            input.sk-input.contrast(
-              name='password_conf',
-              ng-if='self.state.formData.showRegister',
-              ng-model='self.state.formData.password_conf',
-              placeholder='Confirm Password',
-              required='',
-              sn-enter='self.submitAuthForm()',
-              type='password'
-              )
-            .sk-panel-row
-            a.sk-panel-row.sk-bold(
-              ng-click=`
-                self.state.formData.showAdvanced = !self.state.formData.showAdvanced
-                `
-              )
-              | Advanced Options
-          .sk-notification.unpadded.contrast.advanced-options.sk-panel-row(
-            ng-if='self.state.formData.showAdvanced'
-            )
-            .sk-panel-column.stretch
-              .sk-notification-title.sk-panel-row.padded-row Advanced Options
-              .bordered-row.padded-row
-                label.sk-label Sync Server Domain
-                input.sk-input.sk-base(
-                  name='server',
-                  ng-model='self.state.formData.url',
-                  ng-change='self.onHostInputChange()'
-                  placeholder='Server URL',
-                  required='',
-                  type='text'
-                  )
-              label.sk-label.padded-row.sk-panel-row.justify-left(
-                ng-if='self.state.formData.showLogin'
-                )
-                .sk-horizontal-group.tight
-                  input.sk-input(
-                    ng-model='self.state.formData.strictSignin',
-                    type='checkbox'
-                    )
-                  p.sk-p Use strict sign in
-                  span
-                    a.info(
-                      href='https://standardnotes.com/help/security',
-                      rel='noopener',
-                      target='_blank'
-                      ) (Learn more)
-          .sk-panel-section.form-submit(ng-if='!self.state.formData.authenticating')
-            button.sn-button.info.text-base.py-3.text-center(
-              type="submit"
-              ng-disabled='self.state.formData.authenticating'
-            ) {{self.state.formData.showLogin ? "Sign In" : "Register"}}
-          .sk-notification.neutral(ng-if='self.state.formData.showRegister')
-            .sk-notification-title No Password Reset.
-            .sk-notification-text
-              | Because your notes are encrypted using your password,
-              | Standard Notes does not have a password reset option.
-              | You cannot forget your password.
-          .sk-panel-section.no-bottom-pad(ng-if='self.state.formData.status')
-            .sk-horizontal-group
-              .sk-spinner.small.neutral
-              .sk-label {{self.state.formData.status}}
-          .sk-panel-section.no-bottom-pad(ng-if='!self.state.formData.authenticating')
-            label.sk-panel-row.justify-left
-              .sk-horizontal-group.tight
-                input(
-                  ng-false-value='true',
-                  ng-model='self.state.formData.ephemeral',
-                  ng-true-value='false',
-                  type='checkbox'
-                  )
-                p.sk-p Stay signed in
-            label.sk-panel-row.justify-left(ng-if='self.notesAndTagsCount() > 0')
-              .sk-horizontal-group.tight
-                input(
-                  ng-bind='true',
-                  ng-change='self.mergeLocalChanged()',
-                  ng-model='self.state.formData.mergeLocal',
-                  type='checkbox'
-                  )
-                p.sk-p Merge local data ({{self.notesAndTagsCount()}} notes and tags)
-      div(
-        ng-if=`
-          !self.state.formData.showLogin &&
-          !self.state.formData.showRegister`
-        )
-        .sk-panel-section(ng-if='self.state.user')
-          .sk-notification.danger(ng-if='self.state.syncError')
-            .sk-notification-title Sync Unreachable
-            .sk-notification-text
-              | Hmm...we can't seem to sync your account.
-              | The reason: {{self.state.syncError}}
-            a.sk-a.info-contrast.sk-bold.sk-panel-row(
-              href='https://standardnotes.com/help',
-              rel='noopener',
-              target='_blank'
-              ) Need help?
-          .sk-panel-row
-            .sk-panel-column
-              .sk-h1.sk-bold.wrap {{self.state.user.email}}
-              .sk-subtitle.neutral {{self.state.server}}
-          .sk-panel-row
-          a.sk-a.info.sk-panel-row.condensed(
-            ng-click="self.openPasswordWizard()"
-          ) Change Password
-          a.sk-a.info.sk-panel-row.condensed(
-            ng-click="self.openSessionsModal()"
-          ) Manage Sessions
-        .sk-panel-section
-          .sk-panel-section-title Encryption
-          .sk-panel-section-subtitle.info(ng-if='self.state.encryptionEnabled')
-            | {{self.encryptionStatusForNotes()}}
-          p.sk-p
-            | {{self.state.encryptionStatusString}}
-        .sk-panel-section(ng-if="self.hasProtections()")
-          .sk-panel-section-title Protections
-          .sk-panel-section-subtitle.info(ng-if="self.state.protectionsDisabledUntil")
-            | Protections are disabled until {{self.state.protectionsDisabledUntil}}
-          .sk-panel-section-subtitle.info(ng-if="!self.state.protectionsDisabledUntil")
-            | Protections are enabled
-          p.sk-p
-            | Actions like viewing protected notes, exporting decrypted backups,
-            | or revoking an active session, require additional authentication
-            | like entering your account password or application passcode.
-          .sk-panel-row(ng-if="self.state.protectionsDisabledUntil")
-            button.sn-button.small.info(ng-click="self.enableProtections()")
-             | Enable protections
-        .sk-panel-section
-          .sk-panel-section-title Passcode Lock
-          div(ng-if='!self.state.hasPasscode')
-            div(ng-if='self.state.canAddPasscode')
-              .sk-panel-row(ng-if='!self.state.formData.showPasscodeForm')
-                button.sn-button.small.info(
-                  ng-click='self.addPasscodeClicked(); $event.stopPropagation();'
-                ) Add Passcode
-              p.sk-p
-                | Add a passcode to lock the application and
-                | encrypt on-device key storage.
-              p(ng-if='self.state.keyStorageInfo')
-                | {{self.state.keyStorageInfo}}
-            div(ng-if='!self.state.canAddPasscode')
-              p.sk-p
-                | Adding a passcode is not supported in temporary sessions. Please sign
-                | out, then sign back in with the "Stay signed in" option checked.
-          form.sk-panel-form(
-            ng-if='self.state.formData.showPasscodeForm',
-            ng-submit='self.submitPasscodeForm()'
-            )
-            .sk-panel-row
-            input.sk-input.contrast(
-              ng-ref='self.passcodeInput'
-              ng-model='self.state.formData.passcode'
-              placeholder='Passcode'
-              should-focus='true'
-              sn-autofocus='true'
-              type='password'
-            )
-            input.sk-input.contrast(
-              ng-model='self.state.formData.confirmPasscode',
-              placeholder='Confirm Passcode',
-              type='password'
-              )
-            button.sn-button.small.info.mt-2(type='submit') Set Passcode
-            button.sn-button.small.outlined.ml-2(
-              ng-click='self.state.formData.showPasscodeForm = false'
-            ) Cancel
-          div(ng-if='self.state.hasPasscode && !self.state.formData.showPasscodeForm')
-            .sk-panel-section-subtitle.info Passcode lock is enabled
-            .sk-notification.contrast
-              .sk-notification-title Options
-              .sk-notification-text
-                .sk-panel-row
-                  .sk-horizontal-group
-                    .sk-h4.sk-bold Autolock
-                    a.sk-a.info(
-                      ng-class=`{
-                        'boxed' : option.value == self.state.selectedAutoLockInterval
-                        }`,
-                      ng-click='self.selectAutoLockInterval(option.value)',
-                      ng-repeat='option in self.state.passcodeAutoLockOptions'
-                      )
-                      | {{option.label}}
-                .sk-p The autolock timer begins when the window or tab loses focus.
-                .sk-panel-row
-                a.sk-a.info.sk-panel-row.condensed(
-                  ng-click='self.changePasscodePressed()'
-                  ) Change Passcode
-                a.sk-a.danger.sk-panel-row.condensed(
-                  ng-click='self.removePasscodePressed()'
-                  ) Remove Passcode
-        .sk-panel-section(ng-if='!self.state.importData.loading')
-          .sk-panel-section-title Data Backups
-          .sk-p
-            | Download a backup of all your data.
-          form.sk-panel-form.sk-panel-row(ng-if='self.state.encryptionEnabled')
-            .sk-input-group
-              label.sk-horizontal-group.tight
-                input(
-                  ng-change='self.state.mutable.backupEncrypted = true',
-                  ng-model='self.state.mutable.backupEncrypted',
-                  ng-value='true',
-                  type='radio'
-                  )
-                p.sk-p Encrypted
-              label.sk-horizontal-group.tight
-                input(
-                  ng-change='self.state.mutable.backupEncrypted = false',
-                  ng-model='self.state.mutable.backupEncrypted',
-                  ng-value='false',
-                  type='radio'
-                  )
-                p.sk-p Decrypted
-          .sk-panel-row
-          .flex
-            button.sn-button.small.info(ng-click='self.downloadDataArchive()')
-              | Download Backup
-            label.sn-button.small.flex.items-center.info.ml-2
-              input(
-                file-change='->',
-                handler='self.importFileSelected(files)',
-                style='display: none;',
-                type='file'
-              )
-              | Import Backup
-          p.mt-5(ng-if='self.isDesktopApplication()')
-            | Backups are automatically created on desktop and can be managed
-            | via the "Backups" top-level menu.
-          .sk-panel-row
-            .sk-spinner.small.info(ng-if='self.state.importData.loading')
-        .sk-panel-section
-          .sk-panel-section-title Error Reporting
-          .sk-panel-section-subtitle.info
-            | Automatic error reporting is {{ self.state.errorReportingEnabled ? 'enabled' : 'disabled' }}
-          p.sk-p
-            | Help us improve Standard Notes by automatically submitting
-            | anonymized error reports.
-          p.sk-p.selectable(ng-if="self.state.errorReportingId")
-            | Your random identifier is
-            strong  {{ self.state.errorReportingId }}
-          p.sk-p(ng-if="self.state.errorReportingId")
-            | Disabling error reporting will remove that identifier from your
-            | local storage, and a new identifier will be created should you
-            | decide to enable error reporting again in the future.
-          .sk-panel-row
-            button(ng-click="self.toggleErrorReportingEnabled()").sn-button.small.info
-              | {{ self.state.errorReportingEnabled ? 'Disable' : 'Enable'}} Error Reporting
-          .sk-panel-row
-            a(ng-click="self.openErrorReportingDialog()").sk-a What data is being sent?
-    confirm-signout(
-      app-state='self.appState'
-      application='self.application'
-    )
-    .sk-panel-footer
-      .sk-panel-row
-        .sk-p.left.neutral
-          span {{self.state.appVersion}}
-          span(ng-if="self.state.showBetaWarning")
-            span  (
-            a.sk-a(ng-click="self.appState.disableBetaWarning()") Hide beta warning
-            span )
-        a.sk-a.right(
-          ng-click='self.hidePasswordForm()',
-          ng-if='self.state.formData.showLogin || self.state.formData.showRegister'
-          )
-          | Cancel
-        a.sk-a.right.danger.capitalize(
-          ng-click='self.signOut()',
-          ng-if=`
-              !self.state.formData.showLogin &&
-              !self.state.formData.showRegister`
-            )
-          | {{ self.state.user ? "Sign out" : "Clear session data" }}
--- a/app/assets/templates/directives/input-modal.pug
+++ b/app/assets/templates/directives/input-modal.pug
@@ -14,9 +14,9 @@
                .sk-panel-column.stretch
                  form(ng-submit="ctrl.submit()")
                    input.sk-input.contrast(
-                      ng-model="ctrl.formData.input" 
-                      should-focus="true" 
-                      sn-autofocus="true" 
+                      ng-model="ctrl.formData.input"
+                      should-focus="true"
+                      sn-autofocus="true"
                      type="{{ctrl.type}}"
                      )
          .sk-panel-footer
--- a/app/views/application/app.html.erb
+++ b/app/views/application/app.html.erb
@@ -34,7 +34,7 @@
      window._extensions_manager_location = "<%= ENV['EXTENSIONS_MANAGER_LOCATION'] %>";
      window._batch_manager_location = "<%= ENV['BATCH_MANAGER_LOCATION'] %>";
      window._bugsnag_api_key = "<%= ENV['BUGSNAG_API_KEY'] %>";
-      window._enable_unfinished_features = "<%= ENV['ENABLE_UNFINISHED_FEATURES'] %>"
+      window._enable_unfinished_features = "<%= ENV['ENABLE_UNFINISHED_FEATURES'] %>" === 'true';
    </script>

    <% if Rails.env.development? %>
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "standard-notes-web",
-  "version": "3.8.15",
+  "version": "3.8.16",
  "license": "AGPL-3.0-or-later",
  "repository": {
    "type": "git",
@@ -55,7 +55,7 @@
    "pug-loader": "^2.4.0",
    "sass-loader": "^8.0.2",
    "serve-static": "^1.14.1",
-    "sn-stylekit": "5.2.3",
+    "sn-stylekit": "5.2.5",
    "ts-loader": "^8.0.17",
    "typescript": "4.2.3",
    "typescript-eslint": "0.0.1-alpha.0",
@@ -71,7 +71,7 @@
    "@reach/checkbox": "^0.13.2",
    "@reach/dialog": "^0.13.0",
    "@standardnotes/sncrypto-web": "1.2.10",
-    "@standardnotes/snjs": "2.7.15",
+    "@standardnotes/snjs": "2.7.17",
    "mobx": "^6.1.6",
    "mobx-react-lite": "^3.2.0",
    "preact": "^10.5.12"
--- a/yarn.lock
+++ b/yarn.lock
@@ -2029,10 +2029,10 @@
    "@standardnotes/sncrypto-common" "^1.2.7"
    libsodium-wrappers "^0.7.8"

-"@standardnotes/snjs@2.7.15":
-  version "2.7.15"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.7.15.tgz#abb03ff9c43a075ac919d0505f48a60a9202410d"
-  integrity sha512-cJFNp/rsEKjig6HFwZhbBe5gd3TLor/kBFHeaExCXHTltNs2WvIAergXN0TLqU9XMK0qpiQrUXhUrs0l5xauAw==
+"@standardnotes/snjs@2.7.17":
+  version "2.7.17"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.7.17.tgz#e83986e637dbfdb9ac0d94270c6a3d7391de88ce"
+  integrity sha512-M030ex34TTMXWTTWu2ViSYEHKTScf1xbC03IIysxC9BRYpwAh996V5RQQiUW3jiW0XMHXxFYN/XhKGYHn5bixw==
  dependencies:
    "@standardnotes/auth" "^2.0.0"
    "@standardnotes/sncrypto-common" "^1.2.9"
@@ -7908,10 +7908,10 @@ slice-ansi@^4.0.0:
    astral-regex "^2.0.0"
    is-fullwidth-code-point "^3.0.0"

-sn-stylekit@5.2.3:
-  version "5.2.3"
-  resolved "https://registry.yarnpkg.com/sn-stylekit/-/sn-stylekit-5.2.3.tgz#24246471c03cde5129bda51a08fabef4d3c4880c"
-  integrity sha512-hzziH89IY2UjmGh8OYgapb+/QVD6P6NNjnoyzSyveOh671MM9Z4IaPLZTJckgxJVjV0q7G495Pxfta5r4CSRDQ==
+sn-stylekit@5.2.5:
+  version "5.2.5"
+  resolved "https://registry.yarnpkg.com/sn-stylekit/-/sn-stylekit-5.2.5.tgz#85a28da395fedbaae9f7a91c48648042cdcc8052"
+  integrity sha512-8J+8UtRvukyJOBp79RcD4IZrvJJbjYY6EdN4N125K0xW84nDjgURuPuCjwm4lnp6vcXODU6r5d3JMDJoXYq8wA==
  dependencies:
    "@reach/listbox" "^0.15.0"
    "@reach/menu-button" "^0.15.1"