163. Adding new user form (#22 Section 23: User Page - Add a New User)

This commit is contained in:
Art
2021-09-21 09:41:41 +03:00
parent 9b981c6093
commit 6ec90aa5c7

View File

@ -39,7 +39,7 @@
<form class="form-inline my-2 my-lg-0 justify-content-center">
<input name="searchFileName" class="form-control mr-sm-2" type="search" placeholder="Search users...">
</form>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#addUserModal">
<button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#addUserModal">
<i class="fa fa-plus"></i>New User
</button>
</div>
@ -91,7 +91,7 @@
<button [hidden]="true" type="button" id="openUserInfo" data-bs-toggle="modal" data-bs-target="#viewUserModal">
</button>
<button [hidden]="true" type="button" id="openUserEdit" data-toggle="modal" data-target="#editUserModal">
<button [hidden]="true" type="button" id="openUserEdit" data-toggle="modal" data-bs-target="#editUserModal">
</button>
<!-- modal user info -->
@ -173,5 +173,85 @@
</div>
</div>
<!-- modal add user -->
<div class="modal draggable fade bd-example-modal-lg" id="addUserModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-center">New User</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div>
<form>
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" name="firstName" required ngModel class="form-control">
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" name="lastName" required ngModel class="form-control">
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" required ngModel class="form-control">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" required ngModel class="form-control">
</div>
<div class="form-group">
<label for="authority">Role</label>
<select name="role" required ngModel="ROLE_USER" class="form-control">
<option value="ROLE_USER">USER</option>
<option value="ROLE_HR">HR</option>
<option value="ROLE_MANAGER">MANAGER</option>
<option value="ROLE_ADMIN">ADMIN</option>
<option value="ROLE_SUPER_ADMIN">SUPER ADMIN</option>
</select>
</div>
<div class="input-group mb-2">
<div class="input-group-prepend">
<span class="input-group-text">Profile Picture </span>
</div>
<div class="custom-file">
<input type="file" accept="image/*" name="profileImage"
class="custom-file-input">
<label class="custom-file-label">
<span [hidden]="true"> fileName </span>
<span [hidden]="false">Choose File</span>
</label>
</div>
</div>
<fieldset class="form-group">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" name="active" ngModel class="form-check-input">
Active
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="checkbox" name="notLocked" ngModel class="form-check-input">
Unlocked
</label>
</div>
</fieldset>
<button type="submit" style="display: none;" id="new-user-save"></button>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="new-user-close">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>