From 6d44e944feb2ae351bec6c79018670db001db910 Mon Sep 17 00:00:00 2001
From: Art <d.art.shishkin@gmail.com>
Date: Thu, 23 Sep 2021 10:50:35 +0300
Subject: [PATCH] 196. Modifying UI by role - Part 2 (#29)

---
 .../app/component/user/user.component.html    | 70 ++++++++++++-------
 1 file changed, 44 insertions(+), 26 deletions(-)

diff --git a/support-portal-frontend/src/app/component/user/user.component.html b/support-portal-frontend/src/app/component/user/user.component.html
index dbac8e6..cd04f99 100644
--- a/support-portal-frontend/src/app/component/user/user.component.html
+++ b/support-portal-frontend/src/app/component/user/user.component.html
@@ -19,14 +19,15 @@
           Users
         </a>
 
-<!--        Possible attacks-->
-<!--        document.getElementsByClassName('nav-item nav-link ml-3')[0].click()-->
-<!--        document.getElementsByName('reset-password-email')[0].value='d.art.shishkin@gmail.com'-->
-<!--        document.getElementsByName('reset-password-email')[0].closest('form').querySelector('button[type="submit"]').disabled=false        -->
-<!--        document.getElementsByClassName('nav-item nav-link ml-3')[0].hidden=false-->
-<!--        document.getElementById('reset-password').hidden=false-->
+        <!--        Possible attacks-->
+        <!--        document.getElementsByClassName('nav-item nav-link ml-3')[0].click()-->
+        <!--        document.getElementsByName('reset-password-email')[0].value='d.art.shishkin@gmail.com'-->
+        <!--        document.getElementsByName('reset-password-email')[0].closest('form').querySelector('button[type="submit"]').disabled=false        -->
+        <!--        document.getElementsByClassName('nav-item nav-link ml-3')[0].hidden=false-->
+        <!--        document.getElementById('reset-password').hidden=false-->
 
-        <a *ngIf="isAdmin" class="nav-item nav-link ml-3" (click)="changeTitle('Settings')" data-bs-toggle="tab" href="#reset-password">
+        <a *ngIf="isAdmin" 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>
@@ -52,7 +53,8 @@
                    ngModel (ngModelChange)="searchUsers(searchTerm.value)">
           </form>
 
-          <button *ngIf="isManager" type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#addUserModal">
+          <button *ngIf="isManager" type="button" class="btn btn-info" data-bs-toggle="modal"
+                  data-bs-target="#addUserModal">
             <i class="fa fa-plus"></i>New User
           </button>
         </div>
@@ -94,7 +96,8 @@
           <td class="">
             <div class="btn-group">
               <button class="btn btn-outline-info" (click)="onEditUser(appUser)"><i class="fas fa-edit"></i></button>
-              <button *ngIf="isAdmin" class="btn btn-outline-danger" (click)="onDeleteUser(appUser)"><i class="fas fa-trash"></i>
+              <button *ngIf="isAdmin" class="btn btn-outline-danger" (click)="onDeleteUser(appUser)"><i
+                class="fas fa-trash"></i>
               </button>
             </div>
           </td>
@@ -400,7 +403,8 @@
                   <label for="email">Email</label>
                   <input type="email" name="email" required ngModel class="form-control">
                 </div>
-                <div class="form-group">
+
+                <div *ngIf="isAdmin" class="form-group">
                   <label for="authority">Role</label>
                   <select name="role" required ngModel="ROLE_USER" class="form-control">
                     <option value="ROLE_USER">USER</option>
@@ -410,6 +414,11 @@
                     <option value="ROLE_SUPER_ADMIN">SUPER ADMIN</option>
                   </select>
                 </div>
+                <div *ngIf="!isAdmin" class="form-group">
+                  <label for="authority">Role</label>
+                  <input type="text" name="role" required ngModel="USER" readonly class="form-control">
+                </div>
+
                 <div class="input-group mb-2">
                   <div class="input-group-prepend">
                     <span class="input-group-text">Profile Picture </span>
@@ -458,7 +467,9 @@
       <div class="modal-dialog" role="document">
         <div class="modal-content">
           <div class="modal-header">
-            <h5 class="modal-title text-center">Edit {{editUser.firstName}} {{editUser.lastName}}</h5>
+            <h5 class="modal-title text-center">Edit {{editUser.firstName}} {{editUser.lastName}}
+              <small [hidden]="isManager"> (read only)</small>
+            </h5>
             <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
             </button>
@@ -468,23 +479,28 @@
               <form #editUserForm="ngForm">
                 <div class="form-group">
                   <label for="firstName">First Name</label>
-                  <input type="text" name="firstName" required [(ngModel)]="editUser.firstName" class="form-control">
+                  <input type="text" name="firstName" required [(ngModel)]="editUser.firstName" class="form-control"
+                         [disabled]="!isManager">
                 </div>
                 <div class="form-group">
                   <label for="lastName">Last Name</label>
-                  <input type="text" name="lastName" required [(ngModel)]="editUser.lastName" class="form-control">
+                  <input type="text" name="lastName" required [(ngModel)]="editUser.lastName" class="form-control"
+                         [disabled]="!isManager">
                 </div>
                 <div class="form-group">
                   <label for="username">Username</label>
-                  <input type="text" name="username" required [(ngModel)]="editUser.username" class="form-control">
+                  <input type="text" name="username" required [(ngModel)]="editUser.username" class="form-control"
+                         [disabled]="!isManager">
                 </div>
                 <div class="form-group">
                   <label for="email">Email</label>
-                  <input type="email" name="email" required [(ngModel)]="editUser.email" class="form-control">
+                  <input type="email" name="email" required [(ngModel)]="editUser.email" class="form-control"
+                         [disabled]="!isManager">
                 </div>
                 <div class="form-group">
-                  <label for="authority">Role</label>
-                  <select name="role" required [(ngModel)]="editUser.role" class="form-control">
+                  <label for="authority">Role<small [hidden]="isAdmin"> (read only)</small></label>
+                  <select name="role" required [(ngModel)]="editUser.role" class="form-control"
+                          [disabled]="!isAdmin">
                     <option value="ROLE_USER">USER</option>
                     <option value="ROLE_HR">HR</option>
                     <option value="ROLE_MANAGER">MANAGER</option>
@@ -499,7 +515,7 @@
                   <div class="custom-file">
                     <input type="file" accept="image/*" name="profileImage"
                            (change)="onProfileImageChange($any($event).target.files)"
-                           class="custom-file-input">
+                           class="custom-file-input" [disabled]="!isManager">
                     <label class="custom-file-label">
                       <span [hidden]="!profileImageFileName">{{profileImageFileName}}</span>
                       <span [hidden]="profileImageFileName">Choose File</span>
@@ -509,14 +525,16 @@
                 <fieldset class="form-group">
                   <div class="form-check">
                     <label class="form-check-label">
-                      <input type="checkbox" name="active" [(ngModel)]="editUser.active" class="form-check-input">
-                      Active
+                      <input type="checkbox" name="active" [(ngModel)]="editUser.active" class="form-check-input"
+                             [disabled]="!isManager">
+                      Active<small [hidden]="isManager"> (read only)</small>
                     </label>
                   </div>
                   <div class="form-check disabled">
                     <label class="form-check-label">
-                      <input type="checkbox" name="notLocked" [(ngModel)]="editUser.notLocked" class="form-check-input">
-                      Unlocked
+                      <input type="checkbox" name="notLocked" [(ngModel)]="editUser.notLocked" class="form-check-input"
+                             [disabled]="!isManager">
+                      Unlocked<small [hidden]="isManager"> (read only)</small>
                     </label>
                   </div>
                 </fieldset>
@@ -526,9 +544,9 @@
           <div class="modal-footer">
             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="closeEditUserButton">Close
             </button>
-            <button type="button" class="btn btn-primary" (click)="onUpdateUser()" [disabled]="editUserForm.invalid">
-              Save
-              changes
+            <button *ngIf="isManager" type="button" class="btn btn-primary" (click)="onUpdateUser()"
+                    [disabled]="editUserForm.invalid">
+              Save changes
             </button>
           </div>
         </div>
@@ -539,7 +557,7 @@
     <form enctype="multipart/form-data" style="display:none;">
       <input type="file"
              (change)="onProfileImageChange($any($event).target.files); onUpdateProfileImage()"
-             name="profile-image-input" id="profile-image-input" placeholder="file" accept="image/*" />
+             name="profile-image-input" id="profile-image-input" placeholder="file" accept="image/*"/>
     </form>
 
   </div>