@wacht/jsx 0.0.1-alpha.14 → 0.0.1-alpha.15

package/dist/index.cjs.js

@@ -1560,81 +1560,81 @@ See https://s-c.sh/2BAXzed for more info.`),window[Qr]+=1);const le=u.div`
   transform: rotate(360deg);
 }
 `,En=u.div`
-max - width: 380px;
-width: 380px;
-padding: var(--space - 3xl);
-background: var(--color - background);
-border - radius: var(--radius - lg);
-box - shadow: 0 4px 12px var(--color - shadow);
+  max-width: 380px;
+  width: 380px;
+  padding: var(--space-3xl);
+  background: var(--color-background);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 4px 12px var(--color-shadow);
 `,ys=u.div`
 display: flex;
-justify - content: center;
-align - items: center;
-min - height: 200px;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
 
   svg {
   animation: ${ig} 1s linear infinite;
-  color: var(--color - primary);
+    color: var(--color-primary);
 }
 `,ws=u.div`
-text - align: center;
-margin - bottom: var(--space - 2xl);
-position: relative;
+  text-align: center;
+  margin-bottom: var(--space-2xl);
+  position: relative;
 `,js=u.h1`
-font - size: var(--font - lg);
-font - weight: 400;
-color: var(--color - foreground);
-margin - bottom: var(--space - xs);
-margin - top: 0;
+  font-size: var(--font-lg);
+  font-weight: 400;
+  color: var(--color-foreground);
+  margin-bottom: var(--space-xs);
+  margin-top: 0;
 `,ks=u.p`
-color: var(--color - secondary - text);
-font - size: var(--font - xs);
+  color: var(--color-secondary-text);
+  font-size: var(--font-xs);
 `,cg=u.div`
 position: relative;
-text - align: center;
-margin: var(--space - 2xl) 0;
+  text-align: center;
+  margin: var(--space-2xl) 0;
 
   &::before {
   content: "";
   position: absolute;
-  top: 50 %;
+    top: 50%;
   left: 0;
   right: 0;
   height: 1px;
-  background: var(--color - border);
+  background: var(--color-border);
 }
 `,lg=u.span`
 position: relative;
-background: var(--color - background);
-padding: 0 var(--space - md);
-color: var(--color - muted);
-font - size: var(--font - xs);
-font - weight: 400;
-text - transform: uppercase;
-letter - spacing: 0.05em;
+  background: var(--color-background);
+  padding: 0 var(--space-md);
+  color: var(--color-muted);
+  font-size: var(--font-xs);
+  font-weight: 400;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 `,dg=u.div`
 position: relative;
 `,Er=u.p`
-font - size: var(--font - 2xs);
-color: var(--color - error);
+  font-size: var(--font-2xs);
+  color: var(--color-error);
 margin: 0;
-margin - top: var(--space - 2xs);
+  margin-top: var(--space-2xs);
 `,_s=u(K)`
-margin - top: var(--space - lg);
+  margin-top: var(--space-lg);
 `,Pn=u.div`
-margin - top: var(--space - lg);
-text - align: center;
-font - size: var(--font - xs);
-color: var(--color - secondary - text);
+  margin-top: var(--space-lg);
+  text-align: center;
+  font-size: var(--font-xs);
+  color: var(--color-secondary-text);
 `,Lt=u.span`
-color: var(--color - primary);
-text - decoration: none;
-font - weight: 400;
+  color: var(--color-primary);
+  text-decoration: none;
+  font-weight: 400;
 transition: color 0.2s;
 cursor: pointer;
 
   &:hover {
-  color: var(--color - primary - hover);
+    color: var(--color-primary-hover);
 }
 `;function ug(){return e.jsx(vf,{children:e.jsx(pg,{})})}function pg(){var U,Z,Q,ae,oe,ce,Y,se,q,H;const{deployment:t}=ve(),{navigate:r}=He(),{session:o,loading:n}=Fe(),{setEmail:a,otpSent:s,setOtpSent:p,showForgotPassword:g,setShowForgotPassword:c,showOtherOptions:h,setShowOtherOptions:d,enabledSocialsProviders:l,firstFactor:m}=sl(),{loading:x,signIn:v,signinAttempt:w,discardSignInAttempt:C,error:$,setSignInAttempt:y}=Ar("generic"),{signIn:z}=Ar("oauth"),[_,k]=i.useState({email:"",username:"",password:"",phone:""}),[b,f]=i.useState({}),[I,j]=i.useState(!1),[S,R]=i.useState(""),[E,T]=i.useState("US"),[P,O]=i.useState(!1),D=A=>{let{name:B,value:L}=A.target;B==="phone"?L=L.replace(/[^0-9]/g,""):B==="email"&&(a(L),L=L.toLowerCase()),k(W=>({...W,[B]:L})),f(W=>({...W,[B]:""}))},M=()=>{k({email:"",username:"",password:"",phone:""}),f({}),T("US")},N=async A=>{if(A.preventDefault(),x||I)return;C();const B={};if(m==="email_password"?(_.email||(B.email="Email address is required"),_.password||(B.password="Password is required")):m==="username_password"?(_.username||(B.username="Username is required"),_.password||(B.password="Password is required")):m==="email_otp"||m==="email_magic_link"?_.email||(B.email="Email address is required"):m==="phone_otp"&&(_.phone?/^\d{7,15}$/.test(_.phone)||(B.phone="Phone number must contain 7-15 digits"):B.phone="Phone number is required"),f(B),Object.keys(B).length>0)return;let L="";switch(m){case"email_password":L="plain_email";break;case"username_password":L="plain_username";break;case"email_otp":L="email_otp";break;case"email_magic_link":L="magic_link";break;case"phone_otp":L="phone_otp";break}j(!0);try{const W={..._,strategy:L};m==="phone_otp"&&E&&(W.phone_country_code=E),await v.create(W)}catch(W){f({submit:W.message}),j(!1)}},F=async A=>{if(A.preventDefault(),x||I)return;const B={};if(!S){B.otp="OTP code is required",f(B);return}j(!0),f({});try{await v.completeVerification(S),p(!1),R("")}catch(L){f({otp:L.message||"Verification failed"})}finally{j(!1)}},J=async A=>{if(!(x||I)){j(!0);try{const L=new URLSearchParams(window.location.search).get("redirect_uri")||void 0,{data:W}=await z.create({provider:A.provider,redirectUri:L});W&&typeof W=="object"&&"oauth_url"in W&&(window.location.href=W.oauth_url)}catch(B){f({submit:B.message})}finally{j(!1)}}},ie=i.useRef(!1);if(i.useEffect(()=>{if(n)return;const A=new URLSearchParams(window.location.search),B=A.get("impersonation_token");if(B&&!w&&!x&&!ie.current){ie.current=!0,A.delete("impersonation_token");const W=A.toString()?`${window.location.pathname}?${A.toString()} `:window.location.pathname;window.history.replaceState({},"",W),(async()=>{try{j(!0),await v.create({strategy:"impersonation",token:B})}catch(pe){f({submit:pe.message}),j(!1),ie.current=!1}})();return}const L=A.get("signin_attempt_id");if(L&&(o!=null&&o.signin_attempts)&&!w){const W=o.signin_attempts.find(ee=>ee.id===L);if(W){y(W),A.delete("signin_attempt_id");const ee=A.toString()?`${window.location.pathname}?${A.toString()} `:window.location.pathname;window.history.replaceState({},"",ee)}}},[o,n,w,y,x]),i.useEffect(()=>{var W;if(!w)return;if(w.completed){O(!0);let ee=new URLSearchParams(window.location.search).get("redirect_uri");if(ee||(ee=((W=t==null?void 0:t.ui_settings)==null?void 0:W.after_signin_redirect_url)||null),!ee&&(t!=null&&t.frontend_host)&&(ee=`https://${t.frontend_host}`),ee){const pe=new URL(ee);(t==null?void 0:t.mode)==="staging"&&pe.searchParams.set("__dev_session__",localStorage.getItem("__dev_session__")||""),r(pe.toString())}return}if(!v||s)return;const B={verify_email:"email_otp",verify_email_otp:"email_otp",verify_email_link:"magic_link",verify_phone:"phone_otp",verify_phone_otp:"phone_otp"}[w.current_step];if(!B)return;(async()=>{try{await v.prepareVerification({strategy:B}),p(!0)}catch(ee){console.error("Failed to prepare verification:",ee),f({submit:"Failed to send verification. Please try again."})}finally{j(!1)}})()},[w,v,s,p,r,t]),i.useEffect(()=>{const A={};if($!=null&&$.errors&&Array.isArray($==null?void 0:$.errors))for(const B of $.errors)sg.has(B.code)&&(A.submit=B.message);f(A)},[$]),h)return e.jsx(Ef,{onBack:()=>d(!1)});if(g)return e.jsx(kf,{onBack:()=>c(!1)});if((w==null?void 0:w.current_step)==="verify_second_factor")return e.jsx(dl,{attempt:w,completeVerification:v.completeVerification,prepareVerification:v.prepareVerification,onBack:()=>{C(),M(),p(!1)}});if((w==null?void 0:w.current_step)==="complete_profile")return e.jsx(ul,{attempt:w,completeProfile:v.completeProfile,completeVerification:v.completeVerification,prepareVerification:v.prepareVerification,onBack:()=>{C(),M(),p(!1)}});if(n)return e.jsx(le,{children:e.jsxs(En,{children:[e.jsx(Ae,{}),e.jsx(ys,{children:e.jsx(vr,{size:32})})]})});if(P)return e.jsx(le,{children:e.jsxs(En,{children:[e.jsx(Ae,{}),e.jsx(ys,{children:e.jsx(vr,{size:32})})]})});const X=(w==null?void 0:w.current_step)&&["verify_email","verify_email_otp","verify_email_link","verify_phone","verify_phone_otp"].includes(w.current_step)&&s;return e.jsx(le,{children:e.jsxs(En,{children:[e.jsx(Ae,{}),X?e.jsx(e.Fragment,{children:e.jsxs(ws,{children:[e.jsx(js,{children:m==="phone_otp"?"Check your phone":"Check your email"}),e.jsx(ks,{children:m==="email_magic_link"?`If ${_.email} exists in our records, you will receive a magic link. Click the link to sign in.`:m==="phone_otp"?`If ${_.phone} exists in our records, you will receive a verification code via SMS. Enter it below to continue.`:`If ${_.email} exists in our records, you will receive a verification code. Enter it below to continue.`})]})}):e.jsxs(ws,{children:[e.jsx(js,{children:"Sign in to your account"}),e.jsxs(ks,{children:["Please enter your details to continue to"," ",(t==null?void 0:t.ui_settings.app_name)||"App","!"]})]}),X?m==="email_magic_link"?e.jsxs(Pn,{children:["Having trouble?"," ",e.jsx(Lt,{children:e.jsx(tt,{to:t.ui_settings.support_page_url,children:"Get help"})}),e.jsx("div",{style:{marginTop:"var(--space-sm)"},children:e.jsx(Lt,{onClick:()=>{p(!1),C(),M()},style:{cursor:"pointer"},children:"Back to login"})})]}):e.jsxs(e.Fragment,{children:[e.jsxs(dt,{style:{gap:"15px"},onSubmit:F,noValidate:!0,children:[e.jsx(Rt,{onComplete:async A=>{if(R(A),A&&A.length===6){j(!0),f({});try{await v.completeVerification(A),p(!1)}catch(B){f({otp:B.message||"Verification failed"})}finally{j(!1)}}},onResend:async()=>{const A=m==="email_otp"?"email_otp":"phone_otp";await v.prepareVerification({strategy:A})},error:b.otp,isSubmitting:I}),e.jsx(_s,{type:"submit",disabled:I||x||!S,style:{margin:0},children:I?"Verifying...":`Continue to ${(H=t==null?void 0:t.ui_settings)==null?void 0:H.app_name}`})]}),e.jsxs(Pn,{children:["Having trouble?"," ",e.jsx(Lt,{children:e.jsx(tt,{to:t.ui_settings.support_page_url,children:"Get help"})}),e.jsx("div",{style:{marginTop:"var(--space-sm)"},children:e.jsx(Lt,{onClick:()=>{p(!1),C(),M()},style:{cursor:"pointer"},children:"Back to login"})})]})]}):e.jsxs(e.Fragment,{children:[l.length>0&&e.jsxs(e.Fragment,{children:[e.jsx(wa,{connections:l,callback:J}),e.jsx(cg,{children:e.jsx(lg,{children:"or"})})]}),e.jsxs(dt,{onSubmit:N,noValidate:!0,children:[(m==="email_password"||m==="email_otp"||m==="email_magic_link")&&((Z=(U=t==null?void 0:t.auth_settings)==null?void 0:U.email_address)==null?void 0:Z.enabled)&&e.jsxs(he,{children:[e.jsx(ue,{htmlFor:"email",children:"Email address"}),e.jsx(de,{type:"email",id:"email",name:"email",value:_.email,onChange:D,placeholder:"Enter your email address","aria-invalid":!!b.email}),b.email&&e.jsx(Er,{children:b.email})]}),m==="username_password"&&((ae=(Q=t==null?void 0:t.auth_settings)==null?void 0:Q.username)==null?void 0:ae.enabled)&&e.jsxs(he,{children:[e.jsx(ue,{htmlFor:"username",children:"Username"}),e.jsx(de,{type:"text",id:"username",name:"username",value:_.username,onChange:D,placeholder:"Enter your username","aria-invalid":!!b.username}),b.username&&e.jsx(Er,{children:b.username})]}),m==="phone_otp"&&((ce=(oe=t==null?void 0:t.auth_settings)==null?void 0:oe.phone_number)==null?void 0:ce.enabled)&&e.jsxs(he,{children:[e.jsx(ue,{htmlFor:"phone",children:"Phone number"}),e.jsx(Br,{value:_.phone,onChange:D,error:b.phone,countryCode:E,setCountryCode:T}),b.phone&&e.jsx(Er,{children:b.phone})]}),(m==="email_password"||m==="username_password")&&((se=(Y=t==null?void 0:t.auth_settings)==null?void 0:Y.password)==null?void 0:se.enabled)&&e.jsxs(he,{children:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between"},children:[e.jsx(ue,{htmlFor:"password",children:"Password"}),e.jsx(Lt,{style:{fontSize:"12px"},onClick:()=>c(!0),children:"Forgot password?"})]}),e.jsx(dg,{children:e.jsx(de,{type:"password",id:"password",name:"password",value:_.password,onChange:D,placeholder:"Enter your password","aria-invalid":!!b.password})}),b.password&&e.jsx(Er,{children:b.password})]}),e.jsxs("div",{children:[b.submit&&e.jsx(Er,{children:b.submit}),e.jsx(_s,{type:"submit",disabled:I||x,children:I?"Signing in...":"Sign in"})]}),e.jsx(Lt,{style:{fontSize:"12px",textAlign:"center"},onClick:()=>d(!0),children:"Use other methods"})]}),e.jsxs(Pn,{children:["Don't have an account?"," ",e.jsx(Lt,{children:e.jsx(tt,{to:`${(q=t.ui_settings)==null?void 0:q.sign_up_page_url}${window.location.search}`,children:"Sign up"})})]})]})]})})}const Cs=u.div`
   max-width: 380px;