spouliot
e2f9e9ae4f
- Standardize modal dismiss/cancel buttons to btn-outline-secondary across 70+ views - Remove btn-sm from page-level Create and Back buttons (Index + Detail pages) - Fix Edit buttons on Details pages: btn-secondary -> btn-warning - Fix form Cancel/Back links: btn-secondary -> btn-outline-secondary - Add 10 CSS patches to site.css for mobile/tablet responsiveness: top-navbar overflow prevention, page-header flex-wrap at 575px, table action button min-height override, notification dropdown width cap, tablet content padding Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
251 lines
16 KiB
Plaintext
251 lines
16 KiB
Plaintext
@model PowderCoating.Application.DTOs.User.CreateCompanyUserDto
|
|
|
|
@{
|
|
ViewData["Title"] = "Add New User";
|
|
ViewData["PageIcon"] = "bi-person-plus";
|
|
ViewData["PageHelpTitle"] = "Add New User";
|
|
ViewData["PageHelpContent"] = "Creates a new login account for a member of your company. The email address doubles as the login username. Set a temporary password — the user can change it from their Profile page after their first login. Assign a Role, then fine-tune individual permissions below.";
|
|
}
|
|
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-10">
|
|
<div class="d-flex justify-content-end mb-4">
|
|
<a asp-action="Index" class="btn btn-outline-secondary">
|
|
<i class="bi bi-arrow-left me-1"></i>Back to List
|
|
</a>
|
|
</div>
|
|
|
|
<div class="card shadow-sm">
|
|
<div class="card-body">
|
|
<form asp-action="Create" method="post">
|
|
<partial name="_ValidationSummary" />
|
|
|
|
<div class="d-flex align-items-center gap-2 mb-3 pb-2 border-bottom">
|
|
<h5 class="card-title mb-0">Basic Information</h5>
|
|
<a tabindex="0" class="help-icon" role="button"
|
|
data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="focus"
|
|
data-bs-title="Basic Information"
|
|
data-bs-content="First Name, Last Name, and Email are required. The email is used as the login username — it must be unique across the system. Employee Number is an optional internal reference. The user can update their name and phone from their own Profile page after logging in.">
|
|
<i class="bi bi-question-circle"></i>
|
|
</a>
|
|
</div>
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-md-6">
|
|
<label asp-for="FirstName" class="form-label">First Name *</label>
|
|
<input asp-for="FirstName" class="form-control" />
|
|
<span asp-validation-for="FirstName" class="text-danger"></span>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label asp-for="LastName" class="form-label">Last Name *</label>
|
|
<input asp-for="LastName" class="form-control" />
|
|
<span asp-validation-for="LastName" class="text-danger"></span>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label asp-for="Email" class="form-label">Email *</label>
|
|
<input asp-for="Email" class="form-control" type="email" />
|
|
<span asp-validation-for="Email" class="text-danger"></span>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label asp-for="Password" class="form-label">Password *</label>
|
|
<input asp-for="Password" class="form-control" type="password" />
|
|
<span asp-validation-for="Password" class="text-danger"></span>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label asp-for="EmployeeNumber" class="form-label">Employee Number</label>
|
|
<input asp-for="EmployeeNumber" class="form-control" />
|
|
<span asp-validation-for="EmployeeNumber" class="text-danger"></span>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label asp-for="Phone" class="form-label">Phone</label>
|
|
<input asp-for="Phone" class="form-control" />
|
|
<span asp-validation-for="Phone" class="text-danger"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center gap-2 mb-3 pb-2 border-bottom">
|
|
<h5 class="card-title mb-0">Role & Department</h5>
|
|
<a tabindex="0" class="help-icon" role="button"
|
|
data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="focus"
|
|
data-bs-title="Role & Department"
|
|
data-bs-content="Role controls default access level: Viewer = read-only, Worker = day-to-day tasks, Manager = broader access, Company Admin = full access to everything. Department and Position are informational and appear on the user's profile. Hire Date is used for record-keeping.">
|
|
<i class="bi bi-question-circle"></i>
|
|
</a>
|
|
</div>
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-md-4">
|
|
<label asp-for="CompanyRole" class="form-label">Role *</label>
|
|
<select asp-for="CompanyRole" class="form-select">
|
|
<option value="Viewer">Viewer (Read-only)</option>
|
|
<option value="Worker">Worker</option>
|
|
<option value="Manager">Manager</option>
|
|
<option value="CompanyAdmin">Company Admin</option>
|
|
</select>
|
|
<span asp-validation-for="CompanyRole" class="text-danger"></span>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label asp-for="Department" class="form-label">Department</label>
|
|
<input asp-for="Department" class="form-control" />
|
|
<span asp-validation-for="Department" class="text-danger"></span>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label asp-for="Position" class="form-label">Position</label>
|
|
<input asp-for="Position" class="form-control" />
|
|
<span asp-validation-for="Position" class="text-danger"></span>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label asp-for="HireDate" class="form-label">Hire Date</label>
|
|
<input asp-for="HireDate" class="form-control" type="date" />
|
|
<span asp-validation-for="HireDate" class="text-danger"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center gap-2 mb-3 pb-2 border-bottom">
|
|
<h5 class="card-title mb-0">Permissions</h5>
|
|
<a tabindex="0" class="help-icon" role="button"
|
|
data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="focus"
|
|
data-bs-title="Permissions"
|
|
data-bs-content="Fine-grained permissions let you grant specific capabilities beyond what the Role provides. Company Admin automatically receives all permissions and the checkboxes will be locked. For other roles, check only what this user needs. Permissions can be updated at any time from the Edit page.">
|
|
<i class="bi bi-question-circle"></i>
|
|
</a>
|
|
</div>
|
|
<div id="companyAdminAlert" class="alert alert-info alert-permanent" style="display: none;">
|
|
<i class="bi bi-info-circle me-2"></i>
|
|
<strong>Company Admins automatically have all permissions.</strong> These checkboxes are disabled because Company Admins always have full access to all features.
|
|
</div>
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input asp-for="CanManageJobs" class="form-check-input permission-checkbox" />
|
|
<label asp-for="CanManageJobs" class="form-check-label">Can Manage Jobs</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input asp-for="CanManageInventory" class="form-check-input permission-checkbox" />
|
|
<label asp-for="CanManageInventory" class="form-check-label">Can Manage Inventory</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input asp-for="CanManageCustomers" class="form-check-input permission-checkbox" />
|
|
<label asp-for="CanManageCustomers" class="form-check-label">Can Manage Customers</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input asp-for="CanCreateQuotes" class="form-check-input permission-checkbox" />
|
|
<label asp-for="CanCreateQuotes" class="form-check-label">Can Create Quotes</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input asp-for="CanApproveQuotes" class="form-check-input permission-checkbox" />
|
|
<label asp-for="CanApproveQuotes" class="form-check-label">Can Approve Quotes</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input asp-for="CanManageCalendar" class="form-check-input permission-checkbox" />
|
|
<label asp-for="CanManageCalendar" class="form-check-label">Can Manage Calendar</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input asp-for="CanViewCalendar" class="form-check-input permission-checkbox" />
|
|
<label asp-for="CanViewCalendar" class="form-check-label">Can View Calendar</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input asp-for="CanManageProducts" class="form-check-input permission-checkbox" />
|
|
<label asp-for="CanManageProducts" class="form-check-label">Can Manage Products</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input asp-for="CanViewProducts" class="form-check-input permission-checkbox" />
|
|
<label asp-for="CanViewProducts" class="form-check-label">Can View Products</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input asp-for="CanManageEquipment" class="form-check-input permission-checkbox" />
|
|
<label asp-for="CanManageEquipment" class="form-check-label">Can Manage Equipment</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input asp-for="CanManageVendors" class="form-check-input permission-checkbox" />
|
|
<label asp-for="CanManageVendors" class="form-check-label">Can Manage Vendors</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input asp-for="CanManageMaintenance" class="form-check-input permission-checkbox" />
|
|
<label asp-for="CanManageMaintenance" class="form-check-label">Can Manage Maintenance</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input asp-for="CanManageInvoices" class="form-check-input permission-checkbox" />
|
|
<label asp-for="CanManageInvoices" class="form-check-label">Can Manage Invoices</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input asp-for="CanViewReports" class="form-check-input permission-checkbox" />
|
|
<label asp-for="CanViewReports" class="form-check-label">Can View Reports</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex gap-2 justify-content-end">
|
|
<a asp-action="Index" class="btn btn-outline-secondary">Cancel</a>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="bi bi-save me-1"></i>Create User
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@section Scripts {
|
|
@{
|
|
await Html.RenderPartialAsync("_ValidationScriptsPartial");
|
|
}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const roleSelect = document.getElementById('CompanyRole');
|
|
const permissionCheckboxes = document.querySelectorAll('.permission-checkbox');
|
|
const adminAlert = document.getElementById('companyAdminAlert');
|
|
|
|
function updatePermissionState() {
|
|
const isCompanyAdmin = roleSelect.value === 'CompanyAdmin';
|
|
|
|
// Show/hide alert
|
|
adminAlert.style.display = isCompanyAdmin ? 'block' : 'none';
|
|
|
|
// Check all and disable if Company Admin, otherwise enable
|
|
permissionCheckboxes.forEach(checkbox => {
|
|
if (isCompanyAdmin) {
|
|
checkbox.checked = true;
|
|
checkbox.disabled = true;
|
|
} else {
|
|
checkbox.disabled = false;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Run on page load
|
|
updatePermissionState();
|
|
|
|
// Run when role changes
|
|
roleSelect.addEventListener('change', updatePermissionState);
|
|
});
|
|
</script>
|
|
}
|