Big first commit
authentication-zero and first layout
This commit is contained in:
43
app/views/identity/emails/edit.html.erb
Normal file
43
app/views/identity/emails/edit.html.erb
Normal file
@@ -0,0 +1,43 @@
|
||||
<p style="color: red"><%= alert %></p>
|
||||
|
||||
<% if Current.user.verified? %>
|
||||
<h1>Change your email</h1>
|
||||
<% else %>
|
||||
<h1>Verify your email</h1>
|
||||
<p>We sent a verification email to the address below. Check that email and follow those instructions to confirm it's your email address.</p>
|
||||
<p><%= button_to "Re-send verification email", identity_email_verification_path %></p>
|
||||
<% end %>
|
||||
|
||||
<%= form_with(url: identity_email_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 :email, "New email", style: "display: block" %>
|
||||
<%= form.email_field :email, required: true, autofocus: true %>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= form.label :password_challenge, style: "display: block" %>
|
||||
<%= form.password_field :password_challenge, required: true, autocomplete: "current-password" %>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= form.submit "Save changes" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<br>
|
||||
|
||||
<div>
|
||||
<%= link_to "Back", root_path %>
|
||||
</div>
|
||||
128
app/views/identity/password_resets/edit.html.erb
Normal file
128
app/views/identity/password_resets/edit.html.erb
Normal file
@@ -0,0 +1,128 @@
|
||||
<!-- <h1>Reset your password</h1>
|
||||
|
||||
<%= form_with(url: identity_password_reset_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 %>
|
||||
|
||||
<%= form.hidden_field :sid, value: params[:sid] %>
|
||||
|
||||
<div>
|
||||
<%= form.label :password, "New password", style: "display: block" %>
|
||||
<%= form.password_field :password, required: true, autofocus: 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 %>
|
||||
-->
|
||||
|
||||
|
||||
<div class="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
|
||||
<div class="sm:mx-auto w-full max-w-md">
|
||||
|
||||
<!-- BRANDING: Groß, zentriert und modern -->
|
||||
<div class="flex flex-col items-center justify-center gap-3 mb-8">
|
||||
<!-- Größeres Heroicon: cube (h-16 w-16 statt h-8) -->
|
||||
<svg class="h-16 w-16 text-blue-600 drop-shadow-sm" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l5.25 3.03M12 12.75v9" />
|
||||
</svg>
|
||||
<!-- Größerer, fetterer Text (text-4xl font-black) -->
|
||||
<span class="text-4xl font-black text-gray-900 tracking-tight">Vault171</span>
|
||||
</div>
|
||||
|
||||
<!-- Dezente Trennlinie mit Untertitel -->
|
||||
<div class="relative mb-6">
|
||||
<div class="absolute inset-0 flex items-center" aria-hidden="true">
|
||||
<div class="w-full border-t border-gray-200"></div>
|
||||
</div>
|
||||
<div class="relative flex justify-center text-sm">
|
||||
<span class="bg-gray-50 px-3 text-xs font-semibold text-gray-400 uppercase tracking-widest">Sicherheitsbereich</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-center text-xl font-bold text-gray-800">Neues Passwort vergeben</h2>
|
||||
<p class="mt-1.5 text-center text-sm text-gray-500">
|
||||
Wählen Sie ein neues, sicheres Passwort für Ihr Benutzerkonto.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 sm:mx-auto w-full max-w-md">
|
||||
<div class="bg-white py-8 px-4 shadow sm:rounded-xl sm:px-10 border border-gray-200">
|
||||
|
||||
<!-- Der Formular-Builder nutzt das von authentication-zero bereitgestellte Token -->
|
||||
<%= form_with(url: identity_password_reset_path, method: :patch, class: "bg-white border border-gray-200 rounded-xl shadow-sm p-6 md:p-8 space-y-6") do |form| %>
|
||||
|
||||
<!-- Validierungsfehler anzeigen -->
|
||||
<% if @user.errors.any? %>
|
||||
<div class="p-4 text-sm text-red-800 rounded-lg bg-red-50 border border-red-200" role="alert">
|
||||
<div class="flex items-center gap-2 font-bold mb-2">
|
||||
<svg class="h-5 w-5 text-red-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
|
||||
</svg>
|
||||
<span>Fehler beim Speichern:</span>
|
||||
</div>
|
||||
<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 %>
|
||||
|
||||
<!-- passwort reset token -->
|
||||
<%= form.hidden_field :sid, value: params[:sid] %>
|
||||
|
||||
<!-- Feld 1: Neues Passwort -->
|
||||
<div>
|
||||
<%= form.label :password, "Neues Passwort", class: "block text-sm font-medium text-gray-700 mb-1.5" %>
|
||||
<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, required: true, autofocus: true, autocomplete: "new-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>
|
||||
<p class="mt-1.5 text-xs text-gray-400">Mindestens <%= User.min_length_password %> Zeichen lang.</p>
|
||||
</div>
|
||||
|
||||
<!-- Feld 2: Passwort bestätigen -->
|
||||
<div>
|
||||
<%= form.label :password_confirmation, "Passwort bestätigen", class: "block text-sm font-medium text-gray-700 mb-1.5" %>
|
||||
<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_confirmation, required: true, autocomplete: "new-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>
|
||||
|
||||
<!-- Absendeknopf -->
|
||||
<div>
|
||||
<%= form.submit "Passwort aktualisieren", class: "w-full flex justify-center py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors cursor-pointer" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
72
app/views/identity/password_resets/new.html.erb
Normal file
72
app/views/identity/password_resets/new.html.erb
Normal file
@@ -0,0 +1,72 @@
|
||||
<!-- <p style="color: red"><%= alert %></p>
|
||||
|
||||
<h1>Forgot your password?</h1>
|
||||
|
||||
<%= form_with(url: identity_password_reset_path) do |form| %>
|
||||
<div>
|
||||
<%= form.label :email, style: "display: block" %>
|
||||
<%= form.email_field :email, required: true, autofocus: true %>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= form.submit "Send password reset email" %>
|
||||
</div>
|
||||
<% end %>
|
||||
-->
|
||||
|
||||
|
||||
|
||||
<div class="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
|
||||
<div class="sm:mx-auto w-full max-w-md">
|
||||
|
||||
<!-- Heroicon: key -->
|
||||
<div class="flex justify-center text-blue-600">
|
||||
<svg class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">Passwort zurücksetzen</h2>
|
||||
<p class="mt-2 text-center text-sm text-gray-600">
|
||||
Geben Sie Ihre E-Mail-Adresse ein. Wir senden Ihnen einen Link zum Zurücksetzen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 sm:mx-auto w-full max-w-md">
|
||||
<div class="bg-white py-8 px-4 shadow sm:rounded-xl sm:px-10 border border-gray-200">
|
||||
|
||||
<%= form_with(url: identity_password_reset_path, class: "space-y-6") do |form| %>
|
||||
|
||||
<!-- Fehleranzeige bei Fehlern der Passwort-Validierung -->
|
||||
<% if alert %>
|
||||
<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">
|
||||
<%= alert %>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div>
|
||||
<%= form.label :email, "E-Mail-Adresse", class: "block text-sm font-medium text-gray-700 mb-1.5" %>
|
||||
<div class="relative rounded-md shadow-sm">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<!-- 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>
|
||||
</div>
|
||||
<%= form.email_field :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>
|
||||
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<%= link_to "← Zurück zum Login", sign_in_path, class: "font-medium text-gray-600 hover:text-gray-500 transition-colors" %>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= form.submit "Link anfordern", class: "w-full flex justify-center py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors cursor-pointer" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user