账号登录 区域选择

src/App.js

@@ -3,7 +3,7 @@
 import ReactGA from 'react-ga4';
 
 // utils
-import {lazy, Suspense, useState} from 'react';
+import React, {lazy, Suspense, useState} from 'react';
 
 // styles
 import ThemeStyles from '@styles/theme';
@@ -79,6 +79,7 @@ import {onChangeUser, onChangeUserID} from "@features/actions/mainAction";
 import {isInAppBrowser, isShowInstallBox, openUrlUseChrome} from "@utils/UAUtils";
 import WInstallBox from "@widgets/WInstallBox";
 import WMaintainBox from "@widgets/WMaintainBox";
+import WAreaSelect from "@widgets/WAreaSelect";
 const objInfo={
     gameID:0
 }
@@ -107,6 +108,8 @@ const App = () => {
     const guest=useSelector(getIsGuest);
     const popBindPhone=useSelector(getPopBindPhone);
     const [isMaintain, setIsMaintain] = useState(false);
+    //是否唤起选择area
+    const [isSelectArea, setIsSelectArea] = useState(false);
     const muiTheme = createTheme({
         direction: direction,
     });
@@ -210,6 +213,7 @@ const App = () => {
         // scroll to top on route change
         //检查是否维护
         if (checkMaintain())return;
+        if (checkAreaSelect())return;
         checkInviteCode();
         checkOpenInChrome();
         loadFont();
@@ -298,6 +302,17 @@ const App = () => {
         }
         return isopen;
     }
+    //检查选择地区
+    const checkAreaSelect=()=>{
+        let isopen=false;
+        let areaID=global.getLocalAreaID();
+        if (areaID<=0){
+            isopen=true;
+            setIsSelectArea(isopen);
+            global.showAreaSelect(false);
+        }
+        return isopen;
+    }
     //app Effect
     //初始化
     useEffect(() => {
@@ -372,6 +387,7 @@ const App = () => {
         if (isMaintain)return (
             <WMaintainBox open={true}></WMaintainBox>
         );
+        if (isSelectArea)return (<></>);
         return (
             <>
                 {
@@ -383,6 +399,7 @@ const App = () => {
     const renderPreload=()=>{
         //维护
         if (isMaintain)return (<></>);
+        if (isSelectArea)return (<></>);
         return (
             <>
                 {
@@ -391,6 +408,11 @@ const App = () => {
             </>
         )
     }
+    const renderAreaSelect=()=>{
+        return (
+            <WAreaSelect/>
+        )
+    }
 
     return (
         <CacheProvider value={cacheRtl}>
@@ -408,6 +430,7 @@ const App = () => {
                         {
                             renderPreload()
                         }
+                        {renderAreaSelect()}
                     </SidebarProvider>
                 </ThemeProvider>
             </MuiThemeProvider>

src/Global.js

@@ -1,8 +1,9 @@
 import i18n from './locales/index';
-import {LOCAL_WD_PASS, LOCAL_WD_PASS_SET_TIME} from "@constants/localkey";
+import {LOCAL_AREA_ID, LOCAL_WD_PASS, LOCAL_WD_PASS_SET_TIME} from "@constants/localkey";
 import {decrypt, encrypt, localStorageGet, localStorageSet} from "@utils/helpers";
 // import symbol from "@assets/symbol-defs.svg";
 // import symbol_m from "@assets/symbol-mobile.svg";
+import area from "@db/area";
 global.i18n=i18n;
 // global.symbol=symbol;
 // global.symbol_m=symbol_m;
@@ -100,10 +101,41 @@ global.showFirstPay=()=>{
 global.hideFirstPay=()=>{
     if (global.firstPay)global.firstPay.hide();
 }
-global.showAreaSelect=()=>{
-    if (global.areaSelect)global.areaSelect.show();
+global.showAreaSelect=(allowClose=true)=>{
+    if (global.areaSelect)global.areaSelect.show(allowClose);
 }
 global.hideAreaSelect=()=>{
     if (global.areaSelect)global.areaSelect.hide();
 }
+global.checkDomainArea=()=>{
+    let areaID=0;
+    let host=window.location.host;
+    for (let i = 0; i < area.length; i++) {
+        let item=area[i];
+        if (item){
+            let code=item.code;
+            if (host.startsWith(code))
+            {
+                areaID=item.id;
+                break;
+            }
+        }
+    }
+    return areaID;
+}
+global.getLocalAreaID=()=>{
+    let areaID=Number(localStorageGet(LOCAL_AREA_ID,0));
+    if (areaID===0){
+        let dAreaID=global.checkDomainArea();
+        if (dAreaID!==0){
+            localStorageSet(LOCAL_AREA_ID,dAreaID+"");
+            areaID=dAreaID;
+        }
+    }
+    return areaID;
+}
+global.setLocalAreaID=(value)=>{
+    localStorageSet(LOCAL_AREA_ID,value+"");
+    window.location.reload();
+}
 //wd pass

src/api/config.js

@@ -1,4 +1,5 @@
 import {getDomainSuffix} from "@utils/helpers";
+import areaApi from "@db/areaApi";
 
 export const REQ_STATUS={
     NONE:"NONE",
@@ -6,9 +7,20 @@ export const REQ_STATUS={
     IDLE:"IDLE",
     FAILED:"FAILED"
 }
+const getAreaApi=()=>{
+    let areaID=global.getLocalAreaID();
+    for (let i = 0; i < areaApi.length; i++) {
+        let apiItem=areaApi[i];
+        if (apiItem.areaID === areaID){
+            return apiItem.api;
+        }
+    }
+    return "https://br.24b.pro/";
+}
 
 // export const BASE_API="https://api.24680.com/";
-export const BASE_API=getDomainSuffix()==="pro"?"https://test.24b.pro/":"https://br.24b.pro/";
+// export const BASE_API=getDomainSuffix()==="pro"?"https://test.24b.pro/":"https://br.24b.pro/";
+export const BASE_API=getDomainSuffix()==="pro"?"https://test.24b.pro/":getAreaApi();
 
 export const BASE_PREFIX="game/";
 

src/components/UInput/PhoneInput.jsx

@@ -2,26 +2,46 @@ import styles from "./styles.module.scss";
 import {useEffect, useRef, useState} from "react";
 import SvgIcon from "@components/SvgIcon";
 import {useThemeProvider} from "@contexts/themeContext";
-import {Popover, Typography} from "@mui/material";
-import {useSelector} from "react-redux";
-import {getArea} from "@features/mainSlice";
+import {Popover} from "@mui/material";
 import areaCode from "@db/areaCode";
 import RadioBtn from "@components/RadioBtn";
 import MuiDrawer from "@mui/material/Drawer";
+import {localStorageGet, localStorageSet} from "@utils/helpers";
+import {LOCAL_DEFAULT_COUNTRY} from "@constants/localkey";
 const i18n=global.i18n;
-
+const getDefaultAreaCode=(area)=>{
+    let code="";
+    let defaultCode=localStorageGet(LOCAL_DEFAULT_COUNTRY,"");
+    let first="";
+    for (let i = 0; i < areaCode.length; i++) {
+        let item=areaCode[i];
+        let aCode=item.areaCode;
+        if (item.areaID===area){
+            if (first==="")first=aCode;
+            if (aCode===defaultCode){
+                code=defaultCode;
+                break;
+            }
+        }
+    }
+    if (code==="")code=first;
+    return code;
+}
 const PhoneInput = ({innerRef, ...props}) => {
-    const [country, setCountry] = useState("55");
+    const area=global.getLocalAreaID();
+    // const [country, setCountry] = useState("55");
+    const [country, setCountry] = useState(getDefaultAreaCode(area));
     const wrapClassName=props.className;
     const message=props.message?props.message:"";
     props.className=props.inputClass?props.inputClass:"";
     const [showCountrySelect, setShowCountrySelect] = useState(false);
     const {isMobile} = useThemeProvider();
     const selectRef = useRef(null);
-    const area=useSelector(getArea);
+    // const area=useSelector(getArea);
     const [searchValue, setSearchValue] = useState("");
     useEffect(() => {
         if (props.onChangeCountry!=null)props.onChangeCountry(country);
+        localStorageSet(LOCAL_DEFAULT_COUNTRY,country);
     }, [country]);
     const onChangeAreaCode=(code)=>{
         setCountry(code);

src/constants/app.js

@@ -21,10 +21,19 @@ const APP_WELFARE={
     FIRST_PAY:1,
     BIND:2
 }
+//id,phone,sms,mail,guest
+const APP_LOGIN_TYPE={
+    ID:"id",
+    PHONE:"phone",
+    SMS:"sms",
+    MAIL:"mail",
+    GUEST:"guest"
+}
 export {
     APP_THEME,
     APP_GENDER,
     APP_CHANNEL,
     APP_SERVER,
-    APP_WELFARE
+    APP_WELFARE,
+    APP_LOGIN_TYPE
 };

src/constants/localkey.js

@@ -14,4 +14,6 @@ const LOCAL_WD_PASS="LOCAL_WD_PASS";
 const LOCAL_WD_PASS_SET_TIME="LOCAL_WD_PASS_SET_TIME";
 const LOCAL_FAVO_IDS="LOCAL_FAVO_IDS";
 const LOCAL_FAVO_DATA="LOCAL_FAVO_DATA";
-export {LOCAL_VISTOR_ID,LOCAL_USER_INFO,LOCAL_IS_LOGIN,LOCAL_SIGN,LOCAL_GAME_URL,LOCAL_CUSTOM_LOCK,LOCAL_WHEEL_RETAIN,LOCAL_WHEEL_INVITE_CODE,LOCAL_WD_PASS,LOCAL_WD_PASS_SET_TIME,LOCAL_ACTIVITY_C,LOCAL_FAVO_IDS,LOCAL_FAVO_DATA,LOCAL_GAME_INFO};
+const LOCAL_AREA_ID="LOCAL_AREA_ID";
+const LOCAL_DEFAULT_COUNTRY="LOCAL_DEFAULT_COUNTRY";
+export {LOCAL_VISTOR_ID,LOCAL_USER_INFO,LOCAL_IS_LOGIN,LOCAL_SIGN,LOCAL_GAME_URL,LOCAL_CUSTOM_LOCK,LOCAL_WHEEL_RETAIN,LOCAL_WHEEL_INVITE_CODE,LOCAL_WD_PASS,LOCAL_WD_PASS_SET_TIME,LOCAL_ACTIVITY_C,LOCAL_FAVO_IDS,LOCAL_FAVO_DATA,LOCAL_GAME_INFO,LOCAL_AREA_ID,LOCAL_DEFAULT_COUNTRY};

src/db/area.js

@@ -6,22 +6,26 @@ const area=[
     {
         id:1,
         name:"areaSelect.brazil",
-        icon:img1
+        icon:img1,
+        code:"br"
     },
     {
         id:2,
         name:"areaSelect.mexico",
-        icon:img2
+        icon:img2,
+        code:"mx"
     },
     {
         id:3,
         name:"areaSelect.russia",
-        icon:img3
+        icon:img3,
+        code:"ru"
     },
     {
         id:4,
         name:"areaSelect.europe",
-        icon:img4
+        icon:img4,
+        code:"eu"
     }
 ]
 export default area;

src/db/areaApi.js

@@ -0,0 +1,24 @@
+
+const areaApi=[
+    {
+        id:1,
+        areaID:1,
+        api:"http://brapi.24680.org/"
+    },
+    {
+        id:2,
+        areaID:2,
+        api:"http://mxapi.24680.org/"
+    },
+    {
+        id:3,
+        areaID:3,
+        api:"http://ruapi.24680.org/"
+    },
+    {
+        id:4,
+        areaID:4,
+        api:"http://euapi.24680.org/"
+    }
+]
+export default areaApi;

src/features/api.js

@@ -61,6 +61,7 @@ import {LOCAL_ACTIVITY_C, LOCAL_CUSTOM_LOCK, LOCAL_WHEEL_INVITE_CODE} from "@con
 import {toast} from "react-toastify";
 import {preDelMail} from "@features/mailSlice";
 import {getInAppBrowser} from "@utils/UAUtils";
+import {APP_LOGIN_TYPE} from "@constants/app";
 const i18n=global.i18n;
 export const buildReqReducer=(builder,thunk,callback,statusCB=null)=>{
     if (builder==null||thunk==null)return;
@@ -142,12 +143,22 @@ export const reqLogin=createAsyncThunk(
     async (arg,thunkAPI)=>{
         //https://api.ouro777.com/game/login?country=55&account=12345678911&password=123456
         let lang=global.i18n.getCurrLang();
+        let type=arg.type;
         let data={
-            country:arg.country,
-            account:arg.account,
+            // country:arg.country,
+            // account:arg.account,
             password:arg.password,
             lang:lang
         }
+        if (type===APP_LOGIN_TYPE.ID){
+            data.account=arg.account;
+            data.type=APP_LOGIN_TYPE.ID;
+        }
+        else
+        {
+            data.country=arg.country;
+            data.account=arg.account;
+        }
         let params={
             url:APP_LOGIN,
             data:data
@@ -163,13 +174,23 @@ export const reqRegister=createAsyncThunk(
     async (arg,thunkAPI)=>{
         //https://api.ouro777.com/game/register?country=55&phone=12345678911&password=123456&&repassword=123456
         let lang=global.i18n.getCurrLang();
+        let type=arg.type;
         let data={
-            country:arg.country,
-            phone:arg.account,
+            // country:arg.country,
+            // phone:arg.account,
             password:arg.password,
             repassword:arg.repassword,
             lang:lang
         }
+        if (type===APP_LOGIN_TYPE.ID){
+            data.account=arg.account;
+            data.type=APP_LOGIN_TYPE.ID;
+        }
+        else
+        {
+            data.country=arg.country;
+            data.phone=arg.account;
+        }
         let act=localStorageGet(LOCAL_WHEEL_INVITE_CODE);
         if (act!=null&&act!==""){
             data["act"]=act;

src/features/mainSlice.js

@@ -253,7 +253,7 @@ const reducerRoutes=(state,action)=>{
         let firstBonus=0;
         let openRelief=0;
         let accountLogin=1;
-        let area=1;
+        let area=global.getLocalAreaID();
         //sport 配置
         let bbConf=null;
         if (conf){
@@ -614,7 +614,7 @@ export const Main=createSlice({
         //sport conf
         bbConf:null,
         accountLogin:0,
-        area:1
+        area:0
     },
     reducers: {
         logout:(state, action)=>{
@@ -685,6 +685,12 @@ export const Main=createSlice({
                 let id=data.id;
                 state.gameCardInfo[id]={...data,level};
             }
+        },
+        updateAreaID:(state,action)=>{
+            let areaID=action.payload;
+            global.setLocalAreaID(areaID);
+            // window.location.replace(window.location.href);
+            // window.location.reload();
         }
     },
     extraReducers: (builder) => {
@@ -710,7 +716,7 @@ export const Main=createSlice({
         buildReqReducer(builder,reqForgetPass,reducerChangePass,changePassStatus);
     },
 })
-export const {logout,updateUserInfo,updateUserScore,updateAddScore,updateGameLike,updateCurrGame,updateServerKick,updateOpenPay,updateGameRoute,updateGameCardInfo} = Main.actions;
+export const {logout,updateUserInfo,updateUserScore,updateAddScore,updateGameLike,updateCurrGame,updateServerKick,updateOpenPay,updateGameRoute,updateGameCardInfo,updateAreaID} = Main.actions;
 //数据获取
 export const getFetchStatus=(state)=>{
     return state.main.status;

src/layout/Layout.jsx

@@ -134,7 +134,6 @@ const Layout=({...props})=>{
                 <WBindPrompt/>
                 <WProtect/>
                 <WFirstPay/>
-                <WAreaSelect/>
             </>
         )
     }

src/locales/languages/es_MX.json

@@ -111,13 +111,18 @@
     "notfound": "Tu cuenta no fue encontrada, por favor regístrate o intenta nuevamente!",
     "login_type": {
       "password": "Contraseña",
-      "otp": "SMS"
+      "otp": "SMS",
+      "account": "Cuenta"
     },
     "otp_ph": "Código de verificación",
     "guest_login": "Acceso de usuario invitado",
     "btn_otp": "Verificar",
     "forget_title": "Restablecer la contraseña",
-    "back_to_login": "Volver a"
+    "back_to_login": "Volver a",
+    "account_ph": "Cuenta de usuario",
+    "reg_type": {
+      "phone": "Teléfono"
+    }
   },
   "logout": {
     "success": "Has salido exitosamente."
@@ -155,7 +160,8 @@
     "install_banner": "Mostrar Aviso de Instalación",
     "sound": "Sonido",
     "bindPhone": "Actualización de cuenta",
-    "bonus": "Obtenga un bono de +{0}"
+    "bonus": "Obtenga un bono de +{0}",
+    "area_select": "Seleccionar área"
   },
   "copy_success": "Copia exitosa",
   "user": {
@@ -402,7 +408,8 @@
   },
   "form_errors": {
     "phone_55": "Ingresa un número de teléfono correcto de 11 dígitos.",
-    "pass": "La contraseña no debe tener menos de 6 caracteres"
+    "pass": "La contraseña no debe tener menos de 6 caracteres",
+    "account": "El número de cuenta no debe tener menos de 6 caracteres."
   },
   "turnplate": {
     "expires_in": "Expira en",
@@ -631,6 +638,17 @@
     "content": "Para brindar un mejor servicio, realizaremos el mantenimiento del sistema de 3 a 7 en punto el 27 de agosto. No se podrá acceder al sitio web en ese momento, espere pacientemente.",
     "confirm": "Confirmar"
   },
+  "areaSelect": {
+    "brazil": "Brasil",
+    "mexico": "México",
+    "russia": "Rusia",
+    "europe": "Europa",
+    "title": "Seleccionar área",
+    "btn_confirm": "Confirmar"
+  },
+  "areaCodeSelect": {
+    "title": "Selección de código de área"
+  },
   "web": {
     "activity": {
       "redpack_not_available": "No hay RedPack",

src/locales/languages/pt_BR.json

@@ -111,13 +111,18 @@
     "notfound": "Sua conta não foi encontrada, por favor registre-se ou tente novamente!",
     "login_type": {
       "password": "Senha",
-      "otp": "SMS"
+      "otp": "SMS",
+      "account": "Conta"
     },
     "otp_ph": "Código de verificação",
     "guest_login": "Login como convidado",
     "btn_otp": "Verificar",
     "forget_title": "Redefinir senha",
-    "back_to_login": "Voltar ao"
+    "back_to_login": "Voltar ao",
+    "account_ph": "Conta de usuário",
+    "reg_type": {
+      "phone": "Telefone"
+    }
   },
   "logout": {
     "success": "Você saiu com sucesso."
@@ -155,7 +160,8 @@
     "install_banner": "Mostrar Aviso de Instalação",
     "sound": "Som",
     "bindPhone": "Atualização de conta",
-    "bonus": "Ganhe Bônus +{0}"
+    "bonus": "Ganhe Bônus +{0}",
+    "area_select": "Selecionar área"
   },
   "copy_success": "Cópia bem-sucedida",
   "user": {
@@ -402,7 +408,8 @@
   },
   "form_errors": {
     "phone_55": "Digite um número de telefone correto de 11 dígitos.",
-    "pass": "A senha não deve ter menos de 6 caracteres"
+    "pass": "A senha não deve ter menos de 6 caracteres",
+    "account": "O número da conta não deve ter menos de 6 caracteres."
   },
   "turnplate": {
     "expires_in": "Expira em",
@@ -631,6 +638,17 @@
     "content": "Para prestar um melhor serviço, realizaremos a manutenção do sistema das 15h às 19h do dia 27 de agosto. O site não estará acessível nesse horário, aguarde pacientemente.",
     "confirm": "Confirmar"
   },
+  "areaSelect": {
+    "brazil": "Brasil",
+    "mexico": "México",
+    "russia": "Rússia",
+    "europe": "Europa",
+    "title": "Selecionar área",
+    "btn_confirm": "Confirmar"
+  },
+  "areaCodeSelect": {
+    "title": "Seleção de código de área"
+  },
   "web": {
     "activity": {
       "redpack_not_available": "Não há RedPack",

src/locales/languages/ru_RU.json

@@ -111,13 +111,18 @@
     "notfound": "Ваш аккаунт не найден, пожалуйста, зарегистрируйтесь или попробуйте снова!",
     "login_type": {
       "password": "Пароль",
-      "otp": "SMS"
+      "otp": "SMS",
+      "account": "Счет"
     },
     "otp_ph": "Проверочный код",
     "guest_login": "Гостевой вход",
     "btn_otp": "Отправить",
     "forget_title": "Сброс пароля",
-    "back_to_login": "Вернуться к"
+    "back_to_login": "Вернуться к",
+    "account_ph": "Учетная запись пользователя",
+    "reg_type": {
+      "phone": "Телефон"
+    }
   },
   "logout": {
     "success": "Вход успешно выполнен."
@@ -155,7 +160,8 @@
     "install_banner": "Показать уведомление об установке",
     "bindPhone": "Обновление учетной записи",
     "bonus": "Получите бонус +{0}",
-    "sound": "Звук"
+    "sound": "Звук",
+    "area_select": "Выбор области"
   },
   "copy_success": "Успешно скопировано",
   "user": {
@@ -402,7 +408,8 @@
   },
   "form_errors": {
     "phone_55": "Введите корректный 11-значный номер телефона.",
-    "pass": "Пароль должен содержать не менее 6 символов"
+    "pass": "Пароль должен содержать не менее 6 символов",
+    "account": "Номер счета не должен быть короче 6 символов."
   },
   "turnplate": {
     "expires_in": "Истекает через",
@@ -631,6 +638,17 @@
     "content": "Чтобы обеспечить лучшее обслуживание, мы проведем техническое обслуживание системы с 3 до 7 часов 27 августа. В это время мы не сможем получить доступ к веб-сайту, пожалуйста, подождите терпеливо.",
     "confirm": "Подтверждать"
   },
+  "areaSelect": {
+    "brazil": "Бразилия",
+    "mexico": "Мексика",
+    "russia": "Россия",
+    "europe": "Европа",
+    "title": "Выбор области",
+    "btn_confirm": "Подтверждать"
+  },
+  "areaCodeSelect": {
+    "title": "Выбор кода города"
+  },
   "web": {
     "activity": {
       "redpack_not_available": "Нет RedPack",

src/locales/languages/zh_TW.json

@@ -111,13 +111,18 @@
     "notfound": "未找到您的帳戶，請註冊或重試！",
     "login_type": {
       "password": "密碼",
-      "otp": "驗證碼"
+      "otp": "驗證碼",
+      "account": "帳戶"
     },
     "otp_ph": "驗證碼",
     "guest_login": "訪客登入",
     "btn_otp": "驗證碼",
     "forget_title": "重新設密碼",
-    "back_to_login": "返回"
+    "back_to_login": "返回",
+    "account_ph": "使用者帳戶",
+    "reg_type": {
+      "phone": "電話"
+    }
   },
   "logout": {
     "success": "您已成功退出。"
@@ -155,7 +160,8 @@
     "install_banner": "顯示安裝通知",
     "sound": "聲音",
     "bindPhone": "帳號升級",
-    "bonus": "獲得獎金+{0}"
+    "bonus": "獲得獎金+{0}",
+    "area_select": "區域選擇"
   },
   "copy_success": "複製成功",
   "user": {
@@ -402,7 +408,8 @@
   },
   "form_errors": {
     "phone_55": "請輸入正確的11位電話號碼。",
-    "pass": "密碼不得少於6個字符"
+    "pass": "密碼不得少於6個字符",
+    "account": "帳號不得少於6個字元。"
   },
   "turnplate": {
     "expires_in": "到期時間",
@@ -631,6 +638,17 @@
     "content": "為了更好地服務，我們將在8.27日，3點到7點進行系統維護，屆時不能訪問網站，請耐心等待。",
     "confirm": "確認"
   },
+  "areaSelect": {
+    "brazil": "巴西",
+    "mexico": "墨西哥",
+    "russia": "俄羅斯",
+    "europe": "歐洲",
+    "title": "區域選擇",
+    "btn_confirm": "確認"
+  },
+  "areaCodeSelect": {
+    "title": "區號選擇"
+  },
   "web": {
     "activity": {
       "redpack_not_available": "沒有紅包",

src/utils/helpers.js

@@ -252,7 +252,13 @@ export const validateBRPhone=(t)=>{
 
 }
 export const validateCountryPhone=(country,phone)=>{
-    return validateBRPhone(phone);
+    //只检查br
+    if (country==="55"){
+        return validateBRPhone(phone);
+    }
+    else{
+        return true;
+    }
 }
 export const formatCash=(cash,fixed=2,isIntIgnore=false)=>{
     cash=Number(cash);

src/widgets/LoginForm/index.jsx

@@ -34,9 +34,11 @@ import SmallLoading from "@components/SmallLoading";
 import {REQ_STATUS} from "@api/config";
 import {reqForgetPass, reqLogin, reqRegister, reqSendCode, reqSMSLogin} from "@features/api";
 import {ROUTE_PATH} from "@constants/routes";
-import {APP_THEME} from "@constants/app";
+import {APP_LOGIN_TYPE, APP_THEME} from "@constants/app";
 import {validateCountryPhone} from "@utils/helpers";
 import {CircularProgress} from "@mui/material";
+import area from "@db/area";
+import SvgIcon from "@components/SvgIcon";
 
 const i18n=global.i18n;
 const TYPE_LOGIN="login";
@@ -193,11 +195,49 @@ const LoginForm = ({close}) => {
         objInfo.inSubmit=true;
     }
     const onSubmitAccountLogin=(data)=>{
-
+        if (loginStatus===REQ_STATUS.LOADING)return;
+        if (objInfo.inSubmit)return;
+        // acc_account:"",
+        //     acc_password:"",
+        //     acc_repassword:""
+        //data.type=APP_LOGIN_TYPE.ID;
+        let ndata={
+            account:data.acc_account,
+            password:data.acc_password,
+            type:APP_LOGIN_TYPE.ID
+        }
+        ndata.callback=onCallback;
+        dispatch(reqLogin(ndata));
+        objInfo.inSubmit=true;
+    }
+    const onSubmitAccountReg=(data)=>{
+        if (regStatus===REQ_STATUS.LOADING)return;
+        if (objInfo.inSubmit)return;
+        let ndata={
+            account:data.acc_account,
+            password:data.acc_password,
+            repassword:data.acc_repassword,
+            type:APP_LOGIN_TYPE.ID
+        }
+        ndata.callback=onCallback;
+        dispatch(reqRegister(ndata));
+        objInfo.inSubmit=true;
     }
     const validatePhone=(value)=>{
         return validateCountryPhone(country,value);
     }
+    const getAreaItem=()=>{
+        let areaID=global.getLocalAreaID();
+        let item=null;
+        for (let i = 0; i < area.length; i++) {
+            let  aitem=area[i];
+            if (aitem.id===areaID){
+                item=aitem;
+                break;
+            }
+        }
+        return item;
+    }
     const renderLoading=()=>{
         return (<SmallLoading fill={"#fff"}/>)
     }
@@ -208,21 +248,36 @@ const LoginForm = ({close}) => {
             </div>
         )
     }
+    const renderAreaSelect=()=>{
+        let item=getAreaItem();
+        if (item==null)return (<></>);
+        return (
+            <button type={"button"} className={styles.area_btn} onClick={()=>{
+                global.showAreaSelect();
+            }}>
+                <span>{i18n.t(item.name)}</span>
+                <SvgIcon className={styles.icon} herf={"icon_Arrow"}></SvgIcon>
+            </button>
+        )
+    }
     const renderLoginToReg=()=>{
         return (
-            <div className={styles.l_reg_new}>
-                <div>{i18n.t("login.reg_new_des")}</div>
-                <div className={styles.reg_btn} onClick={() => {
-                    // setShowType(TYPE_REGISTER);
-                    if (isMobile()) navigatRoute(ROUTE_PATH.SIGN_UP)
-                    else setShowType(TYPE_REGISTER);
-                }}>
-                    {i18n.t("sign_up")}
+            <div className={"d-flex flex-row align-items-center justify-content-between"}>
+                <div className={styles.l_reg_new}>
+                    <div>{i18n.t("login.reg_new_des")}</div>
+                    <div className={styles.reg_btn} onClick={() => {
+                        // setShowType(TYPE_REGISTER);
+                        if (isMobile()) navigatRoute(ROUTE_PATH.SIGN_UP)
+                        else setShowType(TYPE_REGISTER);
+                    }}>
+                        {i18n.t("sign_up")}
+                    </div>
                 </div>
+                {renderAreaSelect()}
             </div>
         )
     }
-    const renderGuestLogin=()=>{
+    const renderGuestLogin = () => {
         // return (
         //     <button type={"button"} className={styles.guest_btn}>
         //         {i18n.t("login.guest_login")}
@@ -451,15 +506,18 @@ const LoginForm = ({close}) => {
     //register_______________
     const renderRegToLogin=()=>{
         return (
-            <div className={styles.l_reg_new}>
-                <div>{i18n.t("login.login_des")}</div>
-                <div className={styles.reg_btn} onClick={() => {
-                    // setShowType(TYPE_LOGIN);
-                    if (isMobile()) navigatRoute(ROUTE_PATH.SIGN_IN)
-                    else setShowType(TYPE_LOGIN);
-                }}>
-                    {i18n.t("login.sign_in_btn")}
+            <div className={"d-flex flex-row align-items-center justify-content-between"}>
+                <div className={styles.l_reg_new}>
+                    <div>{i18n.t("login.login_des")}</div>
+                    <div className={styles.reg_btn} onClick={() => {
+                        // setShowType(TYPE_LOGIN);
+                        if (isMobile()) navigatRoute(ROUTE_PATH.SIGN_IN)
+                        else setShowType(TYPE_LOGIN);
+                    }}>
+                        {i18n.t("login.sign_in_btn")}
+                    </div>
                 </div>
+                {renderAreaSelect()}
             </div>
         )
     }
@@ -524,6 +582,7 @@ const LoginForm = ({close}) => {
         return (
             <form key={"reg_account"} autoComplete="off" className={styles.l_form} onSubmit={handleSubmit((data) => {
                 // onSubmitReg(data);
+                onSubmitAccountReg(data);
             })}>
                 <Controller control={control}
                             name="acc_account"

src/widgets/LoginForm/styles.module.scss

@@ -125,3 +125,17 @@
   justify-content: center;
   color: var(--text);
 }
+.area_btn{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--text);
+  font-weight: 600;
+  & .icon{
+    width: 1rem;
+    height: 1rem;
+    fill: var(--text);
+    transform: rotate(90deg);
+  }
+}

src/widgets/UserSettings/index.jsx

@@ -374,6 +374,7 @@ const UserSettings=()=>{
         )
     }
     const renderItemArea=()=>{
+        if (isLogin)return (<></>);
         return (
             <button className={styles.action_item} onClick={()=>{
                 global.showAreaSelect();

src/widgets/WAreaSelect/index.jsx

@@ -3,8 +3,8 @@ import styles from "./styles.module.scss";
 import Fade from "@mui/material/Fade";
 import Grow from "@mui/material/Grow";
 import Modal from "@mui/material/Modal";
-import {useSelector} from "react-redux";
-import {getArea} from "@features/mainSlice";
+import {useDispatch, useSelector} from "react-redux";
+import {getArea, updateAreaID} from "@features/mainSlice";
 import areaData from "@db/area";
 import RadioBtn from "@components/RadioBtn";
 const i18n=global.i18n;
@@ -13,8 +13,11 @@ const WAreaSelect = ({})=>{
     const [isShow, setIsShow] = useState(false);
     const area=useSelector(getArea);
     const [currArea,setCurrArea]=useState(1);
-    const show=()=>{
+    const dispatch=useDispatch();
+    const [isAllowClose,setIsAllowClose]=useState(true);
+    const show=(allowClose=true)=>{
         setIsShow(true);
+        setIsAllowClose(allowClose);
     }
     const hide=()=>{
         setIsShow(false);
@@ -47,6 +50,17 @@ const WAreaSelect = ({})=>{
     const onChangeArea=(value)=>{
         setCurrArea(value);
     }
+    const onConfirmArea=()=>{
+        if (currArea<=0)return;
+        if (currArea===area)
+        {
+            hide();
+            return;
+        }
+        dispatch(updateAreaID(currArea));
+        // global.setLocalAreaID(currArea);
+        hide();
+    }
     const renderHeader=()=>{
         return (
             <>
@@ -84,7 +98,7 @@ const WAreaSelect = ({})=>{
     const renderConfirm=()=>{
         return (
             <button className={"button-green"} onClick={()=>{
-
+                onConfirmArea();
             }}>
                 {i18n.t("areaSelect.btn_confirm")}
             </button>
@@ -92,17 +106,21 @@ const WAreaSelect = ({})=>{
     }
     return (
         <Modal open={isShow} onClose={()=>{
-            hide();
+            if(isAllowClose)hide();
         }} closeAfterTransition>
             <Fade in={isShow} timeout={500}>
                 <div className="popup-container">
                     <Grow in={isShow} timeout={500}>
                         <div className={`popup card card-padded`} style={{minHeight: 'unset'}}>
-                            <button className="popup_close" onClick={()=>{
-                                hide();
-                            }} aria-label="Close popup">
-                                <i className="icon-xmark"/>
-                            </button>
+                            {
+                                isAllowClose? (
+                                    <button className="popup_close" onClick={() => {
+                                        hide();
+                                    }} aria-label="Close popup">
+                                        <i className="icon-xmark"/>
+                                    </button>
+                                ):(<></>)
+                            }
                             <div className={styles.container}>
                                 {renderHeader()}
                                 {renderContent()}