@particle-network/auth-core-modal
Version:
Auth Core provides MPC (Multi-Party Computation)-based threshold signatures.
294 lines (293 loc) • 17.6 kB
JavaScript
"use client";
import{a as S,b as K}from"./chunk-TX7RTUXA.js";import{a as X,b as B}from"./chunk-HNAV5WT6.js";import{a as Q}from"./chunk-RT7AM6B4.js";import{a as J}from"./chunk-FEQ55Y6S.js";import"./chunk-J7QRBMDL.js";import{a as G}from"./chunk-5CZ6V5XL.js";import{ha as W,qa as Y,sa as Z,ta as R,u as O}from"./chunk-ZJXZXTA4.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};