@frank-auth/react
Version:
Flexible and customizable React UI components for Frank Authentication
4 lines (3 loc) • 6.02 kB
JavaScript
'use client';
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");require("@emotion/styled");const O=require("../../../ui/button/button.cjs"),F=require("@heroicons/react/24/outline"),s=require("react"),W=require("./resend-email-button.cjs"),X=require("../../../../hooks/use-auth.cjs"),G=require("../../../../hooks/use-config.cjs"),H=require("../../common/error-boundary.cjs"),U=require("../../common/verification.cjs");function J({organizationId:w,email:m,autoSubmit:j=!0,codeLength:x=6,resendDelay:h=30,maxResendAttempts:E=3,expirationTime:C=300,onVerificationSuccess:b,onVerificationError:o,onCodeSent:S,onCodeResent:A,token:N}){const{resendVerification:B,verifyIdentity:k,extractEmailFromUrl:l,extractTokenFromUrl:d}=X.useAuth(),[n,M]=s.useState(""),[p,i]=s.useState("idle"),[R,r]=s.useState(null),[u,I]=s.useState(0),[g,q]=s.useState(0),[v,T]=s.useState(null),f=s.useMemo(()=>N||d(),[N,d]),c=s.useMemo(()=>m||l(),[m,l]);s.useEffect(()=>{if(g>0){const t=setTimeout(()=>q(a=>a-1),1e3);return()=>clearTimeout(t)}},[g]),s.useEffect(()=>{if(v){const a=setInterval(()=>{new Date>v&&(i("expired"),r("Verification code has expired"))},1e3);return()=>clearInterval(a)}},[v]),s.useEffect(()=>{j&&n.length===x&&p==="sent"&&y()},[n,x,j,p]),s.useEffect(()=>{f&&f!==""&&D()},[n,x,j,p]);const D=s.useCallback(async()=>{if(!f){i("error"),r("No verification token found.");return}try{i("verifying"),r(null);const t=await k("email",{token:f});if(t.verified)i("verified"),b?.({email:c||"",verified:!0});else throw new Error(t.message??"Invalid verification code")}catch(t){const a=t instanceof Error?t:new Error("Verification failed");i("error"),r(a.message),o?.(a)}},[f]),V=s.useCallback(async()=>{if(!c||!w){r("Missing required parameters for email verification");return}try{i("sending"),r(null);const t=await B({email:c,type:"email"});if(t.success)i("sent"),q(h),T(new Date(Date.now()+C*1e3)),S?.();else throw new Error(t.message||"Failed to send verification code")}catch(t){const a=t instanceof Error?t:new Error("Failed to send verification code");i("error"),r(a.message),o?.(a)}},[c,w,B,h,C,S,o]),P=s.useCallback(async()=>{if(u>=E){r("Maximum resend attempts reached");return}try{I(t=>t+1),await V(),A?.(u+1)}catch(t){const a=t instanceof Error?t:new Error("Failed to resend verification code");o?.(a)}},[u,E,V,A,o]),y=s.useCallback(async()=>{if(!n||n.length!==x){r("Please enter a valid verification code");return}if(!c||!w){r("Missing required parameters for verification");return}try{if(i("verifying"),r(null),(await k("email",{code:n,token:f??""})).verified)i("verified"),b?.({email:c||"",verified:!0});else throw new Error("Invalid verification code")}catch(t){const a=t instanceof Error?t:new Error("Verification failed");i("error"),r(a.message),o?.(a)}},[n,x,w,k,c,N,b,o]),Y=s.useCallback(()=>{M(""),i("idle"),r(null),I(0),q(0),T(null)},[]);return{code:n,setCode:M,status:p,error:R,resendAttempts:u,timeRemaining:g,expiresAt:v,canResend:g===0&&u<E,sendCode:V,resendCode:P,handleVerify:y,reset:Y}}const K=H.withErrorBoundary(function({email:m,organizationId:j,autoSubmit:x=!0,codeLength:h=6,resendDelay:E=30,maxResendAttempts:C=3,expirationTime:b=300,onVerificationSuccess:o,onVerificationError:S,onCodeSent:A,onCodeResent:N,className:B,style:k,disabled:l=!1,size:d="md",radius:n="md"}){const{config:M,components:p}=G.useConfig(),{code:i,setCode:R,status:r,error:u,resendAttempts:I,timeRemaining:g,canResend:q,sendCode:v,resendCode:T,handleVerify:f}=J({email:m,organizationId:j,autoSubmit:x,codeLength:h,resendDelay:E,maxResendAttempts:C,expirationTime:b,onVerificationSuccess:o,onVerificationError:S,onCodeSent:A,onCodeResent:N}),c=p.Button??O.Button,D=y=>{y.length<=h&&R(y)},V=y=>{y.preventDefault(),f()},P=()=>r==="verified"?e.jsxs("div",{className:"text-center py-8",children:[e.jsx(F.CheckCircleIcon,{className:"h-16 w-16 text-success mx-auto mb-4"}),e.jsx("h3",{className:"text-lg font-semibold mb-2",children:"Email Verified!"}),e.jsx("p",{className:"text-default-500",children:"Your email address has been successfully verified."})]}):r==="expired"?e.jsxs("div",{className:"text-center py-8",children:[e.jsx(F.XCircleIcon,{className:"h-16 w-16 text-warning mx-auto mb-4"}),e.jsx("h3",{className:"text-lg font-semibold mb-2",children:"Code Expired"}),e.jsx("p",{className:"text-default-500 mb-4",children:"The verification code has expired. Please request a new one."}),e.jsx(c,{color:"primary",onClick:v,disabled:l,size:d,radius:n,startContent:e.jsx(F.ArrowPathIcon,{className:"h-4 w-4"}),children:"Send New Code"})]}):e.jsxs("form",{onSubmit:V,className:"space-y-4",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(F.EnvelopeIcon,{className:"h-12 w-12 text-primary mx-auto mb-4"}),e.jsx("h3",{className:"text-lg font-semibold mb-2",children:"Verify Your Email"}),m&&e.jsxs("p",{className:"text-default-500 mb-4",children:["We've sent a verification code to ",m]})]}),u&&e.jsx(U.VerificationError,{error:u}),m&&e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"space-y-4",children:[e.jsx(U.VerificationInput,{value:i,onChange:D,length:h,disabled:l||r==="verifying",placeholder:"Enter verification code",size:d,radius:n}),e.jsx(c,{type:"submit",color:"primary",className:"w-full",size:d,radius:n,isLoading:r==="verifying",disabled:l||i.length!==h||r==="verifying",children:r==="verifying"?"Verifying...":"Verify Email"}),e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("span",{className:"text-sm text-default-500",children:"Didn't receive the code?"}),e.jsx(W.ResendEmailButton,{onResend:T,disabled:l||!q,remainingTime:g,attempt:I,maxAttempts:C,size:d,radius:n})]})]}),r==="idle"&&e.jsx(c,{color:"primary",variant:"flat",className:"w-full",size:d,radius:n,onClick:v,disabled:l,isLoading:r==="sending",children:r==="sending"?"Sending...":"Send Verification Code"})]})]});return e.jsx("div",{className:B,style:k,children:P()})});exports.EmailVerification=K;
//# sourceMappingURL=email-verification.cjs.map