feat(preferences): 2FA activation dialog with mocked state (#605)

app/assets/javascripts/preferences/panes/two-factor-auth/Verification.tsx

@@ -0,0 +1,65 @@
+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 {
+  TwoFactorDialog,
+  TwoFactorDialogLabel,
+  TwoFactorDialogDescription,
+  TwoFactorDialogButtons,
+} from './TwoFactorDialog';
+
+export const Verification: FunctionComponent<{
+  activation: TwoFactorActivation;
+}> = observer(({ activation: act }) => {
+  const borderInv =
+    act.verificationStatus === 'invalid' ? 'border-dark-red' : '';
+  return (
+    <TwoFactorDialog>
+      <TwoFactorDialogLabel
+        closeDialog={() => {
+          act.cancelActivation();
+        }}
+      >
+        Step 3 of 3 - Verification
+      </TwoFactorDialogLabel>
+      <TwoFactorDialogDescription>
+        <div className="flex-grow flex flex-col gap-1">
+          <div className="flex flex-row items-center gap-2">
+            <div className="text-sm">
+              ・Enter your <b>secret key</b>:
+            </div>
+            <DecoratedInput className={borderInv} />
+          </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}`} />
+          </div>
+        </div>
+      </TwoFactorDialogDescription>
+      <TwoFactorDialogButtons>
+        {act.verificationStatus === 'invalid' && (
+          <div className="text-sm color-dark-red">
+            Incorrect credentials, please try again.
+          </div>
+        )}
+        <Button
+          className="min-w-20"
+          type="normal"
+          label="Back"
+          onClick={() => act.openSaveSecretKey()}
+        />
+        <Button
+          className="min-w-20"
+          type="primary"
+          label="Next"
+          onClick={() => act.enable2FA('X', 'X')}
+        />
+      </TwoFactorDialogButtons>
+    </TwoFactorDialog>
+  );
+});