adduser html page
This commit is contained in:
parent
81f30af9b2
commit
bc79d6912c
122
test/css/adduser.css
Normal file
122
test/css/adduser.css
Normal file
@ -0,0 +1,122 @@
|
|||||||
|
* {
|
||||||
|
all: unset;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
title {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: "Arial", sans-serif;
|
||||||
|
background: linear-gradient(135deg, #283e4a, #1c2e38);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
body .form-container {
|
||||||
|
background-color: rgba(255, 255, 255, 0.92);
|
||||||
|
padding: 40px;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.25);
|
||||||
|
width: 100%;
|
||||||
|
max-width: 800px;
|
||||||
|
text-align: left;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
body .form-container h2 {
|
||||||
|
color: #4e4e4e;
|
||||||
|
font-size: 28px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
body .form-container form {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
body .form-container form .form-group {
|
||||||
|
flex: 1 1 calc(50% - 20px);
|
||||||
|
min-width: 250px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
body .form-container form .form-group label {
|
||||||
|
display: block;
|
||||||
|
color: #4e4e4e;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
body .form-container form .form-group input[type=text],
|
||||||
|
body .form-container form .form-group input[type=password],
|
||||||
|
body .form-container form .form-group input[type=email],
|
||||||
|
body .form-container form .form-group input[type=date],
|
||||||
|
body .form-container form .form-group select {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid rgba(220, 220, 220, 0.8);
|
||||||
|
border-radius: 6px;
|
||||||
|
background-color: rgba(245, 245, 245, 0.9);
|
||||||
|
font-size: 16px;
|
||||||
|
transition: border-color 0.3s, background-color 0.3s;
|
||||||
|
}
|
||||||
|
body .form-container form .form-group input[type=text]:focus,
|
||||||
|
body .form-container form .form-group input[type=password]:focus,
|
||||||
|
body .form-container form .form-group input[type=email]:focus,
|
||||||
|
body .form-container form .form-group input[type=date]:focus,
|
||||||
|
body .form-container form .form-group select:focus {
|
||||||
|
border-color: #007b8a;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
body .form-container form .admin-access {
|
||||||
|
flex: 1 1 100%;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
body .form-container form .admin-access label {
|
||||||
|
display: block;
|
||||||
|
color: #4e4e4e;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
body .form-container form .admin-access .checkbox-group {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
body .form-container form .role-dropdown {
|
||||||
|
flex: 1 1 calc(50% - 20px);
|
||||||
|
min-width: 250px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
body .form-container form .submit-button {
|
||||||
|
flex: 1 1 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
body .form-container form .submit-button button {
|
||||||
|
width: 30%;
|
||||||
|
text-align: center;
|
||||||
|
padding: 12px;
|
||||||
|
background-color: #007b8a;
|
||||||
|
color: #ffffff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s, transform 0.3s;
|
||||||
|
box-shadow: 0 4px 10px rgba(0, 123, 138, 0.3);
|
||||||
|
}
|
||||||
|
body .form-container form .submit-button button:hover {
|
||||||
|
background-color: #006b7a;
|
||||||
|
}
|
||||||
|
body .form-container form .submit-button button:active {
|
||||||
|
transform: translateY(2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=adduser.css.map */
|
||||||
1
test/css/adduser.css.map
Normal file
1
test/css/adduser.css.map
Normal file
@ -0,0 +1 @@
|
|||||||
|
{"version":3,"sourceRoot":"","sources":["../scss/_common.scss","../scss/adduser.scss","../scss/_colors.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;;;AAIJ;EACI;;;ACLJ;EACE;EACA,YCc0B;EDb1B;EACA;EACA;EACA;EACA;;AAGA;EACE,kBCOuB;EDNvB;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE,OCFsB;EDGtB;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAGA;EACE;EACA,OCxBkB;EDyBlB;EACA;;AAIF;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;EACA;EACA;EACA,kBCtCkB;EDuClB;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EACE,cCzCwB;ED0CxB;;AAMN;EACE;EACA;;AAEA;EACE;EACA,OCzDkB;ED0DlB;EACA;;AAIF;EACE;EACA;EACA;;AAKJ;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAEA;EACI;EACA;EACF;EACA,kBCpFc;EDqFd,OCnFmB;EDoFnB;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,kBC9FkB;;ADiGpB;EACE","file":"adduser.css"}
|
||||||
@ -1 +1 @@
|
|||||||
{"version":3,"sourceRoot":"","sources":["../scss/_common.scss","../scss/login.scss","../scss/_colors.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;;;ACAJ;EACE;;;AAGF;EAEE;EACA,YCV4B;EDW5B;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;;AAKF;EACE;EACA,OCrCqB;EDsCrB;;AAIF;EACE;EACA,OC3CyB;;ADgD7B;EACE,kBC/CoB;EDgDpB;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA,OCxDmB;EDyDnB;;AAGF;EACE;EACA;EACA;;AAGA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA,kBCzEsB;ED0EtB;;AAEA;AAAA;EACI,cC1E0B;;AD4E9B;AAAA;EACE,cC5E4B;ED6E5B,kBChF4B;EDiF5B;;AAIJ;EACE;EACA;EACA,kBCpFa;EDqFb,OCjFkB;EDkFlB;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,kBC9FiB;;ADiGnB;EACE;EACA","file":"login.css"}
|
{"version":3,"sourceRoot":"","sources":["../scss/_common.scss","../scss/login.scss","../scss/_colors.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;;;AAIJ;EACI;;;ACNJ;EAEE;EACA,YCL4B;EDM5B;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;;AAKF;EACE;EACA,OChCqB;EDiCrB;;AAIF;EACE;EACA,OCtCyB;;AD2C7B;EACE,kBC1CoB;ED2CpB;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA,OCnDmB;EDoDnB;;AAGF;EACE;EACA;EACA;;AAGA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA,kBCpEsB;EDqEtB;;AAEA;AAAA;EACI,cCrE0B;;ADuE9B;AAAA;EACE,cCvE4B;EDwE5B,kBC3E4B;ED4E5B;;AAIJ;EACE;EACA;EACA,kBC/Ea;EDgFb,OC5EkB;ED6ElB;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,kBCzFiB;;AD4FnB;EACE;EACA","file":"login.css"}
|
||||||
84
test/html/adduser.html
Normal file
84
test/html/adduser.html
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
<!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="/home/lcm/Works/ldapmanager/test/css/adduser.css">
|
||||||
|
<title>Add New User</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="form-container">
|
||||||
|
<h2>Add New User</h2>
|
||||||
|
<form action="/add_user" method="post">
|
||||||
|
<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" placeholder="Password" required>
|
||||||
|
</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="date-joining">Date of Joining</label>
|
||||||
|
<input type="date" id="date-joining" name="date_of_joining" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="date-birth">Date of Birth</label>
|
||||||
|
<input type="date" id="date-birth" name="date_of_birth" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group role-dropdown">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- New input field for testing -->
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="department">Department</label>
|
||||||
|
<input type="text" id="department" name="department" placeholder="Department">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="form-group admin-access">
|
||||||
|
<label>Admin Access</label>
|
||||||
|
<div class="checkbox-group">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Submit Button -->
|
||||||
|
<div class="form-group submit-button">
|
||||||
|
<button type="submit">Add User</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -16,3 +16,18 @@ $login-button-hover-color: #2f798a;
|
|||||||
$login-button-shadow: rgba(0, 95, 115, 0.3);
|
$login-button-shadow: rgba(0, 95, 115, 0.3);
|
||||||
$login-button-active-shadow: rgba(70, 70, 70, 0.2);
|
$login-button-active-shadow: rgba(70, 70, 70, 0.2);
|
||||||
$login-button-text-color: #fff;
|
$login-button-text-color: #fff;
|
||||||
|
|
||||||
|
// Add New User Page Colors
|
||||||
|
$add-user-background-color: linear-gradient(135deg, #283e4a, #1c2e38); // Background gradient
|
||||||
|
$add-user-header-color: #ffffff; // Header text color (white for contrast)
|
||||||
|
$add-user-form-background: rgba(255, 255, 255, 0.92); // Form background color
|
||||||
|
$add-user-form-shadow-color: rgba(0, 0, 0, 0.25); // Form shadow color
|
||||||
|
$add-user-form-title-color: #4e4e4e; // Form title color
|
||||||
|
$add-user-input-background: rgba(245, 245, 245, 0.9); // Input field background color
|
||||||
|
$add-user-input-border-color: rgba(220, 220, 220, 0.8); // Input field border color
|
||||||
|
$add-user-input-focus-border-color: #007b8a; // Focus border color for inputs
|
||||||
|
$add-user-button-color: #007b8a; // Primary button color
|
||||||
|
$add-user-button-hover-color: #006b7a; // Button hover color
|
||||||
|
$add-user-button-text-color: #ffffff; // Button text color
|
||||||
|
$add-user-button-shadow: rgba(0, 123, 138, 0.3); // Button shadow color
|
||||||
|
$add-user-description-color: rgba(220, 220, 220, 0.8); // Description text color
|
||||||
|
|||||||
@ -4,3 +4,8 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Hide the title
|
||||||
|
title {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
134
test/scss/adduser.scss
Normal file
134
test/scss/adduser.scss
Normal file
@ -0,0 +1,134 @@
|
|||||||
|
@use "common"; // Reset styles
|
||||||
|
@use "colors" as *; // Color scheme for Add New User page
|
||||||
|
|
||||||
|
// Basic styling for the body
|
||||||
|
body {
|
||||||
|
font-family: 'Arial', sans-serif;
|
||||||
|
background: $add-user-background-color; // Use background gradient for the page
|
||||||
|
display: flex;
|
||||||
|
justify-content: center; // Center the form horizontally
|
||||||
|
align-items: center; // Center the form vertically
|
||||||
|
height: 100%;
|
||||||
|
padding: 20px; // Add some padding for mobile responsiveness
|
||||||
|
|
||||||
|
// Container for the form
|
||||||
|
.form-container {
|
||||||
|
background-color: $add-user-form-background; // Form background color
|
||||||
|
padding: 40px;
|
||||||
|
border-radius: 12px; // Rounded corners for the form
|
||||||
|
box-shadow: 0 8px 15px $add-user-form-shadow-color;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 800px; // Increase the maximum width for a wider form
|
||||||
|
text-align: left; // Left-align text
|
||||||
|
margin: auto;
|
||||||
|
|
||||||
|
// Form header
|
||||||
|
h2 {
|
||||||
|
color: $add-user-form-title-color; // Form title color
|
||||||
|
font-size: 28px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
text-align: center; // Center the title
|
||||||
|
}
|
||||||
|
|
||||||
|
// Form element
|
||||||
|
form {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap; // Allow wrapping for form groups
|
||||||
|
gap: 20px; // Add consistent gap between elements
|
||||||
|
margin-bottom: 20px; // Add space below the form for submit button
|
||||||
|
|
||||||
|
// Form groups for each input
|
||||||
|
.form-group {
|
||||||
|
flex: 1 1 calc(50% - 20px); // Take up half the row, accounting for gap
|
||||||
|
min-width: 250px; // Minimum width to prevent shrinking too much
|
||||||
|
margin-bottom: 20px; // Spacing between fields
|
||||||
|
|
||||||
|
// Label styling
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
color: $add-user-form-title-color;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Input and select styling
|
||||||
|
input[type="text"],
|
||||||
|
input[type="password"],
|
||||||
|
input[type="email"],
|
||||||
|
input[type="date"],
|
||||||
|
select {
|
||||||
|
width: 100%; // Full width of the form group
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid $add-user-input-border-color; // Input field border color
|
||||||
|
border-radius: 6px;
|
||||||
|
background-color: $add-user-input-background; // Input background color
|
||||||
|
font-size: 16px;
|
||||||
|
transition: border-color 0.3s, background-color 0.3s;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: $add-user-input-focus-border-color; // Focus border color
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Admin Access Checkboxes
|
||||||
|
.admin-access {
|
||||||
|
flex: 1 1 100%; // Full width for admin access checkboxes
|
||||||
|
margin-bottom: 20px; // Space below the checkboxes
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block; // Ensure label occupies full line
|
||||||
|
color: $add-user-form-title-color;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 10px; // Space below the main label
|
||||||
|
}
|
||||||
|
|
||||||
|
// Container for checkboxes
|
||||||
|
.checkbox-group {
|
||||||
|
display: flex; // Use flex for checkboxes
|
||||||
|
justify-content: flex-start; // Align items to the start
|
||||||
|
gap: 10px; // Space between each checkbox label
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dropdown Menu for Admin Role
|
||||||
|
.role-dropdown {
|
||||||
|
flex: 1 1 calc(50% - 20px); // Explicitly set to half width, considering gap
|
||||||
|
min-width: 250px; // Minimum width to avoid shrinking too much
|
||||||
|
padding: 0; // Reset any padding
|
||||||
|
}
|
||||||
|
|
||||||
|
// Submit button styling
|
||||||
|
.submit-button {
|
||||||
|
flex: 1 1 100%; // Full width for the submit button
|
||||||
|
display: flex; // Use flex to center the button
|
||||||
|
justify-content: center; // Center the button
|
||||||
|
margin-top: 20px; // Space above the button
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 30%;
|
||||||
|
text-align: center;
|
||||||
|
padding: 12px; // Padding for button
|
||||||
|
background-color: $add-user-button-color; // Primary button color
|
||||||
|
color: $add-user-button-text-color;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s, transform 0.3s;
|
||||||
|
box-shadow: 0 4px 10px $add-user-button-shadow;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $add-user-button-hover-color; // Button hover color
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: translateY(2px); // Subtle press effect
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,11 +1,6 @@
|
|||||||
@use "common"; // Reset styles
|
@use "common"; // Reset styles
|
||||||
@use "colors" as *; // Color scheme
|
@use "colors" as *; // Color scheme
|
||||||
|
|
||||||
// Hide the title
|
|
||||||
title {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
// Page background
|
// Page background
|
||||||
font-family: 'Arial', sans-serif;
|
font-family: 'Arial', sans-serif;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user