Malin/domnitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2c906532dfcc17ca0423850ec404bf438d0492f1
domnitor/app/Views/auth/base-auth.twig

210 lines
9.8 KiB
Twig
Raw Normal View History

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.
2026-03-03 18:21:32 +02:00
{#
# 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 Copy Permalink