15 lines
4.7 KiB
JavaScript
15 lines
4.7 KiB
JavaScript
import{r as y,j as e,v as M,w as R,a4 as v,aj as D,o as N,ak as T,p as b,c as F,a2 as $,d as x,l as j,k as S,u as k,L as q,P,R as O,M as h,F as B,f as U,K as A,h as I,B as K}from"./main-CiAhdYQG.js";import{I as Q}from"./arrow-left-BJ2z0Kiz.js";import{S as V}from"./Submit-DW2aiKTW.js";import{B as H}from"./ButtonLink-kWcKQZoZ.js";import{T as X}from"./Trans-CeobkUgR.js";import"./_commonjsHelpers-DaWZu8wl.js";/* empty css */const Y="_container_43om7_10",z="_control_43om7_25",G="_digit_43om7_49",g={container:Y,control:z,digit:G},J=({filled:a,selected:n})=>e.jsx("div",{className:g.digit,"aria-hidden":"true","data-filled":a?"":void 0,"data-selected":n?"":void 0}),W=y.forwardRef(function({className:n,length:r=6,...f},l){const d=R(g.container,n),[p,t]=v.useState(0),[m,_]=v.useState(null),s=c=>{const i=c.currentTarget;t(i.value?.length),document.activeElement!==i||i.selectionStart===null||i.selectionEnd===null?_(null):_([i.selectionStart,i.selectionEnd])};return e.jsxs("div",{className:d,children:[e.jsx("input",{...f,inputMode:"numeric",type:"text",minLength:0,maxLength:r,className:g.control,pattern:`\\d{${r}}`,autoComplete:"one-time-code",onSelect:s,onFocus:s,onBlur:s,onMouseDown:s,onMouseMove:s,onMouseUp:s,onChange:s,ref:l}),Array.from(Array(r).keys()).map(c=>e.jsx(J,{filled:c<p,selected:!!m&&c>=m[0]&&c<m[1]},c))]})}),Z=y.forwardRef(function(n,r){return e.jsx(M,{asChild:!0,children:e.jsx(W,{ref:r,...n})})});function C(a,n){return e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",fill:"currentColor",viewBox:"0 0 24 24",ref:n,...a,children:e.jsx("path",{d:"m21.211 12.895-16.14 8.07c-.785.392-1.658-.342-1.406-1.182L5.7 13h6.55a1 1 0 1 0 0-2H5.7L3.665 4.217c-.252-.84.621-1.574 1.405-1.182l16.141 8.07a1 1 0 0 1 0 1.79"})})}C.displayName="SendSolidIcon";const ee=y.forwardRef(C),te=S(`
|
|
mutation DoVerifyEmail($id: ID!, $code: String!) {
|
|
completeEmailAuthentication(input: { id: $id, code: $code }) {
|
|
status
|
|
}
|
|
}
|
|
`),ne=S(`
|
|
mutation ResendEmailAuthenticationCode($id: ID!, $language: String!) {
|
|
resendEmailAuthenticationCode(input: { id: $id, language: $language }) {
|
|
status
|
|
}
|
|
}
|
|
`);function ue(){const{id:a}=D.useParams(),{data:{userEmailAuthentication:n}}=N(T(a));if(!n)throw b();const r=F(),f=$(),l=x({mutationFn:({id:o,code:u})=>j({query:te,variables:{id:o,code:u}}),async onSuccess(o){await r.invalidateQueries({queryKey:["userEmails"]}),await r.invalidateQueries({queryKey:["verifyEmail",a]}),o.completeEmailAuthentication.status==="COMPLETED"?await f({to:"/"}):o.completeEmailAuthentication.status==="IN_USE"&&await f({to:"/emails/$id/in-use",params:{id:a}})}}),d=x({mutationFn:({id:o,language:u})=>j({query:ne,variables:{id:o,language:u}}),onSuccess(){p.current?.focus()}}),p=y.useRef(null),{t,i18n:m}=k(),_=o=>{o.preventDefault();const u=o.currentTarget,L=new FormData(u).get("code");l.mutateAsync({id:n.id,code:L}).finally(()=>u.reset())},s=()=>{d.mutate({id:n.id,language:m.languages[0]})},c=d.data?.resendEmailAuthenticationCode.status==="RESENT",i=l.data?.completeEmailAuthentication.status==="INVALID_CODE",w=l.data?.completeEmailAuthentication.status==="CODE_EXPIRED",E=l.data?.completeEmailAuthentication.status==="RATE_LIMITED";return e.jsxs(q,{children:[e.jsx(P,{Icon:ee,title:t("frontend.verify_email.heading"),subtitle:e.jsx(X,{i18nKey:"frontend.verify_email.enter_code_prompt",values:{email:n.email},components:{email:e.jsx("span",{className:"text-primary"})}})}),e.jsxs(O,{onSubmit:_,children:[c&&e.jsx(h,{type:"success",title:t("frontend.verify_email.email_sent_alert.title"),children:t("frontend.verify_email.email_sent_alert.description")}),i&&e.jsx(h,{type:"critical",title:t("frontend.verify_email.invalid_code_alert.title"),children:t("frontend.verify_email.invalid_code_alert.description")}),w&&e.jsx(h,{type:"critical",title:t("frontend.verify_email.code_expired_alert.title"),children:t("frontend.verify_email.code_expired_alert.description")}),E&&e.jsx(h,{type:"critical",title:t("frontend.errors.rate_limit_exceeded")}),e.jsxs(B,{name:"code",serverInvalid:i||E,className:"self-center mb-4",children:[e.jsx(U,{children:t("frontend.verify_email.code_field_label")}),e.jsx(Z,{ref:p}),i&&e.jsx(A,{children:t("frontend.verify_email.code_field_error")}),e.jsx(A,{match:"patternMismatch",children:t("frontend.verify_email.code_field_wrong_shape")})]}),e.jsxs(V,{type:"submit",disabled:l.isPending,children:[l.isPending&&e.jsx(I,{inline:!0}),t("action.continue")]}),e.jsxs(K,{type:"button",kind:"secondary",disabled:d.isPending,onClick:s,children:[d.isPending&&e.jsx(I,{inline:!0}),t("frontend.verify_email.resend_code")]}),e.jsx(H,{Icon:Q,kind:"tertiary",to:"/",children:t("action.back")})]})]})}export{ue as component};
|
|
//# sourceMappingURL=emails._id.verify-BEvFlfcg.js.map
|