feat: register reactive form

front/src/app/auth/auth.module.ts

@@ -1,13 +1,14 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
+import { ReactiveFormsModule } from '@angular/forms';
 
 import { SignInComponent } from './pages/sign-in/sign-in.component';
 import { RegisterComponent } from './pages/register/register.component';
 
 @NgModule({
   declarations: [SignInComponent, RegisterComponent],
-  imports: [CommonModule, RouterModule],
+  imports: [CommonModule, RouterModule, ReactiveFormsModule],
   exports: [SignInComponent, RegisterComponent],
 })
 export class AuthModule {}

front/src/app/auth/pages/form.css

@@ -21,7 +21,7 @@
 }
 
 .form-signin input[type='email'] {
-  margin-bottom: -1px;
+  margin-bottom: 10px;
   color: black;
 }
 

front/src/app/auth/pages/register/register.component.html

@@ -1,56 +1,66 @@
 <div class="body text-center">
   <main class="form-signin w-100 m-auto">
-    <form action="/register" method="post" id="registerForm">
+    <form id="registerForm" [formGroup]="registerForm" (ngSubmit)="save()">
 
       <img class="mb-4" src="assets/images/alistLogo.svg" alt="" width="250" height="150">
 
-      <!-- TODO: error message -->
-      <!-- {{#error}}
-      <div class="alert alert-danger" role="alert">
-        {{errorMSG}}
-      </div>
-      {{/error}} -->
-
-      <!-- TODO: verify message -->
-      <!-- {{#notVerified}}
-      <div class="alert alert-info" role="alert">
-        {{verifyMSG}}
-      </div>
-      {{/notVerified}} -->
-
       <div class="form-floating mb-2">
-        <input type="text" class="form-control" id="usernameInput" placeholder="user" name="username">
+        <input type="text" class="form-control" id="usernameInput" placeholder="user" name="username"
+          formControlName="name">
         <label for="usernameInput" class="text-muted">Username</label>
+        <div class="alert alert-danger" role="alert" *ngIf="isInvalidField('name')">
+          Invalid username
+        </div>
       </div>
-      <div class="form-floating mb-4">
-        <input type="email" class="form-control" id="emailInput" placeholder="name@example.com" name="email">
-        <label for="emailInput" class="text-muted">Email address</label>
-      </div>
+
       <div class="form-floating mb-2">
-        <!-- TODO: validatePasswordTOS() -->
-        <input type="password" class="form-control" id="password" placeholder="Password" name="password"
-          onchange='validatePasswordTOS()'>
-        <label for="password" class="text-muted">Password</label>
+        <input type="email" class="form-control" id="emailInput" placeholder="name@example.com" name="email"
+          formControlName="email">
+        <label for="emailInput" class="text-muted">Email address</label>
+        <div class="alert alert-danger" role="alert" *ngIf="isInvalidField('email')">
+          Invalid email
+        </div>
       </div>
-      <div class="form-floating">
-        <!-- TODO: validatePasswordTOS() -->
-        <input type="password" class="form-control" id="confirmPassword" placeholder="Password" name="confirmPassword"
-          onchange='validatePasswordTOS()'>
-        <label for="confirmPassword" class="text-muted">Repeat password</label>
+
+      <div formGroupName="passwords">
+        <div class="form-floating mb-2">
+          <input type="password" class="form-control" id="password" placeholder="password" name="password"
+            formControlName="password">
+          <label for="password" class="text-muted">Password</label>
+          <div class="alert alert-danger" role="alert" *ngIf="isInvalidField(['passwords', 'password'])">
+            Invalid password
+          </div>
+        </div>
+
+        <div class="form-floating">
+          <input type="password" class="form-control" id="confirmPassword" placeholder="password" name="confirmPassword"
+            formControlName="confirmPassword">
+          <label for="confirmPassword" class="text-muted">Repeat password</label>
+          <div class="alert alert-danger" role="alert" *ngIf="isInvalidField(['passwords', 'confirmPassword'])">
+            Invalid confirm password
+          </div>
+        </div>
+
+        <div class="alert alert-danger" role="alert" *ngIf="isNotSamePassword()">
+          Passwords need to match
+        </div>
       </div>
 
       <div class="checkbox mb-3">
         <label>
-          <!-- TODO: validatePasswordTOS() -->
-          <input type="checkbox" id="checkBox" value="TOSagreement" onchange='validatePasswordTOS();'> I agree to the
+          <input type="checkbox" id="checkBox" value="TOSagreement" formControlName="termsOfService"> I agree to the
           <a class="text-white"
             href="https://www.termsfeed.com/public/uploads/2021/12/sample-terms-of-service-template.pdf"
             target="_blank">
             Terms of service
           </a>
         </label>
       </div>
-      <button class="w-100 btn btn-lg btn-primary" id="submit" type="submit" disabled>Submit</button>
+
+      <button class="w-100 btn btn-lg btn-primary" id="submit" type="submit" [disabled]="!registerForm.valid">
+        Submit
+      </button>
+
       <div class="linkBox mt-4">
         <a class="link text-white" [routerLink]="['/sign-in']">Sign in instead</a>
         <p class="mb-0">or</p>

front/src/app/auth/pages/register/register.component.ts

@@ -1,8 +1,55 @@
 import { Component } from '@angular/core';
+import {
+  AbstractControl,
+  FormBuilder,
+  FormGroup,
+  Validators,
+} from '@angular/forms';
 
 @Component({
   selector: 'app-register',
   templateUrl: './register.component.html',
   styleUrls: ['../form.css'],
 })
-export class RegisterComponent {}
+export class RegisterComponent {
+  registerForm: FormGroup = this.fb.group({
+    name: [, [Validators.required, Validators.minLength(3)]],
+    email: [, [Validators.required, Validators.email]],
+    passwords: this.fb.group(
+      {
+        password: [, [Validators.required, Validators.minLength(5)]],
+        confirmPassword: [, [Validators.required, Validators.minLength(5)]],
+      },
+      { validator: this.checkPasswords }
+    ),
+    termsOfService: [false, [Validators.requiredTrue]],
+  });
+
+  constructor(private fb: FormBuilder) {}
+
+  private checkPasswords(
+    control: AbstractControl
+  ): { invalid: boolean } | null {
+    const password: string = control.get('password')?.value;
+    const confirmPassword: string = control.get('confirmPassword')?.value;
+    if (password !== confirmPassword) return { invalid: true };
+    return null;
+  }
+
+  isNotSamePassword(): boolean {
+    return this.registerForm.get('passwords')?.errors !== null;
+  }
+
+  isInvalidField(field: string | string[]) {
+    return (
+      this.registerForm.get(field)?.touched &&
+      this.registerForm.get(field)?.errors
+    );
+  }
+
+  save() {
+    // TODO: use service for checking
+    console.log(this.registerForm.value);
+    this.registerForm.reset();
+  }
+}