Merge pull request #177 from GitDataAI/dev/xx

🌐Internationalization of login and registration …

messages/en.json

@@ -1,19 +1,26 @@
 {
   "Auth": {
+    "Get": "get",
     "Login": "Sign in",
+    "CantLogin": "Can't log in?",
     "Register": "Sign up",
+    "RegistrationFailed": "Registration failed",
     "NonAccount": "Go to Register",
     "HaveAccount": "Go to log in",
     "RemAccount": "Go to log in",
+    "CreateAccount": "Create Account  ",
     "ForgotPass": "Forgot Password",
     "Username": "Username",
     "Password": "Password",
     "Captcha": "Captcha",
+    "CaptchaError": "Captcha Error",
     "Email": "Email",
     "ConfirmPass": "ConfirmPassword",
     "Submit": "Submit",
     "H2": "About GitDataAi Cloud",
     "Description": "GitDataAi Cloud is a platform for data management, visualization, and analysis that helps you manage and explore data resources efficiently.",
+    "Connectivity": "One account gives you access to GitData, JZFS, JZFlow and other products.",
+    "Protection": "This site is protected by Cloudflare and subject to the Google Privacy Policy and Terms of Service.",
     "InvalidUsername": "The username must contain letters and numbers and be at least 6 digits",
     "InvalidEmail": "Please enter a valid email address",
     "InvalidPass": "The password must contain letters and numbers, and be at least 6 digits",
@@ -23,7 +30,14 @@
     "Enter": "Please Enter ",
     "Confirm": "Please confirm your password again",
     "LoginSuccess": "Login successful",
-    "LoginFail": "Login failed, wrong username or password"
+    "LoginFail": "Login failed, wrong username or password",
+    "LoginContinue": "Sign in to continue",
+    "RegisterContinue": "Register to continue",
+    "Continue": "continue",
+    "OrContinue": "Or continue with the following method",
+    "Send": "Send",
+    "SendSuccess": " successfully",
+    "SendFail": " failed:"
   },
   "Header": {
     "Home": "Home",
@@ -103,5 +117,17 @@
     "PRIVACY": "Privacy Policy",
     "SPLP": "Support & Help",
     "TERMUSE": "Terms of Use"
+  },
+  "Setting": {
+    "HomePage" : "Home",
+    "Notification": "Notification",
+    "Settings": "Settings",
+    "Help": "Help",
+    "MyAccount": "My Account",
+    "Quit": "Sign out",
+    "Repositories": "Repositories",
+    "Actions": "Actions",
+    "Group": "Group",
+    "Search": "Search"
   }
 }

messages/zh-CN.json

@@ -1,19 +1,26 @@
 {
   "Auth": {
+    "Get": "获取",
     "Login": "登录",
+    "CantLogin": "无法登录?",
     "Register": "注册",
+    "RegistrationFailed": "注册失败",
     "NonAccount": "没有账号？去注册",
-    "HaveAccount": "已有账号？去登录",
+    "HaveAccount": "已有GitDataAI.ai账号? ",
     "RemAccount": "想起来了？去登录",
+    "CreateAccount": "创建账户",
     "ForgotPass": "忘记密码",
     "Username": "用户名",
     "Password": "密码",
     "Captcha": "验证码",
+    "CaptchaError": "验证码错误",
     "Email": "邮箱",
     "ConfirmPass": "确认密码",
     "Submit": "提交",
     "H2": "关于 GitDataAi Cloud",
     "Description": "GitDataAi Cloud 是一个用于数据管理、可视化和分析的平台，帮助您高效地管理和探索数据资源。",
+    "Connectivity": "一个帐户可访问 GitData, JZFS, JZFlow 以及其他产品。",
+    "Protection": "此站点受 Cloudflare 的保护，且遵循 Google 隐私政策和服务条款。",
     "InvalidUsername": "用户名必须包含字母和数字，且不少于6位",
     "InvalidEmail": "请输入有效的邮箱地址",
     "InvalidPass": "密码必须包含字母和数字，且不少于6位",
@@ -23,7 +30,14 @@
     "Enter": "请输入",
     "Confirm": "请再次确认密码",
     "LoginSuccess": "登录成功",
-    "LoginFail": "登录失败，用户名或密码有误"
+    "LoginFail": "登录失败，用户名或密码有误",
+    "LoginContinue": "登录以继续",
+    "RegisterContinue": "注册以继续",
+    "Continue": "继续",
+    "OrContinue": "或通过以下方式继续",
+    "Send": "发送",
+    "Success": "成功",
+    "Fail": "失败："
   },
   "Header": {
     "Home": "主页",
@@ -103,5 +117,17 @@
     "PRIVACY": "隐私政策",
     "SPLP": "支持与帮助",
     "TERMUSE": "使用条款"
+  },
+  "Setting": {
+    "HomePage" : "首页",
+    "Notification": "通知",
+    "Settings": "设置",
+    "Help": "帮助",
+    "MyAccount" : "我的账户",
+    "Quit": "退出",
+    "Repositories": "存储库",
+    "Actions": "行动",
+    "Group": "团体",
+    "Search": "搜索"
   }
 }

src/app/Layout.tsx

@@ -7,19 +7,19 @@ import Header from "@/components/layout/Header.tsx";
 const Layout: React.FC = () => {
   const navigate = useNavigate();
   const { user, init } = useAuth();
-  const checkAuthStatus = async () => {
-    try {
-      await init();
-      if (!user) {
-        navigate("/auth/login");
-      }
-    }catch (e){
-      navigate("/auth/login")
-    }
-  };
-  useEffect(() => {
-    checkAuthStatus();
-  }, []);
+  // const checkAuthStatus = async () => {
+  //   try {
+  //     await init();
+  //     if (!user) {
+  //       navigate("/auth/login");
+  //     }
+  //   }catch (e){
+  //     navigate("/auth/login")
+  //   }
+  // };
+  // useEffect(() => {
+  //   checkAuthStatus();
+  // }, []);
 
   return (
     <>

src/app/auth/Layout.tsx

@@ -8,7 +8,7 @@ const AuthLayout: React.FC = () => {
   // const { t } = useTranslation("Auth");
   return (
     // bg-gradient-to-br
-    <div className="relative min-h-screen flex items-center justify-center  from-black via-primary-dark to-background p-4">
+    <div className="relative min-h-screen flex items-center justify-center  from-black via-primary-dark to-background p-4 ">
       {/* <header className="absolute top-0 left-0 w-full flex items-center justify-between p-4 bg-transparent px-10">
         <Link to="/" className="text-white text-2xl font-bold">
           GitDataAi Cloud
@@ -23,7 +23,7 @@ const AuthLayout: React.FC = () => {
         <p className="text-lg max-w-md text-center">{t("Description")}</p>
       </div> */}
 
-      <div className="w-full max-w-md bg-white rounded-lg shadow-lg p-8 lg:w-1/2">
+      <div className="absolute w-full max-w-md bg-white rounded-lg shadow-lg p-8 lg:w-1/2  max-sm:h-full">
         <Outlet />
       </div>
     </div>

src/app/auth/Login.tsx

@@ -3,8 +3,11 @@ import { FcGoogle } from "react-icons/fc";
 import { FaApple,FaSlack,FaMicrosoft } from "react-icons/fa";
 import useUsers, {Auth_api} from "@/store/useUsers.tsx";
 import {useNavigate} from "react-router-dom";
+import {useTranslation} from "react-i18next";
+
 
 const Login = () => {
+    const [t] = useTranslation("Auth")
     const [Step,setStep] = useState(0)
     const [Oauth,setOauth] = useState<ReactElement<any, any>[]>([]);
     const [user,Setuser] = useState({
@@ -51,24 +54,24 @@ const Login = () => {
     }
   return (
     <>
-    <div className="h-full">
+    <div className="h-full ">
         <div className="flex items-baseline justify-center">
             <img src="/gitdata.ai.png" alt="JZFS" className=" w-8" />
             <b className=" text-4xl">GitDataAI</b>
         </div>
-        <h3 className="text-center mt-6 mb-4 font-bold ">登录以继续</h3>
+        <h3 className="text-center mt-6 mb-4 font-bold ">{t("LoginContinue")}</h3>
         <div>
             <form className="flex flex-col items-center ">
-                <input onChange={(x)=>{InputEmail(x.target.value)}} type="text" placeholder="输入您的用户名" className="border border-[#8790a2] h-10 w-4/5 mt-2 mb-2 px-2"/>
+                <input onChange={(x)=>{InputEmail(x.target.value)}} type="text" placeholder={t("Enter")+t("Username")} className="border border-[#8790a2] h-10 w-4/5 mt-2 mb-2 px-2"/>
                 {
                     Step==1?(
                         <>
-                            <input value={user.password} onChange={(x)=>{Setuser({...user,password:x.target.value})}} type="password" placeholder="输入您的密码" autoComplete={"current-password"} className="border border-[#8790a2] h-10 w-4/5 mt-2 mb-2 px-2"/>
+                            <input value={user.password} onChange={(x)=>{Setuser({...user,password:x.target.value})}} type="password" placeholder={t("Enter")+t("Password")} autoComplete={"current-password"} className="border border-[#8790a2] h-10 w-4/5 mt-2 mb-2 px-2  showDiv"/>
                         </>
                     ):null
                 }
-                <button type={"button"} onClick={Next} className="bg-[#3767e6] h-10 w-4/5"><span className="text-white">{Step==0?("继续"):("登录")}</span></button>
-                <h3 className="text-center text-[#616c84] mt-6 mb-4">或通过以下方式继续：</h3>
+                <button type={"button"} onClick={Next} className="bg-[#3767e6] h-10 w-4/5"><span className="text-white">{Step==0?(t("Continue")):(t("Login"))}</span></button>
+                <h3 className="text-center text-[#616c84] mt-6 mb-4">{t("OrContinue")}</h3>
                 {
                     Oauth.map((value)=>{
                         return value
@@ -77,16 +80,17 @@ const Login = () => {
             </form>
         </div>
         <div className="text-center mt-4 mb-5">
-            <span className="mr-1">无法登录？</span>
+            <span className="mr-1">{t("CantLogin")}</span>
             <span className="mr-1">• </span>
-            <span onClick={apply}>创建帐户</span>
+            <span onClick={apply}>{t("CreateAccount")}</span>
         </div>
         <hr className="border-none h-px ml-auto mr-auto bg-[#c2c7d0] w-4/5"/>
         <div className="flex items-baseline justify-center mt-5">
             <img src="/gitdata.ai.png" alt="JZFS" className=" w-4" />
             <strong className=" text-xl">GitDataAI | Cloud</strong>
         </div>
-        <h3 className="text-center text-xs">一个帐户可访问 GitData, JZFS, JZFlow 以及其他产品。</h3>
+        <h3 className="text-center text-xs">{t("Connectivity")}</h3>
+        <h3 className="text-center text-xs">{t("Protection")}</h3>
         </div>
     </>
   );

src/app/auth/Register.tsx

@@ -2,8 +2,10 @@ import React, {ReactElement, useEffect, useState} from "react";
 import {useNavigate} from "react-router-dom";
 import {Auth_api} from "@/store/useUsers.tsx";
 import Login from "@/app/auth/Login.tsx";
+import {useTranslation} from "react-i18next";
 
 const Register = () => {
+    const [t] = useTranslation("Auth")
     const [Step,setStep] = useState(0)
     const [CountDown,setCountDown] = useState(60)
     const [isCountDown,setisCountDown] = useState(false)
@@ -15,7 +17,7 @@ const Register = () => {
         username: "",
         code: ""
     })
-    const [Time,setTime] = useState("获取验证码")
+    const [Time,setTime] = useState(t("Get")+t("Captcha"))
     const nav = useNavigate();
     useEffect(()=>{
         setOauth([
@@ -29,10 +31,10 @@ const Register = () => {
             Auth_api.send(user.email)
                 .then(res=>{
                     if (res.data.code === 200){
-                        alert("发送成功")
+                        alert(t("Send")+t("Success"))
                         setisCountDown(true)
                     }else {
-                        alert("发送失败:"+res.data.msg)
+                        alert(t("Send")+t("Fail")+res.data.msg)
                     }
                 })
         }
@@ -44,7 +46,7 @@ const Register = () => {
                 if (res.data.code === 200){
                     setStep(2)
                 }else {
-                    alert("验证码错误")
+                    alert(t("CaptchaError"))
                 }
             })
     }
@@ -64,7 +66,7 @@ const Register = () => {
                 if (res.data.code === 200){
                     nav("/auth/login")
                 }else {
-                    alert("注册失败:"+res.data.msg)
+                    alert(t("RegistrationFailed")+res.data.msg)
                 }
             })
     }
@@ -95,23 +97,23 @@ const Register = () => {
     <div className="h-full">
         <div className="flex items-baseline justify-center">
             <img src="/gitdata.ai.png" alt="JZFS" className=" w-8" />
-            <b className=" text-4xl">GitData</b>
+            <b className=" text-4xl">GitDataAI</b>
         </div>
-        <h3 className="text-center mt-6 mb-4 font-bold">注册以继续</h3>
+        <h3 className="text-center mt-6 mb-4 font-bold">{t("RegisterContinue")}</h3>
         <div>
             <form className="flex flex-col items-center ">
                 <input onChange={(x)=>{
                     handleEmailNext(x.target.value)
-                }} type="text" placeholder="输入您的电子邮件地址" className="border border-[#8790a2] h-12 w-4/5 px-2 mt-2 mb-2"/>
+                }} type="text" placeholder={t("Enter")+t("Email")} className="border border-[#8790a2] h-10 w-4/5 mt-2 mb-2 px-2"/>
                 {
                     (Step===1 || Step === 2)?(
                         <div className="flex items-center h-12 w-4/5 mt-2 mb-2 showDiv ">
-                            <input onChange={(e)=>InputCode(e.target.value)} type="text" placeholder="输入验证码" className="border border-[#8790a2] h-12 w-3/5 px-2 mt-2 mb-2"/>
-                            <button onClick={handleSend} type={"button"} className="bg-[#3767e6] h-12 w-2/5"><span className="text-white">{
+                            <input onChange={(e)=>InputCode(e.target.value)} type="text" placeholder={t("Enter")+t("Captcha")} className="border border-[#8790a2] h-10 w-4/5 mt-2 mb-2 px-2"/>
+                            <button onClick={handleSend} type={"button"} className="bg-[#3767e6] border border-[#8790a2] h-10 w-3/5 mt-2 mb-2 px-2"><span className="text-white">{
                                 isCountDown ?(<>
                                     {CountDown}
                                 </>):(<>
-                                    发送验证码
+                                    {t("Send")+t("Captcha")}
                                 </>)
                             }</span></button>
                         </div>
@@ -120,16 +122,16 @@ const Register = () => {
                 {
                     Step===2?(
                         <>
-                            <input onChange={(x)=>{Setuser({...user,password:x.target.value})}} type="password" placeholder="请输入密码" className="border border-[#8790a2] h-12 w-4/5 px-2 mt-2 mb-2 showDiv"/>
-                            <input onChange={(x)=>{Setuser({...user,passwordE:x.target.value})}} type="password" placeholder="请确认密码" className="border border-[#8790a2] h-12 w-4/5 px-2 mt-2 mb-2 showDiv"/>
-                            <input onChange={(x)=>{Setuser({...user,username:x.target.value})}} type="text" placeholder="请输入用户名" className="border border-[#8790a2] h-12 w-4/5 px-2 mt-2 mb-2 showDiv"/>
+                            <input onChange={(x)=>{Setuser({...user,password:x.target.value})}} type="password" placeholder={t("Enter")+t("Password")} className="border border-[#8790a2] h-10 w-4/5 mt-2 mb-2 px-2 showDiv"/>
+                            <input onChange={(x)=>{Setuser({...user,passwordE:x.target.value})}} type="password" placeholder={t("Confirm")} className="border border-[#8790a2] h-10 w-4/5 mt-2 mb-2 showDiv"/>
+                            <input onChange={(x)=>{Setuser({...user,username:x.target.value})}} type="text" placeholder={t("Enter")+t("Username")} className="border border-[#8790a2] h-10 w-4/5 mt-2 mb-2 px-2 showDiv"/>
                         </>
                     ):null
                 }
 
-                <button type={"button"} onClick={handleNext} className="bg-[#3767e6] h-12 w-4/5"><span className="text-white">注册</span></button>
+                <button type={"button"} onClick={handleNext} className="bg-[#3767e6] border border-[#8790a2] h-10 w-4/5 mt-2 mb-2 px-2"><span className="text-white">{t("Register")}</span></button>
 
-                <h3 className="text-center text-[#616c84] mt-6 mb-4">或通过以下方式继续：</h3>
+                <h3 className="text-center text-[#616c84] mt-6 mb-4">{t("OrContinue")}</h3>
                 {
                     Oauth.map((item)=>{
                         return item
@@ -138,15 +140,15 @@ const Register = () => {
             </form>
         </div>
             <div className="text-center mt-4 mb-5">
-                <span className="mr-1">已有 GitData.ai 帐户？<a onClick={login}>登录</a></span>
+                <span className="mr-1">{t("HaveAccount")}<a onClick={login}>{t("Login")}</a></span>
             </div>
             <hr className="border-none h-px ml-auto mr-auto bg-[#c2c7d0] w-4/5"/>
             <div className="flex items-baseline justify-center mt-5">
                 <img src="/gitdata.ai.png" alt="JZFS" className=" w-4" />
-                <strong className=" text-xl">GitData | Cloud</strong>
+                <strong className=" text-xl">GitDataAI | Cloud</strong>
             </div>
-            <h3 className="text-center text-xs mb-2">一个帐户可访问 GitData, JZFS, JZFlow 以及其他产品。</h3>
-            <h3 className="text-center text-xs">此站点受 Cloudflare 的保护，且遵循 Google 隐私政策和服务条款。</h3>
+            <h3 className="text-center text-xs mb-2">{t("Connectivity")}</h3>
+            <h3 className="text-center text-xs">{t("Protection")}</h3>
         </div>
     </>
   );