Enabled the styles and created an object for props

packages/app/src/client/services/AppContainer.js

@@ -1,6 +1,6 @@
 import { Container } from 'unstated';
 
-// import { i18nFactory } from '../util/i18n';
+import { i18nFactory } from '../util/i18n';
 
 /**
  * Service container related to options for Application
@@ -20,7 +20,7 @@ export default class AppContainer extends Container {
       const currentUser = JSON.parse(currentUserElem.textContent);
       userLocaleId = currentUser?.lang;
     }
-    // this.i18n = i18nFactory(userLocaleId);
+    this.i18n = i18nFactory(userLocaleId);
 
     this.containerInstances = {};
     this.componentInstances = {};

packages/app/src/components/LoginForm.jsx

@@ -4,10 +4,10 @@ import { useTranslation } from 'next-i18next';
 import PropTypes from 'prop-types';
 import ReactCardFlip from 'react-card-flip';
 
-import AppContainer from '~/client/services/AppContainer';
+// import AppContainer from '~/client/services/AppContainer';
 import { useCsrfToken } from '~/stores/context';
 
-import { withUnstatedContainers } from './UnstatedUtils';
+// import { withUnstatedContainers } from './UnstatedUtils';
 
 class LoginForm extends React.Component {
 
@@ -148,7 +148,7 @@ class LoginForm extends React.Component {
   renderRegisterForm() {
     const {
       t,
-      appContainer,
+      // appContainer,
       csrfToken,
       isEmailAuthenticationEnabled,
       username,
@@ -156,9 +156,9 @@ class LoginForm extends React.Component {
       email,
       registrationMode,
       registrationWhiteList,
+      isMailerSetup,
     } = this.props;
 
-    const { isMailerSetup } = appContainer.config;
     let registerAction = '/register';
 
     let submitText = t('Sign up');
@@ -288,6 +288,7 @@ class LoginForm extends React.Component {
       objOfIsExternalAuthEnableds,
     } = this.props;
 
+
     const isLocalOrLdapStrategiesEnabled = isLocalStrategySetup || isLdapStrategySetup;
     const isSomeExternalAuthEnabled = Object.values(objOfIsExternalAuthEnableds).some(elem => elem);
 
@@ -332,7 +333,7 @@ class LoginForm extends React.Component {
 LoginForm.propTypes = {
   // i18next
   t: PropTypes.func.isRequired,
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  // appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 
   csrfToken: PropTypes.string,
   isRegistering: PropTypes.bool,
@@ -347,18 +348,21 @@ LoginForm.propTypes = {
   isLocalStrategySetup: PropTypes.bool,
   isLdapStrategySetup: PropTypes.bool,
   objOfIsExternalAuthEnableds: PropTypes.object,
+  isMailerSetup: PropTypes.bool,
 };
 
 const LoginFormWrapperFC = (props) => {
   const { t } = useTranslation();
   const { data: csrfToken } = useCsrfToken();
 
-  return <LoginForm t={t} csrfToken={csrfToken} {...props} />;
+  // return <LoginForm t={t} csrfToken={csrfToken} {...props} />;
+  return <div>あああ</div>;
 };
 
 /**
  * Wrapper component for using unstated
  */
-const LoginFormWrapper = withUnstatedContainers(LoginFormWrapperFC, [AppContainer]);
+// const LoginFormWrapper = withUnstatedContainers(LoginFormWrapperFC, [AppContainer]);
 
 export default LoginForm;
+// export default LoginFormWrapperFC;

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

@@ -1,13 +1,16 @@
 import React from 'react';
 
+
 import { pagePathUtils } from '@growi/core';
 import {
   NextPage, GetServerSideProps, GetServerSidePropsContext,
 } from 'next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import dynamic from 'next/dynamic';
 
 import { RawLayout } from '~/components/Layout/RawLayout';
 import LoginForm from '~/components/LoginForm';
+import { CrowiRequest } from '~/interfaces/crowi-request';
 
 import {
   useCurrentPagePath, useCsrfToken,
@@ -16,19 +19,47 @@ import {
 
 
 import {
-  CommonProps, getNextI18NextConfig, getServerSideCommonProps, useCustomTitle,
+  CommonProps, getServerSideCommonProps, useCustomTitle,
 } from './commons';
 
+
 const { isTrashPage: _isTrashPage } = pagePathUtils;
 
-async function injectNextI18NextConfigurations(context: GetServerSidePropsContext, props: Props, namespacesRequired?: string[] | undefined): Promise<void> {
-  const nextI18NextConfig = await getNextI18NextConfig(serverSideTranslations, context, namespacesRequired);
-  props._nextI18Next = nextI18NextConfig._nextI18Next;
+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,
+  } = crowi;
+
+  props.isMailerSetup = mailService.isMailerSetup;
 }
 
 type Props = CommonProps & {
 
   pageWithMetaStr: string,
+  isMailerSetup: boolean,
+  enabledStrategies: unknown,
 };
 
 const LoginPage: NextPage<Props> = (props: Props) => {
@@ -41,24 +72,33 @@ const LoginPage: NextPage<Props> = (props: Props) => {
 
   // page
   useCurrentPagePath(props.currentPathname);
+  // useIsMailerSetup(props.isMailerSetup);
 
   const classNames: string[] = [];
 
+  const LoginForm = dynamic(() => import('~/components/LoginForm'), {
+    ssr: false,
+  });
+
   return (
     <>
       <RawLayout title={useCustomTitle(props, 'GROWI')} className={classNames.join(' ')}>
-        <div id="page-wrapper">
-          <div className="main container-fluid">
-
-            <div className="row">
-              <div className="col-md-12">
-                <div className="login-header mx-auto">
-                  <h1 className="my-3">GROWI</h1>
+        <div className='nologin'>
+          <div className='wrapper'>
+            <div id="page-wrapper">
+              <div className="main container-fluid">
+
+                <div className="row">
+                  <div className="col-md-12">
+                    <div className="login-header mx-auto">
+                      <h1 className="my-3">GROWI</h1>
+                    </div>
+                  </div>
+                  <div className="col-md-12">
+                    <LoginForm objOfIsExternalAuthEnableds={props.enabledStrategies} />
+                  </div>
                 </div>
               </div>
-              <div className="col-md-12">
-                <LoginForm />
-              </div>
             </div>
           </div>
         </div>
@@ -78,7 +118,8 @@ export const getServerSideProps: GetServerSideProps = async(context: GetServerSi
 
   const props: Props = result.props as Props;
 
-  injectNextI18NextConfigurations(context, props, ['translation']);
+  injectServerConfigurations(context, props);
+  injectEnabledStrategies(context, props);
 
   return {
     props,

packages/app/src/styles/_login.scss

@@ -1,3 +1,6 @@
+@use '~/styles/bootstrap/init' as bs;
+
+
 .nologin {
   #page-wrapper {
     background: none;
@@ -92,40 +95,40 @@
 
   $btn-fill-colors: (
     'login': (
-      rgba($danger, 0.4),
+      rgba(bs.$danger, 0.4),
       rgba(#7e4153, 0.7),
     ),
     'register': (
-      rgba($success, 0.4),
+      rgba(bs.$success, 0.4),
       rgba(#3f7263, 0.7),
     ),
     'google': (
       rgba(#24292e, 0.4),
-      $gray-700,
+      bs.$gray-700,
     ),
     'github': (
       rgba(lighten(black, 20%), 0.4),
-      $gray-700,
+      bs.$gray-700,
     ),
     'facebook': (
       rgba(#29487d, 0.4),
-      $gray-700,
+      bs.$gray-700,
     ),
     'twitter': (
       rgba(#1da1f2, 0.4),
-      $gray-700,
+      bs.$gray-700,
     ),
     'oidc': (
       rgba(#24292e, 0.4),
-      $gray-700,
+      bs.$gray-700,
     ),
     'saml': (
       rgba(#55a79a, 0.4),
-      $gray-700,
+      bs.$gray-700,
     ),
     'basic': (
       rgba(#24292e, 0.4),
-      $gray-700,
+      bs.$gray-700,
     ),
   );
 
@@ -153,7 +156,7 @@
   }
 
   .link-switch {
-    color: $gray-200;
+    color: bs.$gray-200;
 
     &:hover {
       color: white;

packages/app/src/styles/style-next.scss

@@ -43,7 +43,7 @@
 // @import 'page-content-footer';
 // @import 'handsontable';
 @import 'layout';
-// @import 'login';
+@import 'login';
 // @import 'me';
 // @import 'mirror_mode';
 // @import 'modal';