{{define "title"}}Two-Factor Authentication{{end}} {{define "content"}} <div class="container"> <section class="hero is-info is-bold"> <div class="hero-body"> <div class="container"> <h1 class="title"> <i class="fa fa-lock mr-2"></i> Two-Factor Authentication </h1> </div> </div> </section> {{ $User := .CurrentUser }} <div class="block p-4"> <!-- Currently Enabled screen --> {{if .TwoFactor.Enabled}} <div class="card"> <div class="card-header has-background-link"> <p class="card-header-title has-text-light"> <i class="fa fa-lock mr-2"></i> Two-Factor Authentication </p> </div> <div class="card-content"> <div class="content"> <p> Two-Factor status: <i class="fa fa-check mr-1 has-text-success-dark"></i> <strong class="has-text-success-dark">Enabled!</strong> </p> <p> When you next log in to your account, you will need your Authenticator App handy to produce the time-limited six-digit code to log in. </p> <h4>Backup Codes</h4> <p> In case you lose access to your Authenticator App, please print off or write down these <strong>backup codes</strong> which will allow you to re-gain access to your {{PrettyTitle}} account. Each of these codes may be used <strong>one time</strong> in response to your 2FA Authenticator prompt at login. </p> <div class="columns is-multiline is-mobile"> {{range .TwoFactor.GetBackupCodes}} <div class="column is-one-third-mobile is-one-quarter-tablet"> <code>{{.}}</code> </div> {{end}} </div> <p> If you would like to <strong>re-generate</strong> these backup codes, click on the button below. This may be useful if you have needed to log in using these codes (which are one-time use only) and wish to generate a fresh set of backup codes. Note that re-generating new codes will cause the old ones to no longer work! </p> <!-- Form to regenerate backup codes. --> <form action="{{.Request.URL.Path}}" method="POST"> {{InputCSRF}} <input type="hidden" name="intent" value="regenerate-backup-codes"> <button type="submit" class="button is-warning" onclick="return window.confirm('Are you sure you want to re-generate all of your Backup Codes? This will remove the current set of Backup Codes and replace them with a new set.')"> <i class="fa fa-rotate mr-2"></i> Generate all-new backup codes </button> </form> <h4 class="has-text-danger mt-4">Disable Two-Factor Auth</h4> <p> If you wish to <strong>disable</strong> two-factor authentication for your account, please enter your account password for verification and click on the button below. </p> <form action="{{.Request.URL.Path}}" method="POST"> {{InputCSRF}} <input type="hidden" name="intent" value="disable"> <div class="field"> <label class="label" for="password">Your account password:</label> <input type="password" class="input" name="password" placeholder="Password" required> </div> <button type="submit" class="button is-danger"> Disable Two-Factor Authentication </button> </form> </div> </div> </div> {{end}}<!-- Currently Enabled --> <!-- Set Up screen --> {{if not .TwoFactor.Enabled}} <div class="card"> <div class="card-header has-background-link"> <p class="card-header-title has-text-light"> <i class="fa fa-lock mr-2"></i> Set Up Two-Factor Authentication </p> </div> <div class="card-content"> <div class="content"> <p> Two-Factor status: <i class="fa fa-xmark mr-1 has-text-danger"></i> <strong class="has-text-danger">Disabled!</strong> </p> <h2>What is Two-Factor Authentication?</h2> <p> Two-Factor Authentication (or 2FA) is a security feature that can help to protect your account in case somebody finds out your password. When logging in, you can use an Authenticator App that will generate temporary one-time use codes to log in to your account. </p> <p> For example: if somebody figured out your username and password for {{PrettyTitle}}, they would be able to log in as you with that information. With 2FA you can add a second factor to your login: the two factors are "something you know" (your password) and "something you have" (your Authenticator App that produces six-digit codes). This way, if somebody learns what your password is, they still can't log in to your account unless they also have your Authenticator App. </p> <p> After you set up 2FA, from the next time you log in to {{PrettyTitle}} with your password, you will also be prompted to enter the six-digit code from your Authenticator App. In case you lost access to your Authenticator, you will be able to use a "Backup Code" to log in -- you will be able to see your Backup Codes after setting up your Authenticator App. </p> <h2>Set up your Authenticator App</h2> <p> To set up Two-Factor Auth, you'll need to download and install a compatible Authenticator App on your device. Some suggestions for apps that are compatible with {{PrettyTitle}} are as follows: </p> <ul> <li> <strong>Google Authenticator:</strong> for <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2" target="_blank"> <i class="fab fa-android"></i> Android </a> or <a href="https://apps.apple.com/us/app/google-authenticator/id388497605" target="_blank"> <i class="fab fa-apple"></i> iOS </a> </li> <li> <strong> <a href="https://authy.com/download/" target="_blank">Authy:</a> </strong> available for <i class="fab fa-android"></i> Android and <i class="fab fa-apple"></i> iOS as well as Windows, macOS and Linux computers. </li> </ul> <h3>Add {{PrettyTitle}} to your Authenticator App</h3> <p> When you have your Authenticator App ready, click on its "Add a new site" button and scan the following QR code to enroll your device for {{PrettyTitle}}: </p> {{ToHTML .QRCode}} <p> Alternatively (if you can't scan the QR code), you may copy and paste this secret text in to your Authenticator app: </p> <div class="columns is-mobile"> <div class="column is-half-tablet pr-1"> <input type="text" class="input" id="totp-secret" value="{{.Key.Secret}}" readonly onclick="copySecret()"> </div> <div class="column is-narrow pl-0"> <button type="button" class="button is-success" id="copy-button" onclick="copySecret()"> <i class="fa fa-copy mr-1"></i> Copy </button> </div> </div> <h3>Test your Authenticator App</h3> <p> After scanning the QR code (or copying the secret key) into your Authenticator app, you should be able to generate temporary six-digit authentication codes. </p> <p> Test that you have enrolled your authenticator correctly by entering the current six-digit code below: </p> <form action="{{.Request.URL.Path}}" method="POST"> {{InputCSRF}} <input type="hidden" name="intent" value="setup-verify"> <div class="field"> <label class="label" for="code"> Authentication Code: </label> <input type="text" class="input is-one-quarter" name="code" id="code" pattern="^[0-9]{6}$" maxlength="6" placeholder="000000" style="max-width: 12em" autocomplete="off"> </div> <button type="submit" class="button is-primary">Confirm & Continue</button> </form> </div> </div> </div> </div> {{end}}<!-- Setup --> </div> {{end}} {{define "scripts"}} <script> function copySecret() { const secret = document.querySelector("#totp-secret") copyButton = document.querySelector("#copy-button"); secret.select(); navigator.clipboard.writeText(secret.value); copyButton.innerHTML = `<i class="fa fa-check mr-1"></i> Copied!`; setTimeout(() => { copyButton.innerHTML = `<i class="fa fa-copy mr-1"></i> Copy`; }, 1000); } </script> {{end}}