151 lines
5.6 KiB
HTML
151 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="../css/entry-form.css">
|
|
<title>Add New User</title>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="form-container">
|
|
<h2>Add New User</h2>
|
|
<form action="/add_user" method="post" id="user-form">
|
|
<fieldset name="main" class="main-form" form="user-form">
|
|
<div class="form-group">
|
|
<label for="full-name">Full Name</label>
|
|
<input type="text" id="full-name" name="full_name" placeholder="Full Name" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="username">Username</label>
|
|
<input type="text" id="username" name="username" placeholder="Username" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="password">Password</label>
|
|
<input type="password" id="password" name="password" pattern="^(?=.*[A-Z])(?=.*[a-z])(?=.*\W).{8,}$" placeholder="Password" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="passwordconfirm">Confirm password</label>
|
|
<input type="password" id="passwordconfirm" name="passwordconfirm" pattern="^(?=.*[A-Z])(?=.*[a-z])(?=.*\W).{8,}$" placeholder="Re-enter password" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="designation">Designation</label>
|
|
<input type="text" id="designation" name="designation" placeholder="Designation" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="department">Department</label>
|
|
<input type="text" id="department" name="department" placeholder="Department">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="email">Email</label>
|
|
<input type="email" id="email" name="email" placeholder="Email Address" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="mail-quota">Mail Quota (MB)</label>
|
|
<input type="number" id="mail-quota" name="mail_quota" placeholder="Enter mail quota in MB" value="0" min="0" step="1" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="date-joining">Date of Joining</label>
|
|
<input type="date" id="date-joining" name="date_of_joining" value="2018-07-22" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="date-birth">Date of Birth</label>
|
|
<input type="date" id="date-birth" name="date_of_birth" value="2018-07-22" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="mobile_number">Mobile Number</label>
|
|
<input type="tel" id="mobile_number" name="mobile_number" placeholder="Enter mobile number">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="experience_level">Experience Level</label>
|
|
<input type="range" class="range-slider" id="experience_level" name="experience_level" value="10" min="0" max="100" step="1">
|
|
</div>
|
|
|
|
<div class="form-group dropdown-menu">
|
|
<label for="role">User Role</label>
|
|
<select id="role" name="role" required>
|
|
<option value="" class="placeholder-option">--Select Role--</option>
|
|
<option value="admin">Admin</option>
|
|
<option value="user">User</option>
|
|
<option value="moderator">Moderator</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group checkbox-set">
|
|
<label>Admin Access</label>
|
|
<div class="checkboxes">
|
|
<input type="checkbox" id="add-access" name="add_access">
|
|
<label class="checkbox" for="add-access">Add</label>
|
|
|
|
<input type="checkbox" id="edit-access" name="edit_access">
|
|
<label class="checkbox" for="edit-access">Edit</label>
|
|
|
|
<input type="checkbox" id="approve-access" name="approve_access">
|
|
<label class="checkbox" for="approve-access">Approve</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="password-expire-at">Password Expire At</label>
|
|
<input type="datetime-local" id="password-expire-at" name="password_expire_at" value="2018-06-12T19:30">
|
|
</div>
|
|
|
|
<div class="form-group radio-input">
|
|
<label>Account Status</label>
|
|
<div class="radio-group">
|
|
<input type="radio" id="active" name="account_status" value="active">
|
|
<label class="radio" for="active">Active</label>
|
|
|
|
<input type="radio" id="inactive" name="account_status" value="inactive">
|
|
<label class="radio" for="inactive">Inactive</label>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<label class="collapsible-section-title" for="collapsible-section-title-1">Advanced</label>
|
|
<input type="checkbox" class="false-header-checkbox" id="collapsible-section-title-1" checked>
|
|
<fieldset class="collapsible-section" form="user-form">
|
|
<div class="form-group">
|
|
<label for="employee-id">Employee ID</label>
|
|
<input type="text" id="employee-id" name="employee_id" placeholder="Employee ID">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="office-location">Office Location</label>
|
|
<input type="text" id="office-location" name="office_location" placeholder="Office Location">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="backup-email">Backup Email</label>
|
|
<input type="email" id="backup-email" name="backup_email" placeholder="Backup Email">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="security-clearance">Security Clearance Level</label>
|
|
<input type="number" id="security-clearance" name="security_clearance" value="0" min="0" max="5" step="1">
|
|
</div>
|
|
</fieldset>
|
|
|
|
<div class="form-group submit-buttons">
|
|
<button type="reset" class="clear-button">Clear</button>
|
|
<button type="submit" class="submit">Add User</button>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
|
|
</body>
|
|
<script src="../js/rangeslider.js"></script>
|
|
</html>
|