Big first commit

authentication-zero and first layout
2026-05-21 02:54:39 +02:00
parent 6e7fe9797a
commit 6f192274ab
49 changed files with 1933 additions and 17 deletions
--- a/app/views/sessions/index.html.erb
+++ b/app/views/sessions/index.html.erb
@@ -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>