Modified and added the code based off the 1st FB

packages/app/src/components/InstallerForm.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
 
 import i18next from 'i18next';
-
 import { useTranslation, i18n } from 'next-i18next';
 import PropTypes from 'prop-types';
 
-import { useCsrfToken } from '~/stores/context';
 import { i18n as i18nConfig } from '^/config/next-i18next.config';
 
+import { useCsrfToken } from '~/stores/context';
+
 class InstallerForm extends React.Component {
 
   constructor(props) {
@@ -57,7 +57,7 @@ class InstallerForm extends React.Component {
       : <span><i className="icon-fw icon-ban" />{ this.props.t('installer.unavaliable_user_id') }</span>;
 
     return (
-      <div data-testid="installerForm" className={`login-dialog p-3 mx-auto${hasErrorClass}`}>
+      <div data-testid="installerForm" className={`noLogin-dialog p-3 mx-auto${hasErrorClass}`}>
         <div className="row">
           <div className="col-md-12">
             <p className="alert alert-success">

packages/app/src/components/Layout/Login.module.scss

@@ -0,0 +1,65 @@
+@use '~/styles/bootstrap/init' as bs;
+
+
+.nologin {
+  .link-growi-org {
+    font-size: smaller;
+    font-weight: bold;
+
+    &,
+    .growi,
+    .org {
+      transition: color 0.8s;
+    }
+  }
+
+  .link-switch {
+    color: bs.$gray-200;
+
+    &:hover {
+      color: white;
+    }
+  }
+}
+
+.login-page {
+  // layout
+  .main .row .login-header,
+  .login-dialog {
+    width: 320px;
+  }
+
+  .link-growi-org {
+    position: absolute;
+    bottom: 9px;
+    z-index: 3;
+  }
+
+  // To adjust the behavior, this problem is not solved.
+  // See https://github.com/AaronCCWong/react-card-flip/issues/56
+  .react-card-front,
+  .react-card-back {
+    height: 0% !important;
+  }
+}
+
+.invited,
+.nologin.error {
+  .main .row {
+    @media (min-width: 510px) {
+      .offset-sm-4 {
+        margin-left: calc(50% - 240px);
+      }
+
+      .col-sm-4 {
+        width: 480px;
+      }
+    }
+  }
+}
+
+.nologin.error {
+  .alert h2 {
+    line-height: 1em;
+  }
+}

packages/app/src/components/Layout/NoLoginLayout.module.scss

@@ -0,0 +1,168 @@
+@use '~/styles/bootstrap/init' as *;
+
+
+.nologin :global {
+  #page-wrapper {
+    background: none;
+  }
+
+  // layout
+  #wrapper {
+    height: 100vh;
+
+    #page-wrapper {
+      display: flex;
+      align-items: center;
+      height: 100vh;
+      margin-top: 0px;
+
+      .main {
+        width: 100vw;
+
+        > .row {
+          margin-right: 20px;
+          margin-left: 20px;
+        }
+
+        .noLogin-header {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          padding-top: 30px;
+          padding-bottom: 10px;
+        }
+
+        .noLogin-form-errors {
+          width: 100%;
+
+          .alert {
+            padding: 5px;
+            margin-top: 10px;
+            margin-bottom: 0;
+
+            ul {
+              padding-left: 1.5em;
+            }
+          }
+        }
+      }
+
+      // .main
+    }
+
+    // #page-wrapper
+  }
+
+  // #wrapper
+
+  // styles
+  .noLogin-header {
+    h1 {
+      font-size: 22px;
+      line-height: 1em;
+    }
+  }
+
+  .dropdown-with-icon {
+    .dropdown-toggle {
+      @extend .form-control;
+    }
+    i {
+      @extend .input-group-text;
+      margin-right: -1px;
+    }
+  }
+
+  .input-group {
+    margin-bottom: 10px;
+
+    .input-group-text {
+      text-align: center;
+      border: none;
+      border-radius: 0;
+    }
+  }
+
+  .input-group:not(.has-error) {
+    .form-control {
+      border: transparent;
+    }
+  }
+
+  // .collapse-external-auth {
+  //   overflow: hidden;
+  // }
+
+  $btn-fill-colors: (
+    'login': (
+      rgba($danger, 0.4),
+      rgba(#7e4153, 0.7),
+    ),
+    'register': (
+      rgba($success, 0.4),
+      rgba(#3f7263, 0.7),
+    ),
+    'google': (
+      rgba(#24292e, 0.4),
+      $gray-700,
+    ),
+    'github': (
+      rgba(lighten(black, 20%), 0.4),
+      $gray-700,
+    ),
+    'facebook': (
+      rgba(#29487d, 0.4),
+      $gray-700,
+    ),
+    'twitter': (
+      rgba(#1da1f2, 0.4),
+      $gray-700,
+    ),
+    'oidc': (
+      rgba(#24292e, 0.4),
+      $gray-700,
+    ),
+    'saml': (
+      rgba(#55a79a, 0.4),
+      $gray-700,
+    ),
+    'basic': (
+      rgba(#24292e, 0.4),
+      $gray-700,
+    ),
+  );
+
+  @each $label, $colors in $btn-fill-colors {
+    .btn-fill##{$label} {
+      .btn-label {
+        background-color: nth($colors, 1);
+      }
+      .eff {
+        background-color: nth($colors, 2);
+      }
+    }
+  }
+
+  // footer link text
+  .link-growi-org {
+    font-size: smaller;
+    font-weight: bold;
+
+    &,
+    .growi,
+    .org {
+      transition: color 0.8s;
+    }
+  }
+  .noLogin-header,
+  .noLogin-dialog {
+    max-width: 480px;
+  }
+}
+
+// .nologin.error {
+//   .alert h2 {
+//     line-height: 1em;
+//   }
+
+// }

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

@@ -9,7 +9,8 @@ import GrowiLogo from '../Icons/GrowiLogo';
 
 import { RawLayout } from './RawLayout';
 
-import styles from './Installer.module.scss';
+import loginStyles from './Login.module.scss';
+import commonStyles from './NoLoginLayout.module.scss';
 
 type Props = {
   title: string,
@@ -25,7 +26,7 @@ export const NoLoginLayout = ({
     classNames.push(className);
   }
   return (
-    <RawLayout title={title} className={`${styles.nologin}`}>
+    <RawLayout title={title} className={`${commonStyles.nologin}`}>
       <div className="nologin">
         <div id="wrapper">
           <div id="page-wrapper">
@@ -34,17 +35,15 @@ export const NoLoginLayout = ({
               <div className="row">
 
                 <div className="col-md-12">
-                  <div className="login-header mx-auto">
+                  <div className="noLogin-header mx-auto">
                     <GrowiLogo />
                     <h1 className="my-3">GROWI</h1>
-                    <div className="login-form-errors px-3"></div>
+                    <div className="noLogin-form-errors px-3"></div>
                   </div>
                 </div>
 
                 <div className="col-md-12">
-                  <div id="installer-form-container">
-                    {children}
-                  </div>
+                  {children}
                 </div>
 
               </div>

packages/app/src/components/Theme/ThemeChristmas.module.scss

@@ -135,8 +135,8 @@ $color-link-wiki-hover: lighten($color-link-wiki, 15%);
       }
     }
 
-    .login-header,
-    .login-dialog {
+    .noLogin-header,
+    .noLogin-dialog {
       background-color: rgba(#ccc, 0.5);
     }
     .link-switch {

packages/app/src/components/Theme/ThemeHufflepuff.module.scss

@@ -125,8 +125,8 @@ html[light] {
       background-size: cover;
     }
 
-    .login-header,
-    .login-dialog {
+    .noLogin-header,
+    .noLogin-dialog {
       background-color: rgba(black, 0.1);
     }
 
@@ -293,8 +293,8 @@ html[dark] {
       background-size: cover;
     }
 
-    .login-header,
-    .login-dialog {
+    .noLogin-header,
+    .noLogin-dialog {
       background-color: rgba(black, 0.1);
     }
 

packages/app/src/components/Theme/ThemeSpring.module.scss

@@ -126,8 +126,8 @@ $accentcolor: #e08dbc;
       background-size: cover;
     }
 
-    .login-header,
-    .login-dialog {
+    .noLogin-header,
+    .noLogin-dialog {
       background-color: rgba(black, 0.1);
     }
 

packages/app/src/components/Theme/ThemeWood.module.scss

@@ -147,8 +147,8 @@ $themelight: #f5f3ee;
   .nologin {
     background: white;
 
-    .login-header,
-    .login-dialog {
+    .noLogin-header,
+    .noLogin-dialog {
       background-color: rgba(black, 0.1);
     }
 

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

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

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

@@ -7,6 +7,7 @@ import {
 } from 'next';
 import dynamic from 'next/dynamic';
 
+import { NoLoginLayout } from '~/components/Layout/NoLoginLayout';
 import { RawLayout } from '~/components/Layout/RawLayout';
 import { CrowiRequest } from '~/interfaces/crowi-request';
 
@@ -43,18 +44,12 @@ const LoginPage: NextPage<Props> = (props: Props) => {
   });
 
   return (
-    <>
-      <RawLayout title={useCustomTitle(props, 'GROWI')} className={classNames.join(' ')}>
-        <div className='nologin'>
-          <div id='wrapper'>
-            <div id="page-wrapper">
-              <LoginForm objOfIsExternalAuthEnableds={props.enabledStrategies} isLocalStrategySetup={true} isLdapStrategySetup={true}
-                isRegistrationEnabled={true} registrationWhiteList={props.registrationWhiteList} isPasswordResetEnabled={true} />
-            </div>
-          </div>
-        </div>
-      </RawLayout>
-    </>
+    <NoLoginLayout title={useCustomTitle(props, 'GROWI')} className={classNames.join(' ')}>
+      <div id="page-wrapper">
+        <LoginForm objOfIsExternalAuthEnableds={props.enabledStrategies} isLocalStrategySetup={true} isLdapStrategySetup={true}
+          isRegistrationEnabled={true} registrationWhiteList={props.registrationWhiteList} isPasswordResetEnabled={true} />
+      </div>
+    </NoLoginLayout>
   );
 };
 

packages/app/src/styles/theme/_apply-colors-dark.scss

@@ -141,7 +141,7 @@ ul.pagination {
     linear-gradient(225deg, darken(var.$growi-blue, 20%) 10%, hsla(140, 90%, 50%, 0) 80%),
     linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
 
-  .login-header {
+  .noLogin-header {
     background-color: rgba(black, 0.5);
 
     .logo {
@@ -154,7 +154,7 @@ ul.pagination {
     }
   }
 
-  .login-dialog {
+  .noLogin-dialog {
     background-color: rgba(black, 0.5);
   }
 

packages/app/src/styles/theme/_apply-colors-light.scss

@@ -84,7 +84,7 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
     linear-gradient(135deg, var.$growi-green 10%, hsla(225, 95%, 50%, 0) 70%), linear-gradient(225deg, var.$growi-blue 10%, hsla(140, 90%, 50%, 0) 80%),
     linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
 
-  .login-header {
+  .noLogin-header {
     background-color: rgba(white, 0.5);
 
     .logo {
@@ -97,7 +97,7 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
     }
   }
 
-  .login-dialog {
+  .noLogin-dialog {
     background-color: rgba(white, 0.5);
   }