@frank-auth/react/dist/cjs/components/auth/user-profile/profile-form.cjs

Flexible and customizable React UI components for Frank Authentication

'use client';
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),t=require("@heroui/react"),ce=require("react"),ue=require("../../../hooks/use-auth.cjs"),oe=require("../../../hooks/use-config.cjs"),de=require("../../../hooks/use-user.cjs"),me=require("../../forms/email-field.cjs"),fe=require("../../forms/phone-field.cjs"),he=m=>m&&m.__esModule?m:{default:m},c=he(ce);function pe({onSubmit:m,onUpdate:R,onSuccess:p,onError:f,showSaveButton:L=!0,autoSave:x=!1,autoSaveDelay:U=1e3,showImageUpload:_=!0,showEmail:b=!0,showPhone:G=!0,showUsername:H=!0,showMetadata:D=!1,customFields:j=[],hideFields:g=[],fieldLayout:A="single",variant:o="bordered",size:d="md",isDisabled:u=!1,isLoading:O=!1,className:T="",showVerificationStatus:E=!0,allowImageRemoval:J=!0,onImageUpload:C,onImageRemove:k,maxImageSize:y=5*1024*1024,allowedImageTypes:P=["image/jpeg","image/png","image/webp"]}){const{user:n}=ue.useAuth(),{updateProfile:W,updateProfileImage:K,removeProfileImage:Q,isLoading:z,isEmailVerified:ee,isPhoneVerified:ae}=de.useUser(),{components:se}=oe.useConfig(),X=se.ProfileForm;if(X)return a.jsx(X,{onSubmit:m,onUpdate:R,onSuccess:p,onError:f,showSaveButton:L,autoSave:x,autoSaveDelay:U,showImageUpload:_,showEmail:b,showPhone:G,showUsername:H,showMetadata:D,customFields:j,hideFields:g,fieldLayout:A,variant:o,size:d,isDisabled:u,isLoading:O,className:T,showVerificationStatus:E,allowImageRemoval:J,onImageUpload:C,onImageRemove:k,maxImageSize:y,allowedImageTypes:P});const[r,V]=c.default.useState({firstName:n?.firstName||"",lastName:n?.lastName||"",email:n?.primaryEmailAddress||"",phone:n?.primaryPhoneNumber||"",username:n?.username||"",profileImageUrl:n?.profileImageUrl||"",metadata:n?.unsafeMetadata||{},customFields:{}}),[v,B]=c.default.useState(!1),[re,Y]=c.default.useState(!1),[q,I]=c.default.useState(!1),[i,Z]=c.default.useState({}),te=O||z||re,N=c.default.useRef();c.default.useEffect(()=>{n&&V({firstName:n.firstName||"",lastName:n.lastName||"",email:n.primaryEmailAddress||"",phone:n.primaryPhoneNumber||"",username:n.username||"",profileImageUrl:n.profileImageUrl||"",metadata:n.unsafeMetadata||{},customFields:{}})},[n]),c.default.useEffect(()=>(x&&v&&!u&&(N.current&&clearTimeout(N.current),N.current=setTimeout(()=>{$()},U)),()=>{N.current&&clearTimeout(N.current)}),[r,v,x,U,u]);const h=c.default.useCallback((e,s)=>{V(l=>({...l,[e]:s})),B(!0),i[e]&&Z(l=>{const F={...l};return delete F[e],F})},[i]),M=c.default.useCallback((e,s)=>{V(l=>({...l,customFields:{...l.customFields,[e]:s}})),B(!0)},[]),w=c.default.useCallback(()=>{const e={};return b&&r.email&&(/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(r.email)||(e.email="Please enter a valid email address")),j.forEach(s=>{if(s.required&&!r.customFields?.[s.key]&&(e[s.key]=`${s.label} is required`),s.validation&&r.customFields?.[s.key]){const l=s.validation(r.customFields[s.key]);l&&(e[s.key]=l)}}),Z(e),Object.keys(e).length===0},[r,b,j]),$=c.default.useCallback(async()=>{if(w())try{Y(!0);const e={firstName:r.firstName,lastName:r.lastName,primaryEmailAddress:r.email,primaryPhoneNumber:r.phone,username:r.username,unsafeMetadata:{...r.metadata,...r.customFields}};await W(e),B(!1),R?.(r),p?.("Profile updated successfully")}catch(e){const s=e instanceof Error?e.message:"Failed to update profile";f?.(s)}finally{Y(!1)}},[r,w,W,R,p,f]),le=c.default.useCallback(e=>{e.preventDefault(),m?m(r):$()},[r,m,$]),ne=c.default.useCallback(async e=>{if(!P.includes(e.type)){f?.("Please select a valid image file (JPEG, PNG, or WebP)");return}if(e.size>y){f?.(`Image size must be less than ${Math.round(y/1024/1024)}MB`);return}try{I(!0);let s;C?s=await C(e):s=await K(URL.createObjectURL(e)),h("profileImageUrl",s),p?.("Profile image updated successfully")}catch(s){const l=s instanceof Error?s.message:"Failed to upload image";f?.(l)}finally{I(!1)}},[P,y,C,K,h,p,f]),ie=c.default.useCallback(async()=>{try{I(!0),k?await k():await Q(),h("profileImageUrl",""),p?.("Profile image removed successfully")}catch(e){const s=e instanceof Error?e.message:"Failed to remove image";f?.(s)}finally{I(!1)}},[k,Q,h,p,f]),S=c.default.useRef(null);return n?a.jsxs("form",{onSubmit:le,className:`space-y-6 ${T}`,children:[_&&!g.includes("profileImage")&&a.jsxs(t.Card,{variant:o,children:[a.jsx(t.CardHeader,{children:a.jsx("h4",{className:"text-md font-semibold",children:"Profile Picture"})}),a.jsx(t.Divider,{}),a.jsxs(t.CardBody,{children:[a.jsxs("div",{className:"flex items-center gap-4",children:[a.jsx(t.Avatar,{src:r.profileImageUrl,name:`${r.firstName} ${r.lastName}`,size:"xl",isBordered:!0,fallback:q?a.jsx(t.Spinner,{size:"sm"}):void 0}),a.jsxs("div",{className:"flex flex-col gap-2",children:[a.jsxs("div",{className:"flex gap-2",children:[a.jsx(t.Button,{size:"sm",variant:"bordered",onPress:()=>S.current?.click(),isDisabled:u||q,isLoading:q,children:"Upload Photo"}),J&&r.profileImageUrl&&a.jsx(t.Button,{size:"sm",variant:"light",color:"danger",onPress:ie,isDisabled:u||q,children:"Remove"})]}),a.jsxs("p",{className:"text-xs text-default-500",children:["JPG, PNG or WebP. Max size"," ",Math.round(y/1024/1024),"MB."]})]})]}),a.jsx("input",{ref:S,type:"file",accept:P.join(","),onChange:e=>{const s=e.target.files?.[0];s&&ne(s),e.target.value=""},className:"hidden"})]})]}),a.jsxs(t.Card,{variant:o,children:[a.jsx(t.CardHeader,{children:a.jsx("h4",{className:"text-md font-semibold",children:"Personal Information"})}),a.jsx(t.Divider,{}),a.jsx(t.CardBody,{children:a.jsxs("div",{className:`grid gap-4 ${A==="double"?"md:grid-cols-2":"grid-cols-1"}`,children:[!g.includes("firstName")&&a.jsx(t.Input,{label:"First Name",placeholder:"Enter your first name",value:r.firstName,onValueChange:e=>h("firstName",e),variant:o,size:d,isDisabled:u,isInvalid:!!i.firstName,errorMessage:i.firstName}),!g.includes("lastName")&&a.jsx(t.Input,{label:"Last Name",placeholder:"Enter your last name",value:r.lastName,onValueChange:e=>h("lastName",e),variant:o,size:d,isDisabled:u,isInvalid:!!i.lastName,errorMessage:i.lastName}),H&&!g.includes("username")&&a.jsx(t.Input,{label:"Username",placeholder:"Enter your username",value:r.username,onValueChange:e=>h("username",e),variant:o,size:d,isDisabled:u,isInvalid:!!i.username,errorMessage:i.username}),b&&!g.includes("email")&&a.jsx(me.EmailField,{label:"Email Address",value:r.email,onChange:e=>h("email",e),variant:o,size:d,disabled:u,error:i.email,showVerificationStatus:E,isVerified:ee}),G&&!g.includes("phone")&&a.jsx(fe.PhoneField,{label:"Phone Number",value:r.phone,onChange:e=>h("phone",e),variant:o,size:d,disabled:u,error:i.phone,showVerificationStatus:E,isVerified:ae})]})})]}),j.length>0&&a.jsxs(t.Card,{variant:o,children:[a.jsx(t.CardHeader,{children:a.jsx("h4",{className:"text-md font-semibold",children:"Additional Information"})}),a.jsx(t.Divider,{}),a.jsx(t.CardBody,{children:a.jsx("div",{className:`grid gap-4 ${A==="double"?"md:grid-cols-2":"grid-cols-1"}`,children:j.map(e=>{const s=r.customFields?.[e.key]||"";switch(e.type){case"textarea":return a.jsx(t.Textarea,{label:e.label,placeholder:e.placeholder,description:e.description,value:s,onValueChange:l=>M(e.key,l),variant:o,size:d,isDisabled:u,isRequired:e.required,isInvalid:!!i[e.key],errorMessage:i[e.key]},e.key);case"select":return a.jsx(t.Select,{label:e.label,placeholder:e.placeholder,description:e.description,selectedKeys:s?[s]:[],onSelectionChange:l=>{const F=Array.from(l)[0];M(e.key,F)},variant:o,size:d,isDisabled:u,isRequired:e.required,isInvalid:!!i[e.key],errorMessage:i[e.key],children:e.options?.map(l=>a.jsx(t.SelectItem,{value:l.value,children:l.label},l.value))||[]},e.key);case"switch":return a.jsxs("div",{className:"flex items-center justify-between",children:[a.jsxs("div",{children:[a.jsxs("label",{className:"text-sm font-medium",children:[e.label,e.required&&a.jsx("span",{className:"text-danger ml-1",children:"*"})]}),e.description&&a.jsx("p",{className:"text-xs text-default-500 mt-1",children:e.description})]}),a.jsx(t.Switch,{isSelected:!!s,onValueChange:l=>M(e.key,l),size:d,isDisabled:u})]},e.key);default:return a.jsx(t.Input,{label:e.label,placeholder:e.placeholder,description:e.description,value:s,onValueChange:l=>M(e.key,l),type:e.type,variant:o,size:d,isDisabled:u,isRequired:e.required,isInvalid:!!i[e.key],errorMessage:i[e.key]},e.key)}})})})]}),L&&!x&&a.jsx("div",{className:"flex justify-end gap-3",children:a.jsx(t.Button,{type:"submit",color:"primary",isDisabled:u||!v,isLoading:te,children:"Save Changes"})}),x&&v&&a.jsxs("div",{className:"flex items-center gap-2 text-sm text-default-500",children:[a.jsx(t.Spinner,{size:"sm"}),a.jsx("span",{children:"Auto-saving..."})]})]}):null}exports.ProfileForm=pe;
//# sourceMappingURL=profile-form.cjs.map