Merge pull request #6373 from weseek/support/intallerPage-next-layout

support: Created NoLoginLayout file and eliminate login from import

packages/app/src/components/InstallerForm.jsx

@@ -53,7 +53,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/Invited.module.scss

@@ -0,0 +1,14 @@
+.invited,
+.nologin.error {
+  .main .row {
+    @media (min-width: 510px) {
+      .offset-sm-4 {
+        margin-left: calc(50% - 240px);
+      }
+
+      .col-sm-4 {
+        width: 480px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+@use '~/styles/bootstrap/init' as bs;
+
+
+.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;
+  }
+}
+
+.collapse-external-auth {
+  overflow: hidden;
+}

packages/app/src/styles/_login.scss → packages/app/src/components/Layout/NoLoginLayout.module.scss

@@ -1,7 +1,7 @@
-@use '~/styles/bootstrap/init' as bs;
+@use '~/styles/bootstrap/init' as *;
 
 
-.nologin {
+.nologin :global {
   #page-wrapper {
     background: none;
   }
@@ -24,7 +24,7 @@
           margin-left: 20px;
         }
 
-        .login-header {
+        .noLogin-header {
           display: flex;
           flex-direction: column;
           align-items: center;
@@ -32,7 +32,7 @@
           padding-bottom: 10px;
         }
 
-        .login-form-errors {
+        .noLogin-form-errors {
           width: 100%;
 
           .alert {
@@ -56,7 +56,7 @@
   // #wrapper
 
   // styles
-  .login-header {
+  .noLogin-header {
     h1 {
       font-size: 22px;
       line-height: 1em;
@@ -89,46 +89,42 @@
     }
   }
 
-  .collapse-external-auth {
-    overflow: hidden;
-  }
-
   $btn-fill-colors: (
     'login': (
-      rgba(bs.$danger, 0.4),
+      rgba($danger, 0.4),
       rgba(#7e4153, 0.7),
     ),
     'register': (
-      rgba(bs.$success, 0.4),
+      rgba($success, 0.4),
       rgba(#3f7263, 0.7),
     ),
     'google': (
       rgba(#24292e, 0.4),
-      bs.$gray-700,
+      $gray-700,
     ),
     'github': (
       rgba(lighten(black, 20%), 0.4),
-      bs.$gray-700,
+      $gray-700,
     ),
     'facebook': (
       rgba(#29487d, 0.4),
-      bs.$gray-700,
+      $gray-700,
     ),
     'twitter': (
       rgba(#1da1f2, 0.4),
-      bs.$gray-700,
+      $gray-700,
     ),
     'oidc': (
       rgba(#24292e, 0.4),
-      bs.$gray-700,
+      $gray-700,
     ),
     'saml': (
       rgba(#55a79a, 0.4),
-      bs.$gray-700,
+      $gray-700,
     ),
     'basic': (
       rgba(#24292e, 0.4),
-      bs.$gray-700,
+      $gray-700,
     ),
   );
 
@@ -154,57 +150,20 @@
       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;
+  .noLogin-header,
+  .noLogin-dialog {
+    max-width: 480px;
   }
 }
 
-.invited,
-.nologin.error {
-  .main .row {
-    @media (min-width: 510px) {
-      .offset-sm-4 {
-        margin-left: calc(50% - 240px);
-      }
+.link-switch {
+  color: $gray-200;
 
-      .col-sm-4 {
-        width: 480px;
-      }
-    }
+  &:hover {
+    color: white;
   }
 }
 
-.login-header,
-.login-dialog {
-  max-width: 480px;
-}
-
 .nologin.error {
   .alert h2 {
     line-height: 1em;

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

@@ -0,0 +1,48 @@
+import React, { ReactNode } from 'react';
+
+import GrowiLogo from '../Icons/GrowiLogo';
+
+import { RawLayout } from './RawLayout';
+
+import commonStyles from './NoLoginLayout.module.scss';
+
+type Props = {
+  title: string,
+  className?: string,
+  children?: ReactNode,
+}
+
+export const NoLoginLayout = ({
+  children, title, className,
+}: Props): JSX.Element => {
+  const classNames: string[] = ['wrapper'];
+  if (className != null) {
+    classNames.push(className);
+  }
+  return (
+    <RawLayout title={title} className={`${commonStyles.nologin}`}>
+      <div className="nologin">
+        <div id="wrapper">
+          <div id="page-wrapper">
+            <div className="main container-fluid">
+
+              <div className="row">
+
+                <div className="col-md-12">
+                  <div className="noLogin-header mx-auto">
+                    <GrowiLogo />
+                    <h1 className="my-3">GROWI</h1>
+                    <div className="noLogin-form-errors px-3"></div>
+                  </div>
+                </div>
+
+                {children}
+
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </RawLayout>
+  );
+};

packages/app/src/components/LoginForm.jsx

@@ -291,7 +291,7 @@ class LoginForm extends React.Component {
     const isSomeExternalAuthEnabled = true;
 
     return (
-      <div className="login-dialog mx-auto" id="login-dialog">
+      <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">

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

@@ -146,8 +146,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

@@ -138,8 +138,8 @@
       background-size: cover;
     }
 
-    .login-header,
-    .login-dialog {
+    .noLogin-header,
+    .noLogin-dialog {
       background-color: rgba(black, 0.1);
     }
 
@@ -305,8 +305,8 @@
       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

@@ -138,8 +138,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

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

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

@@ -170,7 +170,7 @@ const AdminMarkdownSettingsPage: NextPage<Props> = (props: Props) => {
   const title = targetPage.title;
 
   useCurrentUser(props.currentUser != null ? JSON.parse(props.currentUser) : null);
-  useIsMailerSetup(props.isMailerSetup);
+  // useIsMailerSetup(props.isMailerSetup);
 
   // useSearchServiceConfigured(props.isSearchServiceConfigured);
   useIsSearchServiceReachable(props.isSearchServiceReachable);

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

@@ -6,7 +6,7 @@ import {
 } from 'next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 
-import { RawLayout } from '~/components/Layout/RawLayout';
+import { NoLoginLayout } from '~/components/Layout/NoLoginLayout';
 
 import InstallerForm from '../components/InstallerForm';
 import {
@@ -46,36 +46,13 @@ const InstallerPage: NextPage<Props> = (props: Props) => {
   const classNames: string[] = [];
 
   return (
-    <>
-      <RawLayout title={useCustomTitle(props, 'GROWI')} className={classNames.join(' ')}>
-        <div className='nologin'>
-          <div id="wrapper">
-            <div id="page-wrapper">
-              <div className="main container-fluid">
-
-                <div className="row">
-
-                  <div className="col-md-12">
-                    <div className="login-header mx-auto">
-                      <div className="logo"></div>
-                      <h1 className="my-3">GROWI</h1>
-                      <div className="login-form-errors px-3"></div>
-                    </div>
-                  </div>
-
-                  <div className="col-md-12">
-                    <div id="installer-form-container">
-                      <InstallerForm />
-                    </div>
-                  </div>
-
-                </div>
-              </div>
-            </div>
-          </div>
+    <NoLoginLayout title={useCustomTitle(props, 'GROWI')} className={classNames.join(' ')}>
+      <div className="col-md-12">
+        <div id="installer-form-container">
+          <InstallerForm />
         </div>
-      </RawLayout>
-    </>
+      </div>
+    </NoLoginLayout>
   );
 };
 

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

@@ -1,13 +1,12 @@
 import React from 'react';
 
 
-import { pagePathUtils } from '@growi/core';
 import {
   NextPage, GetServerSideProps, GetServerSidePropsContext,
 } from 'next';
 import dynamic from 'next/dynamic';
 
-import { RawLayout } from '~/components/Layout/RawLayout';
+import { NoLoginLayout } from '~/components/Layout/NoLoginLayout';
 import { CrowiRequest } from '~/interfaces/crowi-request';
 
 import {
@@ -36,25 +35,19 @@ const LoginPage: NextPage<Props> = (props: Props) => {
   // page
   useCurrentPathname(props.currentPathname);
 
-  const classNames: string[] = [];
+  const classNames: string[] = ['login-page'];
 
   const LoginForm = dynamic(() => import('~/components/LoginForm'), {
     ssr: false,
   });
 
   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 className="col-md-12">
+        <LoginForm objOfIsExternalAuthEnableds={props.enabledStrategies} isLocalStrategySetup={true} isLdapStrategySetup={true}
+          isRegistrationEnabled={true} registrationWhiteList={props.registrationWhiteList} isPasswordResetEnabled={true} />
+      </div>
+    </NoLoginLayout>
   );
 };
 

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

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

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);
   }