admin account/TOTP fixes

admin/accounthttp.go

@@ -20,7 +20,7 @@ func accountHandler(app *model.AppState) http.Handler {
 
     mux.Handle("/account/totp-setup", totpSetupHandler(app))
     mux.Handle("/account/totp-confirm", totpConfirmHandler(app))
-    mux.Handle("/account/totp-delete/", http.StripPrefix("/totp-delete", totpDeleteHandler(app)))
+    mux.Handle("/account/totp-delete", totpDeleteHandler(app))
 
     mux.Handle("/account/password", changePasswordHandler(app))
     mux.Handle("/account/delete", deleteAccountHandler(app))
@@ -266,11 +266,6 @@ func totpConfirmHandler(app *model.AppState) http.Handler {
             http.Error(w, http.StatusText(http.StatusBadRequest), http.StatusBadRequest)
             return
         }
-        code := r.FormValue("totp")
-        if len(code) != controller.TOTP_CODE_LENGTH {
-            http.Error(w, http.StatusText(http.StatusBadRequest), http.StatusBadRequest)
-            return
-        }
 
         totp, err := controller.GetTOTP(app.DB, session.Account.ID, name)
         if err != nil {
@@ -290,23 +285,22 @@ func totpConfirmHandler(app *model.AppState) http.Handler {
             fmt.Fprintf(os.Stderr, "WARN: Failed to generate TOTP QR code: %v\n", err)
         }
 
+        code := r.FormValue("totp")
         confirmCode := controller.GenerateTOTP(totp.Secret, 0)
-        if code != confirmCode {
+        confirmCodeOffset := controller.GenerateTOTP(totp.Secret, 1)
-            confirmCodeOffset := controller.GenerateTOTP(totp.Secret, 1)
+        if len(code) != controller.TOTP_CODE_LENGTH || (code != confirmCode && code != confirmCodeOffset) {
-            if code != confirmCodeOffset {
+            session.Error = sql.NullString{ Valid: true, String: "Incorrect TOTP code. Please try again." }
-                session.Error = sql.NullString{ Valid: true, String: "Incorrect TOTP code. Please try again." }
+            err = templates.TOTPConfirmTemplate.Execute(w, totpConfirmData{
-                err = templates.TOTPConfirmTemplate.Execute(w, totpConfirmData{
+                adminPageData: adminPageData{ Path: r.URL.Path, Session: session },
-                    adminPageData: adminPageData{ Path: r.URL.Path, Session: session },
+                TOTP: totp,
-                    TOTP: totp,
+                NameEscaped: url.PathEscape(totp.Name),
-                    NameEscaped: url.PathEscape(totp.Name),
+                QRBase64Image: qrBase64Image,
-                    QRBase64Image: qrBase64Image,
+            })
-                })
+            if err != nil {
-                if err != nil {
+                fmt.Fprintf(os.Stderr, "WARN: Failed to render TOTP setup page: %v\n", err)
-                    fmt.Fprintf(os.Stderr, "WARN: Failed to render TOTP setup page: %v\n", err)
+                http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
-                    http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
-                }
-                return
             }
+            return
         }
 
         err = controller.ConfirmTOTP(app.DB, session.Account.ID, name)
@@ -327,18 +321,23 @@ func totpConfirmHandler(app *model.AppState) http.Handler {
 
 func totpDeleteHandler(app *model.AppState) http.Handler {
     return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-        if r.Method != http.MethodGet {
+        if r.Method != http.MethodPost {
             http.NotFound(w, r)
             return
         }
 
-        if len(r.URL.Path) < 2 {
+        session := r.Context().Value("session").(*model.Session)
+
+        err := r.ParseForm()
+        if err != nil {
+            http.Error(w, http.StatusText(http.StatusBadRequest), http.StatusBadRequest)
+            return
+        }
+        name := r.FormValue("totp-name")
+        if len(name) == 0 {
             http.Error(w, http.StatusText(http.StatusBadRequest), http.StatusBadRequest)
             return
         }
-        name := r.URL.Path[1:]
-
-        session := r.Context().Value("session").(*model.Session)
 
         totp, err := controller.GetTOTP(app.DB, session.Account.ID, name)
         if err != nil {

admin/static/admin.css

@@ -309,6 +309,7 @@ header :is(h1, h2, h3) small,
     margin: 0 0 1em 0;
     padding: 1em;
     border-radius: 8px;
+    color: #101010;
     background: #ffffff;
 }
 #message {
@@ -379,21 +380,25 @@ button:active, .button:active {
 form {
     width: 100%;
     display: block;
+    color: var(--fg-0);
 }
 form label {
     width: 100%;
     margin: 1rem 0 .5rem 0;
     display: block;
-    color: #10101080;
 }
 form input {
-    margin: .5rem 0;
+    min-width: 20rem;
-    padding: .3rem .5rem;
+    max-width: calc(100% - 1em));
+    margin: .5em 0;
+    padding: .3em .5em;
     display: block;
     border-radius: 4px;
+    border: 1px solid #808080;
     font-size: inherit;
     font-family: inherit;
     color: inherit;
+    background-color: var(--bg-0);
 }
 input[disabled] {
     opacity: .5;

admin/static/edit-account.css

@@ -11,7 +11,8 @@ label {
     align-items: center;
     color: inherit;
 }
-input {
+form#change-password input,
+form#delete-account input {
     width: min(20rem, calc(100% - 1rem));
     margin: .5rem 0;
     padding: .3rem .5rem;
@@ -48,3 +49,7 @@ input {
 .mfa-device .mfa-device-name {
     font-weight: bold;
 }
+
+.mfa-device form input {
+    display: none;
+}

admin/templates/html/artists.html

@@ -1,7 +1,6 @@
 {{define "head"}}
 <title>Artists - ari melody 💫</title>
 <link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
-<link rel="stylesheet" href="/admin/static/admin.css">
 <link rel="stylesheet" href="/admin/static/artists.css">
 {{end}}
 

admin/templates/html/edit-account.html

@@ -28,6 +28,8 @@
             <label for="confirm-password">Confirm Password</label>
             <input type="password" id="confirm-password" value="" autocomplete="new-password" required>
 
+            <br>
+
             <button type="submit" class="save">Change Password</button>
         </form>
     </div>
@@ -44,7 +46,10 @@
                 <p class="mfa-device-date">Added: {{.CreatedAtString}}</p>
             </div>
             <div>
-                <a class="button delete" href="/admin/account/totp-delete/{{.TOTP.Name}}">Delete</a>
+                <form method="POST" action="/admin/account/totp-delete">
+                    <input type="text" name="totp-name" value="{{.TOTP.Name}}" hidden>
+                    <button type="submit" class="delete">Delete</button>
+                </form>
             </div>
         </div>
         {{end}}
@@ -67,13 +72,15 @@
         This action is <strong>irreversible</strong>.
         You will need to enter your password and TOTP below.
         </p>
-        <form action="/admin/account/delete" method="POST">
+        <form action="/admin/account/delete" method="POST" id="delete-account">
             <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>
 
+            <br>
+
             <button type="submit" class="delete">Delete Account</button>
         </form>
     </div>

admin/templates/html/index.html

@@ -1,7 +1,6 @@
 {{define "head"}}
 <title>Admin - ari melody 💫</title>
 <link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
-<link rel="stylesheet" href="/admin/static/admin.css">
 <link rel="stylesheet" href="/admin/static/releases.css">
 <link rel="stylesheet" href="/admin/static/artists.css">
 <link rel="stylesheet" href="/admin/static/tracks.css">

admin/templates/html/login-totp.html

@@ -1,7 +1,6 @@
 {{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%;

admin/templates/html/login.html

@@ -1,7 +1,6 @@
 {{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 {
     width: 100%;

admin/templates/html/logs.html

@@ -1,7 +1,6 @@
 {{define "head"}}
 <title>Audit Logs - ari melody 💫</title>
 <link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
-<link rel="stylesheet" href="/admin/static/admin.css">
 <link rel="stylesheet" href="/admin/static/logs.css">
 {{end}}
 

admin/templates/html/register.html

@@ -1,7 +1,6 @@
 {{define "head"}}
 <title>Register - ari melody 💫</title>
 <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;

admin/templates/html/releases.html

@@ -1,7 +1,6 @@
 {{define "head"}}
 <title>Releases - ari melody 💫</title>
 <link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
-<link rel="stylesheet" href="/admin/static/admin.css">
 <link rel="stylesheet" href="/admin/static/releases.css">
 {{end}}
 

admin/templates/html/totp-confirm.html

@@ -1,7 +1,6 @@
 {{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>
 .qr-code {
     border: 1px solid #8888;
@@ -9,11 +8,20 @@
 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}}
@@ -40,7 +48,14 @@ code {
         <p><code>{{.TOTP.Secret}}</code></p>
 
         <label for="totp">TOTP:</label>
-        <input type="text" name="totp" value="" autocomplete="one-time-code" required autofocus>
+        <input type="text"
+               name="totp"
+               value=""
+               minlength="6"
+               maxlength="6"
+               autocomplete="one-time-code"
+               required
+               autofocus>
 
         <button type="submit" class="new">Create</button>
     </form>

admin/templates/html/totp-setup.html

@@ -1,11 +1,12 @@
 {{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>
+    <h1>Two-Factor Authentication</h1>
+
     {{if .Session.Error.Valid}}
     <p id="error">{{html .Session.Error.String}}</p>
     {{end}}

admin/templates/html/tracks.html

@@ -1,7 +1,6 @@
 {{define "head"}}
 <title>Releases - ari melody 💫</title>
 <link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
-<link rel="stylesheet" href="/admin/static/admin.css">
 <link rel="stylesheet" href="/admin/static/tracks.css">
 {{end}}