Merge pull request #2125 from weseek/support/switch-registration-form

Support/switch registration form

src/client/js/components/LoginForm.jsx

@@ -8,23 +8,26 @@ class LoginForm extends React.Component {
   constructor(props) {
     super(props);
 
+    this.state = {
+      isRegistering: false,
+    };
+
     this.switchForm = this.switchForm.bind(this);
     this.renderLocalOrLdapLoginForm = this.renderLocalOrLdapLoginForm.bind(this);
     this.renderExternalAuthLoginForm = this.renderExternalAuthLoginForm.bind(this);
     this.renderExternalAuthInput = this.renderExternalAuthInput.bind(this);
     this.renderRegisterForm = this.renderRegisterForm.bind(this);
-  }
 
-  // for flip [TODO][GW-1865] use state or react component for flip
-  switchForm(e) {
-    if (e.target.id === 'register') {
-      $('#login-dialog').addClass('to-flip');
-    }
-    else {
-      $('#login-dialog').removeClass('to-flip');
+    const { hash } = window.location;
+    if (hash === '#register') {
+      this.state.isRegistering = true;
     }
   }
 
+  switchForm() {
+    this.setState({ isRegistering: !this.state.isRegistering });
+  }
+
   renderLocalOrLdapLoginForm() {
     const { t, csrf, isLdapStrategySetup } = this.props;
 
@@ -217,7 +220,7 @@ class LoginForm extends React.Component {
 
         <div className="row">
           <div className="text-right col-12 py-1">
-            <a href="#login" id="login" className="link-switch" onClick={this.handleClick}>
+            <a href="#login" id="login" className="link-switch" onClick={this.switchForm}>
               <i className="icon-fw icon-login"></i>
               {t('Sign in is here')}
             </a>
@@ -230,7 +233,6 @@ class LoginForm extends React.Component {
   render() {
     const {
       t,
-      isRegistering,
       isLocalStrategySetup,
       isLdapStrategySetup,
       isRegistrationEnabled,
@@ -238,7 +240,7 @@ class LoginForm extends React.Component {
     } = this.props;
 
     const isLocalOrLdapStrategiesEnabled = isLocalStrategySetup || isLdapStrategySetup;
-    const registerFormClass = isRegistering ? 'to-flip' : '';
+    const registerFormClass = this.state.isRegistering ? 'to-flip' : '';
     const isSomeExternalAuthEnabled = Object.values(objOfIsExternalAuthEnableds).some(elem => elem);
 
     return (

src/client/js/nologin.jsx

@@ -27,7 +27,6 @@ if (installerFormElem) {
 // render loginForm
 const loginFormElem = document.getElementById('login-form');
 if (loginFormElem) {
-  const isRegistering = loginFormElem.dataset.isRegistering === 'true';
   const username = loginFormElem.dataset.username;
   const name = loginFormElem.dataset.name;
   const email = loginFormElem.dataset.email;
@@ -51,7 +50,6 @@ if (loginFormElem) {
   ReactDOM.render(
     <I18nextProvider i18n={i18n}>
       <LoginForm
-        isRegistering={isRegistering}
         username={username}
         name={name}
         email={email}