@frank-auth/react/dist/cjs/components/auth/sign-up/sign-up-form.cjs

Flexible and customizable React UI components for Frank Authentication

'use client';
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");require("@emotion/styled");const se=require("../../ui/button/button.cjs"),ce=require("../../ui/input/input.cjs"),Z=require("../../ui/checkbox/checkbox.cjs"),G=require("../../ui/link/link.cjs"),ee=require("../../ui/divider/divider.cjs"),d=require("@heroicons/react/24/outline"),de=require("framer-motion"),ue=require("../../../theme/context.cjs"),p=require("react"),me=require("../../../hooks/use-auth.cjs"),ae=require("../../../hooks/use-config.cjs"),fe=require("../../../hooks/use-oauth.cjs"),he=require("../../../hooks/use-passkeys.cjs"),pe=require("../../forms/email-field.cjs"),xe=require("../../forms/form-wrapper.cjs"),O=require("../../forms/password-field.cjs"),y=require("./index.cjs");function ge({onSuccess:P,onError:I,redirectUrl:N,organizationId:x,disabled:f,size:c="md",radius:h="md"}){const{signInWithGoogle:A,signInWithGitHub:U,signInWithMicrosoft:B,signInWithApple:R,isLoading:i}=fe.useOAuth(),{components:u}=ae.useConfig(),C=u.Button??se.Button,k=p.useCallback(async(n,M)=>{try{await M(),P(n,{provider:n})}catch(S){I?.(S instanceof Error?S:new Error(`${n} sign-up failed`))}},[P,I]);return e.jsxs("div",{className:"space-y-3",children:[e.jsx(C,{variant:"bordered",size:c,radius:h,className:"w-full",startContent:e.jsx(be,{}),onPress:()=>k("google",()=>A({redirectUrl:N,organizationId:x})),isDisabled:f||i,children:"Continue with Google"}),e.jsx(C,{variant:"bordered",size:c,radius:h,className:"w-full",startContent:e.jsx(we,{}),onPress:()=>k("github",()=>U({redirectUrl:N,organizationId:x})),isDisabled:f||i,children:"Continue with GitHub"}),e.jsx(C,{variant:"bordered",size:c,radius:h,className:"w-full",startContent:e.jsx(je,{}),onPress:()=>k("microsoft",()=>B({redirectUrl:N,organizationId:x})),isDisabled:f||i,children:"Continue with Microsoft"}),e.jsx(C,{variant:"bordered",size:c,radius:h,className:"w-full",startContent:e.jsx(ve,{}),onPress:()=>k("apple",()=>R({redirectUrl:N,organizationId:x})),isDisabled:f||i,children:"Continue with Apple"})]})}function Ne({methods:P=["password","sso","magic-link"],email:I="",organizationId:N,invitationToken:x,redirectUrl:f,onSuccess:c,onError:h,showSignInLink:A=!0,title:U,subtitle:B,variant:R="default",size:i="md",radius:u="md",className:C="",showBranding:k=!0,disabled:n=!1,footer:M,header:S,requireTerms:H=!0,termsUrl:_="/terms",privacyUrl:$="/privacy",passwordRequirements:L=y.DEFAULT_PASSWORD_REQUIREMENTS,autoFocus:T=!0,collectFields:l=["firstName","lastName"]}){const{theme:z}=ue.useTheme(),{signUp:J,isLoading:o}=me.useAuth(),{features:q,organizationSettings:D,components:W,linksPath:te}=ae.useConfig(),{registerPasskey:Y}=he.usePasskeys(),E=W.Input??ce.Input,V=W.Button??se.Button,Q=W.SignUpForm;if(Q)return e.jsx(Q,{methods:P,email:I,organizationId:N,invitationToken:x,redirectUrl:f,onSuccess:c,onError:h,showSignInLink:A,title:U,subtitle:B,variant:R,size:i,className:C,showBranding:k,disabled:n,footer:M,header:S,requireTerms:H,termsUrl:_,privacyUrl:$,passwordRequirements:L,autoFocus:T,collectFields:l});const b=p.useMemo(()=>y.formatInvitationData(x),[x]),[s,m]=p.useState({step:"form",method:"password",email:I,password:"",confirmPassword:"",firstName:"",lastName:"",username:"",phoneNumber:"",showPassword:!1,showConfirmPassword:!1,acceptTerms:!1,acceptMarketing:!1,fieldErrors:{},passwordSuggestions:[]}),[F,v]=p.useState(null),w=p.useMemo(()=>P.filter(a=>{switch(a){case"oauth":return q.oauth;case"magic-link":return q.magicLink;case"passkey":return q.passkeys;default:return!0}}),[P,q]),K=p.useCallback((a,r)=>{const t={...s.fieldErrors};switch(a){case"email":y.signUpValidation.email(r)?delete t.email:t.email="Please enter a valid email address";break;case"password":y.signUpValidation.password(r,L)?delete t.password:t.password="Password does not meet requirements",s.confirmPassword&&r!==s.confirmPassword?t.confirmPassword="Passwords do not match":s.confirmPassword&&delete t.confirmPassword;break;case"confirmPassword":r!==s.password?t.confirmPassword="Passwords do not match":delete t.confirmPassword;break;case"firstName":l.includes("firstName")&&!y.signUpValidation.firstName(r)?t.firstName="Please enter a valid first name":delete t.firstName;break;case"lastName":l.includes("lastName")&&!y.signUpValidation.lastName(r)?t.lastName="Please enter a valid last name":delete t.lastName;break;case"username":l.includes("username")&&r&&!y.signUpValidation.username(r)?t.username="Username must be at least 3 characters and contain only letters, numbers, - and _":delete t.username;break;case"phoneNumber":l.includes("phoneNumber")&&r&&!y.signUpValidation.phoneNumber(r)?t.phoneNumber="Please enter a valid phone number":delete t.phoneNumber;break}m(j=>({...j,fieldErrors:t}))},[s.fieldErrors,s.password,s.confirmPassword,L,l]),g=p.useCallback((a,r)=>{m(t=>({...t,[a]:r})),K(a,r)},[K]),X=b?{title:`Join ${b.organizationName}`,subtitle:b.inviterName?`${b.inviterName} has invited you to join`:"You've been invited to join"}:D?.branding?.customSignUpText?{title:D.branding.customSignUpText.title||"Create your account",subtitle:D.branding.customSignUpText.subtitle||"Join us today"}:{title:"Create your account",subtitle:"Join us today"},re=U||X.title,ne=B||X.subtitle,ie=p.useCallback(async a=>{a.preventDefault(),v(null);const r=["email","password"];l.includes("firstName")&&r.push("firstName"),l.includes("lastName")&&r.push("lastName");for(const t of r)if(!s[t]){v("Please fill in all required fields");return}if(Object.keys(s.fieldErrors).length>0){v("Please fix the errors above");return}if(s.password!==s.confirmPassword){v("Passwords do not match");return}if(H&&!s.acceptTerms){v("Please accept the terms of service");return}try{const t=await J({emailAddress:s.email,password:s.password,firstName:s.firstName||void 0,lastName:s.lastName||void 0,username:s.username||void 0,organizationId:b?.organizationId||N,invitationToken:x,acceptTerms:s.acceptTerms,marketingConsent:s.acceptMarketing,unsafeMetadata:{phoneNumber:s.phoneNumber||void 0,acceptMarketing:s.acceptMarketing}});if(t.status==="needs_verification"){m(j=>({...j,step:"verification"}));return}t.status==="complete"&&t.user&&(m(j=>({...j,step:"success"})),c?.(t),f&&setTimeout(()=>{window.location.href=f},1e3)),t.status==="missing_requirements"&&t.error&&v(t.error?.message)}catch(t){const j=t instanceof Error?t:new Error("Sign up failed");v(j.message),h?.(j)}},[s,l,H,J,b?.organizationId,N,x,c,h,f]),oe=p.useCallback((a,r)=>{m(t=>({...t,step:"success"})),c?.(r)},[c]);p.useCallback(a=>{m(r=>({...r,step:"verification"})),c?.(a)},[c]);const le=p.useCallback(async()=>{try{const a=await Y("Sign-up passkey");m(r=>({...r,step:"success"})),c?.(a)}catch(a){const r=a instanceof Error?a:new Error("Passkey registration failed");v(r.message),h?.(r)}},[Y,c,h]);return s.step==="success"?e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(de.motion.div,{initial:{scale:0},animate:{scale:1},className:"mx-auto w-16 h-16 bg-success-100 dark:bg-success-900/30 rounded-full flex items-center justify-center",children:e.jsx(d.CheckIcon,{className:"w-8 h-8 text-success-600 dark:text-success-400"})}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-xl font-semibold text-foreground mb-2",children:"Welcome aboard!"}),e.jsx("p",{className:"text-default-500 text-sm",children:"Your account has been created successfully."})]}),f&&e.jsxs("div",{className:"flex items-center justify-center gap-2 text-sm text-default-500",children:[e.jsx("div",{className:"animate-spin rounded-full h-4 w-4 border-b-2 border-primary"}),e.jsx("span",{children:"Setting up your account..."})]})]}):s.step==="verification"?e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx("div",{className:"mx-auto w-16 h-16 bg-primary-100 dark:bg-primary-900/30 rounded-full flex items-center justify-center",children:e.jsx(d.EnvelopeIcon,{className:"w-8 h-8 text-primary-600 dark:text-primary-400"})}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-xl font-semibold text-foreground mb-2",children:"Check your email"}),e.jsxs("p",{className:"text-default-500 text-sm",children:["We've sent a verification link to ",s.email]})]}),e.jsx(V,{variant:"light",size:"sm",onPress:()=>m(a=>({...a,step:"form"})),children:"Use a different email"})]}):e.jsxs(xe.default,{size:i,radius:u,variant:"flat",disableAnimations:!0,className:`space-y-6 ${C}`,footer:M,header:S,title:re,onSubmit:ie,subtitle:ne,desc:b&&e.jsx("div",{className:"bg-primary-50 dark:bg-primary-900/20 rounded-lg p-3 text-sm",children:e.jsxs("p",{className:"text-primary-600 dark:text-primary-400",children:["You're joining as: ",e.jsx("strong",{children:b.role})]})}),showCard:!1,logo:k&&D?.branding?.logoUrl?e.jsx("img",{src:D.branding.logoUrl,alt:"Organization Logo",className:"h-8 w-auto mx-auto mb-4"}):void 0,children:[w.includes("oauth")&&e.jsxs(e.Fragment,{children:[e.jsx(ge,{onSuccess:oe,onError:h,redirectUrl:f,organizationId:b?.organizationId||N,disabled:n,size:i,radius:u}),(w.includes("password")||w.includes("magic-link"))&&e.jsx("div",{className:"relative",children:e.jsx(ee.Divider,{className:"my-4",children:e.jsx("span",{className:"bg-background px-2 text-sm text-default-500",children:"or"})})})]}),w.includes("passkey")&&e.jsxs(e.Fragment,{children:[e.jsx(V,{variant:"bordered",size:i,radius:u,className:"w-full",startContent:e.jsx(d.LockClosedIcon,{className:"w-4 h-4"}),onPress:le,isDisabled:n||o,children:"Sign up with passkey"}),(w.includes("password")||w.includes("magic-link"))&&e.jsxs("div",{className:"relative",children:[e.jsx(ee.Divider,{className:"my-4"}),e.jsx("div",{className:"absolute inset-0 flex items-center justify-center",children:e.jsx("span",{className:"bg-background px-2 text-sm text-default-500",children:"or"})})]})]}),w.includes("password")&&e.jsxs("div",{className:"space-y-4",children:[(l.includes("firstName")||l.includes("lastName"))&&e.jsxs("div",{className:"grid grid-cols-1 gap-4 sm:grid-cols-2",children:[l.includes("firstName")&&e.jsx(E,{type:"text",label:"First Name",placeholder:"Enter your first name",value:s.firstName,onChange:a=>g("firstName",a.target.value),startContent:e.jsx(d.UserIcon,{className:"w-4 h-4 text-default-400"}),size:i,radius:u,required:!0,disabled:n||o,isRequired:!0,isDisabled:n||o,isInvalid:!!s.fieldErrors.firstName,errorMessage:s.fieldErrors.firstName,autoFocus:T,variant:"bordered"}),l.includes("lastName")&&e.jsx(E,{type:"text",label:"Last Name",placeholder:"Enter your last name",value:s.lastName,onChange:a=>g("lastName",a.target.value),startContent:e.jsx(d.UserIcon,{className:"w-4 h-4 text-default-400"}),size:i,radius:u,required:!0,disabled:n||o,isRequired:!0,isDisabled:n||o,isInvalid:!!s.fieldErrors.lastName,errorMessage:s.fieldErrors.lastName,autoFocus:T&&!l.includes("firstName"),variant:"bordered"})]}),e.jsx(pe.default,{label:"Email",placeholder:"Enter your email",value:s.email,onChange:a=>g("email",a),startContent:e.jsx(d.EnvelopeIcon,{className:"w-4 h-4 text-default-400"}),size:i,radius:u,required:!0,disabled:n||o,error:s.fieldErrors.email,autoFocus:T&&l.length===0,showSuggestions:!1,variant:"bordered"}),l.includes("username")&&e.jsx(E,{type:"text",label:"Username",placeholder:"Choose a username",value:s.username,onChange:a=>g("username",a.target.value),startContent:e.jsx("span",{className:"text-default-400 text-sm",children:"@"}),size:i,radius:u,required:!0,disabled:n||o,isDisabled:n||o,isInvalid:!!s.fieldErrors.username,errorMessage:s.fieldErrors.username,variant:"bordered"}),l.includes("phoneNumber")&&e.jsx(E,{type:"tel",label:"Phone Number",placeholder:"Enter your phone number",value:s.phoneNumber,onChange:a=>g("phoneNumber",a.target.value),startContent:e.jsx(d.PhoneIcon,{className:"w-4 h-4 text-default-400"}),size:i,radius:u,disabled:n||o,isDisabled:n||o,isInvalid:!!s.fieldErrors.phoneNumber,errorMessage:s.fieldErrors.phoneNumber,variant:"bordered"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(O.default,{label:"Password",placeholder:"Create a password",value:s.password,onChange:a=>g("password",a),endContent:e.jsx("button",{type:"button",onClick:()=>m(a=>({...a,showPassword:!a.showPassword})),className:"focus:outline-none",children:s.showPassword?e.jsx(d.EyeSlashIcon,{className:"w-4 h-4 text-default-400"}):e.jsx(d.EyeIcon,{className:"w-4 h-4 text-default-400"})}),size:i,radius:u,required:!0,advanceRequirements:L,disabled:n||o,isInvalid:!!s.fieldErrors.password,errorMessage:s.fieldErrors.password,variant:"bordered"}),s.passwordSuggestions.length>0&&e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{className:"text-xs text-default-500",children:"Suggested passwords:"}),e.jsx("div",{className:"space-y-1",children:s.passwordSuggestions.map((a,r)=>e.jsx("button",{type:"button",onClick:()=>{g("password",a),g("confirmPassword",a)},className:"text-xs font-mono text-primary-600 hover:text-primary-800 hover:underline block",children:a},r))})]})]}),e.jsx(E,{type:s.showConfirmPassword?"text":"password",label:"Confirm Password",placeholder:"Confirm your password",value:s.confirmPassword,onChange:a=>g("confirmPassword",a.target.value),startContent:e.jsx(d.LockClosedIcon,{className:"w-4 h-4 text-default-400"}),endContent:e.jsx("button",{type:"button",onClick:()=>m(a=>({...a,showConfirmPassword:!a.showConfirmPassword})),className:"focus:outline-none",children:s.showConfirmPassword?e.jsx(O.StyledSvg,{theme:z,as:d.EyeSlashIcon}):e.jsx(O.StyledSvg,{theme:z,as:d.EyeIcon})}),size:i,isRequired:!0,isDisabled:n||o,isInvalid:!!s.fieldErrors.confirmPassword,errorMessage:s.fieldErrors.confirmPassword,variant:"bordered"}),e.jsxs("div",{className:"space-y-3",children:[H&&e.jsx(Z.Checkbox,{isSelected:s.acceptTerms,onValueChange:a=>m(r=>({...r,acceptTerms:a})),size:"sm",isDisabled:n||o,isRequired:!0,children:e.jsxs("span",{className:"text-sm",children:["I agree to the"," ",e.jsx(G.Link,{href:_,size:"sm",color:"primary",isExternal:!0,children:"Terms of Service"})," ","and"," ",e.jsx(G.Link,{href:$,size:"sm",color:"primary",isExternal:!0,children:"Privacy Policy"})]})}),e.jsx(Z.Checkbox,{isSelected:s.acceptMarketing,onValueChange:a=>m(r=>({...r,acceptMarketing:a})),size:"sm",isDisabled:n||o,children:e.jsx("span",{className:"text-sm text-default-500",children:"I'd like to receive product updates and marketing emails"})})]}),F&&e.jsx("div",{className:"text-danger-600 text-sm bg-danger-50 dark:bg-danger-900/20 rounded-lg p-3",children:F}),e.jsx(V,{type:"submit",color:"primary",size:i,radius:u,className:"w-full",isLoading:o,isDisabled:n||!s.email||!s.password||!s.acceptTerms,children:o?"Creating account...":"Create account"})]}),w.includes("magic-link")&&!w.includes("password")&&e.jsxs("div",{className:"space-y-4",children:[e.jsx(E,{type:"email",label:"Email",placeholder:"Enter your email",value:s.email,onChange:a=>g("email",a.target.value),startContent:e.jsx(d.EnvelopeIcon,{className:"w-4 h-4 text-default-400"}),size:i,isRequired:!0,isDisabled:n||o,autoFocus:!0,variant:"bordered"}),e.jsx(V,{variant:"bordered",size:i,radius:u,className:"w-full",startContent:e.jsx(d.EnvelopeIcon,{className:"w-4 h-4"}),isDisabled:n||o||!s.email,isLoading:o,children:"Send magic link"})]}),A&&q.signIn&&e.jsxs("div",{className:"text-center text-sm",children:[e.jsx("span",{className:"text-default-500",children:"Already have an account? "}),e.jsx(G.Link,{href:te?.signIn,color:"primary",children:"Sign in"})]}),M]})}function be(){return e.jsxs("svg",{className:"w-4 h-4",viewBox:"0 0 24 24",children:[e.jsx("path",{fill:"#4285F4",d:"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"}),e.jsx("path",{fill:"#34A853",d:"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"}),e.jsx("path",{fill:"#FBBC05",d:"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"}),e.jsx("path",{fill:"#EA4335",d:"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"})]})}function we(){return e.jsx("svg",{className:"w-4 h-4",fill:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{d:"M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"})})}function je(){return e.jsxs("svg",{className:"w-4 h-4",viewBox:"0 0 24 24",children:[e.jsx("path",{fill:"#f25022",d:"M1 1h10v10H1z"}),e.jsx("path",{fill:"#00a4ef",d:"M13 1h10v10H13z"}),e.jsx("path",{fill:"#7fba00",d:"M1 13h10v10H1z"}),e.jsx("path",{fill:"#ffb900",d:"M13 13h10v10H13z"})]})}function ve(){return e.jsx("svg",{className:"w-4 h-4",fill:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{d:"M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"})})}exports.SignUpForm=Ne;
//# sourceMappingURL=sign-up-form.cjs.map