From 6fef51cd89159b1a2a8db340b765f7605c88ae6c Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Tue, 19 Sep 2023 20:23:42 +0100
Subject: [PATCH] refactor(sign in): use button elements instead of div

---
 .../src/ts/controllers/account-controller.ts   | 18 ++++++------------
 frontend/src/ts/pages/login.ts                 |  9 +++++----
 frontend/static/html/pages/login.html          | 10 +++++-----
 3 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/frontend/src/ts/controllers/account-controller.ts b/frontend/src/ts/controllers/account-controller.ts
index 282d4389f..3cb60d240 100644
--- a/frontend/src/ts/controllers/account-controller.ts
+++ b/frontend/src/ts/controllers/account-controller.ts
@@ -442,8 +442,9 @@ export function signOut(): void {
       AccountButton.update();
       navigate("/login");
       DB.setSnapshot(undefined);
-      $(".pageLogin .button").removeClass("disabled");
-      $(".pageLogin input").prop("disabled", false);
+      LoginPage.enableSignInButton();
+      LoginPage.enableSignUpButton();
+      LoginPage.enableInputs();
       $("#top .signInOut .icon").html(`<i class="far fa-fw fa-user"></i>`);
       setTimeout(() => {
         hideFavoriteQuoteLength();
@@ -561,8 +562,6 @@ async function signUp(): Promise<void> {
     await sendVerificationEmail();
     AllTimeStats.clear();
     $("#menu .textButton.account .text").text(nname);
-    $(".pageLogin .button").removeClass("disabled");
-    $(".pageLogin input").prop("disabled", false);
     LoginPage.hidePreloader();
     await loadUser(createdAuthUser.user);
     if (TestLogic.notSignedInLastResult !== null) {
@@ -607,17 +606,12 @@ async function signUp(): Promise<void> {
   }
 }
 
-$(".pageLogin .login input").keyup((e) => {
-  if (e.key === "Enter") {
-    signIn();
-  }
-});
-
-$(".pageLogin .login .button.signIn").on("click", () => {
+$(".pageLogin .login form").on("submit", (e) => {
+  e.preventDefault();
   signIn();
 });
 
-$(".pageLogin .login .button.signInWithGoogle").on("click", () => {
+$(".pageLogin .login button.signInWithGoogle").on("click", () => {
   signInWithGoogle();
 });
 
diff --git a/frontend/src/ts/pages/login.ts b/frontend/src/ts/pages/login.ts
index 1cd5ba361..b054b624d 100644
--- a/frontend/src/ts/pages/login.ts
+++ b/frontend/src/ts/pages/login.ts
@@ -16,11 +16,11 @@ export function disableSignUpButton(): void {
 }
 
 export function enableSignInButton(): void {
-  $(".page.pageLogin .login.side .button").removeClass("disabled");
+  $(".page.pageLogin .login.side button").prop("disabled", false);
 }
 
 export function disableSignInButton(): void {
-  $(".page.pageLogin .login.side .button").addClass("disabled");
+  $(".page.pageLogin .login.side button").prop("disabled", true);
 }
 
 export function enableInputs(): void {
@@ -338,8 +338,9 @@ export const page = new Page(
   },
   async () => {
     Skeleton.append("pageLogin", "middle");
-    $(".pageLogin .button").removeClass("disabled");
-    $(".pageLogin input").prop("disabled", false);
+    enableInputs();
+    enableSignInButton();
+    enableSignUpButton();
   },
   async () => {
     //
diff --git a/frontend/static/html/pages/login.html b/frontend/static/html/pages/login.html
index e02b2f66f..a76651a89 100644
--- a/frontend/static/html/pages/login.html
+++ b/frontend/static/html/pages/login.html
@@ -45,7 +45,7 @@
   </div>
   <div class="login side">
     <div class="title">login</div>
-    <div class="textButton" id="forgotPasswordButton">Forgot password?</div>
+    <button class="text" id="forgotPasswordButton">Forgot password?</button>
     <form action="">
       <input
         name="current-email"
@@ -65,15 +65,15 @@
           <div>Remember me</div>
         </label>
       </div>
-      <div class="button signIn">
+      <button type="submit" class="signIn">
         <i class="fas fa-sign-in-alt"></i>
         Sign In
-      </div>
+      </button>
       <div style="font-size: 0.75rem; text-align: center">or</div>
-      <div class="button signInWithGoogle">
+      <button class="signInWithGoogle">
         <i class="fab fa-google"></i>
         Google Sign In
-      </div>
+      </button>
       <!-- <div class="button signInWithGitHub">
         <i class="fab fa-github"></i>
         GitHub Sign In