From beaf181aa030b52af2402d7431c4a862992084a6 Mon Sep 17 00:00:00 2001
From: Hosteroid <office@hosteroid.uk>
Date: Sun, 1 Feb 2026 12:51:41 +0200
Subject: [PATCH] Refactor user create view and add JS validation

Redesign the users/create view: move and center the form inside a card, switch to a responsive grid layout, add icons/placeholders, and improve field styling (username, email, role, passwords). Add client-side features: password show/hide toggles and live password confirmation validation. Replace footer action layout with inline action buttons and add an informational panel explaining post-creation behavior. Cosmetic/tailwind updates including container width change to max-w-3xl and small accessibility/UX improvements (autofocus, input hints).
---
 app/Views/users/create.php | 304 +++++++++++++++++++++++++++----------
 1 file changed, 228 insertions(+), 76 deletions(-)

diff --git a/app/Views/users/create.php b/app/Views/users/create.php
index 202d6a6..c9553d3 100644
--- a/app/Views/users/create.php
+++ b/app/Views/users/create.php
@@ -6,96 +6,248 @@ $pageIcon = 'fas fa-user-plus';
 ob_start();
 ?>
 
-<form method="POST" action="/users/store" class="max-w-2xl">
-    <?= csrf_field() ?>
+<div class="max-w-3xl mx-auto">
     <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
-            <h3 class="text-lg font-semibold text-gray-900">User Information</h3>
+        <div class="px-6 py-4 border-b border-gray-200">
+            <h2 class="text-lg font-semibold text-gray-900 flex items-center">
+                <i class="fas fa-user text-gray-400 mr-2 text-sm"></i>
+                User Information
+            </h2>
         </div>
 
-        <div class="p-6 space-y-4">
-            <!-- Full Name -->
-            <div>
-                <label for="full_name" class="block text-sm font-medium text-gray-700 mb-2">
-                    Full Name <span class="text-red-500">*</span>
-                </label>
-                <input type="text" id="full_name" name="full_name" required
-                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
-            </div>
+        <div class="p-6">
+            <form method="POST" action="/users/store" class="space-y-5">
+                <?= csrf_field() ?>
 
-            <!-- Username -->
-            <div>
-                <label for="username" class="block text-sm font-medium text-gray-700 mb-2">
-                    Username <span class="text-red-500">*</span>
-                </label>
-                <input type="text" id="username" name="username" required pattern="[a-zA-Z0-9_]+"
-                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
-                <p class="text-xs text-gray-500 mt-1">Letters, numbers, and underscores only</p>
-            </div>
+                <!-- Name & Username Row -->
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
+                    <!-- Full Name -->
+                    <div>
+                        <label for="full_name" class="block text-sm font-medium text-gray-700 mb-1.5">
+                            Full Name <span class="text-red-500">*</span>
+                        </label>
+                        <input type="text" 
+                               id="full_name" 
+                               name="full_name" 
+                               required
+                               autofocus
+                               class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
+                               placeholder="John Doe">
+                        <p class="mt-1.5 text-xs text-gray-500">
+                            The user's display name
+                        </p>
+                    </div>
 
-            <!-- Email -->
-            <div>
-                <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
-                    Email Address <span class="text-red-500">*</span>
-                </label>
-                <input type="email" id="email" name="email" required
-                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
-            </div>
+                    <!-- Username -->
+                    <div>
+                        <label for="username" class="block text-sm font-medium text-gray-700 mb-1.5">
+                            Username <span class="text-red-500">*</span>
+                        </label>
+                        <div class="relative">
+                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
+                                <i class="fas fa-at text-sm"></i>
+                            </span>
+                            <input type="text" 
+                                   id="username" 
+                                   name="username" 
+                                   required 
+                                   pattern="[a-zA-Z0-9_]+"
+                                   class="w-full pl-9 pr-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
+                                   placeholder="johndoe">
+                        </div>
+                        <p class="mt-1.5 text-xs text-gray-500">
+                            Letters, numbers, and underscores only
+                        </p>
+                    </div>
+                </div>
 
-            <!-- Role -->
-            <div>
-                <label for="role" class="block text-sm font-medium text-gray-700 mb-2">
-                    Role <span class="text-red-500">*</span>
-                </label>
-                <select id="role" name="role" required
-                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
-                    <option value="user">User</option>
-                    <option value="admin">Admin</option>
-                </select>
-                <p class="text-xs text-gray-500 mt-1">Admins have full system access</p>
-            </div>
+                <!-- Email & Role Row -->
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
+                    <!-- Email -->
+                    <div>
+                        <label for="email" class="block text-sm font-medium text-gray-700 mb-1.5">
+                            Email Address <span class="text-red-500">*</span>
+                        </label>
+                        <div class="relative">
+                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
+                                <i class="fas fa-envelope text-sm"></i>
+                            </span>
+                            <input type="email" 
+                                   id="email" 
+                                   name="email" 
+                                   required
+                                   class="w-full pl-9 pr-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
+                                   placeholder="john@example.com">
+                        </div>
+                        <p class="mt-1.5 text-xs text-gray-500">
+                            Used for login and notifications
+                        </p>
+                    </div>
 
-            <!-- Password -->
-            <div>
-                <label for="password" class="block text-sm font-medium text-gray-700 mb-2">
-                    Password <span class="text-red-500">*</span>
-                </label>
-                <input type="password" id="password" name="password" required minlength="8"
-                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
-                <p class="text-xs text-gray-500 mt-1">Minimum 8 characters</p>
-            </div>
+                    <!-- Role -->
+                    <div>
+                        <label for="role" class="block text-sm font-medium text-gray-700 mb-1.5">
+                            Role <span class="text-red-500">*</span>
+                        </label>
+                        <div class="relative">
+                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
+                                <i class="fas fa-shield-alt text-sm"></i>
+                            </span>
+                            <select id="role" 
+                                    name="role" 
+                                    required
+                                    class="w-full pl-9 pr-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm appearance-none bg-white">
+                                <option value="user">User</option>
+                                <option value="admin">Admin</option>
+                            </select>
+                            <span class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-gray-400">
+                                <i class="fas fa-chevron-down text-xs"></i>
+                            </span>
+                        </div>
+                        <p class="mt-1.5 text-xs text-gray-500">
+                            Admins have full system access
+                        </p>
+                    </div>
+                </div>
 
-            <!-- Confirm Password -->
-            <div>
-                <label for="password_confirm" class="block text-sm font-medium text-gray-700 mb-2">
-                    Confirm Password <span class="text-red-500">*</span>
-                </label>
-                <input type="password" id="password_confirm" name="password_confirm" required minlength="8"
-                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
-            </div>
+                <!-- Password Section -->
+                <div class="border-t border-gray-200 pt-5 mt-5">
+                    <h3 class="text-sm font-semibold text-gray-900 mb-4 flex items-center">
+                        <i class="fas fa-lock text-gray-400 mr-2"></i>
+                        Password
+                    </h3>
+                    
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
+                        <!-- Password -->
+                        <div>
+                            <label for="password" class="block text-sm font-medium text-gray-700 mb-1.5">
+                                Password <span class="text-red-500">*</span>
+                            </label>
+                            <div class="relative">
+                                <input type="password" 
+                                       id="password" 
+                                       name="password" 
+                                       required 
+                                       minlength="8"
+                                       class="w-full px-3 py-2.5 pr-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
+                                       placeholder="••••••••">
+                                <button type="button" 
+                                        onclick="togglePassword('password')"
+                                        class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600">
+                                    <i class="fas fa-eye text-sm" id="password-toggle-icon"></i>
+                                </button>
+                            </div>
+                            <p class="mt-1.5 text-xs text-gray-500">
+                                Minimum 8 characters
+                            </p>
+                        </div>
 
-            <div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
-                <p class="text-xs text-blue-800">
-                    <i class="fas fa-info-circle mr-1"></i>
-                    <strong>Note:</strong> Admin-created users are automatically verified and can log in immediately.
-                </p>
-            </div>
-        </div>
+                        <!-- Confirm Password -->
+                        <div>
+                            <label for="password_confirm" class="block text-sm font-medium text-gray-700 mb-1.5">
+                                Confirm Password <span class="text-red-500">*</span>
+                            </label>
+                            <div class="relative">
+                                <input type="password" 
+                                       id="password_confirm" 
+                                       name="password_confirm" 
+                                       required 
+                                       minlength="8"
+                                       class="w-full px-3 py-2.5 pr-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
+                                       placeholder="••••••••">
+                                <button type="button" 
+                                        onclick="togglePassword('password_confirm')"
+                                        class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600">
+                                    <i class="fas fa-eye text-sm" id="password_confirm-toggle-icon"></i>
+                                </button>
+                            </div>
+                            <p class="mt-1.5 text-xs text-gray-500">
+                                Re-enter the password to confirm
+                            </p>
+                        </div>
+                    </div>
+                </div>
 
-        <div class="px-6 py-4 border-t border-gray-200 bg-gray-50 flex items-center justify-between">
-            <a href="/users" class="text-gray-600 hover:text-gray-800 text-sm font-medium">
-                <i class="fas fa-arrow-left mr-1"></i> Cancel
-            </a>
-            <button type="submit" class="inline-flex items-center px-4 py-2.5 bg-primary text-white text-sm rounded-lg hover:bg-primary-dark transition-colors font-medium">
-                <i class="fas fa-save mr-2"></i>
-                Create User
-            </button>
+                <!-- Action Buttons -->
+                <div class="flex flex-col sm:flex-row gap-3 pt-3">
+                    <button type="submit" 
+                            class="inline-flex items-center justify-center px-5 py-2.5 bg-primary hover:bg-primary-dark text-white rounded-lg font-medium transition-colors text-sm">
+                        <i class="fas fa-user-plus mr-2"></i>
+                        Create User
+                    </button>
+                    <a href="/users" 
+                       class="inline-flex items-center justify-center px-5 py-2.5 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors text-sm">
+                        <i class="fas fa-times mr-2"></i>
+                        Cancel
+                    </a>
+                </div>
+            </form>
         </div>
     </div>
-</form>
+
+    <!-- Info Section -->
+    <div class="mt-4 bg-blue-50 border border-blue-200 rounded-lg p-4">
+        <div class="flex items-start">
+            <div class="flex-shrink-0">
+                <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
+                    <i class="fas fa-info-circle text-white"></i>
+                </div>
+            </div>
+            <div class="ml-3">
+                <h3 class="text-sm font-semibold text-gray-900 mb-1">What happens next?</h3>
+                <ul class="text-xs text-gray-600 space-y-1">
+                    <li class="flex items-center">
+                        <i class="fas fa-circle text-blue-500" style="font-size: 6px;"></i>
+                        <span class="ml-2">Admin-created users are automatically verified and can log in immediately</span>
+                    </li>
+                    <li class="flex items-center">
+                        <i class="fas fa-circle text-blue-500" style="font-size: 6px;"></i>
+                        <span class="ml-2">Users can manage their own domains and notification groups</span>
+                    </li>
+                    <li class="flex items-center">
+                        <i class="fas fa-circle text-blue-500" style="font-size: 6px;"></i>
+                        <span class="ml-2">Admin users have access to system settings and user management</span>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+function togglePassword(fieldId) {
+    const field = document.getElementById(fieldId);
+    const icon = document.getElementById(fieldId + '-toggle-icon');
+    
+    if (field.type === 'password') {
+        field.type = 'text';
+        icon.classList.remove('fa-eye');
+        icon.classList.add('fa-eye-slash');
+    } else {
+        field.type = 'password';
+        icon.classList.remove('fa-eye-slash');
+        icon.classList.add('fa-eye');
+    }
+}
+
+// Password confirmation validation
+document.getElementById('password_confirm').addEventListener('input', function() {
+    const password = document.getElementById('password').value;
+    const confirm = this.value;
+    
+    if (confirm && password !== confirm) {
+        this.setCustomValidity('Passwords do not match');
+        this.classList.add('border-red-300');
+        this.classList.remove('border-gray-300');
+    } else {
+        this.setCustomValidity('');
+        this.classList.remove('border-red-300');
+        this.classList.add('border-gray-300');
+    }
+});
+</script>
 
 <?php
 $content = ob_get_clean();
 require __DIR__ . '/../layout/base.php';
 ?>
-