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

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;
+  }
+}