helios/rsvp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move profile to localStorage and consolidate to single page

Browse Source
This commit is contained in:
Ian Gulliver
2025-12-29 11:41:48 -08:00
parent a2cb3aac72
commit cb8ec3ff7d
3 changed files with 86 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
main.go
View File

@@ -3,7 +3,6 @@ package main
import ( import (
"context" "context"
"database/sql" "database/sql"
"encoding/base64"
"encoding/json" "encoding/json"
"html/template" "html/template"
"log" "log"
@@ -51,7 +50,6 @@ func init() {
func main() { func main() {
http.HandleFunc("/", handleStatic) http.HandleFunc("/", handleStatic)
http.HandleFunc("/auth/google/callback", handleGoogleCallback) http.HandleFunc("/auth/google/callback", handleGoogleCallback)
http.HandleFunc("/auth/logout", handleLogout)
log.Println("server starting on :8080") log.Println("server starting on :8080")
log.Fatal(http.ListenAndServe(":8080", nil)) log.Fatal(http.ListenAndServe(":8080", nil))
@@ -65,11 +63,6 @@ func handleStatic(w http.ResponseWriter, r *http.Request) {
name := strings.TrimPrefix(path, "/") name := strings.TrimPrefix(path, "/")
if name == "index.html" && getProfile(r) != nil {
http.Redirect(w, r, "/home.html", http.StatusSeeOther)
return
}
if strings.HasSuffix(name, ".html") { if strings.HasSuffix(name, ".html") {
t := templates.Lookup(name) t := templates.Lookup(name)
if t == nil { if t == nil {
@@ -77,17 +70,16 @@ func handleStatic(w http.ResponseWriter, r *http.Request) {
return return
} }
w.Header().Set("Content-Type", "text/html") w.Header().Set("Content-Type", "text/html")
t.Execute(w, templateData(r)) t.Execute(w, templateData())
return return
} }
http.ServeFile(w, r, filepath.Join("static", name)) http.ServeFile(w, r, filepath.Join("static", name))
} }
func templateData(r *http.Request) map[string]any { func templateData() map[string]any {
return map[string]any{ return map[string]any{
"env": envMap(), "env": envMap(),
"profile": getProfile(r),
} }
} }
@@ -101,43 +93,6 @@ func envMap() map[string]string {
return m return m
} }
func getProfile(r *http.Request) map[string]any {
cookie, err := r.Cookie("profile")
if err != nil {
return nil
}
data, err := base64.RawURLEncoding.DecodeString(cookie.Value)
if err != nil {
return nil
}
var profile map[string]any
if json.Unmarshal(data, &profile) != nil {
return nil
}
return profile
}
func setProfile(w http.ResponseWriter, profile map[string]any) {
data, _ := json.Marshal(profile)
http.SetCookie(w, &http.Cookie{
Name: "profile",
Value: base64.RawURLEncoding.EncodeToString(data),
Path: "/",
HttpOnly: true,
SameSite: http.SameSiteLaxMode,
})
}
func handleLogout(w http.ResponseWriter, r *http.Request) {
http.SetCookie(w, &http.Cookie{
Name: "profile",
Value: "",
Path: "/",
MaxAge: -1,
})
http.Redirect(w, r, "/", http.StatusSeeOther)
}
func handleGoogleCallback(w http.ResponseWriter, r *http.Request) { func handleGoogleCallback(w http.ResponseWriter, r *http.Request) {
if r.Method != http.MethodPost { if r.Method != http.MethodPost {
http.Error(w, "method not allowed", http.StatusMethodNotAllowed) http.Error(w, "method not allowed", http.StatusMethodNotAllowed)
@@ -163,6 +118,6 @@ func handleGoogleCallback(w http.ResponseWriter, r *http.Request) {
"picture": payload.Claims["picture"], "picture": payload.Claims["picture"],
} }
setProfile(w, profile) w.Header().Set("Content-Type", "application/json")
http.Redirect(w, r, "/home.html", http.StatusSeeOther) json.NewEncoder(w).Encode(profile)
} }

51
static/home.html
View File

@@ -1,51 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script>document.documentElement.className = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'wa-dark' : 'wa-light';</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HCA Tickets</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@3/dist-cdn/styles/themes/default.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@3/dist-cdn/webawesome.loader.js"></script>
<style>
body {
font-family: var(--wa-font-sans);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.profile {
display: flex;
align-items: center;
gap: 1rem;
}
.profile img {
width: 64px;
height: 64px;
border-radius: 50%;
}
</style>
</head>
<body style="opacity: 0">
<wa-card>
<div class="profile" slot="header">
<img src="{{.profile.picture}}" alt="Profile">
<div>
<div><strong>{{.profile.name}}</strong></div>
<div>{{.profile.email}}</div>
</div>
</div>
<p>Welcome to HCA Tickets!</p>
<wa-button variant="neutral" href="/auth/logout">Switch User</wa-button>
</wa-card>
<script type="module">
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
document.documentElement.className = e.matches ? 'wa-dark' : 'wa-light';
});
await customElements.whenDefined('wa-card');
document.body.style.opacity = 1;
</script>
</body>
</html>

71
static/index.html
View File

@@ -10,19 +10,31 @@
<script src="https://accounts.google.com/gsi/client" async></script> <script src="https://accounts.google.com/gsi/client" async></script>
<style> <style>
body { body {
font-family: var(--wa-font-sans);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
min-height: 100vh; min-height: 100vh;
margin: 0; margin: 0;
} }
.profile {
display: flex;
align-items: center;
gap: 1rem;
}
.profile img {
width: 64px;
height: 64px;
border-radius: 50%;
}
#signin, #welcome { display: none; }
</style> </style>
</head> </head>
<body style="opacity: 0"> <body style="opacity: 0">
<div id="signin">
<div id="g_id_onload" <div id="g_id_onload"
data-client_id="{{.env.GOOGLE_CLIENT_ID}}" data-client_id="{{.env.GOOGLE_CLIENT_ID}}"
data-login_uri="/auth/google/callback" data-callback="handleCredentialResponse"
data-ux_mode="redirect"
data-use_fedcm_for_button="true" data-use_fedcm_for_button="true"
data-auto_prompt="false"> data-auto_prompt="false">
</div> </div>
@@ -34,10 +46,65 @@
data-shape="rectangular" data-shape="rectangular"
data-logo_alignment="left"> data-logo_alignment="left">
</div> </div>
</div>
<wa-card id="welcome">
<div class="profile" slot="header">
<img id="profile-picture" src="" alt="Profile">
<div>
<div><strong id="profile-name"></strong></div>
<div id="profile-email"></div>
</div>
</div>
<p>Welcome to HCA Tickets!</p>
<wa-button variant="neutral" onclick="logout()">Switch User</wa-button>
</wa-card>
<script>
function getProfile() {
const data = localStorage.getItem('profile');
return data ? JSON.parse(data) : null;
}
function setProfile(profile) {
localStorage.setItem('profile', JSON.stringify(profile));
}
function logout() {
localStorage.removeItem('profile');
location.reload();
}
async function handleCredentialResponse(response) {
const res = await fetch('/auth/google/callback', {
method: 'POST',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
body: 'credential=' + encodeURIComponent(response.credential)
});
const profile = await res.json();
setProfile(profile);
render();
}
function render() {
const profile = getProfile();
if (profile) {
document.getElementById('profile-picture').src = profile.picture;
document.getElementById('profile-name').textContent = profile.name;
document.getElementById('profile-email').textContent = profile.email;
document.getElementById('signin').style.display = 'none';
document.getElementById('welcome').style.display = 'block';
} else {
document.getElementById('signin').style.display = 'block';
document.getElementById('welcome').style.display = 'none';
}
}
render();
</script>
<script type="module"> <script type="module">
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => { window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
document.documentElement.className = e.matches ? 'wa-dark' : 'wa-light'; document.documentElement.className = e.matches ? 'wa-dark' : 'wa-light';
}); });
await customElements.whenDefined('wa-card');
document.body.style.opacity = 1; document.body.style.opacity = 1;
</script> </script>
</body> </body>