feat: SignupComponent refactored to remove feedback message (#495)

nramc · Oct 9, 2024 · 5c98122 · 5c98122
1 parent 2111363
commit 5c98122
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 22 deletions.
diff --git a/src/app/page/auth/signup/signup.component.html b/src/app/page/auth/signup/signup.component.html
@@ -19,7 +19,7 @@
             <div class="col-12">
               <div class="form-floating mb-3">
                 <input type="text" class="form-control form-control-sm" id="name" name="name" autofocus
-                       placeholder="Name" [(ngModel)]="form.name" #name="ngModel"
+                       placeholder="Name" [(ngModel)]="form().name" #name="ngModel"
                        required maxlength="50" minlength="3"
                        [disabled]="isSuccessful()">
                 <label for="name">Name</label>
@@ -35,7 +35,7 @@
               <div class="form-floating mb-3">
                 <input type="email" class="form-control form-control-sm" id="username" name="username"
                        placeholder="Email Address" autocomplete="username" #username="ngModel"
-                       [(ngModel)]="form.username" [disabled]="isSuccessful()"
+                       [(ngModel)]="form().username" [disabled]="isSuccessful()"
                        required minlength="8" maxlength="50" email>
                 <label for="username">Email Address</label>
                 <div *ngIf="username.invalid && (username.dirty || signupForm.submitted)" class="form-text text-danger">
@@ -53,7 +53,7 @@
               <div class="form-floating mb-3">
                 <input type="password" class="form-control form-control-sm" id="password" name="password"
                        placeholder="Password" autocomplete="new-password" #password="ngModel"
-                       [(ngModel)]="form.password" [disabled]="isSuccessful()"
+                       [(ngModel)]="form().password" [disabled]="isSuccessful()"
                        required min="8" maxlength="50"
                        pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@.#$!%*?&^])[A-Za-z\d@.#$!%*?&]{8,50}$">
                 <label for="password">Password</label>

diff --git a/src/app/page/auth/signup/signup.component.ts b/src/app/page/auth/signup/signup.component.ts
@@ -1,26 +1,15 @@
-import {Component, DestroyRef, inject, model} from '@angular/core';
-import {FeedbackMessageComponent} from "../../../component/feedback-message/feedback-message.component";
+import {Component, DestroyRef, inject, model, signal} from '@angular/core';
 import {FormsModule, NgForm, ReactiveFormsModule} from "@angular/forms";
 import {NgIf} from "@angular/common";
 import {RouterLink} from "@angular/router";
 import {LOGIN_PAGE_INFO} from "../../../model/page.info.model";
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
-import {RegistrationService} from "../../../service/registration/registration.service";
-
-export class SignupForm {
-  constructor(
-    public name: string = '',
-    public username: string = '',
-    public password: string = ''
-  ) {
-  }
-}
+import {RegistrationService, SignupRequest} from "../../../service/registration/registration.service";
 
 @Component({
   selector: 'app-signup',
   standalone: true,
   imports: [
-    FeedbackMessageComponent,
     FormsModule,
     NgIf,
     ReactiveFormsModule,
@@ -31,22 +20,24 @@ export class SignupForm {
 })
 export class SignupComponent {
   protected readonly LOGIN_PAGE_INFO = LOGIN_PAGE_INFO;
+
   destroyRef = inject(DestroyRef);
   registrationService = inject(RegistrationService);
 
-  form = new SignupForm();
+  form = signal<SignupRequest>({
+    username: '',
+    password: '',
+    name: ''
+  });
   isSuccessful = model(false);
   isErrorOccurred = model(false);
 
   signup(signupForm: NgForm) {
     this.isSuccessful.set(false);
 
     if (signupForm.valid) {
-      this.registrationService.signup({
-        username: this.form.username,
-        password: this.form.password,
-        name: this.form.name
-      }).pipe(takeUntilDestroyed(this.destroyRef))
+      this.registrationService.signup(this.form())
+        .pipe(takeUntilDestroyed(this.destroyRef))
         .subscribe({
           next: _ => this.onSuccessCallback(),
           error: err => this.onErrorCallback(err)