196. Modifying UI by role - Part 2 (#29)

This commit is contained in:
Art
2021-09-23 10:50:35 +03:00
parent 43fed1a25a
commit 6d44e944fe

View File

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