enable i18n update style

packages/app/public/static/locales/en_US/translation.json

@@ -676,8 +676,8 @@
     "Setup": "Setup"
   },
   "invited": {
-    "invited_discription_heading": "Create Account",
-    "invited_discription": "Create an your account with the invited email address"
+    "discription_heading": "Create Account",
+    "discription": "Create an your account with the invited email address"
   },
   "export_bulk": {
     "failed_to_export": "Failed to export",

packages/app/public/static/locales/ja_JP/translation.json

@@ -667,8 +667,8 @@
     "Setup": "セットアップ"
   },
   "invited": {
-    "invited_discription_heading": "アカウント作成",
-    "invited_discription": "招待を受け取ったメールアドレスでアカウントを作成します"
+    "discription_heading": "アカウント作成",
+    "discription": "招待を受け取ったメールアドレスでアカウントを作成します"
   },
   "export_bulk": {
     "failed_to_export": "ページのエクスポートに失敗しました",

packages/app/public/static/locales/zh_CN/translation.json

@@ -723,8 +723,8 @@
 		"Setup": "安装程序"
 	},
   "invited": {
-    "invited_discription_heading": "创建账户",
-    "invited_discription": "用被邀请的电子邮件地址创建一个你的账户"
+    "discription_heading": "创建账户",
+    "discription": "用被邀请的电子邮件地址创建一个你的账户"
   },
   "export_bulk": {
     "failed_to_export": "导出失败",

packages/app/src/components/Layout/NoLoginLayout.tsx

@@ -34,10 +34,9 @@ export const NoLoginLayout = ({
                     <h1 className="my-3">GROWI</h1>
                     <div className="noLogin-form-errors px-3"></div>
                   </div>
+                  {children}
                 </div>
 
-                {children}
-
               </div>
             </div>
           </div>

packages/app/src/components/Login/InvitedForm.tsx

@@ -1,23 +1,26 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { useTranslation } from 'next-i18next';
-import ReactCardFlip from 'react-card-flip';
 
+import { apiv3Get } from '~/client/util/apiv3-client';
 import { useCsrfToken } from '~/stores/context';
 
+import { toastError } from '../client/util/apiNotification';
+
+
 type InvitedFormProps = {
   csrfToken: string,
-  isEmailAuthenticationEnabled: boolean,
+  // isEmailAuthenticationEnabled: boolean,
   username: string,
-  isRegistering: boolean,
+  // isRegistering: boolean,
   name: string,
   email: string,
-  isMailerSetup: boolean,
+  // isMailerSetup: boolean,
 
-  isLocalOrLdapStrategiesEnabled: boolean,
-  isSomeExternalAuthEnabled: boolean,
-  isPasswordResetEnabled: boolean,
-  isRegistrationEnabled: boolean,
+  // isLocalOrLdapStrategiesEnabled: boolean,
+  // isSomeExternalAuthEnabled: boolean,
+  // isPasswordResetEnabled: boolean,
+  // isRegistrationEnabled: boolean,
 }
 
 export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
@@ -25,91 +28,116 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
   const { data: csrfToken } = useCsrfToken();
 
   const {
-    isEmailAuthenticationEnabled, username, name, email, isMailerSetup,
+    username, name, email,
   } = props;
 
   const registerAction = '/login/activateInvited';
-  const submitText = t('Sign up');
 
-  // TODO: i18n, checkcsrfToken
+  // const [usernameAvailable, setUsernameAvailable] = useState(true);
+
+  // useEffect(() => {
+  //   const delayDebounceFn = setTimeout(async() => {
+  //     try {
+  //       const { data } = await apiv3Get('/check-username', { username });
+  //       if (data.ok) {
+  //         setUsernameAvailable(data.valid);
+  //       }
+  //     }
+  //     catch (error) {
+  //       toastError(error, 'Error occurred when checking username');
+  //     }
+  //   }, 500);
+
+  //   return () => clearTimeout(delayDebounceFn);
+  // }, [username]);
+
+  // TODO: check flow
+  // TODO: check noLoing-dialog
   return (
-    <div className="col-md-12">
-      <div className="noLogin-dialog mx-auto" id="noLogin-dialog">
-        <div className="row mx-0">
-          <div className="col-12">
-            <p className="alert alert-success">
-              <strong>アカウントの作成</strong><br></br>
-              <small>招待を受け取ったメールアドレスでアカウントを作成します</small>
-            </p>
-            <form role="form" action={registerAction} method="post" id="register-form">
-              {!isEmailAuthenticationEnabled && (
-                <div>
-                  <div className="input-group" id="input-group-username">
-                    <div className="input-group-prepend">
-                      <span className="input-group-text">
-                        <i className="icon-user"></i>
-                      </span>
-                    </div>
-                    <input
-                      type="text"
-                      className="form-control rounded-0"
-                      placeholder={t('User ID')}
-                      name="registerForm[username]"
-                      defaultValue={username}
-                      required
-                    />
-                  </div>
-                  <p className="form-text text-danger">
-                    <span id="help-block-username"></span>
-                  </p>
-                  <div className="input-group">
-                    <div className="input-group-prepend">
-                      <span className="input-group-text">
-                        <i className="icon-tag"></i>
-                      </span>
-                    </div>
-                    <input type="text" className="form-control rounded-0" placeholder={t('Name')} name="registerForm[name]" defaultValue={name} required />
-                  </div>
-                </div>
-              )}
-              <div className="input-group">
-                <div className="input-group-prepend">
-                  <span className="input-group-text">
-                    <i className="icon-envelope"></i>
-                  </span>
-                </div>
-                <input type="email" className="form-control rounded-0" placeholder={t('Email')} name="registerForm[email]" defaultValue={email} required />
-              </div>
-              {!isEmailAuthenticationEnabled && (
-                <div>
-                  <div className="input-group">
-                    <div className="input-group-prepend">
-                      <span className="input-group-text">
-                        <i className="icon-lock"></i>
-                      </span>
-                    </div>
-                    <input type="password" className="form-control rounded-0" placeholder={t('Password')} name="registerForm[password]" required />
-                  </div>
-                </div>
-              )}
-              <div className="input-group justify-content-center my-4">
-                <input type="hidden" name="_csrf" value={csrfToken} />
-                <button type="submit" className="btn btn-fill rounded-0" id="register" disabled={(!isMailerSetup && isEmailAuthenticationEnabled)}>
-                  <div className="eff"></div>
-                  <span className="btn-label">
-                    <i className="icon-user-follow"></i>
-                  </span>
-                  <span className="btn-label-text">{submitText}</span>
-                </button>
-              </div>
-            </form>
+    <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>
+      <form role="form" action={registerAction} method="post" id="invited-form">
+        {/* Email Form */}
+        <div className="input-group">
+          <div className="input-group-prepend">
+            <span className="input-group-text">
+              <i className="icon-envelope"></i>
+            </span>
+          </div>
+          <input
+            type="text"
+            className="form-control"
+            disabled
+            placeholder={t('Email')}
+            name="invitedForm[email]" // ?
+            defaultValue={user.email} // value = user.email
+            required
+          />
+        </div>
+        {/* UserID Form */}
+        <div className="input-group" id="input-group-username">
+          <div className="input-group-prepend">
+            <span className="input-group-text">
+              <i className="icon-user"></i>
+            </span>
+          </div>
+          <input
+            type="text"
+            className="form-control"
+            placeholder={t('User ID')}
+            name="invitedForm[username]"
+            defaultValue={username} // value =req.body.invitedForm.username
+            required
+          />
+        </div>
+        {/* Name Form */}
+        <div className="input-group">
+          <div className="input-group-prepend">
+            <span className="input-group-text">
+              <i className="icon-tag"></i>
+            </span>
+          </div>
+          <input
+            type="text"
+            className="form-control"
+            placeholder={t('Name')}
+            name="invitedForm[name]"
+            defaultValue={name} // value = req.body.invitedForm.name
+            required
+          />
+        </div>
+        {/* Password Form */}
+        <div className="input-group">
+          <div className="input-group-prepend">
+            <span className="input-group-text">
+              <i className="icon-lock"></i>
+            </span>
           </div>
+          <input
+            type="password"
+            className="form-control"
+            placeholder={t('Password')}
+            name="invitedForm[password]"
+            required
+          />
         </div>
-        <div className="input-group mt-5 d-flex justify-content-center">
-          <a href="https://growi.org" className="link-growi-org">
-            <span className="growi">GROWI</span>.<span className="org">ORG</span>
-          </a>
+        {/* Create Button */}
+        <div className="input-group justify-content-center d-flex mt-5">
+          <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>
+            <span className="btn-label-text">{t('Create')}</span>
+          </button>
         </div>
+      </form>
+      <div className="input-group mt-5 d-flex justify-content-center">
+        <a href="https://growi.org" className="link-growi-org">
+          <span className="growi">GROWI</span>.<span className="org">ORG</span>
+        </a>
       </div>
     </div>
   );

packages/app/src/components/LoginForm.jsx

@@ -186,7 +186,7 @@ class LoginForm extends React.Component {
               <div className="input-group" id="input-group-username">
                 <div className="input-group-prepend">
                   <span className="input-group-text">
-                    <i className="icon-user">aaa</i>
+                    <i className="icon-user"></i>
                   </span>
                 </div>
                 <input

packages/app/src/pages/installer.page.tsx

@@ -47,10 +47,8 @@ const InstallerPage: NextPage<Props> = (props: Props) => {
 
   return (
     <NoLoginLayout title={useCustomTitle(props, 'GROWI')} className={classNames.join(' ')}>
-      <div className="col-md-12">
-        <div id="installer-form-container">
-          <InstallerForm />
-        </div>
+      <div id="installer-form-container">
+        <InstallerForm />
       </div>
     </NoLoginLayout>
   );

packages/app/src/pages/login/[[...path]].page.tsx

@@ -117,7 +117,7 @@ export const getServerSideProps: GetServerSideProps = async(context: GetServerSi
 
   injectServerConfigurations(context, props);
   injectEnabledStrategies(context, props);
-  await injectNextI18NextConfigurations(context, props, ['login']);
+  await injectNextI18NextConfigurations(context, props, ['translation']);
 
   return { props };
 };