feat: integrate two factor authentication (#626)

* feat: integrate SNJS MFA with web

* fix: create rudimentary typings file for qrcode.react

* chore: lint fixes

* fix: address PR feedback

* fix: address PR feedback

* fix: address PR feedback 2

* fix: replace spread props on TwoFactorAuthWrapper component

* chore: change null check to undefined check

app/assets/javascripts/preferences/PreferencesView.tsx

@@ -6,20 +6,25 @@ import { observer } from 'mobx-react-lite';
 import { PreferencesMenu } from './preferences-menu';
 import { PreferencesMenuView } from './PreferencesMenuView';
 import { WebApplication } from '@/ui_models/application';
+import { MfaProps } from './panes/two-factor-auth/MfaProps';
 
-const PaneSelector: FunctionComponent<{
-  prefs: PreferencesMenu;
+interface PreferencesProps extends MfaProps {
   application: WebApplication;
-}> = observer(({ prefs: menu, application }) => {
-  switch (menu.selectedPaneId) {
+  closePreferences: () => void;
+}
+
+const PaneSelector: FunctionComponent<
+  PreferencesProps & { menu: PreferencesMenu }
+> = observer((props) => {
+  switch (props.menu.selectedPaneId) {
     case 'general':
       return null;
     case 'account':
-      return <AccountPreferences application={application} />;
+      return <AccountPreferences application={props.application} />;
     case 'appearance':
       return null;
     case 'security':
-      return <Security />;
+      return <Security mfaGateway={props.mfaGateway} />;
     case 'listed':
       return null;
     case 'shortcuts':
@@ -33,23 +38,18 @@ const PaneSelector: FunctionComponent<{
   }
 });
 
-const PreferencesCanvas: FunctionComponent<{
-  preferences: PreferencesMenu;
-  application: WebApplication;
-}> = observer(({ preferences: prefs, application }) => (
+const PreferencesCanvas: FunctionComponent<
+  PreferencesProps & { menu: PreferencesMenu }
+> = observer((props) => (
   <div className="flex flex-row flex-grow min-h-0 justify-between">
-    <PreferencesMenuView menu={prefs}></PreferencesMenuView>
-    <PaneSelector prefs={prefs} application={application} />
+    <PreferencesMenuView menu={props.menu} />
+    <PaneSelector {...props} />
   </div>
 ));
 
-const PreferencesView: FunctionComponent<{
-  close: () => void;
-  application: WebApplication;
-}> = observer(
-  ({ close, application }) => {
-    const prefs = new PreferencesMenu();
-
+export const PreferencesView: FunctionComponent<PreferencesProps> = observer(
+  (props) => {
+    const menu = new PreferencesMenu();
     return (
       <div className="sn-full-screen flex flex-col bg-contrast z-index-preferences">
         <TitleBar className="items-center justify-between">
@@ -58,30 +58,14 @@ const PreferencesView: FunctionComponent<{
           <Title className="text-lg">Your preferences for Standard Notes</Title>
           <RoundIconButton
             onClick={() => {
-              close();
+              props.closePreferences();
             }}
             type="normal"
             icon="close"
           />
         </TitleBar>
-        <PreferencesCanvas preferences={prefs} application={application} />
+        <PreferencesCanvas {...props} menu={menu} />
       </div>
     );
   }
 );
-
-export interface PreferencesWrapperProps {
-  appState: { preferences: { isOpen: boolean; closePreferences: () => void } };
-  application: WebApplication;
-}
-
-export const PreferencesViewWrapper: FunctionComponent<PreferencesWrapperProps> =
-  observer(({ appState, application }) => {
-    if (!appState.preferences.isOpen) return null;
-    return (
-      <PreferencesView
-        application={application}
-        close={() => appState.preferences.closePreferences()}
-      />
-    );
-  });