bagas/filekeeper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve 2FA setup page design

Browse Source
This commit is contained in:
Bagas Aulia Rezki
2024-06-19 18:43:33 +07:00
parent cdc365e89b
commit b890f5442c
3 changed files with 90 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
handler/user/totp/setup.go
View File

@ -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"))
qr, err := qrcode.New(uri, qrcode.Medium)
uri := totp.ProvisioningUri(userSession.Email, "filekeeper")
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)
err = component.Render(r.Context(), w)
if err != nil {
component := userTotpSetupView.Main("Filekeeper - 2FA Setup Page", base64Str, secret, userSession)
if err := component.Render(r.Context(), w); 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 != nil {
if err := db.DB.InitializeTotp(userSession.Email, secret); err != nil {
w.WriteHeader(http.StatusInternalServerError)
return
}
fmt.Fprintf(w, "Authentication successful! Access granted.")
return
fmt.Fprint(w, "Authentication successful! Access granted.")
} else {
uri := totp.ProvisioningUri(userSession.Email, utils.Getenv("DOMAIN"))
qr, err := qrcode.New(uri, qrcode.Medium)
uri := totp.ProvisioningUri(userSession.Email, "filekeeper")
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)
component := userTotpSetupView.Main("Filekeeper - 2FA Setup Page", base64Str, secret, userSession)
if err := component.Render(r.Context(), w); err != nil {
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
}
}

61
view/user/totp/setup.templ
View File

@ -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="space-y-2 text-center">
<h1 class="text-3xl font-bold">Set up Two-Factor Authentication</h1>
<div class="mx-auto max-w-md px-4 py-12 sm:px-6 lg:px-8">
<div class="space-y-6 text-center">
<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) {
@content(title, qrcode, code)
templ Main(title string, qrcode string, code string, user types.User) {
@content(title, qrcode, code, user)
}

2
view/user/user.templ
View File

@ -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>