arimelody-web/admin/templates/html/totp-confirm.html

{{define "head"}}
<title>TOTP Confirmation - ari melody 💫</title>
<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
<style>
.qr-code {
    border: 1px solid #8888;
}
code {
    user-select: all;
}
#totp-setup input {
    width: 3.8em;
    min-width: auto;
    font-size: 32px;
    font-family: 'Monaspace Argon', monospace;
    text-align: center;
}
</style>
{{end}}

{{define "content"}}
<main>
    <h1>Two-Factor Authentication</h1>

    {{if .Session.Error.Valid}}
    <p id="error">{{html .Session.Error.String}}</p>
    {{end}}

    <form action="/admin/account/totp-confirm?totp-name={{.NameEscaped}}" method="POST" id="totp-setup">
        {{if .QRBase64Image}}
        <img src="data:image/png;base64,{{.QRBase64Image}}" alt="" class="qr-code">

        <p>
        Scan the QR code above into your authentication app or password manager,
        then enter your 2FA code below.
        </p>

        <p>
        If the QR code does not work, you may also enter this secret code:
        </p>
        {{else}}
        <p>
        Paste the below secret code into your authentication app or password manager,
        then enter your 2FA code below:
        </p>
        {{end}}

        <p><code>{{.TOTP.Secret}}</code></p>

        <label for="totp">TOTP:</label>
        <input type="text"
               name="totp"
               value=""
               minlength="6"
               maxlength="6"
               autocomplete="one-time-code"
               required
               autofocus>

        <button type="submit" class="new">Create</button>
    </form>
</main>
{{end}}