Marwan Alwali a710d1c4d8 update
2025-09-11 19:01:55 +03:00

281 lines
12 KiB
HTML

{% extends "base.html" %}
{% load static %}
{% block title %}{% if object %}Edit User{% else %}Add User{% endif %} - User Management{% endblock %}
{% block content %}
<!-- BEGIN breadcrumb -->
<ol class="breadcrumb float-xl-end">
<li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
<li class="breadcrumb-item"><a href="{% url 'accounts:user_list' %}">Users</a></li>
<li class="breadcrumb-item active">{% if object %}Edit User{% else %}Add User{% endif %}</li>
</ol>
<!-- END breadcrumb -->
<!-- BEGIN page-header -->
<h1 class="page-header">
{% if object %}Edit User{% else %}Add New User{% endif %}
<small>{% if object %}{{ object.get_full_name }}{% else %}User Management{% endif %}</small>
</h1>
<!-- END page-header -->
<form method="post" enctype="multipart/form-data" id="user-form">
{% csrf_token %}
<div class="row">
<div class="col-xl-8">
<!-- BEGIN panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<h4 class="panel-title">User Information</h4>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Username <span class="text-danger">*</span></label>
{{ form.username }}
{% if form.username.errors %}
<div class="text-danger">{{ form.username.errors.0 }}</div>
{% endif %}
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Email <span class="text-danger">*</span></label>
{{ form.email }}
{% if form.email.errors %}
<div class="text-danger">{{ form.email.errors.0 }}</div>
{% endif %}
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">First Name <span class="text-danger">*</span></label>
{{ form.first_name }}
{% if form.first_name.errors %}
<div class="text-danger">{{ form.first_name.errors.0 }}</div>
{% endif %}
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Last Name <span class="text-danger">*</span></label>
{{ form.last_name }}
{% if form.last_name.errors %}
<div class="text-danger">{{ form.last_name.errors.0 }}</div>
{% endif %}
</div>
</div>
</div>
{% if not object %}
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Password <span class="text-danger">*</span></label>
{{ form.password1 }}
{% if form.password1.errors %}
<div class="text-danger">{{ form.password1.errors.0 }}</div>
{% endif %}
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Confirm Password <span class="text-danger">*</span></label>
{{ form.password2 }}
{% if form.password2.errors %}
<div class="text-danger">{{ form.password2.errors.0 }}</div>
{% endif %}
</div>
</div>
</div>
{% endif %}
</div>
</div>
<!-- END panel -->
<!-- BEGIN panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<h4 class="panel-title">Permissions & Groups</h4>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Groups</label>
{{ form.groups }}
{% if form.groups.errors %}
<div class="text-danger">{{ form.groups.errors.0 }}</div>
{% endif %}
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<div class="form-check">
{{ form.is_staff }}
<label class="form-check-label" for="{{ form.is_staff.id_for_label }}">
Staff Status
</label>
</div>
<div class="form-check">
{{ form.is_active }}
<label class="form-check-label" for="{{ form.is_active.id_for_label }}">
Active
</label>
</div>
{% if user.is_superuser %}
<div class="form-check">
{{ form.is_superuser }}
<label class="form-check-label" for="{{ form.is_superuser.id_for_label }}">
Superuser Status
</label>
</div>
{% endif %}
</div>
</div>
</div>
{% if user.is_superuser %}
<div class="mb-3">
<label class="form-label">User Permissions</label>
{{ form.user_permissions }}
{% if form.user_permissions.errors %}
<div class="text-danger">{{ form.user_permissions.errors.0 }}</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
<!-- END panel -->
</div>
<div class="col-xl-4">
<!-- BEGIN panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<h4 class="panel-title">Form Actions</h4>
</div>
<div class="panel-body">
<div class="d-grid gap-2">
<button type="submit" class="btn btn-primary btn-lg">
<i class="fa fa-save me-2"></i>
{% if object %}Update User{% else %}Create User{% endif %}
</button>
{% if object %}
<button type="submit" name="save_and_continue" class="btn btn-success">
<i class="fa fa-save me-2"></i>Save & Continue Editing
</button>
{% else %}
<button type="submit" name="save_and_add_another" class="btn btn-info">
<i class="fa fa-plus me-2"></i>Save & Add Another
</button>
{% endif %}
<a href="{% if object %}{% url 'accounts:user_detail' object.pk %}{% else %}{% url 'accounts:user_list' %}{% endif %}" class="btn btn-secondary">
<i class="fa fa-times me-2"></i>Cancel
</a>
{% if object %}
<hr>
<a href="{% url 'accounts:user_delete' object.pk %}" class="btn btn-danger">
<i class="fa fa-trash me-2"></i>Delete User
</a>
{% endif %}
</div>
</div>
</div>
<!-- END panel -->
{% if object %}
<!-- BEGIN panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<h4 class="panel-title">User Information</h4>
</div>
<div class="panel-body">
<table class="table table-borderless">
<tr>
<td class="fw-bold">Date Joined:</td>
<td>{{ object.date_joined|date:"M d, Y" }}</td>
</tr>
<tr>
<td class="fw-bold">Last Login:</td>
<td>{{ object.last_login|date:"M d, Y H:i"|default:"Never" }}</td>
</tr>
<tr>
<td class="fw-bold">Status:</td>
<td>
<span class="badge bg-{{ object.is_active|yesno:'success,danger' }}">
{{ object.is_active|yesno:'Active,Inactive' }}
</span>
</td>
</tr>
</table>
</div>
</div>
<!-- END panel -->
{% endif %}
</div>
</div>
</form>
{% endblock %}
{% block js %}
<script>
$(document).ready(function() {
// Form validation
$('#user-form').on('submit', function(e) {
var isValid = true;
var errors = [];
// Required field validation
if (!$('#id_username').val().trim()) {
errors.push('Username is required');
isValid = false;
}
if (!$('#id_email').val().trim()) {
errors.push('Email is required');
isValid = false;
}
if (!$('#id_first_name').val().trim()) {
errors.push('First name is required');
isValid = false;
}
if (!$('#id_last_name').val().trim()) {
errors.push('Last name is required');
isValid = false;
}
{% if not object %}
// Password validation for new users
var password1 = $('#id_password1').val();
var password2 = $('#id_password2').val();
if (!password1) {
errors.push('Password is required');
isValid = false;
} else if (password1 !== password2) {
errors.push('Passwords do not match');
isValid = false;
}
{% endif %}
if (!isValid) {
e.preventDefault();
toastr.error('Please correct the following errors:<br>' + errors.join('<br>'));
}
});
});
</script>
{% endblock %}