disable form

packages/app/src/components/InvitedForm.tsx

@@ -1,6 +1,9 @@
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 
 import { useTranslation } from 'next-i18next';
+import useRouter from 'next/router';
+
+import { apiv3Post } from '~/client/util/apiv3-client';
 
 import { useCsrfToken, useCurrentUser } from '../stores/context';
 
@@ -11,11 +14,38 @@ export type InvitedFormProps = {
 
 export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
   const { t } = useTranslation();
-  const { data: csrfToken } = useCsrfToken();
+  // const { data: csrfToken } = useCsrfToken();
   const { data: user } = useCurrentUser();
+  const router = useRouter();
 
   const { invitedFormUsername, invitedFormName } = props;
 
+  const [usernameForInvited, setUsernameForInvited] = useState('');
+  const [userForInvited, setUserForInvited] = useState('');
+  const [passwordForInvited, setPasswordForInvited] = useState('');
+  const [loginErrors, setLoginErrors] = useState<Error[]>([]);
+
+  const handleInvitedWithLocalSubmit = useCallback(async(e) => {
+    e.preventDefault();
+
+    const invitedUserInfo = {
+      username: usernameForInvited,
+      name: userForInvited,
+      password: passwordForInvited,
+    };
+
+    try {
+      const res = await apiv3Post('/invited/activateInvited', { invitedUserInfo });
+      const { redirectTo } = res.data;
+      router.push(redirectTo);
+    }
+    catch (err) {
+      setLoginErrors(err);
+    }
+    return;
+
+  }, [usernameForInvited, userForInvited, passwordForInvited, router]);
+
   if (user == null) {
     return <></>;
   }
@@ -26,7 +56,7 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
         <strong>{ t('invited.discription_heading') }</strong><br></br>
         <small>{ t('invited.discription') }</small>
       </p>
-      <form role="form" action="/invited/activateInvited" method="post" id="invited-form">
+      <form role="form" onSubmit={handleInvitedWithLocalSubmit} id="invited-form">
         {/* Email Form */}
         <div className="input-group">
           <div className="input-group-prepend">
@@ -57,6 +87,7 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
             placeholder={t('User ID')}
             name="invitedForm[username]"
             value={invitedFormUsername}
+            onChange = {(e) => { setUsernameForInvited(e.target.value) }}
             required
           />
         </div>
@@ -73,6 +104,7 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
             placeholder={t('Name')}
             name="invitedForm[name]"
             value={invitedFormName}
+            onChange = {(e) => { setUserForInvited(e.target.value) }}
             required
           />
         </div>
@@ -87,13 +119,14 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
             type="password"
             className="form-control"
             placeholder={t('Password')}
+            onChange = {(e) => { setPasswordForInvited(e.target.value) }}
             name="invitedForm[password]"
             required
           />
         </div>
         {/* Create Button */}
         <div className="input-group justify-content-center d-flex mt-5">
-          <input type="hidden" name="_csrf" value={csrfToken} />
+          {/* <input type="hidden" name="_csrf" value={csrfToken} /> */}
           <button type="submit" className="btn btn-fill" id="register">
             <div className="eff"></div>
             <span className="btn-label"><i className="icon-user-follow"></i></span>

packages/app/src/server/routes/apiv3/index.js

@@ -2,6 +2,7 @@ import loggerFactory from '~/utils/logger';
 
 import { generateAddActivityMiddleware } from '../../middlewares/add-activity';
 import injectUserRegistrationOrderByTokenMiddleware from '../../middlewares/inject-user-registration-order-by-token-middleware';
+import * as loginFormValidator from '../../middlewares/login-form-validator';
 import * as registerFormValidator from '../../middlewares/register-form-validator';
 
 import pageListing from './page-listing';
@@ -49,6 +50,9 @@ module.exports = (crowi, app) => {
   routerForAuth.post('/register',
     applicationInstalled, registerFormValidator.registerRules(), registerFormValidator.registerValidation, addActivity, login.register);
 
+  routerForAuth.post('/refister/activated',
+    applicationInstalled, loginFormValidator.inviteRules(), loginFormValidator.inviteValidation, login.invited);
+
   router.use('/in-app-notification', require('./in-app-notification')(crowi));
 
   router.use('/personal-setting', require('./personal-setting')(crowi));

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

@@ -81,7 +81,7 @@ module.exports = function(crowi, app) {
   app.get('/login/error/:reason'      , applicationInstalled, login.error);
   app.get('/login'                    , applicationInstalled, login.preLogin, next.delegateToNext);
   app.get('/invited'                  , applicationInstalled, next.delegateToNext);
-  app.post('/invited/activateInvited' , applicationInstalled, loginFormValidator.inviteRules(), loginFormValidator.inviteValidation, csrfProtection, login.invited);
+  // app.post('/invited/activateInvited' , applicationInstalled, loginFormValidator.inviteRules(), loginFormValidator.inviteValidation, csrfProtection, login.invited);
   app.post('/login'                   , applicationInstalled, loginFormValidator.loginRules(), loginFormValidator.loginValidation, csrfProtection,  addActivity, loginPassport.loginWithLocal, loginPassport.loginWithLdap, loginPassport.loginFailure);
 
   app.get('/register'                 , applicationInstalled, login.preLogin, login.register);