@hed-hog/core 0.0.185 → 0.0.190

package/hedhog/frontend/app/account/components/remove-mfa-dialog.tsx.ejs

@@ -0,0 +1,337 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+} from '@/components/ui/input-otp';
+import { Label } from '@/components/ui/label';
+import { useApp } from '@hed-hog/next-app-provider';
+import { AlertTriangle, Fingerprint, Key, Mail, Shield } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+
+interface RemoveMfaDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: (
+    code: string,
+    hash?: string,
+    verificationType?: 'totp' | 'email' | 'recovery' | 'webauthn',
+    assertionResponse?: any
+  ) => Promise<void>;
+  availableMethods?: ('totp' | 'email')[];
+  verificationType?: 'totp' | 'email';
+  codeHash?: string;
+  hasWebAuthn?: boolean;
+  methodName?: string;
+}
+
+export function RemoveMfaDialog({
+  open,
+  onOpenChange,
+  onConfirm,
+  availableMethods,
+  verificationType: initialVerificationType,
+  codeHash,
+  hasWebAuthn,
+  methodName,
+}: RemoveMfaDialogProps) {
+  const [code, setCode] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [resendLoading, setResendLoading] = useState(false);
+  const [resendCooldown, setResendCooldown] = useState(0);
+  const [selectedMethod, setSelectedMethod] = useState<
+    'totp' | 'email' | 'recovery' | 'webauthn'
+  >(initialVerificationType || availableMethods?.[0] || 'totp');
+  const { request, getSettingValue, userEmail, showToastHandler } = useApp();
+  const t = useTranslations('core.RemoveMfaDialog');
+  const emailCodeLength = Number(getSettingValue('mfa-email-code-length')) || 6;
+
+  useEffect(() => {
+    if (open) {
+      let newMethod: 'totp' | 'email' | 'recovery' | 'webauthn' = 'recovery';
+
+      if (initialVerificationType) {
+        newMethod = initialVerificationType as
+          | 'totp'
+          | 'email'
+          | 'recovery'
+          | 'webauthn';
+      } else if (availableMethods && availableMethods.length > 0) {
+        newMethod = availableMethods[0] as
+          | 'totp'
+          | 'email'
+          | 'recovery'
+          | 'webauthn';
+      } else if (hasWebAuthn) {
+        newMethod = 'recovery';
+      }
+
+      setSelectedMethod(newMethod);
+      setCode('');
+      setResendCooldown(0);
+    }
+  }, [open, initialVerificationType, availableMethods, codeHash, hasWebAuthn]);
+
+  useEffect(() => {
+    if (resendCooldown > 0) {
+      const timer = setTimeout(() => {
+        setResendCooldown(resendCooldown - 1);
+      }, 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [resendCooldown]);
+
+  const handleResendCode = async () => {
+    if (!userEmail) {
+      showToastHandler('error', t('emailNotFound'));
+      return;
+    }
+
+    setResendLoading(true);
+    try {
+      await request({
+        url: '/profile/mfa/check-verification-remove',
+        method: 'POST',
+      });
+      showToastHandler('success', t('codeResent'));
+      setResendCooldown(30);
+    } catch (error) {
+      console.error('Failed to resend code:', error);
+      showToastHandler('error', t('resendFailed'));
+    } finally {
+      setResendLoading(false);
+    }
+  };
+
+  const handleConfirm = async () => {
+    const minLength =
+      selectedMethod === 'recovery'
+        ? 1
+        : selectedMethod === 'email'
+          ? emailCodeLength
+          : 6;
+    if (code.length < minLength) return;
+
+    setLoading(true);
+    try {
+      const hashToSend = selectedMethod === 'email' ? codeHash : undefined;
+      await onConfirm(code, hashToSend, selectedMethod);
+      onOpenChange(false);
+      setCode('');
+    } catch (error) {
+      console.error('Verification failed:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const showMethodToggle =
+    (availableMethods && availableMethods.length > 0) || hasWebAuthn;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <AlertTriangle className="size-5 text-amber-500" />
+            {t('title')}
+          </DialogTitle>
+          <DialogDescription>
+            {t.rich('description', {
+              methodName: methodName as string,
+              strong: (chunks) => <strong>{chunks}</strong>,
+            })}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          <div className="rounded-lg border border-amber-200 bg-amber-50 p-4 dark:border-amber-900 dark:bg-amber-950/20">
+            <p className="text-sm font-medium text-amber-800 dark:text-amber-200">
+              {t('warningMessage')}
+            </p>
+          </div>
+
+          {showMethodToggle && (
+            <div className="flex gap-2 flex-wrap">
+              {availableMethods?.includes('totp') && (
+                <Button
+                  type="button"
+                  variant={selectedMethod === 'totp' ? 'default' : 'outline'}
+                  size="sm"
+                  className="flex-1"
+                  onClick={() => setSelectedMethod('totp')}
+                >
+                  <Key className="mr-2 size-4" />
+                  {t('useAuthenticator')}
+                </Button>
+              )}
+              {availableMethods?.includes('email') && (
+                <Button
+                  type="button"
+                  variant={selectedMethod === 'email' ? 'default' : 'outline'}
+                  size="sm"
+                  className="flex-1"
+                  onClick={() => setSelectedMethod('email')}
+                >
+                  <Mail className="mr-2 size-4" />
+                  {t('useEmail')}
+                </Button>
+              )}
+              {hasWebAuthn && (
+                <Button
+                  type="button"
+                  variant={
+                    selectedMethod === 'webauthn' ? 'default' : 'outline'
+                  }
+                  size="sm"
+                  className="flex-1"
+                  onClick={async () => {
+                    setLoading(true);
+                    try {
+                      const { startAuthentication } =
+                        await import('@simplewebauthn/browser');
+
+                      const { data: optionsData } = await request<any>({
+                        url: '/profile/webauthn/authenticate/generate',
+                        method: 'POST',
+                      });
+
+                      const assertion = await startAuthentication({
+                        optionsJSON: optionsData,
+                      });
+                      await onConfirm('', undefined, 'webauthn', assertion);
+                      setCode('');
+                      setLoading(false);
+                      onOpenChange(false);
+                    } catch (error: any) {
+                      console.error('WebAuthn verification failed:', error);
+                      setLoading(false);
+                    }
+                  }}
+                  disabled={loading}
+                >
+                  <Fingerprint className="mr-2 size-4" />
+                  {t('useWebAuthn')}
+                </Button>
+              )}
+              <Button
+                type="button"
+                variant={selectedMethod === 'recovery' ? 'default' : 'outline'}
+                size="sm"
+                className="flex-1"
+                onClick={() => setSelectedMethod('recovery')}
+              >
+                <Shield className="mr-2 size-4" />
+                {t('useRecoveryCode')}
+              </Button>
+            </div>
+          )}
+
+          <div className="space-y-2 flex flex-col justify-center items-center">
+            <Label htmlFor="verification-code" className="text-center">
+              {selectedMethod === 'email'
+                ? t('labelEmail')
+                : selectedMethod === 'recovery'
+                  ? t('labelRecovery')
+                  : selectedMethod === 'webauthn'
+                    ? t('labelWebAuthn')
+                    : t('labelTotp')}
+            </Label>
+            {selectedMethod === 'webauthn' ? (
+              <div className="text-center text-sm text-muted-foreground">
+                {t('webAuthnInstruction')}
+              </div>
+            ) : selectedMethod === 'recovery' ? (
+              <Input
+                id="verification-code"
+                value={code}
+                onChange={(e) => setCode(e.target.value)}
+                className="text-center text-lg font-mono uppercase"
+                autoComplete="off"
+                placeholder={t('placeholderRecovery')}
+              />
+            ) : (
+              <>
+                <div className="flex justify-center">
+                  <InputOTP
+                    maxLength={selectedMethod === 'email' ? emailCodeLength : 6}
+                    value={code}
+                    onChange={setCode}
+                    id="verification-code"
+                  >
+                    <InputOTPGroup>
+                      {Array.from({
+                        length:
+                          selectedMethod === 'email' ? emailCodeLength : 6,
+                      }).map((_, i) => (
+                        <InputOTPSlot key={i} index={i} />
+                      ))}
+                    </InputOTPGroup>
+                  </InputOTP>
+                </div>
+                {selectedMethod === 'email' && (
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    onClick={handleResendCode}
+                    disabled={resendLoading || resendCooldown > 0}
+                    className="mt-2"
+                  >
+                    {resendLoading
+                      ? t('resending')
+                      : resendCooldown > 0
+                        ? t('resendIn', { seconds: resendCooldown })
+                        : t('resendCode')}
+                  </Button>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => {
+              onOpenChange(false);
+              setCode('');
+            }}
+            disabled={loading}
+          >
+            {t('cancelButton')}
+          </Button>
+          {selectedMethod !== 'webauthn' && (
+            <Button
+              type="button"
+              variant="destructive"
+              onClick={handleConfirm}
+              disabled={
+                (selectedMethod === 'email' &&
+                  code.length !== emailCodeLength) ||
+                (selectedMethod === 'totp' && code.length !== 6) ||
+                (selectedMethod === 'recovery' && !code) ||
+                loading
+              }
+            >
+              {loading ? t('removing') : t('removeButton')}
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}