ssr invited page

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

@@ -7,71 +7,109 @@ import { useCsrfToken } from '~/stores/context';
 
 type InvitedFormProps = {
   csrfToken: string,
+  isEmailAuthenticationEnabled: boolean,
+  username: string,
   isRegistering: boolean,
+  name: string,
+  email: string,
+  isMailerSetup: boolean,
+
   isLocalOrLdapStrategiesEnabled: boolean,
   isSomeExternalAuthEnabled: boolean,
   isPasswordResetEnabled: boolean,
   isRegistrationEnabled: boolean,
 }
 
-const switchForm = () => {
-
-};
-
-const renderLocalOrLdapLoginForm = () => {
-
-};
-
-const renderExternalAuthLoginForm = () => {
-
-};
-
-const renderRegisterForm = () => {
-
-};
-
 export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
   const { t } = useTranslation();
   const { data: csrfToken } = useCsrfToken();
 
   const {
-    isRegistering, isLocalOrLdapStrategiesEnabled, isSomeExternalAuthEnabled, isPasswordResetEnabled, isRegistrationEnabled,
+    isEmailAuthenticationEnabled, username, name, email, isMailerSetup,
   } = props;
 
+  const registerAction = '/login/activateInvited';
+  const submitText = t('Sign up');
+
   // TODO: i18n, checkcsrfToken
   return (
     <div className="col-md-12">
       <div className="noLogin-dialog mx-auto" id="noLogin-dialog">
         <div className="row mx-0">
           <div className="col-12">
-            <ReactCardFlip isFlipped={isRegistering} flipDirection="horizontal" cardZIndex="3">
-              <div className="front">
-                {isLocalOrLdapStrategiesEnabled && renderLocalOrLdapLoginForm()}
-                {isSomeExternalAuthEnabled && renderExternalAuthLoginForm()}
-                {isLocalOrLdapStrategiesEnabled && isPasswordResetEnabled && (
-                  <div className="text-right mb-2">
-                    <a href="/forgot-password" className="d-block link-switch">
-                      <i className="icon-key"></i> {t('forgot_password.forgot_password')}
-                    </a>
+            <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>
-                )}
-                {isRegistrationEnabled && (
-                  <div className="text-right mb-2">
-                    <a href="#register" id="register" className="link-switch" onClick={() => switchForm()}>
-                      <i className="ti ti-check-box"></i> {t('Sign up is here')}
-                    </a>
+                  <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>
-              <div className="back">
-                {isRegistrationEnabled && renderRegisterForm()}
+              {!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>
-            </ReactCardFlip>
+            </form>
           </div>
         </div>
-        <a href="https://growi.org" className="link-growi-org pl-3">
-          <span className="growi">GROWI</span>.<span className="org">ORG</span>
-        </a>
+        <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>
     </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"></i>
+                    <i className="icon-user">aaa</i>
                   </span>
                 </div>
                 <input

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

@@ -79,8 +79,8 @@ module.exports = function(crowi, app) {
   app.get('/'                         , applicationInstalled, unavailableWhenMaintenanceMode, loginRequired, autoReconnectToSearch, next.delegateToNext);
 
   app.get('/login/error/:reason'      , applicationInstalled, login.error);
-  app.get('/login/*'                    , applicationInstalled, login.preLogin, next.delegateToNext);
-  // app.get('/login/invited'            , applicationInstalled, login.invited, next.delegateToNext);
+  app.get('/login'                    , applicationInstalled, login.preLogin, next.delegateToNext);
+  app.get('/login/invited'            , applicationInstalled, next.delegateToNext);
   app.post('/login/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);