Enhance login form with keep signed in functionality and disable button during submission

src/angular/frontend/src/app/components/login/login.component.html

@@ -20,12 +20,12 @@
         </div>
         <div class="form-field full-width">
           <label for="checkbox">Keep me signed in</label>
-          <input type="checkbox" id="checkbox" name="checkbox" />
+          <input type="checkbox" id="checkbox" name="checkbox" formControlName="keepSignedIn" />
         </div>
       </div>
     </div>
     <div class="actions">
-      <button type="submit" class="primary">Login</button>
+      <button type="submit" class="primary" [disabled]="submitting()">Login</button>
     </div>
   </form>
 

src/angular/frontend/src/app/components/login/login.component.ts

@@ -2,6 +2,7 @@ import {Component, inject, signal} from '@angular/core';
 import {FormControl, FormGroup, FormsModule, FormSubmittedEvent, ReactiveFormsModule} from '@angular/forms';
 import {AuthService, ValidateCredentialsCommand} from '../../clients/gandalf/mithrandir/auth.service';
 import {Router} from '@angular/router';
+import {takeUntilDestroyed, toObservable} from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'app-login',
@@ -21,13 +22,31 @@ export class LoginComponent {
   protected loginFormGroup = new FormGroup({
     usernameOrEmail: new FormControl('housemaster'),
     password: new FormControl('kR0pNCspBKx8lOzAIch5'),
-    keep: new FormControl(false),
+    keepSignedIn: new FormControl(false),
   });
 
   protected errors = signal<string[]>([]);
+  protected submitting = signal<boolean>(true);
+
+  constructor() {
+
+    toObservable(this.submitting)
+      .pipe(
+        takeUntilDestroyed(),
+      )
+      .subscribe(x => {
+        if (x) {
+          this.loginFormGroup.disable();
+        } else {
+          this.loginFormGroup.enable();
+        }
+      })
+
+  }
 
   protected async onSubmit($event: Event): Promise<void> {
     $event.preventDefault();
+    this.submitting.set(true)
 
     this.errors.set([]);
 
@@ -37,6 +56,7 @@ export class LoginComponent {
 
     await this.auth.loginAsync(this.loginFormGroup.value as unknown as ValidateCredentialsCommand, error => {
       this.errors.set([...this.errors(), error.error.trim()]);
+      this.submitting.set(false)
     });
 
     console.log('login successful');

src/angular/frontend/src/form.scss

@@ -43,6 +43,16 @@ form {
           padding: 0.5em;
           border-radius: 0.5em;
           background-color: var(--neutral-80);
+
+          &:disabled {
+            color: var(--neutral-60);
+          }
+        }
+
+        &:has(input[disabled]) {
+          label {
+            color: var(--neutral-50);
+          }
         }
 
         &:has(input[required]:not([type="radio"])) {