验证码样式 (#104)

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"
   }
 }

public/locales/zh-CN/application.json

@@ -24,6 +24,7 @@
     "browserNotSupport": "当前浏览器或环境不支持",
     "success": "登录成功",
     "title": "登录 {{title}}",
-    "continue": "下一步"
+    "continue": "下一步",
+    "clickToRefresh": "点击刷新验证码"
   }
 }

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",
     },

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",
     },

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",

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>
 );
 

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}

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