correcciones

src/app/components/confirm-account/confirm-account.component.html

@@ -161,8 +161,16 @@
                 {{ errorMessage }}
               </h3>
 
+              <div *ngIf="sendOtherToken">
+                <div class="tokenExpired">
+                  <a class="btn btn-primary" (click)="getNewToken()">
+                    Enviar nuevo correo de confirmación
+                  </a>
+                </div>
+              </div>
+
               <div *ngIf="userActivated">
-                <a class="btn btn-primary" [routerLink]="['/login']">
+                <a class="btn btn-secondary" [routerLink]="['/login']">
                   Ir a inicio de sesion
                 </a>
               </div>

src/app/components/confirm-account/confirm-account.component.scss

@@ -44,7 +44,7 @@
 }
 
 .auth-main::before {
-  content: '';
+  content: "";
   position: absolute;
   left: 0;
   top: 0;
@@ -55,7 +55,7 @@
 }
 
 .auth-main:after {
-  content: '';
+  content: "";
   position: absolute;
   right: 0;
   top: 0;
@@ -68,17 +68,18 @@
 
 .card {
   background: #fff;
-  transition: .5s;
+  transition: 0.5s;
   border: 0;
   margin-bottom: 30px;
-  border-radius: .55rem;
+  border-radius: 0.55rem;
   position: relative;
   width: 100%;
-  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
 }
 
 .tokenError,
-.tokenSuccess {
+.tokenSuccess,
+.tokenExpired {
   padding: 40px 20px;
   text-align: center;
   margin-bottom: 20px;
@@ -93,6 +94,10 @@
   color: #4caf50;
 }
 
+.tokenExpired {
+  color: white;
+}
+
 h3 {
   font-size: 1.6rem;
   margin-bottom: 30px;
@@ -100,14 +105,13 @@ h3 {
 
 @media screen and (max-width: 640px) {
   .auth-box {
-      width: 90%;
+    width: 90%;
   }
 }
 
 @media screen and (max-width: 992px) {
   .auth-box {
-      width: 80%;
-      margin: 0 auto;
+    width: 80%;
+    margin: 0 auto;
   }
 }
-

src/app/components/confirm-account/confirm-account.component.ts

@@ -25,6 +25,7 @@ export class ConfirmAccountComponent implements OnInit {
   submitted: boolean = false;
   showDetails: boolean;
   customer: boolean;
+  sendOtherToken: boolean;
 
   constructor(
     private formBuilder: FormBuilder,
@@ -41,6 +42,13 @@ export class ConfirmAccountComponent implements OnInit {
 
   ngOnInit() {
     if (this.token !== null) {
+      Swal.fire({
+        allowOutsideClick: false,
+        type: "info",
+        text: "Espere por favor...",
+      });
+      Swal.showLoading();
+
       this.userService
         .validateUserToken({
           token: this.token,
@@ -48,6 +56,8 @@ export class ConfirmAccountComponent implements OnInit {
         })
         .subscribe(
           (res) => {
+            this.sendOtherToken = false;
+
             let userData = res["data"].user;
             console.log(userData);
             this.validToken = true;
@@ -62,17 +72,20 @@ export class ConfirmAccountComponent implements OnInit {
                 })
                 .subscribe(
                   (res) => {
+                    Swal.close();
                     this.successActivation = true;
                     this.validToken = false;
                     this.activateMessage =
                       "Su cuenta ha sido activada exitosamente";
                   },
                   (err) => {
+                    Swal.close();
                     this.validToken = false;
                     this.errorMessage = err.message;
                   }
                 );
             } else {
+              Swal.close();
               this.activateForm = this.formBuilder.group(
                 {
                   // Load information
@@ -96,17 +109,47 @@ export class ConfirmAccountComponent implements OnInit {
             }
           },
           (err) => {
+            Swal.close();
             this.userActivated = true;
             this.invalidToken = true;
+            this.sendOtherToken = true;
+
             this.errorMessage = err.message;
           }
         );
     } else {
+      Swal.close();
       this.invalidToken = true;
       this.errorMessage = "No existe el token";
     }
   }
 
+  getNewToken() {
+    Swal.fire({
+      allowOutsideClick: false,
+      type: "info",
+      text: "Espere por favor...",
+    });
+    this.userService
+      .sendAnotherToken({
+        token: this.token,
+      })
+      .subscribe(
+        (res) => {
+          Swal.close();
+          this.successActivation = true;
+          this.validToken = false;
+          this.invalidToken = false;
+          this.activateMessage = "Se ha enviado otro correo de activación";
+        },
+        (err) => {
+          Swal.close();
+          this.validToken = false;
+          this.errorMessage = err.message;
+        }
+      );
+  }
+
   get f() {
     return this.activateForm.controls;
   }

src/app/services/user.service.ts

@@ -130,6 +130,17 @@ export class UserService {
       );
   }
 
+  sendAnotherToken(user: { token: string }): Observable<boolean> {
+    return this.http
+      .post<any>(`${environment.productionApiUrl}/user/refresh-token`, user)
+      .pipe(
+        map((response) => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
   activateUser(user: {
     first_name: string;
     last_name: string;