-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feature(connect create staff api to create staff ui):
connect create staff api to create staff ui [Starts #165496310]
- Loading branch information
Showing
8 changed files
with
363 additions
and
39 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,170 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
| <title>Add Staffs - Banka Dashboard</title> | ||
| <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet"> | ||
| <link rel="stylesheet" href="./css/style.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="container"> | ||
|
|
||
| <!--Wrapper--> | ||
| <div class="wrapper"> | ||
| <!--Sidebar--> | ||
| <div class="sidebar"> | ||
| <div class="sidebar-header"> | ||
| <h1 class="logo">Banka</h1> | ||
| </div> | ||
| <div class="sidebar-menu"> | ||
| <ul class="sidebar-list"> | ||
| <li class="sidebar-item"> | ||
| <a href="./dashboard.html" class="sidebar-link">Dashboard</a> | ||
| </li> | ||
| <li class="sidebar-item"> | ||
| <a href="./accounts.html" class="sidebar-link">Bank Accounts</a> | ||
| </li> | ||
| <li class="sidebar-item"> | ||
| <a href="./users.html" class="sidebar-link">Users Accounts</a> | ||
| </li> | ||
| <li class="sidebar-item"> | ||
| <a href="staffs.html" class="sidebar-link">Staffs</a> | ||
| </li> | ||
| <li class="sidebar-item sidebar-item-active"> | ||
| <a href="./adduser.html" class="sidebar-link">Create Staffs</a> | ||
| </li> | ||
| <li class="sidebar-item"> | ||
| <a href="./activate.html" class="sidebar-link">Activate / Deactivate</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| <div class="sidebar-legal"> | ||
| © 2019 Banka. All Rights Reserved. | ||
| </div> | ||
| </div> | ||
|
|
||
| <!--Main Content--> | ||
| <div class="main-content"> | ||
| <!--Header--> | ||
| <header class="header"> | ||
| <button class="toggle-sidebar" id="toggle-sidebar"> | ||
| <svg class="toggle-sidebar-button"> | ||
| <use xlink:href="./svg/sprite.svg#icon-list"></use> | ||
| </svg> | ||
| </button> | ||
| <form class="search-form"> | ||
| <input type="text" class="search-input" placeholder="Search..."> | ||
| <button class="search-form-button"> | ||
| <svg class="search-form-icon"> | ||
| <use xlink:href="./svg/sprite.svg#icon-magnifying-glass"></use> | ||
| </svg> | ||
| </button> | ||
| </form> | ||
|
|
||
| <nav class="user-nav"> | ||
| <div class="user-nav-icon-box"> | ||
| <svg class="user-nav-icon"> | ||
| <use xlink:href="./svg/sprite.svg#icon-bell"></use> | ||
| </svg> | ||
| <span class="user-nav-notification"></span> | ||
|
|
||
| <div class="user-nav-notification-pop"> | ||
| <ul class="list"> | ||
| <li class="item"> | ||
| <a href="#" class="link">Lorem ipsum dolor, sit amet consectetur adipisicing | ||
| elit. Quae, optio?</a> | ||
| </li> | ||
| <li class="item"> | ||
| <a href="#" class="link">Lorem ipsum dolor, sit amet consectetur adipisicing.</a> | ||
| </li> | ||
| <li class="item"> | ||
| <a href="#" class="link">Lorem ipsum dolor sit amet consectetur adipisicing | ||
| elit. Nobis similique soluta sit impedit, provident laborum?</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| <div class="user-nav-user"> | ||
| <img class="user-nav-user-photo" src="./img/js2.png" alt=""> | ||
| <span class="user-nav-username">Franklin</span> | ||
| <svg class="user-nav-user-icon"> | ||
| <use xlink:href="./svg/sprite.svg#icon-chevron-down"></use> | ||
| </svg> | ||
|
|
||
| <div class="user-nav-user-pop"> | ||
| <ul class="list"> | ||
| <li class="item"><a href="./profile.html" class="link"> | ||
| <svg class="user-nav-link-icon"> | ||
| <use xlink:href="./svg/sprite.svg#icon-user"></use> | ||
| </svg>Profile</a> | ||
| </li> | ||
| <li class="item"><a href="#" class="link"> | ||
| <svg class="user-nav-link-icon"> | ||
| <use xlink:href="./svg/sprite.svg#icon-help-with-circle"></use> | ||
| </svg>Help</a> | ||
| </li> | ||
| <li class="item"><a href="#" class="link" id="logout"> | ||
| <svg class="user-nav-link-icon"> | ||
| <use xlink:href="./svg/sprite.svg#icon-log-out"></use> | ||
| </svg>Logout</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </nav> | ||
| </header> | ||
|
|
||
| <!--Main Body--> | ||
| <main class="main-body"> | ||
| <div class="alert alert-success"><span class="successMsg">Success </span><span id="close">X</span></div> | ||
| <div class="alert alert-danger"><span class="errMsg">Error </span><span id="close">X</span></div> | ||
|
|
||
| <div class="card"> | ||
| <!--Add Staff Form--> | ||
| <form action="" class="form"> | ||
| <div class="form-group"> | ||
| <label for="firstname" class="form-label">First Name</label> | ||
| <input type="text" placeholder="First Name" id="firstname" class="form-input"> | ||
| <p class="errorfname"></p> | ||
| </div> | ||
| <div class="form-group"> | ||
| <label for="lastname" class="form-label">Last Name</label> | ||
| <input type="text" placeholder="Last Name" id="lastname" class="form-input"> | ||
| <p class="errorlname"></p> | ||
| </div> | ||
| <div class="form-group"> | ||
| <label for="email" class="form-label">Email</label> | ||
| <input type="text" placeholder="Email Address" id="email" class="form-input"> | ||
| <p class="erroremail"></p> | ||
| </div> | ||
| <div class="form-group"> | ||
| <label for="selectrole" class="form-label">Choose user role</label> | ||
| <select class="form-select"> | ||
| <option value="staff">Staff</option> | ||
| <option value="admin">Admin</option> | ||
| </select> | ||
| </div> | ||
| <div class="form-group"> | ||
| <label for="password" class="form-label">Password</label> | ||
| <input type="password" placeholder="Password" id="password" class="form-input"> | ||
| <p class="errorpassword"></p> | ||
| </div> | ||
|
|
||
| <input type="submit" id="submit" class="btn btn-block btn-primary" value="Add User"> | ||
| </form> | ||
| </div> | ||
| </main> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!--Js--> | ||
| <script src="./js/app.js"></script> | ||
| <script src="./js/addstaff.js"></script> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| const api = 'https://bankaapp-api.herokuapp.com/api'; | ||
| const token = sessionStorage.getItem('token'); | ||
|
|
||
| const fnameAndLnameRegex = /^[a-zA-Z ]{2,15}$/; | ||
| const emailRegex = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,10})$/; | ||
| const passwordRegex = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/; | ||
| const firstName = document.querySelector('#firstname'); | ||
| const lastName = document.querySelector('#lastname'); | ||
| const email = document.querySelector('#email'); | ||
| const type = document.querySelector('.form-select'); | ||
| const password = document.querySelector('#password'); | ||
| const errorFname = document.querySelector('.errorfname'); | ||
| const errorLname = document.querySelector('.errorlname'); | ||
| const errorEmail = document.querySelector('.erroremail'); | ||
| const errorPassword = document.querySelector('.errorpassword'); | ||
| const submit = document.querySelector('#submit'); | ||
| let fnamePassed, lnamePassed, emailPassed, passwordPassed; | ||
|
|
||
| firstName.addEventListener('keyup', () => { | ||
| if (!fnameAndLnameRegex.test(firstName.value)) { | ||
| errorFname.innerHTML = 'first name should at least be 2 characters'; | ||
| fnamePassed = false; | ||
| } else { | ||
| errorFname.innerHTML = ''; | ||
| fnamePassed = true; | ||
| } | ||
| }); | ||
|
|
||
| lastName.addEventListener('keyup', () => { | ||
| if (!fnameAndLnameRegex.test(lastName.value)) { | ||
| errorLname.innerHTML = 'last name should at least be 2 characters'; | ||
| lnamePassed = false; | ||
| } else { | ||
| errorLname.innerHTML = ''; | ||
| lnamePassed = true; | ||
| } | ||
| }); | ||
|
|
||
| email.addEventListener('keyup', () => { | ||
| if (!emailRegex.test(email.value)) { | ||
| errorEmail.innerHTML = 'invaild email address'; | ||
| emailPassed = false; | ||
| } else { | ||
| errorEmail.innerHTML = ''; | ||
| emailPassed = true; | ||
| } | ||
| }); | ||
|
|
||
| password.addEventListener('keyup', () => { | ||
| if (!passwordRegex.test(password.value)) { | ||
| errorPassword.innerHTML = 'Password must at least have 1 alphabet, lowercase, uppercase, number and cannot be less than 8'; | ||
| passwordPassed = false; | ||
| } else { | ||
| errorPassword.innerHTML = ''; | ||
| passwordPassed = true; | ||
| } | ||
| }); | ||
|
|
||
| // POST FETCH API REQUEST | ||
| const postApi = (url, data) => { | ||
| fetch(url, { | ||
| method: 'POST', | ||
| mode: 'cors', | ||
| cache: 'no-cache', | ||
| credentials: 'same-origin', | ||
| headers: { | ||
| Authorization: `Bearer ${token}`, | ||
| 'Content-Type': 'application/json', | ||
| }, | ||
| redirect: 'follow', | ||
| referrer: 'no-referrer', | ||
| body: JSON.stringify(data), | ||
| }) | ||
| .then((response) => { | ||
| const error = document.querySelector('.errMsg'); | ||
| if (response.status === 403) { | ||
| error.parentElement.style.display = 'flex'; | ||
| error.innerHTML = 'You are not logged in. Login <a href="./login.html">here</a>'; | ||
| } else if (response.status === 401) { | ||
| error.parentElement.style.display = 'flex'; | ||
| error.innerHTML = 'You are not an admin to perform this task'; | ||
| } else if (response.status === 409) { | ||
| errorEmail.innerHTML = 'email already exist'; | ||
| } else if (response.status === 201) { | ||
| const success = document.querySelector('.successMsg'); | ||
| success.parentElement.style.display = 'flex'; | ||
| success.innerHTML = 'User created successfully'; | ||
| setInterval(() => { | ||
| document.location.reload(true); | ||
| }, 3000); | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| submit.addEventListener('click', (e) => { | ||
| e.preventDefault(); | ||
| if (fnamePassed === true && lnamePassed === true && emailPassed === true && passwordPassed === true) { | ||
| if (type.value === 'staff') { | ||
| const signupData = { | ||
| firstName: firstName.value, | ||
| lastName: lastName.value, | ||
| email: email.value, | ||
| type: type.value, | ||
| password: password.value, | ||
| isAdmin: false, | ||
| }; | ||
| postApi(`${api}/auth/signup/addstaff`, signupData); | ||
| } else { | ||
| const signupData = { | ||
| firstName: firstName.value, | ||
| lastName: lastName.value, | ||
| email: email.value, | ||
| type: 'staff', | ||
| password: password.value, | ||
| isAdmin: true, | ||
| }; | ||
| postApi(`${api}/auth/signup/addstaff`, signupData); | ||
| } | ||
| } | ||
| }); |
Oops, something went wrong.