Fix HTML error with angular foreach

src/MistoxWebsite.Client/src/app/pages/account/forgotpassword/forgotpassword.component.html

@@ -15,7 +15,7 @@
     </div>
   </div>
 
-  <ul *ngFor="let msg of errorMsgs" >
-    <li>{{ msg }}</li>
+  <ul *ngIf="errorMsgs.length > 0" >
+    <li *ngFor="let msg of errorMsgs" >{{ msg }}</li>
   </ul>
 </form>

src/MistoxWebsite.Client/src/app/pages/account/forgotpassword/forgotpassword.component.ts

@@ -15,17 +15,13 @@ export class ForgotPasswordComponent {
   errorMsgs: string[] = [];
   returnURL: string = '/';
 
-  constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, private changeDetector: ChangeDetectorRef ) {
+  constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title) {
     this.title.setTitle("Forgot Password | Mistox");
     this.route.queryParams.subscribe(params => {
       this.returnURL = params['returnURL'] || '/';
     });
   }
 
-  sleep(ms: number) {
-    return new Promise(resolve => setTimeout(resolve, ms));
-  }
-
   onSubmit() {
     // Clear errors
     this.errorMsgs = [];
@@ -38,15 +34,12 @@ export class ForgotPasswordComponent {
         'Content-Type': 'application/x-www-form-urlencoded'
     });
     this.http.post<string>( "https://mistox.com/api/account/sendresetpassword", body, { headers } ).subscribe({
-        next: async (data) => {
+        next: (data) => {
             if (data.trim() == "Success"){
               this.errorMsgs = ["Reset password send"];
-              this.changeDetector.detectChanges();
-              await this.sleep(3000);
-              this.router.navigate([this.returnURL]);
+              setTimeout(() => { this.router.navigate([this.returnURL]); }, 3000);
             }else{
               this.errorMsgs = [data];
-              this.changeDetector.detectChanges();
             }
         },
         error: err => {

src/MistoxWebsite.Client/src/app/pages/account/login/login.component.html

@@ -27,7 +27,7 @@
     </div>
   </div>
 
-  <ul *ngFor="let msg of errorMsgs" >
-    <li>{{ msg }}</li>
+  <ul *ngIf="errorMsgs.length > 0" >
+    <li *ngFor="let msg of errorMsgs" >{{ msg }}</li>
   </ul>
 </form>

src/MistoxWebsite.Client/src/app/pages/account/register/register.component.html

@@ -27,7 +27,7 @@
         </div>
     </div>
 
-    <ul *ngFor="let msg of errorMsgs" >
-        <li>{{ msg }}</li>
+    <ul *ngIf="errorMsgs.length > 0" >
+        <li *ngFor="let msg of errorMsgs" >{{ msg }}</li>
     </ul>
 </form>

src/MistoxWebsite.Client/src/app/pages/account/resetpassword/resetpassword.component.html

@@ -21,7 +21,7 @@
     </div>
   </div>
 
-  <ul *ngFor="let msg of errorMsgs" >
-    <li>{{ msg }}</li>
+  <ul *ngIf="errorMsgs.length > 0" >
+    <li *ngFor="let msg of errorMsgs" >{{ msg }}</li>
   </ul>
 </form>

src/MistoxWebsite.Client/src/app/pages/account/resetpassword/resetpassword.component.ts

@@ -19,7 +19,7 @@ export class ResetPasswordComponent {
 
   errorMsgs: string[] = [];
   
-  constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, private changeDetector: ChangeDetectorRef  ) {
+  constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title ) {
     this.title.setTitle("Reset Password | Mistox");
     this.route.queryParams.subscribe(params => {
       this.UserName = params['UserName'] || '';
@@ -27,10 +27,6 @@ export class ResetPasswordComponent {
     });
   }
 
-  sleep(ms: number) {
-    return new Promise(resolve => setTimeout(resolve, ms));
-  }
-
   onSubmit() {
 
     if (this.Password != this.PassworR){
@@ -51,17 +47,13 @@ export class ResetPasswordComponent {
           'Content-Type': 'application/x-www-form-urlencoded'
       });
       this.http.post<boolean>( "https://mistox.com/api/account/resetpassword", body, { headers } ).subscribe({
-          next: async (data) => {
+          next: (data) => {
               if (data == true){
                 this.errorMsgs = ["Password reset successfully"];
-                this.changeDetector.detectChanges();
-                await this.sleep(3000);
-                this.router.navigate(["/account/login"]);
+                setTimeout(() => { this.router.navigate(["/account/login"]); }, 3000);
               }else{
                 this.errorMsgs = ["An error has ocurred"];
-                this.changeDetector.detectChanges();
-                await this.sleep(3000);
-                this.router.navigate(["/account/sendresetpassword"]);
+                setTimeout(() => { this.router.navigate(["/account/sendresetpassword"]); }, 3000);
               }
           },
           error: err => {