Merge pull request #2155 from weseek/support/add-flip-module-for-login-page

Support/add flip module for login page

package.json

@@ -135,6 +135,7 @@
     "passport-local": "^1.0.0",
     "passport-saml": "^1.0.0",
     "passport-twitter": "^1.0.4",
+    "react-card-flip": "^1.0.10",
     "react-image-crop": "^8.3.0",
     "rimraf": "^3.0.0",
     "slack-node": "^0.1.8",

src/client/js/components/LoginForm.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import ReactCardFlip from 'react-card-flip';
 
 import { withTranslation } from 'react-i18next';
 
@@ -155,13 +156,13 @@ class LoginForm extends React.Component {
     } = this.props;
 
     return (
-      <div className="back">
+      <React.Fragment>
         {registrationMode === 'Restricted' && (
-          <p className="alert alert-warning">
-            {t('page_register.notice.restricted')}
-            <br />
-            {t('page_register.notice.restricted_defail')}
-          </p>
+        <p className="alert alert-warning">
+          {t('page_register.notice.restricted')}
+          <br />
+          {t('page_register.notice.restricted_defail')}
+        </p>
         )}
         <form role="form" action="/register" method="post" id="register-form">
           <div className="input-group" id="input-group-username">
@@ -195,18 +196,18 @@ class LoginForm extends React.Component {
           </div>
 
           {registrationWhiteList.length > 0 && (
-            <>
-              <p className="form-text">{t('page_register.form_help.email')}</p>
-              <ul>
-                {registrationWhiteList.map((elem) => {
+          <>
+            <p className="form-text">{t('page_register.form_help.email')}</p>
+            <ul>
+              {registrationWhiteList.map((elem) => {
                   return (
                     <li key={elem}>
                       <code>{elem}</code>
                     </li>
                   );
                 })}
-              </ul>
-            </>
+            </ul>
+          </>
           )}
 
           <div className="input-group">
@@ -240,7 +241,7 @@ class LoginForm extends React.Component {
             </a>
           </div>
         </div>
-      </div>
+      </React.Fragment>
     );
   }
 
@@ -254,27 +255,30 @@ class LoginForm extends React.Component {
     } = this.props;
 
     const isLocalOrLdapStrategiesEnabled = isLocalStrategySetup || isLdapStrategySetup;
-    const registerFormClass = this.state.isRegistering ? 'to-flip' : '';
     const isSomeExternalAuthEnabled = Object.values(objOfIsExternalAuthEnableds).some(elem => elem);
 
     return (
-      <div className={`login-dialog mx-auto flipper ${registerFormClass}`} id="login-dialog">
+      <div className="login-dialog mx-auto" id="login-dialog">
         <div className="row mx-0">
           <div className="col-12">
-            <div className="front">
-              {isLocalOrLdapStrategiesEnabled && this.renderLocalOrLdapLoginForm()}
-              {isSomeExternalAuthEnabled && this.renderExternalAuthLoginForm()}
-              {isRegistrationEnabled && (
-                <div className="row">
-                  <div className="col-12 text-right py-2">
-                    <a href="#register" id="register" className="link-switch" onClick={this.switchForm}>
-                      <i className="ti-check-box"></i> {t('Sign up is here')}
-                    </a>
+            <ReactCardFlip isFlipped={this.state.isRegistering} flipDirection="horizontal" cardZIndex="3">
+              <div className="front">
+                {isLocalOrLdapStrategiesEnabled && this.renderLocalOrLdapLoginForm()}
+                {isSomeExternalAuthEnabled && this.renderExternalAuthLoginForm()}
+                {isRegistrationEnabled && (
+                  <div className="row">
+                    <div className="col-12 text-right py-2">
+                      <a href="#register" id="register" className="link-switch" onClick={this.switchForm}>
+                        <i className="ti-check-box"></i> {t('Sign up is here')}
+                      </a>
+                    </div>
                   </div>
-                </div>
               )}
-            </div>
-            {isRegistrationEnabled && this.renderRegisterForm()}
+              </div>
+              <div className="back">
+                {isRegistrationEnabled && this.renderRegisterForm()}
+              </div>
+            </ReactCardFlip>
           </div>
         </div>
         <a href="https://growi.org" className="link-growi-org pl-3">

src/client/styles/scss/_login.scss

@@ -208,55 +208,11 @@
     z-index: 2;
   }
 
-  // flip animation
-  .login-dialog.flipper {
-    transition: min-height 0.2s;
-
-    &.to-flip {
-      min-height: 295px;
-
-      // has-error
-      &.has-error {
-        min-height: #{295px + 32px};
-      }
-    }
-
-    .front,
-    .back {
-      transition: 0.4s;
-      backface-visibility: hidden;
-      transform-style: preserve-3d;
-      // fix https://github.com/weseek/growi/issues/330
-      -webkit-backface-visibility: hidden;
-      -webkit-transform-style: preserve-3d;
-    }
-
-    .front {
-      z-index: 2;
-    }
-
-    .back {
-      position: absolute;
-      top: 0;
-      right: 15px;
-      left: 15px;
-    }
-
-    .back,
-    &.to-flip .front {
-      transform: rotateY(180deg);
-
-      // fix https://github.com/weseek/growi/issues/330
-      // 'backface-visibility: hidden' and 'z-index: -1' breaks layout in iOS
-      ::after {
-        z-index: 0;
-        opacity: 0.3;
-      }
-    }
-
-    &.to-flip .back {
-      transform: rotateY(0deg);
-    }
+  // 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;
   }
 }
 

yarn.lock

@@ -11669,6 +11669,11 @@ react-bootstrap-typeahead@^3.4.7:
     react-popper "^1.0.0"
     warning "^4.0.1"
 
+react-card-flip@^1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/react-card-flip/-/react-card-flip-1.0.10.tgz#f3eab968f2cba6de6eccb84cf73bcaf6b53fb974"
+  integrity sha512-BqK6PmP+L/xmcH1AoMuirbxRuDIiaNy3r8734GJQqEyIWoW8L4j2c/di6mbNg+I2rGue3tLH1I9QbJLd7M89ww==
+
 react-clientside-effect@^1.2.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.2.tgz#6212fb0e07b204e714581dd51992603d1accc837"