177.1. Test reset password (#25)

support-portal-frontend/src/app/component/user/user.component.html

@@ -14,16 +14,16 @@
   <nav class="navbar navbar-expand-md breadcrumb">
     <div class="collapse navbar-collapse" id="navbarCollapse">
       <div class="nav nav-pills">
-        <a class="nav-item nav-link active ml-1" (click)="changeTitle('Users')" data-toggle="tab">
+        <a class="nav-item nav-link active ml-1" (click)="changeTitle('Users')" data-bs-toggle="tab" href="#users">
           <i class="fa fa-users"></i>
           Users
         </a>
-        <a class="nav-item nav-link ml-3" (click)="changeTitle('Settings')" data-toggle="tab">
+        <a class="nav-item nav-link ml-3" (click)="changeTitle('Settings')" data-bs-toggle="tab" href="#reset-password">
           <i class="fa fa-cogs"></i>
           Settings
         </a>
-        <a class="nav-item nav-link move-right mr-3" (click)="changeTitle('Profile')" data-toggle="tab">
+        <a class="nav-item nav-link move-right mr-3" (click)="changeTitle('Profile')" data-bs-toggle="tab" href="#profile">
-          Welcome,
+          Welcome, You ugly animal
           <i class="fa fa-user"></i>
         </a>
       </div>
@@ -97,6 +97,27 @@
     <button [hidden]="true" type="button" id="openUserEdit" data-bs-toggle="modal" data-bs-target="#editUserModal">
     </button>
 
+    <!-- change password  -->
+    <div class="tab-pane fade" id="reset-password">
+      <form #resetPasswordForm="ngForm" (ngSubmit)="onResetPassword(resetPasswordForm)">
+        <fieldset>
+          <legend>User Password Management</legend>
+          <div class="form-group">
+            <label for="exampleInputEmail1">Email address</label>
+            <input type="email" name="reset-password-email" required ngModel class="form-control"
+                   placeholder="Enter email (example@email.com)">
+            <small class="form-text text-muted">We'll never share your email with anyone else.</small>
+          </div>
+          <button type="submit" [disabled]="resetPasswordForm.invalid" class="btn btn-primary">
+            <i *ngIf="refreshing" class="fas fa-spinner fa-spin"></i>&nbsp;&nbsp;
+            <span *ngIf="refreshing">Loading...</span>
+            <span *ngIf="!refreshing">Reset Password</span>
+          </button>
+        </fieldset>
+      </form>
+    </div>
+
+
     <!-- modal user info -->
     <div *ngIf="selectedUser" class="modal fade bd-example-modal-lg" id="viewUserModal" tabindex="-1" role="dialog"
          aria-labelledby=""

support-portal-frontend/src/app/component/user/user.component.ts

@@ -76,7 +76,11 @@ export class UserComponent implements OnInit, OnDestroy {
   }
 
   private sendErrorNotification(message: string) {
-    this.notificationService.notify(NotificationType.ERROR, message ? message : 'An error occurred. Please try again')
+    this, this.sendNotification(NotificationType.ERROR, message);
+  }
+
+  private sendNotification(type: NotificationType, message: string) {
+    this.notificationService.notify(type, message ? message : 'An error occurred. Please try again')
   }
 
   public onAddNewUser(userForm: NgForm): void {
@@ -172,14 +176,15 @@ export class UserComponent implements OnInit, OnDestroy {
 
   public onResetPassword(emailForm: NgForm): void {
     this.refreshing = true;
-    let email = emailForm.value[''];
+    let email = emailForm.value['reset-password-email'];
     let subscription = this.userService.resetPassword(email)
       .subscribe(
         (response: CustomHttpResponse) => {
           this.notificationService.notify(NotificationType.SUCCESS, response.message);
         },
         (errorResponse: HttpErrorResponse) => {
-          this.sendErrorNotification(errorResponse.error.message);
+          this.sendNotification(NotificationType.WARNING, errorResponse.error.message);
+          this.refreshing = false;
         },
         () => {
           this.refreshing = false;

support-portal-frontend/src/index.html

@@ -11,16 +11,10 @@
 <app-root></app-root>
 
 <!--  Bootstrap core Javascript -->
-<script src="https://code.jquery.com/jquery-3.6.0.min.js"
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
-<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
-        integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
-        integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
-        crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
-        integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
-        crossorigin="anonymous"></script>
 
 </body>
 </html>