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/panes/two-factor-auth/Verification.tsx

@@ -2,7 +2,7 @@ import { Button } from '@/components/Button';
 import { DecoratedInput } from '@/components/DecoratedInput';
 import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
-import { TwoFactorActivation } from './model';
+import { TwoFactorActivation } from './TwoFactorActivation';
 import {
   TwoFactorDialog,
   TwoFactorDialogLabel,
@@ -17,11 +17,7 @@ export const Verification: FunctionComponent<{
     act.verificationStatus === 'invalid' ? 'border-dark-red' : '';
   return (
     <TwoFactorDialog>
-      <TwoFactorDialogLabel
-        closeDialog={() => {
-          act.cancelActivation();
-        }}
-      >
+      <TwoFactorDialogLabel closeDialog={act.cancelActivation}>
         Step 3 of 3 - Verification
       </TwoFactorDialogLabel>
       <TwoFactorDialogDescription>
@@ -30,20 +26,26 @@ export const Verification: FunctionComponent<{
             <div className="text-sm">
               ・Enter your <b>secret key</b>:
             </div>
-            <DecoratedInput className={borderInv} />
+            <DecoratedInput
+              className={borderInv}
+              onChange={act.setInputSecretKey}
+            />
           </div>
           <div className="flex flex-row items-center gap-2">
             <div className="text-sm">
               ・Verify the <b>authentication code</b> generated by your
               authenticator app:
             </div>
-            <DecoratedInput className={`w-30 ${borderInv}`} />
+            <DecoratedInput
+              className={`w-30 ${borderInv}`}
+              onChange={act.setInputOtpToken}
+            />
           </div>
         </div>
       </TwoFactorDialogDescription>
       <TwoFactorDialogButtons>
         {act.verificationStatus === 'invalid' && (
-          <div className="text-sm color-dark-red">
+          <div className="text-sm color-danger">
             Incorrect credentials, please try again.
           </div>
         )}
@@ -51,13 +53,13 @@ export const Verification: FunctionComponent<{
           className="min-w-20"
           type="normal"
           label="Back"
-          onClick={() => act.openSaveSecretKey()}
+          onClick={act.openSaveSecretKey}
         />
         <Button
           className="min-w-20"
           type="primary"
           label="Next"
-          onClick={() => act.enable2FA('X', 'X')}
+          onClick={act.enable2FA}
         />
       </TwoFactorDialogButtons>
     </TwoFactorDialog>