From e3467605b5e27f5faebf5aec293a04b3e83e894a Mon Sep 17 00:00:00 2001
From: chris <cwer542@gmail.com>
Date: Sun, 26 Oct 2025 02:38:13 +0100
Subject: [PATCH] Refactor login component to manage submission state and add
 button styles

---
 .../app/components/login/login.component.ts   |  7 +--
 src/angular/frontend/src/button.scss          | 48 +++++++++++++++++++
 src/angular/frontend/src/styles.scss          | 44 +----------------
 3 files changed, 53 insertions(+), 46 deletions(-)
 create mode 100644 src/angular/frontend/src/button.scss

diff --git a/src/angular/frontend/src/app/components/login/login.component.ts b/src/angular/frontend/src/app/components/login/login.component.ts
index 57c6c89..af44867 100644
--- a/src/angular/frontend/src/app/components/login/login.component.ts
+++ b/src/angular/frontend/src/app/components/login/login.component.ts
@@ -26,7 +26,7 @@ export class LoginComponent {
   });
 
   protected errors = signal<string[]>([]);
-  protected submitting = signal<boolean>(true);
+  protected submitting = signal<boolean>(false);
 
   constructor() {
 
@@ -59,7 +59,8 @@ export class LoginComponent {
       this.submitting.set(false)
     });
 
-    console.log('login successful');
-    await this.router.navigate(['/']);
+    await this.router.navigate(['/']).finally(
+      () => this.submitting.set(false)
+    );
   }
 }
diff --git a/src/angular/frontend/src/button.scss b/src/angular/frontend/src/button.scss
new file mode 100644
index 0000000..cf238d2
--- /dev/null
+++ b/src/angular/frontend/src/button.scss
@@ -0,0 +1,48 @@
+button {
+  border: none;
+
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  font-weight: bold;
+
+  white-space: nowrap;
+
+  background-color: var(--button-bg-color);
+  color: var(--button-fg-color);
+
+  &:hover {
+    background-color: var(--button-bg-hover-color);
+    cursor: pointer;
+  }
+
+  --button-fg-color: var(--neutral-90);
+
+  &.primary {
+    --button-bg-color: var(--primary-30);
+    --button-bg-hover-color: var(--primary-20);
+  }
+
+  &.secondary {
+    --button-bg-color: var(--secondary-30);
+    --button-bg-hover-color: var(--secondary-20);
+  }
+
+  &.outline {
+    padding: calc(0.5rem - 1px) calc(1rem - 1px);
+    border: 1px solid var(--button-bg-color);
+    background-color: transparent;
+    color: var(--button-bg-color);
+
+    &:hover {
+      border: 1px solid var(--button-bg-hover-color);
+      background-color: transparent;
+      color: var(--button-bg-hover-color);
+    }
+  }
+
+  &:disabled {
+    background-color: var(--neutral-60);
+    color: var(--neutral-20);
+    cursor: default;
+  }
+}
diff --git a/src/angular/frontend/src/styles.scss b/src/angular/frontend/src/styles.scss
index 073b6c0..94abf16 100644
--- a/src/angular/frontend/src/styles.scss
+++ b/src/angular/frontend/src/styles.scss
@@ -1,5 +1,6 @@
 /* You can add global styles to this file, and also import other style files */
 @use "color-theme";
+@use "button";
 @use "form";
 
 html, input {
@@ -21,46 +22,3 @@ body {
   scrollbar-color: var(--neutral-70)var(--neutral-80);
   scrollbar-width: thin;
 }
-
-button {
-  border: none;
-
-  padding: 0.5rem 1rem;
-  border-radius: 0.25rem;
-  font-weight: bold;
-
-  white-space: nowrap;
-
-  background-color: var(--button-bg-color);
-  color: var(--button-fg-color);
-
-  &:hover {
-    background-color: var(--button-bg-hover-color);
-    cursor: pointer;
-  }
-
-  --button-fg-color: var(--neutral-90);
-
-  &.primary {
-    --button-bg-color: var(--primary-30);
-    --button-bg-hover-color: var(--primary-20);
-  }
-
-  &.secondary {
-    --button-bg-color: var(--secondary-30);
-    --button-bg-hover-color: var(--secondary-20);
-  }
-
-  &.outline {
-    padding: calc(0.5rem - 1px) calc(1rem - 1px);
-    border: 1px solid var(--button-bg-color);
-    background-color: transparent;
-    color: var(--button-bg-color);
-
-    &:hover {
-      border: 1px solid var(--button-bg-hover-color);
-      background-color: transparent;
-      color: var(--button-bg-hover-color);
-    }
-  }
-}