ssr rendering

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

@@ -1,11 +1,78 @@
 import React from 'react';
 
 import { useTranslation } from 'next-i18next';
+import ReactCardFlip from 'react-card-flip';
 
 import { useCsrfToken } from '~/stores/context';
 
-export const InvitedForm = (): JSX.Element => {
+type InvitedFormProps = {
+  csrfToken: string,
+  isRegistering: 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,
+  } = props;
+
+  // 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>
+                  </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>
+                  </div>
+                )}
+              </div>
+              <div className="back">
+                {isRegistrationEnabled && renderRegisterForm()}
+              </div>
+            </ReactCardFlip>
+          </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>
+    </div>
   );
 };

packages/app/src/components/LoginForm.jsx

@@ -291,37 +291,39 @@ class LoginForm extends React.Component {
     const isSomeExternalAuthEnabled = true;
 
     return (
-      <div className="noLogin-dialog mx-auto" id="noLogin-dialog">
-        <div className="row mx-0">
-          <div className="col-12">
-            <ReactCardFlip isFlipped={this.state.isRegistering} flipDirection="horizontal" cardZIndex="3">
-              <div className="front">
-                {isLocalOrLdapStrategiesEnabled && this.renderLocalOrLdapLoginForm()}
-                {isSomeExternalAuthEnabled && this.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>
-                  </div>
-                )}
-                {isRegistrationEnabled && (
-                  <div className="text-right mb-2">
-                    <a href="#register" id="register" className="link-switch" onClick={this.switchForm}>
-                      <i className="ti ti-check-box"></i> {t('Sign up is here')}
-                    </a>
-                  </div>
-                )}
-              </div>
-              <div className="back">
-                {isRegistrationEnabled && this.renderRegisterForm()}
-              </div>
-            </ReactCardFlip>
+      <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={this.state.isRegistering} flipDirection="horizontal" cardZIndex="3">
+                <div className="front">
+                  {isLocalOrLdapStrategiesEnabled && this.renderLocalOrLdapLoginForm()}
+                  {isSomeExternalAuthEnabled && this.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>
+                    </div>
+                  )}
+                  {isRegistrationEnabled && (
+                    <div className="text-right mb-2">
+                      <a href="#register" id="register" className="link-switch" onClick={this.switchForm}>
+                        <i className="ti ti-check-box"></i> {t('Sign up is here')}
+                      </a>
+                    </div>
+                  )}
+                </div>
+                <div className="back">
+                  {isRegistrationEnabled && this.renderRegisterForm()}
+                </div>
+              </ReactCardFlip>
+            </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>
-        <a href="https://growi.org" className="link-growi-org pl-3">
-          <span className="growi">GROWI</span>.<span className="org">ORG</span>
-        </a>
       </div>
     );
   }

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

@@ -1,105 +0,0 @@
-import React from 'react';
-
-
-import {
-  NextPage, GetServerSideProps, GetServerSidePropsContext,
-} from 'next';
-import dynamic from 'next/dynamic';
-
-import { NoLoginLayout } from '~/components/Layout/NoLoginLayout';
-import { CrowiRequest } from '~/interfaces/crowi-request';
-
-import {
-  useCsrfToken,
-  useCurrentPathname,
-} from '../stores/context';
-
-
-import {
-  CommonProps, getServerSideCommonProps, useCustomTitle,
-} from './utils/commons';
-
-type Props = CommonProps & {
-
-  pageWithMetaStr: string,
-  isMailerSetup: boolean,
-  enabledStrategies: unknown,
-  registrationWhiteList: string[],
-};
-
-const LoginPage: NextPage<Props> = (props: Props) => {
-
-  // commons
-  useCsrfToken(props.csrfToken);
-
-  // page
-  useCurrentPathname(props.currentPathname);
-
-  const classNames: string[] = ['login-page'];
-
-  const LoginForm = dynamic(() => import('~/components/LoginForm'), {
-    ssr: false,
-  });
-
-  return (
-    <NoLoginLayout title={useCustomTitle(props, 'GROWI')} className={classNames.join(' ')}>
-      <div className="col-md-12">
-        <LoginForm objOfIsExternalAuthEnableds={props.enabledStrategies} isLocalStrategySetup={true} isLdapStrategySetup={true}
-          isRegistrationEnabled={true} registrationWhiteList={props.registrationWhiteList} isPasswordResetEnabled={true} />
-      </div>
-    </NoLoginLayout>
-  );
-};
-
-function injectEnabledStrategies(context: GetServerSidePropsContext, props: Props): void {
-  const req: CrowiRequest = context.req as CrowiRequest;
-  const { crowi } = req;
-  const {
-    configManager,
-  } = crowi;
-
-  const enabledStrategies = {
-    google: configManager.getConfig('crowi', 'security:passport-google:isEnabled'),
-    github: configManager.getConfig('crowi', 'security:passport-github:isEnabled'),
-    facebook: false,
-    twitter: configManager.getConfig('crowi', 'security:passport-twitter:isEnabled'),
-    smal: configManager.getConfig('crowi', 'security:passport-saml:isEnabled'),
-    oidc: configManager.getConfig('crowi', 'security:passport-oidc:isEnabled'),
-    basic: configManager.getConfig('crowi', 'security:passport-basic:isEnabled'),
-  };
-
-  props.enabledStrategies = enabledStrategies;
-}
-
-async function injectServerConfigurations(context: GetServerSidePropsContext, props: Props): Promise<void> {
-  const req: CrowiRequest = context.req as CrowiRequest;
-  const { crowi } = req;
-  const {
-    mailService,
-    configManager,
-  } = crowi;
-
-  props.isMailerSetup = mailService.isMailerSetup;
-  props.registrationWhiteList = configManager.getConfig('crowi', 'security:registrationWhiteList');
-}
-
-export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
-  const result = await getServerSideCommonProps(context);
-
-  // check for presence
-  // see: https://github.com/vercel/next.js/issues/19271#issuecomment-730006862
-  if (!('props' in result)) {
-    throw new Error('invalid getSSP result');
-  }
-
-  const props: Props = result.props as Props;
-
-  injectServerConfigurations(context, props);
-  injectEnabledStrategies(context, props);
-
-  return {
-    props,
-  };
-};
-
-export default LoginPage;

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

@@ -1,8 +1,6 @@
 import React from 'react';
 
-import { isClient } from '^/../core/src';
 import { NextPage, GetServerSideProps, GetServerSidePropsContext } from 'next';
-import { useTranslation } from 'next-i18next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
@@ -27,10 +25,9 @@ type Props = CommonProps & {
 
 const LoginPage: NextPage<Props> = (props: Props) => {
 
-  // const { t } = useTranslation('login');
   const router = useRouter();
   const { path } = router.query;
-  const pagePathKeys: string[] = Array.isArray(path) ? path : ['home'];
+  const pagePathKeys: string[] = Array.isArray(path) ? path : ['login'];
 
   useCsrfToken(props.csrfToken);
   useCurrentPathname(props.currentPathname);
@@ -38,12 +35,12 @@ const LoginPage: NextPage<Props> = (props: Props) => {
   const loginPagesMap = {
     login: {
       component: <LoginForm
-        objOfIsExternalAuthEnableds={props.enabledStrategies}
         isLocalStrategySetup={true}
         isLdapStrategySetup={true}
+        objOfIsExternalAuthEnableds={props.enabledStrategies}
         isRegistrationEnabled={true}
-        registrationWhiteList={props.registrationWhiteList}
         isPasswordResetEnabled={true}
+        registrationWhiteList={props.registrationWhiteList}
       />,
       classNames: ['login-page'],
     },

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);
+  app.get('/login/*'                    , applicationInstalled, login.preLogin, next.delegateToNext);
+  // app.get('/login/invited'            , applicationInstalled, login.invited, 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);