From 25ca6371b6fa0e9ae101b82c930e01fa31a3ca87 Mon Sep 17 00:00:00 2001
From: "Aruelius.L" <25380989+Aruelius@users.noreply.github.com>
Date: Sat, 30 Apr 2022 22:21:52 +0800
Subject: [PATCH] =?UTF-8?q?=E9=AA=8C=E8=AF=81=E7=A0=81=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=20(#104)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/locales/en-US/application.json |  3 ++-
 public/locales/zh-CN/application.json |  3 ++-
 src/component/Login/LoginForm.js      | 10 ----------
 src/component/Login/Register.js       | 10 ----------
 src/component/Login/Reset.js          |  7 -------
 src/component/Placeholder/Captcha.js  |  6 +++---
 src/hooks/normal.js                   | 10 ++++++----
 src/hooks/useCaptcha.js               | 11 +++++++++++
 8 files changed, 24 insertions(+), 36 deletions(-)

diff --git a/public/locales/en-US/application.json b/public/locales/en-US/application.json
index 31d7454..ec1c134 100644
--- a/public/locales/en-US/application.json
+++ b/public/locales/en-US/application.json
@@ -24,6 +24,7 @@
     "browserNotSupport": "Not supported by current browser or environment.",
     "success": "Sign in successful",
     "title": "Sign in to {{title}}",
-    "continue": "Next"
+    "continue": "Next",
+    "clickToRefresh": "Click to refresh"
   }
 }
\ No newline at end of file
diff --git a/public/locales/zh-CN/application.json b/public/locales/zh-CN/application.json
index bd48736..8a62e05 100644
--- a/public/locales/zh-CN/application.json
+++ b/public/locales/zh-CN/application.json
@@ -24,6 +24,7 @@
     "browserNotSupport": "当前浏览器或环境不支持",
     "success": "登录成功",
     "title": "登录 {{title}}",
-    "continue": "下一步"
+    "continue": "下一步",
+    "clickToRefresh": "点击刷新验证码"
   }
 }
\ No newline at end of file
diff --git a/src/component/Login/LoginForm.js b/src/component/Login/LoginForm.js
index fc0cbd7..14a16c7 100644
--- a/src/component/Login/LoginForm.js
+++ b/src/component/Login/LoginForm.js
@@ -68,16 +68,6 @@ const useStyles = makeStyles((theme) => ({
         width: "100%",
         justifyContent: "space-between",
     },
-    captchaContainer: {
-        display: "flex",
-        marginTop: "10px",
-        [theme.breakpoints.down("sm")]: {
-            display: "block",
-        },
-    },
-    captchaPlaceholder: {
-        width: 200,
-    },
     buttonContainer: {
         display: "flex",
     },
diff --git a/src/component/Login/Register.js b/src/component/Login/Register.js
index 121bfd5..a701e6c 100644
--- a/src/component/Login/Register.js
+++ b/src/component/Login/Register.js
@@ -58,16 +58,6 @@ const useStyles = makeStyles((theme) => ({
         width: "100%",
         justifyContent: "space-between",
     },
-    captchaContainer: {
-        display: "flex",
-        marginTop: "10px",
-        [theme.breakpoints.down("sm")]: {
-            display: "block",
-        },
-    },
-    captchaPlaceholder: {
-        width: 200,
-    },
     buttonContainer: {
         display: "flex",
     },
diff --git a/src/component/Login/Reset.js b/src/component/Login/Reset.js
index becfd73..e6707cb 100644
--- a/src/component/Login/Reset.js
+++ b/src/component/Login/Reset.js
@@ -48,13 +48,6 @@ const useStyles = makeStyles((theme) => ({
     submit: {
         marginTop: theme.spacing(3),
     },
-    captchaContainer: {
-        display: "flex",
-        marginTop: "10px",
-    },
-    captchaPlaceholder: {
-        width: 200,
-    },
     link: {
         marginTop: "20px",
         display: "flex",
diff --git a/src/component/Placeholder/Captcha.js b/src/component/Placeholder/Captcha.js
index d266687..086e5c1 100644
--- a/src/component/Placeholder/Captcha.js
+++ b/src/component/Placeholder/Captcha.js
@@ -3,13 +3,13 @@ import ContentLoader from "react-content-loader";
 
 const MyLoader = () => (
     <ContentLoader
-        height={80}
-        width={200}
+        height={60}
+        width={240}
         speed={2}
         primaryColor="#f3f3f3"
         secondaryColor="#e4e4e4"
     >
-        <rect x="4" y="4" rx="7" ry="7" width="392" height="116" />
+        <rect x="0" y="0" rx="3" ry="3" width="100%" height="100%" />
     </ContentLoader>
 );
 
diff --git a/src/hooks/normal.js b/src/hooks/normal.js
index f405bc1..46cb953 100644
--- a/src/hooks/normal.js
+++ b/src/hooks/normal.js
@@ -68,14 +68,16 @@ const NormalCaptcha = forwardRef(function NormalCaptcha(
                     autoComplete
                 />
             </FormControl>{" "}
-            <div>
+            <div
+                className={classes.captchaImageContainer}
+                title={t("login.clickToRefresh")}
+            >
                 {captchaData === null && (
-                    <div className={classes.captchaPlaceholder}>
-                        <Placeholder />
-                    </div>
+                    <Placeholder />
                 )}
                 {captchaData !== null && (
                     <img
+                        className={classes.captchaImage}
                         src={captchaData}
                         alt="captcha"
                         onClick={refreshCaptcha}
diff --git a/src/hooks/useCaptcha.js b/src/hooks/useCaptcha.js
index d0b0452..2a477be 100644
--- a/src/hooks/useCaptcha.js
+++ b/src/hooks/useCaptcha.js
@@ -9,10 +9,21 @@ export const useStyle = makeStyles((theme) => ({
     captchaContainer: {
         display: "flex",
         marginTop: "10px",
+        alignItems: 'center',
         [theme.breakpoints.down("sm")]: {
             display: "block",
         },
     },
+    captchaImageContainer: {
+        cursor: 'pointer',
+        marginLeft: "1rem",
+        [theme.breakpoints.down("sm")]: {
+            marginLeft: 0,
+        },
+    },
+    captchaImage: {
+        borderRadius: 4,
+    },
 }));
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/no-empty-function