31.4. Settings Component Base Implementation (#31)

support-portal-frontend/src/app/component/management/settings/settings.component.html

@@ -1 +1,20 @@
-<p>settings works!</p>
+<!-- change password  -->
+<div *ngIf="isAdmin" class="tab-pane fade show active" id="reset-password">
+  <form #resetPasswordForm="ngForm" (ngSubmit)="onResetPassword(resetPasswordForm)">
+    <fieldset>
+      <legend>User Password Management</legend>
+      <div class="form-group">
+        <label for="email">Email address</label>
+        <input type="email" name="reset-password-email" required ngModel class="form-control"
+               id="email"
+               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>{{refreshing ? 'Loading...' : 'Reset Password'}}</span>
+      </button>
+    </fieldset>
+  </form>
+</div>
+

support-portal-frontend/src/app/component/management/settings/settings.component.ts

@@ -1,15 +1,56 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {AuthenticationService} from "../../../service/authentication.service";
+import {NgForm} from "@angular/forms";
+import {CustomHttpResponse} from "../../../dto/custom-http-response";
+import {NotificationType} from "../../../notification/notification-type";
+import {HttpErrorResponse} from "@angular/common/http";
+import {SubSink} from "subsink";
+import {UserService} from "../../../service/user.service";
+import {NotificationService} from "../../../service/notification.service";
 
 @Component({
   selector: 'app-settings',
   templateUrl: './settings.component.html',
   styleUrls: ['./settings.component.css']
 })
-export class SettingsComponent implements OnInit {
+export class SettingsComponent implements OnInit, OnDestroy {
 
-  constructor() { }
+  public refreshing: boolean = false;
+
+  private subs = new SubSink();
+
+  constructor(private userService: UserService,
+              private notificationService: NotificationService,
+              private authenticationService: AuthenticationService) {
+  }
 
   ngOnInit(): void {
   }
 
+  ngOnDestroy(): void {
+    this.subs.unsubscribe();
+  }
+
+  public get isAdmin(): boolean {
+    return this.authenticationService.isLoggedUserHasRoleAdmin();
+  }
+
+  public onResetPassword(emailForm: NgForm): void {
+    this.refreshing = true;
+    let email = emailForm.value['reset-password-email'];
+    this.subs.sink = this.userService.resetPassword(email)
+      .subscribe(
+        (response: CustomHttpResponse) => {
+          this.notificationService.notify(NotificationType.SUCCESS, response.message);
+        },
+        (errorResponse: HttpErrorResponse) => {
+          this.notificationService.notify(NotificationType.WARNING, errorResponse.error.message);
+          this.refreshing = false;
+        },
+        () => {
+          this.refreshing = false;
+          emailForm.reset();
+        }
+      );
+  }
 }

support-portal-frontend/src/app/service/authentication.service.ts

@@ -5,6 +5,7 @@ import {UserLogin} from "../dto/user-login";
 import {Observable} from "rxjs";
 import {User} from "../model/user";
 import {JwtHelperService} from "@auth0/angular-jwt";
+import {Role} from "../enum/role.enum";
 
 @Injectable({
   providedIn: 'root'
@@ -16,7 +17,8 @@ export class AuthenticationService {
 
   private host: string = environment.apiUrl;
   private token: string | null;
-  private loggedInUser: string | null;
+  private loggedInUserName: string | null;
+  private loggedInUser: User | null;
   private storage = localStorage;
 
   //first install this module: `npm install @auth0/angular-jwt`
@@ -37,7 +39,7 @@ export class AuthenticationService {
 
   public logout(): void {
     this.token = null;
-    this.loggedInUser = null;
+    this.loggedInUserName = null;
     this.storage.removeItem(this.JWT_TOKEN_STORAGE_KEY);
     this.storage.removeItem(this.USER_STORAGE_KEY);
     this.storage.removeItem("users");
@@ -71,7 +73,7 @@ export class AuthenticationService {
       let subject = this.jwtHelper.decodeToken(this.token).sub;
       if (subject != null || '') {
         if (!this.jwtHelper.isTokenExpired(this.token!)) {
-          this.loggedInUser = subject;
+          this.loggedInUserName = subject;
           return true;
         }
       }
@@ -80,4 +82,11 @@ export class AuthenticationService {
     return false;
   }
 
+  public isLoggedUserHasRoleAdmin(): boolean {
+    if (!this.loggedInUser)
+      this.loggedInUser = this.getUserFromLocalStorage();
+    return this.loggedInUser.role === Role.ADMIN || this.loggedInUser.role === Role.SUPER_ADMIN;
+  }
+
+
 }