feat: two factor authentication segment in preferences with mocked state (#600)

app/assets/javascripts/preferences/PreferencesMenu.tsx

@@ -0,0 +1,19 @@
+import { observer } from 'mobx-react-lite';
+import { FunctionComponent } from 'preact';
+import { MenuItem } from './components';
+import { Preferences } from './models/preferences';
+
+export const PreferencesMenu: FunctionComponent<{ preferences: Preferences }> =
+  observer(({ preferences }) => (
+    <div className="min-w-55 overflow-y-auto flex flex-col px-3 py-6">
+      {preferences.menuItems.map((pref) => (
+        <MenuItem
+          key={pref.id}
+          iconType={pref.icon}
+          label={pref.label}
+          selected={pref.selected}
+          onClick={() => preferences.selectPane(pref.id)}
+        />
+      ))}
+    </div>
+  ));

app/assets/javascripts/preferences/PreferencesView.tsx

@@ -0,0 +1,81 @@
+import { RoundIconButton } from '@/components/RoundIconButton';
+import { TitleBar, Title } from '@/components/TitleBar';
+import { FunctionComponent } from 'preact';
+import { Preferences } from './models/preferences';
+import { PreferencesMenu } from './PreferencesMenu';
+import { HelpAndFeedback } from './panes/HelpFeedback';
+import { observer } from 'mobx-react-lite';
+import { Security } from './panes/Security';
+
+interface PreferencesViewProps {
+  close: () => void;
+}
+
+const PaneSelector: FunctionComponent<{
+  prefs: Preferences;
+}> = observer(({ prefs }) => {
+  switch (prefs.selectedPaneId) {
+    case 'general':
+      return null;
+    case 'account':
+      return null;
+    case 'appearance':
+      return null;
+    case 'security':
+      return <Security prefs={prefs} />;
+    case 'listed':
+      return null;
+    case 'shortcuts':
+      return null;
+    case 'accessibility':
+      return null;
+    case 'get-free-month':
+      return null;
+    case 'help-feedback':
+      return <HelpAndFeedback />;
+  }
+});
+
+const PreferencesCanvas: FunctionComponent<{
+  preferences: Preferences;
+}> = observer(({ preferences: prefs }) => (
+  <div className="flex flex-row flex-grow min-h-0 justify-between">
+    <PreferencesMenu preferences={prefs}></PreferencesMenu>
+    <PaneSelector prefs={prefs} />
+  </div>
+));
+
+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>
+          <RoundIconButton
+            onClick={() => {
+              close();
+            }}
+            type="normal"
+            icon="close"
+          />
+        </TitleBar>
+        <PreferencesCanvas preferences={prefs} />
+      </div>
+    );
+  }
+);
+
+export interface PreferencesWrapperProps {
+  appState: { preferences: { isOpen: boolean; closePreferences: () => void } };
+}
+
+export const PreferencesViewWrapper: FunctionComponent<PreferencesWrapperProps> =
+  observer(({ appState }) => {
+    if (!appState.preferences.isOpen) return null;
+    return (
+      <PreferencesView close={() => appState.preferences.closePreferences()} />
+    );
+  });

app/assets/javascripts/preferences/components/Content.tsx

@@ -0,0 +1,28 @@
+import { FunctionComponent } from 'preact';
+
+export const Title: FunctionComponent = ({ children }) => (
+  <h2 className="text-base m-0 mb-1">{children}</h2>
+);
+
+export const Subtitle: FunctionComponent = ({ children }) => (
+  <h4 className="font-medium text-sm m-0 mb-1">{children}</h4>
+);
+
+export const Text: FunctionComponent = ({ children }) => (
+  <p className="text-xs">{children}</p>
+);
+
+export const Button: FunctionComponent<{ 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>
+);

app/assets/javascripts/preferences/components/MenuItem.tsx

@@ -0,0 +1,27 @@
+import { Icon, IconType } from '@/components/Icon';
+import { FunctionComponent } from 'preact';
+
+interface Props {
+  iconType: IconType;
+  label: string;
+  selected: boolean;
+  onClick: () => void;
+}
+
+export const MenuItem: FunctionComponent<Props> = ({
+  iconType,
+  label,
+  selected,
+  onClick,
+}) => (
+  <div
+    className={`preferences-menu-item ${selected ? 'selected' : ''}`}
+    onClick={(e) => {
+      e.preventDefault();
+      onClick();
+    }}
+  >
+    <Icon className="icon" type={iconType} />
+    {label}
+  </div>
+);

app/assets/javascripts/preferences/components/Pane.tsx

@@ -0,0 +1,35 @@
+import { FunctionComponent } from 'preact';
+
+const HorizontalLine: FunctionComponent<{ index: number; length: number }> = ({
+  index,
+  length,
+}) =>
+  index < length - 1 ? (
+    <hr className="h-1px w-full bg-border no-border" />
+  ) : null;
+
+export const PreferencesSegment: FunctionComponent = ({ children }) => (
+  <div className="flex flex-col">{children}</div>
+);
+
+export const PreferencesGroup: FunctionComponent = ({ 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: FunctionComponent = ({ 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="w-125 max-w-125 flex flex-col gap-3">{children}</div>
+    </div>
+    <div className="flex-basis-55 flex-shrink" />
+  </div>
+);

app/assets/javascripts/preferences/components/index.ts

@@ -0,0 +1,3 @@
+export * from './Content';
+export * from './MenuItem';
+export * from './Pane';

app/assets/javascripts/preferences/index.ts

@@ -0,0 +1,9 @@
+import { toDirective } from '../components/utils';
+import {
+  PreferencesViewWrapper,
+  PreferencesWrapperProps,
+} from './PreferencesView';
+
+export const PreferencesDirective = toDirective<PreferencesWrapperProps>(
+  PreferencesViewWrapper
+);

app/assets/javascripts/preferences/models/index.ts

@@ -0,0 +1,2 @@
+export * from './preferences';
+export * from './two-factor-auth';

app/assets/javascripts/preferences/models/preferences.ts

@@ -0,0 +1,76 @@
+import { IconType } from '@/components/Icon';
+import { makeAutoObservable, observable } from 'mobx';
+import { TwoFactorAuth } from './two-factor-auth';
+
+const PREFERENCE_IDS = [
+  'general',
+  'account',
+  'appearance',
+  'security',
+  'listed',
+  'shortcuts',
+  'accessibility',
+  'get-free-month',
+  'help-feedback',
+] as const;
+
+export type PreferenceId = typeof PREFERENCE_IDS[number];
+interface PreferenceMenuItem {
+  readonly id: PreferenceId;
+  readonly icon: IconType;
+  readonly label: string;
+}
+
+type PreferencesMenu = PreferenceMenuItem[];
+
+/**
+ * Items are in order of appearance
+ */
+const PREFERENCES_MENU: PreferencesMenu = [
+  { id: 'general', label: 'General', icon: 'settings' },
+  { id: 'account', label: 'Account', icon: 'user' },
+  { id: 'appearance', label: 'Appearance', icon: 'themes' },
+  { id: 'security', label: 'Security', icon: 'security' },
+  { id: 'listed', label: 'Listed', icon: 'listed' },
+  { id: 'shortcuts', label: 'Shortcuts', icon: 'keyboard' },
+  { id: 'accessibility', label: 'Accessibility', icon: 'accessibility' },
+  { id: 'get-free-month', label: 'Get a free month', icon: 'star' },
+  { id: 'help-feedback', label: 'Help & feedback', icon: 'help' },
+];
+
+export class Preferences {
+  private _selectedPane: PreferenceId = 'general';
+
+  private _twoFactorAuth: TwoFactorAuth;
+
+  constructor(private readonly _menu: PreferencesMenu = PREFERENCES_MENU) {
+    this._twoFactorAuth = new TwoFactorAuth();
+    makeAutoObservable<Preferences, '_selectedPane' | '_twoFactorAuth'>(this, {
+      _twoFactorAuth: observable,
+      _selectedPane: observable,
+    });
+  }
+
+  get menuItems(): (PreferenceMenuItem & {
+    selected: boolean;
+  })[] {
+    return this._menu.map((p) => ({
+      ...p,
+      selected: p.id === this._selectedPane,
+    }));
+  }
+
+  get selectedPaneId(): PreferenceId {
+    return (
+      this._menu.find((item) => item.id === this._selectedPane)?.id ?? 'general'
+    );
+  }
+
+  selectPane(key: PreferenceId) {
+    this._selectedPane = key;
+  }
+
+  get twoFactorAuth() {
+    return this._twoFactorAuth;
+  }
+}

app/assets/javascripts/preferences/models/two-factor-auth.ts

@@ -0,0 +1,81 @@
+import { makeAutoObservable, observable } from 'mobx';
+
+function getNewAuthCode() {
+  const MIN = 100000;
+  const MAX = 999999;
+  const code = Math.floor(Math.random() * (MAX - MIN) + MIN);
+  return code.toString();
+}
+
+class TwoFactorData {
+  private _secretKey: string;
+  private _authCode: string;
+
+  constructor(secretKey: string) {
+    this._secretKey = secretKey;
+    this._authCode = getNewAuthCode();
+    makeAutoObservable<TwoFactorData, '_secretKey' | '_authCode'>(
+      this,
+      {
+        _secretKey: observable,
+        _authCode: observable,
+      },
+      { autoBind: true }
+    );
+  }
+
+  get secretKey() {
+    return this._secretKey;
+  }
+
+  get authCode() {
+    return this._authCode;
+  }
+
+  refreshAuthCode() {
+    this._authCode = getNewAuthCode();
+  }
+}
+
+type TwoFactorStatus = 'enabled' | 'disabled';
+
+export class TwoFactorAuth {
+  private _twoFactorStatus: TwoFactorStatus = 'disabled';
+  private _twoFactorData: TwoFactorData | null = null;
+
+  constructor() {
+    makeAutoObservable<TwoFactorAuth, '_twoFactorStatus' | '_twoFactorData'>(
+      this,
+      {
+        _twoFactorStatus: observable,
+        _twoFactorData: observable,
+      },
+      { autoBind: true }
+    );
+  }
+
+  private activate2FA() {
+    this._twoFactorData = new TwoFactorData('FHJJSAJKDASKW43KJS');
+    this._twoFactorStatus = 'enabled';
+  }
+
+  private deactivate2FA() {
+    this._twoFactorData = null;
+    this._twoFactorStatus = 'disabled';
+  }
+
+  toggle2FA() {
+    if (this._twoFactorStatus === 'enabled') this.deactivate2FA();
+    else this.activate2FA();
+  }
+
+  get twoFactorStatus() {
+    return this._twoFactorStatus;
+  }
+
+  get twoFactorData() {
+    if (this._twoFactorStatus !== 'enabled')
+      throw new Error(`Can't provide 2FA data if not enabled`);
+    return this._twoFactorData;
+  }
+}

app/assets/javascripts/preferences/panes/HelpFeedback.tsx

@@ -0,0 +1,101 @@
+import { FunctionComponent } from 'preact';
+import {} from '../components';
+import {
+  Title,
+  Subtitle,
+  Text,
+  Button,
+  PreferencesGroup,
+  PreferencesPane,
+  PreferencesSegment,
+} from '../components';
+
+export const HelpAndFeedback: FunctionComponent = () => (
+  <PreferencesPane>
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>Frequently asked questions</Title>
+        <div className="h-2 w-full" />
+        <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>
+);

app/assets/javascripts/preferences/panes/Security.tsx

@@ -0,0 +1,13 @@
+import { observer } from 'mobx-react-lite';
+import { FunctionComponent } from 'preact';
+import { PreferencesPane } from '../components';
+import { Preferences } from '../models';
+import { TwoFactorAuthComponent } from './TwoFactorAuth';
+
+export const Security: FunctionComponent<{ prefs: Preferences }> = observer(
+  ({ prefs }) => (
+    <PreferencesPane>
+      <TwoFactorAuthComponent tfAuth={prefs.twoFactorAuth} />
+    </PreferencesPane>
+  )
+);

app/assets/javascripts/preferences/panes/TwoFactorAuth.tsx

@@ -0,0 +1,110 @@
+import { FunctionComponent } from 'preact';
+import {
+  Title,
+  Text,
+  PreferencesGroup,
+  PreferencesSegment,
+} from '../components';
+import { Switch } from '../../components/Switch';
+import { observer } from 'mobx-react-lite';
+import { DecoratedInput } from '../../components/DecoratedInput';
+import { IconButton } from '../../components/IconButton';
+import { TwoFactorAuth } from '../models';
+
+// Temporary implementation until integration
+function downloadSecretKey(text: string) {
+  const link = document.createElement('a');
+  const blob = new Blob([text], {
+    type: 'text/plain;charset=utf-8',
+  });
+  link.href = window.URL.createObjectURL(blob);
+  link.setAttribute('download', 'secret_key.txt');
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  window.URL.revokeObjectURL(link.href);
+}
+export const TwoFactorAuthComponent: FunctionComponent<{
+  tfAuth: TwoFactorAuth;
+}> = observer(({ tfAuth }) => {
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <div className="flex flex-row items-center">
+          <div className="flex-grow flex flex-col">
+            <Title>Two-factor authentication</Title>
+            <Text>
+              An extra layer of security when logging in to your account.
+            </Text>
+          </div>
+          <Switch
+            checked={tfAuth.twoFactorStatus === 'enabled'}
+            onChange={() => tfAuth.toggle2FA()}
+          />
+        </div>
+      </PreferencesSegment>
+      <PreferencesSegment>
+        {tfAuth.twoFactorStatus === 'enabled' &&
+        tfAuth.twoFactorData != null ? (
+          <TwoFactorEnabled tfAuth={tfAuth} />
+        ) : (
+          <TwoFactorDisabled />
+        )}
+      </PreferencesSegment>
+    </PreferencesGroup>
+  );
+});
+
+const TwoFactorEnabled: FunctionComponent<{ tfAuth: TwoFactorAuth }> = observer(
+  ({ tfAuth }) => {
+    const state = tfAuth.twoFactorData!;
+    const download = (
+      <IconButton
+        icon="download"
+        onClick={() => {
+          downloadSecretKey(state.secretKey);
+        }}
+      />
+    );
+    const copy = (
+      <IconButton
+        icon="copy"
+        onClick={() => {
+          navigator?.clipboard?.writeText(state.secretKey);
+        }}
+      />
+    );
+    const spinner = <div class="sk-spinner info w-8 h-3.5" />;
+    return (
+      <div className="flex flex-row gap-4">
+        <div className="flex-grow flex flex-col">
+          <Text>Secret Key</Text>
+          <DecoratedInput
+            disabled={true}
+            right={[copy, download]}
+            text={state.secretKey}
+          />
+        </div>
+        <div className="w-30 flex flex-col">
+          <Text>Authentication Code</Text>
+          <DecoratedInput
+            disabled={true}
+            text={state.authCode}
+            right={[spinner]}
+          />
+        </div>
+      </div>
+    );
+  }
+);
+const TwoFactorDisabled: FunctionComponent = () => (
+  <Text>
+    Enabling two-factor authentication will sign you out of all other sessions.{' '}
+    <a
+      target="_blank"
+      href="https://standardnotes.com/help/21/where-should-i-store-my-two-factor-authentication-secret-key"
+    >
+      Learn more
+    </a>
+  </Text>
+);

app/assets/javascripts/preferences/panes/index.ts

@@ -0,0 +1,2 @@
+export * from './HelpFeedback';
+export * from './Security';