feat: add sign up User Registration

src/app/app.routes.ts

@@ -1,5 +1,8 @@
 import { Routes } from '@angular/router';
+import { RegisterComponent } from './auth/pages/register/register.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+    { path: 'register', component: RegisterComponent },
+];
 
 export default routes;

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

@@ -1 +1,67 @@
-<p>register works!</p>
+<section class="register-container">
+  <p-messages class="register-success-message"></p-messages>
+  <form class="register-form" [formGroup]="validateForm" (ngSubmit)="submitForm()">
+    <h2 class="register-title">Sign Up</h2>
+
+    <div class="register-form-item">
+      <label for="email" class="register-label">Email</label>
+      <div class="register-field">
+        <input
+          id="email"
+          type="email"
+          pInputText
+          formControlName="email"
+          placeholder="Enter your email"
+          class="register-input p-inputtext"
+        />
+        <small
+          *ngIf="validateForm.get('email')?.invalid && validateForm.get('email')?.touched"
+          class="p-error">
+          Please input a valid email address!
+        </small>
+      </div>
+    </div>
+
+    <div class="register-form-item">
+      <label for="password" class="register-label">Password</label>
+      <div class="register-field">
+        <input
+          id="password"
+          type="password"
+          pInputText
+          formControlName="password"
+          placeholder="Enter your password"
+          class="register-input p-inputtext"
+        />
+        <small
+          *ngIf="validateForm.get('password')?.invalid && validateForm.get('password')?.touched"
+          class="p-error">
+          Please input your password!
+        </small>
+      </div>
+    </div>
+
+    <div class="register-form-item">
+      <label for="confirm" class="register-label">Repeat Password</label>
+      <div class="register-field">
+        <input
+          id="confirm"
+          type="password"
+          pInputText
+          formControlName="confirm"
+          placeholder="Repeat Password"
+          class="register-input p-inputtext"
+        />
+        <small
+          *ngIf="validateForm.get('confirm')?.invalid && validateForm.get('confirm')?.touched" class="p-error">
+          Please confirm your password!
+        </small>
+      </div>
+    </div>
+
+    <div class="register-button-container">
+      <p-button type="submit" label="Register" [disabled]="!validateForm.valid" class="p-mt-2"></p-button>
+      <p-link pButton routerLink="/login" label="Sign In" class="p-button-text p-mt-2"></p-link>
+    </div>
+  </form>
+</section>

src/app/auth/pages/register/register.component.scss

@@ -0,0 +1,43 @@
+.register-container {
+    display: flex;
+    justify-content: center;
+    height: 100%;
+  }
+
+  .register-form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 30rem;
+    height: auto; 
+    margin: auto;
+    padding: 2rem;
+    background-color: rgba(199, 199, 199, 0.14);
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
+
+    .register-title {
+      font-weight: 700;
+      margin-bottom: 1rem;
+    }
+
+    .register-form-item {
+      margin-bottom: 1rem;
+
+      .register-field {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+      }
+    }
+
+    .register-button-container {
+      display: flex;
+      gap: 1rem;
+    }
+    .register-success-message {
+        margin: auto;
+        position: absolute;
+    }
+  }
+

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

@@ -1,11 +1,59 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { InputTextModule } from 'primeng/inputtext';
+import { ButtonModule } from 'primeng/button';
+import { MessageService } from 'primeng/api';
+import { MessagesModule } from 'primeng/messages';
+import { MessageModule } from 'primeng/message';
+import { PasswordModule } from 'primeng/password';
 
 @Component({
   selector: 'app-register',
   standalone: true,
-  imports: [],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    InputTextModule,
+    ButtonModule,
+    MessagesModule,
+    MessageModule,
+    PasswordModule
+  ],
   templateUrl: './register.component.html',
-  styleUrl: './register.component.scss',
+  styleUrls: ['./register.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [MessageService]
 })
-export class RegisterComponent {}
+export class RegisterComponent {
+  public validateForm!: FormGroup;
+
+  constructor(
+    private fb: FormBuilder,
+    private messageService: MessageService
+  ) {
+    this.validateForm = this.fb.group({
+      email: ['', [Validators.email, Validators.required]],
+      password: ['', [Validators.required]],
+      confirm: ['', [Validators.required]],
+    });
+  }
+
+  public submitForm(): void {
+    if (this.validateForm.valid) {
+      // Perform registration logic here (e.g., send data to backend)
+      // console.log('submit', this.validateForm.value);
+      this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Registration successful!' });
+      this.validateForm.reset();
+    } else {
+      Object.values(this.validateForm.controls).forEach((control) => {
+        if (control.invalid) {
+          control.markAsDirty();
+          control.updateValueAndValidity({
+            onlySelf: true,
+          });
+        }
+      });
+    }
+  }
+}