@privy-io/react-auth
Version:
React client for the Privy Auth API
13 lines (12 loc) • 10.2 kB
JavaScript
import{jsxs as e,Fragment as r,jsx as o}from"react/jsx-runtime";import{useState as n,useEffect as i,useMemo as t,useCallback as a,useReducer as l}from"react";import{q as c}from"./context-WTldtXS8.mjs";import{a as s}from"./get-is-unified-wallet-Boa8DYrQ.mjs";import d from"@heroicons/react/24/outline/ExclamationTriangleIcon";import{b as h,R as u,c as p}from"./Layouts-BlFm53ED.mjs";import{M as m,B as g,S as y,P as v}from"./ModalHeader-D8-mhjp4.mjs";import{E as f,b as w,P as b,a as k,I as C,H as S,S as x,c as $,N as B,D as R,d as P,R as j,e as A,f as I,g as L}from"./shared-CwuyxHmv.mjs";import{styled as E}from"styled-components";import{C as U}from"./Checkbox-BhNoOKjX.mjs";import z from"@heroicons/react/24/outline/KeyIcon";import D from"@heroicons/react/24/solid/CheckCircleIcon";import H from"fast-password-entropy";import*as T from"secure-password-utilities";import{DEFAULT_WORDLIST as F}from"secure-password-utilities/wordlists";import M from"@heroicons/react/24/outline/ArrowDownTrayIcon";import K from"@heroicons/react/24/outline/ClipboardDocumentCheckIcon";import O from"@heroicons/react/24/outline/DocumentDuplicateIcon";import N from"@heroicons/react/24/solid/XCircleIcon";import{C as W}from"./ScreenHeader-CHmc4-Lu.mjs";const Y=({buttonHideAnimations:t,buttonLoading:a,password:l,onSubmit:c,onBack:s})=>{let[p,y]=n(!0),[v,R]=n(!1),[P,j]=n(""),A=l===P;return i((()=>{P&&!v&&R(!0)}),[P]),/*#__PURE__*/e(r,{children:[/*#__PURE__*/o(m,{closeable:!1,backFn:s}),/*#__PURE__*/o(h,{}),/*#__PURE__*/e(f,{children:[/*#__PURE__*/e(w,{children:[/*#__PURE__*/o(d,{height:48,width:48,stroke:"var(--privy-color-background)",fill:"var(--privy-color-accent)"}),/*#__PURE__*/o("h3",{style:{color:"var(--privy-color-foreground)"},children:"Confirm your password"}),/*#__PURE__*/o("p",{style:{color:"var(--privy-color-foreground-2)"},children:"Please re-enter your password below to continue."})]}),/*#__PURE__*/e(b,{children:[/*#__PURE__*/o(k,{value:P,onChange:e=>j(e.target.value),onKeyUp:e=>{"Enter"===e.key&&c()},onBlur:()=>R(!0),placeholder:"confirm your password",type:p?"password":"text",style:{paddingRight:"2.3rem"}}),/*#__PURE__*/o(C,{style:{right:"0.75rem"},children:p?/*#__PURE__*/o(S,{onClick:()=>y(!1)}):/*#__PURE__*/o(x,{onClick:()=>y(!0)})})]}),
/*#__PURE__*/o($,{"aria-hidden":!v||A,error:!0,children:"Passwords do not match"})]}),/*#__PURE__*/o(B,{onClick:c,loading:a,disabled:!A,$hideAnimations:t,children:"Continue"}),/*#__PURE__*/o(u,{}),/*#__PURE__*/o(g,{})]})},Z=({buttonHideAnimations:i,buttonLoading:t,onSubmit:a,onBack:l,config:c})=>{let[s,p]=n(!1);/*#__PURE__*/return e(r,{children:[/*#__PURE__*/o(m,{closeable:!1,backFn:l}),/*#__PURE__*/o(h,{}),/*#__PURE__*/e(f,{children:[/*#__PURE__*/e(w,{children:[/*#__PURE__*/o(d,{height:48,width:48,stroke:"var(--privy-color-background)",fill:"var(--privy-color-error)"}),/*#__PURE__*/o("h3",{style:{color:"var(--privy-color-foreground)"},children:"Confirm you have saved"}),/*#__PURE__*/o("p",{style:{color:"var(--privy-color-foreground-2)"},children:"Losing access to your password means you will lose access to your account."})]}),/*#__PURE__*/o(R,{children:/*#__PURE__*/e(P,{style:{color:"var(--privy-color-error)",cursor:"pointer"},onClick:e=>{e.preventDefault(),p((e=>!e))},children:[/*#__PURE__*/o(U,{color:"var(--privy-color-error)",readOnly:!0,checked:s}),/*#__PURE__*/o(r,{children:"I understand that if I lose my password and device, I will lose access to my account and my assets."})]})})]}),/*#__PURE__*/e(_,{children:["user"===c.initiatedBy&&/*#__PURE__*/o(y,{onClick:c.onCancel,disabled:t,children:"Cancel"}),/*#__PURE__*/o(B,{onClick:a,loading:t,$hideAnimations:i,disabled:!s,children:"Set Password"})]}),/*#__PURE__*/o(u,{}),/*#__PURE__*/o(g,{})]})};let _=E.div`
display: flex;
gap: 10px;
`,q=/[a-z]/,G=/[A-Z]/,X=/[0-9]/,J="!@#$%^&*()\\-_+.",Q=`a-zA-Z0-9${J}`,V=RegExp(`[${J}]`),ee=RegExp(`[${Q}]`);const re=RegExp(`^[${Q}]{6,}$`),oe=()=>T.generatePassphrase(4,F);function ne(e){return e>.9?"Strong":e>.5?"Medium":"Weak"}function ie(e=""){return(.3*function(e){if(e.length<8)return 0;let r=0;return q.test(e)&&(r+=1),G.test(e)&&(r+=1),X.test(e)&&(r+=1),V.test(e)&&(r+=1),Math.max(0,Math.min(1,r/3))}(e)+H(e)/95)/2}const te=({buttonHideAnimations:a,buttonLoading:l,password:c="",config:s,isResettingPassword:d,onSubmit:p,onClose:y,onBack:v,onPasswordChange:I,onPasswordGenerate:L})=>{let[E,U]=n(!1),[H,T]=n(!1);i((()=>{c&&!H&&T(!0)}),[c]);let F=t((()=>H?6>(c?.length||0)?"Password must be at least 6 characters":re.test(c||"")?null:`Invalid characters used ( ${((e="")=>[...new Set(e.split("").filter((e=>!ee.test(e))).map((e=>e.replace(" ","SPACE"))))])(c).join(" ")} )`:null),[c,H]),M=t((()=>F?{value:0,label:"Weak"}:function(e=""){let r=ie(e);return{value:r,label:ne(r)}}(c)),[c,F]),K=t((()=>!c?.length||!!F),[F,c]);/*#__PURE__*/return e(r,{children:[/*#__PURE__*/o(m,{onClose:y,closeable:"user"===s.initiatedBy,backFn:v}),/*#__PURE__*/o(h,{}),/*#__PURE__*/e(f,{children:[/*#__PURE__*/e(w,{children:[/*#__PURE__*/o(z,{height:48,width:48,stroke:"var(--privy-color-accent)"}),/*#__PURE__*/e("h3",{style:{color:"var(--privy-color-foreground)"},children:[d?"Reset":"Set"," your password"]}),/*#__PURE__*/o("p",{style:{color:"var(--privy-color-foreground-2)"},children:"Select a strong, memorable password to secure your account."})]}),/*#__PURE__*/e(b,{children:[/*#__PURE__*/o(k,{value:c,onChange:e=>I(e.target.value),onKeyUp:e=>{"Enter"===e.key&&p()},placeholder:"enter or generate a strong password",type:E?"password":"text",style:{paddingRight:"3.8rem"}}),/*#__PURE__*/e(C,{style:{width:"3.5rem"},children:[E?/*#__PURE__*/o(S,{onClick:()=>U(!1)}):/*#__PURE__*/o(x,{onClick:()=>U(!0)}),/*#__PURE__*/o(j,{onClick:L})]})]}),/*#__PURE__*/o(A,{value:0===M.value?.01:M.value,label:M.label}),/*#__PURE__*/o($,{error:!!F,children:F||`Password Strength: ${H?M.label:"--"}`}),/*#__PURE__*/e(le,{children:[/*#__PURE__*/o(ae,{children:/*#__PURE__*/e(R,{children:[/*#__PURE__*/e(P,{children:[/*#__PURE__*/o(D,{width:24,height:24,fill:"var(--privy-color-accent)"}),"This password is used to secure your account."]}),/*#__PURE__*/e(P,{children:[/*#__PURE__*/o(D,{width:24,height:24,fill:"var(--privy-color-accent)"}),"Use it to log in on a new environment, like another browser or device."]})]})}),/*#__PURE__*/o(B,{onClick:p,loading:l,disabled:K,$hideAnimations:a,children:"Continue"})]})]}),/*#__PURE__*/o(u,{}),/*#__PURE__*/o(g,{})]})};let ae=E(R)`
flex: 1;
padding-top: 1rem;
`,le=E.div`
display: flex;
flex-direction: column;
height: 100%;
`;const ce=({buttonHideAnimations:i,buttonLoading:t,appName:l,password:c,onSubmit:s,onBack:p})=>{let[y,v]=n(!1),[k,$]=n(!0),R=a((()=>{v(!0),c&&navigator.clipboard.writeText(c)}),[c]),P=a((()=>{let e=document.createElement("a"),r=l.toLowerCase().replace(/[^a-z\s]/g,"").replace(/\s/g,"-"),o=new Blob([se(l,c)],{type:"text/plain"}),n=URL.createObjectURL(o);e.href=n,e.target="_blank",e.download=`${r}-privy-wallet-recovery.txt`,document.body.appendChild(e),e.click(),setTimeout((()=>{e.remove(),URL.revokeObjectURL(n)}),5e3)}),[c]);/*#__PURE__*/return e(r,{children:[/*#__PURE__*/o(m,{backFn:p,closeable:!1}),/*#__PURE__*/o(h,{}),/*#__PURE__*/e(f,{children:[/*#__PURE__*/e(w,{children:[/*#__PURE__*/o(d,{height:48,width:48,stroke:"var(--privy-color-background)",fill:"var(--privy-color-accent)"}),/*#__PURE__*/o("h3",{style:{color:"var(--privy-color-foreground)"},children:"Save your password"}),/*#__PURE__*/o("p",{style:{color:"var(--privy-color-foreground-2)"},children:"For your security, this password cannot be reset, so keep it somewhere safe."})]}),/*#__PURE__*/e(b,{centered:!0,children:[/*#__PURE__*/o(I,{children:k?"•".repeat(c.length):c}),/*#__PURE__*/o(C,{style:{right:"0.75rem"},children:k?/*#__PURE__*/o(S,{onClick:()=>$(!1)}):/*#__PURE__*/o(x,{onClick:()=>$(!0)})})]}),/*#__PURE__*/e("div",{style:{display:"flex",margin:"12px 0",gap:"12px"},children:[/*#__PURE__*/o(L,{onClick:R,children:/*#__PURE__*/e(r,y?{children:[/*#__PURE__*/o(K,{style:{width:24,height:24},stroke:"var(--privy-color-accent)"}),"Copied"]}:{children:[/*#__PURE__*/o(O,{style:{width:24,height:24},stroke:"var(--privy-color-accent)"}),"Copy"]})}),/*#__PURE__*/e(L,{onClick:P,children:[/*#__PURE__*/o(M,{style:{width:24,height:24},stroke:"var(--privy-color-accent)"}),"Download"]})]})]}),/*#__PURE__*/o(B,{onClick:s,loading:t,$hideAnimations:i,children:"Continue"}),/*#__PURE__*/o(u,{}),/*#__PURE__*/o(g,{})]})};let se=(e,r)=>`Your wallet recovery password for ${e} is\n\n${r}\n\nYou will need this password to access your ${e} wallet on a new device. Please keep it somewhere safe.`;const de=({error:n,onClose:i})=>/*#__PURE__*/e(r,{children:[/*#__PURE__*/o(m,{closeable:!1}),/*#__PURE__*/o(h,{}),/*#__PURE__*/e(p,n?{children:[/*#__PURE__*/o(N,{fill:"var(--privy-color-error)",width:"64px",height:"64px"}),/*#__PURE__*/o(W,{title:"Something went wrong",description:n})]}:{children:[/*#__PURE__*/o(D,{fill:"var(--privy-color-success)",width:"64px",height:"64px"}),/*#__PURE__*/o(W,{title:"Success"})]}),/*#__PURE__*/o(v,{onClick:i,children:"Close"}),/*#__PURE__*/o(u,{}),/*#__PURE__*/o(g,{})]});let he=(e,r)=>{switch(e){case"creating":return"back"===r?e:"saving";case"saving":return"back"===r?"creating":"confirming";case"confirming":return"back"===r?"saving":"finalizing";case"finalizing":return"back"===r?"confirming":"done";default:return e}};const ue=({onSubmit:e,...r})=>{let{lastScreen:n,navigate:t}=s(),{send:d,state:h}=(()=>{let[e,r]=l(he,"creating");return{send:r,state:e}})(),u=a((async()=>{"finalizing"===h&&await e(),d("next")}),[h,d,e]);i((()=>{let e;return"done"===h&&"automatic"===r.config.initiatedBy&&(e=setTimeout((()=>r.onClose?.()),c)),()=>{e&&clearTimeout(e)}}),[h,r.config.initiatedBy,r.onClose]);let p=a((()=>{d("back")}),[d]),m=a((()=>{t("RecoverySelectionScreen")}),[n,t]);return"creating"===h?/*#__PURE__*/o(te,{...r,onSubmit:u,onBack:"RecoverySelectionScreen"===n?m:void 0}):"saving"===h?/*#__PURE__*/o(ce,{...r,onSubmit:u,onBack:p}):"confirming"===h?/*#__PURE__*/o(Y,{...r,onSubmit:u,onBack:p}):"finalizing"===h?/*#__PURE__*/o(Z,{...r,onSubmit:u,onBack:p}):"done"===h?/*#__PURE__*/o(de,{...r,onSubmit:u}):null};export{ue as S,oe as g};