From fd5592dbdaef4399ff1a3af49f3bb795dc094588 Mon Sep 17 00:00:00 2001
From: DariusIII <dkrisan@gmail.com>
Date: Thu, 10 Apr 2025 16:24:52 +0200
Subject: [PATCH] Update user-add and list templates

---
 resources/views/themes/admin/user-edit.tpl | 407 +++++++++++++++------
 resources/views/themes/admin/user-list.tpl |   2 +-
 2 files changed, 292 insertions(+), 117 deletions(-)

diff --git a/resources/views/themes/admin/user-edit.tpl b/resources/views/themes/admin/user-edit.tpl
index 27e1f0653..420e31e43 100644
--- a/resources/views/themes/admin/user-edit.tpl
+++ b/resources/views/themes/admin/user-edit.tpl
@@ -1,116 +1,291 @@
-<div class="card card-body">
-	<h1>{$title}</h1>
-	{if isset($error) && $error != ''}
-		<div class="error">{$error}</div>
-	{/if}
-	<a class="btn btn-success" href="{{url("/admin/user-list")}}">Go back</a>
-	<form action="user-edit?action=submit" method="POST">
-		{{csrf_field()}}
-		<table class="input data table table-striped responsive-utilities jambo-table">
-			<tr>
-				<td>Name:</td>
-				<td>
-					<input type="hidden" name="id" {if !empty($user)}value="{$user.id}"{else}{/if}/>
-					<input autocomplete="off" class="long" name="username" type="text"
-						   {if !empty($user)}value="{$user.username}"{else}{/if}/>
-				</td>
-			</tr>
-			<tr>
-				<td>Email:</td>
-				<td>
-					<input autocomplete="off" class="long" name="email" type="text"
-						   {if !empty($user)}value="{$user.email}"{else}{/if} />
-				</td>
-			</tr>
-			<tr>
-				<td>Password:</td>
-				<td>
-					<input autocomplete="off" class="long" name="password" type="password" value=""/>
-					{if !empty($user.id)}
-						<div class="hint">Only enter a password if you want to change it.</div>
-					{/if}
-				</td>
-			</tr>
-			<tr>
-				<td><label for="role">Role:</label></td>
-				<td>
-					{html_radios id="role" name="role" values=$role_ids output=$role_names selected=$user.role.id separator="<br />"}
-				</td>
-			</tr>
-			{if !empty($user.id)}
-				<tr>
-					<td>Grabs:</td>
-					<td>
-						<input class="short" name="grabs" type="text" value="{$user.grabs}" />
-					</td>
-				</tr>
-				<tr>
-					<td>Invites:</td>
-					<td>
-						<input class="short" name="invites" type="text" value="{$user.invites}" />
-					</td>
-				</tr>
-			<tr>
-				<td>Movie View:</td>
-				<td>
-					<input name="movieview" type="checkbox" value=1 {if $user.movieview==1}checked="checked"{/if}" />
-				</td>
-			</tr>
-			<tr>
-				<td>XXX View:</td>
-				<td>
-					<input name="xxxview" type="checkbox" value=1 {if $user.xxxview==1}checked="checked"{/if}" />
-				</td>
-			</tr>
-			<tr>
-				<td>Music View:</td>
-				<td>
-					<input name="musicview" type="checkbox" value=1 {if $user.musicview==1}checked="checked"{/if}" />
-				</td>
-			</tr>
-			<tr>
-				<td>Console View:</td>
-				<td>
-					<input name="consoleview" type="checkbox" value=1 {if $user.consoleview==1}checked="checked"{/if}" />
-				</td>
-			</tr>
-			<tr>
-				<td>Game View:</td>
-				<td>
-					<input name="gameview"
-						   type="checkbox"
-						   value=1
-						   {if $user.gameview==1}checked="checked"{/if}" />
-				</td>
-			</tr>
-			<tr>
-				<td>Book View:</td>
-				<td>
-					<input name="bookview" type="checkbox" value=1 {if $user.bookview==1}checked="checked"{/if}" />
-				</td>
-			</tr>
-			<tr>
-				<td><label for="role">Role change date:</label></td>
-				<td>
-					<input name="rolechangedate" class="form-inline" type="text" style="width: 20%" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-autoclose="true" data-date-today-highlight="true" data-date-clear-btn="true" value="{$user.rolechangedate}"/>
-				</td>
-			</tr>
-			{/if}
-			<tr>
-				<td><label for="notes">Notes:</label></td>
-				<td>
-					<input id="notes" name='notes' type="text" value="{$user.notes|escape:htmlall}"/>
-				</td>
-			</tr>
-			<tr>
-				<td></td>
-				<td>
-					<input class="btn btn-success" type="submit" value="Save"/>
-					{if !empty($user.id) && $user->role->id != 2}<a class="confirm_action btn btn-danger"
-																	href="{{url("/admin/user-delete?id={$user.id}")}}">
-							Delete user</a>{/if}
-				</td>
-			</tr>
-		</table>
-	</form>
-</div>
+<div class="card">
+				    <div class="card-header">
+				        <div class="d-flex justify-content-between align-items-center">
+				            <h4 class="mb-0">{$title}</h4>
+				            <a href="{{url("/admin/user-list")}}" class="btn btn-outline-secondary">
+				                <i class="fa fa-arrow-left me-2"></i>Back to Users
+				            </a>
+				        </div>
+				    </div>
+
+				    <div class="card-body">
+				        {if isset($error) && $error != ''}
+				            <div class="alert alert-danger mb-4">
+				                <i class="fa fa-exclamation-circle me-2"></i>{$error}
+				            </div>
+				        {/if}
+
+				        <form action="{{url("/admin/user-edit?action=submit")}}" method="POST" id="userEditForm">
+				            {{csrf_field()}}
+				            <input type="hidden" name="id" value="{if !empty($user)}{$user.id}{/if}"/>
+
+				            <div class="row">
+				                <!-- User Information Section -->
+				                <div class="col-lg-6">
+				                    <div class="card mb-4">
+				                        <div class="card-header bg-light">
+				                            <h5 class="mb-0"><i class="fa fa-user me-2"></i>User Information</h5>
+				                        </div>
+				                        <div class="card-body">
+				                            <div class="mb-3">
+				                                <label for="username" class="form-label fw-bold">Username:</label>
+				                                <input type="text" class="form-control" id="username" name="username"
+				                                       value="{if !empty($user)}{$user.username}{/if}" required autocomplete="off">
+				                            </div>
+
+				                            <div class="mb-3">
+				                                <label for="email" class="form-label fw-bold">Email Address:</label>
+				                                <input type="email" class="form-control" id="email" name="email"
+				                                       value="{if !empty($user)}{$user.email}{/if}" required autocomplete="off">
+				                            </div>
+
+				                            <div class="mb-3">
+				                                <label for="password" class="form-label fw-bold">Password:</label>
+				                                <input type="password" class="form-control" id="password" name="password" autocomplete="off">
+				                                {if !empty($user.id)}
+				                                    <div class="form-text text-muted">Only enter a password if you want to change it.</div>
+				                                {/if}
+				                            </div>
+
+				                            <div class="mb-3">
+				                                <label for="role" class="form-label fw-bold">User Role:</label>
+				                                <select class="form-select" id="role" name="role">
+				                                    {html_options values=$role_ids output=$role_names selected=$user.role.id}
+				                                </select>
+				                            </div>
+
+				                            {if !empty($user.id)}
+				                                <div class="mb-3">
+				                                    <label for="rolechangedate" class="form-label fw-bold">Role Change Date:</label>
+				                                    <input type="text" class="form-control" id="rolechangedate" name="rolechangedate"
+				                                           data-provide="datepicker" data-date-format="yyyy-mm-dd"
+				                                           data-date-autoclose="true" data-date-today-highlight="true"
+				                                           data-date-clear-btn="true" value="{$user.rolechangedate}">
+				                                </div>
+				                            {/if}
+
+				                            <div class="mb-3">
+				                                <label for="notes" class="form-label fw-bold">Notes:</label>
+				                                <input type="text" class="form-control" id="notes" name="notes"
+				                                       value="{$user.notes|escape:htmlall}">
+				                            </div>
+				                        </div>
+				                    </div>
+				                </div>
+
+				                <!-- User Permissions & Stats Section -->
+				                <div class="col-lg-6">
+				                    {if !empty($user.id)}
+				                        <div class="card mb-4">
+				                            <div class="card-header bg-light">
+				                                <h5 class="mb-0"><i class="fa fa-chart-bar me-2"></i>User Statistics</h5>
+				                            </div>
+				                            <div class="card-body">
+				                                <div class="row mb-3">
+				                                    <div class="col-md-6">
+				                                        <label for="grabs" class="form-label fw-bold">Grabs:</label>
+				                                        <input type="number" class="form-control" id="grabs" name="grabs"
+				                                               value="{$user.grabs}" min="0">
+				                                    </div>
+				                                    <div class="col-md-6">
+				                                        <label for="invites" class="form-label fw-bold">Invites:</label>
+				                                        <input type="number" class="form-control" id="invites" name="invites"
+				                                               value="{$user.invites}" min="0">
+				                                    </div>
+				                                </div>
+				                            </div>
+				                        </div>
+
+				                        <div class="card">
+				                            <div class="card-header bg-light">
+				                                <h5 class="mb-0"><i class="fa fa-lock me-2"></i>Access Permissions</h5>
+				                            </div>
+				                            <div class="card-body">
+				                                <div class="row">
+				                                    <div class="col-md-6">
+				                                        <div class="form-check mb-3">
+				                                            <input class="form-check-input" type="checkbox" id="movieview"
+				                                                   name="movieview" value="1" {if $user.movieview==1}checked{/if}>
+				                                            <label class="form-check-label" for="movieview">
+				                                                Movie View
+				                                            </label>
+				                                        </div>
+
+				                                        <div class="form-check mb-3">
+				                                            <input class="form-check-input" type="checkbox" id="musicview"
+				                                                   name="musicview" value="1" {if $user.musicview==1}checked{/if}>
+				                                            <label class="form-check-label" for="musicview">
+				                                                Music View
+				                                            </label>
+				                                        </div>
+
+				                                        <div class="form-check mb-3">
+				                                            <input class="form-check-input" type="checkbox" id="gameview"
+				                                                   name="gameview" value="1" {if $user.gameview==1}checked{/if}>
+				                                            <label class="form-check-label" for="gameview">
+				                                                Game View
+				                                            </label>
+				                                        </div>
+				                                    </div>
+
+				                                    <div class="col-md-6">
+				                                        <div class="form-check mb-3">
+				                                            <input class="form-check-input" type="checkbox" id="xxxview"
+				                                                   name="xxxview" value="1" {if $user.xxxview==1}checked{/if}>
+				                                            <label class="form-check-label" for="xxxview">
+				                                                XXX View
+				                                            </label>
+				                                        </div>
+
+				                                        <div class="form-check mb-3">
+				                                            <input class="form-check-input" type="checkbox" id="consoleview"
+				                                                   name="consoleview" value="1" {if $user.consoleview==1}checked{/if}>
+				                                            <label class="form-check-label" for="consoleview">
+				                                                Console View
+				                                            </label>
+				                                        </div>
+
+				                                        <div class="form-check mb-3">
+				                                            <input class="form-check-input" type="checkbox" id="bookview"
+				                                                   name="bookview" value="1" {if $user.bookview==1}checked{/if}>
+				                                            <label class="form-check-label" for="bookview">
+				                                                Book View
+				                                            </label>
+				                                        </div>
+				                                    </div>
+				                                </div>
+				                            </div>
+				                        </div>
+				                    {/if}
+				                </div>
+				            </div>
+				        </form>
+				    </div>
+
+				    <div class="card-footer">
+				        <div class="d-flex justify-content-between">
+				            <a href="{{url("/admin/user-list")}}" class="btn btn-outline-secondary">
+				                <i class="fa fa-times me-2"></i>Cancel
+				            </a>
+				            <div>
+				                {if !empty($user.id) && $user->role->id != 2}
+				                    <a href="{{url("/admin/user-delete?id={$user.id}")}}" class="btn btn-danger confirm_action me-2">
+				                        <i class="fa fa-trash me-2"></i>Delete User
+				                    </a>
+				                {/if}
+				                <button type="submit" form="userEditForm" class="btn btn-success">
+				                    <i class="fa fa-save me-2"></i>Save User
+				                </button>
+				            </div>
+				        </div>
+				    </div>
+				</div>
+
+				<script>
+				{literal}
+				document.addEventListener('DOMContentLoaded', function() {
+				    // Initialize tooltips
+				    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+				    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+				        return new bootstrap.Tooltip(tooltipTriggerEl);
+				    });
+
+				    // Basic form validation
+				    const form = document.getElementById('userEditForm');
+				    if (form) {
+				        form.addEventListener('submit', function(event) {
+				            const username = document.getElementById('username').value.trim();
+				            const email = document.getElementById('email').value.trim();
+
+				            if (!username) {
+				                event.preventDefault();
+				                alert('Username is required');
+				                return false;
+				            }
+
+				            if (!email) {
+				                event.preventDefault();
+				                alert('Email address is required');
+				                return false;
+				            }
+
+				            // Validate email format
+				            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+				            if (!emailRegex.test(email)) {
+				                event.preventDefault();
+				                alert('Please enter a valid email address');
+				                return false;
+				            }
+				        });
+				    }
+
+				    // Confirm deletion dialog
+				    document.querySelectorAll('.confirm_action').forEach(function(element) {
+				        element.addEventListener('click', function(e) {
+				            if (!confirm('Are you sure you want to delete this user? This cannot be undone.')) {
+				                e.preventDefault();
+				                return false;
+				            }
+				        });
+				    });
+				});
+				{/literal}
+				</script>
+
+				<style>
+				{literal}
+				/* Form styling improvements */
+				.form-label {
+				    margin-bottom: 0.5rem;
+				}
+
+				/* Card styling */
+				.card {
+				    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+				    border-radius: 0.375rem;
+				}
+
+				.card-header {
+				    padding: 0.75rem 1.25rem;
+				}
+
+				/* Form check adjustments */
+				.form-check-input {
+				    margin-top: 0.25rem;
+				}
+
+				/* Role radio buttons */
+				#role {
+				    margin-left: 0.5rem;
+				}
+
+				/* Responsive adjustments */
+				@media (max-width: 767.98px) {
+				    .card-footer .btn {
+				        padding: 0.375rem 0.75rem;
+				    }
+
+				    .card-footer .d-flex {
+				        flex-direction: column;
+				        gap: 0.5rem;
+				    }
+
+				    .card-footer .d-flex a,
+				    .card-footer .d-flex div,
+				    .card-footer .d-flex button {
+				        width: 100%;
+				    }
+
+				    .card-footer .d-flex div {
+				        display: flex;
+				        flex-direction: column;
+				        gap: 0.5rem;
+				    }
+
+				    .card-footer .d-flex div a,
+				    .card-footer .d-flex div button {
+				        margin-right: 0 !important;
+				    }
+				}
+				{/literal}
+				</style>
diff --git a/resources/views/themes/admin/user-list.tpl b/resources/views/themes/admin/user-list.tpl
index ea745dd2b..a9784f4b6 100644
--- a/resources/views/themes/admin/user-list.tpl
+++ b/resources/views/themes/admin/user-list.tpl
@@ -2,7 +2,7 @@
         <div class="card-header">
             <div class="d-flex justify-content-between align-items-center">
                 <h4 class="mb-0">{$title}</h4>
-                <a href="{{url("/admin/user-add")}}" class="btn btn-outline-success">
+                <a href="{{url("/admin/user-edit?action=add")}}" class="btn btn-outline-success">
                     <i class="fa fa-plus me-2"></i>Add New User
                 </a>
             </div>