Finnish step 2 of reset password

src/MistoxWebsite.Client/src/app/app.routes.ts

@@ -7,11 +7,13 @@ import { CatalogComponent } from './pages/store/catalog/catalog.component';
 import { AboutComponent } from './pages/legal/about/about.component';
 import { SettingsComponent } from './pages/account/settings/settings.component';
 import { LogoutComponent } from './pages/account/logout/logout.component';
+import { ResetPasswordComponent } from './pages/account/resetpassword/resetpassword.component';
 
 export const routes: Routes = [
 
     // Account stuff
     { path: "account/forgotpassword", component: ForgotPasswordComponent },
+    { path: "account/resetpassword", component: ResetPasswordComponent },
     { path: "account/login", component: LoginComponent },
     { path: "account/logout", component: LogoutComponent },
     { path: "account/register", component: RegisterComponent },

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

@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { FormsModule } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
-import { Account } from '../../../models/Account';
 import { Title } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
 
@@ -38,15 +37,15 @@ export class ForgotPasswordComponent {
     const headers = new HttpHeaders({
         'Content-Type': 'application/x-www-form-urlencoded'
     });
-    this.http.post<Account>( "https://mistox.com/api/account/sendresetpassword", body, { headers } ).subscribe({
+    this.http.post<string>( "https://mistox.com/api/account/sendresetpassword", body, { headers } ).subscribe({
         next: async (data) => {
-            if (data.error.length === 0){
+            if (data == "Success"){
               this.errorMsgs = ["Reset password send"];
               await this.sleep(3000);
               this.router.navigate([this.returnURL]);
             }else{
               this.errorMsgs = [];
-              this.errorMsgs.push(data.error);
+              this.errorMsgs.push(data);
             }
         },
         error: err => {

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

@@ -0,0 +1,27 @@
+<form class="center big-frame background-border" #accountForm="ngForm" (ngSubmit)="onSubmit()">
+
+  <h3>Reset Password</h3>
+  <h2>User: {{ UserName }}</h2>
+
+  <div class="frame-item">
+    <input type="password" [(ngModel)]="Password" name="Password" placeholder=" " />
+    <label>New Password</label>
+  </div>
+
+  <div class="frame-item">
+    <input type="password" [(ngModel)]="PassworR" name="Password" placeholder=" " />
+    <label>Repeat New Password</label>
+  </div>
+
+  <div>
+    <div class="flex-row">
+      <div class="frame-button">
+        <input class="submit" type="submit" value="Send Code" />
+      </div>
+    </div>
+  </div>
+
+  <ul *ngFor="let msg of errorMsgs" >
+    <li>{{ msg }}</li>
+  </ul>
+</form>

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

@@ -0,0 +1,70 @@
+import { Component } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
+import { Title } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'account-reset',
+  templateUrl: './resetpassword.component.html',
+  imports: [ FormsModule, CommonModule ]
+})
+export class ResetPasswordComponent {
+  
+  UserName: string = "";
+  ResetPwd: string = "";
+  Password: string = "";
+  PassworR: string = "";
+
+  errorMsgs: string[] = [];
+  
+  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'] || '';
+      this.ResetPwd = params['ResetPwd'] || '';
+    });
+  }
+
+  sleep(ms: number) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+  onSubmit() {
+
+    if (this.Password != this.PassworR){
+      this.errorMsgs.push("Passwords must match");
+    }
+    if (this.Password.length < 6){
+      this.errorMsgs.push("Password must be at least 6 Characters long");
+    }
+    if (this.errorMsgs.length == 0){
+
+      // Send to server and wait for response
+      this.errorMsgs.push("Waiting for login response from server");
+      const body = new HttpParams()
+        .set("UserName", this.UserName)
+        .set("NewPassword", this.Password)
+        .set("ResetToken", this.ResetPwd);
+      const headers = new HttpHeaders({
+          'Content-Type': 'application/x-www-form-urlencoded'
+      });
+      this.http.post<string>( "https://mistox.com/api/account/sendresetpassword", body, { headers } ).subscribe({
+          next: async (data) => {
+              if (data == "true"){
+                this.errorMsgs = ["Password reset successfully"];
+                await this.sleep(3000);
+                this.router.navigate(["/account/login"]);
+              }else{
+                this.errorMsgs = [];
+                this.errorMsgs.push(data);
+              }
+          },
+          error: err => {
+              console.log("HTTP Error Signing In: ", err);
+          }
+      });
+    }
+  }
+}