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

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

@@ -0,0 +1,78 @@
+import { FunctionComponent } from 'preact';
+import { observer } from 'mobx-react-lite';
+import { DecoratedInput } from '../../../components/DecoratedInput';
+import { IconButton } from '../../../components/IconButton';
+import { Button } from '@/components/Button';
+import { TwoFactorActivation } from './model';
+import {
+  TwoFactorDialog,
+  TwoFactorDialogLabel,
+  TwoFactorDialogDescription,
+  TwoFactorDialogButtons,
+} from './TwoFactorDialog';
+import { AuthAppInfoTooltip } from './AuthAppInfoPopup';
+
+export const ScanQRCode: FunctionComponent<{
+  activation: TwoFactorActivation;
+}> = observer(({ activation: act }) => {
+  const copy = (
+    <IconButton
+      icon="copy"
+      onClick={() => {
+        navigator?.clipboard?.writeText(act.secretKey);
+      }}
+    />
+  );
+  return (
+    <TwoFactorDialog>
+      <TwoFactorDialogLabel
+        closeDialog={() => {
+          act.cancelActivation();
+        }}
+      >
+        Step 1 of 3 - Scan QR code
+      </TwoFactorDialogLabel>
+      <TwoFactorDialogDescription>
+        <div className="flex flex-row gap-3 items-center">
+          <div className="w-25 h-25 flex items-center justify-center bg-info">
+            QR code
+          </div>
+          <div className="flex-grow flex flex-col gap-2">
+            <div className="flex flex-row gap-1 items-center">
+              <div className="text-sm">
+                ・Open your <b>authenticator app</b>.
+              </div>
+              <AuthAppInfoTooltip />
+            </div>
+            <div className="flex flex-row items-center">
+              <div className="text-sm flex-grow">
+                ・<b>Scan this QR code</b> or <b>add this secret key</b>:
+              </div>
+              <div className="w-56">
+                <DecoratedInput
+                  disabled={true}
+                  text={act.secretKey}
+                  right={[copy]}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </TwoFactorDialogDescription>
+      <TwoFactorDialogButtons>
+        <Button
+          className="min-w-20"
+          type="normal"
+          label="Cancel"
+          onClick={() => act.cancelActivation()}
+        />
+        <Button
+          className="min-w-20"
+          type="primary"
+          label="Next"
+          onClick={() => act.openSaveSecretKey()}
+        />
+      </TwoFactorDialogButtons>
+    </TwoFactorDialog>
+  );
+});