@greatapps/common 1.1.697 → 1.1.699

package/src/components/account/TwoFactorAuthModal.tsx

@@ -1,220 +1,220 @@
-'use client';
-
-import { useTranslations } from 'next-intl';
-import { IconX, IconCopy, IconRefresh } from '@tabler/icons-react';
-import { Button } from '../ui/buttons/Button';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
-import { Separator } from '../ui/data-display/Separator';
-import { InputOTP, InputOTPGroup, InputOTPSlot } from '../ui/form/InputOtp';
-import { REGEXP_ONLY_DIGITS } from 'input-otp';
-import useTwoFactorAuthForm from './hooks/useTwoFactorAuthForm';
-
-interface TwoFactorAuthModalProps {
-  open: boolean;
-  onClose: () => void;
-  onSuccess?: () => void;
-}
-
-export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFactorAuthModalProps) {
-  const translate = useTranslations();
-  const {
-    code,
-    setCode,
-    isCodeComplete,
-    isGenerating,
-    isConfirming,
-    generateFailed,
-    retryGenerate,
-    qrcode,
-    backupCodes,
-    step,
-    handleSubmit,
-    handleFinalize,
-    handleCopyCodes,
-    resetForm,
-  } = useTwoFactorAuthForm({ onSuccess, open });
-
-  const handleClose = () => {
-    resetForm();
-    onClose();
-  };
-
-  if (step === 'recovery') {
-    return (
-      <Dialog open={open} onOpenChange={handleClose}>
-        <DialogContent
-          showCloseButton={false}
-          overlayClassName="z-[1010]"
-          className="z-[1011] flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[470px] lg:h-auto lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%]"
-        >
-          <DialogHeader className="sr-only">
-            <DialogTitle>{translate('common.account.twoFactor.recoveryTitle')}</DialogTitle>
-          </DialogHeader>
-          <div className="flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0">
-            <span className="paragraph-medium-semibold text-gray-950 text-center">
-              {translate('common.account.twoFactor.recoveryTitle')}
-            </span>
-            <Button
-              type="button"
-              variant="ghost"
-              className="size-8! p-0 absolute right-4"
-              onClick={handleClose}
-            >
-              <IconX size={18} />
-            </Button>
-          </div>
-
-          <div className="flex flex-col gap-5 lg:gap-6 px-4 lg:px-5 py-5 lg:py-6 flex-1 lg:flex-none">
-            <div className="flex flex-col gap-2">
-              <h3 className="paragraph-medium-semibold text-gray-950 max-w-[269px]">
-                {translate('common.account.twoFactor.recoveryHeading')}
-              </h3>
-              <div className="paragraph-small-regular text-gray-600">
-                <p>{translate('common.account.twoFactor.recoveryText1')}</p>
-                <br />
-                <p>{translate('common.account.twoFactor.recoveryText2')}</p>
-              </div>
-            </div>
-
-            <div className="bg-gray-50 rounded-lg p-4 flex flex-col gap-4">
-              <div className="paragraph-small-medium text-gray-950 whitespace-nowrap">
-                {backupCodes.map((backupCode, i) => (
-                  <p key={i}>{backupCode}</p>
-                ))}
-              </div>
-              <Button
-                type="button"
-                variant="secondary"
-                className="h-8! w-fit"
-                onClick={handleCopyCodes}
-              >
-                <IconCopy size={16} />
-                {translate('common.account.twoFactor.copyCodes')}
-              </Button>
-            </div>
-          </div>
-
-          <div className="flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between mt-auto lg:mt-0">
-            <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
-              {translate('common.actions.cancel')}
-            </Button>
-            <Button className="h-10!" type="button" onClick={handleFinalize}>
-              {translate('common.account.twoFactor.finish')}
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-    );
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent
-        showCloseButton={false}
-        overlayClassName="z-[1010]"
-        className="z-[1011] flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[470px] lg:h-auto lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%]"
-      >
-        <DialogHeader className="sr-only">
-          <DialogTitle>{translate('common.account.twoFactor.title')}</DialogTitle>
-        </DialogHeader>
-        <div className="shrink-0 flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0">
-          <span className="paragraph-medium-semibold text-gray-950 text-center">
-            {translate('common.account.twoFactor.title')}
-          </span>
-          <Button
-            type="button"
-            variant="ghost"
-            className="size-8! p-0 absolute right-4"
-            onClick={handleClose}
-          >
-            <IconX size={18} />
-          </Button>
-        </div>
-
-        <form
-          className="flex-1 min-h-0 flex flex-col"
-          onSubmit={(e) => {
-            e.preventDefault();
-            if (isCodeComplete) handleSubmit();
-          }}
-        >
-          <div className="flex-1 min-h-0 overflow-y-auto overscroll-contain lg:overflow-visible">
-            <div className="flex flex-col items-center gap-4 lg:gap-8 px-4 lg:px-5 py-4 lg:py-6 pb-60 lg:pb-6">
-              <p className="paragraph-small-regular text-gray-950 text-center max-w-full lg:max-w-[412px]">
-                {translate.rich('common.account.twoFactor.instructions', {
-                  link: (chunks) => (
-                    <a
-                      href="https://support.google.com/accounts/answer/1066447"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="paragraph-small-medium underline"
-                    >
-                      {chunks}
-                    </a>
-                  ),
-                })}
-              </p>
-
-              <div className="border border-gray-200 rounded-lg overflow-hidden p-2 lg:p-3 flex items-center justify-center w-[136px] h-[136px] lg:w-[203px] lg:h-[203px]">
-                {generateFailed ? (
-                  <button
-                    type="button"
-                    onClick={() => retryGenerate()}
-                    className="flex flex-col items-center gap-1.5 text-center"
-                  >
-                    <IconRefresh size={20} className="text-gray-400" />
-                    <span className="paragraph-xsmall-medium text-gray-500">
-                      {translate('common.account.twoFactor.retry')}
-                    </span>
-                  </button>
-                ) : isGenerating || !qrcode ? (
-                  <div className="skeleton w-full h-full rounded" />
-                ) : (
-                  // eslint-disable-next-line @next/next/no-img-element
-                  <img
-                    src={qrcode}
-                    alt={translate('common.account.twoFactor.qrAlt')}
-                    className="w-full h-full"
-                  />
-                )}
-              </div>
-
-              <div className="flex items-center gap-3 w-full">
-                <Separator className="flex-1" />
-                <span className="paragraph-xsmall-medium text-gray-500 opacity-80 whitespace-nowrap">
-                  {translate('common.account.twoFactor.pasteDigits')}
-                </span>
-                <Separator className="flex-1" />
-              </div>
-
-              <div className="scroll-mt-20">
-                <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS} value={code} onChange={setCode}>
-                  <InputOTPGroup className="gap-2">
-                    {Array.from({ length: 6 }).map((_, i) => (
-                      <InputOTPSlot
-                        key={i}
-                        index={i}
-                        className="w-11! lg:w-12! h-13! lg:h-14! rounded-lg! text-lg border-gray-200"
-                      />
-                    ))}
-                  </InputOTPGroup>
-                </InputOTP>
-              </div>
-            </div>
-          </div>
-
-          <div className="shrink-0 flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between gap-2 bg-white">
-            <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
-              {translate('common.actions.cancel')}
-            </Button>
-            <Button type="submit" className="h-10!" disabled={!isCodeComplete || isConfirming}>
-              {isConfirming
-                ? translate('common.account.twoFactor.activating')
-                : translate('common.account.twoFactor.activate')}
-            </Button>
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { IconX, IconCopy, IconRefresh } from '@tabler/icons-react';
+import { Button } from '../ui/buttons/Button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
+import { Separator } from '../ui/data-display/Separator';
+import { InputOTP, InputOTPGroup, InputOTPSlot } from '../ui/form/InputOtp';
+import { REGEXP_ONLY_DIGITS } from 'input-otp';
+import useTwoFactorAuthForm from './hooks/useTwoFactorAuthForm';
+
+interface TwoFactorAuthModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSuccess?: () => void;
+}
+
+export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFactorAuthModalProps) {
+  const translate = useTranslations();
+  const {
+    code,
+    setCode,
+    isCodeComplete,
+    isGenerating,
+    isConfirming,
+    generateFailed,
+    retryGenerate,
+    qrcode,
+    backupCodes,
+    step,
+    handleSubmit,
+    handleFinalize,
+    handleCopyCodes,
+    resetForm,
+  } = useTwoFactorAuthForm({ onSuccess, open });
+
+  const handleClose = () => {
+    resetForm();
+    onClose();
+  };
+
+  if (step === 'recovery') {
+    return (
+      <Dialog open={open} onOpenChange={handleClose}>
+        <DialogContent
+          showCloseButton={false}
+          overlayClassName="z-[1010]"
+          className="z-[1011] flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[470px] lg:h-auto lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%]"
+        >
+          <DialogHeader className="sr-only">
+            <DialogTitle>{translate('common.account.twoFactor.recoveryTitle')}</DialogTitle>
+          </DialogHeader>
+          <div className="flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0">
+            <span className="paragraph-medium-semibold text-gray-950 text-center">
+              {translate('common.account.twoFactor.recoveryTitle')}
+            </span>
+            <Button
+              type="button"
+              variant="ghost"
+              className="size-8! p-0 absolute right-4"
+              onClick={handleClose}
+            >
+              <IconX size={18} />
+            </Button>
+          </div>
+
+          <div className="flex flex-col gap-5 lg:gap-6 px-4 lg:px-5 py-5 lg:py-6 flex-1 lg:flex-none">
+            <div className="flex flex-col gap-2">
+              <h3 className="paragraph-medium-semibold text-gray-950 max-w-[269px]">
+                {translate('common.account.twoFactor.recoveryHeading')}
+              </h3>
+              <div className="paragraph-small-regular text-gray-600">
+                <p>{translate('common.account.twoFactor.recoveryText1')}</p>
+                <br />
+                <p>{translate('common.account.twoFactor.recoveryText2')}</p>
+              </div>
+            </div>
+
+            <div className="bg-gray-50 rounded-lg p-4 flex flex-col gap-4">
+              <div className="paragraph-small-medium text-gray-950 whitespace-nowrap">
+                {backupCodes.map((backupCode, i) => (
+                  <p key={i}>{backupCode}</p>
+                ))}
+              </div>
+              <Button
+                type="button"
+                variant="secondary"
+                className="h-8! w-fit"
+                onClick={handleCopyCodes}
+              >
+                <IconCopy size={16} />
+                {translate('common.account.twoFactor.copyCodes')}
+              </Button>
+            </div>
+          </div>
+
+          <div className="flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between mt-auto lg:mt-0">
+            <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
+              {translate('common.actions.cancel')}
+            </Button>
+            <Button className="h-10!" type="button" onClick={handleFinalize}>
+              {translate('common.account.twoFactor.finish')}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent
+        showCloseButton={false}
+        overlayClassName="z-[1010]"
+        className="z-[1011] flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[470px] lg:h-auto lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%]"
+      >
+        <DialogHeader className="sr-only">
+          <DialogTitle>{translate('common.account.twoFactor.title')}</DialogTitle>
+        </DialogHeader>
+        <div className="shrink-0 flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0">
+          <span className="paragraph-medium-semibold text-gray-950 text-center">
+            {translate('common.account.twoFactor.title')}
+          </span>
+          <Button
+            type="button"
+            variant="ghost"
+            className="size-8! p-0 absolute right-4"
+            onClick={handleClose}
+          >
+            <IconX size={18} />
+          </Button>
+        </div>
+
+        <form
+          className="flex-1 min-h-0 flex flex-col"
+          onSubmit={(e) => {
+            e.preventDefault();
+            if (isCodeComplete) handleSubmit();
+          }}
+        >
+          <div className="flex-1 min-h-0 overflow-y-auto overscroll-contain lg:overflow-visible">
+            <div className="flex flex-col items-center gap-4 lg:gap-8 px-4 lg:px-5 py-4 lg:py-6 pb-60 lg:pb-6">
+              <p className="paragraph-small-regular text-gray-950 text-center max-w-full lg:max-w-[412px]">
+                {translate.rich('common.account.twoFactor.instructions', {
+                  link: (chunks) => (
+                    <a
+                      href="https://support.google.com/accounts/answer/1066447"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="paragraph-small-medium underline"
+                    >
+                      {chunks}
+                    </a>
+                  ),
+                })}
+              </p>
+
+              <div className="border border-gray-200 rounded-lg overflow-hidden p-2 lg:p-3 flex items-center justify-center w-[136px] h-[136px] lg:w-[203px] lg:h-[203px]">
+                {generateFailed ? (
+                  <button
+                    type="button"
+                    onClick={() => retryGenerate()}
+                    className="flex flex-col items-center gap-1.5 text-center"
+                  >
+                    <IconRefresh size={20} className="text-gray-400" />
+                    <span className="paragraph-xsmall-medium text-gray-500">
+                      {translate('common.account.twoFactor.retry')}
+                    </span>
+                  </button>
+                ) : isGenerating || !qrcode ? (
+                  <div className="skeleton w-full h-full rounded" />
+                ) : (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={qrcode}
+                    alt={translate('common.account.twoFactor.qrAlt')}
+                    className="w-full h-full"
+                  />
+                )}
+              </div>
+
+              <div className="flex items-center gap-3 w-full">
+                <Separator className="flex-1" />
+                <span className="paragraph-xsmall-medium text-gray-500 opacity-80 whitespace-nowrap">
+                  {translate('common.account.twoFactor.pasteDigits')}
+                </span>
+                <Separator className="flex-1" />
+              </div>
+
+              <div className="scroll-mt-20">
+                <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS} value={code} onChange={setCode}>
+                  <InputOTPGroup className="gap-2">
+                    {Array.from({ length: 6 }).map((_, i) => (
+                      <InputOTPSlot
+                        key={i}
+                        index={i}
+                        className="w-11! lg:w-12! h-13! lg:h-14! rounded-lg! text-lg border-gray-200"
+                      />
+                    ))}
+                  </InputOTPGroup>
+                </InputOTP>
+              </div>
+            </div>
+          </div>
+
+          <div className="shrink-0 flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between gap-2 bg-white">
+            <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
+              {translate('common.actions.cancel')}
+            </Button>
+            <Button type="submit" className="h-10!" disabled={!isCodeComplete || isConfirming}>
+              {isConfirming
+                ? translate('common.account.twoFactor.activating')
+                : translate('common.account.twoFactor.activate')}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}