style(Auth): 🎨 login, reset-password pages redesign

.vscode/settings.json

@@ -11,5 +11,5 @@
     },
     "editor.formatOnSave": false
   },
-  "conventionalCommits.scopes": ["Backoffice", "Web", "CV", "GenericTable"]
+  "conventionalCommits.scopes": ["Backoffice", "Web", "CV", "GenericTable", "Auth"]
 }

src/app/app-routing.module.ts

@@ -1,36 +1,37 @@
 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
-import { FormularioRecuperacionComponent } from './backoffice/autentificacion/formulario-recuperacion/formulario-recuperacion.component';
-import { LoginSuccessComponent } from './backoffice/autentificacion/login-success/login-success.component';
-import { LoginComponent } from './backoffice/autentificacion/login/login.component';
-import { RecuperarPasswordComponent } from './backoffice/autentificacion/recuperar-password/recuperar-password.component';
+import {
+  FormResetPasswordComponent,
+  formResetPasswordTitleResolver,
+} from './backoffice/autentificacion/form-reset-password/form-reset-password.component';
+import { LoginComponent, loginTitleResolver } from './backoffice/autentificacion/login/login.component';
+import {
+  ResetPasswordComponent,
+  resetPasswordTitleResolver,
+} from './backoffice/autentificacion/reset-password/reset-password.component';
 import { AuthGuard } from './shared/guards/auth.guard';
 
 const routes: Routes = [
   {
     path: '',
     canActivate: [],
-    loadChildren: () =>
-      import('./website/website.module').then((m) => m.WebsiteModule),
+    loadChildren: () => import('./website/website.module').then((m) => m.WebsiteModule),
   },
   {
     path: 'backoffice',
-    loadChildren: () =>
-      import('./backoffice/layout/backoffice/backoffice.module').then(
-        (m) => m.BackofficeModule,
-      ),
+    loadChildren: () => import('./backoffice/layout/backoffice/backoffice.module').then((m) => m.BackofficeModule),
     canActivate: [AuthGuard],
   },
-  { path: 'login', component: LoginComponent },
-  { path: 'login-success', component: LoginSuccessComponent },
-  { path: 'reset-password', component: RecuperarPasswordComponent },
+  { path: 'login', component: LoginComponent, title: loginTitleResolver },
+  { path: 'reset-password', component: ResetPasswordComponent, title: resetPasswordTitleResolver },
   {
     path: 'form-reset-password',
-    component: FormularioRecuperacionComponent,
+    component: FormResetPasswordComponent,
+    title: formResetPasswordTitleResolver,
   },
   {
     path: 'form-reset-password/:access_token/',
-    component: FormularioRecuperacionComponent,
+    component: FormResetPasswordComponent,
   },
   {
     path: '**',

src/app/app.module.ts

@@ -16,10 +16,9 @@ import { InputTextModule } from 'primeng/inputtext';
 import { ToastModule } from 'primeng/toast';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { FormularioRecuperacionComponent } from './backoffice/autentificacion/formulario-recuperacion/formulario-recuperacion.component';
-import { LoginSuccessComponent } from './backoffice/autentificacion/login-success/login-success.component';
+import { FormResetPasswordComponent } from './backoffice/autentificacion/form-reset-password/form-reset-password.component';
 import { LoginComponent } from './backoffice/autentificacion/login/login.component';
-import { RecuperarPasswordComponent } from './backoffice/autentificacion/recuperar-password/recuperar-password.component';
+import { ResetPasswordComponent } from './backoffice/autentificacion/reset-password/reset-password.component';
 import { BackofficeModule } from './backoffice/layout/backoffice/backoffice.module';
 import { LanguageSelectModule } from './shared/components/language-select/language-select.module';
 import { LanguagesModule } from './shared/modules/languages.module';
@@ -30,13 +29,7 @@ export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http, './assets/i18n/');
 }
 @NgModule({
-  declarations: [
-    AppComponent,
-    LoginComponent,
-    LoginSuccessComponent,
-    FormularioRecuperacionComponent,
-    RecuperarPasswordComponent,
-  ],
+  declarations: [AppComponent, LoginComponent, FormResetPasswordComponent, ResetPasswordComponent],
   providers: [MessageService, ConfirmationService, PrimeNGConfig],
   bootstrap: [AppComponent],
   imports: [

src/app/backoffice/autentificacion/form-reset-password/form-reset-password.component.html

@@ -0,0 +1,52 @@
+<div class="p-3 auth-main-container">
+  <div class="flex align-items-center justify-content-start">
+    <app-language-select></app-language-select>
+  </div>
+  <div class="flex align-items-center justify-content-center">
+    <div class="auth-container p-fluid">
+      <div class="grid">
+        <div class="col-9 pl-3">
+          <h3>{{ 'pages.form-reset-password.title' | translate }}</h3>
+        </div>
+      </div>
+      <form [formGroup]="form" (ngSubmit)="onSubmit()">
+        <div class="p-fluid">
+          <div class="xs:col-12 lg:col-12 pt-1">
+            <span class="p-float-label">
+              <input pInputText name="password" type="password" formControlName="password" />
+              <label for="password">{{ 'columns.newPassword' | translate }}</label>
+            </span>
+          </div>
+          <div class="xs:col-12 lg:col-12 pt-1">
+            <span class="p-float-label">
+              <input pInputText name="repeat_password" type="password" formControlName="repeat_password" />
+              <label for="repeat_password">{{ 'columns.repeatNewPassword' | translate }}</label>
+            </span>
+          </div>
+          <div class="xs:col-12 lg:col-12">
+            <div>
+              <button
+                *ngIf="!loading"
+                [disabled]="form.invalid"
+                pButton
+                type="submit"
+                [label]="'buttons.resetPassword' | translate"
+                icon="ui-icon-person"
+                style="width: 100%"
+              ></button>
+              <button
+                *ngIf="loading"
+                [disabled]="form.invalid"
+                pButton
+                type="submit"
+                [label]="'buttons.resetPassword' | translate"
+                icon="pi pi-spin pi-spinner"
+                style="width: 100%"
+              ></button>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>

src/app/backoffice/autentificacion/form-reset-password/form-reset-password.component.scss

@@ -0,0 +1 @@
+@import '../styles/auth-styles.scss';

src/app/backoffice/autentificacion/formulario-recuperacion/formulario-recuperacion.component.ts → src/app/backoffice/autentificacion/form-reset-password/form-reset-password.component.ts

@@ -1,17 +1,29 @@
 import { ChangeDetectionStrategy, Component, OnInit, inject } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, ActivatedRouteSnapshot, ResolveFn, Router, RouterStateSnapshot } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { MessageService } from 'primeng/api';
+import { map } from 'rxjs';
+import { appRootTitle } from 'src/app/app.component';
 import { AuthService } from 'src/app/shared/services/auth.service';
 
+export const formResetPasswordTitleResolver: ResolveFn<string> = (
+  route: ActivatedRouteSnapshot,
+  state: RouterStateSnapshot,
+) => {
+  const translateSrv = inject(TranslateService);
+  return translateSrv
+    .get('pages.form-reset-password.title')
+    .pipe(map((title) => `${appRootTitle} | Form Reset Password`));
+};
+
 @Component({
-  selector: 'app-formulario-recuperacion',
-  templateUrl: './formulario-recuperacion.component.html',
-  styleUrls: ['./formulario-recuperacion.component.scss'],
+  selector: 'app-form-reset-password',
+  templateUrl: './form-reset-password.component.html',
+  styleUrls: ['./form-reset-password.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FormularioRecuperacionComponent implements OnInit {
+export class FormResetPasswordComponent implements OnInit {
   private messageSrv = inject(MessageService);
   private fb = inject(FormBuilder);
   private route = inject(ActivatedRoute);
@@ -24,7 +36,6 @@ export class FormularioRecuperacionComponent implements OnInit {
   token: string;
   loading: boolean = false;
   errores: string[] = [];
-  // logoUrl: string = environment.logo;
 
   res: string;
 
@@ -39,7 +50,7 @@ export class FormularioRecuperacionComponent implements OnInit {
     });
   }
 
-  async recuperar() {
+  async onSubmit() {
     if (this.form.invalid) {
       return;
     }