Big first commit
authentication-zero and first layout
This commit is contained in:
143
app/views/passwords/edit.html.erb
Normal file
143
app/views/passwords/edit.html.erb
Normal file
@@ -0,0 +1,143 @@
|
||||
<!-- <p style="color: red"><%= alert %></p>
|
||||
|
||||
<h1>Change your password</h1>
|
||||
|
||||
<%= form_with(url: password_path, method: :patch) do |form| %>
|
||||
<% if @user.errors.any? %>
|
||||
<div style="color: red">
|
||||
<h2><%= pluralize(@user.errors.count, "error") %> prohibited this user from being saved:</h2>
|
||||
|
||||
<ul>
|
||||
<% @user.errors.each do |error| %>
|
||||
<li><%= error.full_message %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div>
|
||||
<%= form.label :password_challenge, style: "display: block" %>
|
||||
<%= form.password_field :password_challenge, required: true, autofocus: true, autocomplete: "current-password" %>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= form.label :password, "New password", style: "display: block" %>
|
||||
<%= form.password_field :password, required: true, autocomplete: "new-password" %>
|
||||
<div>12 characters minimum.</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= form.label :password_confirmation, "Confirm new password", style: "display: block" %>
|
||||
<%= form.password_field :password_confirmation, required: true, autocomplete: "new-password" %>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= form.submit "Save changes" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<br>
|
||||
|
||||
<div>
|
||||
<%= link_to "Back", root_path %>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<% content_for :title, "Mein Profil" %>
|
||||
|
||||
<div class="max-w-2xl mx-auto space-y-6">
|
||||
|
||||
<!-- INTERNE PROFIL-NAVIGATION (Tabs) -->
|
||||
<div class="border-b border-gray-200">
|
||||
<nav class="flex space-x-6" aria-label="Tabs">
|
||||
<!-- Aktiver Tab: Profil & Sicherheit -->
|
||||
<span class="border-blue-500 text-blue-600 border-b-2 py-4 px-1 text-sm font-semibold flex items-center gap-2">
|
||||
<!-- Heroicon: user -->
|
||||
<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>
|
||||
<!-- Link zur Sitzungsübersicht von authentication-zero -->
|
||||
<%= 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 %>
|
||||
<!-- Heroicon: computer-desktop -->
|
||||
<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 %>
|
||||
<%= 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 %>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Sektion 1: Benutzerdaten (Schreibgeschützt) -->
|
||||
<div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 md:p-8">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="w-12 h-12 rounded-full bg-blue-600 text-white font-bold text-lg flex items-center justify-center shrink-0">
|
||||
<%= Current.user.email.first(2).upcase %>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-800">Kontoinformationen</h2>
|
||||
<p class="text-sm text-gray-500">Deine registrierten Profildaten in Vault171.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="border-gray-200 mb-4">
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-400 uppercase tracking-wider mb-1">E-Mail-Adresse</label>
|
||||
<div class="flex items-center gap-2 text-gray-800 font-medium">
|
||||
<!-- Heroicon: envelope -->
|
||||
<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>
|
||||
<span><%= Current.user.email %></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sektion 2: Passwort ändern Formular -->
|
||||
<%= form_with(url: password_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 Fehlern der Passwort-Validierung -->
|
||||
<% if @user.errors.any? %>
|
||||
<div class="p-4 text-sm text-red-800 rounded-lg bg-red-50 border border-red-200" role="alert">
|
||||
<ul class="list-disc list-inside space-y-0.5 text-xs">
|
||||
<% @user.errors.full_messages.each do |message| %>
|
||||
<li><%= message %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div>
|
||||
<h3 class="text-lg font-bold text-gray-800">Sicherheit</h3>
|
||||
<p class="text-sm text-gray-500 mt-1">Hier kannst du dein aktuelles Passwort aktualisieren.</p>
|
||||
</div>
|
||||
|
||||
<hr class="border-gray-200">
|
||||
|
||||
<!-- Feld: Aktuelles Passwort (Wichtig zur Verifizierung) -->
|
||||
<div>
|
||||
<%= form.label :password_challenge, "Aktuelles Passwort", class: "block text-sm font-medium mb-2 text-gray-700" %>
|
||||
<%= form.password_field :password_challenge, required: true, class: "py-2.5 px-4 block w-full border border-gray-300 rounded-lg text-sm bg-gray-50/50 focus:border-blue-500 focus:ring-blue-500" %>
|
||||
</div>
|
||||
|
||||
<!-- Felder für das neue Passwort -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<%= form.label :password, "Neues Passwort", class: "block text-sm font-medium mb-2 text-gray-700" %>
|
||||
<%= form.password_field :password, required: true, autocomplete: "new-password", class: "py-2.5 px-4 block w-full border border-gray-300 rounded-lg text-sm bg-gray-50/50 focus:border-blue-500 focus:ring-blue-500" %>
|
||||
</div>
|
||||
<div>
|
||||
<%= form.label :password_confirmation, "Neues Passwort bestätigen", class: "block text-sm font-medium mb-2 text-gray-700" %>
|
||||
<%= form.password_field :password_confirmation, required: true, autocomplete: "new-password", class: "py-2.5 px-4 block w-full border border-gray-300 rounded-lg text-sm bg-gray-50/50 focus:border-blue-500 focus:ring-blue-500" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="flex justify-end gap-x-2 pt-4 border-t border-gray-200">
|
||||
<%= link_to "Abbrechen", root_path, class: "py-2.5 px-4 inline-flex items-center text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition" %>
|
||||
<%= form.submit "Passwort aktualisieren", class: "py-2.5 px-4 inline-flex items-center text-sm font-semibold rounded-lg bg-blue-600 text-white hover:bg-blue-700 shadow-sm cursor-pointer transition" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user