[draft] Feat/tu 01 01/user registration

.eslintrc.json

@@ -85,7 +85,8 @@
             "prefix": "app",
             "style": "kebab-case"
           }
-        ]
+        ],
+        "@typescript-eslint/unbound-method": "off"
       },
       "settings": {
         "import/resolver": {

src/app/app.routes.ts

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

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

@@ -1 +1,36 @@
-<p>register works!</p>
+<section class="register-container">
+  <form class="register-form" nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
+    <h2>Sign Up</h2>
+    <nz-form-item class="register-form-item">
+      <nz-form-label nzRequired>Email</nz-form-label>
+      <nz-form-control nzErrorTip="Please input your email!">
+        <nz-input-group>
+          <input type="email" nz-input formControlName="email" placeholder="Enter your email" />
+        </nz-input-group>
+      </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item class="register-form-item">
+      <nz-form-label nzRequired>Password</nz-form-label>
+      <nz-form-control nzErrorTip="Please input your password!">
+        <nz-input-group>
+          <input type="password" nz-input formControlName="password" placeholder="Enter your password" />
+        </nz-input-group>
+      </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item class="register-form-item">
+      <nz-form-label nzRequired>Repeat Password</nz-form-label>
+      <nz-form-control nzErrorTip="Please confirm your password!">
+        <nz-input-group>
+          <input type="password" nz-input formControlName="confirm" placeholder="Repeat Password" />
+        </nz-input-group>
+      </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item class="register-button-container">
+      <button nz-button nzType="primary" [disabled]="!validateForm.valid">Register</button>
+      <a nz-typography nzType="secondary" routerLink="/login" style="margin-left: 10px">Sign In</a>
+    </nz-form-item>
+  </form>
+</section>

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

@@ -0,0 +1,57 @@
+.register-container {
+  display: flex;
+  justify-content: center;
+  height: 100%;
+}
+
+.register-form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  width: 25rem;
+  height: 32rem;
+  margin: auto;
+  padding: 2rem;
+
+  background-color: #c7c7c724;
+  box-shadow: 0 0 10px 0 rgb(0 0 0 / 30%);
+
+  .register-form-item {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 3.5rem;
+
+    nz-form-label {
+      text-align: left;
+    }
+
+    nz-form-label,
+    nz-form-control {
+      width: 100%;
+    }
+  }
+
+  .register-button-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+
+    margin-top: 1rem;
+
+    text-align: center;
+  }
+}
+
+@media screen and (width <= 575px) {
+  .register-form {
+    height: auto;
+    padding: 1.5rem;
+
+    .register-form-item {
+      margin-bottom: 1rem;
+    }
+  }
+}

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

@@ -1,11 +1,48 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzMessageService } from 'ng-zorro-antd/message';
 
 @Component({
   selector: 'app-register',
   standalone: true,
-  imports: [],
+  imports: [ReactiveFormsModule, NzFormModule, NzInputModule, NzButtonModule],
   templateUrl: './register.component.html',
   styleUrl: './register.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class RegisterComponent {}
+export class RegisterComponent {
+  public validateForm!: FormGroup;
+
+  constructor(
+    private fb: FormBuilder,
+    private message: NzMessageService,
+  ) {
+    this.validateForm = this.fb.group({
+      email: [null, [Validators.email, Validators.required]],
+      password: [null, [Validators.required]],
+      confirm: [null, [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.message.success('Registration successful!');
+      this.validateForm.reset();
+    } else {
+      Object.values(this.validateForm.controls).forEach((control) => {
+        if (control.invalid) {
+          control.markAsDirty();
+          control.updateValueAndValidity({
+            onlySelf: true,
+          });
+        }
+      });
+    }
+  }
+}