add 2MFA
This commit is contained in:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user