cambios en el registro

src/app/app-routing.module.ts

@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { CondicionesServicioComponent } from './condiciones-servicio/condiciones-servicio.component';
 import { ContactoComponent } from './contacto/contacto.component';
-import { CuentaComponent } from './mi-cuenta/cuenta.component';
 import { HomepageComponent } from './homepage/homepage.component';
 import { SobreNosotrosComponent } from './sobre-nosotros/sobre-nosotros.component';
 import { TiendaComponent } from './tienda/tienda.component';

src/app/mi-cuenta/completar-registro/completar-registro.component.css

 input.ng-invalid.ng-touched {
   border-color: red;
 }
+.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/mi-cuenta/completar-registro/completar-registro.component.html

@@ -3,16 +3,20 @@
     <div class="col-sm-12 d-flex flex-column">
       <label for="" class="verde-tienda mb-5 ms-4 fs-3">Registro</label>
       <form #registroForm="ngForm">
+        <div class="col-12 d-flex justify-content-center">
+          <div *ngIf="errorMessage" class="alert alert-danger" role="alert">
+            {{ errorMessage }}
+          </div>
+        </div>
         <h4 for="" class="mb-4">Datos personales</h4>
         <div class="form-floating mb-3">
           <input
             type="text"
             class="form-control"
-            placeholder="texto"
+            placeholder="nombre"
             name="nombre"
             [ngModel]="user.nombre"
             required
-            ngm
           />
           <label for="floatingInput">Nombre</label>
         </div>
@@ -64,6 +68,7 @@
             email
             [(ngModel)]="user.email"
             required
+            (focus)="errorMessage = ''"
           />
           <label for="floatingPassword">Correo electrónico</label>
         </div>
@@ -331,6 +336,7 @@
             <a href="">Terminos y condiciones</a>
           </label>
         </div>
+
         <div class="mt-3 mb-5 col-12 d-flex justify-content-center">
           <div class="col-12 d-flex justify-content-center">
             <button

src/app/mi-cuenta/completar-registro/completar-registro.component.ts

@@ -3,8 +3,10 @@ import { Component, OnChanges, OnInit } from '@angular/core';
 import { NgForm } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MenuItem } from 'primeng/api';
+import { ConnectableObservable } from 'rxjs';
 import { Usuario } from 'src/app/services-interfaces/interfaces/usuario';
 import { AuthService } from 'src/app/services-interfaces/services/auth.service';
+import { DatabaseService } from 'src/app/services-interfaces/services/database.service';
 
 @Component({
   selector: 'app-completar-registro',
@@ -13,14 +15,16 @@ import { AuthService } from 'src/app/services-interfaces/services/auth.service';
 })
 export class CompletarRegistroComponent implements OnInit {
   public user!: Usuario;
-
+  errorMessage = '';
   distintasDirecciones = false;
+  emailYaRegistrado = false;
 
   loading = false;
   constructor(
     private authService: AuthService,
     private router: Router,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private databaseService: DatabaseService
   ) {}
 
   ngOnInit(): void {
@@ -30,14 +34,34 @@ export class CompletarRegistroComponent implements OnInit {
   finalizarRegistro(form: NgForm) {
     this.loading = true;
     this.user.direccionEnvio.pais = 'España';
+    this.user.nombre = form.value.nombre;
     if (
       form.value.distintasDirecciones === 'false' ||
       form.value.distintasDirecciones === ''
     ) {
       this.user.direccionFacturacion = this.user.direccionEnvio;
     }
-    console.log(this.user);
 
+    this.authService
+      .createUserWithEmail(this.user.email, form.value.password1)
+      .subscribe(
+        (res) => {
+          this.user.uid = res.user.uid;
+          this.databaseService.createNewUser(this.user);
+          this.authService.changeLogState();
+          console.log(this.databaseService.getUserFromDatabase(this.user.uid));
           this.router.navigate(['../perfil'], { relativeTo: this.route });
+        },
+        (error) => {
+          console.log(error.message);
+          if (error.message.indexOf('auth/email-already-in-use')) {
+            this.errorMessage =
+              '!El correo electrónico introducido ya ha sido registrado por otro usuario! Por favor introduzca un nuevo.';
+          } else {
+            this.errorMessage =
+              '!Ha ocurrido un error insesperado, por favor, intentelo de nuevo.';
+          }
+        }
+      );
   }
 }

src/app/mi-cuenta/cuenta.component.html

-<router-outlet></router-outlet>

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

-import { Component, OnChanges, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { AuthService } from '../services-interfaces/services/auth.service';
-
-@Component({
-  selector: 'app-cuenta',
-  templateUrl: './cuenta.component.html',
-  styleUrls: ['./cuenta.component.css'],
-})
-export class CuentaComponent implements OnInit, OnChanges {
-  constructor(
-    private authService: AuthService,
-    private router: Router,
-    private route: ActivatedRoute
-  ) {}
-
-  ngOnInit(): void {}
-  ngOnChanges(): void {}
-}

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

@@ -12,7 +12,6 @@ import { DatosPersonalesComponent } from './perfil-cuenta/datos-personales/datos
 import { DireccionesComponent } from './perfil-cuenta/direcciones/direcciones.component';
 import { DatosPagoComponent } from './perfil-cuenta/datos-pago/datos-pago.component';
 import { ResumenPedidoComponent } from './perfil-cuenta/pedidos/resumen-pedido/resumen-pedido.component';
-import { CuentaComponent } from './cuenta.component';
 import { AppRoutingModule } from '../app-routing.module';
 
 @NgModule({
@@ -26,8 +25,7 @@ import { AppRoutingModule } from '../app-routing.module';
     DireccionesComponent,
     DatosPagoComponent,
     ResumenPedidoComponent,
-    CuentaComponent,
   ],
-  exports: [CuentaComponent],
+  exports: [],
 })
 export class CuentaModule {}

src/app/services-interfaces/interfaces/cesta.model.ts

 import { Producto } from './producto.model';
 
 export interface Cesta {
-  uid: string /* Identificador del usuario al que pertenece la cesta para poder recuperarla de BBDD */;
-  productos: [
-    { producto: string; unidades: number }
-  ] /* Array con pares producto-unidades para saber los productos que hay en la cesta y las unidades de cada uno  */;
+  productos: {
+    productoID: Producto;
+    unidades: number;
+  }[] /* Array con pares producto-unidades para saber los productos que hay en la cesta y las unidades de cada uno  */;
 }

src/app/services-interfaces/interfaces/pedido.model.ts

 export interface Pedido {
-  uid: string /* numero identificador del usuario del pedido */;
   numeroPedido: string /* numero identificativo del pedido */;
-  fechaPedido: Date /* Fecha en la que se realizó el pedido */;
+  uid: string /* numero identificador del usuario del pedido */;
+  fechaPedido: string /* Fecha en la que se realizó el pedido */;
   estadoPedido: string /* Estado actual del pedido */;
-  fechaEstimadaEntrega: Date /* Fecha aproximada de la entrega del pedido por el transportista */;
+  fechaEstimadaEntrega: string /* Fecha aproximada de la entrega del pedido por el transportista */;
   precioTotal: number /* Precio tottal del pedido, incluyendo los costes de productos y envíos */;
   costeProductos: number /* Coste total de los productos del pedido */;
   costesEnvio: number /* Costes de envío */;
@@ -16,7 +16,8 @@ export interface Pedido {
     codigoPostal: string;
     pais: string;
   };
-  productos: [
-    { productoID: string; unidades: number }
-  ] /* Array con los pares producto-unidades que se han de entregar en el pedido */;
+  productos: {
+    productoID: string;
+    unidades: number;
+  }[] /* Array con los pares producto-unidades que se han de entregar en el pedido */;
 }

src/app/services-interfaces/interfaces/producto.model.ts

 export interface Producto {
-  productoID: string;
   categoria: string;
   nombre: string;
   descripcion: string;

src/app/services-interfaces/interfaces/usuario.ts

+import { Cesta } from './cesta.model';
 import { MetodoPago } from './metodoPago.model';
 
 export class Usuario {
@@ -25,4 +26,6 @@ export class Usuario {
     pais: string;
   };
   metodosPago!: MetodoPago[];
+
+  cesta!: Cesta;
 }

src/app/services-interfaces/services/auth.service.ts

@@ -12,7 +12,7 @@ import { from, Observable } from 'rxjs';
 @Injectable()
 export class AuthService {
   isUserLogged = false;
-  public usuarioRegistro: Usuario = {
+  public user: Usuario = {
     uid: '',
     nombre: '',
     apellidos: '',
@@ -37,6 +37,9 @@ export class AuthService {
       pais: '',
     },
     metodosPago: [],
+    cesta: {
+      productos: [],
+    },
   };
   private password = '';
   constructor(private auth: Auth) {}
@@ -62,19 +65,18 @@ export class AuthService {
       email,
       password
     );
-
     return from(registerPromise);
   }
 
   public getUser(): Usuario {
-    return this.usuarioRegistro;
+    return this.user;
   }
   getPassword(): string {
     return this.password;
   }
 
   public updateUserRegistro(user: Usuario): void {
-    this.usuarioRegistro = { ...user };
+    this.user = { ...user };
   }
   public changeLogState() {
     this.isUserLogged = !this.isUserLogged;

src/app/services-interfaces/services/database.service.ts

 import { Injectable } from '@angular/core';
-import { AngularFireDatabase } from '@angular/fire/compat/database';
+import {
+  AngularFireDatabase,
+  AngularFireList,
+  AngularFireObject,
+} from '@angular/fire/compat/database';
+import { Query } from '@angular/fire/compat/firestore';
+import { Pedido } from '../interfaces/pedido.model';
+import { Producto } from '../interfaces/producto.model';
 import { Usuario } from '../interfaces/usuario';
 
 @Injectable({
   providedIn: 'root',
 })
 export class DatabaseService {
+  private usersPath = '/users';
+  private pedidosPath = '/pedidos';
+  private productosPath = '/productos';
+  private usersRef!: AngularFireList<Usuario>;
+  private userRef!: AngularFireObject<any>;
+  private pedidosRef!: AngularFireList<Pedido>;
+  private productosRef!: AngularFireList<Producto>;
   constructor(private db: AngularFireDatabase) {}
 
-  createNewUser(user: Usuario): Promise<void> {
-    const itemRef = this.db.object(user.uid);
-    return itemRef.set(user);
+  createNewUser(user: Usuario): void {
+    this.usersRef = this.db.list(this.usersPath);
+    this.usersRef.push(user);
+  }
+  getUserFromDatabase(uid: string): AngularFireObject<Usuario> {
+    return (this.userRef = this.db.object(this.usersPath + '/' + uid));
   }
 }