chore: Add image capcha code when registering, Dynamically insert custom.css

2022-12-18 01:46:41 +08:00 · 2022-12-18 01:46:41 +08:00 · c15b3e73ce
parent 933edf0269
commit c15b3e73ce
5 changed files with 178 additions and 114 deletions
--- a/ui/public/index.html
+++ b/ui/public/index.html
@ -5,7 +5,6 @@
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link rel="stylesheet" href="%PUBLIC_URL%/custom.css" />
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
--- a/ui/src/pages/Layout/index.tsx
+++ b/ui/src/pages/Layout/index.tsx
@ -30,6 +30,7 @@ const Layout: FC = () => {
        <title>{pageTitle}</title>
        {keywords && <meta name="keywords" content={keywords} />}
        {description && <meta name="description" content={description} />}
+        <link rel="stylesheet" href={`${process.env.PUBLIC_URL}/custom.css`} />
      </Helmet>
      <CustomizeTheme />
      <SWRConfig
--- a/ui/src/pages/Users/Personal/index.tsx
+++ b/ui/src/pages/Users/Personal/index.tsx
@ -122,6 +122,7 @@ const Personal: FC = () => {
          <h5 className="mb-3">{t('stats')}</h5>
          {userInfo?.info && (
            <>
+              <FormatTime time={1671290521} preFix={t('last_login')} />
              <div className="text-secondary">
                <FormatTime
                  time={userInfo.info.created_at}
--- a/ui/src/pages/Users/Register/components/SignUpForm/index.tsx
+++ b/ui/src/pages/Users/Register/components/SignUpForm/index.tsx
@ -1,10 +1,17 @@
-import React, { FormEvent, MouseEvent, useState } from 'react';
+import React, { FormEvent, MouseEvent, useEffect, useState } from 'react';
 import { Form, Button, Col } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';

-import type { FormDataType } from '@/common/interface';
-import { register, useLegalTos, useLegalPrivacy } from '@/services';
+import { PicAuthCodeModal } from '@/components/Modal';
+import { ImgCodeRes, LoginReqParams } from '@/common/interface';
+import type { FormDataType, RegisterReqParams } from '@/common/interface';
+import {
+  register,
+  getRegisterCaptcha,
+  useLegalTos,
+  useLegalPrivacy,
+} from '@/services';
 import userStore from '@/stores/userInfo';
 import { handleFormError } from '@/utils';

@ -38,6 +45,17 @@ const Index: React.FC<Props> = ({ callback }) => {
  });
  const updateUser = userStore((state) => state.update);

+  const [imgCode, setImgCode] = useState<ImgCodeRes>({
+    captcha_id: '',
+    captcha_img: '',
+    verify: false,
+  });
+  const [showModal, setModalState] = useState(false);
+  const getImgCode = () => {
+    getRegisterCaptcha().then((res) => {
+      setImgCode(res);
+    });
+  };
  const handleChange = (params: FormDataType) => {
    setFormData({ ...formData, ...params });
  };
@ -104,17 +122,29 @@ const Index: React.FC<Props> = ({ callback }) => {
    }
  };

-  const handleSubmit = async (event: FormEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
-    if (!checkValidated()) {
-      return;
+  const handleRegister = (event?: any) => {
+    if (event) {
+      event.preventDefault();
    }
-    register({
+    const params: LoginReqParams = {
+      e_mail: formData.e_mail.value,
+      pass: formData.pass.value,
+    };
+    if (imgCode.verify) {
+      params.captcha_code = formData.captcha_code.value;
+      params.captcha_id = imgCode.captcha_id;
+    }
+    const reqParams: RegisterReqParams = {
      name: formData.name.value,
      e_mail: formData.e_mail.value,
      pass: formData.pass.value,
-    })
+    };
+
+    if (imgCode.verify) {
+      reqParams.captcha_code = formData.captcha_code.value;
+      reqParams.captcha_id = imgCode.captcha_id;
+    }
+    register(reqParams)
      .then((res) => {
        updateUser(res);
        callback();
@ -127,113 +157,141 @@ const Index: React.FC<Props> = ({ callback }) => {
      });
  };

+  const handleSubmit = async (event: FormEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!checkValidated()) {
+      return;
+    }
+    if (imgCode.verify) {
+      setModalState(true);
+      return;
+    }
+    handleRegister();
+  };
+  useEffect(() => {
+    getImgCode();
+  }, []);
  return (
-    <Col className="mx-auto" md={3}>
-      <Form noValidate onSubmit={handleSubmit} autoComplete="off">
-        <Form.Group controlId="name" className="mb-3">
-          <Form.Label>{t('name.label')}</Form.Label>
-          <Form.Control
-            autoComplete="off"
-            required
-            type="text"
-            isInvalid={formData.name.isInvalid}
-            value={formData.name.value}
-            onChange={(e) =>
-              handleChange({
-                name: {
-                  value: e.target.value,
-                  isInvalid: false,
-                  errorMsg: '',
-                },
-              })
-            }
-          />
-          <Form.Control.Feedback type="invalid">
-            {formData.name.errorMsg}
-          </Form.Control.Feedback>
-        </Form.Group>
-        <Form.Group controlId="email" className="mb-3">
-          <Form.Label>{t('email.label')}</Form.Label>
-          <Form.Control
-            autoComplete="off"
-            required
-            type="e_mail"
-            isInvalid={formData.e_mail.isInvalid}
-            value={formData.e_mail.value}
-            onChange={(e) =>
-              handleChange({
-                e_mail: {
-                  value: e.target.value,
-                  isInvalid: false,
-                  errorMsg: '',
-                },
-              })
-            }
-          />
-          <Form.Control.Feedback type="invalid">
-            {formData.e_mail.errorMsg}
-          </Form.Control.Feedback>
-        </Form.Group>
+    <>
+      <Col className="mx-auto" md={3}>
+        <Form noValidate onSubmit={handleSubmit} autoComplete="off">
+          <Form.Group controlId="name" className="mb-3">
+            <Form.Label>{t('name.label')}</Form.Label>
+            <Form.Control
+              autoComplete="off"
+              required
+              type="text"
+              isInvalid={formData.name.isInvalid}
+              value={formData.name.value}
+              onChange={(e) =>
+                handleChange({
+                  name: {
+                    value: e.target.value,
+                    isInvalid: false,
+                    errorMsg: '',
+                  },
+                })
+              }
+            />
+            <Form.Control.Feedback type="invalid">
+              {formData.name.errorMsg}
+            </Form.Control.Feedback>
+          </Form.Group>
+          <Form.Group controlId="email" className="mb-3">
+            <Form.Label>{t('email.label')}</Form.Label>
+            <Form.Control
+              autoComplete="off"
+              required
+              type="e_mail"
+              isInvalid={formData.e_mail.isInvalid}
+              value={formData.e_mail.value}
+              onChange={(e) =>
+                handleChange({
+                  e_mail: {
+                    value: e.target.value,
+                    isInvalid: false,
+                    errorMsg: '',
+                  },
+                })
+              }
+            />
+            <Form.Control.Feedback type="invalid">
+              {formData.e_mail.errorMsg}
+            </Form.Control.Feedback>
+          </Form.Group>

-        <Form.Group controlId="password" className="mb-3">
-          <Form.Label>{t('password.label')}</Form.Label>
-          <Form.Control
-            autoComplete="off"
-            required
-            type="password"
-            maxLength={32}
-            isInvalid={formData.pass.isInvalid}
-            value={formData.pass.value}
-            onChange={(e) =>
-              handleChange({
-                pass: {
-                  value: e.target.value,
-                  isInvalid: false,
-                  errorMsg: '',
-                },
-              })
-            }
-          />
-          <Form.Control.Feedback type="invalid">
-            {formData.pass.errorMsg}
-          </Form.Control.Feedback>
-        </Form.Group>
+          <Form.Group controlId="password" className="mb-3">
+            <Form.Label>{t('password.label')}</Form.Label>
+            <Form.Control
+              autoComplete="off"
+              required
+              type="password"
+              maxLength={32}
+              isInvalid={formData.pass.isInvalid}
+              value={formData.pass.value}
+              onChange={(e) =>
+                handleChange({
+                  pass: {
+                    value: e.target.value,
+                    isInvalid: false,
+                    errorMsg: '',
+                  },
+                })
+              }
+            />
+            <Form.Control.Feedback type="invalid">
+              {formData.pass.errorMsg}
+            </Form.Control.Feedback>
+          </Form.Group>

-        <div className="d-grid">
-          <Button variant="primary" type="submit">
-            {t('signup', { keyPrefix: 'btns' })}
-          </Button>
+          <div className="d-grid">
+            <Button variant="primary" type="submit">
+              {t('signup', { keyPrefix: 'btns' })}
+            </Button>
+          </div>
+        </Form>
+        <div className="text-center fs-14 mt-3">
+          <Trans i18nKey="login.agreements" ns="translation">
+            By registering, you agree to the
+            <Link
+              to="/privacy"
+              onClick={(evt) => {
+                argumentClick(evt, 'privacy');
+              }}
+              target="_blank">
+              privacy policy
+            </Link>
+            and
+            <Link
+              to="/tos"
+              onClick={(evt) => {
+                argumentClick(evt, 'tos');
+              }}
+              target="_blank">
+              terms of service
+            </Link>
+            .
+          </Trans>
        </div>
-      </Form>
-      <div className="text-center fs-14 mt-3">
-        <Trans i18nKey="login.agreements" ns="translation">
-          By registering, you agree to the
-          <Link
-            to="/privacy"
-            onClick={(evt) => {
-              argumentClick(evt, 'privacy');
-            }}
-            target="_blank">
-            privacy policy
-          </Link>
-          and
-          <Link
-            to="/tos"
-            onClick={(evt) => {
-              argumentClick(evt, 'tos');
-            }}
-            target="_blank">
-            terms of service
-          </Link>
-          .
-        </Trans>
-      </div>
-      <div className="text-center mt-5">
-        <Trans i18nKey="login.info_login" ns="translation">
-          Already have an account? <Link to="/users/login">Log in</Link>
-        </Trans>
-      </div>
-    </Col>
+        <div className="text-center mt-5">
+          <Trans i18nKey="login.info_login" ns="translation">
+            Already have an account? <Link to="/users/login">Log in</Link>
+          </Trans>
+        </div>
+      </Col>
+      <PicAuthCodeModal
+        visible={showModal}
+        data={{
+          captcha: formData.captcha_code,
+          imgCode,
+        }}
+        handleCaptcha={handleChange}
+        clickSubmit={handleRegister}
+        refreshImgCode={getImgCode}
+        onClose={() => setModalState(false)}
+      />
+    </>
  );
 };

--- a/ui/src/services/common.ts
+++ b/ui/src/services/common.ts
@ -96,6 +96,11 @@ export const register = (params: Type.RegisterReqParams) => {
  return request.post<any>('/answer/api/v1/user/register/email', params);
 };

+export const getRegisterCaptcha = () => {
+  const apiUrl = '/answer/api/v1/user/register/captcha';
+  return request.get(apiUrl);
+};
+
 export const logout = () => {
  return request.get('/answer/api/v1/user/logout');
 };