@particle-network/auth-core-modal
Version:
Auth Core provides MPC (Multi-Party Computation)-based threshold signatures.
126 lines (122 loc) • 7.57 kB
JavaScript
"use client";
import {
ParticleKeywords_default
} from "./chunk-HOWV7WBJ.js";
import {
useError
} from "./chunk-TEJDHOQA.js";
import "./chunk-IH2LJUZK.js";
import {
svg_icon_default
} from "./chunk-RE3TPCDB.js";
import "./chunk-3DLMKWWJ.js";
import {
useCustomNavigate
} from "./chunk-YWLFYVHN.js";
import "./chunk-LQ53OFQ3.js";
// src/pages/account/setPaymentPassword/index.tsx
import { useRequest } from "ahooks";
import { Button } from "antd";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { updatePaymentPassword } from "@particle-network/auth-core";
import React from "react";
// src/pages/account/setPaymentPassword/index.less
var setPaymentPassword_default = ".set-password-container {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n height: 100%;\n overflow: hidden;\n color: var(--text-color);\n}\n.set-password-container .display-none {\n display: none;\n}\n.set-password-container .password-mistake {\n width: 100%;\n height: auto;\n padding-bottom: 20px;\n margin-top: 50px;\n text-align: center;\n color: var(--error-color);\n}\n.set-password-container .payment-title {\n margin-top: 60px;\n font-size: 22px;\n color: var(--text-color);\n}\n.set-password-container .patment-tips1 {\n width: 80vw;\n margin-top: 30px;\n font-size: 14px;\n text-align: center;\n color: var(--text-color);\n}\n@media (min-width: 600px) {\n .set-password-container .patment-tips1 {\n width: calc(80 * var(--vw));\n }\n}\n.set-password-container .payment-buttons2 {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: auto;\n margin-top: 50px;\n}\n.set-password-container .payment-buttons2 .payment-main-button2 {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 90%;\n height: 47px;\n border: none !important;\n border-radius: var(--primary-btn-border-radius);\n outline: none;\n font-weight: 500;\n font-size: var(--primary-btn-font-size);\n color: var(--primary-btn-color);\n background: var(--primary-btn-background-color);\n opacity: 1;\n}\n.set-password-container .payment-buttons2 .payment-main-button2:hover {\n color: var(--primary-btn-color);\n background: var(--primary-btn-background-color);\n}\n.set-password-container .payment-buttons2 .payment-main-button2:disabled {\n opacity: 0.5;\n}\n@media (max-width: 565px) {\n .set-password-container .payment-buttons2 {\n height: calc(var(--doc-height) - 245px - 106px - 31px - 42px);\n margin-top: 0;\n }\n}\n.set-password-container .success-icon {\n width: 50px;\n height: 50px;\n margin-top: 60px;\n}\n.set-password-container .payment-desc-1 {\n box-sizing: border-box;\n margin: 15px 0 0;\n font-weight: 400;\n font-size: 14px;\n line-height: 16px;\n text-align: center;\n color: var(--text-color);\n}\n.set-password-container .keyboard-container {\n width: 100%;\n padding-right: 30px;\n padding-left: 30px;\n margin-top: 50px;\n}\n@media (max-width: 565px) {\n .set-password-container .keyboard-container {\n margin-top: 10px;\n }\n}\n";
// src/pages/account/setPaymentPassword/index.tsx
var SetPaymentPassword = (props) => {
const navigate = useCustomNavigate();
const { t } = useTranslation();
const state = props;
const [step, setStep] = useState("loading");
const [codeVal, setCodeVal] = useState("");
const [password, setPassword] = useState("");
const [passwordMistake, setPasswordMistake] = useState();
const [passwordMatched, setPasswordMatched] = useState(false);
const { errorHandle } = useError();
const { loading: updateLoading, run: runUpdate } = useRequest(updatePaymentPassword, {
manual: true,
onSuccess: () => {
navigate(-1);
},
onError: (error) => {
console.log("update password error", error);
errorHandle(error);
if ((error == null ? void 0 : error.error_code) === 50104) {
setCodeVal("");
setPassword("");
setPasswordMistake(false);
setStep("password");
}
}
});
useEffect(() => {
setStep("password");
}, []);
const checkPassword = (value) => {
if (value.length === 6) {
if (value === password) {
setCodeVal(value);
setPasswordMatched(true);
} else {
setCodeVal("");
setPassword("");
setPasswordMistake(true);
setStep("password");
setPasswordMatched(false);
}
} else {
setCodeVal(value);
setPasswordMatched(false);
}
};
const submitPassword = () => {
if (state == null ? void 0 : state.account) {
navigate("/account/verify", {
state: {
account: state == null ? void 0 : state.account,
password: codeVal,
pageType: "reset_payment_password" /* ResetPaymentPassword */
}
});
} else if (state == null ? void 0 : state.oldPassword) {
const oldPassword = state == null ? void 0 : state.oldPassword;
const password2 = codeVal;
runUpdate({
password: password2,
oldPassword
});
}
};
if (step === "confirm") {
return /* @__PURE__ */ React.createElement("div", { className: "set-password-container" }, /* @__PURE__ */ React.createElement("style", null, setPaymentPassword_default), /* @__PURE__ */ React.createElement(svg_icon_default, { className: "icon-navigation-back", name: "circle_back", onClick: () => navigate(-1) }), /* @__PURE__ */ React.createElement("h2", { className: "payment-title" }, t("account.set_payment_password")), /* @__PURE__ */ React.createElement("p", { className: "payment-desc-1" }, t("account.re_enter_confirm")), /* @__PURE__ */ React.createElement("div", { className: "keyboard-container" }, /* @__PURE__ */ React.createElement(ParticleKeywords_default, { onChange: checkPassword, value: codeVal })), /* @__PURE__ */ React.createElement("div", { className: "payment-buttons2" }, /* @__PURE__ */ React.createElement(
Button,
{
className: "payment-main-button2",
disabled: !passwordMatched,
loading: (state == null ? void 0 : state.oldPassword) ? updateLoading : false,
onClick: submitPassword
},
t("account.done")
)));
}
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("style", null, setPaymentPassword_default), /* @__PURE__ */ React.createElement("div", { className: "set-password-container" }, /* @__PURE__ */ React.createElement(svg_icon_default, { className: "icon-navigation-back", name: "circle_back", onClick: () => navigate(-1) }), /* @__PURE__ */ React.createElement("h2", { className: "payment-title" }, t("account.set_payment_password")), /* @__PURE__ */ React.createElement("p", { className: "payment-desc-1" }, t("account.set_payment_password_tip")), /* @__PURE__ */ React.createElement("div", { className: "keyboard-container" }, /* @__PURE__ */ React.createElement(
ParticleKeywords_default,
{
onChange: (e) => {
setPassword(e);
if (e.length > 5) {
setPasswordMistake(false);
setPasswordMatched(false);
setStep("confirm");
}
},
value: password
}
)), passwordMistake && /* @__PURE__ */ React.createElement("div", { className: "password-mistake" }, t("account.password_do_not_match"))));
};
var setPaymentPassword_default2 = SetPaymentPassword;
export {
setPaymentPassword_default2 as default
};
//# sourceMappingURL=setPaymentPassword-K367ROAS.js.map