dkam/clinch
1
0
Fork 0
Code Issues 2 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

User registation working. Sidebar built. Dashboard built. TOTP enable works - TOTP login works
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
This commit is contained in:
Dan Milne
2025-10-23 18:07:27 +11:00
parent 56f7dd7b3c
commit 256cbe3a48
26 changed files with 1278 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

246
app/views/profiles/show.html.erb Normal file
View File

@@ -0,0 +1,246 @@
<div class="space-y-8">
<div>
<h1 class="text-3xl font-bold text-gray-900">Profile & Settings</h1>
<p class="mt-2 text-sm text-gray-600">Manage your account settings and security preferences.</p>
</div>
<!-- Account Information -->
<div class="bg-white shadow sm:rounded-lg">
<div class="px-4 py-5 sm:p-6">
<h3 class="text-lg font-medium leading-6 text-gray-900">Account Information</h3>
<div class="mt-5 space-y-6">
<%= form_with model: @user, url: profile_path, method: :patch, class: "space-y-6" do |form| %>
<% if @user.errors.any? %>
<div class="rounded-md bg-red-50 p-4">
<h3 class="text-sm font-medium text-red-800">
<%= pluralize(@user.errors.count, "error") %> prohibited this from being saved:
</h3>
<ul class="mt-2 list-disc list-inside text-sm text-red-700">
<% @user.errors.each do |error| %>
<li><%= error.full_message %></li>
<% end %>
</ul>
</div>
<% end %>
<div>
<%= form.label :email_address, "Email Address", class: "block text-sm font-medium text-gray-700" %>
<%= form.email_field :email_address,
required: true,
autocomplete: "email",
class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
</div>
<div>
<%= form.submit "Update Email", class: "inline-flex justify-center rounded-md border border-transparent bg-blue-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" %>
</div>
<% end %>
</div>
</div>
</div>
<!-- Change Password -->
<div class="bg-white shadow sm:rounded-lg">
<div class="px-4 py-5 sm:p-6">
<h3 class="text-lg font-medium leading-6 text-gray-900">Change Password</h3>
<div class="mt-5">
<%= form_with model: @user, url: profile_path, method: :patch, class: "space-y-6" do |form| %>
<div>
<%= form.label :current_password, "Current Password", class: "block text-sm font-medium text-gray-700" %>
<%= form.password_field :current_password,
autocomplete: "current-password",
placeholder: "Enter current password",
class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
</div>
<div>
<%= form.label :password, "New Password", class: "block text-sm font-medium text-gray-700" %>
<%= form.password_field :password,
autocomplete: "new-password",
placeholder: "Enter new password",
class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
<p class="mt-1 text-sm text-gray-500">Must be at least 8 characters</p>
</div>
<div>
<%= form.label :password_confirmation, "Confirm New Password", class: "block text-sm font-medium text-gray-700" %>
<%= form.password_field :password_confirmation,
autocomplete: "new-password",
placeholder: "Confirm new password",
class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
</div>
<div>
<%= form.submit "Update Password", class: "inline-flex justify-center rounded-md border border-transparent bg-blue-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" %>
</div>
<% end %>
</div>
</div>
</div>
<!-- Two-Factor Authentication -->
<div class="bg-white shadow sm:rounded-lg">
<div class="px-4 py-5 sm:p-6">
<h3 class="text-lg font-medium leading-6 text-gray-900">Two-Factor Authentication</h3>
<div class="mt-2 max-w-xl text-sm text-gray-500">
<p>Add an extra layer of security to your account by enabling two-factor authentication.</p>
</div>
<div class="mt-5">
<% if @user.totp_enabled? %>
<div class="rounded-md bg-green-50 p-4">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3 flex-1">
<p class="text-sm font-medium text-green-800">
Two-factor authentication is enabled
</p>
</div>
</div>
</div>
<div class="mt-4 flex gap-3">
<button type="button" onclick="showDisable2FAModal()" class="inline-flex items-center rounded-md border border-red-300 bg-white px-4 py-2 text-sm font-medium text-red-700 shadow-sm hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
Disable 2FA
</button>
<button type="button" onclick="showViewBackupCodesModal()" class="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
View Backup Codes
</button>
</div>
<% else %>
<%= link_to new_totp_path, class: "inline-flex items-center rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" do %>
Enable 2FA
<% end %>
<% end %>
</div>
</div>
</div>
<!-- Disable 2FA Modal -->
<div id="disable-2fa-modal" class="hidden fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50">
<div class="bg-white rounded-lg px-4 pt-5 pb-4 shadow-xl max-w-md w-full">
<div class="sm:flex sm:items-start">
<div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<svg class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left flex-1">
<h3 class="text-lg font-medium leading-6 text-gray-900">Disable Two-Factor Authentication</h3>
<div class="mt-2">
<p class="text-sm text-gray-500">Enter your password to disable 2FA. This will make your account less secure.</p>
</div>
<%= form_with url: totp_path, method: :delete, class: "mt-4" do |form| %>
<div>
<%= password_field_tag :password, nil,
placeholder: "Enter your password",
autocomplete: "current-password",
required: true,
class: "block w-full rounded-md border-gray-300 shadow-sm focus:border-red-500 focus:ring-red-500 sm:text-sm" %>
</div>
<div class="mt-4 flex gap-3">
<%= form.submit "Disable 2FA",
class: "inline-flex justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2" %>
<button type="button" onclick="hideDisable2FAModal()" class="inline-flex justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
Cancel
</button>
</div>
<% end %>
</div>
</div>
</div>
</div>
<!-- View Backup Codes Modal -->
<div id="view-backup-codes-modal" class="hidden fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50">
<div class="bg-white rounded-lg px-4 pt-5 pb-4 shadow-xl max-w-md w-full">
<div>
<h3 class="text-lg font-medium leading-6 text-gray-900">View Backup Codes</h3>
<div class="mt-2">
<p class="text-sm text-gray-500">Enter your password to view your backup codes.</p>
</div>
<%= form_with url: verify_password_totp_path, method: :post, class: "mt-4" do |form| %>
<div>
<%= password_field_tag :password, nil,
placeholder: "Enter your password",
autocomplete: "current-password",
required: true,
class: "block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
</div>
<div class="mt-4 flex gap-3">
<%= form.submit "View Codes",
class: "inline-flex justify-center rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" %>
<button type="button" onclick="hideViewBackupCodesModal()" class="inline-flex justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
Cancel
</button>
</div>
<% end %>
</div>
</div>
</div>
<script>
function showDisable2FAModal() {
document.getElementById('disable-2fa-modal').classList.remove('hidden');
}
function hideDisable2FAModal() {
document.getElementById('disable-2fa-modal').classList.add('hidden');
}
function showViewBackupCodesModal() {
document.getElementById('view-backup-codes-modal').classList.remove('hidden');
}
function hideViewBackupCodesModal() {
document.getElementById('view-backup-codes-modal').classList.add('hidden');
}
</script>
<!-- Active Sessions -->
<div class="bg-white shadow sm:rounded-lg">
<div class="px-4 py-5 sm:p-6">
<h3 class="text-lg font-medium leading-6 text-gray-900">Active Sessions</h3>
<div class="mt-2 max-w-xl text-sm text-gray-500">
<p>These devices are currently signed in to your account. Revoke any sessions that you don't recognize.</p>
</div>
<div class="mt-5">
<% if @active_sessions.any? %>
<ul role="list" class="divide-y divide-gray-200">
<% @active_sessions.each do |session| %>
<li class="py-4">
<div class="flex items-center justify-between">
<div class="flex flex-col">
<p class="text-sm font-medium text-gray-900">
<%= session.device_name || "Unknown Device" %>
<% if session.id == Current.session.id %>
<span class="ml-2 inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800">
This device
</span>
<% end %>
</p>
<p class="mt-1 text-sm text-gray-500">
<%= session.ip_address %>
</p>
<p class="mt-1 text-xs text-gray-400">
Last active <%= time_ago_in_words(session.last_activity_at || session.updated_at) %> ago
</p>
</div>
<% if session.id != Current.session.id %>
<%= button_to "Revoke", session_path(session), method: :delete,
class: "inline-flex items-center rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
form: { data: { turbo_confirm: "Are you sure you want to revoke this session?" } } %>
<% end %>
</div>
</li>
<% end %>
</ul>
<% else %>
<p class="text-sm text-gray-500">No other active sessions.</p>
<% end %>
</div>
</div>
</div>
</div>