This commit is contained in:
KingKDot
2026-06-01 16:37:23 -05:00
parent 421abd178c
commit 7f0a7b1d91
17 changed files with 815 additions and 5 deletions
+90
View File
@@ -169,6 +169,76 @@
</button>
</form>
<div id="mfa-settings" class="space-y-3 mt-2 pt-4 border-t border-slate-800">
<div class="flex items-center justify-between gap-3 flex-wrap">
<div>
<p class="text-xs font-semibold uppercase tracking-wider text-slate-500 pb-1">Multi-Factor Authentication</p>
<p id="mfa-status-text" class="text-sm text-slate-400">Loading MFA status...</p>
</div>
<button
id="mfa-start-btn"
type="button"
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-emerald-700 hover:bg-emerald-600 transition-colors text-white text-sm font-medium"
>
<i class="fa-solid fa-shield-halved"></i>Set Up MFA
</button>
</div>
<div id="mfa-setup-panel" class="hidden rounded-lg border border-slate-700 bg-slate-900 px-4 py-4 space-y-4">
<p class="text-sm text-slate-300 pb-1">Add this manual key to your authenticator app, then enter the 6-digit code.</p>
<div class="grid grid-cols-1 md:grid-cols-[20rem_minmax(0,1fr)] gap-5 items-start">
<div class="w-80 max-w-full">
<div id="mfa-qr-code" class="aspect-square w-full rounded-lg bg-white p-1 border border-slate-700 overflow-hidden"></div>
</div>
<div class="min-w-0 space-y-3">
<p class="text-xs font-semibold uppercase tracking-wider text-slate-500">Manual Key</p>
<div class="rounded bg-slate-950 border border-slate-800 px-3 py-2 font-mono text-sm text-sky-300 break-all" id="mfa-secret-text"></div>
<input
id="mfa-enable-code"
type="text"
inputmode="numeric"
maxlength="6"
placeholder="6-digit code"
class="w-full px-3 py-2 rounded-lg bg-slate-950 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-emerald-500"
/>
<div class="flex gap-2 flex-wrap">
<button id="mfa-enable-btn" type="button" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-emerald-700 hover:bg-emerald-600 transition-colors text-white text-sm font-medium">
<i class="fa-solid fa-check"></i>Enable MFA
</button>
<a id="mfa-otpauth-link" href="#" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 border border-slate-700 text-sm transition-colors">
<i class="fa-solid fa-mobile-screen"></i>Open App Link
</a>
</div>
</div>
</div>
</div>
<div id="mfa-disable-panel" class="hidden rounded-lg border border-slate-700 bg-slate-900 px-4 py-4 space-y-3">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
<input
id="mfa-disable-password"
type="password"
autocomplete="current-password"
placeholder="Current password"
class="w-full px-3 py-2 rounded-lg bg-slate-950 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-rose-500"
/>
<input
id="mfa-disable-code"
type="text"
inputmode="numeric"
maxlength="6"
placeholder="6-digit code"
class="w-full px-3 py-2 rounded-lg bg-slate-950 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-rose-500"
/>
</div>
<button id="mfa-disable-btn" type="button" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-rose-800/70 hover:bg-rose-700 transition-colors text-rose-100 border border-rose-700 text-sm font-medium">
<i class="fa-solid fa-lock-open"></i>Disable MFA
</button>
</div>
<p id="mfa-message" class="hidden text-sm rounded-lg px-3 py-2 border"></p>
</div>
<p id="settings-message" class="hidden text-sm rounded-lg px-3 py-2 border"></p>
</section>
@@ -574,6 +644,26 @@
</div>
</div>
<div>
<p class="text-xs font-semibold uppercase tracking-wider text-slate-500 mb-2">MFA Enforcement</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm">
<label class="flex items-start gap-2 rounded-lg border border-slate-700/60 bg-slate-900/40 p-3">
<input id="security-mfa-admins" type="checkbox" class="mt-1 h-4 w-4 accent-indigo-500" />
<span>
<span class="block text-slate-200">Require MFA for admins</span>
<span class="block text-xs text-slate-500">Your admin account must have MFA enabled first.</span>
</span>
</label>
<label class="flex items-start gap-2 rounded-lg border border-slate-700/60 bg-slate-900/40 p-3">
<input id="security-mfa-non-admins" type="checkbox" class="mt-1 h-4 w-4 accent-indigo-500" />
<span>
<span class="block text-slate-200">Require MFA for non-admins</span>
<span class="block text-xs text-slate-500">Applies to operator and viewer accounts.</span>
</span>
</label>
</div>
</div>
<button
type="submit"
id="security-save-btn"