TOTP fully functioning, account settings done!

admin/views/edit-account.html

@@ -40,11 +40,11 @@
         {{range .TOTPs}}
         <div class="mfa-device">
             <div>
-                <p class="mfa-device-name">{{.Name}}</p>
-                <p class="mfa-device-date">Added: {{.CreatedAt}}</p>
+                <p class="mfa-device-name">{{.TOTP.Name}}</p>
+                <p class="mfa-device-date">Added: {{.CreatedAtString}}</p>
             </div>
             <div>
-                <a class="button delete" href="/admin/account/totp-delete/{{.Name}}">Delete</a>
+                <a class="button delete" href="/admin/account/totp-delete/{{.TOTP.Name}}">Delete</a>
             </div>
         </div>
         {{end}}

admin/views/login-totp.html

@@ -0,0 +1,42 @@
+{{define "head"}}
+<title>Login - ari melody 💫</title>
+<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
+<link rel="stylesheet" href="/admin/static/admin.css">
+<style>
+form#login-totp {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+form div {
+    width: 20rem;
+}
+
+form button {
+    margin-top: 1rem;
+}
+
+input {
+    width: calc(100% - 1rem - 2px);
+}
+</style>
+{{end}}
+
+{{define "content"}}
+<main>
+    <form action="/admin/login" method="POST" id="login-totp">
+        <h1>Two-Factor Authentication</h1>
+
+        <div>
+            <label for="totp">TOTP</label>
+            <input type="text" name="totp" value="" autocomplete="one-time-code" required autofocus>
+            <input type="hidden" name="username" value="{{.Username}}">
+            <input type="hidden" name="password" value="{{.Password}}">
+        </div>
+
+        <button type="submit" class="save">Login</button>
+    </form>
+</main>
+{{end}}

admin/views/login.html

@@ -3,14 +3,6 @@
 <link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
 <link rel="stylesheet" href="/admin/static/admin.css">
 <style>
-p a {
-    color: #2a67c8;
-}
-
-a.discord {
-    color: #5865F2;
-}
-
 form#login {
     width: 100%;
     display: flex;
@@ -27,7 +19,7 @@ form button {
 }
 
 input {
-    width: 100%;
+    width: calc(100% - 1rem - 2px);
 }
 </style>
 {{end}}
@@ -42,15 +34,14 @@ input {
     {{end}}
 
     <form action="/admin/login" method="POST" id="login">
+        <h1>Log In</h1>
+
         <div>
             <label for="username">Username</label>
-            <input type="text" name="username" value="" autocomplete="username" required>
+            <input type="text" name="username" value="" autocomplete="username" required autofocus>
 
             <label for="password">Password</label>
             <input type="password" name="password" value="" autocomplete="current-password" required>
-
-            <label for="totp">TOTP</label>
-            <input type="text" name="totp" value="" autocomplete="one-time-code" required>
         </div>
 
         <button type="submit" class="save">Login</button>

admin/views/register.html

@@ -27,7 +27,7 @@ form button {
 }
 
 input {
-    width: 100%;
+    width: calc(100% - 1rem - 2px);
 }
 </style>
 {{end}}
@@ -39,9 +39,11 @@ input {
     {{end}}
 
     <form action="/admin/register" method="POST" id="register">
+        <h1>Create Account</h1>
+
         <div>
             <label for="username">Username</label>
-            <input type="text" name="username" value="" autocomplete="username" required>
+            <input type="text" name="username" value="" autocomplete="username" required autofocus>
 
             <label for="email">Email</label>
             <input type="text" name="email" value="" autocomplete="email" required>

admin/views/totp-confirm.html

@@ -26,7 +26,7 @@ code {
         </p>
 
         <label for="totp">TOTP:</label>
-        <input type="text" name="totp" value="" autocomplete="one-time-code" required>
+        <input type="text" name="totp" value="" autocomplete="one-time-code" required autofocus>
 
         <button type="submit" class="new">Create</button>
     </form>

admin/views/totp-setup.html

@@ -12,7 +12,7 @@
 
     <form action="/admin/account/totp-setup" method="POST" id="totp-setup">
         <label for="totp-name">TOTP Device Name:</label>
-        <input type="text" name="totp-name" value="" autocomplete="off" required>
+        <input type="text" name="totp-name" value="" autocomplete="off" required autofocus>
 
         <button type="submit" class="new">Create</button>
     </form>