UNPKG

@particle-network/auth-core-modal

Version:

Auth Core provides MPC (Multi-Party Computation)-based threshold signatures.

294 lines (293 loc) 17.6 kB
"use client"; import{a as S,b as K}from"./chunk-TX7RTUXA.js";import{a as X,b as B}from"./chunk-5MT6UC7Z.js";import{a as Q}from"./chunk-CA2ONM6K.js";import{a as J}from"./chunk-3GNUKO34.js";import"./chunk-6ART4FPU.js";import{a as G}from"./chunk-JLTVTEXA.js";import{ha as W,qa as Y,sa as Z,ta as R,u as O}from"./chunk-CNYYVI6H.js";import"./chunk-L535NPP3.js";import{AuthType as _,checkHasBoundLoginPhoneOrEmail as gn}from"@particle-network/auth-core";import{useRequest as fn,useThrottleFn as yn}from"ahooks";import{Button as xn,Form as F,Input as vn,Modal as E}from"antd";import{parsePhoneNumber as wn}from"libphonenumber-js/max";import p,{useEffect as kn,useMemo as A,useState as Cn}from"react";import{useTranslation as Nn}from"react-i18next";import{DownOutlined as cn}from"@ant-design/icons";import{useClickAway as pn}from"ahooks";import{Form as $,Input as tn,InputNumber as sn}from"antd";import en from"country-flag-icons/unicode";import{isValidPhoneNumber as on,parsePhoneNumber as ln}from"libphonenumber-js/max";import o,{useEffect as j,useMemo as dn,useRef as M,useState as z}from"react";import{useTranslation as mn}from"react-i18next";var nn=`.phone-input-item-container { position: relative; display: block; width: 100%; height: auto; overflow: initial; } .phone-input-item-container .ant-input-affix-wrapper, .phone-input-item-container .ant-input-number-group-wrapper { width: 100%; padding: 0; border: 1px solid var(--input-border-color) !important; border-radius: var(--primary-btn-border-radius); line-height: 47px; background: var(--input-background-color) !important; box-shadow: none !important; } .phone-input-item-container .ant-input-affix-wrapper .ant-input-number-group-addon, .phone-input-item-container .ant-input-number-group-wrapper .ant-input-number-group-addon { position: initial; border: none; background-color: var(--input-background-color); border-end-start-radius: var(--primary-btn-border-radius); border-start-start-radius: var(--primary-btn-border-radius); } .phone-input-item-container .ant-input-affix-wrapper .ant-input-number-status-error:not(.ant-input-number-disabled, .ant-input-number-borderless).ant-input-number, .phone-input-item-container .ant-input-number-group-wrapper .ant-input-number-status-error:not(.ant-input-number-disabled, .ant-input-number-borderless).ant-input-number, .phone-input-item-container .ant-input-affix-wrapper .ant-input-number-status-error:not( .ant-input-number-disabled, .ant-input-number-borderless ).ant-input-number:hover, .phone-input-item-container .ant-input-number-group-wrapper .ant-input-number-status-error:not( .ant-input-number-disabled, .ant-input-number-borderless ).ant-input-number:hover { border: none; background: none; } .phone-input-item-container .ant-input-affix-wrapper .ant-input-number, .phone-input-item-container .ant-input-number-group-wrapper .ant-input-number { border: none; background: none; } .phone-input-item-container .ant-input-affix-wrapper .ant-input-number-focused, .phone-input-item-container .ant-input-number-group-wrapper .ant-input-number-focused { box-shadow: none !important; } .phone-input-item-container .ant-input-affix-wrapper .ant-input-number-disabled, .phone-input-item-container .ant-input-number-group-wrapper .ant-input-number-disabled { background: none; } .phone-input-item-container .ant-input-affix-wrapper .ant-input, .phone-input-item-container .ant-input-number-group-wrapper .ant-input, .phone-input-item-container .ant-input-affix-wrapper .ant-input-number-input, .phone-input-item-container .ant-input-number-group-wrapper .ant-input-number-input { height: 47px; border: none !important; border-radius: 0; line-height: 47px; color: var(--text-color); } .phone-input-item-container .ant-input-affix-wrapper .ant-input:hover, .phone-input-item-container .ant-input-number-group-wrapper .ant-input:hover, .phone-input-item-container .ant-input-affix-wrapper .ant-input-number-input:hover, .phone-input-item-container .ant-input-number-group-wrapper .ant-input-number-input:hover { border: none !important; } .phone-input-item-container .ant-input-affix-wrapper[data-focus='true'], .phone-input-item-container .ant-input-number-group-wrapper[data-focus='true'] { border: 1px solid var(--accent-color) !important; } .phone-input-item-container .ant-input[disabled] { width: 100%; height: 47px; border: 1px solid var(--input-border-color); border-radius: var(--primary-btn-border-radius); color: var(--text-color); background-color: var(--input-background-color); } .phone-input-item-container .country-box { position: initial; cursor: pointer; } .phone-input-item-container .country-box .prefix-wrap { display: flex; color: var(--text-color); gap: 4px; } .phone-input-item-container .country-box .account-select-country-list { position: absolute; z-index: 2; top: 54px; left: 0%; width: 100%; height: 350px; border-radius: var(--card-border-radius) !important; overflow: hidden auto; background-color: var(--input-background-color); } .phone-input-item-container .country-box .account-select-country-list::-webkit-scrollbar { display: none; width: 0; } .phone-input-item-container .country-box .account-select-country-list .search-input-wrap .ant-input:focus { border: none !important; box-shadow: none !important; } .phone-input-item-container .country-box .account-select-country-list .search-input-wrap.account-select-country-item { padding-right: 13px; } .phone-input-item-container .country-box .account-select-country-list .search-input-wrap.account-select-country-item:hover { background: var(--input-background-color); } .phone-input-item-container .country-box .account-select-country-list .search-input-wrap.account-select-country-item:hover.search-input-wrap { background: none; } .phone-input-item-container .country-box .account-select-country-list .search-input-wrap .ant-input-clear-icon { color: var(--text-color); } .phone-input-item-container .country-box .account-select-country-list .search-input-wrap .ant-input-affix-wrapper { border-color: var(--keyword-border-color) !important; } .phone-input-item-container .country-box .account-select-country-list .search-input-wrap .ant-input-suffix { position: relative; right: 10px; } .phone-input-item-container .country-box .account-select-country-list .search-input-wrap .search-input { width: 100%; height: 32px; border-radius: var(--primary-btn-border-radius); overflow: hidden; color: var(--text-color); background-color: var(--input-background-color); } .phone-input-item-container .country-box .account-select-country-list .search-input-wrap .search-input .ant-input { width: 100%; height: auto; padding-top: 4px; padding-bottom: 4px; line-height: initial; } .phone-input-item-container .country-box .account-select-country-list .no-data { display: flex; justify-content: center; align-items: center; height: 160px; color: var(--text-color); } .phone-input-item-container .country-box .account-select-country-list .account-select-country-item { position: relative; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; height: 47px; padding: 5px 0 5px 13px; margin: 0; border-bottom: 1px solid var(--keyword-border-color); font-size: 14px; color: var(--text-color); cursor: pointer; } .phone-input-item-container .country-box .account-select-country-list .account-select-country-item:hover { background-color: var(--keyword-border-color); } .phone-input-item-container .country-box .account-select-country-list .account-select-country-item div { display: flex; max-width: 80%; margin-right: 13px; } .phone-input-item-container .country-box input[type='number']::-webkit-inner-spin-button, .phone-input-item-container .country-box input[type='number']::-webkit-outer-spin-button { appearance: none; margin: 0; } .phone-input-item-container .country-box.phone { display: flex; align-items: center; } .phone-input-item-container .country-box .account-select-opt { display: flex; flex-shrink: 0; justify-content: center; align-items: center; width: 40px; height: 100%; padding-right: 4px; padding-left: 4px; cursor: pointer; } .phone-input-item-container .country-box .account-select-opt .account-select-icon { display: flex; justify-content: center; align-items: center; overflow: hidden; font-size: 15px; } .phone-input-item-container .country-box .account-select-opt .down-more { margin-left: 6px; font-size: 10px; } .phone-input-item-container .country-box span { flex-shrink: 0; margin: 0; font-size: 15px; } .phone-input-item-container .country-box .country-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .phone-input-item-container .country-box input { flex-shrink: 1; box-sizing: border-box; width: 100%; height: 45px; padding: 0 15px; border: none; outline: none; font-weight: 400; font-size: 15px; line-height: 45px; color: var(--text-color); background-color: transparent; } `;var bn=a=>{let s=a.form,e=$.useWatch(a.name,s),[b,c]=z(["United States","us","1"]),{t:u}=mn(),[g,x]=z(!1),r=M(),T=M(),[w,h]=z(""),k=M(),f=dn(()=>S.filter(t=>t.join("+").toLowerCase().includes(w.toLowerCase())),[w]);return pn(()=>{x(!1)},r),j(()=>{g&&h("")},[g]),j(()=>{if(e!=null&&e.includes("*"))return;let t=`+${b[2]}`,n=(e||"").replace(/^\+\d+/,"").trim();s.setFieldsValue({[a.name]:`${t} ${n}`}),n&&s.validateFields(["_phone"])},[b,e]),j(()=>{var t;try{if((t=e==null?void 0:e.includes)!=null&&t.call(e,"*"))s.setFieldsValue({_phone:e});else if(e){if(on(e)){let n=ln(e),d=n.nationalNumber;s.setFieldsValue({_phone:d});let L=n.countryCallingCode.toString(),C=n.country;if(L&&C){let y=S.filter(P=>P[2].toString()===L&&P[1].toLowerCase()===C.toLowerCase());y&&y.length>0&&c(y[y.length-1])}}}else{let n=K();n&&c(n)}}catch{}},[e]),o.createElement(o.Fragment,null,o.createElement("style",null,nn),o.createElement("div",{className:"phone-input-item-container"},o.createElement($.Item,{className:!a.disabled||a.disabled&&a.previewMode!=="input"?"hidden":"",extra:a.extra,name:a.name},o.createElement(tn,{disabled:a.disabled})),o.createElement($.Item,{name:"_phone",className:a.disabled&&a.previewMode=="input"?"hidden":"",extra:a.extra,rules:[{required:!0,validator:(t,n)=>{try{if(n)try{if(n=`+${b[2]} ${n}`,!on(n))return Promise.reject(u("login.phone_format_error"))}catch{return Promise.reject(u("login.phone_format_error"))}else return Promise.reject(u("login.input_phone_holder"))}catch{return Promise.reject(u("login.phone_format_error"))}return Promise.resolve()}}]},o.createElement(sn,{placeholder:u("account.mobile"),disabled:a.disabled,controls:!1,onChange:t=>{s.setFieldsValue({[a.name]:`+${b[2]} ${t}`})},onFocus:()=>{var t;(t=document.querySelector(".ant-input-number-group-wrapper"))==null||t.setAttribute("data-focus","true")},onBlur:()=>{var t;(t=document.querySelector(".ant-input-number-group-wrapper"))==null||t.setAttribute("data-focus","false")},addonBefore:o.createElement("div",{className:"country-box phone",ref:T},o.createElement("div",{className:"prefix-wrap",onClick:()=>{a.disabled||(x(!g),setTimeout(()=>{var t;(t=k.current)==null||t.focus()}))},ref:r},o.createElement("div",{className:"account-select-opt"},o.createElement("div",{className:"account-select-icon"},en(`${b[1]}`)),o.createElement(cn,{className:"down-more"})),o.createElement("span",null,"+",b[2])),g&&o.createElement("div",{className:"account-select-country-list "},o.createElement("div",{className:"account-select-country-item search-input-wrap",onClick:t=>{t.stopPropagation()}},o.createElement(tn,{ref:k,className:"search-input",type:"text",placeholder:u("login.search_country_holder"),allowClear:!0,onChange:t=>{var d;let n=((d=t==null?void 0:t.target)==null?void 0:d.value)||"";h(n)}})),f&&!!f.length?o.createElement("div",{className:"p-country-list"},f.map((t,n)=>o.createElement("div",{key:`${t[0]}-${t[1]}-${t[2]}`,className:"account-select-country-item",onClick:()=>{c(t),x(!1)}},o.createElement("div",{className:"country-box"},o.createElement("div",{className:"country-flag"},en(`${t[1]}`)),o.createElement("span",{className:"country-name"},t[0])),o.createElement("div",{className:"country-code"},"+"+t[2])))):o.createElement("div",{className:"no-data"},"No data")))}))))},rn=bn;var an=`.login-account-bind { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; height: 100%; overflow-y: auto; } .login-account-bind .ant-input-status-error:not(.ant-input-disabled, .ant-input-borderless).ant-input { background-color: var(--input-background-color); } .login-account-bind .ant-spin-spinning { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding-bottom: 20vh; } .login-account-bind .account-title { font-weight: 500; font-size: 18px; } .login-account-bind .account-bind-form { width: 100%; padding: 0 18px; margin-top: 34px; } .login-account-bind .account-bind-form .account-input { width: 100%; height: 47px; border: 1px solid var(--input-border-color); border-radius: var(--primary-btn-border-radius); color: var(--text-color); background-color: var(--input-background-color); } .login-account-bind .account-bind-form .link-account-hint { align-self: flex-start; padding-top: 6px; font-size: 12px; color: var(--secondary-text-color); } .login-account-bind .account-bind-form .link-btn { margin-top: 15px; margin-bottom: 30px; } .login-account-bind .account-bind-form .unlink-btn { margin-top: 15px; margin-bottom: 30px; color: #fff; background: #ea4335; } .login-account-bind .footer-box { position: absolute; bottom: 10px; margin: 0; } @media screen and (max-height: 350px) { .login-account-bind .footer-box { position: unset; bottom: 0; margin-bottom: 10px; } } `;var _n=a=>{let s=a,e=(s==null?void 0:s.authType)||"",b=(s==null?void 0:s.verifyToken)||"",{t:c}=Nn(),[u]=F.useForm(),g=Z(),x=J(),{userInfo:r}=W(),{showSelectSecurityAccount:T}=R(),[w,h]=Cn(!1),{runAsync:k}=fn(gn,{manual:!0}),{authCoreModal:f}=Y(),t=A(()=>X({userInfo:r,t:c}),[r]),n=A(()=>{var i;return((i=t==null?void 0:t.find)==null?void 0:i.call(t,m=>m.type===e))||{}},[t,e]),d=A(()=>!n.value&&!n.id,[n]),L=A(()=>!n.isOriginal&&!d,[n]),C=()=>{u.validateFields().then(l=>{var v,I,N,q,H,U,D;let i=((q=(N=(I=(v=u.getFieldsValue())==null?void 0:v.inputValue)==null?void 0:I.replace(/\s/g,""))==null?void 0:N.trim)==null?void 0:q.call(N))||"";if(h(!0),e==="phone"&&((H=r==null?void 0:r.security_account)==null?void 0:H.phone)===i){E.error({title:c("new.duplicate_phonel_bindings"),wrapClassName:"auth-core-modal-error",getContainer:()=>f.rootBody}),h(!1);return}else if(e==="email"&&((D=(U=r==null?void 0:r.security_account)==null?void 0:U.email)==null?void 0:D.toLowerCase())===(i==null?void 0:i.toLowerCase())){E.error({title:c("new.duplicate_email_bindings"),wrapClassName:"auth-core-modal-error",getContainer:()=>f.rootBody}),h(!1);return}let m={};e===_.phone?m.phone=i:m.email=i,k(m).then(V=>{g("/account/verify",{state:{account:i,authType:e,verifyToken:b,pageType:"bind_login_account"}}),h(!1)}).catch(V=>{h(!1),V.error_code===20109?E.error({title:e===_.phone?c("error.server_phone_20109"):c("error.server_email_20109"),wrapClassName:"auth-core-modal-error",getContainer:()=>f.rootBody}):x.error(V.message)})})},{run:y}=yn(l=>{g("/account/verify",{state:{account:l.account,authType:e,unbindAccount:u.getFieldValue("inputValue"),pageType:"unbind_login_account"}})},{wait:3e3}),P=()=>{var l,i,m,v;((l=r==null?void 0:r.security_account)==null?void 0:l.email)&&((i=r==null?void 0:r.security_account)==null?void 0:i.phone)?T(!0,{authType:e,unbindAccount:u.getFieldValue("inputValue"),pageType:"unbind_login_account"}):y({account:((m=r==null?void 0:r.security_account)==null?void 0:m.email)||((v=r==null?void 0:r.security_account)==null?void 0:v.phone)})};return kn(()=>{if((n==null?void 0:n.value)||(n==null?void 0:n.id))if(e===_.phone){let l=wn(n==null?void 0:n.value.replace(/\s/g,"")),i=l.countryCallingCode,m=l.nationalNumber;u.setFieldsValue({inputValue:B(`+${i} ${m}`)})}else u.setFieldsValue({inputValue:B((n==null?void 0:n.value)||(n==null?void 0:n.id)||"")})},[n==null?void 0:n.value,n==null?void 0:n.id,e]),p.createElement("div",{className:"login-account-bind "},p.createElement("style",null,an),p.createElement(Q,{displayBackBtn:!0},n.name),p.createElement(F,{className:"account-bind-form",layout:"vertical",form:u,onFinish:C},e===_.phone?p.createElement(rn,{name:"inputValue",form:u,disabled:!d,previewMode:"input",extra:p.createElement("div",{className:"link-account-hint"},c("new.link_account_hint").format(n.name))}):p.createElement(F.Item,{name:"inputValue",validateTrigger:"onBlur",extra:p.createElement("div",{className:"link-account-hint"},c("new.link_account_hint").format(n.name)),rules:[{required:!0,validator:async(l,i)=>{if(i){if(!O.test(i))return Promise.reject(c("login.email_format_error"))}else return Promise.reject(c("account.input_vaild_email"));return Promise.resolve()}}]},p.createElement(vn,{className:"account-input",placeholder:n.name,disabled:!d,onChange:l=>u.setFields([{name:"email",value:l.target.value,errors:[]}])})),p.createElement(F.Item,null,d?p.createElement(xn,{className:"primary-antd-btn link-btn",loading:w,htmlType:"submit"},c("account.link")):p.createElement(p.Fragment,null))),p.createElement(G,null))},Rn=_n;export{Rn as default};