Merge pull request #8801 from weseek/imprv/146005-behavior-when-creating-first-user-fails

imprv: Behavior when creating first user fails

apps/app/src/components/InstallerForm.tsx

@@ -10,7 +10,7 @@ import { i18n as i18nConfig } from '^/config/next-i18next.config';
 
 import { apiv3Post } from '~/client/util/apiv3-client';
 import { toastError } from '~/client/util/toastr';
-
+import type { IErrorV3 } from '~/interfaces/errors/v3-error';
 
 import styles from './InstallerForm.module.scss';
 
@@ -28,6 +28,8 @@ const InstallerForm = memo((): JSX.Element => {
   const [isLoading, setIsLoading] = useState(false);
   const [currentLocale, setCurrentLocale] = useState(isSupportedLang ? i18n.language : Lang.en_US);
 
+  const [registerErrors, setRegisterErrors] = useState<IErrorV3[]>([]);
+
   const checkUserName = useCallback(async(event) => {
     const axios = require('axios').create({
       headers: {
@@ -70,6 +72,7 @@ const InstallerForm = memo((): JSX.Element => {
     };
 
     try {
+      setRegisterErrors([]);
       await apiv3Post('/installer', data);
       router.push('/');
     }
@@ -77,6 +80,7 @@ const InstallerForm = memo((): JSX.Element => {
       const err = errs[0];
       const code = err.code;
       setIsLoading(false);
+      setRegisterErrors(errs);
 
       if (code === 'failed_to_login_after_install') {
         toastError(t('installer.failed_to_login_after_install'));
@@ -103,6 +107,19 @@ const InstallerForm = memo((): JSX.Element => {
         </div>
       </div>
       <div className="row mt-2">
+
+        {
+          registerErrors != null && registerErrors.length > 0 && (
+            <p className="alert alert-danger text-center">
+              {registerErrors.map(err => (
+                <span>
+                  {t(err.message)}<br />
+                </span>
+              ))}
+            </p>
+          )
+        }
+
         <form role="form" id="register-form" className="ps-1" onSubmit={submitHandler}>
           <div className="dropdown mb-3">
             <div className="input-group dropdown-with-icon">

apps/app/src/server/routes/apiv3/installer.ts

@@ -1,16 +1,16 @@
 import { ErrorV3 } from '@growi/core/dist/models';
-import express, { Request, Router } from 'express';
+import type { Request, Router } from 'express';
+import express from 'express';
 
 import { SupportedAction } from '~/interfaces/activity';
 import loggerFactory from '~/utils/logger';
 
-import Crowi from '../../crowi';
+import type Crowi from '../../crowi';
 import { generateAddActivityMiddleware } from '../../middlewares/add-activity';
-import { apiV3FormValidator } from '../../middlewares/apiv3-form-validator';
-import { registerRules } from '../../middlewares/register-form-validator';
+import { registerRules, registerValidation } from '../../middlewares/register-form-validator';
 import { InstallerService, FailedToCreateAdminUserError } from '../../service/installer';
 
-import { ApiV3Response } from './interfaces/apiv3-response';
+import type { ApiV3Response } from './interfaces/apiv3-response';
 
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -27,11 +27,17 @@ module.exports = (crowi: Crowi): Router => {
   const router = express.Router();
 
   // eslint-disable-next-line max-len
-  router.post('/', registerRules(), apiV3FormValidator, addActivity, async(req: FormRequest, res: ApiV3Response) => {
+  router.post('/', registerRules(), registerValidation, addActivity, async(req: FormRequest, res: ApiV3Response) => {
     const appService = crowi.appService;
     if (appService == null) {
       return res.apiv3Err(new ErrorV3('GROWI cannot be installed due to an internal error', 'app_service_not_setup'), 500);
     }
+
+    if (!req.form.isValid) {
+      const errors = req.form.errors;
+      return res.apiv3Err(errors, 400);
+    }
+
     const registerForm = req.body.registerForm || {};
 
     const name = registerForm.name;