Common components to be rendered during registration

packages/app/src/components/CompleteUserRegistration.tsx

@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+
+import { useTranslation } from 'next-i18next';
+
+export const CompleteUserRegistration: FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="noLogin-dialog mx-auto" id="noLogin-dialog">
+      <div className="row mx-0">
+        <div className="col-12 mb-3 text-center">
+          <p className="alert alert-success">
+            <span>{t('login.Registration successful')}</span>
+          </p>
+          <span>{t('login.wait_for_admin_approval')}</span>
+        </div>
+      </div>
+    </div>
+  );
+};

packages/app/src/components/CompleteUserRegistrationForm.tsx

@@ -7,10 +7,13 @@ import { UserActivationErrorCode } from '~/interfaces/errors/user-activation';
 
 import { toastSuccess, toastError } from '../client/util/apiNotification';
 
+import { CompleteUserRegistration } from './CompleteUserRegistration';
+
 interface Props {
   email: string,
   token: string,
   errorCode?: UserActivationErrorCode,
+  registrationMode: string,
   isEmailAuthenticationEnabled: boolean,
 }
 
@@ -21,6 +24,7 @@ const CompleteUserRegistrationForm: React.FC<Props> = (props: Props) => {
     email,
     token,
     errorCode,
+    registrationMode,
     isEmailAuthenticationEnabled,
   } = props;
 
@@ -31,6 +35,7 @@ const CompleteUserRegistrationForm: React.FC<Props> = (props: Props) => {
   const [name, setName] = useState('');
   const [password, setPassword] = useState('');
   const [disableForm, setDisableForm] = useState(forceDisableForm);
+  const [isSuccessToRagistration, setIsSuccessToRagistration] = useState(false);
 
   useEffect(() => {
     const delayDebounceFn = setTimeout(async() => {
@@ -55,14 +60,25 @@ const CompleteUserRegistrationForm: React.FC<Props> = (props: Props) => {
       await apiv3Post('/complete-registration', {
         username, name, password, token,
       });
+
       toastSuccess('Registration succeed');
-      window.location.href = '/login';
+
+      setIsSuccessToRagistration(true);
+
+      if (registrationMode !== 'Restricted') {
+        window.location.href = '/login';
+      }
     }
     catch (err) {
       toastError(err, 'Registration failed');
       setDisableForm(false);
+      setIsSuccessToRagistration(false);
     }
-  }, [name, password, token, username]);
+  }, [name, password, token, username, registrationMode]);
+
+  if (isSuccessToRagistration && registrationMode === 'Restricted') {
+    return <CompleteUserRegistration />;
+  }
 
   return (
     <>

packages/app/src/components/LoginForm.tsx

@@ -11,6 +11,8 @@ import { LoginErrorCode } from '~/interfaces/errors/login-error';
 import { IErrorV3 } from '~/interfaces/errors/v3-error';
 import { toArrayIfNot } from '~/utils/array-utils';
 
+import { CompleteUserRegistration } from './CompleteUserRegistration';
+
 type LoginFormProps = {
   username?: string,
   name?: string,
@@ -485,18 +487,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
   ]);
 
   if (registrationMode === 'Restricted' && isSuccessToRagistration && !isEmailAuthenticationEnabled) {
-    return (
-      <div className="noLogin-dialog mx-auto" id="noLogin-dialog">
-        <div className="row mx-0">
-          <div className="col-12 mb-3 text-center">
-            <p className="alert alert-success">
-              <span>{t('login.Registration successful')}</span>
-            </p>
-            <span>{t('login.wait_for_admin_approval')}</span>
-          </div>
-        </div>
-      </div>
-    );
+    return <CompleteUserRegistration />;
   }
 
   return (

packages/app/src/pages/user-activation.page.tsx

@@ -15,6 +15,7 @@ type Props = CommonProps & {
   token: string
   email: string
   errorCode?: UserActivationErrorCode
+  registrationMode: string
   isEmailAuthenticationEnabled: boolean
 }
 
@@ -25,6 +26,7 @@ const UserActivationPage: NextPage<Props> = (props: Props) => {
         token={props.token}
         email={props.email}
         errorCode={props.errorCode}
+        registrationMode={props.registrationMode}
         isEmailAuthenticationEnabled={props.isEmailAuthenticationEnabled}
       />
     </NoLoginLayout>
@@ -64,6 +66,7 @@ export const getServerSideProps: GetServerSideProps = async(context: GetServerSi
     props.errorCode = context.query.errorCode as UserActivationErrorCode;
   }
 
+  props.registrationMode = req.crowi.configManager.getConfig('crowi', 'security:registrationMode');
   props.isEmailAuthenticationEnabled = req.crowi.configManager.getConfig('crowi', 'security:passport-local:isEmailAuthenticationEnabled');
 
   await injectNextI18NextConfigurations(context, props, ['translation']);