Fix Perfil

src/app/pages/profile/profile.component.css

@@ -0,0 +1 @@
+

src/app/pages/profile/profile.component.html

@@ -1,44 +1,43 @@
-<div class="flex justify-center items-center flex-col">
-  <div class="text-center">
+<div class="w-full h-full flex justify-center items-center flex-col gap-11">
+  <div
+    class="max-w-[280px] max-h-[170px] grid grid-cols-1 align-middle p-4 m-0 gap-4 rounded-xl border border-gray-300 divide-y font-custom break-words text-center"
+    *ngIf="user"
+  >
+    <div class="text-center font-bold text-sm text-blue-brand">Perfil</div>
+
     <div
-      class="mb-4 flex flex-col justify-start items-center bg-zinc-300 p-4 rounded-xl shadow-md"
-      *ngIf="user"
+      class="flex flex-col justify-center items-center gap-2 pt-3 text-[12px] text-[#3c3c3b]"
     >
-      <div class="flex flex-row">
-        <div class="font-bold">Nome:&nbsp;</div>
+      <span class="w-full font-bold">
         {{ user.name }}
-      </div>
-      <div class="flex flex-row">
-        <div class="font-bold">Vínculo:&nbsp;</div>
-        {{ user.connection }}
-      </div>
-      <div class="flex flex-row">
-        <div class="font-bold">Email:&nbsp;</div>
+      </span>
+      <span class="w-full font-normal">
         {{ user.email }}
-      </div>
+      </span>
     </div>
-    <button id="editUser"
-      class="p-2 bg-blue-brand rounded-lg justify-center my-8 text-white md:h-10 md:w-32"
-      (click)="navigatorEdit()"
-    >
-      Editar perfil
-    </button>
-  </div>
-  <div class="flex items-center justify-center">
-    <button id="deleteUser"
-      class="p-2 bg-blue-brand rounded-lg justify-center my-8 text-white md:h-10 md:w-32"
-      (click)="deleteUser()"
+
+    <div
+      class="w-full h-8 flex justify-center items-center font-normal text-[12px] text-[#3c3c3b]"
     >
-      Deletar usuário
-    </button>
+      {{ connection }}
+    </div>
   </div>
-  <div class="flex items-center justify-center">
-    <button
-    id="logout"
-      class="p-2 bg-blue-brand rounded-lg justify-center my-8 text-white md:h-10 md:w-16"
-      (click)="logoutUser()"
-    >
-      Sair
+
+  <button
+    id="editUser"
+    class="w-full h-[30px] max-w-[103px] bg-blue-brand rounded-lg text-white"
+    (click)="navigatorEdit()"
+  >
+    Editar
+  </button>
+
+  <div class="flex flex-initial flex-col gap-4 text-[11px] text-blue-brand">
+    <button id="deleteUser" class="rounded-lg" (click)="deleteUser()">
+      Deseja excluir o perfil?
     </button>
+
+    <button id="changePassword">Alterar senha</button>
+
+    <button id="logout" (click)="logoutUser()">Sair</button>
   </div>
 </div>

src/app/pages/profile/profile.component.ts

@@ -10,7 +10,6 @@ import { HttpErrorResponse } from '@angular/common/http';
 
 type ErrorResponseType = HttpErrorResponse;
 
-
 @Component({
   selector: 'app-profile',
   templateUrl: './profile.component.html',
@@ -19,6 +18,7 @@ type ErrorResponseType = HttpErrorResponse;
 export class ProfileComponent {
   user: any;
   userId: any;
+  connection: string = '';
 
   constructor(
     private router: Router,
@@ -27,7 +27,7 @@ export class ProfileComponent {
     private alertService: AlertService,
     private confirmationService: ConfirmationService,
     private authService: AuthService
-  ) { }
+  ) {}
 
   ngOnInit(): void {
     this.setUserIdFromToken(localStorage.getItem('token') as string);
@@ -43,6 +43,7 @@ export class ProfileComponent {
     this.userService.getUser(this.userId).subscribe({
       next: (data) => {
         this.user = data;
+        this.connection = this.formatingConnection(this.user.connection);
       },
       error: (error: ErrorResponseType) => {
         console.log(error);
@@ -60,8 +61,7 @@ export class ProfileComponent {
       accept: () => {
         this.authService.logout();
       },
-      reject: () => {
-      },
+      reject: () => {},
     });
   }
 
@@ -87,13 +87,16 @@ export class ProfileComponent {
           },
         });
       },
-      reject: () => {
-      },
+      reject: () => {},
     });
-
   }
 
   navigatorEdit(): void {
     this.router.navigate([`/editUser/${this.user.id}`]);
   }
+
+  formatingConnection(value: string): string {
+    let str = value.toLowerCase();
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  }
 }