@particle-network/auth-core-modal
Version:
Auth Core provides MPC (Multi-Party Computation)-based threshold signatures.
381 lines (377 loc) • 16.8 kB
JavaScript
"use client";
import {
react_auth_code_input_default
} from "./chunk-K2YF54D3.js";
import {
getAccountList
} from "./chunk-A456AI5N.js";
import "./chunk-W3JANJPG.js";
import {
useMessage_default
} from "./chunk-FG2AUHCJ.js";
import {
svg_icon_default
} from "./chunk-VCVXJFMF.js";
import {
power_footer_default
} from "./chunk-S2Q2HZA6.js";
import {
displayEmail,
displayPhone,
useAuthCoreModal,
useCustomNavigate,
useCustomRouter,
useCustomize,
useParticleAuth
} from "./chunk-NJW64X5G.js";
import "./chunk-LQ53OFQ3.js";
// src/pages/account/accountVerify/index.tsx
import {
ApiError,
AuthType,
bindLoginAccount,
getBindSecurityAccounCaptcha,
getCloudflareTurnstileResponse,
getSecurityAccountCaptcha,
getSecurityAccountToken,
setPaymentPassword,
syncUserInfo,
thirdpartyAuth
} from "@particle-network/auth-core";
import { useInterval, useRequest } from "ahooks";
import { Button, Modal } from "antd";
import base64url from "base64url";
import throttle from "lodash/throttle.js";
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
// src/pages/account/accountVerify/index.less
var accountVerify_default = ".set-viery-container {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n height: 100%;\n overflow: auto;\n color: var(--text-color);\n}\n.set-viery-container .footer-box {\n position: absolute;\n bottom: 10px;\n margin: 0;\n}\n@media only screen and (max-height: 520px) {\n .set-viery-container .footer-box {\n position: unset;\n bottom: 0;\n margin-top: 20px;\n margin-bottom: 10px;\n }\n}\n.set-viery-container .display-none {\n display: none;\n}\n.set-viery-container .error-tip {\n width: 90%;\n height: 0;\n padding-left: 10px;\n margin-top: 6px;\n margin-bottom: 0;\n text-align: left;\n color: red;\n opacity: 0;\n transition: all 0.3s;\n}\n.set-viery-container .error-tip.show {\n height: 30px;\n opacity: 1;\n}\n.set-viery-container .set-email-title {\n margin-top: 60px;\n font-size: 22px;\n color: var(--text-color);\n}\n.set-viery-container .patment-tips1 {\n width: 80vw;\n margin-top: 30px;\n font-size: 14px;\n text-align: center;\n color: var(--text-color);\n}\n@media (min-width: 600px) {\n .set-viery-container .patment-tips1 {\n width: calc(80 * var(--vw));\n }\n}\n.set-viery-container .set-email-buttons {\n position: absolute;\n bottom: 0;\n left: 0;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: center;\n width: 100%;\n height: auto;\n padding-bottom: 20px;\n}\n.set-viery-container .success-icon {\n width: 50px;\n height: 50px;\n margin-top: 60px;\n}\n.set-viery-container .set-email-desc-1 {\n box-sizing: border-box;\n padding: 0 18px;\n margin: 15px 0 25px;\n font-weight: 400;\n font-size: 14px;\n line-height: 16px;\n text-align: center;\n color: var(--text-color);\n}\n.set-viery-container .account-submit-btn {\n width: 90%;\n height: 47px;\n padding: 0;\n margin-top: 38px;\n border: none;\n border-radius: var(--primary-btn-border-radius);\n font-weight: 500;\n font-size: var(--primary-btn-font-size);\n line-height: 47px;\n text-align: center;\n color: var(--primary-btn-color);\n background: var(--primary-btn-background-color);\n opacity: 1;\n}\n.set-viery-container .account-submit-btn:hover {\n border: none;\n color: var(--primary-btn-color) !important;\n background: var(--primary-btn-background-color) !important;\n opacity: var(--hover-opacity);\n}\n.set-viery-container .account-switch-item {\n margin-top: 40px;\n font-weight: 500;\n font-size: 13px;\n line-height: 19px;\n color: var(--accent-color);\n cursor: pointer;\n}\n.set-viery-container .set-email-desc-2 {\n min-width: 116px;\n height: 23px;\n padding: 0 15px;\n margin: 20px 0 28px;\n border-radius: var(--primary-btn-border-radius);\n font-weight: 400;\n font-size: 12px;\n line-height: 23px;\n text-align: center;\n color: var(--secondary-text-color);\n background: var(--tag-background-color);\n opacity: 1;\n}\n.set-viery-container .back {\n display: flex;\n align-items: center;\n margin-top: 90px;\n font-weight: 400;\n font-size: 16px;\n line-height: 19px;\n color: var(--accent-color);\n opacity: 1;\n cursor: pointer;\n gap: 8px;\n}\n.set-viery-container .back svg {\n position: relative;\n top: -1px;\n color: var(--accent-color);\n}\n.set-viery-container .code-error {\n position: absolute;\n left: calc((100vw - 316px) / 2);\n margin-top: 224px;\n font-weight: 400;\n font-size: 12px;\n color: var(--error-color);\n}\n@media (min-width: 600px) {\n .set-viery-container .code-error {\n left: calc((var(--vw) * 100 - 316px) / 2);\n }\n}\n.set-viery-container .send-again {\n margin-top: 20px;\n border: none !important;\n outline: none !important;\n font-weight: 400;\n font-size: 16px;\n line-height: 19px;\n color: var(--text-color);\n background-color: transparent;\n box-shadow: none;\n}\n.set-viery-container .send-again:hover {\n color: var(--text-color) !important;\n background-color: transparent !important;\n}\n.set-viery-container .send-again:disabled {\n opacity: 0.5;\n}\n";
// src/pages/account/accountVerify/index.tsx
var AccountVerify = (props) => {
const navigate = useCustomNavigate();
const { t } = useTranslation();
const state = props;
const message = useMessage_default();
const { customRouter } = useCustomRouter();
const { themeType, language } = useCustomize();
const { account, pageType, authType, verifyToken, redirectUrl, password } = state;
const [code, setCode] = useState("");
const [interval, setInterval] = useState(1e3);
const [countdown, setCountdown] = useState(60);
const [errorTip, setErrorTip] = useState();
const { authCoreModal } = useAuthCoreModal();
const { userInfo } = useParticleAuth();
const inputRef = useRef(null);
useInterval(() => {
if (countdown > 0) {
const result = countdown - 1;
setCountdown(result);
if (result === 0) {
setInterval(void 0);
}
}
}, interval);
const { run: runGetCode } = useRequest(
async (params) => {
console.log("get code", params);
if (pageType === "bind_login_account" /* BindLoginAccount */) {
params = {
[authType]: account,
cf_turnstile_response: params.cf_turnstile_response
};
return getBindSecurityAccounCaptcha(params).then((res) => {
return res;
});
} else {
return getSecurityAccountCaptcha(params.verifyCodeMethod);
}
},
{
manual: true,
onSuccess: (result, params) => {
if (!interval) {
setCountdown(60);
setInterval(1e3);
}
},
onError: (error) => {
setCountdown(0);
setInterval(void 0);
}
}
);
const { loading: verifyLoading, runAsync: securityAccountsVerifyRequest } = useRequest(getSecurityAccountToken, {
manual: true,
onError: (error) => {
if ((error == null ? void 0 : error.error_code) === ApiError.InvalidCode) {
setErrorTip(t("login.invalid_code"));
} else if ((error == null ? void 0 : error.error_code) === ApiError.ResendCode) {
setErrorTip(t("login.please_send_again"));
} else {
error.message && message.error(error.message);
}
}
});
const { loading: loadBindingLoading, runAsync: loginBindingsAsyncRequest } = useRequest(
async (params) => {
console.log("loginBindingsAsyncRequest", params);
return bindLoginAccount(params).then(async () => {
await syncUserInfo();
});
},
{
manual: true,
onSuccess: (data) => {
message.success(t("new.bind_login_account_success"));
},
onError: (error) => {
var _a;
console.log("loginBindings", error);
let messageValue = error.message;
if ((error == null ? void 0 : error.error_code) === ApiError.InvalidCode) {
setErrorTip(t("login.invalid_code"));
return;
} else if ((error == null ? void 0 : error.error_code) === ApiError.ResendCode) {
setErrorTip(t("login.please_send_again"));
return;
} else if (error.error_code === 20109) {
messageValue = authType == AuthType.email ? t("error.server_email_20109") : t("error.server_phone_20109");
} else {
messageValue = ((_a = error == null ? void 0 : error.extra) == null ? void 0 : _a[0]) || error.message;
}
Modal.error({
title: messageValue,
wrapClassName: "auth-core-modal-error",
getContainer: () => {
return authCoreModal.rootBody;
},
onOk: () => {
var _a2;
(_a2 = inputRef.current) == null ? void 0 : _a2.clear();
if (error.error_code === 20109) {
navigate(-1);
}
}
});
}
}
);
const { loading: resetLoading, run: runResetPaymentPassword } = useRequest(setPaymentPassword, {
manual: true,
onError: (error) => {
if ((error == null ? void 0 : error.error_code) === ApiError.InvalidCode) {
setErrorTip(t("login.invalid_code"));
} else if ((error == null ? void 0 : error.error_code) === ApiError.ResendCode) {
setErrorTip(t("login.please_send_again"));
}
},
onSuccess: (result, params) => {
syncUserInfo();
const paths = ["account/security", "solana/sign", "evm-chain/sign"];
const indexs = paths.map((path) => {
var _a;
return (_a = customRouter.history) == null ? void 0 : _a.findIndex((item) => item.path === path);
});
const index = indexs.indexOf(Math.max(...indexs));
navigate(paths[index], { replace: true, back: true });
}
});
const { loading: deleteLoginAccountLoading, run: deleteLoginAccount } = useRequest(
() => new Promise((resolve, reject) => {
}),
{
manual: true,
onSuccess: (result) => {
}
}
);
const verifyCodeMethod = useMemo(() => {
return (account == null ? void 0 : account.includes("@")) ? AuthType.email : AuthType.phone;
}, [account]);
useEffect(() => {
requestVerifyCode();
}, [account]);
const requestVerifyCode = () => {
setErrorTip("");
if (pageType === "bind_login_account" /* BindLoginAccount */ && authType === AuthType.phone) {
getCloudflareTurnstileResponse({
theme: themeType,
language,
getContainer: () => {
return authCoreModal.rootBody;
}
}).then((token) => {
runGetCode({
verify_code_method: verifyCodeMethod,
cf_turnstile_response: token
});
}).catch(() => {
message.error(t("error.server_20112"));
navigate(-1);
});
} else {
runGetCode({
verifyCodeMethod
});
}
};
const onCodeInputChange = (code2) => {
setErrorTip("");
setCode(code2);
if (code2.length === 6) {
throttleConfirmCode(code2);
}
};
const throttleConfirmCode = useCallback(
throttle(
(code2) => {
confirmCode(code2);
},
1e3,
{
leading: true,
trailing: false
}
),
[]
);
const resetPassword = (codeValue) => {
runResetPaymentPassword({
password,
verifyCodeMethod,
code: codeValue || code
});
};
const confirmCode = (code2 = "") => {
console.log("pageType", pageType);
if (errorTip) {
console.log("errorTip", errorTip);
return;
}
let data = { code: code2 };
if (pageType === "reset_payment_password" /* ResetPaymentPassword */) {
resetPassword(code2);
} else if (pageType == "verify_security_account_set_security_account" /* VerifySecurityAccount_SetSecurityAccount */) {
securityAccountsVerifyRequest({
verifyCodeMethod,
code: code2
}).then((verifyToken2) => {
navigate("/account/bind", {
replace: true,
state: {
accountType: authType,
verifyToken: verifyToken2,
redirectUrl
}
});
});
} else if (pageType === "verify_security_account_bind_login_account" /* VerifySecurityAccount_BindLoginAccount */) {
securityAccountsVerifyRequest({
verifyCodeMethod,
code: code2
}).then((verifyToken2) => {
const accountList = getAccountList({
userInfo,
t
});
const { id, value } = accountList.find((item) => item.type === authType) || {};
if (authType === AuthType.phone || authType === AuthType.email || value || id) {
navigate("/login-account/bind", {
state: {
authType,
verifyToken: verifyToken2
},
replace: true
});
} else {
console.log("\u7ED1\u5B9A\u7B2C\u4E09\u65B9 \u9875\u9762\u8DF3\u8F6C");
const appState = base64url.encode(JSON.stringify({ verifyToken: verifyToken2, purpose: "bindLoginAccount" }));
thirdpartyAuth({
authType,
appState,
prompt: "select_account"
}).catch((error) => {
message.error((error == null ? void 0 : error.message) || error);
});
}
});
} else if (pageType === "bind_login_account" /* BindLoginAccount */) {
data = { ...data, security_account_verify_token: verifyToken, [authType]: account };
loginBindingsAsyncRequest(data).then((res) => {
navigate(-2);
});
} else if (pageType === "unbind_login_account" /* UnbindLoginAccount */) {
}
};
const formatDisplayAccount = () => {
if (account.includes("@")) {
return displayEmail(account);
} else {
return displayPhone(account);
}
};
useEffect(() => {
var _a;
const elements = document.getElementsByClassName("react-input-code");
const contextmenuEvent = (e) => e.preventDefault();
(_a = elements[0]) == null ? void 0 : _a.addEventListener("contextmenu", contextmenuEvent);
return () => {
var _a2;
(_a2 = elements[0]) == null ? void 0 : _a2.removeEventListener("contextmenu", contextmenuEvent);
};
}, []);
const handleCodeInputFocus = () => {
var _a;
const elements = document.getElementsByClassName("input-code-item");
(_a = elements[Math.min(code.length, 5)]) == null ? void 0 : _a.focus();
};
return /* @__PURE__ */ React.createElement("div", { className: "set-viery-container" }, /* @__PURE__ */ React.createElement("style", null, accountVerify_default), /* @__PURE__ */ React.createElement("div", { className: "account-header" }, /* @__PURE__ */ React.createElement(
svg_icon_default,
{
className: "icon-navigation-back",
name: "circle_back",
onClick: () => {
navigate(-1);
}
}
)), /* @__PURE__ */ React.createElement("h2", { className: "set-email-title" }, t("account.enter_code")), /* @__PURE__ */ React.createElement("p", { className: "set-email-desc-2" }, formatDisplayAccount()), /* @__PURE__ */ React.createElement("div", { onClick: handleCodeInputFocus }, /* @__PURE__ */ React.createElement(
react_auth_code_input_default,
{
containerClassName: "react-input-code",
inputClassName: "input-code-item",
allowedCharacters: "numeric",
length: 6,
ref: inputRef,
placeholder: " ",
onChange: onCodeInputChange
}
)), errorTip && /* @__PURE__ */ React.createElement("div", { className: "code-error" }, errorTip), /* @__PURE__ */ React.createElement(
Button,
{
className: "account-submit-btn",
loading: resetLoading || verifyLoading || loadBindingLoading || deleteLoginAccountLoading,
onClick: () => {
setTimeout(() => {
confirmCode(code);
});
},
disabled: code.length !== 6
},
t("common.confirm")
), /* @__PURE__ */ React.createElement(Button, { className: "send-again", onClick: requestVerifyCode, disabled: countdown > 0 }, countdown > 0 ? `${t("login.send_again")} (${countdown}s)` : t("login.send_again")), /* @__PURE__ */ React.createElement(
"div",
{
className: "back",
onClick: () => {
navigate(-1);
}
},
/* @__PURE__ */ React.createElement(svg_icon_default, { className: "arrow1-icon", name: "arrow1_icon" }),
/* @__PURE__ */ React.createElement("span", null, t("login.back"))
), /* @__PURE__ */ React.createElement(power_footer_default, null));
};
var accountVerify_default2 = AccountVerify;
export {
accountVerify_default2 as default
};
//# sourceMappingURL=accountVerify-7QQUTF43.js.map