Added Category and User Passwort Change
Some checks failed
CI / scan_ruby (push) Has been cancelled
CI / scan_js (push) Has been cancelled
CI / lint (push) Has been cancelled
CI / test (push) Has been cancelled
CI / system-test (push) Has been cancelled

This commit is contained in:
2026-05-22 02:24:56 +02:00
parent b7f0c35378
commit a706dbe7ff
20 changed files with 472 additions and 69 deletions

View File

@@ -0,0 +1,81 @@
<!-- 1. MOBILE ANSICHT: Ein sauberes Dropdown-Menü (Sichtbar auf Handys, versteckt ab 'sm:') -->
<div class="sm:hidden">
<label for="mobile-account-tabs" class="sr-only">Navigationsbereich wechseln</label>
<select id="mobile-account-tabs"
onchange="window.location.href = this.value"
class="block w-full rounded-lg border-gray-300 bg-white py-2.5 px-3 text-sm font-medium text-gray-700 shadow-sm focus:border-blue-500 focus:ring-blue-500">
<option value="<%= edit_password_path %>" <%= 'selected' if active_tab == :security %>>
🔒 Sicherheit
</option>
<option value="<%= edit_identity_email_path %>" <%= 'selected' if active_tab == :email %>>
✉️ E-Mail-Adresse
</option>
<option value="<%= sessions_path %>" <%= 'selected' if active_tab == :sessions %>>
💻 Sitzungen & Geräte
</option>
<option value="<%= authentications_events_path %>" <%= 'selected' if active_tab == :activities %>>
📊 Aktivitäten
</option>
</select>
</div>
<!-- 2. DESKTOP ANSICHT: Die klassische Tab-Leiste (Versteckt auf Mobilgeräten, sichtbar ab 'sm:') -->
<div class="hidden sm:block border-b border-gray-200 mb-6 overflow-x-auto">
<nav class="flex space-x-6 min-w-max" aria-label="Tabs">
<!-- Tab 1: Sicherheit (Passwort) -->
<% if active_tab == :security %>
<span class="border-blue-500 text-blue-600 border-b-2 py-4 px-1 text-sm font-semibold flex items-center gap-2">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
Sicherheit
</span>
<% else %>
<%= link_to edit_password_path, class: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 border-b-2 py-4 px-1 text-sm font-medium flex items-center gap-2 transition" do %>
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
Sicherheit
<% end %>
<% end %>
<!-- Tab 2: E-Mail-Adresse -->
<% if active_tab == :email %>
<span class="border-blue-500 text-blue-600 border-b-2 py-4 px-1 text-sm font-semibold flex items-center gap-2">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0l-7.5-4.615a2.25 2.25 0 0 1-1.07-1.916V6.75" /></svg>
E-Mail-Adresse
</span>
<% else %>
<%= link_to edit_identity_email_path, class: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 border-b-2 py-4 px-1 text-sm font-medium flex items-center gap-2 transition" do %>
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0l-7.5-4.615a2.25 2.25 0 0 1-1.07-1.916V6.75" /></svg>
E-Mail-Adresse
<% end %>
<% end %>
<!-- Tab 3: Sitzungen & Geräte -->
<% if active_tab == :sessions %>
<span class="border-blue-500 text-blue-600 border-b-2 py-4 px-1 text-sm font-semibold flex items-center gap-2">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" /></svg>
Sitzungen & Geräte
</span>
<% else %>
<%= link_to sessions_path, class: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 border-b-2 py-4 px-1 text-sm font-medium flex items-center gap-2 transition" do %>
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" /></svg>
Sitzungen & Geräte
<% end %>
<% end %>
<!-- Tab 4: Aktivitäten -->
<% if active_tab == :activities %>
<span class="border-blue-500 text-blue-600 border-b-2 py-4 px-1 text-sm font-semibold flex items-center gap-2">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" /></svg>
Aktivitäten
</span>
<% else %>
<%= link_to authentications_events_path, class: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 border-b-2 py-4 px-1 text-sm font-medium flex items-center gap-2 transition" do %>
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" /></svg>
Aktivitäten
<% end %>
<% end %>
</nav>
</div>

View File

@@ -1,4 +1,4 @@
<p style="color: red"><%= alert %></p>
<!--<p style="color: red"><%= alert %></p>
<% if Current.user.verified? %>
<h1>Change your email</h1>
@@ -41,3 +41,70 @@
<div>
<%= link_to "Back", root_path %>
</div>
-->
<% content_for :title, "E-Mail-Adresse ändern" %>
<div class="max-w-2xl mx-auto space-y-6">
<%= render "identity/account_tabs", active_tab: :email %>
<!-- Info-Header -->
<div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 flex flex-col sm:flex-row items-start sm:items-center gap-4">
<div class="p-3 bg-blue-50 text-blue-600 rounded-lg shrink-0">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0l-7.5-4.615a2.25 2.25 0 0 1-1.07-1.916V6.75" />
</svg>
</div>
<div>
<h2 class="text-lg font-bold text-gray-800">E-Mail-Adresse aktualisieren</h2>
<p class="text-sm text-gray-500">Ändere deine primäre Login-Adresse. Aus Sicherheitsgründen musst du diese Aktion mit deinem Passwort bestätigen.</p>
</div>
</div>
<%= form_with(url: identity_email_path, method: :patch, class: "bg-white border border-gray-200 rounded-xl shadow-sm p-6 md:p-8 space-y-6") do |form| %>
<!-- Fehleranzeige bei falschem Passwort oder ungültiger Mail -->
<% if Current.user.errors.any? %>
<div class="p-4 text-sm text-red-800 rounded-lg bg-red-50 border border-red-200" role="alert">
<h3 class="font-bold mb-1">Fehler beim Aktualisieren:</h3>
<ul class="list-disc list-inside text-xs">
<% Current.user.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<!-- Feld 1: Neue E-Mail-Adresse -->
<div>
<%= form.label :email, "Neue E-Mail-Adresse", class: "block text-sm font-medium mb-1.5 text-gray-700" %>
<div class="relative rounded-md shadow-sm">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0l-7.5-4.615a2.25 2.25 0 0 1-1.07-1.916V6.75" />
</svg>
</div>
<%= form.email_field :email, value: Current.user.email, required: true, autofocus: true, autocomplete: "email", class: "block w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-gray-50/50" %>
</div>
</div>
<!-- Feld 2: Passwort zur Bestätigung -->
<div>
<%= form.label :password_challenge, "Aktuelles Passwort zur Bestätigung", class: "block text-sm font-medium mb-1.5 text-gray-700" %>
<div class="relative rounded-md shadow-sm">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25z" />
</svg>
</div>
<%= form.password_field :password_challenge, required: true, autocomplete: "current-password", class: "block w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-gray-50/50" %>
</div>
</div>
<hr class="border-gray-200">
<!-- Abschicken-Button -->
<div class="flex justify-end">
<%= form.submit "E-Mail-Adresse speichern", class: "py-2.5 px-5 text-sm font-semibold rounded-lg bg-blue-600 text-white hover:bg-blue-700 shadow-sm transition cursor-pointer" %>
</div>
<% end %>
</div>