UNPKG

@frank-auth/react

Version:

Flexible and customizable React UI components for Frank Authentication

4 lines (3 loc) 3.56 kB
'use client'; "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");require("@emotion/styled");const l=require("../../ui/card/card.cjs"),M=require("../../ui/divider/divider.cjs"),H=require("framer-motion"),P=require("react"),Y=require("../../../hooks/use-config.cjs"),k=require("../../../hooks/use-theme.cjs"),E=require("./sign-up-form.cjs"),G=s=>s&&s.__esModule?s:{default:s},I=G(P);function K({variant:s="shadow",className:u="",padding:o="lg",radius:m="lg",shadow:d="md",isBlurred:x=!1,methods:g=["password","oauth","magic-link"],email:p,organizationId:f,invitationToken:n,redirectUrl:j,onSuccess:y,onError:h,title:C,subtitle:b,size:N="md",showBranding:v=!0,disabled:S=!1,requireTerms:q=!0,termsUrl:D="/terms",privacyUrl:U="/privacy",footer:c,header:$,maxWidth:a=450,centered:r=!1}){const{components:R,organizationSettings:L}=Y.useConfig(),{getColorValue:Q}=k.useTheme(),w=R.SignUpCard;if(w)return e.jsx(w,{variant:s,className:u,padding:o,radius:m,shadow:d,isBlurred:x,methods:g,email:p,organizationId:f,invitationToken:n,redirectUrl:j,onSuccess:y,onError:h,title:C,subtitle:b,size:N,showBranding:v,disabled:S,requireTerms:q,termsUrl:D,privacyUrl:U,footer:c,header:$,maxWidth:a,centered:r});const A={hidden:{opacity:0,y:20,scale:.95},visible:{opacity:1,y:0,scale:1,transition:{duration:.3,ease:"easeOut"}}},B={maxWidth:typeof a=="number"?`${a}px`:a},i=v&&L?.branding,t=I.default.useMemo(()=>{if(!n)return null;try{const z=atob(n);return JSON.parse(z)}catch{return null}},[n]),F=t?{title:`Join ${t.orgName||"Organization"}`,subtitle:t.inviterName?`${t.inviterName} has invited you to join`:"You've been invited to join"}:i?.customSignUpText?{title:i.customSignUpText.title||"Create your account",subtitle:i.customSignUpText.subtitle||"Join us today"}:{title:"Create your account",subtitle:"Join us today"},O=C||F.title,_=b||F.subtitle,T=[r?"flex items-center justify-center min-h-screen p-4":""].filter(Boolean).join(" "),V=e.jsxs(l.Card,{className:`${u} ${r?"w-full":""}`,style:B,shadow:d,radius:m,isBlurred:x,children:[e.jsx(l.CardHeader,{className:`flex flex-col items-center text-center gap-3 p-${o}`,children:$||e.jsxs(e.Fragment,{children:[i?.logoUrl&&e.jsx("img",{src:i.logoUrl,alt:"Organization Logo",className:"h-12 w-auto mb-2"}),O&&e.jsx("h1",{className:"text-2xl font-bold text-foreground",children:O}),_&&e.jsx("p",{className:"text-default-500 text-sm max-w-sm",children:_}),t&&e.jsxs("div",{className:"bg-primary-50 dark:bg-primary-900/20 rounded-lg px-3 py-2 text-sm",children:[e.jsxs("p",{className:"text-primary-600 dark:text-primary-400",children:[e.jsx("span",{className:"font-medium",children:"Role:"})," ",t.role]}),t.expiresAt&&e.jsxs("p",{className:"text-primary-500 text-xs mt-1",children:["Expires:"," ",new Date(t.expiresAt).toLocaleDateString()]})]})]})}),e.jsx(M.Divider,{}),e.jsx(l.CardBody,{className:`p-${o}`,children:e.jsx(E.SignUpForm,{methods:g,email:p,organizationId:f,invitationToken:n,redirectUrl:j,onSuccess:y,onError:h,title:void 0,subtitle:void 0,size:N,showBranding:!1,disabled:S,requireTerms:q,termsUrl:D,privacyUrl:U,variant:"minimal",className:"space-y-4",showSignInLink:!0,autoFocus:!0})}),c&&e.jsxs(e.Fragment,{children:[e.jsx(M.Divider,{}),e.jsx(l.CardFooter,{className:`p-${o} text-center`,children:c})]})]}),J=e.jsx(H.motion.div,{initial:"hidden",animate:"visible",variants:A,style:{maxWidth:a},className:r?"w-full":"",children:V});return r?e.jsx("div",{className:T,children:J}):J}exports.SignUpCard=K; //# sourceMappingURL=sign-up-card.cjs.map