Adiciona padronização de inputs e mensagens de erro

Signed-off-by: DaviMarinho <[email protected]>
fga-eps-mds · Nov 15, 2023 · eaf5f7d · eaf5f7d
1 parent ecd4502
commit eaf5f7d
Show file tree

Hide file tree

Showing 18 changed files with 146 additions and 75 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,12 +21,14 @@
     "@angular/platform-browser": "^15.2.0",
     "@angular/platform-browser-dynamic": "^15.2.0",
     "@angular/router": "^15.2.0",
+    "angular-oauth2-oidc": "^15.0.1",
     "jwt-decode": "^3.1.2",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
     "postcss-loader": "^7.3.3",
     "postcss-preset-env": "^9.2.0",
     "postcss-scss": "^4.0.9",
+    "primeicons": "^6.0.1",
     "primeng": "^15.4.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,3 +1,5 @@
 <app-background>
   <router-outlet></router-outlet>
 </app-background>
+<p-toast key="myToast"></p-toast>
+<p-confirmDialog key="myDialog"></p-confirmDialog>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,9 +1,18 @@
-import { NgModule } from '@angular/core';
+// Import
 import { BrowserModule } from '@angular/platform-browser';
-import { ReactiveFormsModule } from '@angular/forms';
+import { AppRoutingModule } from './app-routing.module';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { ReactiveFormsModule } from '@angular/forms';
+import { ToastModule } from 'primeng/toast';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
+import { ConfirmationService } from 'primeng/api';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { OAuthModule, OAuthStorage } from 'angular-oauth2-oidc';
+import { InputTextModule } from 'primeng/inputtext';
+import { DropdownModule } from 'primeng/dropdown';
 
-import { AppRoutingModule } from './app-routing.module';
+// Declaration
+import { NgModule } from '@angular/core';
 import { AppComponent } from './app.component';
 import { LoginComponent } from './pages/login/login.component';
 import { RegisterComponent } from './pages/register/register.component';
@@ -12,7 +21,6 @@ import { VideoViewerComponent } from './pages/video-viewer/video-viewer.componen
 import { SafePipe } from './pipes/safe.pipe';
 import { BackgroundComponent } from './components/background/background.component';
 import { LoginSocialComponent } from './pages/login-social/login-social.component';
-
 import { ActiveAccountComponent } from './pages/active-account/active-account.component';
 import { HomePageComponent } from './pages/home-page/home-page.component';
 import { ProfileComponent } from './pages/profile/profile.component';
@@ -27,6 +35,18 @@ import { ParticipateComponent } from './pages/participate/participate.component'
 import { MessageService } from 'primeng/api';
 
 @NgModule({
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    HttpClientModule,
+    ReactiveFormsModule,
+    ToastModule,
+    ConfirmDialogModule,
+    BrowserAnimationsModule,
+    OAuthModule.forRoot(),
+    InputTextModule,
+    DropdownModule
+  ],
   declarations: [
     AppComponent,
     LoginComponent,
@@ -46,23 +66,18 @@ import { MessageService } from 'primeng/api';
     SuggestAgendaComponent,
     ParticipateComponent,
   ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    HttpClientModule,
-    ReactiveFormsModule,
-    HttpClientModule
-  ],
   providers: [
-    AuthGuard,
+    { provide: 'authGuard', useClass: AuthGuard },
     AuthService,
     {
       provide: HTTP_INTERCEPTORS,
       useClass: UserTokenInterceptor,
       multi: true,
     },
-    MessageService
+    { provide: OAuthStorage, useValue: localStorage },
+    MessageService,
+    ConfirmationService,
   ],
   bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}
diff --git a/src/app/pages/active-account/active-account.component.html b/src/app/pages/active-account/active-account.component.html
@@ -2,10 +2,10 @@
 <div class="flex justify-center items-center h-4/5">
   <form [formGroup]="userForm" (submit)="activeAccount()" class="text-center">
     <div class="mb-4">
-      <input class="w-64 h-8 border rounded-lg border-gray-300 pl-4 md:w-96 md:h-10" type="email" formControlName="email" name="email" placeholder="E-mail" required>
+      <input pInputText class="w-64 h-8 border rounded-lg border-gray-300 pl-4 md:w-96 md:h-10" type="email" formControlName="email" name="email" placeholder="E-mail" required>
     </div>
     <div class="mb-4">
-      <input class="w-64 h-8 border rounded-lg border-gray-300 pl-4 md:w-96 md:h-10" type="text" formControlName="code" name="code" placeholder="Código" required>
+      <input pInputText class="w-64 h-8 border rounded-lg border-gray-300 pl-4 md:w-96 md:h-10" type="text" formControlName="code" name="code" placeholder="Código" required>
     </div>
     <button class="w-20 h-8 bg-blue-brand rounded-lg justify-center mb-4 text-white md:h-10 md:w-32" type="submit">Ativar</button>
     <div class="flex justify-start items-center text-blue-brand underline pl-4" (click)="resendCode()">

diff --git a/src/app/pages/edit-user/edit-user.component.html b/src/app/pages/edit-user/edit-user.component.html
@@ -2,10 +2,10 @@
 <div class="flex justify-center items-center h-4/5">
   <form [formGroup]="userForm" (submit)="updateUser()" class="text-center">
     <div class="mb-4">
-      <input class="w-64 h-8 border rounded-lg border-gray-300 pl-4" type="text" formControlName="name" name="name" placeholder="Nome" required>
+      <input pInputText class="w-64 h-8 border rounded-lg border-gray-300 pl-4" type="text" formControlName="name" name="name" placeholder="Nome" required>
     </div>
     <div class="mb-4">
-      <input class="w-64 h-8 border rounded-lg border-gray-300 pl-4" type="email" formControlName="email" name="email" placeholder="E-mail" required>
+      <input pInputText class="w-64 h-8 border rounded-lg border-gray-300 pl-4" type="email" formControlName="email" name="email" placeholder="E-mail" required>
     </div>
     <div class="mb-4">
         <select class="w-64 h-8 border rounded-lg border-gray-300 pl-3" formControlName="connection" name="connection" placeholder="Vinculo" required>

diff --git a/src/app/pages/login/login.component.html b/src/app/pages/login/login.component.html
@@ -2,10 +2,10 @@
   <div class="flex justify-center items-center h-4/5">
     <form [formGroup]="userForm" (submit)="login()" class="text-center">
       <div class="mb-4">
-        <input class="w-64 h-8 border rounded-lg border-gray-300 pl-4 md:w-96 md:h-10" type="email" formControlName="email" name="email" placeholder="E-mail" required>
+        <input pInputText class="w-64 h-8 border rounded-lg border-gray-300 pl-4 md:w-96 md:h-10" type="email" formControlName="email" name="email" placeholder="E-mail" required>
       </div>
       <div class="mb-4">
-        <input class="w-64 h-8 border rounded-lg border-gray-300 pl-4 md:w-96 md:h-10" type="password" formControlName="password" name="password" placeholder="Senha" required>
+        <input pInputText class="w-64 h-8 border rounded-lg border-gray-300 pl-4 md:w-96 md:h-10" type="password" formControlName="password" name="password" placeholder="Senha" required>
       </div>
       <div class="flex justify-start items-center text-gray-400 pl-4" (click)="navigator('/sendCodeResetPassword')">
         Esqueceu a senha?

diff --git a/src/app/pages/login/login.component.ts b/src/app/pages/login/login.component.ts
@@ -37,7 +37,7 @@ export class LoginComponent implements OnInit {
             this.navigator('/profile');
           },
           error: (error) => {
-            console.error(error);
+            this.alertService.showMessage("error", "Erro", error.error);
           },
         });
     } else {

diff --git a/src/app/pages/profile/profile.component.ts b/src/app/pages/profile/profile.component.ts
@@ -41,13 +41,6 @@ export class ProfileComponent {
   }
 
   navigatorEdit(): void {
-
-    const navigationExtras: NavigationExtras = {
-      state: {
-        user: this.user
-      }
-    };
-    this.router.navigate([`/editUser`], navigationExtras);
+    this.router.navigate([`/editUser/${this.user.id}`]);
   }
-
 }
diff --git a/src/app/pages/register/register.component.html b/src/app/pages/register/register.component.html
@@ -2,24 +2,23 @@
     <div class="flex justify-center items-center h-4/5">
       <form [formGroup]="userForm" (submit)="register()" class="text-center">
         <div class="mb-4">
-          <input class="w-64 h-8 border rounded-lg border-gray-300 pl-4" type="text" formControlName="name" name="name" placeholder="Nome" required>
+          <input pInputText pInputText class="w-64 h-8 border rounded-lg border-gray-300 pl-4" type="text" formControlName="name" name="name" placeholder="Nome" required>
         </div>
         <div class="mb-4">
-          <input class="w-64 h-8 border rounded-lg border-gray-300 pl-4" type="email" formControlName="email" name="email" placeholder="E-mail" required>
+          <input pInputText class="w-64 h-8 border rounded-lg border-gray-300 pl-4" type="email" formControlName="email" name="email" placeholder="E-mail" required>
         </div>
         <div class="mb-4">
-            <select class="w-64 h-8 border rounded-lg border-gray-300 pl-3" formControlName="connection" name="connection" placeholder="Vinculo" required>
-              <option value="ALUNO">Aluno</option>
-              <option value="PROFESSOR">Professor</option>
-              <option value="COMUNIDADE-ACADEMICA">Comunidade Acadêmica</option>
-              <option value="EXTERNO">Externo</option>
-            </select>
+            <p-dropdown [style]="{width: '16rem',
+            height: '2.25rem',
+            textAlign: 'justify',
+            alignItems: 'center',
+            display: 'flex'}" [options]="vinculo" optionLabel="name" formControlName="connection" [showClear]="true" placeholder="Vinculo"></p-dropdown>
           </div>
           <div class="mb-4">
-            <input class="w-64 h-8 border rounded-lg border-gray-300 pl-4" type="password" formControlName="password" name="password" placeholder="Senha (6 números)" required>
+            <input pInputText class="w-64 h-8 border rounded-lg border-gray-300 pl-4" type="password" formControlName="password" name="password" placeholder="Senha (6 números)" required>
           </div>
           <div class="mb-4">
-            <input class="w-64 h-8 border rounded-lg border-gray-300 pl-4" type="password" formControlName="confirmPassword" name="confirmPassword" placeholder="Confirmar senha" required>
+            <input pInputText class="w-64 h-8 border rounded-lg border-gray-300 pl-4" type="password" formControlName="confirmPassword" name="confirmPassword" placeholder="Confirmar senha" required>
           </div>
         <button class="w-24 h-8 bg-blue-brand rounded-lg justify-center my-8 text-white" type="submit">Cadastrar</button>
       </form>

diff --git a/src/app/pages/register/register.component.spec.ts b/src/app/pages/register/register.component.spec.ts
@@ -6,6 +6,8 @@ import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { of, throwError } from 'rxjs';
 import { RouterTestingModule } from '@angular/router/testing';
 import { ActiveAccountComponent } from '../active-account/active-account.component';
+import { AlertService } from 'src/app/services/alert.service';
+import { DropdownModule } from 'primeng/dropdown';
 
 const mockData: any = {
   "name": "Mario",
@@ -22,28 +24,37 @@ class AuthServiceMock {
   }
 }
 
+class AlertServiceMock {
+  constructor() { }
+  showMessage() {
+    return of({ success: true });
+  }
+}
+
 describe('RegisterComponent', () => {
   let component: RegisterComponent;
   let fixture: ComponentFixture<RegisterComponent>;
   let authService: AuthService;
+  let alertService: AlertService;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule, ReactiveFormsModule,
+      imports: [HttpClientTestingModule, ReactiveFormsModule, DropdownModule,
         RouterTestingModule.withRoutes(
           [
             { path: 'activateAccount', component: ActiveAccountComponent },
           ]
         )
       ],
-      providers: [{ provide: AuthService, useValue: new AuthServiceMock() }, FormBuilder],
+      providers: [{ provide: AuthService, useValue: new AuthServiceMock() }, FormBuilder, {provide: AlertService, useValue: new AlertServiceMock()}],
       declarations: [RegisterComponent]
     })
       .compileComponents();
 
     fixture = TestBed.createComponent(RegisterComponent);
     component = fixture.componentInstance;
     authService = TestBed.inject(AuthService);
+    alertService = TestBed.inject(AlertService);
     fixture.detectChanges();
   });
 
@@ -70,19 +81,6 @@ describe('RegisterComponent', () => {
     expect(component.register).toHaveBeenCalled();
   });
 
-  it('should call alert when form is not valid', () => {
-    spyOn(component, 'register').and.callThrough();
-    const alertSpy = spyOn(window, 'alert');
-    fixture.detectChanges();
-
-    const submitButton = fixture.nativeElement.querySelector(
-      'button[type="submit"]'
-    );
-    submitButton.click();
-
-    expect(alertSpy).toHaveBeenCalledWith('Preencha todos os campos corretamente!');
-  });
-
   it('should call register and return an error', () => {
     fixture.detectChanges();
     const form = component.userForm;
@@ -92,4 +90,13 @@ describe('RegisterComponent', () => {
     expect(mySpy).toHaveBeenCalled();
   });
 
+  // it('test AlertService', () => {
+  //   fixture.detectChanges();
+  //   const form = component.userForm;
+  //   form.setValue(mockData);
+  //   const mySpy = spyOn(alertService, 'showMessage').and.callThrough();
+  //   component.register();
+  //   expect(mySpy).toHaveBeenCalled();
+  // });
+
 });