From 38ad85978a582e714b6c583d30062cd13e895a1c Mon Sep 17 00:00:00 2001
From: haitaoo <haitao@sifou.com>
Date: Thu, 27 Jul 2023 17:55:43 +0800
Subject: [PATCH] fix(Signup): Display the registration form by configuration.

---
 ui/src/components/Modal/PicAuthCodeModal.tsx  | 98 -------------------
 ui/src/components/Modal/index.tsx             |  2 -
 ui/src/components/index.ts                    |  2 -
 ui/src/hooks/useCaptchaModal/index.tsx        |  2 +-
 .../Register/components/SignUpForm/index.tsx  |  5 -
 ui/src/pages/Users/Register/index.tsx         | 18 +++-
 6 files changed, 17 insertions(+), 110 deletions(-)
 delete mode 100644 ui/src/components/Modal/PicAuthCodeModal.tsx

diff --git a/ui/src/components/Modal/PicAuthCodeModal.tsx b/ui/src/components/Modal/PicAuthCodeModal.tsx
deleted file mode 100644
index a3f0c3f4..00000000
--- a/ui/src/components/Modal/PicAuthCodeModal.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { useEffect } from 'react';
-import { Modal, Form, Button, InputGroup } from 'react-bootstrap';
-import { useTranslation } from 'react-i18next';
-
-import { Icon } from '@/components';
-import type { FormValue, FormDataType, ImgCodeRes } from '@/common/interface';
-import { CAPTCHA_CODE_STORAGE_KEY } from '@/common/constants';
-import Storage from '@/utils/storage';
-
-interface IProps {
-  /** control visible */
-  visible: boolean;
-  data: {
-    captcha: FormValue;
-    imgCode: ImgCodeRes;
-  };
-  handleCaptcha: (parma: FormDataType) => void;
-  clickSubmit: (e: any) => void;
-  refreshImgCode: () => void;
-  onClose: () => void;
-}
-
-const Index: React.FC<IProps> = ({
-  visible,
-  data,
-  handleCaptcha,
-  clickSubmit,
-  refreshImgCode,
-  onClose,
-}) => {
-  const { t } = useTranslation('translation', { keyPrefix: 'pic_auth_code' });
-  const { captcha, imgCode } = data;
-
-  useEffect(() => {
-    if (visible) {
-      refreshImgCode();
-    }
-  }, [visible]);
-
-  return (
-    <Modal size="sm" title="Captcha" show={visible} onHide={onClose} centered>
-      <Modal.Header closeButton>
-        <Modal.Title as="h5">{t('title')}</Modal.Title>
-      </Modal.Header>
-      <Modal.Body>
-        <Form noValidate onSubmit={clickSubmit}>
-          <Form.Group controlId="code" className="mb-3">
-            <div className="mb-3 p-2 d-flex align-items-center justify-content-center bg-light rounded-2">
-              <img
-                src={imgCode?.captcha_img}
-                alt="code"
-                width="auto"
-                height="40px"
-              />
-            </div>
-            <InputGroup>
-              <Form.Control
-                type="text"
-                autoComplete="off"
-                placeholder={t('placeholder')}
-                isInvalid={captcha?.isInvalid}
-                onChange={(e) => {
-                  Storage.set(CAPTCHA_CODE_STORAGE_KEY, e.target.value);
-                  handleCaptcha({
-                    captcha_code: {
-                      value: e.target.value,
-                      isInvalid: false,
-                      errorMsg: '',
-                    },
-                  });
-                }}
-              />
-              <Button
-                onClick={refreshImgCode}
-                variant="outline-secondary"
-                title={t('refresh', { keyPrefix: 'btns' })}
-                style={{
-                  borderTopRightRadius: '0.375rem',
-                  borderBottomRightRadius: '0.375rem',
-                }}>
-                <Icon name="arrow-repeat" />
-              </Button>
-
-              <Form.Control.Feedback type="invalid">
-                {captcha?.errorMsg}
-              </Form.Control.Feedback>
-            </InputGroup>
-          </Form.Group>
-
-          <div className="d-grid">
-            <Button type="submit">{t('verify', { keyPrefix: 'btns' })}</Button>
-          </div>
-        </Form>
-      </Modal.Body>
-    </Modal>
-  );
-};
-export default Index;
diff --git a/ui/src/components/Modal/index.tsx b/ui/src/components/Modal/index.tsx
index 81764934..226f2fbe 100644
--- a/ui/src/components/Modal/index.tsx
+++ b/ui/src/components/Modal/index.tsx
@@ -1,6 +1,5 @@
 import DefaultModal from './Modal';
 import confirm, { Config } from './Confirm';
-import PicAuthCodeModal from './PicAuthCodeModal';
 import LoginToContinueModal from './LoginToContinueModal';
 
 type ModalType = typeof DefaultModal & {
@@ -14,5 +13,4 @@ Modal.confirm = function (props: Config) {
 
 export default Modal;
 
-export { PicAuthCodeModal };
 export { LoginToContinueModal };
diff --git a/ui/src/components/index.ts b/ui/src/components/index.ts
index c78952cb..c8675e03 100644
--- a/ui/src/components/index.ts
+++ b/ui/src/components/index.ts
@@ -14,7 +14,6 @@ import Operate from './Operate';
 import UserCard from './UserCard';
 import Pagination from './Pagination';
 import Comment from './Comment';
-import PicAuthCodeModal from './Modal/PicAuthCodeModal';
 import TextArea from './TextArea';
 import Mentions from './Mentions';
 import FormatTime from './FormatTime';
@@ -59,7 +58,6 @@ export {
   UserCard,
   Pagination,
   Comment,
-  PicAuthCodeModal,
   TextArea,
   Mentions,
   FormatTime,
diff --git a/ui/src/hooks/useCaptchaModal/index.tsx b/ui/src/hooks/useCaptchaModal/index.tsx
index e61242c2..034240e6 100644
--- a/ui/src/hooks/useCaptchaModal/index.tsx
+++ b/ui/src/hooks/useCaptchaModal/index.tsx
@@ -189,7 +189,7 @@ const Index = (captchaKey: CaptchaKey) => {
                   src={captcha?.captcha_img}
                   alt="captcha img"
                   width="auto"
-                  height="40px"
+                  height="60px"
                 />
               </div>
               <InputGroup>
diff --git a/ui/src/pages/Users/Register/components/SignUpForm/index.tsx b/ui/src/pages/Users/Register/components/SignUpForm/index.tsx
index 47768934..0340d26b 100644
--- a/ui/src/pages/Users/Register/components/SignUpForm/index.tsx
+++ b/ui/src/pages/Users/Register/components/SignUpForm/index.tsx
@@ -231,11 +231,6 @@ const Index: React.FC<Props> = ({ callback }) => {
           .
         </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>
     </>
   );
 };
diff --git a/ui/src/pages/Users/Register/index.tsx b/ui/src/pages/Users/Register/index.tsx
index efc10351..be646ecc 100644
--- a/ui/src/pages/Users/Register/index.tsx
+++ b/ui/src/pages/Users/Register/index.tsx
@@ -1,25 +1,34 @@
 import React, { useState } from 'react';
 import { Container, Col } from 'react-bootstrap';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 
 import { usePageTags } from '@/hooks';
 import { Unactivate, WelcomeTitle, PluginRender } from '@/components';
 import { guard } from '@/utils';
+import { loginSettingStore } from '@/stores';
 
 import SignUpForm from './components/SignUpForm';
 
 const Index: React.FC = () => {
   const [showForm, setShowForm] = useState(true);
   const { t } = useTranslation('translation', { keyPrefix: 'login' });
+  const loginSetting = loginSettingStore((state) => state.login);
   const onStep = () => {
     setShowForm((bol) => !bol);
   };
   usePageTags({
     title: t('sign_up', { keyPrefix: 'page_title' }),
   });
+
   if (!guard.singUpAgent().ok) {
     return null;
   }
+
+  const showSignupForm =
+    loginSetting?.allow_new_registrations &&
+    loginSetting.allow_email_registrations;
+
   return (
     <Container style={{ paddingTop: '4rem', paddingBottom: '5rem' }}>
       <WelcomeTitle />
@@ -27,7 +36,12 @@ const Index: React.FC = () => {
       {showForm ? (
         <Col className="mx-auto" md={6} lg={4} xl={3}>
           <PluginRender type="Connector" className="mb-5" />
-          <SignUpForm callback={onStep} />
+          {showSignupForm ? <SignUpForm callback={onStep} /> : null}
+          <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>
       ) : (
         <Unactivate visible={!showForm} />