feat: Create error message in angular.

Author: Andre Felipe de Barros Azevedo Nogueira

securetimenotes-frontend/securetimenotes/src/app/components/home/home.component.css

@@ -72,22 +72,63 @@ p {
     border: 1px solid #ccc;
 }
 
+.notes-container-plus {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: center;
+    padding: 10px;
+}
+
 /* Container que agrupa o cartão de criação e os cartões de nota */
+
+.button-logout{
+    background-color: transparent;
+    display: flex;
+    padding: 10px;
+    margin: 10px 0;
+    justify-content: flex-end;
+    align-items: flex-end;
+}
+
+.button-logout h1{
+    cursor: pointer;
+    width: 80px;
+    height: 30px;
+    border: none;
+    border-radius: 5px;
+    background-color: #007bff;
+    color: white;
+    font-size: 16px;
+    padding-top: 10px;
+    transition: background 0.3s;
+}
+
+.button-logout h1:hover {
+    background-color: #0056b3;
+}
+
+.button-logout:hover{
+    background-color: transparent;
+    cursor: auto;
+}
+
 .notes-container {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     justify-content: flex-start;
     align-items: flex-start;
     padding: 10px;
+    padding-left: 50px;
 }
 
 /* Cartão de criação minimalista */
 .create-document {
-    width: 100px;
-    height: 120px;
+    width: 60px;
+    height: 60px;
     border: 1px solid #007bff; /* Borda azul */
-    border-radius: 6px;
+    border-radius: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -107,11 +148,11 @@ p {
 
 /* Cartão de nota com altura igual ao cartão de criação */
 .note-card {
-    width: 100px;
+    width: 130px;
     height: 100px; /* Altura igual ao create-document */
     padding: 10px;
     border: 1px solid #007bff; /* Borda azul */
-    border-radius: 6px;
+    border-radius: 15px;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -140,15 +181,26 @@ p {
 
 /* Responsivo */
 @media (max-width: 600px) {
+    
+    .button-logout {
+        justify-content: center;
+        align-items: center;
+        background-color: transparent;
+    }
+    
     .notes-container {
     justify-content: center;
     }
 
-    .note-card,
-    .create-document {
+    .note-card{
         width: 100%;
     }
 
+    .notes-container{
+        padding-left: 10%;
+        padding-right: 10%;
+    }
+
     .note-form textarea {
         height: 200px;
     }

securetimenotes-frontend/securetimenotes/src/app/components/home/home.component.html

@@ -10,14 +10,15 @@ <h2 *ngIf="!showTitlePrompt && !showNoteEditor">SecureTime</h2>
     <ng-template #loggedInTemplate>
         <!-- Header e Logout (apenas quando não estiver criando/editando) -->
         <div *ngIf="!showTitlePrompt && !showNoteEditor" class="header-info">
-        <button (click)="logout()">Logout</button>
+        <button class="button-logout" (click)="logout()"><h1>Logout</h1></button>
         </div>
 
         <!-- Modal para o título da nota -->
         <div class="modal" *ngIf="showTitlePrompt">
         <h3>Digite o título da nota</h3>
         <input type="text" [(ngModel)]="newNoteTitle" placeholder="Título da nota" />
         <button (click)="confirmTitle()">Continuar</button>
+        <button (click)="cancelEdit()">Cancelar</button>
         </div>
 
         <!-- Editor da nota -->
@@ -30,19 +31,22 @@ <h3>{{ editingNote ? 'Editando' : 'Criando' }}: {{ newNoteTitle }}</h3>
         <button (click)="cancelEdit()">Cancelar</button>
         </div>
 
-        <!-- Container com o cartão de criação e os cartões de nota -->
-        <div class="notes-container" *ngIf="!showTitlePrompt && !showNoteEditor">
-        <!-- Cartão de criação minimalista (só o "+") -->
-        <div class="create-document" (click)="openNoteTitlePrompt()">
-            <span class="plus-symbol">+</span>
+        <div class="notes-container-plus" *ngIf="!showTitlePrompt && !showNoteEditor">
+            <!-- Cartão de criação minimalista (só o "+") -->
+            <div class="create-document" (click)="openNoteTitlePrompt()">
+                <span class="plus-symbol">+</span>
+            </div>
         </div>
 
-        <!-- Cartões de nota existentes -->
-        <div class="note-card" *ngFor="let note of notes" (click)="editNote(note)">
-            <div class="note-icon">📄</div>
-            <!-- Limita o título aos primeiros 15 caracteres -->
-            <div class="note-title">{{ note.title | slice:0:9 }}</div>
-        </div>
+        <!-- Container com o cartão de criação e os cartões de nota -->
+        <div class="notes-container" *ngIf="!showTitlePrompt && !showNoteEditor">
+            <!-- Cartões de nota existentes -->
+            <div class="note-card" *ngFor="let note of notes" (click)="editNote(note)">
+                <div class="note-icon">📝</div>
+                <!-- Limita o título aos primeiros 15 caracteres -->
+                <div class="note-title">{{ note.title | slice:0:13 }}</div>
+            </div>
         </div>
+        
     </ng-template>
 </div>

securetimenotes-frontend/securetimenotes/src/app/components/login/login.component.css

@@ -69,4 +69,11 @@ h2 {
     color: red;
     font-size: 0.8em;
     margin-top: 5px;
-}
+}
+
+.error-message {
+    color: #ff4d4d;
+    font-weight: bold;
+    margin-top: 10px;
+  }
+  

securetimenotes-frontend/securetimenotes/src/app/components/login/login.component.html

@@ -2,6 +2,9 @@
     <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
     <div>
       <h2>LOGIN</h2>
+      <div *ngIf="loginError" class="error-message">
+        {{ loginError }}
+      </div>
         <label for="login">Login (E-mail)</label>
         <input id="login" formControlName="login" type="email" />
       <div *ngIf="loginForm.get('login')?.invalid && loginForm.get('login')?.touched">

securetimenotes-frontend/securetimenotes/src/app/components/login/login.component.ts

@@ -14,6 +14,7 @@ import { Router } from '@angular/router';
 })
 export class LoginComponent {
   loginForm: FormGroup;
+  loginError: string | null = null;
 
   constructor(private fb: FormBuilder, private apiService: AuthService, private router: Router) {
     this.loginForm = this.fb.group({
@@ -34,11 +35,13 @@ export class LoginComponent {
       this.apiService.post('auth/login', requestPayload).subscribe({
         next: (response: any) => {
           console.log('Login bem-sucedido', response);
+          this.loginError = null;
           localStorage.setItem('token', response.token); // Armazena o token no localStorage
           this.router.navigate(['/home']);
         },
         error: (error) => {
           console.error('Erro ao fazer login', error);
+          this.loginError = 'Usuário ou senha inválidos';
         }
       });
     } else {

securetimenotes-frontend/securetimenotes/src/app/components/register/register.component.css

@@ -161,3 +161,9 @@ h2 {
   color: #fff;
 }
 
+.error-message {
+  color: #ff4d4d;
+  font-weight: bold;
+  margin-top: 10px;
+}
+

securetimenotes-frontend/securetimenotes/src/app/components/register/register.component.html

@@ -2,6 +2,9 @@
     <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
     <div>
         <h2>REGISTER</h2>
+        <div *ngIf="registrationError" class="error-message">
+            {{ registrationError }}
+        </div>
         <label for="login">E-mail</label>
         <input id="login" formControlName="login" type="email" />
         <div *ngIf="registerForm.get('login')?.invalid && registerForm.get('login')?.touched">

securetimenotes-frontend/securetimenotes/src/app/components/register/register.component.ts

@@ -17,6 +17,7 @@ export class RegisterComponent {
   registerForm: FormGroup;
   passwordStrength: string = '';  // Armazenar o estado da força da senha
   passwordStrengthPercentage: number = 0;  // Armazenar a porcentagem da força da senha
+  registrationError: string | null = null;
 
   // Armazenar o status dos requisitos de senha
   passwordRequirements = {
@@ -90,10 +91,12 @@ export class RegisterComponent {
       this.apiService.post('auth/register', requestPayload, 'text').subscribe({
         next: (response) => {
           console.log('Usuário registrado com sucesso', response);
+          this.registrationError = null;
           this.router.navigate(['/login']);
         },
         error: (error) => {
           console.error('Erro ao registrar usuário', error);
+          this.registrationError = 'Erro ao registrar. Tente novamente.';
         }
       });
     } else if (!this.validatePassword()) {

securetimenotes-frontend/securetimenotes/src/app/service/note.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { NoteService } from './note.service';
+
+describe('NoteService', () => {
+  let service: NoteService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(NoteService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

securetimenotes-frontend/securetimenotes/src/app/service/note.service.ts

@@ -0,0 +1,60 @@
+import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable, throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NoteService {
+
+  private apiUrl = 'https://securetimenotes.up.railway.app/';
+
+  constructor(private http: HttpClient) {}
+
+  private getHeaders(): HttpHeaders {
+    const token = localStorage.getItem('token'); // ou pegue de outro lugar, se preferir
+    return new HttpHeaders({
+      'Authorization': `Bearer ${token}`,
+      'Content-Type': 'application/json'
+    });
+  }
+
+  getNotes(): Observable<any> {
+    return this.http.get<any>(`${this.apiUrl}user/notes`, { headers: this.getHeaders() })
+      .pipe(
+        catchError(this.handleError)
+      );
+  }
+
+  createNote(note: any): Observable<any> {
+    return this.http.post<any>(`${this.apiUrl}user/notes`, note, { headers: this.getHeaders() })
+      .pipe(
+        catchError(this.handleError)
+      );
+  }
+
+  updateNote(id: string, note: any): Observable<any> {
+    return this.http.put<any>(`${this.apiUrl}user/notes/${id}`, note, { headers: this.getHeaders() })
+      .pipe(
+        catchError(this.handleError)
+      );
+  }
+
+  deleteNote(id: string): Observable<any> {
+    return this.http.delete<any>(`${this.apiUrl}user/notes/${id}`, { headers: this.getHeaders() })
+      .pipe(
+        catchError(this.handleError)
+      );
+  }
+
+  private handleError(error: HttpErrorResponse) {
+    let errorMessage = 'Erro desconhecido!';
+    if (error.error instanceof ErrorEvent) {
+      errorMessage = `Erro: ${error.error.message}`;
+    } else {
+      errorMessage = `Erro do servidor: ${error.status} - ${error.message}`;
+    }
+    return throwError(() => new Error(errorMessage));
+  }
+}