@neuctra/authix 1.2.1 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -496,7 +496,7 @@ React keys must be passed directly to JSX without using spread:
|
|
|
496
496
|
animation: none;
|
|
497
497
|
}
|
|
498
498
|
}
|
|
499
|
-
`})]})},ss=({darkMode:t=!0,homeUrl:e,onLogout:n,onVerify:s,primaryColor:i="#00C212"})=>{const o=me(),[a,c]=S.useState(null),[d,u]=S.useState(),[x,y]=S.useState(!0),[k,T]=S.useState(!1),[p,w]=S.useState(!1),[h,I]=S.useState(!1),[C,g]=S.useState(!1),[z,D]=S.useState(!1),[b,j]=S.useState(!1),[q,_]=S.useState(!1),[X,W]=S.useState(!1),[P,G]=S.useState(null),[O,R]=S.useState(!1),[M,K]=S.useState({email:"",otp:""}),[H,F]=S.useState(!1),[J,l]=S.useState(!1);S.useEffect(()=>{if(typeof window<"u"){const v=()=>c(window.innerWidth);return v(),window.addEventListener("resize",v),()=>window.removeEventListener("resize",v)}},[]);const m=(v,$)=>{G({type:v,message:$}),setTimeout(()=>G(null),3e3)},E=()=>{W(!0);const v=setTimeout(()=>{_(!1),W(!1)},150);return()=>clearTimeout(v)};S.useEffect(()=>{const v=$=>{const V=document.querySelector(".dropdown-container");V&&!V.contains($.target)&&E()};return q&&document.addEventListener("mousedown",v),()=>{document.removeEventListener("mousedown",v)}},[q]);const U=async()=>{if(!M.email||!/\S+@\S+\.\S+/.test(M.email)){m("error","Please enter a valid email");return}if(!d?.id){m("error","User not found. Cannot send OTP.");return}try{l(!0);const v=await o.requestEmailVerificationOTP({userId:d.id,email:M.email}),$=v?.data?.success??v?.success,V=v?.data?.message??v?.message;$?(m("success",V||"OTP sent to email!"),F(!0)):m("error",V||"Failed to send OTP")}catch(v){const $=v?.response?.data?.message||v?.message||"Server error";m("error",$)}finally{l(!1)}},ne=async v=>{if(v.preventDefault(),!M.email||!M.otp){m("error","Please fill in all fields");return}if(!d){m("error","User not found");return}try{l(!0);const $=await o.verifyEmail({email:M.email,otp:M.otp}),V=$?.data?.success??$?.success,Q=$?.data?.message??$?.message;if(V){m("success",Q||"Email verified!");const ue={...d,isVerified:!0};u(ue),typeof s=="function"&&s(ue),K({email:ue.email,otp:""}),F(!1),j?.(!1)}else m("error",Q||"Verification failed")}catch($){const V=$?.response?.data?.message||$?.message||"Something went wrong";m("error",V)}finally{l(!1)}},le=async v=>{if(!d)return!1;try{const $=await o.updateUser({userId:d.id,avatarUrl:v});if($?.success){const V={...d,...$.user,avatarUrl:v};return u(V),m("success","Avatar updated successfully!"),!0}return m("error",$?.message||"Failed to update avatar"),!1}catch($){return console.error("Avatar update error:",$),m("error","Failed to update avatar"),!1}},B=async()=>{if(d){w(!0);try{const v=d.email,$=await o.updateUser({userId:d.id,...d});if($.success&&$.user){const V=$.user.email!==v,Q={...d,...$.user,isVerified:V?!1:d.isVerified};u(Q),localStorage.setItem("userInfo",JSON.stringify(Q)),m("success",V?"Email updated. Please verify your new email.":"Profile updated successfully"),T(!1)}else m("error",$.message||"Update failed")}catch(v){console.error(v),m("error","Update failed")}finally{w(!1)}}},ce=async v=>{try{const $=await o.checkIfUserExists(v);$?.success===!0&&$?.exists===!1&&(console.warn("❌ User does not exist on server. Clearing session..."),localStorage.removeItem("userInfo"),u(null))}catch($){console.error("⚠️ User validation request failed:",$)}};S.useEffect(()=>{(async()=>{try{y(!0);const $=await o.checkUserSession();if($.user?.id){const V=$.user.id,Q=await o.getUserProfile({userId:V});if(Q.user){const ue=Q.user;u(ue),ce(V)}else u(null),localStorage.removeItem("userInfo")}else u(null),localStorage.removeItem("userInfo")}catch($){console.error("User init failed:",$),u(null),localStorage.removeItem("userInfo")}finally{y(!1)}})()},[d]),S.useEffect(()=>{d?.email&&K(v=>({...v,email:d.email}))},[d?.email]);const je=(v,$)=>{let V=parseInt(v.replace("#",""),16),Q=(V>>16)+$,ue=(V>>8&255)+$,at=(V&255)+$;return Q=Math.min(255,Math.max(0,Q)),ue=Math.min(255,Math.max(0,ue)),at=Math.min(255,Math.max(0,at)),`#${(at|ue<<8|Q<<16).toString(16).padStart(6,"0")}`},A=t?{background:"#000000",surface:"#09090b",surfaceLight:"#27272a",surfaceLighter:"#3f3f46",textPrimary:"#ffffff",textSecondary:"#d4d4d8",textTertiary:"#a1a1aa",accent:i,accentHover:je(i,-15),success:"#10b981",error:"#ef4444",border:"#27272a",warning:"#f59e0b"}:{background:"#ffffff",surface:"#fafafa",surfaceLight:"#f4f4f5",surfaceLighter:"#e4e4e7",textPrimary:"#18181b",textSecondary:"#52525b",textTertiary:"#71717a",accent:i,accentHover:je(i,-15),success:"#10b981",error:"#ef4444",border:"#e4e4e7",warning:"#d97706"};if(x)return r.jsx("div",{style:{width:"100%",minHeight:"400px",display:"flex",alignItems:"center",justifyContent:"center",color:A.textPrimary,fontFamily:"'Inter', -apple-system, BlinkMacSystemFont, sans-serif"},children:r.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:"16px",textAlign:"center"},children:[r.jsx(oe,{size:40,color:A.accent,style:{animation:"spin 1s linear infinite"},"aria-hidden":"true"}),r.jsx("p",{style:{color:A.textTertiary,margin:0},children:"Loading your profile..."})]})});if(!d)return r.jsx("div",{style:{width:"100%",minHeight:"400px",display:"flex",alignItems:"center",justifyContent:"center",color:A.textPrimary,fontFamily:"'Inter', -apple-system, BlinkMacSystemFont, sans-serif"},children:r.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:"12px",textAlign:"center"},children:[r.jsx(ie,{size:40,color:A.error,"aria-hidden":"true"}),r.jsx("p",{style:{color:A.textTertiary,margin:0},children:"No profile found. Please log in again."})]})});const as=[{label:"Full Name",value:d.name,name:"name",type:"text",icon:Se},{label:"Email Address",value:d.email,name:"email",type:"email",icon:pe},{label:"Phone Number",value:d.phone||"Not set",name:"phone",type:"tel",icon:Hn},{label:"Address",value:d.address||"Not provided",name:"address",type:"text",icon:Wn}];return r.jsxs("div",{style:{width:"100%",display:"flex",alignItems:"center",justifyContent:"center",color:A.textPrimary,fontFamily:"'Inter', -apple-system, BlinkMacSystemFont, sans-serif",lineHeight:1.5,minHeight:"80vh"},children:[P&&r.jsxs("div",{style:{position:"fixed",top:"20px",right:"20px",padding:"12px 24px",borderRadius:"12px",boxShadow:"0 25px 50px -12px rgba(0, 0, 0, 0.25)",backdropFilter:"blur(8px)",border:"1px solid",zIndex:1e3,display:"flex",alignItems:"center",gap:"8px",fontSize:"12px",fontWeight:500,maxWidth:"400px",animation:"slideIn 0.3s ease-out",...P.type==="success"?{backgroundColor:t?"rgba(16, 185, 129, 0.1)":"rgba(16, 185, 129, 0.05)",borderColor:t?"rgba(16, 185, 129, 0.3)":"rgba(16, 185, 129, 0.2)",color:t?"#34d399":"#059669"}:{backgroundColor:t?"rgba(239, 68, 68, 0.1)":"rgba(239, 68, 68, 0.05)",borderColor:t?"rgba(239, 68, 68, 0.3)":"rgba(239, 68, 68, 0.2)",color:t?"#f87171":"#dc2626"}},role:"alert","aria-live":"polite",children:[P.type==="success"?r.jsx(de,{size:20,"aria-hidden":"true"}):r.jsx(ie,{size:20,"aria-hidden":"true"}),P.message]}),r.jsx("div",{style:{maxWidth:"1200px",margin:"0 auto",width:"100%",boxSizing:"border-box"},children:r.jsxs("div",{style:{display:"grid",gap:"24px",gridTemplateColumns:"1fr",...a&&window.innerWidth>=1024&&{gridTemplateColumns:"1fr 2fr",gap:"10px"},...a&&window.innerWidth>=768&&a&&window.innerWidth<1024&&{gap:"10px"},...a&&window.innerWidth>=600&&a&&window.innerWidth<768&&{gap:"28px"}},children:[r.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"6px",height:"100%"},children:[r.jsxs("section",{style:{backgroundColor:A.surface,borderRadius:"16px",position:"relative",padding:"24px",boxShadow:"0 1px 3px rgba(0, 0, 0, 0.1)",textAlign:"center",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",flex:1,minHeight:"300px"},children:[e&&r.jsx("a",{href:e||"/",target:"_self",rel:"noopener noreferrer",style:{position:"absolute",top:"18px",left:"18px"},children:r.jsx(Ln,{size:20,style:{color:t?"#ffffff":"#000000"}})}),r.jsxs("div",{style:{position:"relative",display:"inline-block",marginBottom:"16px"},children:[r.jsx("img",{src:d.avatarUrl||`https://api.dicebear.com/9.x/initials/svg?seed=${encodeURIComponent(d.name)}`,alt:`Profile avatar of ${d.name}`,style:{width:"128px",height:"128px",borderRadius:"50%",objectFit:"cover",boxShadow:"0 10px 25px -5px rgba(0, 0, 0, 0.3)",border:`3px solid ${A.border}`},width:128,height:128,loading:"eager"}),r.jsx("button",{onClick:()=>I(!0),style:{position:"absolute",bottom:"8px",right:"8px",backgroundColor:A.accent,color:"white",padding:"8px",borderRadius:"50%",border:"none",cursor:"pointer",transition:"all 0.2s ease",display:"flex",alignItems:"center",justifyContent:"center",width:"32px",height:"32px"},"aria-label":"Change profile picture",children:r.jsx(et,{size:16,"aria-hidden":"true"})})]}),r.jsx("h2",{style:{fontSize:"24px",fontWeight:600,margin:"0 0 4px 0",color:A.textPrimary},children:d.name}),r.jsx("p",{style:{color:A.textTertiary,margin:"0 0 8px 0"},children:d.email}),r.jsxs("div",{style:{backgroundColor:d.isVerified?t?"rgba(16, 185, 129, 0.1)":"rgba(16, 185, 129, 0.05)":t?"rgba(245, 158, 11, 0.1)":"rgba(245, 158, 11, 0.05)",color:d.isVerified?A.success:A.warning,border:`1px solid ${d.isVerified?t?"rgba(16, 185, 129, 0.3)":"rgba(16, 185, 129, 0.2)":t?"rgba(245, 158, 11, 0.3)":"rgba(245, 158, 11, 0.2)"}`,padding:"6px 12px",borderRadius:"20px",fontSize:"12px",fontWeight:500,display:"inline-flex",alignItems:"center",gap:"6px",marginTop:"8px"},children:[d.isVerified?r.jsx(de,{size:16,"aria-hidden":"true"}):r.jsx(ie,{size:16,"aria-hidden":"true"}),d.isVerified?"Email Verified":"Not Verified"]})]}),r.jsx("nav",{style:{display:"flex",flexDirection:"column",gap:"6px"},children:k?r.jsxs(r.Fragment,{children:[r.jsxs("button",{onClick:()=>T(!1),style:{backgroundColor:A.surfaceLight,border:`1px solid ${A.border}`,color:A.textPrimary,padding:"10px 20px",borderRadius:"6px",borderStyle:"solid",cursor:"pointer",transition:"all 0.2s ease",fontSize:"12px",fontWeight:500,display:"flex",alignItems:"center",justifyContent:"center",gap:"8px",textDecoration:"none",minHeight:"36px",flex:a&&window.innerWidth<1024?"1":"auto"},children:[r.jsx(Ie,{size:16,"aria-hidden":"true"}),"Cancel"]}),r.jsxs("button",{onClick:B,disabled:p,style:{background:`linear-gradient(to right, ${A.accent}, ${A.accentHover})`,opacity:p?.7:1,color:"white",padding:"10px 20px",borderRadius:"6px",border:"none",cursor:p?"not-allowed":"pointer",transition:"all 0.2s ease",fontSize:"12px",fontWeight:500,display:"flex",alignItems:"center",justifyContent:"center",gap:"8px",textDecoration:"none",minHeight:"36px",flex:a&&window.innerWidth<1024?"1":"auto"},children:[p?r.jsx(oe,{size:16,style:{animation:"spin 1s linear infinite"},"aria-hidden":"true"}):r.jsx(Vn,{size:16,"aria-hidden":"true"}),p?"Saving...":"Save Changes"]})]}):r.jsxs(r.Fragment,{children:[r.jsxs("button",{onClick:()=>T(!0),style:{background:`linear-gradient(to right, ${A.accent}, ${A.accentHover})`,color:"white",padding:"10px 20px",borderRadius:"6px",border:"none",cursor:"pointer",transition:"all 0.2s ease",fontSize:"12px",fontWeight:500,display:"flex",alignItems:"center",justifyContent:"center",gap:"8px",textDecoration:"none",minHeight:"36px",flex:a&&window.innerWidth<1024?"1":"auto"},children:[r.jsx(Bn,{size:16,"aria-hidden":"true"}),"Edit Profile"]}),!d.isVerified&&r.jsxs("button",{onClick:()=>j(!0),disabled:O,style:{background:"linear-gradient(to right, #fbbf24, #f59e0b)",color:"white",padding:"10px 20px",borderRadius:"6px",border:"none",cursor:O?"not-allowed":"pointer",transition:"all 0.2s ease",fontSize:"12px",fontWeight:500,display:"flex",alignItems:"center",justifyContent:"center",gap:"8px",minHeight:"36px",opacity:O?.7:1,flex:a&&window.innerWidth<1024?"1":"auto"},children:[O?r.jsx(oe,{size:14,style:{animation:"spin 1s linear infinite"},"aria-hidden":"true"}):r.jsx(ot,{size:14,"aria-hidden":"true"}),O?"Sending...":"Verify Email"]}),r.jsxs("div",{style:{position:"relative"},children:[r.jsxs("button",{style:{backgroundColor:A.surfaceLight,color:A.textPrimary,padding:"10px 20px",borderRadius:"6px",border:"none",cursor:"pointer",transition:"all 0.2s ease",fontSize:"12px",fontWeight:500,display:"flex",alignItems:"center",justifyContent:"center",gap:"8px",textDecoration:"none",minHeight:"36px",width:"100%",boxSizing:"border-box"},onClick:()=>_(!q),children:[r.jsx(Fn,{size:16,"aria-hidden":"true"}),"More Actions"]}),q&&r.jsxs("div",{className:`dropdown-container ${X?"closing":""}`,style:{position:"absolute",bottom:"100%",left:0,right:0,backgroundColor:A.surface,border:`1px solid ${A.border}`,borderRadius:"12px 12px 0 0",boxShadow:"0 -8px 24px rgba(0, 0, 0, 0.25)",zIndex:200,marginBottom:"6px",overflow:"hidden",animation:`${X?"drawerSlideDown":"drawerSlideUp"} 0.25s ease-out forwards`},children:[r.jsxs("button",{onClick:()=>{g(!0),E()},style:{width:"100%",padding:"14px 18px",backgroundColor:"transparent",border:"none",color:A.textPrimary,cursor:"pointer",transition:"all 0.2s ease",fontSize:"13px",fontWeight:500,display:"flex",alignItems:"center",gap:"8px",textAlign:"left"},onMouseEnter:v=>v.currentTarget.style.backgroundColor=A.surfaceLight,onMouseLeave:v=>v.currentTarget.style.backgroundColor="transparent",children:[r.jsx(st,{size:14,"aria-hidden":"true"}),"Change Password"]}),n&&r.jsxs("button",{onClick:()=>{n(),E()},style:{width:"100%",padding:"14px 18px",backgroundColor:"transparent",border:"none",color:t?"#fca5a5":"#dc2626",cursor:"pointer",transition:"all 0.2s ease",fontSize:"13px",fontWeight:500,display:"flex",alignItems:"center",gap:"8px",textAlign:"left"},onMouseEnter:v=>{v.currentTarget.style.backgroundColor=t?"rgba(239, 68, 68, 0.1)":"rgba(239, 68, 68, 0.05)"},onMouseLeave:v=>v.currentTarget.style.backgroundColor="transparent",children:[r.jsx(it,{size:14,"aria-hidden":"true"}),"Logout"]}),r.jsxs("button",{onClick:()=>{D(!0),E()},style:{width:"100%",padding:"14px 18px",backgroundColor:"transparent",border:"none",color:"#ef4444",cursor:"pointer",transition:"all 0.2s ease",fontSize:"13px",fontWeight:600,display:"flex",alignItems:"center",gap:"8px",textAlign:"left"},onMouseEnter:v=>{v.currentTarget.style.backgroundColor=t?"rgba(239, 68, 68, 0.1)":"rgba(239, 68, 68, 0.05)"},onMouseLeave:v=>v.currentTarget.style.backgroundColor="transparent",children:[r.jsx(Me,{size:14,"aria-hidden":"true"}),"Delete Account"]})]})]})]})})]}),r.jsxs("div",{style:{minWidth:0,display:"flex",flexDirection:"column",gap:"12px"},children:[r.jsxs("section",{style:{backgroundColor:A.surface,borderRadius:"16px",padding:"24px",boxShadow:"0 1px 3px rgba(0, 0, 0, 0.1)"},children:[r.jsxs("h2",{style:{fontSize:"20px",fontWeight:600,margin:"0 0 24px 0",color:A.textSecondary,display:"flex",alignItems:"center",gap:"8px"},children:[r.jsx(Se,{size:20,"aria-hidden":"true"}),"Personal Information"]}),r.jsx("div",{style:{display:"grid",gap:"20px",gridTemplateColumns:"1fr",...a&&window.innerWidth>=600&&{gridTemplateColumns:"1fr 1fr",gap:"20px"}},children:as.map(v=>{const $=v.icon;return r.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px"},children:[r.jsxs("label",{style:{color:A.textTertiary,fontSize:"12px",fontWeight:500,display:"flex",alignItems:"center",gap:"8px"},children:[r.jsx($,{size:16,"aria-hidden":"true"}),v.label]}),k?r.jsx("input",{type:v.type,name:v.name,value:d[v.name],onChange:V=>u(Q=>Q&&{...Q,[V.target.name]:V.target.value}),style:{padding:"12px",borderRadius:"8px",border:`1px solid ${i}`,backgroundColor:"transparent",color:A.textPrimary,fontSize:"12px",outline:"none",transition:"border-color 0.2s ease",minHeight:"44px",width:"100%",boxSizing:"border-box"},placeholder:`Enter ${v.label.toLowerCase()}`,"aria-label":v.label}):r.jsx("div",{style:{padding:"12px",borderRadius:"8px",border:"1px solid transparent",fontSize:"12px",minHeight:"44px",display:"flex",alignItems:"center",boxSizing:"border-box",color:A.textPrimary,backgroundColor:t?"rgba(255,255,255,0.05)":"rgba(0,0,0,0.05)"},children:v.value})]},v.name)})})]}),r.jsxs("section",{style:{backgroundColor:A.surface,borderRadius:"16px",padding:"30px 24px",boxShadow:"0 1px 3px rgba(0, 0, 0, 0.1)"},children:[r.jsxs("h2",{style:{fontSize:"20px",fontWeight:600,margin:"0 0 24px 0",color:A.textSecondary,display:"flex",alignItems:"center",gap:"8px"},children:[r.jsx(er,{size:20,"aria-hidden":"true"}),"Security Status"]}),r.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[r.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"12px 0"},children:[r.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"12px",color:A.textSecondary},children:[r.jsx(pe,{size:16,"aria-hidden":"true"}),r.jsx("span",{children:"Email Verification"})]}),r.jsx("div",{style:{padding:"6px 12px",borderRadius:"8px",fontSize:"12px",fontWeight:500,display:"flex",alignItems:"center",gap:"6px",...d.isVerified?{backgroundColor:t?"rgba(16, 185, 129, 0.1)":"rgba(16, 185, 129, 0.05)",color:A.success,border:`1px solid ${t?"rgba(16, 185, 129, 0.3)":"rgba(16, 185, 129, 0.2)"}`}:{backgroundColor:t?"rgba(245, 158, 11, 0.1)":"rgba(245, 158, 11, 0.05)",color:A.warning,border:`1px solid ${t?"rgba(245, 158, 11, 0.3)":"rgba(245, 158, 11, 0.2)"}`}},children:d.isVerified?r.jsxs(r.Fragment,{children:[r.jsx(de,{size:16,"aria-hidden":"true"}),"Verified"]}):r.jsxs(r.Fragment,{children:[r.jsx(ie,{size:16,"aria-hidden":"true"}),"Not Verified"]})})]}),!d.isVerified&&r.jsx("div",{style:{padding:"12px",borderRadius:"8px",backgroundColor:t?"rgba(100, 100, 100, 0.1)":"rgba(0, 0, 0, 0.05)"},children:r.jsx("p",{style:{color:A.textTertiary,fontSize:"12px",margin:0},children:"Verify your email to unlock all features and enhance your account security."})})]})]})]})]})}),r.jsx(ts,{isOpen:h,onClose:()=>{I(!1)},onUpdate:le,colors:A}),r.jsx(rs,{userId:d.id,isOpen:C,onClose:()=>g(!1),onSuccess:v=>m("success",v),onError:v=>m("error",v),colors:A}),r.jsx(es,{userId:d.id,isOpen:z,onClose:()=>D(!1),onSuccess:v=>m("success",v),onError:v=>m("error",v),colors:A}),r.jsx(ns,{isOpen:b,onClose:()=>{j(!1),F(!1),K({email:d?.email||"",otp:""})},onVerify:ne,onSendOTP:U,verifyFormData:M,setVerifyFormData:K,otpSent:H,verifying:J,user:d,colors:A,darkMode:t}),r.jsx("style",{children:`
|
|
499
|
+
`})]})},ss=({darkMode:t=!0,homeUrl:e,onLogout:n,onVerify:s,primaryColor:i="#00C212"})=>{const o=me(),[a,c]=S.useState(null),[d,u]=S.useState(),[x,y]=S.useState(!0),[k,T]=S.useState(!1),[p,w]=S.useState(!1),[h,I]=S.useState(!1),[C,g]=S.useState(!1),[z,D]=S.useState(!1),[b,j]=S.useState(!1),[q,_]=S.useState(!1),[X,W]=S.useState(!1),[P,G]=S.useState(null),[O,R]=S.useState(!1),[M,K]=S.useState({email:"",otp:""}),[H,F]=S.useState(!1),[J,l]=S.useState(!1);S.useEffect(()=>{if(typeof window<"u"){const v=()=>c(window.innerWidth);return v(),window.addEventListener("resize",v),()=>window.removeEventListener("resize",v)}},[]);const m=(v,$)=>{G({type:v,message:$}),setTimeout(()=>G(null),3e3)},E=()=>{W(!0);const v=setTimeout(()=>{_(!1),W(!1)},150);return()=>clearTimeout(v)};S.useEffect(()=>{const v=$=>{const V=document.querySelector(".dropdown-container");V&&!V.contains($.target)&&E()};return q&&document.addEventListener("mousedown",v),()=>{document.removeEventListener("mousedown",v)}},[q]);const U=async()=>{if(!M.email||!/\S+@\S+\.\S+/.test(M.email)){m("error","Please enter a valid email");return}if(!d?.id){m("error","User not found. Cannot send OTP.");return}try{l(!0);const v=await o.requestEmailVerificationOTP({userId:d.id,email:M.email}),$=v?.data?.success??v?.success,V=v?.data?.message??v?.message;$?(m("success",V||"OTP sent to email!"),F(!0)):m("error",V||"Failed to send OTP")}catch(v){const $=v?.response?.data?.message||v?.message||"Server error";m("error",$)}finally{l(!1)}},ne=async v=>{if(v.preventDefault(),!M.email||!M.otp){m("error","Please fill in all fields");return}if(!d){m("error","User not found");return}try{l(!0);const $=await o.verifyEmail({email:M.email,otp:M.otp}),V=$?.data?.success??$?.success,Q=$?.data?.message??$?.message;if(V){m("success",Q||"Email verified!");const ue={...d,isVerified:!0};u(ue),typeof s=="function"&&s(ue),K({email:ue.email,otp:""}),F(!1),j?.(!1)}else m("error",Q||"Verification failed")}catch($){const V=$?.response?.data?.message||$?.message||"Something went wrong";m("error",V)}finally{l(!1)}},le=async v=>{if(!d)return!1;try{const $=await o.updateUser({userId:d.id,avatarUrl:v});if($?.success){const V={...d,...$.user,avatarUrl:v};return u(V),m("success","Avatar updated successfully!"),!0}return m("error",$?.message||"Failed to update avatar"),!1}catch($){return console.error("Avatar update error:",$),m("error","Failed to update avatar"),!1}},B=async()=>{if(d){w(!0);try{const v=d.email,$=await o.updateUser({userId:d.id,...d});if($.success&&$.user){const V=$.user.email!==v,Q={...d,...$.user,isVerified:V?!1:d.isVerified};u(Q),localStorage.setItem("userInfo",JSON.stringify(Q)),m("success",V?"Email updated. Please verify your new email.":"Profile updated successfully"),T(!1)}else m("error",$.message||"Update failed")}catch(v){console.error(v),m("error","Update failed")}finally{w(!1)}}},ce=async v=>{try{const $=await o.checkIfUserExists(v);$?.success===!0&&$?.exists===!1&&(console.warn("❌ User does not exist on server. Clearing session..."),localStorage.removeItem("userInfo"),u(null))}catch($){console.error("⚠️ User validation request failed:",$)}};S.useEffect(()=>{(async()=>{try{y(!0);const $=await o.checkUserSession();if($.user?.id){const V=$.user.id,Q=await o.getUserProfile({userId:V});if(Q.user){const ue=Q.user;u(ue),ce(V)}else u(null),localStorage.removeItem("userInfo")}else u(null),localStorage.removeItem("userInfo")}catch($){console.error("User init failed:",$),u(null),localStorage.removeItem("userInfo")}finally{y(!1)}})()},[]),S.useEffect(()=>{d?.email&&K(v=>({...v,email:d.email}))},[d?.email]);const je=(v,$)=>{let V=parseInt(v.replace("#",""),16),Q=(V>>16)+$,ue=(V>>8&255)+$,at=(V&255)+$;return Q=Math.min(255,Math.max(0,Q)),ue=Math.min(255,Math.max(0,ue)),at=Math.min(255,Math.max(0,at)),`#${(at|ue<<8|Q<<16).toString(16).padStart(6,"0")}`},A=t?{background:"#000000",surface:"#09090b",surfaceLight:"#27272a",surfaceLighter:"#3f3f46",textPrimary:"#ffffff",textSecondary:"#d4d4d8",textTertiary:"#a1a1aa",accent:i,accentHover:je(i,-15),success:"#10b981",error:"#ef4444",border:"#27272a",warning:"#f59e0b"}:{background:"#ffffff",surface:"#fafafa",surfaceLight:"#f4f4f5",surfaceLighter:"#e4e4e7",textPrimary:"#18181b",textSecondary:"#52525b",textTertiary:"#71717a",accent:i,accentHover:je(i,-15),success:"#10b981",error:"#ef4444",border:"#e4e4e7",warning:"#d97706"};if(x)return r.jsx("div",{style:{width:"100%",minHeight:"400px",display:"flex",alignItems:"center",justifyContent:"center",color:A.textPrimary,fontFamily:"'Inter', -apple-system, BlinkMacSystemFont, sans-serif"},children:r.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:"16px",textAlign:"center"},children:[r.jsx(oe,{size:40,color:A.accent,style:{animation:"spin 1s linear infinite"},"aria-hidden":"true"}),r.jsx("p",{style:{color:A.textTertiary,margin:0},children:"Loading your profile..."})]})});if(!d)return r.jsx("div",{style:{width:"100%",minHeight:"400px",display:"flex",alignItems:"center",justifyContent:"center",color:A.textPrimary,fontFamily:"'Inter', -apple-system, BlinkMacSystemFont, sans-serif"},children:r.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:"12px",textAlign:"center"},children:[r.jsx(ie,{size:40,color:A.error,"aria-hidden":"true"}),r.jsx("p",{style:{color:A.textTertiary,margin:0},children:"No profile found. Please log in again."})]})});const as=[{label:"Full Name",value:d.name,name:"name",type:"text",icon:Se},{label:"Email Address",value:d.email,name:"email",type:"email",icon:pe},{label:"Phone Number",value:d.phone||"Not set",name:"phone",type:"tel",icon:Hn},{label:"Address",value:d.address||"Not provided",name:"address",type:"text",icon:Wn}];return r.jsxs("div",{style:{width:"100%",display:"flex",alignItems:"center",justifyContent:"center",color:A.textPrimary,fontFamily:"'Inter', -apple-system, BlinkMacSystemFont, sans-serif",lineHeight:1.5,minHeight:"80vh"},children:[P&&r.jsxs("div",{style:{position:"fixed",top:"20px",right:"20px",padding:"12px 24px",borderRadius:"12px",boxShadow:"0 25px 50px -12px rgba(0, 0, 0, 0.25)",backdropFilter:"blur(8px)",border:"1px solid",zIndex:1e3,display:"flex",alignItems:"center",gap:"8px",fontSize:"12px",fontWeight:500,maxWidth:"400px",animation:"slideIn 0.3s ease-out",...P.type==="success"?{backgroundColor:t?"rgba(16, 185, 129, 0.1)":"rgba(16, 185, 129, 0.05)",borderColor:t?"rgba(16, 185, 129, 0.3)":"rgba(16, 185, 129, 0.2)",color:t?"#34d399":"#059669"}:{backgroundColor:t?"rgba(239, 68, 68, 0.1)":"rgba(239, 68, 68, 0.05)",borderColor:t?"rgba(239, 68, 68, 0.3)":"rgba(239, 68, 68, 0.2)",color:t?"#f87171":"#dc2626"}},role:"alert","aria-live":"polite",children:[P.type==="success"?r.jsx(de,{size:20,"aria-hidden":"true"}):r.jsx(ie,{size:20,"aria-hidden":"true"}),P.message]}),r.jsx("div",{style:{maxWidth:"1200px",margin:"0 auto",width:"100%",boxSizing:"border-box"},children:r.jsxs("div",{style:{display:"grid",gap:"24px",gridTemplateColumns:"1fr",...a&&window.innerWidth>=1024&&{gridTemplateColumns:"1fr 2fr",gap:"10px"},...a&&window.innerWidth>=768&&a&&window.innerWidth<1024&&{gap:"10px"},...a&&window.innerWidth>=600&&a&&window.innerWidth<768&&{gap:"28px"}},children:[r.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"6px",height:"100%"},children:[r.jsxs("section",{style:{backgroundColor:A.surface,borderRadius:"16px",position:"relative",padding:"24px",boxShadow:"0 1px 3px rgba(0, 0, 0, 0.1)",textAlign:"center",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",flex:1,minHeight:"300px"},children:[e&&r.jsx("a",{href:e||"/",target:"_self",rel:"noopener noreferrer",style:{position:"absolute",top:"18px",left:"18px"},children:r.jsx(Ln,{size:20,style:{color:t?"#ffffff":"#000000"}})}),r.jsxs("div",{style:{position:"relative",display:"inline-block",marginBottom:"16px"},children:[r.jsx("img",{src:d.avatarUrl||`https://api.dicebear.com/9.x/initials/svg?seed=${encodeURIComponent(d.name)}`,alt:`Profile avatar of ${d.name}`,style:{width:"128px",height:"128px",borderRadius:"50%",objectFit:"cover",boxShadow:"0 10px 25px -5px rgba(0, 0, 0, 0.3)",border:`3px solid ${A.border}`},width:128,height:128,loading:"eager"}),r.jsx("button",{onClick:()=>I(!0),style:{position:"absolute",bottom:"8px",right:"8px",backgroundColor:A.accent,color:"white",padding:"8px",borderRadius:"50%",border:"none",cursor:"pointer",transition:"all 0.2s ease",display:"flex",alignItems:"center",justifyContent:"center",width:"32px",height:"32px"},"aria-label":"Change profile picture",children:r.jsx(et,{size:16,"aria-hidden":"true"})})]}),r.jsx("h2",{style:{fontSize:"24px",fontWeight:600,margin:"0 0 4px 0",color:A.textPrimary},children:d.name}),r.jsx("p",{style:{color:A.textTertiary,margin:"0 0 8px 0"},children:d.email}),r.jsxs("div",{style:{backgroundColor:d.isVerified?t?"rgba(16, 185, 129, 0.1)":"rgba(16, 185, 129, 0.05)":t?"rgba(245, 158, 11, 0.1)":"rgba(245, 158, 11, 0.05)",color:d.isVerified?A.success:A.warning,border:`1px solid ${d.isVerified?t?"rgba(16, 185, 129, 0.3)":"rgba(16, 185, 129, 0.2)":t?"rgba(245, 158, 11, 0.3)":"rgba(245, 158, 11, 0.2)"}`,padding:"6px 12px",borderRadius:"20px",fontSize:"12px",fontWeight:500,display:"inline-flex",alignItems:"center",gap:"6px",marginTop:"8px"},children:[d.isVerified?r.jsx(de,{size:16,"aria-hidden":"true"}):r.jsx(ie,{size:16,"aria-hidden":"true"}),d.isVerified?"Email Verified":"Not Verified"]})]}),r.jsx("nav",{style:{display:"flex",flexDirection:"column",gap:"6px"},children:k?r.jsxs(r.Fragment,{children:[r.jsxs("button",{onClick:()=>T(!1),style:{backgroundColor:A.surfaceLight,border:`1px solid ${A.border}`,color:A.textPrimary,padding:"10px 20px",borderRadius:"6px",borderStyle:"solid",cursor:"pointer",transition:"all 0.2s ease",fontSize:"12px",fontWeight:500,display:"flex",alignItems:"center",justifyContent:"center",gap:"8px",textDecoration:"none",minHeight:"36px",flex:a&&window.innerWidth<1024?"1":"auto"},children:[r.jsx(Ie,{size:16,"aria-hidden":"true"}),"Cancel"]}),r.jsxs("button",{onClick:B,disabled:p,style:{background:`linear-gradient(to right, ${A.accent}, ${A.accentHover})`,opacity:p?.7:1,color:"white",padding:"10px 20px",borderRadius:"6px",border:"none",cursor:p?"not-allowed":"pointer",transition:"all 0.2s ease",fontSize:"12px",fontWeight:500,display:"flex",alignItems:"center",justifyContent:"center",gap:"8px",textDecoration:"none",minHeight:"36px",flex:a&&window.innerWidth<1024?"1":"auto"},children:[p?r.jsx(oe,{size:16,style:{animation:"spin 1s linear infinite"},"aria-hidden":"true"}):r.jsx(Vn,{size:16,"aria-hidden":"true"}),p?"Saving...":"Save Changes"]})]}):r.jsxs(r.Fragment,{children:[r.jsxs("button",{onClick:()=>T(!0),style:{background:`linear-gradient(to right, ${A.accent}, ${A.accentHover})`,color:"white",padding:"10px 20px",borderRadius:"6px",border:"none",cursor:"pointer",transition:"all 0.2s ease",fontSize:"12px",fontWeight:500,display:"flex",alignItems:"center",justifyContent:"center",gap:"8px",textDecoration:"none",minHeight:"36px",flex:a&&window.innerWidth<1024?"1":"auto"},children:[r.jsx(Bn,{size:16,"aria-hidden":"true"}),"Edit Profile"]}),!d.isVerified&&r.jsxs("button",{onClick:()=>j(!0),disabled:O,style:{background:"linear-gradient(to right, #fbbf24, #f59e0b)",color:"white",padding:"10px 20px",borderRadius:"6px",border:"none",cursor:O?"not-allowed":"pointer",transition:"all 0.2s ease",fontSize:"12px",fontWeight:500,display:"flex",alignItems:"center",justifyContent:"center",gap:"8px",minHeight:"36px",opacity:O?.7:1,flex:a&&window.innerWidth<1024?"1":"auto"},children:[O?r.jsx(oe,{size:14,style:{animation:"spin 1s linear infinite"},"aria-hidden":"true"}):r.jsx(ot,{size:14,"aria-hidden":"true"}),O?"Sending...":"Verify Email"]}),r.jsxs("div",{style:{position:"relative"},children:[r.jsxs("button",{style:{backgroundColor:A.surfaceLight,color:A.textPrimary,padding:"10px 20px",borderRadius:"6px",border:"none",cursor:"pointer",transition:"all 0.2s ease",fontSize:"12px",fontWeight:500,display:"flex",alignItems:"center",justifyContent:"center",gap:"8px",textDecoration:"none",minHeight:"36px",width:"100%",boxSizing:"border-box"},onClick:()=>_(!q),children:[r.jsx(Fn,{size:16,"aria-hidden":"true"}),"More Actions"]}),q&&r.jsxs("div",{className:`dropdown-container ${X?"closing":""}`,style:{position:"absolute",bottom:"100%",left:0,right:0,backgroundColor:A.surface,border:`1px solid ${A.border}`,borderRadius:"12px 12px 0 0",boxShadow:"0 -8px 24px rgba(0, 0, 0, 0.25)",zIndex:200,marginBottom:"6px",overflow:"hidden",animation:`${X?"drawerSlideDown":"drawerSlideUp"} 0.25s ease-out forwards`},children:[r.jsxs("button",{onClick:()=>{g(!0),E()},style:{width:"100%",padding:"14px 18px",backgroundColor:"transparent",border:"none",color:A.textPrimary,cursor:"pointer",transition:"all 0.2s ease",fontSize:"13px",fontWeight:500,display:"flex",alignItems:"center",gap:"8px",textAlign:"left"},onMouseEnter:v=>v.currentTarget.style.backgroundColor=A.surfaceLight,onMouseLeave:v=>v.currentTarget.style.backgroundColor="transparent",children:[r.jsx(st,{size:14,"aria-hidden":"true"}),"Change Password"]}),n&&r.jsxs("button",{onClick:()=>{n(),E()},style:{width:"100%",padding:"14px 18px",backgroundColor:"transparent",border:"none",color:t?"#fca5a5":"#dc2626",cursor:"pointer",transition:"all 0.2s ease",fontSize:"13px",fontWeight:500,display:"flex",alignItems:"center",gap:"8px",textAlign:"left"},onMouseEnter:v=>{v.currentTarget.style.backgroundColor=t?"rgba(239, 68, 68, 0.1)":"rgba(239, 68, 68, 0.05)"},onMouseLeave:v=>v.currentTarget.style.backgroundColor="transparent",children:[r.jsx(it,{size:14,"aria-hidden":"true"}),"Logout"]}),r.jsxs("button",{onClick:()=>{D(!0),E()},style:{width:"100%",padding:"14px 18px",backgroundColor:"transparent",border:"none",color:"#ef4444",cursor:"pointer",transition:"all 0.2s ease",fontSize:"13px",fontWeight:600,display:"flex",alignItems:"center",gap:"8px",textAlign:"left"},onMouseEnter:v=>{v.currentTarget.style.backgroundColor=t?"rgba(239, 68, 68, 0.1)":"rgba(239, 68, 68, 0.05)"},onMouseLeave:v=>v.currentTarget.style.backgroundColor="transparent",children:[r.jsx(Me,{size:14,"aria-hidden":"true"}),"Delete Account"]})]})]})]})})]}),r.jsxs("div",{style:{minWidth:0,display:"flex",flexDirection:"column",gap:"12px"},children:[r.jsxs("section",{style:{backgroundColor:A.surface,borderRadius:"16px",padding:"24px",boxShadow:"0 1px 3px rgba(0, 0, 0, 0.1)"},children:[r.jsxs("h2",{style:{fontSize:"20px",fontWeight:600,margin:"0 0 24px 0",color:A.textSecondary,display:"flex",alignItems:"center",gap:"8px"},children:[r.jsx(Se,{size:20,"aria-hidden":"true"}),"Personal Information"]}),r.jsx("div",{style:{display:"grid",gap:"20px",gridTemplateColumns:"1fr",...a&&window.innerWidth>=600&&{gridTemplateColumns:"1fr 1fr",gap:"20px"}},children:as.map(v=>{const $=v.icon;return r.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px"},children:[r.jsxs("label",{style:{color:A.textTertiary,fontSize:"12px",fontWeight:500,display:"flex",alignItems:"center",gap:"8px"},children:[r.jsx($,{size:16,"aria-hidden":"true"}),v.label]}),k?r.jsx("input",{type:v.type,name:v.name,value:d[v.name],onChange:V=>u(Q=>Q&&{...Q,[V.target.name]:V.target.value}),style:{padding:"12px",borderRadius:"8px",border:`1px solid ${i}`,backgroundColor:"transparent",color:A.textPrimary,fontSize:"12px",outline:"none",transition:"border-color 0.2s ease",minHeight:"44px",width:"100%",boxSizing:"border-box"},placeholder:`Enter ${v.label.toLowerCase()}`,"aria-label":v.label}):r.jsx("div",{style:{padding:"12px",borderRadius:"8px",border:"1px solid transparent",fontSize:"12px",minHeight:"44px",display:"flex",alignItems:"center",boxSizing:"border-box",color:A.textPrimary,backgroundColor:t?"rgba(255,255,255,0.05)":"rgba(0,0,0,0.05)"},children:v.value})]},v.name)})})]}),r.jsxs("section",{style:{backgroundColor:A.surface,borderRadius:"16px",padding:"30px 24px",boxShadow:"0 1px 3px rgba(0, 0, 0, 0.1)"},children:[r.jsxs("h2",{style:{fontSize:"20px",fontWeight:600,margin:"0 0 24px 0",color:A.textSecondary,display:"flex",alignItems:"center",gap:"8px"},children:[r.jsx(er,{size:20,"aria-hidden":"true"}),"Security Status"]}),r.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[r.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"12px 0"},children:[r.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"12px",color:A.textSecondary},children:[r.jsx(pe,{size:16,"aria-hidden":"true"}),r.jsx("span",{children:"Email Verification"})]}),r.jsx("div",{style:{padding:"6px 12px",borderRadius:"8px",fontSize:"12px",fontWeight:500,display:"flex",alignItems:"center",gap:"6px",...d.isVerified?{backgroundColor:t?"rgba(16, 185, 129, 0.1)":"rgba(16, 185, 129, 0.05)",color:A.success,border:`1px solid ${t?"rgba(16, 185, 129, 0.3)":"rgba(16, 185, 129, 0.2)"}`}:{backgroundColor:t?"rgba(245, 158, 11, 0.1)":"rgba(245, 158, 11, 0.05)",color:A.warning,border:`1px solid ${t?"rgba(245, 158, 11, 0.3)":"rgba(245, 158, 11, 0.2)"}`}},children:d.isVerified?r.jsxs(r.Fragment,{children:[r.jsx(de,{size:16,"aria-hidden":"true"}),"Verified"]}):r.jsxs(r.Fragment,{children:[r.jsx(ie,{size:16,"aria-hidden":"true"}),"Not Verified"]})})]}),!d.isVerified&&r.jsx("div",{style:{padding:"12px",borderRadius:"8px",backgroundColor:t?"rgba(100, 100, 100, 0.1)":"rgba(0, 0, 0, 0.05)"},children:r.jsx("p",{style:{color:A.textTertiary,fontSize:"12px",margin:0},children:"Verify your email to unlock all features and enhance your account security."})})]})]})]})]})}),r.jsx(ts,{isOpen:h,onClose:()=>{I(!1)},onUpdate:le,colors:A}),r.jsx(rs,{userId:d.id,isOpen:C,onClose:()=>g(!1),onSuccess:v=>m("success",v),onError:v=>m("error",v),colors:A}),r.jsx(es,{userId:d.id,isOpen:z,onClose:()=>D(!1),onSuccess:v=>m("success",v),onError:v=>m("error",v),colors:A}),r.jsx(ns,{isOpen:b,onClose:()=>{j(!1),F(!1),K({email:d?.email||"",otp:""})},onVerify:ne,onSendOTP:U,verifyFormData:M,setVerifyFormData:K,otpSent:H,verifying:J,user:d,colors:A,darkMode:t}),r.jsx("style",{children:`
|
|
500
500
|
@keyframes slideIn {
|
|
501
501
|
from {
|
|
502
502
|
transform: translateX(100%);
|