@particle-network/authkit
Version:
Auth Core provides MPC (Multi-Party Computation)-based threshold signatures.
847 lines (835 loc) • 51.1 kB
JavaScript
"use client";
import {
defaultCountriesData
} from "./chunk-RV3XNWPJ.mjs";
import {
react_auth_code_input_default
} from "./chunk-6DEYJVRU.mjs";
import {
telegram_icon_default
} from "./chunk-7VE7S7BM.mjs";
import {
svg_icon_default
} from "./chunk-C3QCRACD.mjs";
import {
power_footer_default
} from "./chunk-PPCDDBBD.mjs";
import {
EmailRegExp,
apple_icon_default,
discord_icon_default,
email_icon_default,
facebook_icon_default,
github_icon_default,
google_icon_default,
isPhoneValid,
isValidE164PhoneNumber,
jwt_icon_default,
linkedin_icon_default,
microsoft_icon_default,
passkeys_icon_default,
phone_icon_default,
twitch_icon_default,
twitter_icon_default,
useAuthCoreModal,
useCustomize,
useLogin_default,
useMessage_default,
useParticleAuth,
useTranslation
} from "./chunk-H5PUG6U3.mjs";
import "./chunk-55PCA22M.mjs";
// src/pages/login/index.tsx
import { LoadingOutlined } from "@ant-design/icons";
import {
AuthType as AuthType2,
getConnectCaptcha,
isNullish,
requireNotNullish
} from "@particle-network/auth-core";
import { Image } from "antd";
import React5, { useEffect as useEffect4, useMemo as useMemo3, useState as useState5 } from "react";
// src/common/images/logo.png
var logo_default = "data:image/png;base64,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";
// src/pages/login/components/captcha-input.tsx
import { ApiError, getCloudflareTurnstileResponse, isApiError } from "@particle-network/auth-core";
import { useInterval } from "ahooks";
import { Button } from "antd";
import throttle from "lodash/throttle.js";
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
// src/pages/login/components/captcha-input.less
var captcha_input_default = ".captcha-box {\n text-align: center;\n}\n.captcha-box .error-tip {\n position: absolute;\n left: calc((100% - 316px) / 2);\n text-align: left;\n margin-top: 5px;\n font-weight: 400;\n font-size: 12px;\n line-height: 19px;\n color: var(--error-color);\n width: 100%;\n}\n.captcha-box .get-btn {\n width: 316px;\n padding: 0;\n margin-top: 14px;\n border: none;\n font-weight: 400;\n font-size: 16px;\n line-height: 19px;\n color: var(--text-color);\n background-color: transparent !important;\n box-shadow: none;\n}\n.captcha-box .get-btn[disabled] {\n font-weight: 400 !important;\n color: var(--secondary-text-color);\n opacity: 1 !important;\n}\n@media (max-width: 380px) {\n .captcha-box .get-btn {\n width: 90vw;\n }\n}\n@media (min-width: 600px) {\n .captcha-box .get-btn {\n width: calc(90 * var(--vw));\n }\n}\n.captcha-box .submit-btn {\n width: 322px;\n margin-top: 38px;\n}\n.captcha-box .btn-box {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.captcha-box .back-box {\n position: relative;\n left: -4px;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 19px;\n margin-top: 60px;\n margin-bottom: 30px;\n font-weight: 400;\n font-size: 16px;\n line-height: 19px;\n color: var(--accent-color);\n cursor: pointer;\n gap: 8px;\n}\n.captcha-box .back-box img {\n width: 9.42px;\n margin-right: 7px;\n}\n.captcha-box .back-box svg {\n position: relative;\n top: -1px;\n color: var(--accent-color);\n}\n.captcha-box .captcha-title {\n position: absolute;\n top: 14px;\n left: 0;\n right: 0;\n font-weight: 600;\n font-size: 18px;\n text-align: center;\n color: var(--text-color);\n}\n.captcha-box .captcha-form {\n padding-top: 44px;\n max-width: 316px;\n margin: auto;\n}\n.captcha-box .captcha-form .input-code-content {\n position: relative;\n}\n";
// src/pages/login/components/captcha-input.tsx
function CaptchaInput(props) {
const { sendCaptcha, setShowInputCaptcha, account, loginWithAccount, chain } = props;
const [loading, setLoading] = useState(false);
const { themeType, language } = useCustomize();
const [codeVal, setCodeVal] = useState("");
const { loginHandler } = useLogin_default();
const [noInput, setNoInput] = useState(false);
const [wrongInput, setWrongInput] = useState(false);
const [invalidInput, setInvalidInput] = useState(false);
const [resendTip, setResendTip] = useState(false);
const [confirmBtn, setConfirmBtn] = useState(false);
const { authCoreModal } = useParticleAuth();
const { t } = useTranslation();
const message = useMessage_default();
const codeInput = useRef(null);
const codePattern = /^\d{6}$/;
const [interval, setInterval] = useState(1e3);
const [countdown, setCountdown] = useState(60);
useInterval(() => {
if (countdown > 0) {
const result = countdown - 1;
setCountdown(result);
if (result === 0) {
setInterval(void 0);
}
}
}, interval);
const startCountdown = () => {
setCountdown(60);
setInterval(1e3);
};
const getCaptcha = () => {
if (account.includes("@")) {
sendCaptchaImpl({ email: account });
} else {
getCloudflareTurnstileResponse({
theme: themeType,
language,
getContainer: () => {
return authCoreModal.rootBody;
}
}).then((token) => {
sendCaptchaImpl({
phone: account,
cf_turnstile_response: token
});
}).catch(() => {
message.error(t("error.server_20112"));
});
}
};
const sendCaptchaImpl = (param) => {
sendCaptcha(param).then(() => {
console.log("send captcha success");
startCountdown();
setConfirmBtn(false);
setResendTip(false);
}).catch(() => {
setCountdown(0);
setInterval(void 0);
});
};
const codeChange = (value) => {
setWrongInput(false);
const code = value;
const patt = /^[0-9]+$/g;
if (code.length === 0) {
setWrongInput(false);
setNoInput(true);
} else {
if (!patt.test(code)) {
setNoInput(false);
setWrongInput(true);
} else {
setNoInput(false);
setWrongInput(false);
}
}
};
const login = (code) => {
setNoInput(false);
setWrongInput(false);
setInvalidInput(false);
code = code || codeVal;
console.log(`code --> ${code}`);
if (noInput || wrongInput) {
return;
}
if (codePattern.test(code)) {
throttleLoginImpl(code);
} else {
if (code.length > 0 && code.length < 6 || !codePattern.test(code)) {
setWrongInput(true);
setNoInput(false);
}
if (code.length === 0) {
setWrongInput(false);
setNoInput(true);
}
}
};
const loginImpl = async (code) => {
if (resendTip) {
return;
}
setLoading(true);
let data;
if (account.includes("@")) {
data = {
code,
email: account,
chain
};
} else {
data = {
code,
phone: account,
chain
};
}
try {
await loginHandler(data, false);
} catch (error) {
handleLoginError(error);
}
};
const handleLoginError = (error) => {
console.log("login error", error);
setLoading(false);
if (isApiError(error)) {
const errorCode = error.error_code;
if (errorCode === ApiError.InvalidCode) {
setInvalidInput(true);
} else if (errorCode === ApiError.ResendCode) {
setResendTip(true);
setConfirmBtn(true);
}
}
};
const onCodeInputChange = (codeArray) => {
codeChange(codeArray);
setCodeVal(codeArray);
setNoInput(false);
setWrongInput(false);
setInvalidInput(false);
setResendTip(false);
if (codePattern.test(codeArray)) {
throttleLoginImpl(codeArray);
}
};
const throttleLoginImpl = useCallback(
throttle(
(code) => {
loginImpl(code);
},
1e3,
{
leading: true,
trailing: false
}
),
[]
);
const handleCodeInputFocus = () => {
var _a;
const elements = document.getElementsByClassName("input-code-item");
(_a = elements[Math.min(codeVal.length, 5)]) == null ? void 0 : _a.focus();
};
const verifyCodeErrorMessage = useMemo(() => {
const error = [
noInput ? t("login.enter_captcha") : "",
wrongInput ? t("login.captcha_input_error") : "",
invalidInput ? t("login.invalid_code") : "",
resendTip ? t("login.please_send_again") : ""
].map((val) => val.trim()).filter((val) => !!val).join(",");
return error.includes(",") ? error + "." : error;
}, [noInput, wrongInput, invalidInput, resendTip, t]);
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);
};
}, []);
return /* @__PURE__ */ React.createElement("div", { className: "captcha-box" }, /* @__PURE__ */ React.createElement("style", null, captcha_input_default), /* @__PURE__ */ React.createElement("div", { className: "captcha-form" }, /* @__PURE__ */ React.createElement("div", { className: "input-code-content" }, /* @__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: codeInput,
placeholder: " ",
onChange: onCodeInputChange
}
)))), /* @__PURE__ */ React.createElement("div", { className: "error-tip" }, verifyCodeErrorMessage), /* @__PURE__ */ React.createElement("div", { className: "btn-box" }, /* @__PURE__ */ React.createElement(
Button,
{
type: "primary",
htmlType: "submit",
className: "primary-antd-btn submit-btn",
onClick: () => login(),
disabled: confirmBtn,
loading
},
t("common.confirm")
), /* @__PURE__ */ React.createElement(Button, { className: "get-btn", disabled: countdown > 0, type: "link", onClick: getCaptcha }, t("login.send_again"), " ", countdown > 0 ? `(${countdown}s)` : ""), !loginWithAccount && /* @__PURE__ */ React.createElement(
"div",
{
className: "back-box",
onClick: () => {
setShowInputCaptcha(false);
}
},
/* @__PURE__ */ React.createElement(svg_icon_default, { className: "arrow1-icon", name: "arrow1_icon" }),
/* @__PURE__ */ React.createElement("span", null, t("login.back"))
)));
}
var captcha_input_default2 = CaptchaInput;
// src/pages/login/components/email-login.tsx
import { Button as Button2, Form, Input } from "antd";
import React2, { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
// src/pages/login/components/login.less
var login_default = ".login-style .form-item {\n margin-bottom: 0;\n}\n.login-header0 {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 26px;\n margin-top: 26px;\n font-weight: 600;\n font-size: 22px;\n line-height: 22px;\n text-align: center;\n color: var(--text-color);\n}\n.login-header0 img {\n position: absolute;\n left: 0;\n margin-left: 16px;\n}\n@media (max-height: 610px) {\n .login-header0 {\n margin-top: 18px;\n }\n}\n.login-des {\n width: 100%;\n height: 23px;\n margin-top: 7px;\n font-weight: 400;\n font-size: 16px;\n line-height: 19px;\n text-align: center;\n color: var(--secondary-text-color);\n}\n.form-box {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n padding-top: 44px;\n}\n.form-box .ant-form-item-explain-error {\n position: absolute;\n}\n.form-box .form-item {\n display: flex;\n flex-direction: column;\n width: 100%;\n text-align: center;\n}\n.form-box .email-box {\n width: 316px;\n max-width: 90vw;\n height: 47px;\n line-height: 47px;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: var(--input-background-color);\n border-radius: var(--primary-btn-border-radius);\n font-size: 15px;\n border: 1px solid var(--input-background-color);\n overflow: hidden;\n}\n@media (min-width: 600px) {\n .form-box .email-box {\n max-width: calc(90 * var(--vw));\n }\n}\n.form-box .email-box[data-focus='true'] {\n border: 1px solid var(--accent-color);\n}\n.form-box .email-box .email-input {\n width: 316px;\n max-width: 90vw;\n height: 47px;\n padding: 4px 13px;\n border: 1px solid var(--input-background-color);\n border-radius: var(--primary-btn-border-radius);\n font-size: 15px;\n line-height: 47px;\n color: var(--text-color);\n background-color: var(--input-background-color);\n}\n@media (min-width: 600px) {\n .form-box .email-box .email-input {\n max-width: calc(90 * var(--vw));\n }\n}\n.form-box .phone-box {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 316px;\n max-width: 90vw;\n height: 47px;\n border: 1px solid var(--input-background-color);\n border-radius: var(--primary-btn-border-radius);\n overflow: hidden;\n font-size: 15px;\n line-height: 47px;\n background-color: var(--input-background-color);\n}\n.form-box .phone-box[data-focus='true'] {\n border: 1px solid var(--accent-color);\n}\n.form-box .phone-box .phone-select {\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n width: 60px;\n height: 47px;\n padding-left: 8px;\n font-weight: 500;\n font-size: 15px;\n color: var(--text-color);\n cursor: pointer;\n border-right: 1px solid var(--input-border-color);\n}\n.form-box .phone-box .phone-select .down-more {\n margin-left: 8px;\n font-size: 10px;\n}\n.form-box .phone-box .country-code {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n height: 47px;\n margin: 0 8px;\n line-height: 47px;\n color: var(--text-color);\n}\n.form-box .phone-box .phone-input {\n flex-shrink: 1;\n width: 100%;\n height: 47px;\n padding: 0;\n border: none !important;\n border-radius: 0;\n outline: none;\n font-size: 15px;\n line-height: 47px;\n color: var(--text-color);\n background-color: transparent;\n box-shadow: none;\n}\n.form-box .phone-box .phone-input:focus {\n border: none !important;\n box-shadow: none !important;\n}\n@media (min-width: 600px) {\n .form-box .phone-box {\n max-width: calc(90 * var(--vw));\n }\n}\n.form-box .phone-input,\n.form-box .email-input {\n height: 37px;\n line-height: 37px;\n width: 85%;\n overflow: hidden;\n border-color: var(--input-background-color) !important;\n}\n.form-box .phone-input:-webkit-autofill,\n.form-box .email-input:-webkit-autofill,\n.form-box .phone-input:-webkit-autofill:hover,\n.form-box .email-input:-webkit-autofill:hover,\n.form-box .phone-input:-webkit-autofill:focus,\n.form-box .email-input:-webkit-autofill:focus {\n -webkit-text-fill-color: var(--text-color) !important;\n -webkit-box-shadow: 0 0 0 150px var(--input-background-color) inset !important;\n}\n.form-box .phone-input::-ms-reveal,\n.form-box .email-input::-ms-reveal,\n.form-box .phone-input::-ms-clear,\n.form-box .email-input::-ms-clear {\n display: none;\n}\n.form-box .phone-input:focus,\n.form-box .email-input:focus {\n color: var(--text-color, #000) !important;\n border-color: var(--input-background-color) !important;\n}\n.form-box .error-tip {\n position: absolute;\n margin-top: 51px;\n font-weight: 400;\n font-size: 12px;\n line-height: 19px;\n color: var(--error-color);\n width: 316px;\n left: calc((100% - 316px) / 2);\n text-align: left;\n}\n.form-box .submit-btn {\n width: 316px;\n max-width: 90vw;\n margin-top: 35px;\n}\n@media (min-width: 600px) {\n .form-box .submit-btn {\n max-width: calc(90 * var(--vw));\n }\n}\n@media (max-height: 610px) {\n .form-box {\n padding-top: 20px;\n }\n}\n.login-or {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 13px;\n margin: 35px 0;\n font-weight: 500;\n font-size: 11px;\n line-height: 22px;\n white-space: nowrap;\n color: var(--secondary-text-color);\n gap: 15px;\n}\n.login-or .or-line {\n width: 143px;\n border-top: 1px solid var(--icon-border-color);\n}\n@media (max-height: 610px) {\n .login-or {\n margin: 18px 0;\n }\n}\n.change-login-mode {\n display: flex;\n justify-content: center;\n width: 100%;\n}\n.change-login-mode .change-social {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n width: 315px;\n height: 106px;\n}\n.change-login-mode .change-social .first-way {\n margin: 5px 10px;\n}\n.change-login-mode .change-social img {\n width: 43px;\n height: 43px;\n margin: 5px 10px;\n border: 1px solid var(--icon-border-color);\n border-radius: 50%;\n background: #fff;\n cursor: pointer;\n}\n.change-login-mode .change-social img:hover {\n opacity: var(--hover-opacity);\n}\n.change-login-mode .change-social .collapse-login-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 43px;\n height: 43px;\n margin: 5px 10px;\n border-radius: 50%;\n font-size: 24px;\n color: grey;\n transform: rotate(180deg);\n cursor: pointer;\n}\n.change-login-mode .change-social .collapse-login-icon[data-is-collapse='false'] {\n transform: rotate(0deg);\n}\n.change-login-mode .change-social .collapse-login-icon svg {\n width: 43px;\n height: 43px;\n color: #b4b6c6;\n}\n.change-login-mode .change-social .collapse-login-icon svg circle {\n fill: var(--bg-color-2);\n}\n.change-login-mode .change-social .collapse-login-icon:hover {\n opacity: var(--hover-opacity);\n}\n.select-country {\n position: absolute;\n z-index: 1000;\n width: 316px;\n max-width: 90vw;\n height: 291px;\n margin-top: 96px;\n left: 50%;\n transform: translateX(-50%);\n margin-left: 0;\n border: 0;\n border: 1px solid var(--input-background-color);\n border-radius: var(--card-border-radius);\n overflow: auto;\n overflow-x: hidden;\n background-color: var(--input-background-color);\n}\n.select-country::-webkit-scrollbar {\n display: none;\n width: 0;\n}\n.select-country .country-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n height: 46px;\n border-bottom: 1px solid var(--card-unclickable-background-color);\n cursor: pointer;\n}\n.select-country .country-item:hover {\n background-color: var(--card-unclickable-background-color);\n}\n.select-country .country-item .country-box {\n display: flex;\n align-items: center;\n}\n.select-country .country-item .country-name {\n font-weight: 500;\n font-size: 14px;\n color: var(--text-color);\n}\n.select-country .country-item .country-code {\n margin-right: 15px;\n font-weight: 500;\n font-size: 14px;\n color: var(--secondary-text-color);\n}\n.select-country .country-item .country-flag {\n margin-right: 10px;\n margin-left: 15px;\n}\n@media (min-width: 600px) {\n .select-country {\n max-width: calc(90 * var(--vw));\n }\n}\n";
// src/pages/login/components/email-login.tsx
function EmailLogin(props) {
const { t } = useTranslation();
const { sendCaptcha, setShowInputCaptcha, account, supportAuthTypes, loginWithAccount } = props;
const [form] = Form.useForm();
const [errorTip, setErrorTip] = useState2(false);
const [noInputTip, setNoInputTip] = useState2(false);
const [loading, setLoading] = useState2(false);
const emailBoxRef = useRef2(null);
const emailInput = useRef2(null);
useEffect2(() => {
if (loginWithAccount && account && sendCaptcha) {
form.setFieldsValue({
email: account
});
getCaptcha(account);
}
}, []);
const getCaptcha = (email) => {
emailInput.current.focus();
if (!email) {
setNoInputTip(true);
setErrorTip(false);
} else if (!EmailRegExp.test(email)) {
setErrorTip(true);
} else {
sendCaptchaImpl(email);
}
};
const sendCaptchaImpl = (email) => {
setLoading(true);
sendCaptcha({
email
}).then((result) => {
setShowInputCaptcha(result);
}).catch(() => {
setLoading(false);
});
};
return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("style", null, login_default), /* @__PURE__ */ React2.createElement("div", { className: "login-style" }, /* @__PURE__ */ React2.createElement(
Form,
{
name: "login-form",
onFinish: (values) => getCaptcha(values.email.trim()),
className: "form-box",
requiredMark: false,
form,
labelCol: {
style: { textAlign: "left" }
}
},
/* @__PURE__ */ React2.createElement("div", { className: "email-box", ref: emailBoxRef }, /* @__PURE__ */ React2.createElement(Form.Item, { name: "email", label: "", className: "form-item", initialValue: (account == null ? void 0 : account.includes("@")) ? account : "" }, /* @__PURE__ */ React2.createElement(
Input,
{
className: "email-input",
placeholder: t("login.email_address") || void 0,
ref: emailInput,
onChange: () => {
setErrorTip(false);
setNoInputTip(false);
},
readOnly: loginWithAccount,
onFocus: () => {
emailBoxRef.current.setAttribute("data-focus", "true");
},
onBlur: () => {
emailBoxRef.current.removeAttribute("data-focus");
}
}
))),
/* @__PURE__ */ React2.createElement("div", { className: "error-tip" }, errorTip && t("login.email_format_error")),
/* @__PURE__ */ React2.createElement("div", { className: "error-tip" }, noInputTip && t("login.input_email_holder")),
/* @__PURE__ */ React2.createElement(Form.Item, { className: "form-item" }, /* @__PURE__ */ React2.createElement(Button2, { type: "primary", htmlType: "submit", className: "primary-antd-btn submit-btn", loading }, t("login.get_captcha"))),
!loginWithAccount && supportAuthTypes.length > 0 && /* @__PURE__ */ React2.createElement("div", { className: "login-or" }, /* @__PURE__ */ React2.createElement("div", { className: "or-line" }), t("login.or"), /* @__PURE__ */ React2.createElement("div", { className: "or-line" }))
)));
}
var email_login_default = EmailLogin;
// src/pages/login/components/phone-login.tsx
import { DownOutlined } from "@ant-design/icons";
import { getCloudflareTurnstileResponse as getCloudflareTurnstileResponse2 } from "@particle-network/auth-core";
import { Button as Button3, Form as Form2, Input as Input2 } from "antd";
import getUnicodeFlagIcon from "country-flag-icons/unicode";
import { isValidPhoneNumber, parsePhoneNumber, parsePhoneNumberWithError } from "libphonenumber-js/max";
import React3, { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
function PhoneLogin(props) {
const { t } = useTranslation();
const { sendCaptcha, setShowInputCaptcha, account, supportAuthTypes, loginWithAccount } = props;
const [selectVisible, setSelectVisible] = useState3(false);
const { themeType, language } = useCustomize();
const [countryData, setCountryData] = useState3(["United States", "us", "1"]);
const [form] = Form2.useForm();
const clickRef = useRef3();
const { authCoreModal } = useAuthCoreModal();
const [errorTip, setErrorTip] = useState3(false);
const [noInputTip, setNoInputTip] = useState3(false);
const [loading, setLoading] = useState3(false);
const message = useMessage_default();
const phoneInput = useRef3(null);
const [phoneValue, setPhoneValue] = useState3();
useEffect3(() => {
if (selectVisible) {
document.addEventListener("click", clickCallback, true);
return () => {
document.removeEventListener("click", clickCallback, true);
};
}
}, [selectVisible]);
useEffect3(() => {
let currentCountry;
if (account && !account.includes("@")) {
if (isValidPhoneNumber(account)) {
const phoneNumber = parsePhoneNumber(account);
const countryCode = phoneNumber.countryCallingCode.toString();
const regionCode = phoneNumber.country;
form.setFieldsValue({
phone: phoneNumber.nationalNumber
});
if (countryCode && regionCode) {
const items = defaultCountriesData.filter(
(item) => item[2].toString() === countryCode && item[1].toLowerCase() === regionCode.toLowerCase()
);
if (items && items.length > 0) {
currentCountry = items[items.length - 1];
}
}
}
}
if (!currentCountry) {
const language2 = navigator.languages && navigator.languages.length ? navigator.languages[0] : navigator.language;
const locales = language2.split("-");
const region = locales.length > 1 ? locales[1] : locales[0];
if (region && region.length > 0) {
currentCountry = defaultCountriesData.find((item) => item[1].toUpperCase() === region);
}
}
if (currentCountry) {
setCountryData(currentCountry);
}
if (loginWithAccount && account && sendCaptcha && isValidPhoneNumber(account)) {
getCaptcha(account, currentCountry ? currentCountry[1].toUpperCase() : void 0);
}
}, []);
const clickCallback = (event) => {
setTimeout(() => {
var _a;
if ((_a = clickRef.current) == null ? void 0 : _a.contains(event.target)) {
return;
}
setSelectVisible(false);
});
};
const validateForm = (phoneValue2, regionCode, isValidateEmpty = true) => {
if (!phoneValue2 && isValidateEmpty) {
setNoInputTip(true);
return;
}
if ((phoneValue2 == null ? void 0 : phoneValue2.length) === 1) {
setErrorTip(true);
return;
}
if (!isPhoneValid(phoneValue2, regionCode)) {
setErrorTip(true);
return false;
} else {
setErrorTip(false);
return true;
}
};
const getCaptcha = (phone, regionCode) => {
phoneInput.current.focus();
if (!phone) {
setNoInputTip(true);
return;
}
if (phone.length === 1) {
setErrorTip(true);
return;
}
if (!regionCode) {
regionCode = countryData[1].toUpperCase();
}
if (isPhoneValid(phone, regionCode)) {
const countryCode = regionCode.toUpperCase();
const phoneE164 = parsePhoneNumber(phone, countryCode).format("E.164");
console.log("login phone: " + phoneE164);
setPhoneValue(phoneE164);
setLoading(true);
getCloudflareTurnstileResponse2({
theme: themeType,
language,
getContainer: () => {
return authCoreModal.rootBody;
}
}).then((token) => {
sendCaptchaImpl(token, phoneE164);
}).catch(() => {
setLoading(false);
message.error(t("error.server_20112"));
});
} else {
setErrorTip(true);
}
};
const sendCaptchaImpl = (token, phoneValue2) => {
setLoading(true);
sendCaptcha({
phone: phoneValue2,
cf_turnstile_response: token
}).then((result) => {
setShowInputCaptcha(result);
}).catch(() => {
setLoading(false);
});
};
const initialAccountValue = () => {
try {
if (account == null ? void 0 : account.includes("@")) {
return "";
} else if ((account == null ? void 0 : account.length) > 0) {
const phoneNumber = parsePhoneNumberWithError(account);
return phoneNumber.nationalNumber;
}
} catch (error) {
console.log("initialAccountValue", error);
}
return "";
};
return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("style", null, login_default), /* @__PURE__ */ React3.createElement("div", { className: "login-style" }, selectVisible && /* @__PURE__ */ React3.createElement("div", { className: "select-country", ref: clickRef }, defaultCountriesData.map((item, index) => {
return /* @__PURE__ */ React3.createElement(
"div",
{
key: index,
className: "country-item",
onClick: () => {
setCountryData(item);
setSelectVisible(false);
setTimeout(() => {
const phoneValue2 = form.getFieldsValue().phone;
if (phoneValue2) {
validateForm(phoneValue2, item[1].toUpperCase(), false);
}
});
}
},
/* @__PURE__ */ React3.createElement("div", { className: "country-box" }, /* @__PURE__ */ React3.createElement("div", { className: "country-flag" }, getUnicodeFlagIcon(`${item[1]}`)), /* @__PURE__ */ React3.createElement("span", { className: "country-name" }, item[0])),
/* @__PURE__ */ React3.createElement("div", { className: "country-code" }, "+" + item[2])
);
})), /* @__PURE__ */ React3.createElement(
Form2,
{
name: "login-form",
onFinish: (values) => getCaptcha(values.phone, void 0),
className: "form-box",
requiredMark: false,
form,
labelCol: {
style: { textAlign: "left" }
}
},
/* @__PURE__ */ React3.createElement("div", { className: "phone-box" }, /* @__PURE__ */ React3.createElement(
"div",
{
className: "phone-select",
defaultValue: `+${countryData[2]}`,
onClick: () => {
if (!loading) {
setSelectVisible(true);
}
}
},
getUnicodeFlagIcon(`${countryData[1]}`),
/* @__PURE__ */ React3.createElement(DownOutlined, { className: "down-more" })
), /* @__PURE__ */ React3.createElement("div", { className: "country-code" }, "+", countryData[2]), /* @__PURE__ */ React3.createElement(
Form2.Item,
{
name: "phone",
label: "",
className: "form-item",
getValueFromEvent: (event) => {
return event.target.value.replace(/\D+/g, "");
},
initialValue: initialAccountValue()
},
/* @__PURE__ */ React3.createElement(
Input2,
{
type: "text",
className: "phone-input",
placeholder: t("login.mobile_number") || void 0,
ref: phoneInput,
onChange: () => {
setErrorTip(false);
setNoInputTip(false);
},
readOnly: loginWithAccount,
onFocus: () => {
var _a;
(_a = document.querySelector(".phone-box")) == null ? void 0 : _a.setAttribute("data-focus", "true");
},
onBlur: () => {
var _a;
(_a = document.querySelector(".phone-box")) == null ? void 0 : _a.removeAttribute("data-focus");
}
}
)
)),
/* @__PURE__ */ React3.createElement("div", { className: "error-tip" }, errorTip && t("login.phone_format_error")),
/* @__PURE__ */ React3.createElement("div", { className: "error-tip" }, noInputTip && t("login.input_phone_holder")),
/* @__PURE__ */ React3.createElement(Form2.Item, { className: "form-item" }, /* @__PURE__ */ React3.createElement(Button3, { type: "primary", htmlType: "submit", className: "primary-antd-btn submit-btn", loading }, t("login.get_captcha")))
), !loginWithAccount && supportAuthTypes.length > 0 && /* @__PURE__ */ React3.createElement("div", { className: "login-or" }, /* @__PURE__ */ React3.createElement("div", { className: "or-line" }), t("login.or"), /* @__PURE__ */ React3.createElement("div", { className: "or-line" }))));
}
var phone_login_default = PhoneLogin;
// src/pages/login/components/social-login.tsx
import { AuthType } from "@particle-network/auth-core";
import React4, { useMemo as useMemo2, useState as useState4 } from "react";
var SocialLogin = (props) => {
const { supportAuthTypes, preferredAuthType, onPreferredAuthTypeChange, thirdpartyAuthLogin } = props;
const [collapse, setCollapse] = useState4(true);
const authLogin = (authType) => {
thirdpartyAuthLogin(authType);
};
const toggleEmailOrPhone = (authType) => {
onPreferredAuthTypeChange == null ? void 0 : onPreferredAuthTypeChange(authType);
};
const imgs = {
email: email_icon_default,
phone: phone_icon_default,
facebook: facebook_icon_default,
google: google_icon_default,
apple: apple_icon_default,
twitter: 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,
passkeys: passkeys_icon_default
};
const items = useMemo2(() => {
const authTypes = supportAuthTypes;
const hasEmailAndPhone = authTypes.includes(AuthType.email) && authTypes.includes(AuthType.phone);
const items2 = [];
if (hasEmailAndPhone) {
if (preferredAuthType === AuthType.phone) {
items2.push(/* @__PURE__ */ React4.createElement("img", { key: "email-login", src: email_icon_default, alt: "", onClick: () => toggleEmailOrPhone(AuthType.email) }));
} else {
items2.push(/* @__PURE__ */ React4.createElement("img", { key: "phone-login", src: phone_icon_default, alt: "", onClick: () => toggleEmailOrPhone(AuthType.phone) }));
}
}
const displayAuthTypes = authTypes.filter((authType) => authType !== AuthType.email && authType !== AuthType.phone);
items2.push(
...displayAuthTypes.map((authType) => /* @__PURE__ */ React4.createElement("img", { key: `${authType}-login`, src: imgs[authType], alt: "", onClick: () => authLogin(authType) }))
);
const collapseIcon = /* @__PURE__ */ React4.createElement(
"div",
{
key: "collapse-login",
className: "collapse-login-icon",
onClick: () => setCollapse(!collapse),
"data-is-collapse": collapse
},
/* @__PURE__ */ React4.createElement(svg_icon_default, { className: "collapse-icon", name: "collapse_icon" })
);
if (items2.length > 5) {
items2.splice(4, 0, collapseIcon);
}
if (collapse) {
items2.splice(5, items2.length - 5);
}
return items2;
}, [collapse, preferredAuthType, supportAuthTypes]);
return /* @__PURE__ */ React4.createElement("div", { className: "change-login-mode", "data-collapse": !!collapse }, /* @__PURE__ */ React4.createElement("div", { className: "change-social" }, items));
};
var social_login_default = SocialLogin;
// src/pages/login/index.less
var login_default2 = ".login-container-box {\n position: relative;\n z-index: 1;\n width: 100%;\n height: 100%;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n.login-container-box .wrap {\n position: relative;\n width: 100%;\n height: 100%;\n padding-bottom: 40px;\n overflow-y: auto;\n padding-top: 56px;\n flex: 1;\n}\n@media (max-width: 600px) {\n .login-container-box .wrap {\n padding-top: 7vh;\n }\n}\n.login-container-box .wrap .login-logo {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 64px;\n line-height: 1.5715;\n}\n.login-container-box .wrap .login-logo .product-logo {\n max-width: 100%;\n height: 64px;\n object-fit: contain;\n}\n.login-container-box .wrap .placeholder-wrap {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n}\n.login-container-box .footer-box {\n position: absolute;\n bottom: 10px;\n margin: 0;\n text-align: center;\n}\n@media only screen and (max-height: 300px) {\n .login-container-box .footer-box {\n position: absolute;\n top: unset;\n bottom: 10px;\n margin-bottom: 0;\n }\n}\n[data-login-type='facebook'][data-hash='#/login'] .footer-box,\n[data-login-type='google'][data-hash='#/login'] .footer-box {\n position: absolute !important;\n}\n";
// src/pages/login/index.tsx
function Login(props) {
var _a, _b, _c, _d, _e;
const { email, phone, authorization, chain } = props || {};
const { modalOptions, setLoginAuthorization } = useParticleAuth();
const { socialAuthLogin } = useLogin_default();
const getDefaultLoginType = () => {
var _a2, _b2, _c2, _d2, _e2;
const indexPhone = (_b2 = (_a2 = modalOptions.authTypes) == null ? void 0 : _a2.indexOf(AuthType2.phone)) != null ? _b2 : -1;
const indexEmail = (_d2 = (_c2 = modalOptions.authTypes) == null ? void 0 : _c2.indexOf(AuthType2.email)) != null ? _d2 : -1;
if (!isNullish(phone) && (indexPhone >= 0 || !((_e2 = modalOptions.authTypes) == null ? void 0 : _e2.length)) || !email && (indexPhone >= 0 && indexEmail < 0 || indexPhone >= 0 && indexEmail >= 0 && indexPhone < indexEmail)) {
return AuthType2.phone;
} else {
return AuthType2.email;
}
};
const [loginType, setLoginType] = useState5(getDefaultLoginType());
const { t } = useTranslation();
const [account, setAccount] = useState5("");
const [showInputCaptcha, setShowInputCaptcha] = useState5(false);
const [loginWithAccount, setLoginWithAccount] = useState5(false);
const [supportAuthTypes, setSupportAuthTypes] = useState5(modalOptions.authTypes || []);
const displayInputCaptcha = (visible) => {
setShowInputCaptcha(visible);
};
useEffect4(() => {
document.documentElement.setAttribute("data-login-type", loginType || "");
}, [loginType]);
useEffect4(() => {
if (!loginWithAccount) {
const allTypes = Object.values(AuthType2).filter(
(authType) => authType !== AuthType2.jwt && authType !== AuthType2.telegram
);
if (!modalOptions.authTypes) {
setSupportAuthTypes(allTypes);
} else {
const types = modalOptions.authTypes.filter(
(authType) => authType !== AuthType2.jwt && authType !== AuthType2.telegram && allTypes.includes(authType)
);
if (!types.includes(AuthType2.email) && !types.includes(AuthType2.phone) && types.length > 0) {
types.unshift(AuthType2.email);
}
if (types.length === 1 && (types[0] === AuthType2.email || types[0] === AuthType2.phone)) {
types.length = 0;
}
setSupportAuthTypes(types);
}
} else {
setSupportAuthTypes([]);
}
}, [loginWithAccount, modalOptions.authTypes]);
useEffect4(() => {
if (authorization) {
setLoginAuthorization({ authorization, chain: requireNotNullish(chain) });
} else {
setLoginAuthorization(void 0);
}
loginDirectly();
}, []);
const sendCaptcha = async (data) => {
setAccount("email" in data && data.email ? data.email : data.phone);
const result = await getConnectCaptcha(data).then((result2) => {
console.log(`request captcha success: ${result2}`);
return result2;
});
return result;
};
const loginDirectly = () => {
if (email && loginType === AuthType2.email) {
if (EmailRegExp.test(email)) {
setLoginWithAccount(true);
setAccount(email);
}
} else if (phone && loginType === AuthType2.phone) {
const e164Phone = isValidE164PhoneNumber(phone);
if (e164Phone) {
setLoginWithAccount(true);
setAccount(e164Phone);
}
}
};
const thirdpartyAuthLogin = (authType) => {
setLoginType(authType);
socialAuthLogin({
socialType: authType,
prompt: "select_account",
authorization,
chain
});
};
const loginContent = () => {
if (showInputCaptcha) {
return /* @__PURE__ */ React5.createElement(
captcha_input_default2,
{
sendCaptcha,
setShowInputCaptcha: displayInputCaptcha,
account,
loginWithAccount,
chain
}
);
} else if (loginType === AuthType2.email) {
return /* @__PURE__ */ React5.createElement(
email_login_default,
{
sendCaptcha,
setShowInputCaptcha: displayInputCaptcha,
setLoginType: changeLoginType,
account: email || account,
supportAuthTypes,
loginWithAccount: !!email || loginWithAccount
}
);
} else if (loginType === AuthType2.phone) {
return /* @__PURE__ */ React5.createElement(
phone_login_default,
{
sendCaptcha,
setShowInputCaptcha: displayInputCaptcha,
setLoginType: changeLoginType,
account: phone || account,
supportAuthTypes,
loginWithAccount: !!phone || loginWithAccount
}
);
}
};
const changeLoginType = (type) => {
setLoginType(type);
};
const authTypeDisplayed = (type) => {
if (type === AuthType2.jwt) {
return "JWT";
} else {
return type.titleCase();
}
};
const loggingHint = (loginType2) => {
if (loginType2 === AuthType2.jwt || loginType2 === AuthType2.telegram) {
return t("login.create_wallet");
} else {
return t("login.social_login").format(authTypeDisplayed(loginType2));
}
};
const projectLogo = useMemo3(() => {
var _a2;
let img = (_a2 = modalOptions.customStyle) == null ? void 0 : _a2.logo;
if (!img) {
img = logo_default;
}
return img || "";
}, [(_a = modalOptions.customStyle) == null ? void 0 : _a.logo]);
return /* @__PURE__ */ React5.createElement("div", { className: "login-container-box" }, /* @__PURE__ */ React5.createElement("style", null, login_default), /* @__PURE__ */ React5.createElement("style", null, login_default2), /* @__PURE__ */ React5.createElement("div", { className: "wrap" }, /* @__PURE__ */ React5.createElement("div", { className: "login-logo" }, /* @__PURE__ */ React5.createElement(
Image,
{
className: "product-logo",
preview: false,
height: 64,
src: projectLogo,
key: projectLogo,
placeholder: /* @__PURE__ */ React5.createElement("div", { className: "placeholder-wrap" }, /* @__PURE__ */ React5.createElement(LoadingOutlined, { style: { fontSize: 24 }, spin: true })),
fallback: logo_default,
onError: (e) => {
e.currentTarget.src = logo_default;
}
}
)), /* @__PURE__ */ React5.createElement("div", { className: "login-header0" }, (_c = (_b