UNPKG

@privy-io/react-auth

Version:

React client for the Privy Auth API

3 lines (2 loc) 10.4 kB
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-Bycd1SKV.mjs";import{a as s}from"./get-is-unified-wallet-DvKS5IUO.mjs";import d from"@heroicons/react/24/outline/ExclamationTriangleIcon";import{b as h,R as p,c as u}from"./Layouts-Bmf8DxNP.mjs";import{M as m,B as g}from"./ModalHeader-BLGC-7ev.mjs";import{E as y,b as v,P as f,a as w,I as b,H as k,S as C,c as S,N as x,D as B,d as $,R as I,e as R,f as P,g as j}from"./shared-rucIJmk0.mjs";import{styled as A}from"styled-components";import{S as L,P as E}from"./Button-B8mqatRx.mjs";import{C as D}from"./Checkbox-NmGCZeKL.mjs";import z from"@heroicons/react/24/outline/KeyIcon";import H from"@heroicons/react/24/solid/CheckCircleIcon";import T from"fast-password-entropy";import*as U from"secure-password-utilities";import{DEFAULT_WORDLIST as F}from"secure-password-utilities/wordlists";import M from"@heroicons/react/24/outline/ArrowDownTrayIcon";import N from"@heroicons/react/24/outline/ClipboardDocumentCheckIcon";import K from"@heroicons/react/24/outline/DocumentDuplicateIcon";import O from"@heroicons/react/24/solid/XCircleIcon";import{C as W}from"./ScreenHeader-Biz1wq02.mjs";const Y=({buttonHideAnimations:t,buttonLoading:a,password:l,onSubmit:c,onBack:s})=>{let[u,B]=n(!0),[$,I]=n(!1),[R,P]=n(""),j=l===R;return i((()=>{R&&!$&&I(!0)}),[R]),/*#__PURE__*/e(r,{children:[/*#__PURE__*/o(m,{closeable:!1,backFn:s}),/*#__PURE__*/o(h,{}),/*#__PURE__*/e(y,{children:[/*#__PURE__*/e(v,{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(f,{children:[/*#__PURE__*/o(w,{value:R,onChange:e=>P(e.target.value),onKeyUp:e=>{"Enter"===e.key&&c()},onBlur:()=>I(!0),placeholder:"confirm your password",type:u?"password":"text",style:{paddingRight:"2.3rem"}}),/*#__PURE__*/o(b,{style:{right:"0.75rem"},children:u?/*#__PURE__*/o(k,{onClick:()=>B(!1)}):/*#__PURE__*/o(C,{onClick:()=>B(!0)})})]}), /*#__PURE__*/o(S,{"aria-hidden":!$||j,error:!0,children:"Passwords do not match"})]}),/*#__PURE__*/o(x,{onClick:c,loading:a,disabled:!j,$hideAnimations:t,children:"Continue"}),/*#__PURE__*/o(p,{}),/*#__PURE__*/o(g,{})]})},Z=({buttonHideAnimations:i,buttonLoading:t,onSubmit:a,onBack:l,config:c})=>{let[s,u]=n(!1);/*#__PURE__*/return e(r,{children:[/*#__PURE__*/o(m,{closeable:!1,backFn:l}),/*#__PURE__*/o(h,{}),/*#__PURE__*/e(y,{children:[/*#__PURE__*/e(v,{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(B,{children:/*#__PURE__*/e($,{style:{color:"var(--privy-color-error)",cursor:"pointer"},onClick:e=>{e.preventDefault(),u((e=>!e))},children:[/*#__PURE__*/o(D,{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(L,{onClick:c.onCancel,disabled:t,children:"Cancel"}),/*#__PURE__*/o(x,{onClick:a,loading:t,$hideAnimations:i,disabled:!s,children:"Set Password"})]}),/*#__PURE__*/o(p,{}),/*#__PURE__*/o(g,{})]})};let _=/*#__PURE__*/A.div.withConfig({displayName:"ButtonsContainer",componentId:"sc-d1659c5f-0"})(["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=()=>U.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)+T(e)/95)/2}const te=({buttonHideAnimations:a,buttonLoading:l,password:c="",config:s,isResettingPassword:d,onSubmit:u,onClose:P,onBack:j,onPasswordChange:A,onPasswordGenerate:L})=>{let[E,D]=n(!1),[T,U]=n(!1);i((()=>{c&&!T&&U(!0)}),[c]);let F=t((()=>T?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,T]),M=t((()=>F?{value:0,label:"Weak"}:function(e=""){let r=ie(e);return{value:r,label:ne(r)}}(c)),[c,F]),N=t((()=>!c?.length||!!F),[F,c]);/*#__PURE__*/return e(r,{children:[/*#__PURE__*/o(m,{onClose:P,closeable:"user"===s.initiatedBy,backFn:j}),/*#__PURE__*/o(h,{}),/*#__PURE__*/e(y,{children:[/*#__PURE__*/e(v,{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(f,{children:[/*#__PURE__*/o(w,{value:c,onChange:e=>A(e.target.value),onKeyUp:e=>{"Enter"===e.key&&u()},placeholder:"enter or generate a strong password",type:E?"password":"text",style:{paddingRight:"3.8rem"}}),/*#__PURE__*/e(b,{style:{width:"3.5rem"},children:[E?/*#__PURE__*/o(k,{onClick:()=>D(!1)}):/*#__PURE__*/o(C,{onClick:()=>D(!0)}),/*#__PURE__*/o(I,{onClick:L})]})]}),/*#__PURE__*/o(R,{value:0===M.value?.01:M.value,label:M.label}),/*#__PURE__*/o(S,{error:!!F,children:F||`Password Strength: ${T?M.label:"--"}`}),/*#__PURE__*/e(le,{children:[/*#__PURE__*/o(ae,{children:/*#__PURE__*/e(B,{children:[/*#__PURE__*/e($,{children:[/*#__PURE__*/o(H,{width:24,height:24,fill:"var(--privy-color-accent)"}),"This password is used to secure your account."]}),/*#__PURE__*/e($,{children:[/*#__PURE__*/o(H,{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(x,{onClick:u,loading:l,disabled:N,$hideAnimations:a,children:"Continue"})]})]}),/*#__PURE__*/o(p,{}),/*#__PURE__*/o(g,{})]})};let ae=/*#__PURE__*/A(B).withConfig({displayName:"DetailsContainer",componentId:"sc-2da5fe90-0"})(["flex:1;padding-top:1rem;"]),le=/*#__PURE__*/A.div.withConfig({displayName:"LowerContainer",componentId:"sc-2da5fe90-1"})(["display:flex;flex-direction:column;height:100%;"]);const ce=({buttonHideAnimations:i,buttonLoading:t,appName:l,password:c,onSubmit:s,onBack:u})=>{let[w,S]=n(!1),[B,$]=n(!0),I=a((()=>{S(!0),c&&navigator.clipboard.writeText(c)}),[c]),R=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:u,closeable:!1}),/*#__PURE__*/o(h,{}),/*#__PURE__*/e(y,{children:[/*#__PURE__*/e(v,{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(f,{centered:!0,children:[/*#__PURE__*/o(P,{children:B?"•".repeat(c.length):c}),/*#__PURE__*/o(b,{style:{right:"0.75rem"},children:B?/*#__PURE__*/o(k,{onClick:()=>$(!1)}):/*#__PURE__*/o(C,{onClick:()=>$(!0)})})]}),/*#__PURE__*/e("div",{style:{display:"flex",margin:"12px 0",gap:"12px"},children:[/*#__PURE__*/o(j,{onClick:I,children:/*#__PURE__*/e(r,w?{children:[/*#__PURE__*/o(N,{style:{width:24,height:24},stroke:"var(--privy-color-accent)"}),"Copied"]}:{children:[/*#__PURE__*/o(K,{style:{width:24,height:24},stroke:"var(--privy-color-accent)"}),"Copy"]})}),/*#__PURE__*/e(j,{onClick:R,children:[/*#__PURE__*/o(M,{style:{width:24,height:24},stroke:"var(--privy-color-accent)"}),"Download"]})]})]}),/*#__PURE__*/o(x,{onClick:s,loading:t,$hideAnimations:i,children:"Continue"}),/*#__PURE__*/o(p,{}),/*#__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(u,n?{children:[/*#__PURE__*/o(O,{fill:"var(--privy-color-error)",width:"64px",height:"64px"}),/*#__PURE__*/o(W,{title:"Something went wrong",description:n})]}:{children:[/*#__PURE__*/o(H,{fill:"var(--privy-color-success)",width:"64px",height:"64px"}),/*#__PURE__*/o(W,{title:"Success"})]}),/*#__PURE__*/o(E,{onClick:i,children:"Close"}),/*#__PURE__*/o(p,{}),/*#__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 pe=({onSubmit:e,...r})=>{let{lastScreen:n,navigate:t}=s(),{send:d,state:h}=(()=>{let[e,r]=l(he,"creating");return{send:r,state:e}})(),p=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 u=a((()=>{d("back")}),[d]),m=a((()=>{t("RecoverySelectionScreen")}),[n,t]);return"creating"===h?/*#__PURE__*/o(te,{...r,onSubmit:p,onBack:"RecoverySelectionScreen"===n?m:void 0}):"saving"===h?/*#__PURE__*/o(ce,{...r,onSubmit:p,onBack:u}):"confirming"===h?/*#__PURE__*/o(Y,{...r,onSubmit:p,onBack:u}):"finalizing"===h?/*#__PURE__*/o(Z,{...r,onSubmit:p,onBack:u}):"done"===h?/*#__PURE__*/o(de,{...r,onSubmit:p}):null};export{pe as S,oe as g};