[GPJ-41] Exibe informações de usuário em página de perfil

ProcessosFront/src/components/profile/profile.component.html

@@ -1,39 +1,52 @@
 <div class="container my-4">
-  <p class="fs-2 mb-3">Atualize seu perfil</p>
-
-  <form class="d-flex flex-column align-items-center container">
-    <mat-form-field class="w-100">
-      <input matInput placeholder="Nome" type="text" pattern="[a-zA-z ]*" />
-    </mat-form-field>
-
+  <p class="fs-2 mb-3">Perfil</p>
+  <form class="d-flex flex-column align-items-center container w-50">
     <mat-form-field class="w-100">
-      <input matInput placeholder="E-mail" type="text" email />
+      <mat-label>Nome</mat-label>
+      <input
+        matInput
+        [defaultValue]="user.name | titlecase"
+        type="text"
+        pattern="[a-zA-z ]*"
+        readonly
+      />
     </mat-form-field>
 
     <mat-form-field class="w-100">
+      <mat-label>Cargo</mat-label>
       <input
         matInput
-        placeholder="Telefone"
+        [defaultValue]="user.role | titlecase"
         type="text"
-        pattern="\d+"
-        minlength="9"
-        maxlength="9"
+        pattern="[a-zA-z ]*"
+        readonly
       />
     </mat-form-field>
 
     <mat-form-field class="w-100">
-      <input matInput placeholder="Senha" type="text" />
+      <mat-label>CPF</mat-label>
+      <input matInput [defaultValue]="formattedCpf()" type="text" readonly />
+    </mat-form-field>
+
+    <mat-form-field class="w-100">
+      <mat-label>E-mail</mat-label>
+      <input matInput [defaultValue]="user.email" type="text" readonly />
+    </mat-form-field>
+
+    <mat-form-field class="w-100">
+      <mat-label>Telefone</mat-label>
+      <input matInput [defaultValue]="formattedPhone()" type="text" readonly />
     </mat-form-field>
 
     <button
       class="mt-3"
       style="width: 60%"
       mat-flat-button
       type="submit"
-      data-cy="signup-btn"
-      color="primary"
+      data-btn="delete"
+      color="warn"
     >
-      Salvar mudanças
+      Aapgar conta
     </button>
   </form>
 </div>

ProcessosFront/src/components/profile/profile.component.ts

@@ -1,12 +1,33 @@
 import { Component, OnInit } from '@angular/core';
+import { UserService } from 'src/services/user.service';
+import { User } from '../../../../common/user';
 
 @Component({
   selector: 'app-profile',
   templateUrl: './profile.component.html',
   styleUrls: ['./profile.component.css'],
 })
 export class ProfileComponent implements OnInit {
-  constructor() {}
+  user: User | undefined;
 
-  ngOnInit(): void {}
+  constructor(private userService: UserService) {}
+
+  ngOnInit(): void {
+    this.userService.getCurrUser().subscribe((user) => (this.user = user));
+  }
+
+  formattedCpf(): string {
+    const tmp1 = this.user.cpf.substring(0, 3);
+    const tmp2 = this.user.cpf.substring(3, 6);
+    const tmp3 = this.user.cpf.substring(6, 9);
+    const tmp4 = this.user.cpf.substring(9);
+    return `${tmp1}.${tmp2}.${tmp3}-${tmp4}`;
+  }
+
+  formattedPhone(): string {
+    const tmp1 = this.user.phone.substring(0, 2);
+    const tmp2 = this.user.phone.substring(2, 7);
+    const tmp3 = this.user.phone.substring(7, 11);
+    return `(${tmp1}) ${tmp2}-${tmp3}`;
+  }
 }