分离编辑Phone Email

src/assets/singlesvg/store-email.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#3BC117" version="1.1" id="Uploaded to svgrepo.com" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="800px" height="800px" viewBox="0 0 32 32" xml:space="preserve">
+    <path fill="#3BC117" d="M22.667 4.667h-13.333c-4 0-6.667 2-6.667 6.667v9.333c0 4.667 2.667 6.667 6.667 6.667h13.333c4 0 6.667-2 6.667-6.667v-9.333c0-4.667-2.667-6.667-6.667-6.667zM23.293 12.787l-4.173 3.333c-0.88 0.707-2 1.053-3.12 1.053s-2.253-0.347-3.12-1.053l-4.173-3.333c-0.427-0.347-0.493-0.987-0.16-1.413 0.347-0.427 0.973-0.507 1.4-0.16l4.173 3.333c1.013 0.813 2.733 0.813 3.747 0l4.173-3.333c0.427-0.347 1.067-0.28 1.4 0.16 0.347 0.427 0.28 1.067-0.147 1.413z"></path></svg>

src/assets/singlesvg/store-phone.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#3BC117" version="1.1" id="Uploaded to svgrepo.com" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="800px" height="800px" viewBox="0 0 32 32" xml:space="preserve">
+    <path d="M21.653 2.667h-11.307c-3.68 0-5.013 1.333-5.013 5.080v16.507c0 3.747 1.333 5.080 5.013 5.080h11.293c3.693 0 5.027-1.333 5.027-5.080v-16.507c0-3.747-1.333-5.080-5.013-5.080zM16 25.733c-1.28 0-2.333-1.053-2.333-2.333s1.053-2.333 2.333-2.333c1.28 0 2.333 1.053 2.333 2.333s-1.053 2.333-2.333 2.333zM18.667 8.333h-5.333c-0.547 0-1-0.453-1-1s0.453-1 1-1h5.333c0.547 0 1 0.453 1 1s-0.453 1-1 1z"></path></svg>

src/constants/routes.js

@@ -41,7 +41,9 @@ const ROUTE_PATH={
     KYC:"#/kyc",
     CHECK_IN:"#/checkIn",
     SPORTS:"/sports",
-    RACING:"/racing"
+    RACING:"/racing",
+    EDIT_PHONE:"#/editPhone",
+    EDIT_EMAIL:"#/editEmail"
 }
 
 export {

src/db/routes.js

@@ -412,4 +412,30 @@ export const routes=[
         lpath:"#/signin",//登录path
         subs:[]
     },
+    {
+        path: "#/editPhone",
+        type: 1,
+        side: 0,
+        block:1,//块排序
+        title: "links.route_title.edit_phone",
+        icon:"",
+        fill:";;",//icon 颜色 默认 选中 本身颜色
+        component:"editProfile",
+        login:1,//0,1 检不检查登录
+        lpath:"#/signin",//登录path
+        subs:[]
+    },
+    {
+        path: "#/editEmail",
+        type: 1,
+        side: 0,
+        block:1,//块排序
+        title: "links.route_title.edit_email",
+        icon:"",
+        fill:";;",//icon 颜色 默认 选中 本身颜色
+        component:"editProfile",
+        login:1,//0,1 检不检查登录
+        lpath:"#/signin",//登录path
+        subs:[]
+    },
 ]

src/locales/languages/en_US.json

@@ -21,7 +21,9 @@
       "msg": "Message",
       "agent_policy": "Referral Policy",
       "cashwheel": "Receive {D}100 for Free",
-      "check_in": "Daily Bonus"
+      "check_in": "Daily Bonus",
+      "edit_phone": "Edit Phone",
+      "edit_email": "Edit Email"
     },
     "casino": "Casino",
     "slots": "Slots",
@@ -535,7 +537,11 @@
     "login_pass_title": "Change Login Password",
     "login_pass_des": "Change your login password regularly to keep it unique and secure.",
     "withdraw_pass_title": "Change Withdraw Password",
-    "withdraw_pass_des": "Change your withdraw password regularly to keep it unique and secure."
+    "withdraw_pass_des": "Change your withdraw password regularly to keep it unique and secure.",
+    "phone_title": "Change Phone",
+    "phone_des": "Change your phone regularly to keep it unique and secure.",
+    "email_title": "Change Email",
+    "email_des": "Change your email regularly to keep it unique and secure."
   },
   "gameRoom": {
     "slect_title": "Room Selection",

src/locales/languages/es_MX.json

@@ -19,7 +19,9 @@
       "msg": "Mensaje",
       "agent_policy": "Política de Agente",
       "cashwheel": "Recibe {D}100 gratis",
-      "check_in": "Bono Diario"
+      "check_in": "Bono Diario",
+      "edit_phone": "Editar Teléfono",
+      "edit_email": "Editar correo electrónico"
     },
     "casino": "Casino",
     "slots": "Tragamonedas",
@@ -524,7 +526,11 @@
     "login_pass_title": "Cambiar Contraseña de Inicio de Sesión",
     "login_pass_des": "Cambia tu contraseña de inicio de sesión regularmente para mantenerla única y segura.",
     "withdraw_pass_title": "Cambiar Contraseña de Retiro",
-    "withdraw_pass_des": "Cambia tu contraseña de retiro regularmente para mantenerla única y segura."
+    "withdraw_pass_des": "Cambia tu contraseña de retiro regularmente para mantenerla única y segura.",
+    "phone_title": "Cambiar de teléfono",
+    "phone_des": "Cambie su teléfono periódicamente para mantenerlo único y seguro.",
+    "email_title": "Cambiar correo electrónico",
+    "email_des": "Cambie periódicamente su correo electrónico para mantenerlo único y seguro."
   },
   "gameRoom": {
     "slect_title": "Selección de Sala",

src/locales/languages/pt_BR.json

@@ -19,7 +19,9 @@
       "msg": "Mensagem",
       "agent_policy": "Política de Agente",
       "cashwheel": "Receba {D}100 grátis",
-      "check_in": "Bônus Diário"
+      "check_in": "Bônus Diário",
+      "edit_phone": "Editar telefone",
+      "edit_email": "Editar e-mail"
     },
     "casino": "Cassino",
     "slots": "Caça-níqueis",
@@ -524,7 +526,11 @@
     "login_pass_title": "Alterar Senha de Login",
     "login_pass_des": "Altere sua senha de login regularmente para mantê-la única e segura.",
     "withdraw_pass_title": "Alterar Senha de Retirada",
-    "withdraw_pass_des": "Altere sua senha de retirada regularmente para mantê-la única e segura."
+    "withdraw_pass_des": "Altere sua senha de retirada regularmente para mantê-la única e segura.",
+    "phone_title": "Alterar telefone",
+    "phone_des": "Troque seu telefone regularmente para mantê-lo único e seguro.",
+    "email_title": "Alterar e-mail",
+    "email_des": "Altere seu e-mail regularmente para mantê-lo único e seguro."
   },
   "gameRoom": {
     "slect_title": "Seleção de Sala",

src/locales/languages/ru_RU.json

@@ -19,7 +19,9 @@
       "msg": "Сообщение",
       "agent_policy": "Политика реферальной программы",
       "cashwheel": "Получите 100{D} БЕСПЛАТНО",
-      "check_in": "ЕЖЕДНЕВНЫЙ БОНУС"
+      "check_in": "ЕЖЕДНЕВНЫЙ БОНУС",
+      "edit_phone": "Изменить телефон",
+      "edit_email": "Изменить адрес электронной почты"
     },
     "casino": "Казино",
     "slots": "Слоты",
@@ -524,7 +526,11 @@
     "login_pass_title": "Изменить пароль для входа",
     "login_pass_des": "Регулярно меняйте пароль для входа, чтобы повысить уровень безопасности аккаунта.",
     "withdraw_pass_title": "Изменить пароль для вывода",
-    "withdraw_pass_des": "Регулярно меняйте пароль для вывода, чтобы повысить уровень безопасности аккаунта."
+    "withdraw_pass_des": "Регулярно меняйте пароль для вывода, чтобы повысить уровень безопасности аккаунта.",
+    "phone_title": "Изменить телефон",
+    "phone_des": "Регулярно меняйте свой телефон, чтобы он оставался уникальным и безопасным.",
+    "email_title": "Изменить адрес электронной почты",
+    "email_des": "Регулярно меняйте свой адрес электронной почты, чтобы он оставался уникальным и безопасным."
   },
   "gameRoom": {
     "slect_title": "Выбор комнаты",

src/locales/languages/zh_TW.json

@@ -19,7 +19,9 @@
       "msg": "消息",
       "agent_policy": "代理政策",
       "cashwheel": "免費獲得{D}100",
-      "check_in": "每日獎金"
+      "check_in": "每日獎金",
+      "edit_phone": "編輯電話",
+      "edit_email": "編輯電子郵件"
     },
     "casino": "賭場",
     "slots": "老虎機",
@@ -524,7 +526,11 @@
     "login_pass_title": "更改登入密碼",
     "login_pass_des": "定期更改您的登入密碼，保持其獨特和安全。",
     "withdraw_pass_title": "更改提現密碼",
-    "withdraw_pass_des": "定期更改您的提現密碼，保持其獨特和安全。"
+    "withdraw_pass_des": "定期更改您的提現密碼，保持其獨特和安全。",
+    "phone_title": "更換電話",
+    "phone_des": "定期更換您的手機以保持其獨特性和安全性。",
+    "email_title": "更改電子郵件",
+    "email_des": "定期更改您的電子郵件以保持其獨特和安全。"
   },
   "gameRoom": {
     "slect_title": "房間選擇",

src/widgets/WBindPhone/index.jsx

@@ -51,6 +51,10 @@ const WBindPhone=({})=>{
     const validatePhone=(value)=>{
         return validateCountryPhone(country,value);
     }
+    const getPhoneError=()=>{
+        if (country==="55")return i18n.t("form_errors.phone_" + country);
+        else return i18n.t("form_errors.phone");
+    }
     const onBindCB=(code)=>{
         if (code===200){
             hide();
@@ -132,7 +136,7 @@ const WBindPhone=({})=>{
                                name="phone"
                                rules={{required: true, validate: validatePhone}}
                                render={({field: {ref, onChange, value}, fieldState: {error}}) => {
-                                   let message = error ? i18n.t("form_errors.phone_" + country) : "";
+                                   let message = error ? getPhoneError() : "";
                                    return (<PhoneInput
                                        className={classNames({'input-control--error': error})}
                                        value={value}

src/widgets/WEditProfile/index.jsx

@@ -4,7 +4,7 @@ import {APP_AVATAR, REQ_STATUS} from "@api/config";
 import LazyImage from "@components/LazyImage";
 import {useDispatch, useSelector} from "react-redux";
 import {getChangeEmailStatus, getChangeInfoStatus, getChangePhoneStatus, getUserInfo} from "@features/mainSlice";
-import React, {useState} from "react";
+import React, {useEffect, useState} from "react";
 import {Controller, useForm} from "react-hook-form";
 import classNames from "classnames";
 import PhoneInput from "@components/UInput/PhoneInput";
@@ -12,10 +12,19 @@ import {ReactComponent as Male} from '@assets/singlesvg/gener/male.svg';
 import {ReactComponent as FeMale} from '@assets/singlesvg/gener/female.svg';
 import SmallLoading from "@components/SmallLoading";
 import {reqChangeEmail, reqChangeInfo, reqChangePhone} from "@features/api";
-import {APP_GENDER} from "@constants/app";
-import {validateCountryPhone} from "@utils/helpers";
+import {APP_GENDER, APP_THEME} from "@constants/app";
+import {validateCountryPhone, validateEmail} from "@utils/helpers";
 import LazyImgix from "@components/Imgix/LazyImgix";
+import {useLocation} from "react-router";
+import {ROUTE_PATH} from "@constants/routes";
+import logo_dark from '@assets/logo/logo.png';
+import logo_light from '@assets/logo/logo_w.png';
+import {useThemeProvider} from "@contexts/themeContext";
 const i18n=global.i18n;
+
+const TYPE_BASE="base";
+const TYPE_PHONE="phone";
+const TYPE_EMAIL="email";
 const getAvatarUrl=(id)=>{
     return `${APP_AVATAR}avatar_${id}.png?auto=format,compress&cs=srgb`;
 }
@@ -52,9 +61,20 @@ const WEditProfile=({close})=>{
     const dispatch = useDispatch();
     const [avatarID,setAvatarID]=useState(user.FaceID);
     const [country, setCountry] = useState(user.RegisterLocation);
+    const [showType,setShowType]=useState(TYPE_BASE);
+    const {pathname,hash} = useLocation();
+    const {theme,isMobile} = useThemeProvider();
+    const logourl=(theme===APP_THEME.DARK?logo_dark:logo_light);
     const validatePhone=(value)=>{
         return validateCountryPhone(country,value);
     }
+    const validateMail=(value)=>{
+        return validateEmail(value);
+    }
+    const getPhoneError=()=>{
+        if (country==="55")return i18n.t("form_errors.phone_" + country);
+        else return i18n.t("form_errors.phone");
+    }
     const getPhone=()=>{
         let loc=user.RegisterLocation;
         let phone=user.Phone;
@@ -76,6 +96,17 @@ const WEditProfile=({close})=>{
             Email:user.Email
         }
     });
+    useEffect(() => {
+        if (hash===ROUTE_PATH.EDIT_PROFILE){
+            setShowType(TYPE_BASE);
+        }
+        else if (hash===ROUTE_PATH.EDIT_PHONE){
+            setShowType(TYPE_PHONE);
+        }
+        else if (hash===ROUTE_PATH.EDIT_EMAIL){
+            setShowType(TYPE_EMAIL);
+        }
+    }, [pathname,hash]);
     const renderAvatar=()=>{
         return (
             <div className={styles.avatar_con}>
@@ -136,7 +167,7 @@ const WEditProfile=({close})=>{
                             name="Phone"
                             rules={{required: true,validate:validatePhone}}
                             render={({field: {ref, onChange, value}, fieldState: {error}}) => {
-                                let message=error?i18n.t("form_errors.phone_"+country):"";
+                                let message = error ? getPhoneError() : "";
                                 return (
                                     <PhoneInput
                                         className={classNames({'input-control--error': error})}
@@ -161,20 +192,23 @@ const WEditProfile=({close})=>{
                 <div className={styles.title}>{i18n.t("user.title_email")}</div>
                 <Controller control={control}
                             name="Email"
-                            // rules={{required: true}}
+                            rules={{validate:validateMail}}
                             render={({field: {ref, onChange, value}, fieldState: {error}}) => (
-                                <div className={classNames("input-control",{'input-control--error': error})}>
-                                    <input
-                                        value={value}
-                                        type="tel"
-                                        ref={ref}
-                                        onChange={(e)=>{
-                                            onChange(e.target.value);
-                                        }}
-                                        placeholder={i18n.t('user.email_ph')}
-                                    />
+                                <div className={`d-flex flex-column g-6`}>
+                                    <div className={classNames("input-control",{'input-control--error': error})}>
+                                        <input
+                                            value={value}
+                                            ref={ref}
+                                            onChange={(e)=>{
+                                                onChange(e.target.value);
+                                            }}
+                                            placeholder={i18n.t('user.email_ph')}
+                                        />
+                                    </div>
+                                    {
+                                        error?(<div className="input-prompt-error">{i18n.t('form_errors.email')}</div>):(<></>)
+                                    }
                                 </div>
-
                             )}
                 />
             </div>
@@ -221,10 +255,10 @@ const WEditProfile=({close})=>{
             </div>
         )
     }
-    const renderSubmit=()=>{
+    const renderSubmit=(isTop=true)=>{
         let isLoading=getIsLock();
         return (
-            <div className={styles.submit_btn_con}>
+            <div className={`${isTop?styles.submit_btn_con:''}`}>
                 <button className={"button-green"}>
                     {
                         isLoading?(<SmallLoading fill={"#fff"}/>):i18n.t("user.submit_btn")
@@ -253,8 +287,9 @@ const WEditProfile=({close})=>{
                 if (key==="Phone"){
                     isSubmit_ph=true;
                     change_ph[key]=value;
+                    change_ph["RegisterLocation"]=country;
                 }
-                else if (key=="Email"){
+                else if (key==="Email"){
                     isSubmit_em=true;
                     change_em[key]=value;
                 }
@@ -271,30 +306,82 @@ const WEditProfile=({close})=>{
         change_ph.callback=onCallback;
         change_em.callback=onCallback;
         if (isSubmit)dispatch(reqChangeInfo(change));
+        // data.callback=onCallback;
+        // dispatch(reqChangeInfo(data));
         if (isSubmit_ph)dispatch(reqChangePhone(change_ph));
         if (isSubmit_em)dispatch(reqChangeEmail(change_em));
     }
     const renderForm=()=>{
         return (
-            <form autoComplete="off" className={styles.user_form} onSubmit={handleSubmit((data) => {
+            <form key={"base"} autoComplete="off" className={styles.user_form} onSubmit={handleSubmit((data) => {
                 handleChangeInfo(data);
             })}>
                 {renderUsername()}
-                {renderPhone()}
-                {renderEmail()}
+                {/*{renderPhone()}*/}
+                {/*{renderEmail()}*/}
                 {renderGender()}
                 {renderSelectAvatar()}
                 {renderSubmit()}
             </form>
         )
     }
+    const renderEditBase=()=>{
+        return (
+            <div className={styles.container}>
+                <Spring type="slideUp" className={styles.content}>
+                    {renderAvatar()}
+                    {renderForm()}
+                </Spring>
+            </div>
+        )
+    }
+    const renderLogo=()=>{
+        return (
+            <div className={styles.l_logo}>
+                <img className={styles.logo_img} src={logourl}/>
+            </div>
+        )
+    }
+    const renderEditPhone=()=>{
+        return (
+            <div className={styles.container}>
+                <Spring type="slideUp" className={styles.content}>
+                    {renderLogo()}
+                    <form key={"phone"} autoComplete="off" className={styles.user_form} onSubmit={handleSubmit((data) => {
+                        handleChangeInfo(data);
+                    })}>
+                        {renderPhone()}
+                        {renderSubmit(false)}
+                    </form>
+                </Spring>
+            </div>
+        )
+    }
+    const renderEditEmail=()=>{
+        return (
+            <div className={styles.container}>
+                <Spring type="slideUp" className={styles.content}>
+                    {renderLogo()}
+                    <form key={"email"} autoComplete="off" className={styles.user_form} onSubmit={handleSubmit((data) => {
+                        handleChangeInfo(data);
+                    })}>
+                        {renderEmail()}
+                        {renderSubmit(false)}
+                    </form>
+                </Spring>
+            </div>
+        )
+    }
+    const renderView=()=>{
+        if (showType === TYPE_BASE) return renderEditBase();
+        else if (showType===TYPE_PHONE)return renderEditPhone();
+        else if (showType===TYPE_EMAIL)return renderEditEmail();
+        return (<></>);
+    }
     return (
-        <div className={styles.container}>
-            <Spring type="slideUp" className={styles.content}>
-                {renderAvatar()}
-                {renderForm()}
-            </Spring>
-        </div>
+        <>
+            {renderView()}
+        </>
     )
 }
 export default WEditProfile;

src/widgets/WEditProfile/styles.module.scss

@@ -140,3 +140,15 @@
 .submit_btn_con{
   margin-top: 3rem;
 }
+.l_logo{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 10rem;
+  padding: 1rem;
+  & .logo_img{
+    width: 60%;
+    height: auto;
+  }
+}

src/widgets/WSecurity/index.jsx

@@ -2,6 +2,8 @@ import styles from './styles.module.scss';
 import Spring from "@components/Spring";
 import {ReactComponent as PhonePassIcon} from "@assets/singlesvg/mobile-password.svg";
 import {ReactComponent as WithdrawPassIcon} from "@assets/singlesvg/store-pass.svg";
+import {ReactComponent as EditPhoneIcon} from "@assets/singlesvg/store-phone.svg";
+import {ReactComponent as EditEmailIcon} from "@assets/singlesvg/store-email.svg";
 
 import React from "react";
 import {useNavigate} from "react-router-dom";
@@ -16,6 +18,38 @@ const WSecurity = ({ close }) => {
     const user=useSelector(getUserInfo);
     const dispatch = useDispatch();
     const isShowPWD=user != null && user.Phone != null && user.Phone !== "";
+    const renderPhone=()=>{
+        return (
+            isShowPWD? (
+                <div className={styles.item}>
+                    <div className={styles.item_title_con}>
+                        <EditPhoneIcon className={styles.icon}></EditPhoneIcon>
+                        <div className={styles.title}>{i18n.t("security.phone_title")}</div>
+                    </div>
+                    <div>{i18n.t("security.phone_des")}</div>
+                    <button className={`button-green ${styles.button}`} onClick={() => {
+                        navigate(ROUTE_PATH.EDIT_PHONE)
+                    }}>{i18n.t("security.phone_title")}</button>
+                </div>
+            ):(<></>)
+        )
+    }
+    const renderEmail=()=>{
+        return (
+            isShowPWD? (
+                <div className={styles.item}>
+                    <div className={styles.item_title_con}>
+                        <EditEmailIcon className={styles.icon}></EditEmailIcon>
+                        <div className={styles.title}>{i18n.t("security.email_title")}</div>
+                    </div>
+                    <div>{i18n.t("security.email_des")}</div>
+                    <button className={`button-green ${styles.button}`} onClick={() => {
+                        navigate(ROUTE_PATH.EDIT_EMAIL)
+                    }}>{i18n.t("security.email_title")}</button>
+                </div>
+            ):(<></>)
+        )
+    }
     return (
         <div className={styles.container}>
             <Spring className={styles.content} type={"slideUp"}>
@@ -50,6 +84,8 @@ const WSecurity = ({ close }) => {
                         navigate(ROUTE_PATH.CHANGE_PAY_PASS)
                     }}>{i18n.t("security.withdraw_pass_title")}</button>
                 </div>
+                {renderPhone()}
+                {renderEmail()}
             </Spring>
         </div>
     )