daboh/vault171
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Big first commit
Some checks failed
CI / scan_ruby (push) Has been cancelled
Details
CI / scan_js (push) Has been cancelled
Details
CI / lint (push) Has been cancelled
Details
CI / test (push) Has been cancelled
Details
CI / system-test (push) Has been cancelled
Details

Browse Source 
authentication-zero and first layout
This commit is contained in:
David Böhm
2026-05-21 02:54:39 +02:00
parent 6e7fe9797a
commit 6f192274ab
49 changed files with 1933 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
app/views/sessions/index.html.erb Normal file
View File

@@ -0,0 +1,144 @@
<!-- <p style="color: green"><%= notice %></p>
<h1>Devices & Sessions</h1>
<div id="sessions">
<% @sessions.each do |session| %>
<div id="<%= dom_id session %>">
<p>
<strong>User Agent:</strong>
<%= session.user_agent %>
</p>
<p>
<strong>Ip Address:</strong>
<%= session.ip_address %>
</p>
<p>
<strong>Created at:</strong>
<%= session.created_at %>
</p>
</div>
<p>
<%= button_to "Log out", session, method: :delete %>
</p>
<% end %>
</div>
<br>
<div>
<%= link_to "Back", root_path %>
</div>
-->
<% content_for :title, "Aktive Sitzungen & Geräte" %>
<div class="max-w-2xl mx-auto space-y-6">
<div class="border-b border-gray-200 mb-6">
<nav class="flex space-x-6" aria-label="Tabs">
<!-- Inaktiv verlinkt -->
<%= 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 %>
<!-- Aktiv -->
<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>
<!-- Diesen Link fügst du einfach in die Navigationsleisten der anderen beiden Views ein -->
<%= 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>
<!-- 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 justify-between">
<div class="flex items-center gap-4">
<div class="p-3 bg-blue-50 text-blue-600 rounded-lg shrink-0">
<!-- Heroicon: computer-desktop -->
<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="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>
</div>
<div>
<h2 class="text-lg font-bold text-gray-800">Geräte-Verwaltung</h2>
<p class="text-sm text-gray-500">Hier siehst du alle Browser und Geräte, mit denen du aktuell in Vault171 angemeldet bist.</p>
</div>
</div>
<!-- Alle anderen Sitzungen beenden -->
</div>
<!-- GERÄTELISTE -->
<div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
<div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
<h3 class="font-bold text-gray-700 text-sm">Angemeldete Geräte</h3>
</div>
<ul class="divide-y divide-gray-200">
<% @sessions.each do |session| %>
<li class="p-6 flex items-center justify-between gap-4">
<div class="flex items-start gap-4 min-w-0">
<!-- Icon-Zuweisung je nach Gerätetyp (Desktop vs. Mobile) -->
<div class="p-2.5 bg-gray-100 text-gray-500 rounded-lg shrink-0 mt-0.5">
<% if session.user_agent.to_s.downcase.include?('mobile') || session.user_agent.to_s.downcase.include?('iphone') %>
<!-- Heroicon: device-phone-mobile -->
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 18.75h3" /></svg>
<% else %>
<!-- Heroicon: computer-desktop -->
<svg class="h-5 w-5" 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>
<% end %>
</div>
<!-- Details zur Session -->
<div class="min-w-0">
<div class="flex items-center gap-2 flex-wrap">
<h4 class="text-sm font-semibold text-gray-900 truncate">
<%= parse_user_agent(session.user_agent) %>
</h4>
<!-- Status-Badge für die aktuelle Sitzung -->
<% if session == Current.session %>
<span class="inline-flex items-center gap-1.5 py-0.5 px-2 rounded-full text-[10px] font-medium bg-green-100 text-green-800 border border-green-200">
<span class="h-1.5 w-1.5 rounded-full bg-green-500 animate-pulse"></span>
Dieses Gerät
</span>
<% end %>
</div>
<p class="text-xs text-gray-500 mt-0.5 font-mono">IP: <%= session.ip_address || "Unbekannt" %></p>
<p class="text-xs text-gray-400 mt-1">
Letzte Aktivität: <%= l(session.updated_at, format: :short) %>
</p>
</div>
</div>
<!-- Einzelne Session beenden (außer man ist es selbst) -->
<div class="shrink-0">
<% if session != Current.session %>
<%= link_to session, method: :delete, title: "Gerät abmelden", data: { turbo_method: :delete, turbo_confirm: "Möchtest du dieses Gerät wirklich abmelden?" } do %>
<!-- Heroicon: trash -->
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
</svg>
<% end %>
<% end %>
</div>
</li>
<% end %>
</ul>
</div>
</div>

90
app/views/sessions/new.html.erb Normal file
View File

@@ -0,0 +1,90 @@
<!-- <p style="color: green"><%= notice %></p>
<p style="color: red"><%= alert %></p>
<h1>Sign in</h1>
<%= form_with(url: sign_in_path) do |form| %>
<div>
<%= form.label :email, style: "display: block" %>
<%= form.email_field :email, value: params[:email_hint], required: true, autofocus: true, autocomplete: "email" %>
</div>
<div>
<%= form.label :password, style: "display: block" %>
<%= form.password_field :password, required: true, autocomplete: "current-password" %>
</div>
<div>
<%= form.submit "Sign in" %>
</div>
<% end %>
<div>
<%= link_to "Sign up", sign_up_path %> |
<%= link_to "Forgot your password?", new_identity_password_reset_path %>
</div>
-->
<%# -------------------- %>
<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">
<!-- App Logo / Name -->
<div class="flex justify-center text-blue-600">
<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>
</div>
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">In Vault171 einloggen</h2>
<p class="mt-2 text-center text-sm text-gray-600">
oder <%= link_to "ein neues Konto erstellen", sign_up_path, class: "font-medium text-blue-600 hover:text-blue-500 transition" %>
</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">
<!-- Alert / Fehlermeldung bei falschem Passwort -->
<% if flash[:alert] %>
<div class="mb-4 p-4 text-sm text-red-800 rounded-lg bg-red-50 border border-red-200 flex items-start gap-2" role="alert">
<svg class="h-5 w-5 text-red-500 shrink-0 mt-0.5" 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 class="font-medium"><%= alert %></span>
</div>
<% end %>
<%= form_with(url: sign_in_path, class: "space-y-6") do |form| %>
<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">
<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 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0l-7.5-4.615a2.25 2.25 0 01-1.07-1.916V6.75" />
</svg>
</div>
<%= form.email_field :email, value: params[: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>
<div class="flex items-center justify-between mb-1.5">
<%= form.label :password, "Passwort", class: "block text-sm font-medium text-gray-700" %>
<div class="text-sm">
<%= link_to "Passwort vergessen?", new_identity_password_reset_path, class: "font-medium text-blue-600 hover:text-blue-500 transition" %>
</div>
</div>
<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 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
</svg>
</div>
<%= form.password_field :password, 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>
<div>
<%= form.submit "Anmelden", 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 cursor-pointer" %>
</div>
<% end %>
</div>
</div>
</div>