Malin/domnitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch PHP views to Twig and add 2FA/UI enhancements

Browse Source 
Migrate many view templates from raw PHP to Twig and modernize UI/UX for 2FA and settings. Controllers updated to provide avatar data and two-factor info (ProfileController, UserController) and SettingsController now includes timezone lists, notification preset selection, cron path, cached update state and rollback availability. ErrorHandler now attempts to render error pages via a new Core\TwigService with a safe fallback to raw PHP views. TwoFactorService generation silences deprecated warnings during QR code creation. Numerous .php view files were removed and replaced with .twig equivalents (2fa setup/verify/backup-codes and many auth, dashboard, domains, errors, layout, users, tags, tld-registry, etc.), and core/TwigService was added. These changes move the app toward a Twig-based templating system, improve 2FA flows, surface avatar images in lists/profiles, and make error rendering more robust.
This commit is contained in:
Hosteroid
2026-03-03 18:21:32 +02:00
parent cd4e3e6bcc
commit 4818172bc6
73 changed files with 9948 additions and 10686 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
app/Views/auth/captcha-widget.php → app/Views/auth/_captcha-widget.twig
View File

@@ -1,42 +1,36 @@
<?php
/**
* CAPTCHA Widget Component
* Renders the appropriate CAPTCHA widget based on settings
*
* Required variables:
* - $captchaSettings: Array with 'provider' and 'site_key'
*/
{#
# CAPTCHA Widget Component
# Renders the appropriate CAPTCHA widget based on settings
#
# Required variables:
# - captchaSettings: Array with 'provider' and 'site_key'
#}
$provider = $captchaSettings['provider'] ?? 'disabled';
$siteKey = $captchaSettings['site_key'] ?? '';
{% set provider = captchaSettings.provider|default('disabled') %}
{% set siteKey = captchaSettings.site_key|default('') %}
if ($provider === 'disabled' || empty($siteKey)) {
return; // No CAPTCHA to render
}
?>
<!-- CAPTCHA Widget -->
{% if provider != 'disabled' and siteKey is not empty %}
{# CAPTCHA Widget #}
<div class="captcha-container mb-4">
<?php if ($provider === 'recaptcha_v2'): ?>
<!-- reCAPTCHA v2 -->
<div class="g-recaptcha" data-sitekey="<?= htmlspecialchars($siteKey) ?>"></div>
{% if provider == 'recaptcha_v2' %}
{# reCAPTCHA v2 #}
<div class="g-recaptcha" data-sitekey="{{ siteKey }}"></div>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<?php elseif ($provider === 'recaptcha_v3'): ?>
<!-- reCAPTCHA v3 (Invisible) -->
{% elseif provider == 'recaptcha_v3' %}
{# reCAPTCHA v3 (Invisible) #}
<input type="hidden" id="captcha_response" name="captcha_response">
<script src="https://www.google.com/recaptcha/api.js?render=<?= htmlspecialchars($siteKey) ?>"></script>
<?php elseif ($provider === 'turnstile'): ?>
<!-- Cloudflare Turnstile -->
<div class="cf-turnstile" data-sitekey="<?= htmlspecialchars($siteKey) ?>"></div>
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<script src="https://www.google.com/recaptcha/api.js?render={{ siteKey }}"></script>
<?php endif; ?>
{% elseif provider == 'turnstile' %}
{# Cloudflare Turnstile #}
<div class="cf-turnstile" data-sitekey="{{ siteKey }}"></div>
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
{% endif %}
</div>
<?php if ($provider === 'recaptcha_v3'): ?>
<!-- reCAPTCHA v3 Form Submission Handler -->
{% if provider == 'recaptcha_v3' %}
{# reCAPTCHA v3 Form Submission Handler #}
<script>
// Store the original form submission handler
const form = document.querySelector('form');
@@ -46,7 +40,7 @@ if ($provider === 'disabled' || empty($siteKey)) {
e.preventDefault();
grecaptcha.ready(function() {
grecaptcha.execute('<?= htmlspecialchars($siteKey) ?>', {action: 'submit'}).then(function(token) {
grecaptcha.execute('{{ siteKey }}', {action: 'submit'}).then(function(token) {
document.getElementById('captcha_response').value = token;
// Call original submit handler if it exists
@@ -60,8 +54,8 @@ if ($provider === 'disabled' || empty($siteKey)) {
});
});
</script>
<?php elseif ($provider === 'recaptcha_v2' || $provider === 'turnstile'): ?>
<!-- reCAPTCHA v2 / Turnstile Response Handler -->
{% elseif provider == 'recaptcha_v2' or provider == 'turnstile' %}
{# reCAPTCHA v2 / Turnstile Response Handler #}
<script>
// Add hidden input to capture response
const form = document.querySelector('form');
@@ -73,14 +67,14 @@ if ($provider === 'disabled' || empty($siteKey)) {
// Capture response on form submit
form.addEventListener('submit', function(e) {
<?php if ($provider === 'recaptcha_v2'): ?>
{% if provider == 'recaptcha_v2' %}
const response = grecaptcha.getResponse();
<?php else: // turnstile ?>
{% else %}{# turnstile #}
const response = turnstile.getResponse();
<?php endif; ?>
{% endif %}
captchaInput.value = response;
});
</script>
<?php endif; ?>
{% endif %}
{% endif %}

56
app/Views/auth/base-auth.php
View File

@@ -1,56 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= $title ?? 'Authentication' ?> - Domain Monitor</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
DEFAULT: '#4A90E2',
dark: '#357ABD',
light: '#6BA3E8',
}
}
}
}
}
</script>
<style>
body {
background-color: #f8f9fa;
}
</style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">
<div class="max-w-md w-full">
<!-- Auth Card -->
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
<?= $content ?>
</div>
<!-- Footer -->
<div class="text-center mt-6">
<p class="text-gray-500 text-xs">
© <?= date('Y') ?> <a href="https://github.com/Hosteroid/domain-monitor" target="_blank" class="hover:text-blue-600 transition-colors duration-150" title="Visit Domain Monitor on GitHub">Domain Monitor</a>. All rights reserved.
</p>
</div>
</div>
<?php if (isset($scripts)): ?>
<?= $scripts ?>
<?php endif; ?>
</body>
</html>

209
app/Views/auth/base-auth.twig Normal file
View File

@@ -0,0 +1,209 @@
{#
# Auth Layout Template
# Used for: login, register, forgot-password, verify-email, etc.
#}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title|default('Authentication') }} - {{ appSettings.app_name|default('Domain Monitor') }}</title>
{# Tailwind CSS #}
<script src="https://cdn.tailwindcss.com"></script>
{# Font Awesome #}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: {
DEFAULT: '#4A90E2',
dark: '#357ABD',
light: '#6BA3E8',
}
}
}
}
}
</script>
{# Theme initialization (prevent flash) #}
<script>
(function() {
const savedTheme = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
document.documentElement.classList.add('dark');
}
})();
</script>
<style>
body {
background-color: #f1f5f9;
}
.dark body, html.dark body {
background-color: #0f172a;
}
.bg-waves {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.bg-waves svg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.graph-svg-light { display: block; }
.graph-svg-dark { display: none; }
.dark .graph-svg-light { display: none; }
.dark .graph-svg-dark { display: block; }
</style>
{% block head %}{% endblock %}
</head>
<body class="min-h-screen flex items-center justify-center p-4 bg-slate-100 dark:bg-slate-900 transition-colors duration-200">
{# Monitoring Graph Waves Background #}
<div class="bg-waves">
{# Light Mode SVG #}
<svg class="graph-svg-light" viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="waveGradient1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#2563eb;stop-opacity:0.15"/>
<stop offset="100%" style="stop-color:#2563eb;stop-opacity:0.02"/>
</linearGradient>
<linearGradient id="waveGradient2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#2563eb;stop-opacity:0.12"/>
<stop offset="100%" style="stop-color:#2563eb;stop-opacity:0.01"/>
</linearGradient>
<linearGradient id="waveGradient3" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#2563eb;stop-opacity:0.08"/>
<stop offset="100%" style="stop-color:#2563eb;stop-opacity:0.01"/>
</linearGradient>
</defs>
{# Top accent line #}
<path d="M 0,18 Q 15,14 30,20 T 60,16 T 90,22 T 100,18"
stroke="#2563eb" stroke-width="0.15" fill="none" opacity="0.4" vector-effect="non-scaling-stroke"/>
{# Wave 1 - Back #}
<path d="M 0,45 Q 20,38 40,48 T 80,42 T 100,50 L 100,100 L 0,100 Z" fill="url(#waveGradient3)"/>
<path d="M 0,45 Q 20,38 40,48 T 80,42 T 100,50"
stroke="#2563eb" stroke-width="0.2" fill="none" opacity="0.3" vector-effect="non-scaling-stroke"/>
{# Wave 2 - Middle #}
<path d="M 0,55 Q 25,48 50,58 T 100,52 L 100,100 L 0,100 Z" fill="url(#waveGradient2)"/>
<path d="M 0,55 Q 25,48 50,58 T 100,52"
stroke="#2563eb" stroke-width="0.25" fill="none" opacity="0.5" vector-effect="non-scaling-stroke"/>
{# Wave 3 - Front #}
<path d="M 0,68 Q 30,60 60,70 T 100,64 L 100,100 L 0,100 Z" fill="url(#waveGradient1)"/>
<path d="M 0,68 Q 30,60 60,70 T 100,64"
stroke="#2563eb" stroke-width="0.3" fill="none" opacity="0.6" vector-effect="non-scaling-stroke"/>
{# Bottom accent line #}
<path d="M 0,82 Q 20,78 40,84 T 80,80 T 100,85"
stroke="#2563eb" stroke-width="0.15" fill="none" opacity="0.3" vector-effect="non-scaling-stroke"/>
</svg>
{# Dark Mode SVG #}
<svg class="graph-svg-dark" viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="waveGradientDark1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#60a5fa;stop-opacity:0.2"/>
<stop offset="100%" style="stop-color:#60a5fa;stop-opacity:0.02"/>
</linearGradient>
<linearGradient id="waveGradientDark2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#60a5fa;stop-opacity:0.15"/>
<stop offset="100%" style="stop-color:#60a5fa;stop-opacity:0.01"/>
</linearGradient>
<linearGradient id="waveGradientDark3" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#60a5fa;stop-opacity:0.1"/>
<stop offset="100%" style="stop-color:#60a5fa;stop-opacity:0.01"/>
</linearGradient>
</defs>
{# Top accent line #}
<path d="M 0,18 Q 15,14 30,20 T 60,16 T 90,22 T 100,18"
stroke="#60a5fa" stroke-width="0.15" fill="none" opacity="0.35" vector-effect="non-scaling-stroke"/>
{# Wave 1 - Back #}
<path d="M 0,45 Q 20,38 40,48 T 80,42 T 100,50 L 100,100 L 0,100 Z" fill="url(#waveGradientDark3)"/>
<path d="M 0,45 Q 20,38 40,48 T 80,42 T 100,50"
stroke="#60a5fa" stroke-width="0.2" fill="none" opacity="0.25" vector-effect="non-scaling-stroke"/>
{# Wave 2 - Middle #}
<path d="M 0,55 Q 25,48 50,58 T 100,52 L 100,100 L 0,100 Z" fill="url(#waveGradientDark2)"/>
<path d="M 0,55 Q 25,48 50,58 T 100,52"
stroke="#60a5fa" stroke-width="0.25" fill="none" opacity="0.4" vector-effect="non-scaling-stroke"/>
{# Wave 3 - Front #}
<path d="M 0,68 Q 30,60 60,70 T 100,64 L 100,100 L 0,100 Z" fill="url(#waveGradientDark1)"/>
<path d="M 0,68 Q 30,60 60,70 T 100,64"
stroke="#60a5fa" stroke-width="0.3" fill="none" opacity="0.5" vector-effect="non-scaling-stroke"/>
{# Bottom accent line #}
<path d="M 0,82 Q 20,78 40,84 T 80,80 T 100,85"
stroke="#60a5fa" stroke-width="0.15" fill="none" opacity="0.25" vector-effect="non-scaling-stroke"/>
</svg>
</div>
{# Logo - Top Left #}
<div class="fixed top-4 left-4 z-20 flex items-center gap-3">
<img src="{{ base_url }}/assets/logo.svg" alt="{{ appSettings.app_name|default('Domain Monitor') }}" class="h-14 w-auto drop-shadow-md">
<div class="flex flex-col">
<span class="text-xl font-bold text-slate-800 dark:text-white tracking-tight">{{ appSettings.app_name|default('Domain Monitor') }}</span>
<span class="text-xs text-slate-500 dark:text-slate-400 font-medium">Track your domains</span>
</div>
</div>
{# Theme Toggle Button #}
<button onclick="toggleTheme()" id="themeToggle" title="Toggle theme" class="fixed top-4 right-4 z-20 flex items-center justify-center w-10 h-10 text-slate-500 hover:text-slate-700 hover:bg-slate-200 dark:text-slate-400 dark:hover:text-slate-200 dark:hover:bg-slate-700 rounded-lg transition-colors duration-150 bg-white/90 dark:bg-slate-800/90 backdrop-blur-sm shadow-md border border-slate-200 dark:border-slate-700">
<i class="fas fa-sun dark:hidden"></i>
<i class="fas fa-moon hidden dark:inline"></i>
</button>
<div class="max-w-md w-full relative z-10">
{# Auth Card #}
<div class="bg-white/95 dark:bg-slate-800/95 backdrop-blur-sm rounded-xl shadow-lg shadow-slate-200/50 dark:shadow-slate-950/50 border border-slate-200 dark:border-slate-700 p-8">
{% block content %}{% endblock %}
</div>
{# Footer #}
<div class="text-center mt-6">
<p class="text-slate-500 dark:text-slate-400 text-xs">
© {{ "now"|date("Y") }} <a href="https://github.com/Hosteroid/domain-monitor" target="_blank" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-150" title="Visit {{ appSettings.app_name|default('Domain Monitor') }} on GitHub">{{ appSettings.app_name|default('Domain Monitor') }}</a>. All rights reserved.
</p>
</div>
</div>
<script>
// Theme toggle function
function toggleTheme() {
const html = document.documentElement;
const isDark = html.classList.contains('dark');
if (isDark) {
html.classList.remove('dark');
localStorage.setItem('theme', 'light');
} else {
html.classList.add('dark');
localStorage.setItem('theme', 'dark');
}
}
</script>
{% block scripts %}{% endblock %}
</body>
</html>

83
app/Views/auth/forgot-password.php
View File

@@ -1,83 +0,0 @@
<?php
$title = 'Forgot Password';
ob_start();
?>
<!-- Logo and Title -->
<div class="text-center mb-8">
<div class="inline-flex items-center justify-center w-14 h-14 bg-primary rounded-lg mb-4">
<i class="fas fa-key text-white text-2xl"></i>
</div>
<h1 class="text-2xl font-semibold text-gray-900 mb-1">Forgot Password?</h1>
<p class="text-sm text-gray-500">No worries, we'll send you reset instructions</p>
</div>
<!-- Error/Success Alert -->
<?php if (isset($_SESSION['error'])): ?>
<div class="mb-6 bg-red-50 border border-red-200 p-3 rounded-lg">
<div class="flex items-center">
<i class="fas fa-exclamation-circle text-red-500 mr-2"></i>
<span class="text-sm text-red-700"><?= htmlspecialchars($_SESSION['error']) ?></span>
</div>
</div>
<?php unset($_SESSION['error']); ?>
<?php endif; ?>
<?php if (isset($_SESSION['success'])): ?>
<div class="mb-6 bg-green-50 border border-green-200 p-3 rounded-lg">
<div class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span class="text-sm text-green-700"><?= htmlspecialchars($_SESSION['success']) ?></span>
</div>
</div>
<?php unset($_SESSION['success']); ?>
<?php endif; ?>
<!-- Forgot Password Form -->
<form method="POST" action="/forgot-password" class="space-y-5">
<?= csrf_field() ?>
<!-- Email Field -->
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1.5">
Email Address
</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-envelope text-gray-400 text-sm"></i>
</div>
<input
type="email"
id="email"
name="email"
required
autofocus
class="w-full pl-10 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="Enter your email address">
</div>
<p class="text-xs text-gray-500 mt-1">Enter the email associated with your account</p>
</div>
<!-- CAPTCHA Widget -->
<?php include __DIR__ . '/captcha-widget.php'; ?>
<!-- Submit Button -->
<button
type="submit"
class="w-full bg-primary hover:bg-primary-dark text-white py-2.5 rounded-lg font-medium transition-colors duration-200 flex items-center justify-center text-sm">
<i class="fas fa-paper-plane mr-2"></i>
Send Reset Link
</button>
</form>
<!-- Back to Login Link -->
<div class="text-center mt-6 pt-6 border-t border-gray-200">
<a href="/login" class="inline-flex items-center text-sm text-gray-600 hover:text-gray-800">
<i class="fas fa-arrow-left mr-2"></i>
Back to Login
</a>
</div>
<?php
$content = ob_get_clean();
require __DIR__ . '/base-auth.php';
?>

82
app/Views/auth/forgot-password.twig Normal file
View File

@@ -0,0 +1,82 @@
{#
# Forgot Password Page
#}
{% extends 'auth/base-auth.twig' %}
{% set title = 'Forgot Password' %}
{% block content %}
{# Logo and Title #}
<div class="text-center mb-8">
<div class="inline-flex items-center justify-center w-14 h-14 bg-primary rounded-lg mb-4">
<i class="fas fa-key text-white text-2xl"></i>
</div>
<h1 class="text-2xl font-semibold text-gray-900 dark:text-white mb-1">Forgot Password?</h1>
<p class="text-sm text-gray-500 dark:text-gray-400">No worries, we'll send you reset instructions</p>
</div>
{# Error Alert #}
{% if flash.error is defined %}
<div class="mb-6 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 p-3 rounded-lg">
<div class="flex items-center">
<i class="fas fa-exclamation-circle text-red-500 dark:text-red-400 mr-2"></i>
<span class="text-sm text-red-700 dark:text-red-300">{{ flash.error }}</span>
</div>
</div>
{% endif %}
{# Success Alert #}
{% if flash.success is defined %}
<div class="mb-6 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 p-3 rounded-lg">
<div class="flex items-center">
<i class="fas fa-check-circle text-green-500 dark:text-green-400 mr-2"></i>
<span class="text-sm text-green-700 dark:text-green-300">{{ flash.success }}</span>
</div>
</div>
{% endif %}
{# Forgot Password Form #}
<form method="POST" action="/forgot-password" class="space-y-5">
{{ csrf_field() }}
{# Email Field #}
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
Email Address
</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-envelope text-gray-400 text-sm"></i>
</div>
<input
type="email"
id="email"
name="email"
required
autofocus
class="w-full pl-10 pr-3 py-2.5 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
placeholder="Enter your email address">
</div>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Enter the email associated with your account</p>
</div>
{# CAPTCHA Widget #}
{% include 'auth/_captcha-widget.twig' %}
{# Submit Button #}
<button
type="submit"
class="w-full bg-primary hover:bg-primary-dark text-white py-2.5 rounded-lg font-medium transition-colors duration-200 flex items-center justify-center text-sm">
<i class="fas fa-paper-plane mr-2"></i>
Send Reset Link
</button>
</form>
{# Back to Login Link #}
<div class="text-center mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
<a href="/login" class="inline-flex items-center text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
<i class="fas fa-arrow-left mr-2"></i>
Back to Login
</a>
</div>
{% endblock %}

90
app/Views/auth/login.php → app/Views/auth/login.twig
View File

@@ -1,34 +1,47 @@
<?php
$title = 'Login';
ob_start();
?>
{#
# Login Page
#}
{% extends 'auth/base-auth.twig' %}
<!-- Logo and Title -->
{% set title = 'Login' %}
{% block content %}
{# Logo and Title #}
<div class="text-center mb-8">
<div class="inline-flex items-center justify-center w-14 h-14 bg-primary rounded-lg mb-4">
<i class="fas fa-globe text-white text-2xl"></i>
</div>
<h1 class="text-2xl font-semibold text-gray-900 mb-1">Welcome Back</h1>
<p class="text-sm text-gray-500">Sign in to access your account</p>
<h1 class="text-2xl font-semibold text-gray-900 dark:text-white mb-1">Welcome Back</h1>
<p class="text-sm text-gray-500 dark:text-gray-400">Sign in to access your account</p>
</div>
<!-- Error Alert -->
<?php if (isset($_SESSION['error'])): ?>
<div class="mb-6 bg-red-50 border border-red-200 p-3 rounded-lg">
{# Success Alert #}
{% if flash.success is defined %}
<div class="mb-6 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 p-3 rounded-lg">
<div class="flex items-center">
<i class="fas fa-exclamation-circle text-red-500 mr-2"></i>
<span class="text-sm text-red-700"><?= htmlspecialchars($_SESSION['error']) ?></span>
<i class="fas fa-check-circle text-green-500 dark:text-green-400 mr-2"></i>
<span class="text-sm text-green-700 dark:text-green-300">{{ flash.success }}</span>
</div>
</div>
<?php unset($_SESSION['error']); ?>
<?php endif; ?>
{% endif %}
<!-- Login Form -->
{# Error Alert #}
{% if flash.error is defined %}
<div class="mb-6 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 p-3 rounded-lg">
<div class="flex items-center">
<i class="fas fa-exclamation-circle text-red-500 dark:text-red-400 mr-2"></i>
<span class="text-sm text-red-700 dark:text-red-300">{{ flash.error }}</span>
</div>
</div>
{% endif %}
{# Login Form #}
<form method="POST" action="/login" class="space-y-5">
<?= csrf_field() ?>
<!-- Username Field -->
{{ csrf_field() }}
{# Username Field #}
<div>
<label for="username" class="block text-sm font-medium text-gray-700 mb-1.5">
<label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
Username or Email
</label>
<div class="relative">
@@ -41,14 +54,14 @@ ob_start();
name="username"
required
autofocus
class="w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
class="w-full pl-10 pr-3 py-2.5 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
placeholder="Enter your username or email">
</div>
</div>
<!-- Password Field -->
{# Password Field #}
<div>
<label for="password" class="block text-sm font-medium text-gray-700 mb-1.5">
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
Password
</label>
<div class="relative">
@@ -60,36 +73,36 @@ ob_start();
id="password"
name="password"
required
class="w-full pl-10 pr-10 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
class="w-full pl-10 pr-10 py-2.5 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
placeholder="Enter your password">
<button
type="button"
onclick="togglePassword()"
class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 focus:outline-none">
class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none">
<i class="fas fa-eye text-sm" id="toggleIcon"></i>
</button>
</div>
</div>
<!-- Remember Me -->
{# Remember Me #}
<div class="flex items-center justify-between">
<label class="flex items-center cursor-pointer">
<input
type="checkbox"
name="remember"
value="1"
class="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary">
<span class="ml-2 text-sm text-gray-600">Remember me</span>
class="w-4 h-4 text-primary border-gray-300 dark:border-gray-600 dark:bg-gray-700 rounded focus:ring-primary">
<span class="ml-2 text-sm text-gray-600 dark:text-gray-400">Remember me</span>
</label>
<a href="/forgot-password" class="text-sm text-primary hover:text-primary-dark">
Forgot password?
</a>
</div>
<!-- CAPTCHA Widget -->
<?php include __DIR__ . '/captcha-widget.php'; ?>
{# CAPTCHA Widget #}
{% include 'auth/_captcha-widget.twig' %}
<!-- Submit Button -->
{# Submit Button #}
<button
type="submit"
class="w-full bg-primary hover:bg-primary-dark text-white py-2.5 rounded-lg font-medium transition-colors duration-200 flex items-center justify-center text-sm">
@@ -98,21 +111,20 @@ ob_start();
</button>
</form>
<?php if ($registrationEnabled ?? false): ?>
<!-- Sign Up Link -->
<div class="text-center mt-6 pt-6 border-t border-gray-200">
<p class="text-sm text-gray-600">
{% if registrationEnabled|default(false) %}
{# Sign Up Link #}
<div class="text-center mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
<p class="text-sm text-gray-600 dark:text-gray-400">
Don't have an account?
<a href="/register" class="text-primary hover:text-primary-dark font-medium">
Create Account
</a>
</p>
</div>
<?php endif; ?>
{% endif %}
{% endblock %}
<?php
$content = ob_get_clean();
$scripts = <<<'SCRIPT'
{% block scripts %}
<script>
function togglePassword() {
const passwordInput = document.getElementById('password');
@@ -129,6 +141,4 @@ $scripts = <<<'SCRIPT'
}
}
</script>
SCRIPT;
require __DIR__ . '/base-auth.php';
?>
{% endblock %}

112
app/Views/auth/register.php → app/Views/auth/register.twig
View File

@@ -1,44 +1,47 @@
<?php
$title = 'Register';
ob_start();
?>
{#
# Registration Page
#}
{% extends 'auth/base-auth.twig' %}
<!-- Logo and Title -->
{% set title = 'Register' %}
{% block content %}
{# Logo and Title #}
<div class="text-center mb-8">
<div class="inline-flex items-center justify-center w-14 h-14 bg-primary rounded-lg mb-4">
<i class="fas fa-user-plus text-white text-2xl"></i>
</div>
<h1 class="text-2xl font-semibold text-gray-900 mb-1">Create Account</h1>
<p class="text-sm text-gray-500">Join Domain Monitor today</p>
<h1 class="text-2xl font-semibold text-gray-900 dark:text-white mb-1">Create Account</h1>
<p class="text-sm text-gray-500 dark:text-gray-400">Join Domain Monitor today</p>
</div>
<!-- Error/Success Alert -->
<?php if (isset($_SESSION['error'])): ?>
<div class="mb-6 bg-red-50 border border-red-200 p-3 rounded-lg">
{# Error Alert #}
{% if flash.error is defined %}
<div class="mb-6 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 p-3 rounded-lg">
<div class="flex items-center">
<i class="fas fa-exclamation-circle text-red-500 mr-2"></i>
<span class="text-sm text-red-700"><?= htmlspecialchars($_SESSION['error']) ?></span>
<i class="fas fa-exclamation-circle text-red-500 dark:text-red-400 mr-2"></i>
<span class="text-sm text-red-700 dark:text-red-300">{{ flash.error }}</span>
</div>
</div>
<?php unset($_SESSION['error']); ?>
<?php endif; ?>
{% endif %}
<?php if (isset($_SESSION['success'])): ?>
<div class="mb-6 bg-green-50 border border-green-200 p-3 rounded-lg">
{# Success Alert #}
{% if flash.success is defined %}
<div class="mb-6 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 p-3 rounded-lg">
<div class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span class="text-sm text-green-700"><?= htmlspecialchars($_SESSION['success']) ?></span>
<i class="fas fa-check-circle text-green-500 dark:text-green-400 mr-2"></i>
<span class="text-sm text-green-700 dark:text-green-300">{{ flash.success }}</span>
</div>
</div>
<?php unset($_SESSION['success']); ?>
<?php endif; ?>
{% endif %}
<!-- Registration Form -->
{# Registration Form #}
<form method="POST" action="/register" class="space-y-4">
<?= csrf_field() ?>
<!-- Full Name Field -->
{{ csrf_field() }}
{# Full Name Field #}
<div>
<label for="full_name" class="block text-sm font-medium text-gray-700 mb-1.5">
<label for="full_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
Full Name
</label>
<div class="relative">
@@ -51,14 +54,14 @@ ob_start();
name="full_name"
required
autofocus
class="w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
class="w-full pl-10 pr-3 py-2.5 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
placeholder="Enter your full name">
</div>
</div>
<!-- Username Field -->
{# Username Field #}
<div>
<label for="username" class="block text-sm font-medium text-gray-700 mb-1.5">
<label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
Username
</label>
<div class="relative">
@@ -71,15 +74,15 @@ ob_start();
name="username"
required
pattern="[a-zA-Z0-9_]+"
class="w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
class="w-full pl-10 pr-3 py-2.5 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
placeholder="Choose a username">
</div>
<p class="text-xs text-gray-500 mt-1">Letters, numbers, and underscores only</p>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Letters, numbers, and underscores only</p>
</div>
<!-- Email Field -->
{# Email Field #}
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1.5">
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
Email Address
</label>
<div class="relative">
@@ -91,14 +94,14 @@ ob_start();
id="email"
name="email"
required
class="w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
class="w-full pl-10 pr-3 py-2.5 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
placeholder="your.email@example.com">
</div>
</div>
<!-- Password Field -->
{# Password Field #}
<div>
<label for="password" class="block text-sm font-medium text-gray-700 mb-1.5">
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
Password
</label>
<div class="relative">
@@ -111,21 +114,21 @@ ob_start();
name="password"
required
minlength="8"
class="w-full pl-10 pr-10 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
class="w-full pl-10 pr-10 py-2.5 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
placeholder="Create a strong password">
<button
type="button"
onclick="togglePassword('password')"
class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 focus:outline-none">
class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none">
<i class="fas fa-eye text-sm" id="toggleIcon-password"></i>
</button>
</div>
<p class="text-xs text-gray-500 mt-1">Minimum 8 characters</p>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Minimum 8 characters</p>
</div>
<!-- Confirm Password Field -->
{# Confirm Password Field #}
<div>
<label for="password_confirm" class="block text-sm font-medium text-gray-700 mb-1.5">
<label for="password_confirm" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
Confirm Password
</label>
<div class="relative">
@@ -138,18 +141,18 @@ ob_start();
name="password_confirm"
required
minlength="8"
class="w-full pl-10 pr-10 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
class="w-full pl-10 pr-10 py-2.5 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
placeholder="Re-enter your password">
<button
type="button"
onclick="togglePassword('password_confirm')"
class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 focus:outline-none">
class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none">
<i class="fas fa-eye text-sm" id="toggleIcon-password_confirm"></i>
</button>
</div>
</div>
<!-- Terms Checkbox -->
{# Terms Checkbox #}
<div class="flex items-start pt-2">
<div class="flex items-center h-5">
<input
@@ -157,17 +160,17 @@ ob_start();
id="terms"
name="terms"
required
class="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary">
class="w-4 h-4 text-primary border-gray-300 dark:border-gray-600 dark:bg-gray-700 rounded focus:ring-primary">
</div>
<label for="terms" class="ml-2 text-xs text-gray-600">
<label for="terms" class="ml-2 text-xs text-gray-600 dark:text-gray-400">
I agree to the Terms of Service and Privacy Policy
</label>
</div>
<!-- CAPTCHA Widget -->
<?php include __DIR__ . '/captcha-widget.php'; ?>
{# CAPTCHA Widget #}
{% include 'auth/_captcha-widget.twig' %}
<!-- Submit Button -->
{# Submit Button #}
<button
type="submit"
class="w-full bg-primary hover:bg-primary-dark text-white py-2.5 rounded-lg font-medium transition-colors duration-200 flex items-center justify-center text-sm mt-6">
@@ -176,19 +179,18 @@ ob_start();
</button>
</form>
<!-- Sign In Link -->
<div class="text-center mt-6 pt-6 border-t border-gray-200">
<p class="text-sm text-gray-600">
{# Sign In Link #}
<div class="text-center mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
<p class="text-sm text-gray-600 dark:text-gray-400">
Already have an account?
<a href="/login" class="text-primary hover:text-primary-dark font-medium">
Sign In
</a>
</p>
</div>
{% endblock %}
<?php
$content = ob_get_clean();
$scripts = <<<'SCRIPT'
{% block scripts %}
<script>
function togglePassword(fieldId) {
const passwordInput = document.getElementById(fieldId);
@@ -216,6 +218,4 @@ $scripts = <<<'SCRIPT'
}
});
</script>
SCRIPT;
require __DIR__ . '/base-auth.php';
?>
{% endblock %}

96
app/Views/auth/reset-password.php → app/Views/auth/reset-password.twig
View File

@@ -1,37 +1,50 @@
<?php
$title = 'Reset Password';
ob_start();
?>
{#
# Reset Password Page
#}
{% extends 'auth/base-auth.twig' %}
<!-- Logo and Title -->
{% set title = 'Reset Password' %}
{% block content %}
{# Logo and Title #}
<div class="text-center mb-8">
<div class="inline-flex items-center justify-center w-14 h-14 bg-primary rounded-lg mb-4">
<i class="fas fa-lock-open text-white text-2xl"></i>
</div>
<h1 class="text-2xl font-semibold text-gray-900 mb-1">Reset Password</h1>
<p class="text-sm text-gray-500">Enter your new password below</p>
<h1 class="text-2xl font-semibold text-gray-900 dark:text-white mb-1">Reset Password</h1>
<p class="text-sm text-gray-500 dark:text-gray-400">Enter your new password below</p>
</div>
<!-- Error/Success Alert -->
<?php if (isset($_SESSION['error'])): ?>
<div class="mb-6 bg-red-50 border border-red-200 p-3 rounded-lg">
{# Success Alert #}
{% if flash.success is defined %}
<div class="mb-6 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 p-3 rounded-lg">
<div class="flex items-center">
<i class="fas fa-exclamation-circle text-red-500 mr-2"></i>
<span class="text-sm text-red-700"><?= htmlspecialchars($_SESSION['error']) ?></span>
<i class="fas fa-check-circle text-green-500 dark:text-green-400 mr-2"></i>
<span class="text-sm text-green-700 dark:text-green-300">{{ flash.success }}</span>
</div>
</div>
<?php unset($_SESSION['error']); ?>
<?php endif; ?>
{% endif %}
<!-- Reset Password Form -->
{# Error Alert #}
{% if flash.error is defined %}
<div class="mb-6 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 p-3 rounded-lg">
<div class="flex items-center">
<i class="fas fa-exclamation-circle text-red-500 dark:text-red-400 mr-2"></i>
<span class="text-sm text-red-700 dark:text-red-300">{{ flash.error }}</span>
</div>
</div>
{% endif %}
{# Reset Password Form #}
<form method="POST" action="/reset-password" class="space-y-4">
<?= csrf_field() ?>
<!-- Hidden token field -->
<input type="hidden" name="token" value="<?= htmlspecialchars($token ?? '') ?>">
{{ csrf_field() }}
{# Hidden token field #}
<input type="hidden" name="token" value="{{ token|default('') }}">
<!-- Password Field -->
{# Password Field #}
<div>
<label for="password" class="block text-sm font-medium text-gray-700 mb-1.5">
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
New Password
</label>
<div class="relative">
@@ -45,21 +58,21 @@ ob_start();
required
minlength="8"
autofocus
class="w-full pl-10 pr-10 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
class="w-full pl-10 pr-10 py-2.5 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
placeholder="Enter new password">
<button
type="button"
onclick="togglePassword('password')"
class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 focus:outline-none">
class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none">
<i class="fas fa-eye text-sm" id="toggleIcon-password"></i>
</button>
</div>
<p class="text-xs text-gray-500 mt-1">Minimum 8 characters</p>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Minimum 8 characters</p>
</div>
<!-- Confirm Password Field -->
{# Confirm Password Field #}
<div>
<label for="password_confirm" class="block text-sm font-medium text-gray-700 mb-1.5">
<label for="password_confirm" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
Confirm New Password
</label>
<div class="relative">
@@ -72,34 +85,34 @@ ob_start();
name="password_confirm"
required
minlength="8"
class="w-full pl-10 pr-10 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
class="w-full pl-10 pr-10 py-2.5 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm"
placeholder="Re-enter new password">
<button
type="button"
onclick="togglePassword('password_confirm')"
class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 focus:outline-none">
class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none">
<i class="fas fa-eye text-sm" id="toggleIcon-password_confirm"></i>
</button>
</div>
</div>
<!-- Password Strength Indicator -->
<div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
<p class="text-xs text-blue-800 mb-2">
{# Password Strength Indicator #}
<div class="bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg p-3">
<p class="text-xs text-blue-800 dark:text-blue-300 mb-2">
<i class="fas fa-shield-alt mr-1"></i>
<strong>Password Requirements:</strong>
</p>
<ul class="text-xs text-blue-700 space-y-1 ml-5 list-disc">
<ul class="text-xs text-blue-700 dark:text-blue-400 space-y-1 ml-5 list-disc">
<li>At least 8 characters long</li>
<li>Mix of uppercase and lowercase letters recommended</li>
<li>Include numbers and special characters for extra security</li>
</ul>
</div>
<!-- CAPTCHA Widget -->
<?php include __DIR__ . '/captcha-widget.php'; ?>
{# CAPTCHA Widget #}
{% include 'auth/_captcha-widget.twig' %}
<!-- Submit Button -->
{# Submit Button #}
<button
type="submit"
class="w-full bg-primary hover:bg-primary-dark text-white py-2.5 rounded-lg font-medium transition-colors duration-200 flex items-center justify-center text-sm mt-6">
@@ -108,17 +121,16 @@ ob_start();
</button>
</form>
<!-- Back to Login Link -->
<div class="text-center mt-6 pt-6 border-t border-gray-200">
<a href="/login" class="inline-flex items-center text-sm text-gray-600 hover:text-gray-800">
{# Back to Login Link #}
<div class="text-center mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
<a href="/login" class="inline-flex items-center text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
<i class="fas fa-arrow-left mr-2"></i>
Back to Login
</a>
</div>
{% endblock %}
<?php
$content = ob_get_clean();
$scripts = <<<'SCRIPT'
{% block scripts %}
<script>
function togglePassword(fieldId) {
const passwordInput = document.getElementById(fieldId);
@@ -146,6 +158,4 @@ $scripts = <<<'SCRIPT'
}
});
</script>
SCRIPT;
require __DIR__ . '/base-auth.php';
?>
{% endblock %}

67
app/Views/auth/verify-email.php → app/Views/auth/verify-email.twig
View File

@@ -1,60 +1,63 @@
<?php
$title = 'Verify Email';
ob_start();
?>
{#
# Verify Email Page
#}
{% extends 'auth/base-auth.twig' %}
<?php if ($verified ?? false): ?>
<!-- Success State -->
{% set title = 'Verify Email' %}
{% block content %}
{% if verified|default(false) %}
{# Success State #}
<div class="text-center">
<div class="inline-flex items-center justify-center w-16 h-16 bg-green-100 rounded-full mb-4">
<i class="fas fa-check-circle text-green-600 text-3xl"></i>
<div class="inline-flex items-center justify-center w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full mb-4">
<i class="fas fa-check-circle text-green-600 dark:text-green-400 text-3xl"></i>
</div>
<h1 class="text-2xl font-semibold text-gray-900 mb-2">Email Verified!</h1>
<p class="text-gray-600 mb-6">Your email address has been successfully verified.</p>
<h1 class="text-2xl font-semibold text-gray-900 dark:text-white mb-2">Email Verified!</h1>
<p class="text-gray-600 dark:text-gray-400 mb-6">Your email address has been successfully verified.</p>
<a href="/login" class="inline-flex items-center px-6 py-2.5 bg-primary hover:bg-primary-dark text-white text-sm rounded-lg transition-colors font-medium">
<i class="fas fa-sign-in-alt mr-2"></i>
Sign In to Your Account
</a>
</div>
<?php elseif ($error ?? false): ?>
<!-- Error State -->
{% elseif error|default(false) %}
{# Error State #}
<div class="text-center">
<div class="inline-flex items-center justify-center w-16 h-16 bg-red-100 rounded-full mb-4">
<i class="fas fa-times-circle text-red-600 text-3xl"></i>
<div class="inline-flex items-center justify-center w-16 h-16 bg-red-100 dark:bg-red-900/30 rounded-full mb-4">
<i class="fas fa-times-circle text-red-600 dark:text-red-400 text-3xl"></i>
</div>
<h1 class="text-2xl font-semibold text-gray-900 mb-2">Verification Failed</h1>
<p class="text-gray-600 mb-6"><?= htmlspecialchars($errorMessage ?? 'Invalid or expired verification link.') ?></p>
<h1 class="text-2xl font-semibold text-gray-900 dark:text-white mb-2">Verification Failed</h1>
<p class="text-gray-600 dark:text-gray-400 mb-6">{{ errorMessage|default('Invalid or expired verification link.') }}</p>
<div class="space-y-2">
<a href="/login" class="block text-center px-6 py-2.5 bg-primary hover:bg-primary-dark text-white text-sm rounded-lg transition-colors font-medium">
<i class="fas fa-sign-in-alt mr-2"></i>
Go to Login
</a>
<a href="/resend-verification" class="block text-center px-6 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm rounded-lg transition-colors font-medium">
<a href="/resend-verification" class="block text-center px-6 py-2.5 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 text-sm rounded-lg transition-colors font-medium">
<i class="fas fa-redo mr-2"></i>
Resend Verification Email
</a>
</div>
</div>
<?php else: ?>
<!-- Pending State -->
{% else %}
{# Pending State #}
<div class="text-center">
<div class="inline-flex items-center justify-center w-16 h-16 bg-blue-100 rounded-full mb-4">
<i class="fas fa-envelope text-blue-600 text-3xl"></i>
<div class="inline-flex items-center justify-center w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-full mb-4">
<i class="fas fa-envelope text-blue-600 dark:text-blue-400 text-3xl"></i>
</div>
<h1 class="text-2xl font-semibold text-gray-900 mb-2">Check Your Email</h1>
<p class="text-gray-600 mb-6">
We've sent a verification link to <strong><?= htmlspecialchars($email ?? 'your email') ?></strong>.
<h1 class="text-2xl font-semibold text-gray-900 dark:text-white mb-2">Check Your Email</h1>
<p class="text-gray-600 dark:text-gray-400 mb-6">
We've sent a verification link to <strong>{{ email|default('your email') }}</strong>.
Please check your inbox and click the link to verify your account.
</p>
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6 text-left">
<p class="text-sm text-blue-800 mb-2">
<div class="bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-6 text-left">
<p class="text-sm text-blue-800 dark:text-blue-300 mb-2">
<i class="fas fa-info-circle mr-1"></i>
<strong>Didn't receive the email?</strong>
</p>
<ul class="text-xs text-blue-700 space-y-1 ml-5 list-disc">
<ul class="text-xs text-blue-700 dark:text-blue-400 space-y-1 ml-5 list-disc">
<li>Check your spam or junk folder</li>
<li>Make sure you entered the correct email address</li>
<li>Wait a few minutes for the email to arrive</li>
@@ -66,14 +69,10 @@ ob_start();
<i class="fas fa-redo mr-2"></i>
Resend Verification Email
</a>
<a href="/login" class="block text-center text-sm text-gray-600 hover:text-gray-800">
<a href="/login" class="block text-center text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
Back to Login
</a>
</div>
</div>
<?php endif; ?>
<?php
$content = ob_get_clean();
require __DIR__ . '/base-auth.php';
?>
{% endif %}
{% endblock %}