update

packages/app/src/components/InvitedForm.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
@@ -18,6 +18,7 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
   const { t } = useTranslation();
   const router = useRouter();
   const { data: user } = useCurrentUser();
+  const [loginErrors, setLoginErrors] = useState<Error[]>([]);
 
   const { invitedFormUsername, invitedFormName } = props;
 
@@ -39,24 +40,45 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
     };
 
     try {
-      await apiv3Post('/invited/activateInvited', { invitedForm });
-      router.push('/');
+      const res = await apiv3Post('/invited/activateInvited', { invitedForm });
+      const { redirectTo } = res.data;
+      router.push(redirectTo);
     }
     catch (err) {
-      // TODO: show errors
+      setLoginErrors(err);
     }
   }, [router]);
 
+  const formNotification = useCallback(() => {
+    return (
+      <>
+        { loginErrors != null && loginErrors.length > 0 ? (
+          <p className="alert alert-danger">
+            {loginErrors.map((err, index) => {
+              return (
+                <span key={index}>
+                  {t(err.message)}<br/>
+                </span>
+              );
+            })}
+          </p>
+        ) : (
+          <p className="alert alert-success">
+            <strong>{ t('invited.discription_heading') }</strong><br></br>
+            <small>{ t('invited.discription') }</small>
+          </p>
+        ) }
+      </>
+    );
+  }, [loginErrors, t]);
+
   if (user == null) {
     return <></>;
   }
 
   return (
     <div className="noLogin-dialog p-3 mx-auto" id="noLogin-dialog">
-      <p className="alert alert-success">
-        <strong>{ t('invited.discription_heading') }</strong><br></br>
-        <small>{ t('invited.discription') }</small>
-      </p>
+      { formNotification() }
       <form role="form" onSubmit={submitHandler} id="invited-form">
         {/* Email Form */}
         <div className="input-group">
@@ -120,6 +142,7 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
             placeholder={t('Password')}
             name="invitedForm[password]"
             required
+            minLength={6}
           />
         </div>
         {/* Create Button */}

packages/app/src/server/middlewares/invited-form-validator.ts

@@ -1,4 +1,5 @@
 import { body, validationResult } from 'express-validator';
+import { Request } from 'express-validator/src/base';
 
 // form rules
 export const invitedRules = () => {
@@ -22,10 +23,11 @@ export const invitedRules = () => {
 };
 
 // validation action
-export const invitedValidation = (req, res, next) => {
+export const invitedValidation = (req: Request, _res: any, next: () => any) => {
   const form = req.body;
 
   const errors = validationResult(req);
+
   if (errors.isEmpty()) {
     Object.assign(form, { isValid: true });
     req.form = form;

packages/app/src/server/routes/login.js

@@ -171,7 +171,7 @@ module.exports = function(crowi, app) {
 
   actions.invited = async function(req, res) {
     if (!req.user) {
-      return res.redirect('/login');
+      return res.apiv3({ redirectTo: '/login' });
     }
 
     if (req.method === 'POST' && req.form.isValid) {
@@ -185,14 +185,14 @@ module.exports = function(crowi, app) {
       const isUserCountExceedsUpperLimit = await User.isUserCountExceedsUpperLimit();
       if (isUserCountExceedsUpperLimit) {
         req.flash('warningMessage', req.t('message.can_not_activate_maximum_number_of_users'));
-        return res.redirect('/invited');
+        return res.apiv3({ redirectTo: '/invited' });
       }
 
       const creatable = await User.isRegisterableUsername(username);
       if (creatable) {
         try {
           await user.activateInvitedUser(username, name, password);
-          return res.redirect('/');
+          return res.apiv3({ redirectTo: '/' });
         }
         catch (err) {
           req.flash('warningMessage', req.t('message.failed_to_activate'));