TOTP methods can now be created on the frontend!

admin/views/edit-account.html

@@ -44,7 +44,7 @@
                 <p class="mfa-device-date">Added: {{.CreatedAt}}</p>
             </div>
             <div>
-                <a class="delete">Delete</a>
+                <a class="button delete" href="/admin/account/totp-delete/{{.Name}}">Delete</a>
             </div>
         </div>
         {{end}}

admin/views/login.html

@@ -11,7 +11,7 @@ a.discord {
     color: #5865F2;
 }
 
-form {
+form#login {
     width: 100%;
     display: flex;
     flex-direction: column;
@@ -26,26 +26,8 @@ form button {
     margin-top: 1rem;
 }
 
-label {
-    width: 100%;
-    margin: 1rem 0 .5rem 0;
-    display: block;
-    color: #10101080;
-}
 input {
     width: 100%;
-    margin: .5rem 0;
-    padding: .3rem .5rem;
-    display: block;
-    border-radius: 4px;
-    border: 1px solid #808080;
-    font-size: inherit;
-    font-family: inherit;
-    color: inherit;
-}
-input[disabled] {
-    opacity: .5;
-    cursor: not-allowed;
 }
 </style>
 {{end}}

admin/views/register.html

@@ -11,7 +11,7 @@ a.discord {
     color: #5865F2;
 }
 
-form {
+form#register {
     width: 100%;
     display: flex;
     flex-direction: column;
@@ -26,22 +26,8 @@ form button {
     margin-top: 1rem;
 }
 
-label {
-    width: 100%;
-    margin: 1rem 0 .5rem 0;
-    display: block;
-    color: #10101080;
-}
 input {
     width: 100%;
-    margin: .5rem 0;
-    padding: .3rem .5rem;
-    display: block;
-    border-radius: 4px;
-    border: 1px solid #808080;
-    font-size: inherit;
-    font-family: inherit;
-    color: inherit;
 }
 </style>
 {{end}}
@@ -52,7 +38,7 @@ input {
     <p id="error">{{html .Session.Error.String}}</p>
     {{end}}
 
-    <form action="/admin/register" method="POST" id="create-account">
+    <form action="/admin/register" method="POST" id="register">
         <div>
             <label for="username">Username</label>
             <input type="text" name="username" value="" autocomplete="username" required>

admin/views/totp-confirm.html

@@ -0,0 +1,34 @@
+{{define "head"}}
+<title>TOTP Confirmation - ari melody 💫</title>
+<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
+<link rel="stylesheet" href="/admin/static/admin.css">
+<style>
+code {
+    user-select: all;
+}
+</style>
+{{end}}
+
+{{define "content"}}
+<main>
+    {{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">
+        <p><strong>Your TOTP secret: </strong><code>{{.TOTP.Secret}}</code></p>
+
+        <!-- TODO: TOTP secret QR codes -->
+
+        <p>
+        Please store this into your two-factor authentication app or
+        password manager, then enter your code below:
+        </p>
+
+        <label for="totp">TOTP:</label>
+        <input type="text" name="totp" value="" autocomplete="one-time-code" required>
+
+        <button type="submit" class="new">Create</button>
+    </form>
+</main>
+{{end}}

admin/views/totp-setup.html

@@ -0,0 +1,20 @@
+{{define "head"}}
+<title>TOTP Setup - ari melody 💫</title>
+<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
+<link rel="stylesheet" href="/admin/static/admin.css">
+{{end}}
+
+{{define "content"}}
+<main>
+    {{if .Session.Error.Valid}}
+    <p id="error">{{html .Session.Error.String}}</p>
+    {{end}}
+
+    <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>
+
+        <button type="submit" class="new">Create</button>
+    </form>
+</main>
+{{end}}