Añadida la funcionalidad de recuperar la contraseña

src/app/mi-cuenta/cuenta.module.ts

@@ -14,7 +14,6 @@ import { DatosPagoComponent } from './perfil-cuenta/datos-pago/datos-pago.compon
 import { ResumenPedidoComponent } from './perfil-cuenta/pedidos/resumen-pedido/resumen-pedido.component';
 import { AppRoutingModule } from '../app-routing.module';
 import { RegistroCompletoComponent } from './registro-completo/registro-completo.component';
-import { AnimatedIconsModule } from '../shared/animated-icons/animated-icons.module';
 import { PedidoResumenPerfilComponent } from './perfil-cuenta/pedidos/pedido-resumen-perfil/pedido-resumen-perfil.component';
 import { CerrarSesionComponent } from './perfil-cuenta/cerrar-sesion/cerrar-sesion.component';
 import { PedidoPerfilComponent } from './perfil-cuenta/pedidos/pedido-perfil/pedido-perfil.component';
@@ -23,13 +22,7 @@ import { RestablecerPasswordComponent } from './inicio-sesion-registro/restablec
 import { ContrasenaOlvidadaComponent } from './inicio-sesion-registro/contrasena-olvidada/contrasena-olvidada.component';
 
 @NgModule({
-  imports: [
-    CommonModule,
-    ProgressSpinnerModule,
-    FormsModule,
-    AppRoutingModule,
-    AnimatedIconsModule,
-  ],
+  imports: [CommonModule, ProgressSpinnerModule, FormsModule, AppRoutingModule],
   declarations: [
     InicioSesionRegistroComponent,
     CompletarRegistroComponent,

src/app/mi-cuenta/inicio-sesion-registro/contrasena-olvidada/contrasena-olvidada.component.html

-<p>contrasena-olvidada works!</p>
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      <h3 class="verde-tienda mt-5">Recuperar contraseña</h3>
+    </div>
+  </div>
+  <div class="row card">
+    <div class="col-12">
+      <h5 class="mt-3">Introduzca su correo electrónico</h5>
+      <input type="text" class="form-control" [(ngModel)]="email" />
+      <button
+        class="btn btn-primary bg-fucsia border-white mt-3 mb-3"
+        (click)="recuperarPassword()"
+      >
+        Recuperar contraseña
+      </button>
+      <div class="row">
+        <div class="col">
+          <p *ngIf="envioCorrecto" class="alert alert-success mt-4">
+            Si el correo introducido está registrado en nuestra tienda, recibirá
+            un correo electrónico para restablecer la contraseña. <br />
+            Compruebe su bandeja de entrada.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/mi-cuenta/inicio-sesion-registro/contrasena-olvidada/contrasena-olvidada.component.ts

 import { Component, OnInit } from '@angular/core';
+import { AuthService } from 'src/app/shared/services/auth.service';
 
 @Component({
   selector: 'app-contrasena-olvidada',
   templateUrl: './contrasena-olvidada.component.html',
-  styleUrls: ['./contrasena-olvidada.component.css']
+  styleUrls: ['./contrasena-olvidada.component.css'],
 })
 export class ContrasenaOlvidadaComponent implements OnInit {
+  envioCorrecto = false;
+  email = '';
 
-  constructor() { }
+  constructor(private authService: AuthService) {}
 
-  ngOnInit(): void {
-  }
+  ngOnInit(): void {}
 
+  recuperarPassword() {
+    this.authService.forgotPassword(this.email).then((res) => {
+      console.log(res);
+      this.envioCorrecto = true;
+    });
+  }
 }

src/app/mi-cuenta/inicio-sesion-registro/inicio-sesion-registro.component.html

@@ -61,7 +61,12 @@
         <div class="row d-flex">
           <div class="pt-4">
             <label>¿Has olvidado la contraseña? => </label>
-            <a href="" class="text-right fucsia ps-1">Restablecer contraseña</a>
+            <a
+              routerLink="/forgotPassword"
+              routerLinkActive="active"
+              class="text-right fucsia ps-1"
+              >Restablecer contraseña</a
+            >
           </div>
         </div>
 

src/app/mi-cuenta/inicio-sesion-registro/restablecer-password/restablecer-password.component.html

-<p>restablecer-cpassword works!</p>
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      <h3 class="verde-tienda mt-5">Restablecer Contraseña</h3>
+    </div>
+  </div>
+  <div class="row card">
+    <div class="col-12">
+      <h5 class="mt-3">Introduzca su nueva contraseña</h5>
+      <input
+        type="password"
+        class="form-control"
+        [(ngModel)]="password1"
+        (focus)="passwordDistintas = false"
+      />
+      <h5 class="mt-3">Repita su nueva contraseña</h5>
+      <input
+        type="password"
+        class="form-control"
+        [(ngModel)]="password2"
+        (focus)="passwordDistintas = false"
+      />
+      <button
+        class="btn btn-primary bg-fucsia border-white mt-3 mb-3"
+        (click)="resetPassword()"
+      >
+        Recuperar contraseña
+      </button>
+      <div class="row">
+        <div class="col" *ngIf="cambioCorrecto">
+          <p class="alert alert-success mt-4">
+            ¡Contraseña recuperada correctamente! Puede volver a iniciar sesión.
+          </p>
+          <button
+            class="btn btn-primary bg-fucsia border-white mt-3 mb-3"
+            routerLink="/auth"
+          >
+            Iniciar sesión
+          </button>
+        </div>
+        <div class="col" *ngIf="passwordDistintas">
+          <p class="alert alert-danger mt-4">
+            ¡Las contraseñas no coinciden! Por favor, introduzca la misma
+            contraseña en ambos recuadros.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/mi-cuenta/inicio-sesion-registro/restablecer-password/restablecer-password.component.ts

 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AuthService } from 'src/app/shared/services/auth.service';
+import { take } from 'rxjs';
 
 @Component({
   selector: 'app-restablecer-password',
@@ -6,7 +9,37 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./restablecer-password.component.css'],
 })
 export class RestablecerPasswordComponent implements OnInit {
-  constructor() {}
+  password1 = '';
+  password2 = '';
+  passwordDistintas = false;
+  cambioCorrecto = false;
+  oobCode = '';
 
-  ngOnInit(): void {}
+  constructor(
+    private authService: AuthService,
+    private route: ActivatedRoute,
+    private router: Router
+  ) {}
+
+  ngOnInit(): void {
+    this.route.queryParams.pipe(take(1)).subscribe((params) => {
+      if (!params['oobCode']) {
+        this.router.navigate(['/homepage']);
+        return;
+      }
+      this.oobCode = params['oobCode'];
+    });
+  }
+
+  resetPassword() {
+    if (this.password1 != this.password2) {
+      this.passwordDistintas = true;
+      return;
+    }
+    this.authService.resetPassword(this.oobCode, this.password1).then((res) => {
+      console.log(res);
+
+      this.cambioCorrecto = true;
+    });
+  }
 }

src/app/mi-cuenta/perfil-cuenta/cerrar-sesion/cerrar-sesion.component.html

 <div class="container">
   <h4>Cerrando Sesion</h4>
-  <app-ring-spinner></app-ring-spinner>
+  <i class="pi pi-spinner pi-spin"> </i>
 </div>

src/app/shared/animated-icons/animated-icons.module.ts

-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RingSpinnerComponent } from './ring-spinner/ring-spinner.component';
-
-@NgModule({
-  declarations: [RingSpinnerComponent],
-  imports: [CommonModule],
-  exports: [RingSpinnerComponent],
-})
-export class AnimatedIconsModule {}

src/app/shared/animated-icons/ring-spinner/ring-spinner.component.css

-.lds-ring {
-  display: inline-block;
-  position: relative;
-  width: 20px;
-  height: 20px;
-}
-.lds-ring div {
-  box-sizing: border-box;
-  display: block;
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  margin: 2px;
-  border: 2px solid #fff;
-  border-radius: 50%;
-  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: #fff transparent transparent transparent;
-}
-.lds-ring div:nth-child(1) {
-  animation-delay: -0.45s;
-}
-.lds-ring div:nth-child(2) {
-  animation-delay: -0.3s;
-}
-.lds-ring div:nth-child(3) {
-  animation-delay: -0.15s;
-}
-@keyframes lds-ring {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}

src/app/shared/animated-icons/ring-spinner/ring-spinner.component.html

-<div class="lds-ring">
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-</div>

src/app/shared/animated-icons/ring-spinner/ring-spinner.component.ts

-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-ring-spinner',
-  templateUrl: './ring-spinner.component.html',
-  styleUrls: ['./ring-spinner.component.css'],
-})
-export class RingSpinnerComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit(): void {}
-}

src/app/shared/services/auth.service.ts

@@ -6,6 +6,8 @@ import {
   updateEmail,
   UserCredential,
   signOut,
+  sendPasswordResetEmail,
+  confirmPasswordReset,
   getIdToken,
 } from '@angular/fire/auth';
 import { Usuario } from '../interfaces/usuario';
@@ -78,6 +80,13 @@ export class AuthService {
   public cambiarEmail(email: string) {
     return updateEmail(this.auth.currentUser, email);
   }
+  forgotPassword(email: string) {
+    return sendPasswordResetEmail(this.auth, email);
+  }
+  resetPassword(oobCode: string, newPassword: string) {
+    return confirmPasswordReset(this.auth, oobCode, newPassword);
+  }
+
   public loginUserWithEmail(
     email: string,
     password: string

src/app/tienda/modulo-productos/productos.module.ts

@@ -15,7 +15,6 @@ import { BreadcrumbModule } from 'primeng/breadcrumb';
 import { AppRoutingModule } from 'src/app/app-routing.module';
 import { CardProductoComponent } from './card-producto/card-producto.component';
 import { CarouselModule } from 'primeng/carousel';
-import { AnimatedIconsModule } from 'src/app/shared/animated-icons/animated-icons.module';
 
 @NgModule({
   imports: [
@@ -28,7 +27,6 @@ import { AnimatedIconsModule } from 'src/app/shared/animated-icons/animated-icon
     NgbModule,
     BreadcrumbModule,
     AppRoutingModule,
-    AnimatedIconsModule,
   ],
   declarations: [
     GridProductosComponent,