feat: Implement user sign-up component with form validation and API integration.

Author: matheusandre1

timeless-api/src/main/webui/src/app/pages/sign/sign-up/sign-up.component.html

@@ -2,36 +2,79 @@ <h1 class="text-xl font-thin my-2 text-center">
   Olá, <span class="font-bold">Timeless</span> 🕰
 </h1>
 
-<form [formGroup]="form" (ngSubmit)="onSubmit()" class="flex flex-col w-[300px] gap-2">
+<form
+  [formGroup]="form"
+  (ngSubmit)="onSubmit()"
+  class="flex flex-col w-[300px] gap-2"
+>
   <p-float-label variant="in">
-    <input id="first_name" class="w-full text-center font-medium" type="text" pSize="small" pInputText
-      formControlName="firstName" autocomplete="false" />
+    <input
+      id="first_name"
+      class="w-full text-center font-medium"
+      type="text"
+      pSize="small"
+      pInputText
+      formControlName="firstName"
+      autocomplete="false"
+    />
     <label for="first_name">Seu primeiro nome</label>
   </p-float-label>
   <p-float-label variant="in">
-    <input id="last_name" class="w-full text-center font-medium" type="text" pSize="small" pInputText
-      formControlName="lastName" autocomplete="false" />
+    <input
+      id="last_name"
+      class="w-full text-center font-medium"
+      type="text"
+      pSize="small"
+      pInputText
+      formControlName="lastName"
+      autocomplete="false"
+    />
     <label for="last_name">Seu último nome</label>
   </p-float-label>
   <p-float-label variant="in">
-    <input id="email" class="w-full text-center font-medium" type="text" pSize="small" pInputText
-      formControlName="email" autocomplete="false" />
+    <input
+      id="email"
+      class="w-full text-center font-medium"
+      type="text"
+      pSize="small"
+      pInputText
+      formControlName="email"
+      autocomplete="false"
+    />
     <label for="email">Seu melhor e-mail</label>
   </p-float-label>
   <p-float-label variant="in">
-    <p-inputMask id="phone_number" styleClass="w-full text-center font-medium" mask="(99) 99999-9999"
-      formControlName="phoneNumber" autocomplete="off" [showClear]="true" />
+    <p-inputMask
+      id="phone_number"
+      styleClass="w-full text-center font-medium"
+      mask="(99) 99999-9999"
+      formControlName="phoneNumber"
+      autocomplete="off"
+    />
     <label for="phone_number">Seu número de telefone</label>
   </p-float-label>
   <p-float-label variant="in">
-    <input id="password" class="w-full text-center font-medium" type="password" pSize="small" pInputText
-      formControlName="password" autocomplete="false" />
+    <input
+      id="password"
+      class="w-full text-center font-medium"
+      type="password"
+      pSize="small"
+      pInputText
+      formControlName="password"
+      autocomplete="false"
+    />
     <label for="password">Sua senha</label>
   </p-float-label>
-  <p-button type="submit" [style]="{ width: '100%' }" label="Cadastrar" severity="primary" size="small"></p-button>
+  <p-button
+    type="submit"
+    [style]="{ width: '100%' }"
+    label="Cadastrar"
+    severity="primary"
+    size="small"
+  ></p-button>
   <p class="text-xs text-center font-extralight">
     Já possui uma conta? Clique
     <a [routerLink]="['']" class="primary-emphasis font-normal">aqui</a>
     para acessar.
   </p>
-</form>
+</form>

timeless-api/src/main/webui/src/app/pages/sign/sign-up/sign-up.component.ts

@@ -31,7 +31,6 @@ import { InputMask } from 'primeng/inputmask';
 })
 export class SignUpComponent {
   formBuilder = inject(FormBuilder);
-  regex = /^\+?\d{1,3}?[\s-]?\(?\d{1,4}\)?([\s-]?\d{2,4}){1,3}$/;
   form: FormGroup = this.formBuilder.group({
     email: ['', [Validators.email, Validators.required]],
     password: [
@@ -40,14 +39,14 @@ export class SignUpComponent {
     ],
     firstName: ['', [Validators.required, Validators.minLength(1)]],
     lastName: ['', [Validators.required, Validators.minLength(1)]],
-    phoneNumber: ['', [Validators.required, Validators.pattern(this.regex)]],
+    phoneNumber: ['', [Validators.required]],
   });
 
   constructor(
     private readonly timelessApiService: TimelessApiService,
     private readonly router: Router,
     private readonly toast: ToastService,
-  ) { }
+  ) {}
 
   onSubmit() {
     if (this.form.valid) {