nidus-sync/html/template/sync/configuration/user-add.html

155 lines
4.2 KiB
HTML

{{ template "sync/layout/authenticated.html" . }}
{{ define "title" }}Dash{{ end }}
{{ define "extraheader" }}
<style>
.form-check-input.switch-lg {
width: 3em;
height: 1.5em;
}
.required-field::after {
content: " *";
color: red;
}
</style>
{{ end }}
{{ define "content" }}
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="card shadow">
<div class="card-header bg-white">
<div class="d-flex justify-content-between align-items-center">
<h3 class="mb-0">Add New User</h3>
</div>
</div>
<div class="card-body">
<form id="addUserForm" class="needs-validation" novalidate>
<!-- Full Name -->
<div class="mb-3">
<label for="fullName" class="form-label required-field"
>Full Name</label
>
<input
type="text"
class="form-control"
id="fullName"
required
/>
<div class="invalid-feedback">
Please provide the user's full name.
</div>
</div>
<!-- Email Address -->
<div class="mb-3">
<label for="emailAddress" class="form-label required-field"
>Email Address</label
>
<input
type="email"
class="form-control"
id="emailAddress"
required
/>
<div class="invalid-feedback">
Please provide a valid email address.
</div>
<div class="form-text">
An invitation will be sent to this email address.
</div>
</div>
<!-- Username -->
<div class="mb-3">
<label for="username" class="form-label required-field"
>Username</label
>
<input
type="text"
class="form-control"
id="username"
required
/>
<div class="invalid-feedback">Please provide a username.</div>
<div class="form-text">
Username must be unique and contain only letters, numbers, and
underscores.
</div>
</div>
<div class="row">
<!-- Role -->
<div class="col-md-6 mb-3">
<label for="userRole" class="form-label required-field"
>Role</label
>
<select class="form-select" id="userRole" required>
<option value="" selected disabled>Select a role</option>
<option value="lead">Lead</option>
<option value="technician">Technician</option>
<option value="administrator">Administrator</option>
</select>
<div class="invalid-feedback">Please select a role.</div>
</div>
<!-- Initial Status -->
<div class="col-md-6 mb-3">
<label for="initialStatus" class="form-label"
>Initial Status</label
>
<select class="form-select" id="initialStatus">
<option value="invited" selected>Invited</option>
<option value="active">Active</option>
</select>
</div>
</div>
<!-- Permissions -->
<div class="mb-4">
<label class="form-label d-block">Permissions</label>
<div class="form-check form-switch">
<input
class="form-check-input switch-lg"
type="checkbox"
id="serveWarrants"
/>
<label class="form-check-label" for="serveWarrants">
Can serve warrants
</label>
</div>
</div>
<!-- Send welcome email checkbox -->
<div class="mb-4">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
id="sendWelcomeEmail"
checked
/>
<label class="form-check-label" for="sendWelcomeEmail">
Send welcome email with login instructions
</label>
</div>
</div>
<hr />
<!-- Form actions -->
<div class="d-flex justify-content-end gap-2">
<a href="{{ .URL.SettingUser }}" class="btn btn-secondary">
Cancel
</a>
<button type="submit" class="btn btn-primary">
<i class="bi bi-person-plus me-1"></i> Add User
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
{{ end }}