refactor(Login page): Remade the login page, so that it looks better …

…on desktop and mobile BREAKING CHANGE: Will probably break any custom styling to the login page.
MultinetInteractive · Feb 18, 2022 · 8931993 · 8931993
1 parent 8ccb1d9
commit 8931993
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 29 deletions.
diff --git a/PLUGIN-CHECKSUM b/PLUGIN-CHECKSUM
@@ -1 +1 @@
-c70916b4a8d51e008db5856a81caa2f0
+908f6ec26b22d7a8f050b7efc4937093
diff --git a/content/style/compiled/frontend/global.css b/content/style/compiled/frontend/global.css
@@ -345,4 +345,21 @@
   .eduadmin.loginForm form .title select.dateInfo {
     padding: unset;
   }
+}
+.eduadmin.loginForm .loginBox form div.fields {
+  display: flex;
+  flex-direction: column;
+}
+.eduadmin.loginForm .loginBox form div.fields .login-field {
+  flex-direction: column;
+  align-items: unset;
+}
+@media (max-width: 480px) {
+  .eduadmin.loginForm .loginBox form div.fields .login-field.buttons {
+    flex-direction: column;
+    display: flex;
+  }
+  .eduadmin.loginForm .loginBox form div.fields .login-field.buttons button {
+    margin-bottom: 1rem;
+  }
 }
diff --git a/content/template/myPagesTemplate/login-page.php b/content/template/myPagesTemplate/login-page.php
@@ -26,35 +26,40 @@
 					break;
 			}
 			?>
-			<label class="login-field">
-				<div class="loginLabel"><?php echo esc_html( $login_label ); ?></div>
-				<div class="loginInput">
-					<input type="<?php echo esc_attr( $field_type ); ?>"
-					       name="eduadminloginEmail"<?php echo( 'CivicRegistrationNumber' === $selected_login_field ? ' class="eduadmin-civicRegNo" onblur="eduBookingView.ValidateCivicRegNo();"' : '' ); ?>
-					       required autocomplete="off"
-					       title="<?php echo esc_attr( sprintf( _x( 'Please enter your %s here', 'frontend', 'eduadmin-booking' ), $login_label ) ); ?>"
-					       placeholder="<?php echo esc_attr( $login_label ); ?>"
-					       value="<?php echo esc_attr( ! empty( $_POST['eduadminloginEmail'] ) ? sanitize_text_field( $_POST['eduadminloginEmail'] ) : '' ); ?>" />
+			<div class="fields">
+				<label class="login-field">
+					<div class="loginLabel"><?php echo esc_html( $login_label ); ?></div>
+					<div class="loginInput">
+						<input type="<?php echo esc_attr( $field_type ); ?>"
+						       name="eduadminloginEmail"<?php echo( 'CivicRegistrationNumber' === $selected_login_field ? ' class="eduadmin-civicRegNo" onblur="eduBookingView.ValidateCivicRegNo();"' : '' ); ?>
+						       required autocomplete="off"
+						       title="<?php echo esc_attr( sprintf( _x( 'Please enter your %s here', 'frontend', 'eduadmin-booking' ), $login_label ) ); ?>"
+						       placeholder="<?php echo esc_attr( $login_label ); ?>"
+						       value="<?php echo esc_attr( ! empty( $_POST['eduadminloginEmail'] ) ? sanitize_text_field( $_POST['eduadminloginEmail'] ) : '' ); ?>" />
+					</div>
+				</label>
+				<label class="login-field">
+					<div
+						class="loginLabel"><?php echo esc_html_x( 'Password', 'frontend', 'eduadmin-booking' ); ?></div>
+					<div class="loginInput">
+						<input type="password" autocomplete="off" name="eduadminpassword" required
+						       title="<?php echo esc_attr_x( 'Please enter your password here', 'frontend', 'eduadmin-booking' ); ?>"
+						       placeholder="<?php echo esc_attr_x( 'Password', 'frontend', 'eduadmin-booking' ); ?>" />
+					</div>
+				</label>
+				<?php
+				$click = '';
+				if ( 'CivicRegistrationNumber' === $selected_login_field && EDU()->is_checked( 'eduadmin-validateCivicRegNo', false ) ) {
+					$click = 'if(!eduBookingView.ValidateCivicRegNo()) { alert(\'' . _x( 'Please enter a valid swedish civic registration number.', 'frontend', 'eduadmin-booking' ) . '\');  return false; }';
+				}
+				?>
+				<div class="login-field buttons">
+					<button class="loginButton cta-btn"
+					        onclick="this.form.eduadminpassword.required = true; this.form.eduformloginaction.value = 'login';<?php echo esc_attr( $click ); ?>"><?php echo esc_html_x( 'Log in', 'frontend', 'eduadmin-booking' ); ?></button>
+					<button class="forgotPasswordButton neutral-btn"
+					        onclick="this.form.eduadminpassword.required = false; this.form.eduadminpassword.value = ''; this.form.eduformloginaction.value = 'forgot';"><?php echo esc_html_x( 'Forgot password', 'frontend', 'eduadmin-booking' ); ?></button>
 				</div>
-			</label>
-			<label class="login-field">
-				<div class="loginLabel"><?php echo esc_html_x( 'Password', 'frontend', 'eduadmin-booking' ); ?></div>
-				<div class="loginInput">
-					<input type="password" autocomplete="off" name="eduadminpassword" required
-					       title="<?php echo esc_attr_x( 'Please enter your password here', 'frontend', 'eduadmin-booking' ); ?>"
-					       placeholder="<?php echo esc_attr_x( 'Password', 'frontend', 'eduadmin-booking' ); ?>" />
-				</div>
-			</label>
-			<?php
-			$click = '';
-			if ( 'CivicRegistrationNumber' === $selected_login_field && EDU()->is_checked( 'eduadmin-validateCivicRegNo', false ) ) {
-				$click = 'if(!eduBookingView.ValidateCivicRegNo()) { alert(\'' . _x( 'Please enter a valid swedish civic registration number.', 'frontend', 'eduadmin-booking' ) . '\');  return false; }';
-			}
-			?>
-			<button class="loginButton cta-btn"
-			        onclick="this.form.eduadminpassword.required = true; this.form.eduformloginaction.value = 'login';<?php echo esc_attr( $click ); ?>"><?php echo esc_html_x( 'Log in', 'frontend', 'eduadmin-booking' ); ?></button>
-			<button class="forgotPasswordButton neutral-btn"
-			        onclick="this.form.eduadminpassword.required = false; this.form.eduadminpassword.value = ''; this.form.eduformloginaction.value = 'forgot';"><?php echo esc_html_x( 'Forgot password', 'frontend', 'eduadmin-booking' ); ?></button>
+			</div>
 		</form>
 	</div>
 

diff --git a/src/scss/frontend/parts/loginForm.scss b/src/scss/frontend/parts/loginForm.scss
@@ -84,3 +84,26 @@
 		}
 	}
 }
+
+.eduadmin.loginForm {
+	.loginBox form div.fields {
+		display: flex;
+		flex-direction: column;
+
+		.login-field {
+			flex-direction: column;
+			align-items: unset;
+
+			&.buttons {
+				@media(max-width: 480px) {
+					flex-direction: column;
+					display: flex;
+
+					button {
+						margin-bottom: 1rem;
+					}
+				}
+			}
+		}
+	}
+}