Merge remote-tracking branch 'origin/support/reactify-login-page-stock' into support/add-flip-module-for-login-page

src/client/js/components/InstallerForm.jsx

@@ -150,10 +150,10 @@ class InstallerForm extends React.Component {
             <input type="hidden" name="_csrf" value={this.props.csrf} />
 
             <div className="input-group mt-4 mb-3 d-flex justify-content-center">
-              <button type="submit" className="btn-fill btn btn-register px-0 py-2" id="register">
+              <button type="submit" className="btn-fill btn btn-register" id="register">
                 <div className="eff"></div>
-                <span className="btn-label p-3"><i className="icon-user-follow" /></span>
-                <span className="btn-label-text p-3">{ this.props.t('Create') }</span>
+                <span className="btn-label"><i className="icon-user-follow" /></span>
+                <span className="btn-label-text">{ this.props.t('Create') }</span>
               </button>
             </div>
 

src/client/js/components/LoginForm.jsx

@@ -69,14 +69,14 @@ class LoginForm extends React.Component {
           <input type="password" className="form-control" placeholder="Password" name="loginForm[password]" />
         </div>
 
-        <div className="input-group justify-content-center d-flex mt-5">
+        <div className="input-group mt-5">
           <input type="hidden" name="_csrf" value={noLoginContainer.csrfToken} />
-          <button type="submit" id="login" className="btn btn-fill login px-0 py-2">
+          <button type="submit" id="login" className="btn btn-fill login mx-auto">
             <div className="eff"></div>
-            <span className="btn-label p-3">
+            <span className="btn-label">
               <i className="icon-login"></i>
             </span>
-            <span className="btn-label-text p-3">{t('Sign in')}</span>
+            <span className="btn-label-text">{t('Sign in')}</span>
           </button>
         </div>
       </form>
@@ -85,16 +85,26 @@ class LoginForm extends React.Component {
 
   renderExternalAuthInput(auth) {
     const { t } = this.props;
+    const authIconNames = {
+      google: 'google',
+      github: 'github',
+      facebook: 'facebook',
+      twitter: 'twitter',
+      oidc: 'openid',
+      saml: 'key',
+      basic: 'lock',
+    };
+
     return (
-      <div key={auth} className="input-group justify-content-center d-flex mt-5">
-        <button type="button" className="btn btn-fill px-0 py-2" id={auth} onClick={this.handleLoginWithExternalAuth}>
+      <div key={auth} className="col-6 mb-2">
+        <button type="button" className="btn btn-fill" id={auth} onClick={this.handleLoginWithExternalAuth}>
           <div className="eff"></div>
-          <span className="btn-label p-3">
-            <i className={`fa fa-${auth}`}></i>
+          <span className="btn-label">
+            <i className={`fa fa-${authIconNames[auth]}`}></i>
           </span>
-          <span className="btn-label-text p-3">{t('Sign in')}</span>
+          <span className="btn-label-text">{t('Sign in')}</span>
         </button>
-        <div className="small text-center">by {auth} Account</div>
+        <div className="small text-right">by {auth} Account</div>
       </div>
     );
   }
@@ -106,24 +116,22 @@ class LoginForm extends React.Component {
 
     return (
       <>
-        <div className="border-bottom"></div>
-        <div id="external-auth" className={`external-auth ${collapsibleClass}`}>
-          <div className="spacer"></div>
-          <div className="d-flex flex-row justify-content-between flex-wrap">
-            {Object.keys(objOfIsExternalAuthEnableds).map((auth) => {
-              if (!objOfIsExternalAuthEnableds[auth]) {
-                return;
-              }
-              return this.renderExternalAuthInput(auth);
-            })}
+        <div className="border-top border-bottom">
+          <div id="external-auth" className={`external-auth ${collapsibleClass}`}>
+            <div className="row mt-2">
+              {Object.keys(objOfIsExternalAuthEnableds).map((auth) => {
+                if (!objOfIsExternalAuthEnableds[auth]) {
+                  return;
+                }
+                return this.renderExternalAuthInput(auth);
+              })}
+            </div>
           </div>
-          <div className="spacer"></div>
         </div>
-        <div className="border-bottom"></div>
         <div className="text-center">
           <button
             type="button"
-            className="btn btn-secondary btn-xs mb-3"
+            className="btn btn-secondary btn-sm mb-3"
             data-toggle={isExternalAuthCollapsible ? 'collapse' : ''}
             data-target="#external-auth"
             aria-expanded="false"
@@ -139,6 +147,9 @@ class LoginForm extends React.Component {
   renderRegisterForm() {
     const {
       t,
+      username,
+      name,
+      email,
       noLoginContainer,
       registrationMode,
       registrationWhiteList,
@@ -160,7 +171,7 @@ class LoginForm extends React.Component {
                 <i className="icon-user"></i>
               </span>
             </div>
-            <input type="text" className="form-control" placeholder={t('User ID')} name="registerForm[username]" defaultValue={this.props.username} required />
+            <input type="text" className="form-control" placeholder={t('User ID')} name="registerForm[username]" defaultValue={username} required />
           </div>
           <p className="form-text text-danger">
             <span id="help-block-username"></span>
@@ -172,7 +183,7 @@ class LoginForm extends React.Component {
                 <i className="icon-tag"></i>
               </span>
             </div>
-            <input type="text" className="form-control" placeholder={t('Name')} name="registerForm[name]" defaultValue={this.props.name} required />
+            <input type="text" className="form-control" placeholder={t('Name')} name="registerForm[name]" defaultValue={name} required />
           </div>
 
           <div className="input-group">
@@ -181,7 +192,7 @@ class LoginForm extends React.Component {
                 <i className="icon-envelope"></i>
               </span>
             </div>
-            <input type="email" className="form-control" placeholder={t('Email')} name="registerForm[email]" defaultValue={this.props.email} required />
+            <input type="email" className="form-control" placeholder={t('Email')} name="registerForm[email]" defaultValue={email} required />
           </div>
 
           {registrationWhiteList.length > 0 && (
@@ -210,12 +221,12 @@ class LoginForm extends React.Component {
 
           <div className="input-group justify-content-center mt-5">
             <input type="hidden" name="_csrf" value={noLoginContainer.csrfToken} />
-            <button type="submit" className="btn btn-fill px-0 py-2" id="register">
+            <button type="submit" className="btn btn-fill" id="register">
               <div className="eff"></div>
-              <span className="btn-label p-3">
+              <span className="btn-label">
                 <i className="icon-user-follow"></i>
               </span>
-              <span className="btn-label-text p-3">{t('Sign up')}</span>
+              <span className="btn-label-text">{t('Sign up')}</span>
             </button>
           </div>
         </form>
@@ -268,12 +279,11 @@ class LoginForm extends React.Component {
                 {isRegistrationEnabled && this.renderRegisterForm()}
               </div>
             </ReactCardFlip>
-
-            <a href="https://growi.org" className="link-growi-org pl-3">
-              <span className="growi">GROWI</span>.<span className="org">ORG</span>
-            </a>
           </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>
     );
   }

src/client/styles/scss/_login.scss

@@ -18,6 +18,7 @@
       display: flex;
       align-items: center;
       height: 100vh;
+      margin-top: 0px;
 
       .main {
         width: 100vw;
@@ -105,123 +106,57 @@
     }
   }
 
-  .external-auth {
-    form {
-      flex: 1;
-
-      @media (min-width: 350px) {
-        flex: 0.49;
-      }
-    }
-
-    .spacer {
-      height: 10px;
-    }
-  }
-
   .collapse-external-auth {
     overflow: hidden;
-
-    &:not(.show) {
-      height: 0;
-      padding: 0 !important;
-    }
-  }
-
-  // button style
-  .btn-fill.login {
-    .btn-label {
-      background-color: rgba($danger, 0.4);
-    }
-    .eff {
-      background-color: rgba(#7e4153, 0.5);
-    }
   }
 
-  // google
-  .btn-fill#google {
-    .btn-label {
-      background-color: rgba(#24292e, 0.4);
-    }
-
-    .eff {
-      background-color: #555;
-    }
-  }
-
-  // github
-  .btn-fill#github {
-    .btn-label {
-      background-color: rgba(lighten(black, 20%), 0.4);
-    }
-
-    .eff {
-      background-color: #555;
-    }
-  }
-
-  // facebook
-  .btn-fill#facebook {
-    .btn-label {
-      background-color: rgba(#29487d, 0.4);
-    }
-
-    .eff {
-      background-color: #555;
-    }
-  }
-
-  // twitter
-  .btn-fill#twitter {
-    .btn-label {
-      background-color: rgba(#1da1f2, 0.4);
-    }
-
-    .eff {
-      background-color: #555;
-    }
-  }
-
-  // oidc
-  .btn-fill#oidc {
-    .btn-label {
-      background-color: rgba(#24292e, 0.4);
-    }
-
-    .eff {
-      background-color: #555;
-    }
-  }
-
-  // saml
-  .btn-fill#saml {
-    .btn-label {
-      background-color: rgba(#55a79a, 0.4);
-    }
-
-    .eff {
-      background-color: #555;
-    }
-  }
-
-  // basic
-  .btn-fill#basic {
-    .btn-label {
-      background-color: rgba(#24292e, 0.4);
-    }
-
-    .eff {
-      background-color: #555;
-    }
-  }
-  // register
-  .btn-fill#register {
-    .btn-label {
-      background-color: rgba($success, 0.4);
-    }
-
-    .eff {
-      background-color: rgba(#3f7263, 0.5);
+  $btn-fill-colors: (
+    'login': (
+      rgba($danger, 0.4),
+      rgba(#7e4153, 0.5),
+    ),
+    'register': (
+      rgba($success, 0.4),
+      rgba(#3f7263, 0.5),
+    ),
+    'google': (
+      rgba(#24292e, 0.4),
+      #555,
+    ),
+    'github': (
+      rgba(lighten(black, 20%), 0.4),
+      #555,
+    ),
+    'facebook': (
+      rgba(#29487d, 0.4),
+      #555,
+    ),
+    'twitter': (
+      rgba(#1da1f2, 0.4),
+      #555,
+    ),
+    'oidc': (
+      rgba(#24292e, 0.4),
+      #555,
+    ),
+    'saml': (
+      rgba(#55a79a, 0.4),
+      #555,
+    ),
+    'basic': (
+      rgba(#24292e, 0.4),
+      #555,
+    ),
+  );
+
+  @each $label, $colors in $btn-fill-colors {
+    .btn-fill##{$label} {
+      .btn-label {
+        background-color: nth($colors, 1);
+      }
+      .eff {
+        background-color: nth($colors, 2);
+      }
     }
   }
 

src/client/styles/scss/atoms/_buttons.scss

@@ -31,8 +31,12 @@
 }
 
 // fill button style
-.btn-fill {
+:root .btn.btn-fill {
   position: relative;
+  display: flex;
+  justify-content: space-between;
+  min-width: 130px;
+  padding: 0px;
   overflow: hidden;
   color: white;
   text-align: center;
@@ -43,6 +47,7 @@
   .btn-label {
     position: relative;
     z-index: 1;
+    padding: 9px 15px;
     color: white;
     text-decoration: none;
   }
@@ -50,7 +55,9 @@
   .btn-label-text {
     position: relative;
     z-index: 1;
+    margin: auto;
     color: white;
+    text-align: center;
     text-decoration: none;
   }
 

src/server/views/invited.html

@@ -91,10 +91,10 @@
 
         <div class="input-group justify-content-center d-flex mt-5">
           <input type="hidden" name="_csrf" value="{{ csrf() }}">
-          <button type="submit" class="btn btn-fill login px-0 py-2" id="register">
+          <button type="submit" class="btn btn-fill" id="register">
             <div class="eff"></div>
-            <span class="btn-label p-3"><i class="icon-user-follow"></i></span>
-            <span class="btn-label-text p-3">{{ t('Create') }}</span>
+            <span class="btn-label"><i class="icon-user-follow"></i></span>
+            <span class="btn-label-text">{{ t('Create') }}</span>
           </button>
         </div>