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
99
app/Views/groups/create.twig
Normal file
99
app/Views/groups/create.twig
Normal file
@@ -0,0 +1,99 @@
|
||||
{% extends 'layout/base.twig' %}
|
||||
|
||||
{% set title = 'Create Notification Group' %}
|
||||
{% set pageTitle = 'Create Notification Group' %}
|
||||
{% set pageDescription = 'Set up a new notification group for your domains' %}
|
||||
{% set pageIcon = 'fas fa-plus-circle' %}
|
||||
|
||||
{% block content %}
|
||||
{# Main Form #}
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
|
||||
<div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700">
|
||||
<h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
|
||||
<i class="fas fa-bell text-gray-400 dark:text-slate-500 mr-2 text-sm"></i>
|
||||
Group Information
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="p-6">
|
||||
<form method="POST" action="/groups/store" class="space-y-5">
|
||||
{{ csrf_field() }}
|
||||
{# Group Name #}
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
|
||||
Group Name *
|
||||
</label>
|
||||
<input type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm bg-white dark:bg-slate-700 text-gray-900 dark:text-white"
|
||||
placeholder="e.g., Production Alerts, Team Notifications"
|
||||
required
|
||||
autofocus>
|
||||
<p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
|
||||
Choose a descriptive name for this notification group
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{# Description #}
|
||||
<div>
|
||||
<label for="description" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
|
||||
Description (Optional)
|
||||
</label>
|
||||
<textarea id="description"
|
||||
name="description"
|
||||
class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm bg-white dark:bg-slate-700 text-gray-900 dark:text-white"
|
||||
rows="4"
|
||||
placeholder="Add details about this notification group, its purpose, or who should be notified..."></textarea>
|
||||
<p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
|
||||
Optional: Add notes to help identify this group's purpose
|
||||
</p>
|
||||
</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-plus-circle mr-2"></i>
|
||||
Create Group
|
||||
</button>
|
||||
<a href="/groups"
|
||||
class="inline-flex items-center justify-center px-5 py-2.5 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 rounded-lg font-medium hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-sm">
|
||||
<i class="fas fa-times mr-2"></i>
|
||||
Cancel
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Info Section #}
|
||||
<div class="mt-4 bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 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 dark:text-white mb-1">Next Steps</h3>
|
||||
<ul class="text-xs text-gray-600 dark:text-slate-400 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">After creating the group, you'll be able to add notification channels (Email, Telegram, Discord, Slack, Mattermost, Pushover, Webhook)</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<i class="fas fa-circle text-blue-500" style="font-size: 6px;"></i>
|
||||
<span class="ml-2">Configure each channel with the necessary credentials and settings</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<i class="fas fa-circle text-blue-500" style="font-size: 6px;"></i>
|
||||
<span class="ml-2">Assign domains to this group to start receiving notifications</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user