Switch PHP views to Twig and add 2FA/UI enhancements
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
209
app/Views/auth/base-auth.twig
Normal file
209
app/Views/auth/base-auth.twig
Normal 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>
|
||||
Reference in New Issue
Block a user