Improve 2FA setup page design

handler/user/totp/setup.go

@@ -4,82 +4,80 @@ import (
 	"bytes"
 	"encoding/base64"
 	"fmt"
-	"github.com/fossyy/filekeeper/db"
-	"github.com/fossyy/filekeeper/types"
-	"github.com/fossyy/filekeeper/utils"
 	userTotpSetupView "github.com/fossyy/filekeeper/view/user/totp"
-	"github.com/skip2/go-qrcode"
-	"github.com/xlzd/gotp"
 	"image/png"
 	"net/http"
 	"time"
+
+	"github.com/fossyy/filekeeper/db"
+	"github.com/fossyy/filekeeper/types"
+	"github.com/skip2/go-qrcode"
+	"github.com/xlzd/gotp"
 )
 
+func generateQRCode(uri string) (string, error) {
+	qr, err := qrcode.New(uri, qrcode.Medium)
+	if err != nil {
+		return "", fmt.Errorf("failed to generate QR code: %w", err)
+	}
+
+	var buffer bytes.Buffer
+	if err := png.Encode(&buffer, qr.Image(256)); err != nil {
+		return "", fmt.Errorf("failed to encode QR code to PNG: %w", err)
+	}
+
+	return base64.StdEncoding.EncodeToString(buffer.Bytes()), nil
+}
+
 func GET(w http.ResponseWriter, r *http.Request) {
 	secret := gotp.RandomSecret(16)
 	userSession := r.Context().Value("user").(types.User)
 	totp := gotp.NewDefaultTOTP(secret)
-	uri := totp.ProvisioningUri(userSession.Email, utils.Getenv("DOMAIN"))
+	uri := totp.ProvisioningUri(userSession.Email, "filekeeper")
-	qr, err := qrcode.New(uri, qrcode.Medium)
+	base64Str, err := generateQRCode(uri)
 	if err != nil {
-		fmt.Printf("Failed to generate QR code: %v", err)
+		fmt.Printf("%v\n", err)
 		w.WriteHeader(http.StatusInternalServerError)
 		return
 	}
-	var buffer bytes.Buffer
-	err = png.Encode(&buffer, qr.Image(256))
-	if err != nil {
-		fmt.Printf("Failed to encode QR code to PNG: %v", err)
-		w.WriteHeader(http.StatusInternalServerError)
-		return
-	}
-	base64Str := base64.StdEncoding.EncodeToString(buffer.Bytes())
 
-	component := userTotpSetupView.Main("Totp setup page", base64Str, secret)
+	component := userTotpSetupView.Main("Filekeeper - 2FA Setup Page", base64Str, secret, userSession)
-	err = component.Render(r.Context(), w)
+	if err := component.Render(r.Context(), w); err != nil {
-	if err != nil {
 		w.WriteHeader(http.StatusInternalServerError)
 		return
 	}
 }
 
 func POST(w http.ResponseWriter, r *http.Request) {
-	r.ParseForm()
+	if err := r.ParseForm(); err != nil {
+		w.WriteHeader(http.StatusInternalServerError)
+		return
+	}
+
 	code := r.Form.Get("totp")
 	secret := r.Form.Get("secret")
 	totp := gotp.NewDefaultTOTP(secret)
 	userSession := r.Context().Value("user").(types.User)
-	fmt.Println(userSession)
 	if totp.Verify(code, time.Now().Unix()) {
-		err := db.DB.InitializeTotp(userSession.Email, secret)
+		if err := db.DB.InitializeTotp(userSession.Email, secret); err != nil {
-		if err != nil {
 			w.WriteHeader(http.StatusInternalServerError)
 			return
 		}
-		fmt.Fprintf(w, "Authentication successful! Access granted.")
+		fmt.Fprint(w, "Authentication successful! Access granted.")
-		return
 	} else {
-		uri := totp.ProvisioningUri(userSession.Email, utils.Getenv("DOMAIN"))
+		uri := totp.ProvisioningUri(userSession.Email, "filekeeper")
-		qr, err := qrcode.New(uri, qrcode.Medium)
+
+		base64Str, err := generateQRCode(uri)
 		if err != nil {
-			fmt.Printf("Failed to generate QR code: %v", err)
+			fmt.Printf("%v\n", err)
 			w.WriteHeader(http.StatusInternalServerError)
 			return
 		}
-		var buffer bytes.Buffer
+
-		err = png.Encode(&buffer, qr.Image(256))
+		component := userTotpSetupView.Main("Filekeeper - 2FA Setup Page", base64Str, secret, userSession)
-		if err != nil {
+		if err := component.Render(r.Context(), w); err != nil {
-			fmt.Printf("Failed to encode QR code to PNG: %v", err)
 			w.WriteHeader(http.StatusInternalServerError)
 			return
 		}
-		base64Str := base64.StdEncoding.EncodeToString(buffer.Bytes())
-		component := userTotpSetupView.Main("Totp setup page", base64Str, secret)
-		err = component.Render(r.Context(), w)
-		if err != nil {
-			w.WriteHeader(http.StatusInternalServerError)
-			return
-		}
-		return
 	}
 }

view/user/totp/setup.templ

@@ -2,17 +2,51 @@ package userTotpSetupView
 
 import (
     "github.com/fossyy/filekeeper/view/layout"
+    "github.com/fossyy/filekeeper/types"
 )
 
-templ content(title string, qrcode string, code string) {
+templ content(title string, qrcode string, code string, user types.User) {
     @layout.Base(title){
+        @layout.Navbar(user)
         <main class="container mx-auto px-4 py-12 md:px-6 md:py-16 lg:py-10">
-            <div class="mx-auto max-w-md space-y-6 py-12">
+            <div class="mx-auto max-w-md px-4 py-12 sm:px-6 lg:px-8">
-              <div class="space-y-2 text-center">
+              <div class="space-y-6 text-center">
-                <h1 class="text-3xl font-bold">Set up Two-Factor Authentication</h1>
+                <div class="flex items-center">
+                    <a
+                        class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-slate-200 hover:text-accent-foreground h-10 w-10 mr-4"
+                        href="/user" hx-get="/user" hx-swap="outerHTML" hx-push-url="true" hx-target="#content"
+                        >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="24"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          class="h-5 w-5"
+                        >
+                          <path d="m12 19-7-7 7-7"></path>
+                          <path d="M19 12H5"></path>
+                        </svg>
+                    </a>
+                    <h1 class="text-3xl font-bold">Set up Two-Factor Authentication</h1>
+                </div>
                 <p class="text-muted-foreground">Secure your account with time-based one-time passwords (TOTP).</p>
+                <div class="mt-4 text-left text-muted-foreground">
+                    <p>Here's how to set up the Google Authenticator app:</p>
+                    <ol class="list-decimal pl-6">
+                      <li>Download the Google Authenticator app on your mobile device.</li>
+                      <li>Open the app and tap "Begin Setup".</li>
+                      <li>Select "Scan a barcode" and point your camera at the QR code below.</li>
+                      <li>The app will automatically add your account and display a 6-digit code.</li>
+                      <li>Enter this code on the website to complete the setup.</li>
+                    </ol>
+                </div>
               </div>
-              <div class="rounded-lg border bg-card text-card-foreground shadow-sm" data-v0-t="card">
+              <div class="rounded-lg border rounded-lg bg-muted p-6bg-card text-card-foreground shadow-sm mt-5" data-v0-t="card">
                 <div class="p-6 space-y-6">
                   <div class="flex items-center justify-center">
                     <img
@@ -23,7 +57,14 @@ templ content(title string, qrcode string, code string) {
                       class="rounded-lg"
                       style="aspect-ratio: 200 / 200; object-fit: cover;"
                     />
-                    <p>{code}</p>
+                  </div>
+                  <div class="mt-6 space-y-2">
+                    <p class="font-medium">Backup Code:</p>
+                    <div class="rounded-md bg-background px-4 py-2 text-sm font-mono text-muted-foreground">12345-67890</div>
+                    <p class="font-medium">TOTP Secret:</p>
+                    <div class="rounded-md bg-background px-4 py-2 text-sm font-mono text-muted-foreground">
+                      {code}
+                    </div>
                   </div>
                   <form method="post" action="/user/totp/setup">
                     <div class="grid gap-2">
@@ -32,12 +73,12 @@ templ content(title string, qrcode string, code string) {
                             for="totp">
                             Totp Code
                         </label>
-                        <input id="secret" name="secret" value={code} />
+                        <input id="secret" name="secret" value={code} type='hidden' />
                         <input
                             class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                             id="totp" name="totp" placeholder="Code from authenticator app" />
                         <div class="flex items-center p-6">
-                          <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 w-full">
+                          <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 w-full" type="submit">
                             Enable TOTP
                           </button>
                         </div>
@@ -51,6 +92,6 @@ templ content(title string, qrcode string, code string) {
     }
 }
 
-templ Main(title string, qrcode string, code string) {
+templ Main(title string, qrcode string, code string, user types.User) {
-	@content(title, qrcode, code)
+	@content(title, qrcode, code, user)
 }

view/user/user.templ

@@ -75,7 +75,7 @@ templ content(title string, user types.User, ListSession []*session.SessionInfo)
                                         class="hover:bg-gray-200 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"
                                         type="button" id="radix-:rq:" aria-haspopup="menu"
                                         aria-expanded="false" data-state="closed"
-                                        href="/user/totp/setup">
+                                        href="/user/totp/setup" hx-get="/user/totp/setup" hx-swap="outerHTML" hx-push-url="true" hx-target="#content">
                                         Setup
                                     </a>
                                 </div>