Add domain status notifications & login alerts
Introduce richer notifications and domain status handling across the app. - NotificationService: Add domain status alert formatting/sending, in-app notifications for available/registered/redemption/pending_delete, richer session_new and session_failed notifications (geolocation + UA parsing) and helpers for human-readable status labels. - Auth/TwoFactor: Emit notifications for successful logins (including remember-me and 2FA) and failed login attempts; update last-login timestamp on various flows. - DomainController: Wrap bulk domain create in try/catch to handle duplicate race conditions and log failures. - WhoisService: Detect redemption_period and pending_delete statuses from WHOIS/EPP statuses. - Settings/Setting: Add settings support for notification status triggers and bump default app_version to 1.1.2; persist/update status trigger values. - Views/Layout/View helpers: Add parsing/formatting for login notification data, add new status labels/classes (available, redemption_period, pending_delete), update notification icons/colors mapping. - Top-nav & Notifications UI: Enhance dropdown with rich login/failed-login display (flags, device icons), clickable domain redirects when marking read, badge IDs for dynamic updates. - Error admin UI: Add copy error report button with robust clipboard fallback and toast UI reused from messages; improved copy UX in admin index/detail. - Installer: Add new migration 024 to installer migration lists and adjust detected toVersion to 1.1.2. - DB: Add migration file 024_add_status_notifications_v1.1.2.sql (new file). These changes add user-facing alerts for domain lifecycle events and stronger login/security notifications while improving UI feedback and robustness during bulk operations.
This commit is contained in:
Hosteroid
@@ -6,126 +6,268 @@ $pageIcon = 'fas fa-user-edit';
|
||||
ob_start();
|
||||
?>
|
||||
|
||||
<form method="POST" action="/users/update" class="max-w-2xl">
|
||||
<?= csrf_field() ?>
|
||||
<input type="hidden" name="id" value="<?= $user['id'] ?>">
|
||||
|
||||
<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-edit 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
|
||||
value="<?= htmlspecialchars($user['full_name'] ?? '') ?>"
|
||||
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/update" class="space-y-5">
|
||||
<?= csrf_field() ?>
|
||||
<input type="hidden" name="id" value="<?= $user['id'] ?>">
|
||||
|
||||
<!-- Username (Read-only) -->
|
||||
<div>
|
||||
<label for="username" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Username
|
||||
</label>
|
||||
<input type="text" id="username" value="<?= htmlspecialchars($user['username']) ?>" readonly
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-gray-50 text-gray-500 cursor-not-allowed">
|
||||
<p class="text-xs text-gray-500 mt-1">Username cannot be changed</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
|
||||
value="<?= htmlspecialchars($user['full_name'] ?? '') ?>"
|
||||
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
|
||||
value="<?= htmlspecialchars($user['email']) ?>"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
|
||||
</div>
|
||||
<!-- Username (Read-only) -->
|
||||
<div>
|
||||
<label for="username" class="block text-sm font-medium text-gray-700 mb-1.5">
|
||||
Username
|
||||
</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"
|
||||
value="<?= htmlspecialchars($user['username']) ?>"
|
||||
readonly
|
||||
class="w-full pl-9 pr-3 py-2.5 border border-gray-300 rounded-lg bg-gray-50 text-gray-500 cursor-not-allowed text-sm">
|
||||
</div>
|
||||
<p class="mt-1.5 text-xs text-gray-500">
|
||||
Username cannot be changed
|
||||
</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['role'] === 'user' ? 'selected' : '' ?>>User</option>
|
||||
<option value="admin" <?= $user['role'] === 'admin' ? 'selected' : '' ?>>Admin</option>
|
||||
</select>
|
||||
</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
|
||||
value="<?= htmlspecialchars($user['email']) ?>"
|
||||
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>
|
||||
|
||||
<!-- Status -->
|
||||
<div class="flex items-start">
|
||||
<div class="flex items-center h-5">
|
||||
<!-- 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['role'] === 'user' ? 'selected' : '' ?>>User</option>
|
||||
<option value="admin" <?= $user['role'] === 'admin' ? 'selected' : '' ?>>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>
|
||||
|
||||
<!-- Status -->
|
||||
<div class="flex items-center gap-3 bg-gray-50 border border-gray-200 rounded-lg px-4 py-3">
|
||||
<input type="checkbox" id="is_active" name="is_active" value="1"
|
||||
<?= $user['is_active'] ? 'checked' : '' ?>
|
||||
class="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary">
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<label for="is_active" class="text-sm font-medium text-gray-700">
|
||||
Active
|
||||
</label>
|
||||
<p class="text-xs text-gray-500">Inactive users cannot log in</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Password (Optional) -->
|
||||
<div class="border-t border-gray-200 pt-4 mt-4">
|
||||
<h4 class="text-sm font-semibold text-gray-900 mb-3">Change Password (Optional)</h4>
|
||||
|
||||
<div>
|
||||
<label for="password" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
New Password
|
||||
</label>
|
||||
<input type="password" id="password" name="password" 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">Leave blank to keep current password. Minimum 8 characters if changing.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Account Info -->
|
||||
<div class="bg-gray-50 border border-gray-200 rounded-lg p-3 mt-4">
|
||||
<div class="grid grid-cols-2 gap-3 text-xs">
|
||||
<div>
|
||||
<span class="text-gray-600">Email Verified:</span>
|
||||
<span class="font-semibold <?= $user['email_verified'] ? 'text-green-600' : 'text-red-600' ?>">
|
||||
<?= $user['email_verified'] ? 'Yes' : 'No' ?>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-gray-600">Member Since:</span>
|
||||
<span class="font-semibold text-gray-900">
|
||||
<?= date('M d, Y', strtotime($user['created_at'])) ?>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-gray-600">Last Login:</span>
|
||||
<span class="font-semibold text-gray-900">
|
||||
<?= $user['last_login'] ? date('M d, Y H:i', strtotime($user['last_login'])) : 'Never' ?>
|
||||
</span>
|
||||
<label for="is_active" class="text-sm font-medium text-gray-700">
|
||||
Active Account
|
||||
</label>
|
||||
<p class="text-xs text-gray-500">Inactive users cannot log in to the system</p>
|
||||
</div>
|
||||
</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>
|
||||
Update User
|
||||
</button>
|
||||
<!-- 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>
|
||||
Change Password
|
||||
</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
<!-- New Password -->
|
||||
<div>
|
||||
<label for="password" class="block text-sm font-medium text-gray-700 mb-1.5">
|
||||
New Password
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
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">
|
||||
Leave blank to keep current password
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Confirm Password -->
|
||||
<div>
|
||||
<label for="password_confirm" class="block text-sm font-medium text-gray-700 mb-1.5">
|
||||
Confirm Password
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input type="password"
|
||||
id="password_confirm"
|
||||
name="password_confirm"
|
||||
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 new 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-save mr-2"></i>
|
||||
Update 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>
|
||||
|
||||
<!-- Account 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">Account Details</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">Email Verified:
|
||||
<span class="font-semibold <?= $user['email_verified'] ? 'text-green-600' : 'text-red-600' ?>">
|
||||
<?= $user['email_verified'] ? 'Yes' : 'No' ?>
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<i class="fas fa-circle text-blue-500" style="font-size: 6px;"></i>
|
||||
<span class="ml-2">Member Since:
|
||||
<span class="font-semibold text-gray-900"><?= date('M d, Y', strtotime($user['created_at'])) ?></span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<i class="fas fa-circle text-blue-500" style="font-size: 6px;"></i>
|
||||
<span class="ml-2">Last Login:
|
||||
<span class="font-semibold text-gray-900"><?= $user['last_login'] ? date('M d, Y H:i', strtotime($user['last_login'])) : 'Never' ?></span>
|
||||
</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';
|
||||
?>
|
||||
|
||||
|
||||
@@ -230,7 +230,18 @@ $pagination = $pagination ?? [
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="text-sm text-gray-900"><?= htmlspecialchars($user['username']) ?></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm text-gray-900"><?= htmlspecialchars($user['username']) ?></span>
|
||||
<?php if (!empty($user['two_factor_enabled'])): ?>
|
||||
<span class="inline-flex items-center px-1.5 py-0.5 bg-green-100 text-green-700 rounded text-[10px] font-semibold border border-green-200" title="Two-factor authentication enabled">
|
||||
<i class="fas fa-shield-alt mr-0.5"></i>2FA
|
||||
</span>
|
||||
<?php else: ?>
|
||||
<span class="inline-flex items-center px-1.5 py-0.5 bg-gray-100 text-gray-400 rounded text-[10px] font-medium border border-gray-200" title="Two-factor authentication not enabled">
|
||||
<i class="fas fa-shield-alt mr-0.5"></i>No 2FA
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold border
|
||||
|
||||
Reference in New Issue
Block a user