QR codes complete, account settings finished!

+ refactored templates a little; this might need more work!

admin/views/totp-confirm.html

@@ -3,6 +3,9 @@
 <link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
 <link rel="stylesheet" href="/admin/static/admin.css">
 <style>
+.qr-code {
+    border: 1px solid #8888;
+}
 code {
     user-select: all;
 }
@@ -16,15 +19,19 @@ code {
     {{end}}
 
     <form action="/admin/account/totp-confirm?totp-name={{.NameEscaped}}" method="POST" id="totp-setup">
-        <p><strong>Your TOTP secret: </strong><code>{{.TOTP.Secret}}</code></p>
-
-        <!-- TODO: TOTP secret QR codes -->
+        <img src="data:image/png;base64,{{.QRBase64Image}}" alt="" class="qr-code">
 
         <p>
-        Please store this into your two-factor authentication app or
-        password manager, then enter your code below:
+        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>
+
+        <p><code>{{.TOTP.Secret}}</code></p>
+
         <label for="totp">TOTP:</label>
         <input type="text" name="totp" value="" autocomplete="one-time-code" required autofocus>