btcpayserver/BTCPayServer/Views/UIManage/LoginCodes.cshtml
Dennis Reimann ead1dffd98 QR container display fixes
Consistently centers the container contents.
2022-03-04 10:49:36 +00:00

40 lines
1.7 KiB
Plaintext

@model string
@{
ViewData.SetActivePage(ManageNavPages.LoginCodes, "Login Codes");
}
<h3 class="mb-3">@ViewData["Title"]</h3>
<p>Easily log into BTCPay Server on another device using a simple login code from an already authenticated device.</p>
<div class="d-inline-flex flex-column" style="width:256px">
<div class="qr-container mb-2">
<vc:qr-code data="@Model"/>
</div>
<input type="hidden" value="@Model" id="logincode">
<p class="text-center text-muted mb-1" id="progress">Valid for 60 seconds</p>
<div class="progress only-for-js" data-bs-toggle="tooltip" data-bs-placement="top">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width:100%" id="progressbar"></div>
</div>
<a class="btn btn-secondary mt-3" id="regeneratecode" asp-action="LoginCodes">Regenerate code</a>
</div>
@section PageFootContent
{
<link href="~/main/qrcode.css" rel="stylesheet" asp-append-version="true"/>
<script src="~/js/copy-to-clipboard.js"></script>
<script>
const SECONDS = 60
const progress = document.getElementById('progress')
const progressbar = document.getElementById('progressbar')
let remaining = SECONDS
const update = () => {
remaining--
const percent = Math.round(remaining/SECONDS * 100)
progress.innerText = `Valid for ${remaining} seconds`
progressbar.style.width = `${percent}%`
if (percent < 15) progressbar.classList.add('bg-warning')
if (percent < 1) document.getElementById('regeneratecode').click()
}
setInterval(update, 1000)
update()
</script>
}