@particle-network/authkit
Version:
Auth Core provides MPC (Multi-Party Computation)-based threshold signatures.
164 lines (159 loc) • 8.22 kB
JavaScript
"use client";
import {
header_default
} from "./chunk-CMOMK7KB.mjs";
import {
svg_icon_default
} from "./chunk-7CCHEXYF.mjs";
import {
power_footer_default
} from "./chunk-LKTXGNTI.mjs";
import {
email_icon_default,
facebook_icon_default,
google_icon_default,
phone_icon_default,
twitter_icon_default,
useCustomNavigate,
useMessage_default,
useParticleAuth,
useTranslation
} from "./chunk-ZXD6ZGNS.mjs";
// src/pages/loginAccount/index.tsx
import { AuthType } from "@particle-network/auth-core";
import { useThrottleFn } from "ahooks";
import { parsePhoneNumber } from "libphonenumber-js/max";
import React, { useMemo } from "react";
// src/pages/loginAccount/index.less
var loginAccount_default = ".login-account-box {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n width: 100%;\n height: 100%;\n overflow: auto;\n color: var(--text-color);\n}\n.login-account-box .login-account-title {\n font-weight: 500;\n font-size: 18px;\n}\n.login-account-box .login-account-description {\n margin: 32px 18px 40px;\n font-weight: 400;\n font-size: 13px;\n color: var(--secondary-text-color);\n}\n.login-account-box .account-list {\n width: 100%;\n padding: 0 18px;\n}\n.login-account-box .account-list .login-account-item {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n width: 100%;\n height: 60px;\n padding: 0 12px 0 14px;\n margin-bottom: 10px;\n border-radius: var(--card-border-radius);\n background: var(--card-unclickable-background-color);\n cursor: pointer;\n}\n.login-account-box .account-list .login-account-item img {\n width: 35px;\n height: 35px;\n border-radius: 50%;\n background-color: white;\n}\n.login-account-box .account-list .login-account-item .login-account-name {\n flex-grow: 1;\n margin-left: 8px;\n font-weight: 500;\n font-size: 14px;\n}\n.login-account-box .account-list .login-account-item .login-account-value {\n flex-grow: 2;\n max-width: 180px;\n margin-right: 8px;\n overflow: hidden;\n text-align: right;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--text-color);\n}\n.login-account-box .account-list .login-account-item .login-account-value[data-no-linked='true'] {\n color: var(--secondary-text-color);\n}\n.login-account-box .account-list .login-account-item:hover {\n opacity: var(--hover-opacity);\n}\n.login-account-box .account-list .arrow-right-icon {\n color: var(--text-color);\n}\n.login-account-box .account-list .arrow-right-icon svg {\n width: 12px;\n height: 12px;\n}\n.login-account-box .footer-box {\n position: absolute;\n bottom: 0;\n}\n";
// src/pages/loginAccount/index.tsx
var getAccountList = (params) => {
const { userInfo, t } = params;
const list = [
{
type: AuthType.phone,
icon: phone_icon_default,
name: t("account.mobile"),
value: userInfo.phone,
id: void 0,
isOriginal: false
},
{
type: AuthType.email,
icon: email_icon_default,
name: t("account.email"),
value: userInfo.email,
id: void 0,
isOriginal: false
},
{
type: AuthType.google,
icon: google_icon_default,
name: t("login.google"),
value: userInfo.google_email,
id: userInfo.google_id,
isOriginal: false
},
{
type: AuthType.facebook,
icon: facebook_icon_default,
name: t("login.facebook"),
value: userInfo.facebook_email,
id: userInfo.facebook_id,
isOriginal: false
},
{
type: AuthType.twitter,
icon: twitter_icon_default,
name: t("login.twitter"),
value: userInfo.twitter_email,
id: userInfo.twitter_id,
isOriginal: false
}
];
return list;
};
var encryptValue = (value) => {
var _a, _b, _c, _d;
let result = value == null ? void 0 : value.replace(" ", "");
if (!result) {
return result;
} else if ((_a = result == null ? void 0 : result.includes) == null ? void 0 : _a.call(result, "@")) {
result = `${result.split("@")[0].substr(0, 3)}****@${result.split("@")[1]}`;
} else if ((_b = result == null ? void 0 : result.includes) == null ? void 0 : _b.call(result, "+")) {
const phoneNumber = parsePhoneNumber(result);
const nationalNumber = phoneNumber.nationalNumber.toString();
const countryCode = phoneNumber.countryCallingCode;
result = `+${countryCode} ${(_c = nationalNumber == null ? void 0 : nationalNumber.substr) == null ? void 0 : _c.call(nationalNumber, 0, 3)}****${(_d = nationalNumber == null ? void 0 : nationalNumber.substr) == null ? void 0 : _d.call(nationalNumber, -4)}`;
} else if (result) {
result = `${result.substr(0, 3)}****${result.substr(-4)}`;
}
return result;
};
var selectedAuthType;
var LoginAccount = () => {
const { t } = useTranslation();
const navigate = useCustomNavigate();
const { userInfo, showSelectSecurityAccount } = useParticleAuth();
const message = useMessage_default();
const { run: toAccountVerify } = useThrottleFn(
(params) => {
navigate("/account/verify", {
state: {
account: params.account,
authType: selectedAuthType,
pageType: "verify_security_account_bind_login_account" /* VerifySecurityAccount_BindLoginAccount */
}
});
},
{ wait: 3e3 }
);
const accountList = useMemo(() => {
return getAccountList({ userInfo, t });
}, [userInfo, t]);
const toLoginAccountBind = (item) => {
var _a, _b, _c, _d, _e, _f;
if (item.value || item.id) {
navigate("/login-account/bind", {
state: {
authType: item.type
}
});
} else if (!((_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)) {
message.error("Please bind security account first.");
} else if (((_c = userInfo == null ? void 0 : userInfo.security_account) == null ? void 0 : _c.email) && ((_d = userInfo == null ? void 0 : userInfo.security_account) == null ? void 0 : _d.phone)) {
showSelectSecurityAccount(true, {
authType: selectedAuthType,
pageType: "verify_security_account_bind_login_account" /* VerifySecurityAccount_BindLoginAccount */
});
} else {
toAccountVerify({
account: ((_e = userInfo == null ? void 0 : userInfo.security_account) == null ? void 0 : _e.email) || ((_f = userInfo == null ? void 0 : userInfo.security_account) == null ? void 0 : _f.phone)
});
}
};
return /* @__PURE__ */ React.createElement("div", { className: "login-account-box" }, /* @__PURE__ */ React.createElement("style", null, loginAccount_default), /* @__PURE__ */ React.createElement(header_default, { displayBackBtn: true }, t("account.login_account")), /* @__PURE__ */ React.createElement("div", { className: "scroll-content" }, /* @__PURE__ */ React.createElement("div", { className: "login-account-description" }, t("account.login_account_hint")), /* @__PURE__ */ React.createElement("div", { className: "account-list" }, accountList == null ? void 0 : accountList.map((item, index) => {
return /* @__PURE__ */ React.createElement(
"div",
{
className: "login-account-item",
onClick: () => {
selectedAuthType = item.type;
toLoginAccountBind(item);
},
key: index
},
/* @__PURE__ */ React.createElement("img", { src: item.icon }),
/* @__PURE__ */ React.createElement("div", { className: "login-account-name" }, item.name),
/* @__PURE__ */ React.createElement("div", { className: "login-account-value", "data-no-linked": item.value || item.id ? false : true }, encryptValue(item.value || item.id) || t("account.not_linked")),
/* @__PURE__ */ React.createElement(svg_icon_default, { className: "arrow-right-icon", name: "arrow_right_icon" })
);
}))), /* @__PURE__ */ React.createElement(power_footer_default, { className: "footer-box-v2" }));
};
var loginAccount_default2 = LoginAccount;
export {
getAccountList,
encryptValue,
loginAccount_default2 as loginAccount_default
};
//# sourceMappingURL=chunk-6AH2NTPR.mjs.map