Patrick Asmus (scriptos)
fd13e67aef
Some checks failed
Release Docker Image / Build & Push Docker Image (release) Failing after 1m30s
82 lines
3.0 KiB
HTML
82 lines
3.0 KiB
HTML
{{define "content"}}
|
|
<div class="row row-deck row-cards">
|
|
<div class="col-lg-8">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title"><i class="ti ti-shield-check"></i> Setup Two-Factor Authentication</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
{{if .MFARequired}}
|
|
<div class="alert alert-warning">
|
|
<div class="d-flex">
|
|
<div><i class="ti ti-alert-triangle icon alert-icon"></i></div>
|
|
<div>
|
|
<h4 class="alert-title">MFA is required</h4>
|
|
<div class="text-secondary">Your administrator requires all users to set up two-factor authentication. Please configure MFA to continue using the application.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
<div class="mb-4">
|
|
<h4>Step 1: Scan QR Code</h4>
|
|
<p class="text-secondary">
|
|
Scan the QR code below with your authenticator app (Google Authenticator, Authy, etc.)
|
|
</p>
|
|
<div class="text-center my-4">
|
|
<div id="qrcode" class="d-inline-block p-3 bg-white border rounded"></div>
|
|
</div>
|
|
<div class="text-center">
|
|
<p class="text-secondary mb-1">Or enter this secret manually:</p>
|
|
<code class="fs-4 user-select-all">{{.MFASecret}}</code>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div>
|
|
<h4>Step 2: Verify Code</h4>
|
|
<p class="text-secondary">
|
|
Enter the 6-digit code from your authenticator app to confirm setup.
|
|
</p>
|
|
<form action="/settings/mfa/setup" method="post">
|
|
<input type="hidden" name="mfa_secret" value="{{.MFASecret}}">
|
|
<div class="mb-3">
|
|
<label class="form-label required">Verification Code</label>
|
|
<div class="input-icon">
|
|
<span class="input-icon-addon"><i class="ti ti-shield-lock"></i></span>
|
|
<input type="text" name="mfa_code" class="form-control" placeholder="000000"
|
|
required pattern="[0-9]{6}" maxlength="6" autocomplete="off" autofocus
|
|
style="font-size: 1.5rem; letter-spacing: 0.5rem; text-align: center;">
|
|
</div>
|
|
</div>
|
|
<div class="form-footer">
|
|
{{if not .MFARequired}}
|
|
<a href="/settings" class="btn btn-outline-secondary me-2">
|
|
<i class="ti ti-arrow-left"></i> Cancel
|
|
</a>
|
|
{{end}}
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="ti ti-shield-check"></i> Enable MFA
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- QR Code Generation via JavaScript -->
|
|
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
|
|
<script>
|
|
new QRCode(document.getElementById("qrcode"), {
|
|
text: "{{.MFAUri}}",
|
|
width: 200,
|
|
height: 200,
|
|
colorDark: "#000000",
|
|
colorLight: "#ffffff",
|
|
correctLevel: QRCode.CorrectLevel.M
|
|
});
|
|
</script>
|
|
{{end}}
|