\n {new Array(6).fill(0).map((_, i) => {\n return (\n {\n inputsRef.current[i] = el;\n }}\n // maxLength={1}\n className={inputClassName}\n autoComplete={i === 0 ? 'one-time-code' : 'off'}\n aria-label={ariaLabel ? `${ariaLabel}. Character ${i + 1}.` : `Character ${i + 1}.`}\n disabled={disabled}\n placeholder={placeholder}\n />\n );\n })}\n {\n e.preventDefault();\n e.stopPropagation();\n for (let i = inputsRef.current.length - 1; i >= 0; i--) {\n if (\n (i > 0 && !inputsRef.current[i].value && inputsRef.current[i - 1].value) ||\n (i === 0 && !inputsRef.current[i].value) ||\n (i == inputsRef.current.length - 1 && inputsRef.current[i].value)\n ) {\n inputsRef.current[i].focus();\n inputsRef.current[i].setSelectionRange(\n inputsRef.current[i].value.length,\n inputsRef.current[i].value.length\n );\n break;\n }\n }\n }}\n />\n
\n );\n }\n);\n\nexport default AuthCode;\n","import { useCallback, useEffect, useMemo } from 'react';\nimport { useAuthCoreModal } from '..';\n\nenum MessageType {\n error = 'error',\n info = 'info',\n success = 'success',\n warning = 'warning',\n}\n\nconst useMessage = () => {\n const { authCoreModal } = useAuthCoreModal();\n\n const rootModalContainer = useMemo(() => authCoreModal.rootModalContainer, [authCoreModal]);\n\n const createMessage = useCallback(\n (type: MessageType, content = '') => {\n const mainContainer = document.createElement('div');\n mainContainer.className = 'ant-message-notice';\n\n const noticeContent = document.createElement('div');\n noticeContent.className = 'ant-message-notice-content';\n\n const customContent = document.createElement('div');\n customContent.className = 'ant-message-custom-content';\n\n const iconSpan = document.createElement('span');\n iconSpan.setAttribute('role', 'img');\n iconSpan.setAttribute('aria-label', 'check-circle');\n iconSpan.className = 'anticon anticon-check-circle';\n\n const svgIcon = document.createElement('svg');\n\n const successIcon =\n '';\n\n const errorIcon =\n '';\n\n const infoIcon =\n '';\n\n const wranIcon =\n '';\n\n if (type === MessageType.success) {\n customContent.className += ' ant-message-success';\n svgIcon.innerHTML = successIcon;\n } else if (type === MessageType.error) {\n customContent.className += ' ant-message-error';\n svgIcon.innerHTML = errorIcon;\n } else if (type === MessageType.info) {\n customContent.className += ' ant-message-info';\n svgIcon.innerHTML = infoIcon;\n } else if (type === MessageType.warning) {\n customContent.className += ' ant-message-warning';\n svgIcon.innerHTML = wranIcon;\n }\n\n const textSpan = document.createElement('span');\n textSpan.textContent = content;\n\n iconSpan.appendChild(svgIcon);\n customContent.appendChild(iconSpan);\n customContent.appendChild(textSpan);\n noticeContent.appendChild(customContent);\n mainContainer.appendChild(noticeContent);\n rootModalContainer?.querySelector('.ant-message')?.appendChild(mainContainer);\n return mainContainer;\n },\n [rootModalContainer]\n );\n\n const error = useCallback(\n (content: string) => {\n const el = createMessage(MessageType.error, content);\n setTimeout(() => {\n rootModalContainer?.querySelector('.ant-message')?.removeChild(el);\n }, 2000);\n },\n [createMessage]\n );\n\n const info = useCallback(\n (content: string) => {\n const el = createMessage(MessageType.info, content);\n setTimeout(() => {\n rootModalContainer?.querySelector('.ant-message')?.removeChild(el);\n }, 2000);\n },\n [createMessage]\n );\n\n const success = useCallback(\n (content: string) => {\n const el = createMessage(MessageType.success, content);\n setTimeout(() => {\n rootModalContainer?.querySelector('.ant-message')?.removeChild(el);\n }, 2000);\n },\n [createMessage]\n );\n\n const warning = useCallback(\n (content: string) => {\n const el = createMessage(MessageType.warning, content);\n setTimeout(() => {\n rootModalContainer?.querySelector('.ant-message')?.removeChild(el);\n }, 2000);\n },\n [createMessage]\n );\n\n useEffect(() => {\n if (rootModalContainer) {\n if (rootModalContainer.querySelector('.ant-message')) return;\n const messageContainer = document.createElement('div');\n messageContainer.className = 'ant-message';\n rootModalContainer.appendChild(messageContainer);\n }\n }, [rootModalContainer]);\n\n return {\n error,\n info,\n success,\n warning,\n };\n};\n\nexport default useMessage;\n","import { ApiError, getCloudflareTurnstileResponse, isApiError, type CaptchaRequest } from '@particle-network/auth-core';\nimport { useInterval } from 'ahooks';\nimport { Button } from 'antd';\nimport throttle from 'lodash/throttle.js';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport SVGIcon from '../../../components/icon/svg-icon';\nimport AuthCode from '../../../components/react-auth-code-input';\nimport { useParticleAuth } from '../../../context';\nimport { useCustomize } from '../../../context/hooks/useCustomize';\nimport useLogin from '../../../context/hooks/useLogin';\nimport useMessage from '../../../context/hooks/useMessage';\nimport styles from './captcha-input.less';\n\nfunction CaptchaInput(props: any) {\n const { sendCaptcha, setShowInputCaptcha, account, loginWithAccount, chain } = props;\n\n const [loading, setLoading] = useState(false);\n\n const { themeType, language } = useCustomize();\n const [codeVal, setCodeVal] = useState\n \n
\n \n );\n}\n\nexport default CaptchaInput;\n","export const defaultCountriesData = [\n ['Afghanistan (افغانستان)', 'af', '93'],\n ['Albania (Shqipëri)', 'al', '355'],\n ['Algeria (الجزائر)', 'dz', '213'],\n ['American Samoa', 'as', '1684'],\n ['Andorra', 'ad', '376'],\n ['Angola', 'ao', '244'],\n ['Anguilla', 'ai', '1264'],\n ['Antigua and Barbuda', 'ag', '1268'],\n ['Argentina', 'ar', '54'],\n ['Armenia (Հայաստան)', 'am', '374'],\n ['Aruba', 'aw', '297'],\n ['Australia', 'au', '61'],\n ['Austria (Österreich)', 'at', '43'],\n ['Azerbaijan (Azərbaycan)', 'az', '994'],\n ['Bahamas', 'bs', '1242'],\n ['Bahrain (البحرين)', 'bh', '973'],\n ['Bangladesh (বাংলাদেশ)', 'bd', '880'],\n ['Barbados', 'bb', '1246'],\n ['Belarus (Беларусь)', 'by', '375'],\n ['Belgium (België)', 'be', '32'],\n ['Belize', 'bz', '501'],\n ['Benin (Bénin)', 'bj', '229'],\n ['Bermuda', 'bm', '1441'],\n ['Bhutan (འབྲུག)', 'bt', '975'],\n ['Bolivia', 'bo', '591'],\n ['Bosnia and Herzegovina', 'ba', '387'],\n ['Botswana', 'bw', '267'],\n ['Brazil (Brasil)', 'br', '55'],\n ['British Indian Ocean Territory', 'io', '246'],\n ['British Virgin Islands', 'vg', '1284'],\n ['Brunei', 'bn', '673'],\n ['Bulgaria (България)', 'bg', '359'],\n ['Burkina Faso', 'bf', '226'],\n ['Burundi (Uburundi)', 'bi', '257'],\n ['Cambodia (កម្ពុជា)', 'kh', '855'],\n ['Cameroon (Cameroun)', 'cm', '237'],\n ['Canada', 'ca', '1'],\n ['Cape Verde (Kabu Verdi)', 'cv', '238'],\n ['Caribbean Netherlands', 'bq', '599'],\n ['Cayman Islands', 'ky', '1345'],\n ['Central African Republic', 'cf', '236'],\n ['Chad (Tchad)', 'td', '235'],\n ['Chile', 'cl', '56'],\n ['China (中国)', 'cn', '86'],\n ['Christmas Island', 'cx', '61'],\n ['Cocos (Keeling) Islands', 'cc', '61'],\n ['Colombia', 'co', '57'],\n ['Comoros (جزر القمر)', 'km', '269'],\n ['Congo (DRC)', 'cd', '243'],\n ['Congo (Republic)', 'cg', '242'],\n ['Cook Islands', 'ck', '682'],\n ['Costa Rica', 'cr', '506'],\n ['Côte d’Ivoire', 'ci', '225'],\n ['Croatia (Hrvatska)', 'hr', '385'],\n ['Cuba', 'cu', '53'],\n ['Curaçao', 'cw', '599'],\n ['Cyprus (Κύπρος)', 'cy', '357'],\n ['Czech Republic (Česká republika)', 'cz', '420'],\n ['Denmark (Danmark)', 'dk', '45'],\n ['Djibouti', 'dj', '253'],\n ['Dominica', 'dm', '1767'],\n ['Dominican Republic', 'do', '1'],\n ['Ecuador', 'ec', '593'],\n ['Egypt (مصر)', 'eg', '20'],\n ['El Salvador', 'sv', '503'],\n ['Equatorial Guinea', 'gq', '240'],\n ['Eritrea', 'er', '291'],\n ['Estonia (Eesti)', 'ee', '372'],\n ['Ethiopia', 'et', '251'],\n ['Falkland Islands (Islas Malvinas)', 'fk', '500'],\n ['Faroe Islands (Føroyar)', 'fo', '298'],\n ['Fiji', 'fj', '679'],\n ['Finland (Suomi)', 'fi', '358'],\n ['France', 'fr', '33'],\n ['French Guiana', 'gf', '594'],\n ['French Polynesia', 'pf', '689'],\n ['Gabon', 'ga', '241'],\n ['Gambia', 'gm', '220'],\n ['Georgia (საქართველო)', 'ge', '995'],\n ['Germany (Deutschland)', 'de', '49'],\n ['Ghana (Gaana)', 'gh', '233'],\n ['Gibraltar', 'gi', '350'],\n ['Greece (Ελλάδα)', 'gr', '30'],\n ['Greenland (Kalaallit Nunaat)', 'gl', '299'],\n ['Grenada', 'gd', '1473'],\n ['Guadeloupe', 'gp', '590'],\n ['Guam', 'gu', '1671'],\n ['Guatemala', 'gt', '502'],\n ['Guernsey', 'gg', '44'],\n ['Guinea (Guinée)', 'gn', '224'],\n ['Guinea-Bissau (Guiné Bissau)', 'gw', '245'],\n ['Guyana', 'gy', '592'],\n ['Haiti', 'ht', '509'],\n ['Honduras', 'hn', '504'],\n ['Hong Kong (香港)', 'hk', '852'],\n ['Hungary (Magyarország)', 'hu', '36'],\n ['Iceland (Ísland)', 'is', '354'],\n ['India (भारत)', 'in', '91'],\n ['Indonesia', 'id', '62'],\n ['Iran (ایران)', 'ir', '98'],\n ['Iraq (العراق)', 'iq', '964'],\n ['Ireland', 'ie', '353'],\n ['Isle of Man', 'im', '44'],\n ['Israel (ישראל)', 'il', '972'],\n ['Italy (Italia)', 'it', '39'],\n ['Jamaica', 'jm', '1876'],\n ['Japan (日本)', 'jp', '81'],\n ['Jersey', 'je', '44'],\n ['Jordan (الأردن)', 'jo', '962'],\n ['Kazakhstan (Казахстан)', 'kz', '7'],\n ['Kenya', 'ke', '254'],\n ['Kiribati', 'ki', '686'],\n ['Kosovo', 'xk', '383'],\n ['Kuwait (الكويت)', 'kw', '965'],\n ['Kyrgyzstan (Кыргызстан)', 'kg', '996'],\n ['Laos (ລາວ)', 'la', '856'],\n ['Latvia (Latvija)', 'lv', '371'],\n ['Lebanon (لبنان)', 'lb', '961'],\n ['Lesotho', 'ls', '266'],\n ['Liberia', 'lr', '231'],\n ['Libya (ليبيا)', 'ly', '218'],\n ['Liechtenstein', 'li', '423'],\n ['Lithuania (Lietuva)', 'lt', '370'],\n ['Luxembourg', 'lu', '352'],\n ['Macau (澳門)', 'mo', '853'],\n ['Macedonia (FYROM) (Македонија)', 'mk', '389'],\n ['Madagascar (Madagasikara)', 'mg', '261'],\n ['Malawi', 'mw', '265'],\n ['Malaysia', 'my', '60'],\n ['Maldives', 'mv', '960'],\n ['Mali', 'ml', '223'],\n ['Malta', 'mt', '356'],\n ['Marshall Islands', 'mh', '692'],\n ['Martinique', 'mq', '596'],\n ['Mauritania (موريتانيا)', 'mr', '222'],\n ['Mauritius (Moris)', 'mu', '230'],\n ['Mayotte', 'yt', '262'],\n ['Mexico (México)', 'mx', '52'],\n ['Micronesia', 'fm', '691'],\n ['Moldova (Republica Moldova)', 'md', '373'],\n ['Monaco', 'mc', '377'],\n ['Mongolia (Монгол)', 'mn', '976'],\n ['Montenegro (Crna Gora)', 'me', '382'],\n ['Montserrat', 'ms', '1664'],\n ['Morocco (المغرب)', 'ma', '212'],\n ['Mozambique (Moçambique)', 'mz', '258'],\n ['Myanmar (Burma) (မြန်မာ)', 'mm', '95'],\n ['Namibia (Namibië)', 'na', '264'],\n ['Nauru', 'nr', '674'],\n ['Nepal (नेपाल)', 'np', '977'],\n ['Netherlands (Nederland)', 'nl', '31'],\n ['New Caledonia (Nouvelle-Calédonie)', 'nc', '687'],\n ['New Zealand', 'nz', '64'],\n ['Nicaragua', 'ni', '505'],\n ['Niger (Nijar)', 'ne', '227'],\n ['Nigeria', 'ng', '234'],\n ['Niue', 'nu', '683'],\n ['Norfolk Island', 'nf', '672'],\n ['North Korea (조선 민주주의 인민 공화국)', 'kp', '850'],\n ['Northern Mariana Islands', 'mp', '1670'],\n ['Norway (Norge)', 'no', '47'],\n ['Oman (عُمان)', 'om', '968'],\n ['Pakistan (پاکستان)', 'pk', '92'],\n ['Palau', 'pw', '680'],\n ['Palestine (فلسطين)', 'ps', '970'],\n ['Panama (Panamá)', 'pa', '507'],\n ['Papua New Guinea', 'pg', '675'],\n ['Paraguay', 'py', '595'],\n ['Peru (Perú)', 'pe', '51'],\n ['Philippines', 'ph', '63'],\n ['Poland (Polska)', 'pl', '48'],\n ['Portugal', 'pt', '351'],\n ['Puerto Rico', 'pr', '1'],\n ['Qatar (قطر)', 'qa', '974'],\n ['Réunion (La Réunion)', 're', '262'],\n ['Romania (România)', 'ro', '40'],\n ['Russia (Россия)', 'ru', '7'],\n ['Rwanda', 'rw', '250'],\n ['Saint Barthélemy (Saint-Barthélemy)', 'bl', '590'],\n ['Saint Helena', 'sh', '290'],\n ['Saint Kitts and Nevis', 'kn', '1869'],\n ['Saint Lucia', 'lc', '1758'],\n ['Saint Martin', 'mf', '590'],\n ['Saint Pierre and Miquelon', 'pm', '508'],\n ['Saint Vincent and the Grenadines', 'vc', '1784'],\n ['Samoa', 'ws', '685'],\n ['San Marino', 'sm', '378'],\n ['São Tomé and Príncipe', 'st', '239'],\n ['Saudi Arabia (المملكة العربية السعودية)', 'sa', '966'],\n ['Senegal (Sénégal)', 'sn', '221'],\n ['Serbia (Србија)', 'rs', '381'],\n ['Seychelles', 'sc', '248'],\n ['Sierra Leone', 'sl', '232'],\n ['Singapore', 'sg', '65'],\n ['Sint Maarten', 'sx', '1721'],\n ['Slovakia (Slovensko)', 'sk', '421'],\n ['Slovenia (Slovenija)', 'si', '386'],\n ['Solomon Islands', 'sb', '677'],\n ['Somalia (Soomaaliya)', 'so', '252'],\n ['South Africa', 'za', '27'],\n ['South Korea (대한민국)', 'kr', '82'],\n ['South Sudan (جنوب السودان)', 'ss', '211'],\n ['Spain (España)', 'es', '34'],\n ['Sri Lanka (ශ්රී ලංකාව)', 'lk', '94'],\n ['Sudan (السودان)', 'sd', '249'],\n ['Suriname', 'sr', '597'],\n ['Svalbard and Jan Mayen', 'sj', '47'],\n ['Swaziland', 'sz', '268'],\n ['Sweden (Sverige)', 'se', '46'],\n ['Switzerland (Schweiz)', 'ch', '41'],\n ['Syria (سوريا)', 'sy', '963'],\n ['Taiwan (台灣)', 'tw', '886'],\n ['Tajikistan', 'tj', '992'],\n ['Tanzania', 'tz', '255'],\n ['Thailand (ไทย)', 'th', '66'],\n ['Timor-Leste', 'tl', '670'],\n ['Togo', 'tg', '228'],\n ['Tokelau', 'tk', '690'],\n ['Tonga', 'to', '676'],\n ['Trinidad and Tobago', 'tt', '1868'],\n ['Tunisia (تونس)', 'tn', '216'],\n ['Turkey (Türkiye)', 'tr', '90'],\n ['Turkmenistan', 'tm', '993'],\n ['Turks and Caicos Islands', 'tc', '1649'],\n ['Tuvalu', 'tv', '688'],\n ['U.S. Virgin Islands', 'vi', '1340'],\n ['Uganda', 'ug', '256'],\n ['Ukraine (Україна)', 'ua', '380'],\n ['United Arab Emirates', 'ae', '971'],\n ['United Kingdom', 'gb', '44'],\n ['United States', 'us', '1'],\n ['Uruguay', 'uy', '598'],\n ['Uzbekistan (Oʻzbekiston)', 'uz', '998'],\n ['Vanuatu', 'vu', '678'],\n ['Vatican City (Città del Vaticano)', 'va', '39'],\n ['Venezuela', 've', '58'],\n ['Vietnam (Việt Nam)', 'vn', '84'],\n ['Wallis and Futuna', 'wf', '681'],\n ['Western Sahara (الصحراء الغربية)', 'eh', '212'],\n ['Yemen (اليمن)', 'ye', '967'],\n ['Zambia', 'zm', '260'],\n ['Zimbabwe', 'zw', '263'],\n ['Åland Islands', 'ax', '358'],\n];\n\nexport function getCurrentCountry() {\n const language = navigator.languages && navigator.languages.length ? navigator.languages[0] : navigator.language;\n const locales = language.split('-');\n const region = locales.length > 1 ? locales[1] : locales[0];\n let currentCountry;\n if (region && region.length > 0) {\n currentCountry = defaultCountriesData.find((item) => item[1].toUpperCase() === region);\n }\n return currentCountry;\n}\n","import { DownOutlined } from '@ant-design/icons';\nimport { getCloudflareTurnstileResponse } from '@particle-network/auth-core';\nimport { Button, Form, Input } from 'antd';\nimport getUnicodeFlagIcon from 'country-flag-icons/unicode';\nimport type { CountryCode } from 'libphonenumber-js/max';\nimport { isValidPhoneNumber, parsePhoneNumber, parsePhoneNumberWithError } from 'libphonenumber-js/max';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { defaultCountriesData } from '../../../api/model/all-countries';\nimport { useAuthCoreModal } from '../../../context';\nimport { useCustomize } from '../../../context/hooks/useCustomize';\nimport useMessage from '../../../context/hooks/useMessage';\nimport { isPhoneValid } from '../../../utils';\nimport styles from './login.less';\n\nfunction PhoneLogin(props: any) {\n const { t } = useTranslation();\n\n const { sendCaptcha, setShowInputCaptcha, account, supportAuthTypes, loginWithAccount } = props;\n\n const [selectVisible, setSelectVisible] = useState(false);\n\n const { themeType, language } = useCustomize();\n\n const [countryData, setCountryData] = useState(['United States', 'us', '1']);\n\n const [form] = Form.useForm();\n\n const clickRef = useRef\n
\n \n
\n \n
\n {verifyCodeErrorMessage}
\n\n \n login()}\n disabled={confirmBtn}\n loading={loading}\n >\n {t('common.confirm')}\n \n\n \n\n {!loginWithAccount && (\n {\n setShowInputCaptcha(false);\n }}\n >\n
\n )}\n \n {selectVisible && (\n
\n )}\n \n {defaultCountriesData.map((item, index) => {\n return (\n {\n setCountryData(item);\n setSelectVisible(false);\n\n setTimeout(() => {\n const phoneValue = form.getFieldsValue().phone;\n if (phoneValue) {\n validateForm(phoneValue, item[1].toUpperCase(), false);\n }\n });\n }}\n >\n
\n );\n })}\n \n
\n {getUnicodeFlagIcon(`${item[1]}`)}
\n {item[0]}\n {'+' + item[2]}
\n \n {\n if (!loading) {\n setSelectVisible(true);\n }\n }}\n >\n {getUnicodeFlagIcon(`${countryData[1]}`)}\n
\n +{countryData[2]}
\n {errorTip && t('login.phone_format_error')}
\n {noInputTip && t('login.input_phone_holder')}
\n\n \n \n {t('login.or')}\n \n
\n )}\n \n \n );\n}\n\nexport default PhoneLogin;\n","import { AuthType } from '@particle-network/auth-core';\nimport React, { useMemo, useState } from 'react';\nimport apple from '../../../common/images/apple_icon.png';\nimport discord from '../../../common/images/discord_icon.png';\nimport email from '../../../common/images/email_icon.png';\nimport facebook from '../../../common/images/facebook_icon.png';\nimport github from '../../../common/images/github_icon.png';\nimport google from '../../../common/images/google_icon.png';\nimport jwt from '../../../common/images/jwt_icon.png';\nimport linkedin from '../../../common/images/linkedin_icon.png';\nimport microsoft from '../../../common/images/microsoft_icon.png';\nimport passkeys from '../../../common/images/passkeys_icon.png';\nimport phone from '../../../common/images/phone_icon.png';\nimport telegram from '../../../common/images/telegram_icon.png';\nimport twitch from '../../../common/images/twitch_icon.png';\nimport twitter from '../../../common/images/twitter_icon.png';\nimport SVGIcon from '../../../components/icon/svg-icon';\n\ninterface Props {\n supportAuthTypes: AuthType[];\n preferredAuthType?: AuthType;\n onPreferredAuthTypeChange?: (authType: AuthType) => void;\n thirdpartyAuthLogin: (authType: AuthType) => void;\n}\nconst SocialLogin = (props: Props) => {\n const { supportAuthTypes, preferredAuthType, onPreferredAuthTypeChange, thirdpartyAuthLogin } = props;\n\n const [collapse, setCollapse] = useState(true);\n\n const authLogin = (authType: AuthType) => {\n thirdpartyAuthLogin(authType);\n };\n\n const toggleEmailOrPhone = (authType: AuthType) => {\n onPreferredAuthTypeChange?.(authType);\n };\n\n const imgs = {\n email,\n phone,\n facebook,\n google,\n apple,\n twitter,\n discord,\n github,\n twitch,\n microsoft,\n linkedin,\n jwt,\n telegram,\n passkeys,\n };\n\n const items = useMemo(() => {\n const authTypes = supportAuthTypes as AuthType[];\n const hasEmailAndPhone = authTypes.includes(AuthType.email) && authTypes.includes(AuthType.phone);\n const items: React.ReactNode[] = [];\n if (hasEmailAndPhone) {\n if (preferredAuthType === AuthType.phone) {\n items.push(\n \n
\n );\n};\n\nexport default SocialLogin;\n","import { LoadingOutlined } from '@ant-design/icons';\nimport {\n AuthType,\n getConnectCaptcha,\n isNullish,\n requireNotNullish,\n type CaptchaRequest,\n type ConnectParam,\n type PhoneCaptchaRequest,\n type SocialAuthType,\n} from '@particle-network/auth-core';\nimport { Image } from 'antd';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport logoImg from '../../common/images/logo.png';\nimport PowerFooter from '../../components/power-footer';\nimport { useParticleAuth } from '../../context';\nimport useLogin from '../../context/hooks/useLogin';\nimport { EmailRegExp, isValidE164PhoneNumber } from '../../utils';\nimport CaptchaInput from './components/captcha-input';\nimport EmailLogin from './components/email-login';\nimport loginStyles from './components/login.less';\nimport PhoneLogin from './components/phone-login';\nimport SocialLogin from './components/social-login';\nimport styles from './index.less';\n\nfunction Login(props?: ConnectParam) {\n // @ts-ignore\n const { email, phone, authorization, chain } = props || {};\n\n const { modalOptions, setLoginAuthorization } = useParticleAuth();\n const { socialAuthLogin } = useLogin();\n\n const getDefaultLoginType = () => {\n const indexPhone = modalOptions.authTypes?.indexOf(AuthType.phone) ?? -1;\n const indexEmail = modalOptions.authTypes?.indexOf(AuthType.email) ?? -1;\n if (\n (!isNullish(phone) && (indexPhone >= 0 || !modalOptions.authTypes?.length)) ||\n (!email &&\n ((indexPhone >= 0 && indexEmail < 0) ||\n (indexPhone >= 0 && indexEmail >= 0 && indexPhone < indexEmail)))\n ) {\n return AuthType.phone;\n } else {\n return AuthType.email;\n }\n };\n\n const [loginType, setLoginType] = useState{items}
\n \n \n \n
\n \n
\n \n \n
\n }\n fallback={logoImg}\n onError={(e) => {\n e.currentTarget.src = logoImg;\n }}\n />\n \n {modalOptions.customStyle?.projectName ?? t('common.particle_auth')}\n
\n\n {showInputCaptcha ? (\n {account}
\n ) : (\n \n {loginType === AuthType.email || loginType === AuthType.phone ? (\n modalOptions.customStyle?.subtitle ?? t('login.to_continue').format('App')\n ) : (\n
\n )}\n\n {loginContent()}\n\n {!showInputCaptcha &&\n !loginWithAccount &&\n (loginType === AuthType.email || loginType === AuthType.phone) && (\n {loggingHint(loginType)}
\n )}\n \n \n
\n );\n};\n\nexport default Header;\n","import { Button, Modal } from 'antd';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport CircleClose from '../../../components/icon/circle-close';\nimport { useAuthCoreModal } from '../../../context';\nimport styles from './index.less';\n\ninterface Prop {\n visible: boolean;\n setVisible: (visible: boolean) => void;\n onBind: () => void;\n}\n\nconst BindSecurityAccountPrompt = (prop: Prop) => {\n const { visible, setVisible, onBind } = prop;\n const { t } = useTranslation();\n const { authCoreModal } = useAuthCoreModal();\n const onClose = () => {\n setVisible(false);\n };\n\n return (\n <>\n \n \n
\n \n <>\n {displayBackBtn && (\n {\n if (onBack) {\n onBack();\n } else {\n navigate(-1);\n }\n }}\n />\n )}\n {leftContent}\n \n
\n {children}
\n {rightContent}
\n {t('account.security_account_bind_hint')}
\n \n \n {\n setVisible(false);\n onBind();\n }}\n >\n {t('common.bind')}\n \n
\n \n \n );\n};\n\nexport default BindSecurityAccountPrompt;\n","import {\n AuthType,\n hasMasterPassword as checkHasMasterPassword,\n deletePaymentPassword,\n getLatestAuthType,\n syncUserInfo,\n} from '@particle-network/auth-core';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport apple from '../../../common/images/apple_icon.png';\nimport discord from '../../../common/images/discord_icon.png';\nimport email from '../../../common/images/email_icon.png';\nimport facebook from '../../../common/images/facebook_icon.png';\nimport github from '../../../common/images/github_icon.png';\nimport google from '../../../common/images/google_icon.png';\nimport jwt from '../../../common/images/jwt_icon.png';\nimport linkedin from '../../../common/images/linkedin_icon.png';\nimport microsoft from '../../../common/images/microsoft_icon.png';\nimport phone from '../../../common/images/phone_icon.png';\nimport telegram from '../../../common/images/telegram_icon.png';\nimport twitch from '../../../common/images/twitch_icon.png';\nimport twitter from '../../../common/images/twitter_icon.png';\nimport Header from '../../../components/header';\nimport SVGIcon from '../../../components/icon/svg-icon';\nimport PowerFooter from '../../../components/power-footer';\nimport { useCustomNavigate, useModalOptions, useParticleAuth } from '../../../context';\nimport { useUserInfo } from '../../../context/hooks';\nimport useMessage from '../../../context/hooks/useMessage';\nimport { displayEmail, displayPhone, shortString } from '../../../utils/common-utils';\nimport { PageType } from '../accountVerify/config';\nimport BindSecurityAccountPrompt from '../bindSecurityAccountPrompt';\nimport styles from './index.less';\n\nconst AccountAndSecurity = () => {\n const { t } = useTranslation();\n const navigate = useCustomNavigate();\n const [promptSecurityAccount, setPromptSecurityAccount] = useState(false);\n const { setPaymentVerify, showSelectSecurityAccount, setPaymentPassword } = useParticleAuth();\n const { userInfo } = useUserInfo();\n const { modalOptions } = useModalOptions();\n const message = useMessage();\n\n const hasMasterPassword = useMemo(() => {\n return checkHasMasterPassword();\n }, [userInfo]);\n\n const formatId = (id?: string) => {\n const provider = userInfo?.thirdparty_user_info?.provider;\n if (provider === AuthType.jwt) {\n return id?.replace(`${modalOptions.projectId}:`, '');\n }\n return id;\n };\n\n const icons = {\n email,\n phone,\n facebook,\n google,\n apple,\n twitter,\n twitterv1: twitter,\n discord,\n github,\n twitch,\n microsoft,\n linkedin,\n jwt,\n telegram,\n };\n\n // 当前登录账号类型\n const currentAuthType = useMemo(() => {\n let authType = getLatestAuthType();\n if (!authType) {\n authType = (userInfo?.thirdparty_user_info?.provider as AuthType) || 'email';\n }\n if ((authType as string) === 'twitterv1') {\n authType = AuthType.twitter;\n }\n return authType as AuthType;\n }, [userInfo]);\n\n // 当前登录账号\n const currentAccount = useMemo(() => {\n let result = '';\n if (currentAuthType && userInfo) {\n result =\n // @ts-ignore\n userInfo[`${currentAuthType}`] ||\n // @ts-ignore\n userInfo[`${currentAuthType}_email`] ||\n // @ts-ignore\n shortString(formatId(userInfo[`${currentAuthType}_id`]));\n }\n return (\n result ||\n userInfo?.email ||\n userInfo?.phone ||\n userInfo?.thirdparty_user_info?.user_info?.email ||\n shortString(formatId(userInfo?.thirdparty_user_info?.user_info?.id || ''))\n );\n }, [currentAuthType, userInfo]);\n\n const setSecurityAccount = (type: 'phone' | 'email') => {\n if (\n (userInfo?.security_account?.email && !userInfo?.security_account?.phone) ||\n (!userInfo?.security_account?.email && userInfo?.security_account?.phone)\n ) {\n // 设置安全账号,需先验证另一个安全账号\n navigate('/account/verify', {\n state: {\n account: userInfo?.security_account?.email || userInfo.security_account?.phone,\n authType: type,\n redirectUrl: '/account/security',\n pageType: PageType.VerifySecurityAccount_SetSecurityAccount,\n },\n });\n } else {\n navigate('/account/bind', {\n state: {\n accountType: type,\n redirectUrl: '/account/security',\n },\n });\n }\n };\n\n const chooseVerifyType = () => {\n if (userInfo?.security_account?.email && userInfo?.security_account?.phone) {\n showSelectSecurityAccount(true);\n } else {\n navigate('/account/set-password', {\n state: {\n account: userInfo?.security_account?.email || userInfo?.security_account?.phone,\n },\n });\n }\n };\n\n /**\n * 关闭支付密码\n */\n const closePaymentPassword = () => {\n setPaymentVerify({\n visible: true,\n type: 'close',\n onVerifyCompleted: (password) => {\n deletePaymentPassword(password)\n .then((result) => {\n message.success(t('account.close_success'));\n syncUserInfo();\n })\n .catch((error) => {\n error.message && message.error(error.message);\n console.log('closePaymentPassword Error', error);\n });\n },\n });\n };\n\n const isCanBack = useMemo(() => {\n return true;\n }, []);\n\n const goBack = () => {\n navigate(-1);\n };\n\n const changeMasterPassword = () => {\n navigate('/account/master-password/change');\n };\n\n const setMasterPassword = () => {\n navigate('/account/master-password');\n };\n\n const aboutMasterPassword = () => {\n navigate('/account/master-password/description');\n };\n\n const hasSecurityAccount = useMemo(\n () => userInfo?.security_account?.email || userInfo?.security_account?.phone,\n [userInfo?.security_account?.email, userInfo?.security_account?.phone]\n );\n\n useEffect(() => {\n syncUserInfo().catch((e) => console.log('syncUserInfo', e));\n }, []);\n\n return (\n \n \n {isCanBack && {t('account.account_and_security')} }\n {!isCanBack && {t('account.account_and_security')} }\n
\n\n \n
\n\n {t('account.account')}
\n \n 
\n {\n if (hasSecurityAccount) {\n navigate('/login-account');\n } else {\n setPromptSecurityAccount(true);\n }\n }}\n >\n {t('account.more_login_account')}\n
\n {currentAccount}
\n \n {\n navigate('/manageDevices/deviceList');\n }}\n >\n
\n {t('new.authorization')}
\n {t('account.security')}
\n\n {/* master password */}\n \n
\n\n \n
\n {t('account.master_password')}
\n \n {t('account.learn_more')}\n
\n \n
\n {hasMasterPassword && (\n {t('account.master_password_tip')}
\n {!hasMasterPassword && (\n \n {t('account.set')}\n
\n )}\n \n
\n )}\n {t('account.change_master_password')}
\n \n
\n\n {t('account.verification_security')}
\n{t('account.verification_security_tip')}
\n\n\n
\n {t('account.email')}
\n\n {displayEmail(userInfo?.security_account?.email || '') || (\n setSecurityAccount('email')}>\n {t('account.set')}\n
\n )}\n \n
\n {t('account.mobile')}
\n {displayPhone(userInfo?.security_account?.phone || '') || (\n setSecurityAccount('phone')}>\n {t('account.set')}\n
\n )}\n \n
\n )}\n \n \n {t('account.payment_security')}
\n{t('account.payment_password_hint')}
\n\n {userInfo?.security_account?.has_set_payment_password ? (\n <>\n navigate('/account/change-password')}>\n
\n {t('account.change_payment_password')}
\n \n
\n {t('account.forgot_payment_password')}
\n \n
\n \n ) : (\n {t('account.close_payment_password')}
\n \n {\n if (hasSecurityAccount) {\n setPaymentPassword();\n } else {\n setPromptSecurityAccount(true);\n }\n }}\n >\n {t('account.set')}\n
\n {t('account.payment_password')}
\n \n \n {t('account.login_account')} \n
\n \n\n \n
\n );\n })}\n {t('account.login_account_hint')}
\n \n {accountList?.map((item, index) => {\n return (\n {\n selectedAuthType = item.type;\n toLoginAccountBind(item);\n }}\n key={index}\n >\n 
\n \n {encryptValue(item.value || item.id) || t('account.not_linked')}\n
\n {item.name}
\n \n \n {t('new.authorization')} \n
\n \n
\n )}\n {t('new.authorization_tips')}
\n {loading ? (\n \n
\n ) : (\n \n {deviceList?.map((item, index) => {\n return (\n {\n navigate('/manageDevices/deviceDetails', {\n state: {\n loginDeviceInfo: item,\n },\n });\n }}\n >\n
\n );\n })}\n \n
\n \n
\n {item.project_app_name}
\n {item.updated_at}
\n \n {item.isCurrent &&
\n {t('new.current')}
}\n \n \n
\n \n );\n};\n\nexport default DeviceList;\n"]}\n {t('new.details')} \n {\n return authCoreModal.rootBody as HTMLDivElement;\n }}\n >\n
\n \n\n \n
\n \n
\n \n
\n {t('new.app')}
\n {loginDeviceInfo.project_app_name || '-'}
\n \n
\n {t('new.device')}
\n {loginDeviceInfo.device || '-'}
\n \n
\n {t('new.authorized_time')}
\n {loginDeviceInfo.updated_at || '-'}
\n \n
\n {t('new.login_method')}
\n \n {(loginDeviceInfo.login_channel || '-').replace('Twitterv1', 'Twitter')}\n
\n \n
\n {t('new.ip')}
\n {loginDeviceInfo?.location?.ip || '-'}
\n \n
\n {t('new.country')}
\n \n {loginDeviceInfo?.location?.country_name ||\n loginDeviceInfo?.location?.country_code ||\n '-'}\n
\n \n
\n {t('new.city')}
\n {loginDeviceInfo?.location?.city || '-'}
\n \n {\n openDeleteModal();\n }}\n >\n {t('new.delete_access')}\n \n
\n \n {\n closeDeleteModal();\n }}\n >\n
\n \n {t('new.delete_access_to_n').format(\n loginDeviceInfo?.project_app_name,\n loginDeviceInfo?.device\n )}\n
\n \n {\n closeDeleteModal();\n }}\n >\n {t('common.cancel')}\n \n {\n setDeleteLoading(true);\n setTimeout(() => {\n deleteAuthorizationDApp(loginDeviceInfo?.project_app_uuid)\n .finally(() => {\n setDeleteLoading(false);\n })\n .then((res: boolean) => {\n if (res) {\n closeDeleteModal();\n setTimeout(() => {\n navigate(-1);\n }, 500);\n }\n })\n .catch((error: any) => {\n message.error(error.message);\n console.log('deleteAuthorization Error', error);\n });\n }, 500);\n }}\n >\n {t('new.delete')}\n \n
\n