@particle-network/authkit
Version:
Auth Core provides MPC (Multi-Party Computation)-based threshold signatures.
284 lines (277 loc) • 21.8 kB
JavaScript
"use client";
import {
telegram_icon_default
} from "./chunk-7VE7S7BM.mjs";
import {
header_default
} from "./chunk-DARAQXIQ.mjs";
import {
svg_icon_default
} from "./chunk-4JO427F5.mjs";
import {
power_footer_default
} from "./chunk-5I7YWW7H.mjs";
import {
apple_icon_default,
circle_close_default2 as circle_close_default,
discord_icon_default,
displayEmail,
displayPhone,
email_icon_default,
facebook_icon_default,
github_icon_default,
google_icon_default,
jwt_icon_default,
linkedin_icon_default,
microsoft_icon_default,
phone_icon_default,
shortString,
twitch_icon_default,
twitter_icon_default,
useAuthCoreModal,
useCustomNavigate,
useMessage_default,
useModalOptions,
useParticleAuth,
useTranslation,
useUserInfo
} from "./chunk-PD7RGPWB.mjs";
import "./chunk-55PCA22M.mjs";
// src/pages/account/security/index.tsx
import {
AuthType,
hasMasterPassword as checkHasMasterPassword,
deletePaymentPassword,
getLatestAuthType,
syncUserInfo
} from "@particle-network/auth-core";
import React2, { useEffect, useMemo, useState } from "react";
// src/pages/account/bindSecurityAccountPrompt/index.tsx
import { Button, Modal } from "antd";
import React from "react";
// src/pages/account/bindSecurityAccountPrompt/index.less
var bindSecurityAccountPrompt_default = ".bind-security-account-prompt .ant-modal-content {\n padding: 18px;\n}\n.bind-security-account-prompt .bind-hint-content {\n margin: 30px 0;\n font-weight: 500;\n font-size: 18px;\n text-align: center;\n color: var(--text-color);\n}\n.bind-security-account-prompt .prompt-bottom-btn-box {\n display: flex;\n gap: 16px;\n}\n";
// src/pages/account/bindSecurityAccountPrompt/index.tsx
var BindSecurityAccountPrompt = (prop) => {
const { visible, setVisible, onBind } = prop;
const { t } = useTranslation();
const { authCoreModal } = useAuthCoreModal();
const onClose = () => {
setVisible(false);
};
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("style", null, bindSecurityAccountPrompt_default), /* @__PURE__ */ React.createElement(
Modal,
{
className: "bind-security-account-prompt",
open: visible,
maskClosable: false,
onCancel: onClose,
closeIcon: /* @__PURE__ */ React.createElement(circle_close_default, null),
centered: true,
getContainer: () => {
return authCoreModal.rootBody;
}
},
/* @__PURE__ */ React.createElement("div", { className: "bind-hint-content" }, t("account.security_account_bind_hint")),
/* @__PURE__ */ React.createElement("div", { className: "prompt-bottom-btn-box" }, /* @__PURE__ */ React.createElement(Button, { className: "primary-antd-btn secondary particle-cancel-button", onClick: onClose }, t("common.cancel")), /* @__PURE__ */ React.createElement(
Button,
{
className: "primary-antd-btn",
onClick: () => {
setVisible(false);
onBind();
}
},
t("common.bind")
))
));
};
var bindSecurityAccountPrompt_default2 = BindSecurityAccountPrompt;
// src/pages/account/security/index.less
var security_default = ".account-and-security {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n box-sizing: border-box;\n height: 100%;\n overflow: hidden;\n}\n.account-and-security .scroll-content {\n display: flex;\n flex: 1;\n flex-direction: column;\n align-items: center;\n width: 100%;\n padding-bottom: 0;\n overflow-y: auto;\n}\n.account-and-security .scroll-content .category-title {\n align-self: flex-start;\n margin-top: 8px;\n margin-left: calc(5% + 12px);\n font-weight: bold;\n font-size: 14px;\n line-height: 16px;\n color: var(--text-color);\n}\n.account-and-security .hover {\n cursor: pointer;\n}\n.account-and-security .hover:hover {\n opacity: var(--hover-opacity);\n}\n.account-and-security .label-item-switch {\n box-shadow: none !important;\n transform: scale(0.98);\n}\n.account-and-security .label-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n margin-top: 20px;\n}\n.account-and-security .label-item .arrow-right-icon {\n color: var(--text-color);\n}\n.account-and-security .label-item .arrow-right-icon svg {\n width: 11px;\n height: 11px;\n}\n.account-and-security .label-item .label-item-name {\n font-weight: 400;\n font-size: 14px;\n line-height: 16px;\n color: var(--text-color);\n}\n.account-and-security .label-item .label-item-btn {\n min-width: 44px;\n height: 22px;\n padding: 0 13px;\n border-radius: var(--primary-btn-border-radius);\n font-weight: 500;\n font-size: 14px;\n line-height: 22px;\n text-align: center;\n white-space: nowrap;\n color: var(--primary-btn-color);\n background: var(--primary-btn-background-color);\n opacity: 1;\n cursor: pointer;\n}\n.account-and-security .label-item .label-item-btn:hover {\n opacity: var(--hover-opacity);\n}\n.account-and-security .footer-tips {\n position: absolute;\n bottom: 50px;\n font-weight: 400;\n font-size: 14px;\n line-height: 24px;\n text-align: center;\n color: var(--text-color);\n}\n.account-and-security .title {\n position: sticky;\n z-index: 1;\n top: 0;\n width: 100vw;\n padding-top: 18px;\n font-weight: 500;\n font-size: 18px;\n text-align: center;\n color: var(--text-color);\n background: var(--theme-background-color);\n background-color: var(--bg-color);\n}\n@media (min-width: 600px) {\n .account-and-security .title {\n width: calc(100 * var(--vw));\n }\n}\n.account-and-security .payment-security {\n box-sizing: border-box;\n width: 90%;\n padding: 14px;\n margin-top: 18px;\n margin-bottom: 0;\n border-radius: var(--card-border-radius);\n background-color: var(--card-unclickable-background-color);\n}\n.account-and-security .payment-security h3 {\n margin-bottom: 12px;\n font-weight: bold;\n font-size: 14px;\n line-height: 16px;\n color: var(--text-color);\n}\n.account-and-security .payment-security p {\n box-sizing: border-box;\n padding-right: 20px;\n font-weight: 400;\n font-size: 14px;\n line-height: 18px;\n color: var(--secondary-text-color);\n opacity: 1;\n}\n.account-and-security .authorization-item {\n margin-bottom: 20px;\n}\n.account-and-security .authorization-item .label-item {\n height: 36px;\n margin: 0;\n}\n.account-and-security .master-password-item {\n width: 90%;\n padding: 14px;\n margin-top: 18px;\n border-radius: var(--card-border-radius);\n background-color: var(--card-unclickable-background-color);\n}\n.account-and-security .master-password-item .mp-header {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n}\n.account-and-security .master-password-item .mp-header .mp-title {\n font-weight: bold;\n font-size: 14px;\n line-height: 16px;\n color: var(--text-color);\n}\n.account-and-security .master-password-item .mp-header .mp-learn-more {\n font-weight: 500;\n font-size: 14px;\n line-height: 16px;\n color: var(--accent-color);\n cursor: pointer;\n}\n.account-and-security .master-password-item .mp-content {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n}\n.account-and-security .master-password-item .mp-content .mp-desc {\n flex-shrink: 1;\n box-sizing: border-box;\n font-weight: 400;\n font-size: 14px;\n line-height: 18px;\n color: var(--secondary-text-color);\n opacity: 1;\n}\n.account-and-security .master-password-item .mp-content .mp-set {\n flex-shrink: 0;\n min-width: 44px;\n height: 22px;\n padding: 0 13px;\n margin-left: 16px;\n border-radius: var(--primary-btn-border-radius);\n font-weight: 500;\n font-size: 14px;\n line-height: 22px;\n text-align: center;\n white-space: nowrap;\n color: var(--primary-btn-color);\n background: var(--primary-btn-background-color);\n opacity: 1;\n cursor: pointer;\n}\n.account-and-security .master-password-item .mp-content .mp-set:hover {\n opacity: var(--hover-opacity);\n}\n.account-and-security .verification-security {\n box-sizing: border-box;\n width: 90%;\n padding: 14px;\n margin-top: 18px;\n border-radius: var(--card-border-radius);\n background-color: var(--card-unclickable-background-color);\n}\n.account-and-security .verification-security h3 {\n margin-bottom: 12px;\n font-weight: bold;\n font-size: 14px;\n line-height: 16px;\n color: var(--text-color);\n}\n.account-and-security .verification-security p {\n box-sizing: border-box;\n padding-right: 20px;\n font-weight: 400;\n font-size: 14px;\n line-height: 18px;\n color: var(--secondary-text-color);\n opacity: 1;\n}\n.account-and-security .account-box {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n width: 90%;\n padding: 22px 12px;\n margin-top: 18px;\n border-radius: var(--card-border-radius);\n background-color: var(--card-unclickable-background-color);\n}\n.account-and-security .account-box .account-avatar {\n width: 20px;\n height: 20px;\n margin-right: 11px;\n border-radius: 50%;\n background-color: #efefef;\n}\n.account-and-security .account-box .account {\n flex-grow: 1;\n margin-right: 10px;\n overflow: hidden;\n font-size: 14px;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--text-color);\n}\n.account-and-security .account-box .more-account {\n font-weight: 500;\n font-size: 14px;\n text-align: end;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--accent-color);\n cursor: pointer;\n}\n";
// src/pages/account/security/index.tsx
var AccountAndSecurity = () => {
var _a, _b, _c, _d, _e;
const { t } = useTranslation();
const navigate = useCustomNavigate();
const [promptSecurityAccount, setPromptSecurityAccount] = useState(false);
const { setPaymentVerify, showSelectSecurityAccount, setPaymentPassword } = useParticleAuth();
const { userInfo } = useUserInfo();
const { modalOptions } = useModalOptions();
const message = useMessage_default();
const hasMasterPassword = useMemo(() => {
return checkHasMasterPassword();
}, [userInfo]);
const formatId = (id) => {
var _a2;
const provider = (_a2 = userInfo == null ? void 0 : userInfo.thirdparty_user_info) == null ? void 0 : _a2.provider;
if (provider === AuthType.jwt) {
return id == null ? void 0 : id.replace(`${modalOptions.projectId}:`, "");
}
return id;
};
const icons = {
email: email_icon_default,
phone: phone_icon_default,
facebook: facebook_icon_default,
google: google_icon_default,
apple: apple_icon_default,
twitter: twitter_icon_default,
twitterv1: twitter_icon_default,
discord: discord_icon_default,
github: github_icon_default,
twitch: twitch_icon_default,
microsoft: microsoft_icon_default,
linkedin: linkedin_icon_default,
jwt: jwt_icon_default,
telegram: telegram_icon_default
};
const currentAuthType = useMemo(() => {
var _a2;
let authType = getLatestAuthType();
if (!authType) {
authType = ((_a2 = userInfo == null ? void 0 : userInfo.thirdparty_user_info) == null ? void 0 : _a2.provider) || "email";
}
if (authType === "twitterv1") {
authType = AuthType.twitter;
}
return authType;
}, [userInfo]);
const currentAccount = useMemo(() => {
var _a2, _b2, _c2, _d2;
let result = "";
if (currentAuthType && userInfo) {
result = userInfo[`${currentAuthType}`] || userInfo[`${currentAuthType}_email`] || shortString(formatId(userInfo[`${currentAuthType}_id`]));
}
return result || (userInfo == null ? void 0 : userInfo.email) || (userInfo == null ? void 0 : userInfo.phone) || ((_b2 = (_a2 = userInfo == null ? void 0 : userInfo.thirdparty_user_info) == null ? void 0 : _a2.user_info) == null ? void 0 : _b2.email) || shortString(formatId(((_d2 = (_c2 = userInfo == null ? void 0 : userInfo.thirdparty_user_info) == null ? void 0 : _c2.user_info) == null ? void 0 : _d2.id) || ""));
}, [currentAuthType, userInfo]);
const setSecurityAccount = (type) => {
var _a2, _b2, _c2, _d2, _e2, _f;
if (((_a2 = userInfo == null ? void 0 : userInfo.security_account) == null ? void 0 : _a2.email) && !((_b2 = userInfo == null ? void 0 : userInfo.security_account) == null ? void 0 : _b2.phone) || !((_c2 = userInfo == null ? void 0 : userInfo.security_account) == null ? void 0 : _c2.email) && ((_d2 = userInfo == null ? void 0 : userInfo.security_account) == null ? void 0 : _d2.phone)) {
navigate("/account/verify", {
state: {
account: ((_e2 = userInfo == null ? void 0 : userInfo.security_account) == null ? void 0 : _e2.email) || ((_f = userInfo.security_account) == null ? void 0 : _f.phone),
authType: type,
redirectUrl: "/account/security",
pageType: "verify_security_account_set_security_account" /* VerifySecurityAccount_SetSecurityAccount */
}
});
} else {
navigate("/account/bind", {
state: {
accountType: type,
redirectUrl: "/account/security"
}
});
}
};
const chooseVerifyType = () => {
var _a2, _b2, _c2, _d2;
if (((_a2 = userInfo == null ? void 0 : userInfo.security_account) == null ? void 0 : _a2.email) && ((_b2 = userInfo == null ? void 0 : userInfo.security_account) == null ? void 0 : _b2.phone)) {
showSelectSecurityAccount(true);
} else {
navigate("/account/set-password", {
state: {
account: ((_c2 = userInfo == null ? void 0 : userInfo.security_account) == null ? void 0 : _c2.email) || ((_d2 = userInfo == null ? void 0 : userInfo.security_account) == null ? void 0 : _d2.phone)
}
});
}
};
const closePaymentPassword = () => {
setPaymentVerify({
visible: true,
type: "close",
onVerifyCompleted: (password) => {
deletePaymentPassword(password).then((result) => {
message.success(t("account.close_success"));
syncUserInfo();
}).catch((error) => {
error.message && message.error(error.message);
console.log("closePaymentPassword Error", error);
});
}
});
};
const isCanBack = useMemo(() => {
return true;
}, []);
const goBack = () => {
navigate(-1);
};
const changeMasterPassword = () => {
navigate("/account/master-password/change");
};
const setMasterPassword = () => {
navigate("/account/master-password");
};
const aboutMasterPassword = () => {
navigate("/account/master-password/description");
};
const hasSecurityAccount = useMemo(
() => {
var _a2, _b2;
return ((_a2 = userInfo == null ? void 0 : userInfo.security_account) == null ? void 0 : _a2.email) || ((_b2 = userInfo == null ? void 0 : userInfo.security_account) == null ? void 0 : _b2.phone);
},
[(_a = userInfo == null ? void 0 : userInfo.security_account) == null ? void 0 : _a.email, (_b = userInfo == null ? void 0 : userInfo.security_account) == null ? void 0 : _b.phone]
);
useEffect(() => {
syncUserInfo().catch((e) => console.log("syncUserInfo", e));
}, []);
return /* @__PURE__ */ React2.createElement("div", { className: "account-and-security" }, /* @__PURE__ */ React2.createElement("style", null, security_default), isCanBack && /* @__PURE__ */ React2.createElement(header_default, { onBack: goBack }, t("account.account_and_security")), !isCanBack && /* @__PURE__ */ React2.createElement(header_default, null, t("account.account_and_security")), /* @__PURE__ */ React2.createElement("div", { className: "scroll-content" }, /* @__PURE__ */ React2.createElement("div", { className: "category-title" }, t("account.account")), /* @__PURE__ */ React2.createElement("div", { className: "account-box" }, /* @__PURE__ */ React2.createElement("img", { className: "account-avatar", src: icons[currentAuthType] }), /* @__PURE__ */ React2.createElement("div", { className: "account" }, currentAccount), /* @__PURE__ */ React2.createElement(
"div",
{
className: "more-account",
onClick: () => {
if (hasSecurityAccount) {
navigate("/login-account");
} else {
setPromptSecurityAccount(true);
}
}
},
t("account.more_login_account")
)), /* @__PURE__ */ React2.createElement("div", { className: "payment-security authorization-item" }, /* @__PURE__ */ React2.createElement(
"div",
{
className: "label-item hover",
onClick: () => {
navigate("/manageDevices/deviceList");
}
},
/* @__PURE__ */ React2.createElement("div", { className: "label-item-name" }, t("new.authorization")),
/* @__PURE__ */ React2.createElement(svg_icon_default, { className: "arrow-right-icon", name: "arrow_right_icon" })
)), /* @__PURE__ */ React2.createElement("div", { className: "category-title" }, t("account.security")), /* @__PURE__ */ React2.createElement("div", { className: "master-password-item" }, /* @__PURE__ */ React2.createElement("div", { className: "mp-header" }, /* @__PURE__ */ React2.createElement("div", { className: "mp-title" }, t("account.master_password")), /* @__PURE__ */ React2.createElement("div", { className: "mp-learn-more", onClick: aboutMasterPassword }, t("account.learn_more"))), /* @__PURE__ */ React2.createElement("div", { className: "mp-content" }, /* @__PURE__ */ React2.createElement("div", { className: "mp-desc" }, t("account.master_password_tip")), !hasMasterPassword && /* @__PURE__ */ React2.createElement("div", { className: "mp-set", onClick: setMasterPassword }, t("account.set"))), hasMasterPassword && /* @__PURE__ */ React2.createElement("div", { className: "label-item hover", onClick: changeMasterPassword }, /* @__PURE__ */ React2.createElement("div", { className: "label-item-name" }, t("account.change_master_password")), /* @__PURE__ */ React2.createElement(svg_icon_default, { className: "arrow-right-icon", name: "arrow_right_icon" }))), /* @__PURE__ */ React2.createElement("div", { className: "verification-security" }, /* @__PURE__ */ React2.createElement("h3", null, t("account.verification_security")), /* @__PURE__ */ React2.createElement("p", null, t("account.verification_security_tip")), /* @__PURE__ */ React2.createElement("div", { className: "label-item" }, /* @__PURE__ */ React2.createElement("div", { className: "label-item-name" }, t("account.email")), displayEmail(((_c = userInfo == null ? void 0 : userInfo.security_account) == null ? void 0 : _c.email) || "") || /* @__PURE__ */ React2.createElement("div", { className: "label-item-btn", onClick: () => setSecurityAccount("email") }, t("account.set"))), /* @__PURE__ */ React2.createElement("div", { className: "label-item" }, /* @__PURE__ */ React2.createElement("div", { className: "label-item-name" }, t("account.mobile")), displayPhone(((_d = userInfo == null ? void 0 : userInfo.security_account) == null ? void 0 : _d.phone) || "") || /* @__PURE__ */ React2.createElement("div", { className: "label-item-btn", onClick: () => setSecurityAccount("phone") }, t("account.set")))), /* @__PURE__ */ React2.createElement("div", { className: "payment-security" }, /* @__PURE__ */ React2.createElement("h3", null, t("account.payment_security")), /* @__PURE__ */ React2.createElement("p", null, t("account.payment_password_hint")), ((_e = userInfo == null ? void 0 : userInfo.security_account) == null ? void 0 : _e.has_set_payment_password) ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", { className: "label-item hover", onClick: () => navigate("/account/change-password") }, /* @__PURE__ */ React2.createElement("div", { className: "label-item-name" }, t("account.change_payment_password")), /* @__PURE__ */ React2.createElement(svg_icon_default, { className: "arrow-right-icon", name: "arrow_right_icon" })), /* @__PURE__ */ React2.createElement("div", { className: "label-item hover", onClick: chooseVerifyType }, /* @__PURE__ */ React2.createElement("div", { className: "label-item-name" }, t("account.forgot_payment_password")), /* @__PURE__ */ React2.createElement(svg_icon_default, { className: "arrow-right-icon", name: "arrow_right_icon" })), /* @__PURE__ */ React2.createElement("div", { className: "label-item hover", onClick: closePaymentPassword }, /* @__PURE__ */ React2.createElement("div", { className: "label-item-name" }, t("account.close_payment_password")), /* @__PURE__ */ React2.createElement(svg_icon_default, { className: "arrow-right-icon", name: "arrow_right_icon" }))) : /* @__PURE__ */ React2.createElement("div", { className: "label-item" }, /* @__PURE__ */ React2.createElement("div", { className: "label-item-name" }, t("account.payment_password")), /* @__PURE__ */ React2.createElement(
"div",
{
className: "label-item-btn",
onClick: () => {
if (hasSecurityAccount) {
setPaymentPassword();
} else {
setPromptSecurityAccount(true);
}
}
},
t("account.set")
)))), /* @__PURE__ */ React2.createElement(power_footer_default, { className: "footer-box-v2" }), /* @__PURE__ */ React2.createElement(
bindSecurityAccountPrompt_default2,
{
visible: promptSecurityAccount,
setVisible: setPromptSecurityAccount,
onBind: () => {
navigate("/account/bind", {
state: {
accountType: (userInfo == null ? void 0 : userInfo.email) ? "phone" : "email",
showSwitch: true,
redirectUrl: "/account/security"
}
});
}
}
));
};
var security_default2 = AccountAndSecurity;
export {
security_default2 as default
};
//# sourceMappingURL=security-SDVTLDIS.mjs.map