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).
This commit is contained in:
Hosteroid
@@ -6,96 +6,248 @@ $pageIcon = 'fas fa-user-plus';
|
|||||||
ob_start();
|
ob_start();
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<form method="POST" action="/users/store" class="max-w-2xl">
|
<div class="max-w-3xl mx-auto">
|
||||||
<?= csrf_field() ?>
|
|
||||||
<div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
|
<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">
|
<div class="px-6 py-4 border-b border-gray-200">
|
||||||
<h3 class="text-lg font-semibold text-gray-900">User Information</h3>
|
<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>
|
||||||
|
|
||||||
<div class="p-6 space-y-4">
|
<div class="p-6">
|
||||||
|
<form method="POST" action="/users/store" class="space-y-5">
|
||||||
|
<?= csrf_field() ?>
|
||||||
|
|
||||||
|
<!-- Name & Username Row -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||||
<!-- Full Name -->
|
<!-- Full Name -->
|
||||||
<div>
|
<div>
|
||||||
<label for="full_name" class="block text-sm font-medium text-gray-700 mb-2">
|
<label for="full_name" class="block text-sm font-medium text-gray-700 mb-1.5">
|
||||||
Full Name <span class="text-red-500">*</span>
|
Full Name <span class="text-red-500">*</span>
|
||||||
</label>
|
</label>
|
||||||
<input type="text" id="full_name" name="full_name" required
|
<input type="text"
|
||||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
|
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>
|
</div>
|
||||||
|
|
||||||
<!-- Username -->
|
<!-- Username -->
|
||||||
<div>
|
<div>
|
||||||
<label for="username" class="block text-sm font-medium text-gray-700 mb-2">
|
<label for="username" class="block text-sm font-medium text-gray-700 mb-1.5">
|
||||||
Username <span class="text-red-500">*</span>
|
Username <span class="text-red-500">*</span>
|
||||||
</label>
|
</label>
|
||||||
<input type="text" id="username" name="username" required pattern="[a-zA-Z0-9_]+"
|
<div class="relative">
|
||||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
|
<span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
|
||||||
<p class="text-xs text-gray-500 mt-1">Letters, numbers, and underscores only</p>
|
<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>
|
</div>
|
||||||
|
<p class="mt-1.5 text-xs text-gray-500">
|
||||||
<!-- Email -->
|
Letters, numbers, and underscores only
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- 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>
|
|
||||||
|
|
||||||
<!-- 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>
|
|
||||||
|
|
||||||
<!-- 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>
|
|
||||||
|
|
||||||
<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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="px-6 py-4 border-t border-gray-200 bg-gray-50 flex items-center justify-between">
|
<!-- Email & Role Row -->
|
||||||
<a href="/users" class="text-gray-600 hover:text-gray-800 text-sm font-medium">
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||||
<i class="fas fa-arrow-left mr-1"></i> Cancel
|
<!-- Email -->
|
||||||
</a>
|
<div>
|
||||||
<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">
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-1.5">
|
||||||
<i class="fas fa-save mr-2"></i>
|
Email Address <span class="text-red-500">*</span>
|
||||||
Create User
|
</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>
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
|
||||||
|
<!-- 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>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
<p class="mt-1.5 text-xs text-gray-500">
|
||||||
|
Minimum 8 characters
|
||||||
|
</p>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<!-- 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>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 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
|
<?php
|
||||||
$content = ob_get_clean();
|
$content = ob_get_clean();
|
||||||
require __DIR__ . '/../layout/base.php';
|
require __DIR__ . '/../layout/base.php';
|
||||||
?>
|
?>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user