From 4c42d23cf48d250d583aa7a9ac37e5cca028fc5b Mon Sep 17 00:00:00 2001 From: Adora Laura Kalb Date: Fri, 10 May 2024 11:44:42 +0200 Subject: [PATCH] Handle 2fa setup error handling in JS (#6) --- internal/app/routes.go | 4 +-- views/account.tmpl | 2 +- views/setup-multifactor.tmpl | 51 +++++++++++++++++++++++------------- web/main.js | 19 +++++++++----- 4 files changed, 48 insertions(+), 28 deletions(-) diff --git a/internal/app/routes.go b/internal/app/routes.go index 4a52314..5f77e1a 100644 --- a/internal/app/routes.go +++ b/internal/app/routes.go @@ -10,8 +10,8 @@ func addWebRoutes(f *fiber.App) { f.Get("/admin/", web.HandleAdminLinkIndexGet) f.Get("/admin/account/", web.HandleAdminAccountGet) - f.Get("/admin/account/mfasetup", web.HandleAdminAccountMFASetupGet) - f.Post("/admin/account/mfasetup", web.HandleAdminAccountMFASetupPost) + f.Get("/admin/account/setup-multifactor", web.HandleAdminAccountMFASetupGet) + f.Post("/admin/account/mfa/confirm", web.HandleAdminAccountMFASetupPost) f.Delete("/admin/account/mfa", web.HandleAdminAccountMFARemove) f.Get("/admin/login", web.HandleAdminLoginGet) diff --git a/views/account.tmpl b/views/account.tmpl index 418b754..836641c 100644 --- a/views/account.tmpl +++ b/views/account.tmpl @@ -60,7 +60,7 @@ {{if .MFAEnabled}} disable Two-Factor Authentication {{else}} - Setup Two-Factor Authentication + Setup Two-Factor Authentication {{end}}

⚠️ Are you sure you want to disable two-factor authentication?

diff --git a/views/setup-multifactor.tmpl b/views/setup-multifactor.tmpl index a431c04..6bcc6f8 100644 --- a/views/setup-multifactor.tmpl +++ b/views/setup-multifactor.tmpl @@ -4,30 +4,43 @@ - Setup MFA - go-urlsh + Set up Two-Factor authentication - go-urlsh @@ -47,7 +60,7 @@ API Keys
  • - Users (coming soon) + Users (coming soon)
  • Logout @@ -55,21 +68,23 @@
    -

    Setup Multifactor Authentication

    - Scan this image with your authentication application:
    - TOTP QR-Code
    - - Or enter the secret manually into your TOTP application: -
    - {{ .Key }} -

    - Afterwards please enter the passcode shown in the TOTP application here for confirmation: -
    -
    -
    - +

    Setup Two-Factor authentication

    + In order to setup Two-Factor authentication, please scan this image with your authentication application:
    + TOTP QR-Code
    - + Or enter the secret manually into your TOTP application: +
    + {{ .Key }} +

    + Afterwards please enter the passcode shown in the TOTP application here for confirmation: +
    + + +
    + + +
    diff --git a/web/main.js b/web/main.js index 593e6df..902a7dc 100644 --- a/web/main.js +++ b/web/main.js @@ -118,12 +118,16 @@ async function HandleApiKeyNewSubmit() { async function HandleMFASetupTokenSubmit() { let token = document.getElementById("token").value + let button = document.getElementById("button-submit") + + button.disabled = true + button.setAttribute('aria-busy', 'true') let body = { "token": token } - let response = await fetch("/admin/account/mfasetup", { + let response = await fetch("/admin/account/mfa/confirm", { credentials: "include", body: JSON.stringify(body), headers: { "Content-Type": "application/json", }, @@ -135,13 +139,14 @@ async function HandleMFASetupTokenSubmit() { let data = await response.json() document.getElementById("dialog-tokens").textContent = data["recovery_tokens"].join(" ") - document.getElementById('dialog-success').showModal() - } else { - document.cookie = 'gourlsh_mfa_setup=; Max-Age=-1; path=/; domain=' + location.hostname; + document.getElementById('user-dialog').showModal() + } else if (response.status == 400) { + // document.cookie = 'gourlsh_mfa_setup=; Max-Age=-1; path=/; domain=' + location.hostname; - document.getElementById("dialog-heading").textContent = "Error!" - document.getElementById("dialog-text").textContent = "Something didnt work!" - document.getElementById('dialog-error').showModal() + document.getElementById('token').setAttribute('aria-invalid', 'true') + button.setAttribute('aria-busy', 'false') + button.disabled = false + document.getElementById('error-message').setAttribute('class', '') } }