Merge pull request #7177 from weseek/imprv/nologin

imprv: nologin layout

packages/app/src/components/CompleteUserRegistration.tsx

@@ -7,7 +7,7 @@ export const CompleteUserRegistration: FC = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="noLogin-dialog mx-auto" id="noLogin-dialog">
+    <div className="nologin-dialog mx-auto" id="nologin-dialog">
       <div className="row mx-0">
         <div className="col-12 mb-3 text-center">
           <p className="alert alert-success">

packages/app/src/components/CompleteUserRegistrationForm.tsx

@@ -85,7 +85,7 @@ const CompleteUserRegistrationForm: React.FC<Props> = (props: Props) => {
 
   return (
     <>
-      <div className="noLogin-dialog mx-auto" id="noLogin-dialog">
+      <div className="nologin-dialog mx-auto" id="nologin-dialog">
         <div className="row mx-0">
           <div className="col-12">
 

packages/app/src/components/InstallerForm.tsx

@@ -94,7 +94,7 @@ const InstallerForm = memo((): JSX.Element => {
     : <span><i className="icon-fw icon-ban" />{ t('installer.unavaliable_user_id') }</span>;
 
   return (
-    <div data-testid="installerForm" className={`noLogin-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/InvitedForm.tsx

@@ -84,7 +84,7 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
   }
 
   return (
-    <div className="noLogin-dialog px-3 pb-3 mx-auto" id="noLogin-dialog">
+    <div className="nologin-dialog px-3 pb-3 mx-auto" id="nologin-dialog">
       { formNotification() }
       <form role="form" onSubmit={submitHandler} id="invited-form">
         {/* Email Form */}

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

@@ -1,27 +0,0 @@
-@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/components/Layout/NoLoginLayout.module.scss

@@ -2,67 +2,52 @@
 
 
 .nologin :global {
-  #page-wrapper {
-    background: none;
-  }
+  height: 100vh;
 
   // layout
-  #wrapper {
+  .page-wrapper {
+    display: flex;
+    align-items: center;
     height: 100vh;
+    margin-top: 0px;
+
+    .main {
+      width: 100vw;
 
-    #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;
-            }
-          }
-        }
+      > .row {
+        margin-right: 20px;
+        margin-left: 20px;
       }
 
-      // .main
+      .nologin-header {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding-top: 30px;
+        padding-bottom: 10px;
+      }
     }
 
-    // #page-wrapper
-  }
+    .link-growi-org {
+      position: absolute;
+      bottom: 9px;
+      z-index: 3;
+    }
 
-  // #wrapper
+  }
 
   // styles
-  .noLogin-header {
+  .nologin-header {
     h1 {
       font-size: 22px;
       line-height: 1em;
     }
   }
 
+  .alert {
+    padding: 0.5em 1em 0.5em 2em;
+  }
+
   .input-group {
     margin-bottom: 10px;
 
@@ -132,10 +117,11 @@
       transition: color 0.8s;
     }
   }
-  .noLogin-header,
-  .noLogin-dialog {
+  .nologin-header,
+  .nologin-dialog {
     max-width: 480px;
   }
+
 }
 
 .link-switch {

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

@@ -1,5 +1,7 @@
 import React, { ReactNode } from 'react';
 
+import { useAppTitle } from '~/stores/context';
+
 import GrowiLogo from '../Icons/GrowiLogo';
 
 import { RawLayout } from './RawLayout';
@@ -14,30 +16,30 @@ type Props = {
 export const NoLoginLayout = ({
   children, className,
 }: Props): JSX.Element => {
-  const classNames: string[] = ['wrapper'];
+
+  const { data: appTitle } = useAppTitle();
+
+  const classNames: string[] = [''];
   if (className != null) {
     classNames.push(className);
   }
+
   return (
-    <RawLayout 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>
-                  {children}
-                </div>
+    <RawLayout className={`nologin ${commonStyles.nologin} ${classNames}`}>
+      <div className="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">{ appTitle ?? 'GROWI' }</h1>
+                <div className="noLogin-form-errors px-3"></div>
               </div>
+              {children}
             </div>
+
           </div>
         </div>
       </div>

packages/app/src/components/LoginForm.module.scss

@@ -0,0 +1,12 @@
+.login-form :global {
+  // 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/components/LoginForm.tsx

@@ -16,6 +16,10 @@ import { toArrayIfNot } from '~/utils/array-utils';
 
 import { CompleteUserRegistration } from './CompleteUserRegistration';
 
+
+import styles from './LoginForm.module.scss';
+
+
 type LoginFormProps = {
   username?: string,
   name?: string,
@@ -505,39 +509,41 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
   }
 
   return (
-    <div className="noLogin-dialog mx-auto" id="noLogin-dialog" data-testid="login-form">
-      <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>
-              )}
-              {/* Sign up link */}
-              {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">
-              {/* Register form for /login#register */}
-              {isRegistrationEnabled && renderRegisterForm()}
-            </div>
-          </ReactCardFlip>
+    <div className={`login-form ${styles['login-form']}`}>
+      <div className="nologin-dialog mx-auto" id="nologin-dialog" data-testid="login-form">
+        <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>
+                )}
+                {/* Sign up link */}
+                {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">
+                {/* Register form for /login#register */}
+                {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>
-      <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/error/[message].page.tsx

@@ -86,7 +86,7 @@ const LoginPage: NextPage<CommonProps> = () => {
   return (
     <NoLoginLayout className={classNames.join(' ')}>
       <div className="mb-4 login-form-errors text-center">
-        <div className='noLogin-dialog pb-4 mx-auto'>
+        <div className='nologin-dialog pb-4 mx-auto'>
           <div className="col-12">
             {loginErrorElm}
           </div>

packages/app/src/pages/login/index.module.scss

@@ -0,0 +1,9 @@
+// layout
+.login-page :global {
+
+  .nologin-header,
+  .nologin-dialog {
+    width: 320px;
+  }
+
+}

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

@@ -20,6 +20,9 @@ import {
 } from '~/stores/context';
 
 
+import styles from './index.module.scss';
+
+
 type Props = CommonProps & {
   registrationMode: RegistrationMode,
   pageWithMetaStr: string,
@@ -43,7 +46,7 @@ const LoginPage: NextPage<Props> = (props: Props) => {
   useCurrentPathname(props.currentPathname);
 
   const title = generateCustomTitle(props, 'GROWI');
-  const classNames: string[] = ['login-page'];
+  const classNames: string[] = ['login-page', styles['login-page']];
 
   return (
     <NoLoginLayout className={classNames.join(' ')}>

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%);
 
-  .noLogin-header {
+  .nologin-header {
     background-color: rgba(black, 0.5);
 
     .logo {
@@ -154,7 +154,7 @@ ul.pagination {
     }
   }
 
-  .noLogin-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%);
 
-  .noLogin-header {
+  .nologin-header {
     background-color: rgba(white, 0.5);
 
     .logo {
@@ -97,7 +97,7 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
     }
   }
 
-  .noLogin-dialog {
+  .nologin-dialog {
     background-color: rgba(white, 0.5);
   }
 

packages/preset-themes/src/styles/antarctic.scss

@@ -24,13 +24,12 @@
   }
 }
 
-.growi.login-page {
-  #page-wrapper {
-    background-image: url('/images/themes/antarctic/topimage.svg');
-    background-attachment: fixed;
-    background-position: center center;
-    background-size: cover;
-  }
+.nologin {
+  background: unset !important;
+  background-image: url('/images/themes/antarctic/topimage.svg');
+  background-attachment: fixed;
+  background-position: center center;
+  background-size: cover;
 }
 
 $themecolor: #000080;

packages/preset-themes/src/styles/christmas.scss

@@ -120,7 +120,6 @@ $color-link-wiki-hover: lighten($color-link-wiki, 15%);
     background: $themelight;
   }
 
-  #wrapper > #page-wrapper,
   .page-editor-preview-container {
     background-image: url('/images/themes/christmas/christmas.jpg');
     background-attachment: fixed;
@@ -129,6 +128,8 @@ $color-link-wiki-hover: lighten($color-link-wiki, 15%);
 
   // login page
   .nologin {
+    background: unset !important;
+
     .input-group {
       .input-group-text {
         color: $gray-700;
@@ -140,8 +141,8 @@ $color-link-wiki-hover: lighten($color-link-wiki, 15%);
       }
     }
 
-    .noLogin-header,
-    .noLogin-dialog {
+    .nologin-header,
+    .nologin-dialog {
       background-color: rgba(#ccc, 0.5);
     }
     .link-switch {

packages/preset-themes/src/styles/hufflepuff.scss

@@ -121,16 +121,14 @@
 
   // login and register
   .nologin {
-    #page-wrapper {
-      background-color: $themelight;
-      background-image: url('../images/themes/hufflepuff/badger-light.png');
-      background-attachment: fixed;
-      background-position: bottom;
-      background-size: cover;
-    }
-
-    .noLogin-header,
-    .noLogin-dialog {
+    background: unset !important;
+    background-image: url('../images/themes/hufflepuff/badger-light.png');
+    background-attachment: fixed;
+    background-position: bottom;
+    background-size: cover;
+
+    .nologin-header,
+    .nologin-dialog {
       background-color: rgba(black, 0.1);
     }
 
@@ -292,16 +290,14 @@
 
   // login and register
   .nologin {
-    #page-wrapper {
-      background-color: $themedark;
-      background-image: url('../images/themes/hufflepuff/badger-light.png');
-      background-attachment: fixed;
-      background-position: bottom;
-      background-size: cover;
-    }
-
-    .noLogin-header,
-    .noLogin-dialog {
+    background: unset !important;
+    background-image: url('../images/themes/hufflepuff/badger-light.png');
+    background-attachment: fixed;
+    background-position: bottom;
+    background-size: cover;
+
+    .nologin-header,
+    .nologin-dialog {
       background-color: rgba(black, 0.1);
     }
 

packages/preset-themes/src/styles/island.scss

@@ -101,11 +101,7 @@ $color-themelight: rgba(183, 226, 219, 1);
 
   // login page
   .nologin {
-    &.login-page {
-      > #wrapper > #page-wrapper {
-        background-image: unset;
-      }
-    }
+    background-image: unset !important;
   }
 
   // Button

packages/preset-themes/src/styles/nature.scss

@@ -16,7 +16,6 @@
 
 .growi:not(.login-page) {
   // add background-image
-  #page-wrapper,
   .page-editor-preview-container {
     background-attachment: fixed;
     background-position: center center;
@@ -24,14 +23,6 @@
   }
 }
 
-.growi.login-page {
-  #page-wrapper {
-    background-attachment: fixed;
-    background-position: center center;
-    background-size: cover;
-  }
-}
-
 $themecolor: #12b105;
 
 //== Light Mode

packages/preset-themes/src/styles/spring.scss

@@ -124,16 +124,14 @@ $accentcolor: #e08dbc;
 
   // login and register
   .nologin {
-    #page-wrapper {
-      background-color: $themelight;
-      background-image: url('/images/themes/spring/spring.svg');
-      background-attachment: fixed;
-      background-position: bottom;
-      background-size: cover;
-    }
+    background: unset !important;
+    background-image: url('/images/themes/spring/spring.svg');
+    background-attachment: fixed;
+    background-position: bottom;
+    background-size: cover;
 
-    .noLogin-header,
-    .noLogin-dialog {
+    .nologin-header,
+    .nologin-dialog {
       background-color: rgba(black, 0.1);
     }
 

packages/preset-themes/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%);
 
-  .noLogin-header {
+  .nologin-header {
     background-color: rgba(black, 0.5);
 
     .logo {
@@ -154,7 +154,7 @@ ul.pagination {
     }
   }
 
-  .noLogin-dialog {
+  .nologin-dialog {
     background-color: rgba(black, 0.5);
   }
 

packages/preset-themes/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%);
 
-  .noLogin-header {
+  .nologin-header {
     background-color: rgba(white, 0.5);
 
     .logo {
@@ -97,7 +97,7 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
     }
   }
 
-  .noLogin-dialog {
+  .nologin-dialog {
     background-color: rgba(white, 0.5);
   }
 

packages/preset-themes/src/styles/wood.scss

@@ -23,7 +23,7 @@
 }
 
 .growi.login-page {
-  #page-wrapper {
+  .page-wrapper {
     background-image: url('/images/themes/wood/wood.jpg');
     background-attachment: fixed;
     background-position: center center;
@@ -151,10 +151,10 @@ $themelight: #f5f3ee;
 
   // login and register
   .nologin {
-    background: white;
+    background: unset !important;
 
-    .noLogin-header,
-    .noLogin-dialog {
+    .nologin-header,
+    .nologin-dialog {
       background-color: rgba(black, 0.1);
     }