mirror of
https://github.com/btcpayserver/btcpayserver.git
synced 2024-11-19 18:11:36 +01:00
ead1dffd98
Consistently centers the container contents.
40 lines
1.7 KiB
Plaintext
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>
|
|
}
|