Move profile to localStorage and consolidate to single page
This commit is contained in:
Ian Gulliver
55
main.go
55
main.go
@@ -3,7 +3,6 @@ package main
|
||||
import (
|
||||
"context"
|
||||
"database/sql"
|
||||
"encoding/base64"
|
||||
"encoding/json"
|
||||
"html/template"
|
||||
"log"
|
||||
@@ -51,7 +50,6 @@ func init() {
|
||||
func main() {
|
||||
http.HandleFunc("/", handleStatic)
|
||||
http.HandleFunc("/auth/google/callback", handleGoogleCallback)
|
||||
http.HandleFunc("/auth/logout", handleLogout)
|
||||
|
||||
log.Println("server starting on :8080")
|
||||
log.Fatal(http.ListenAndServe(":8080", nil))
|
||||
@@ -65,11 +63,6 @@ func handleStatic(w http.ResponseWriter, r *http.Request) {
|
||||
|
||||
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") {
|
||||
t := templates.Lookup(name)
|
||||
if t == nil {
|
||||
@@ -77,17 +70,16 @@ func handleStatic(w http.ResponseWriter, r *http.Request) {
|
||||
return
|
||||
}
|
||||
w.Header().Set("Content-Type", "text/html")
|
||||
t.Execute(w, templateData(r))
|
||||
t.Execute(w, templateData())
|
||||
return
|
||||
}
|
||||
|
||||
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{
|
||||
"env": envMap(),
|
||||
"profile": getProfile(r),
|
||||
"env": envMap(),
|
||||
}
|
||||
}
|
||||
|
||||
@@ -101,43 +93,6 @@ func envMap() map[string]string {
|
||||
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) {
|
||||
if r.Method != http.MethodPost {
|
||||
http.Error(w, "method not allowed", http.StatusMethodNotAllowed)
|
||||
@@ -163,6 +118,6 @@ func handleGoogleCallback(w http.ResponseWriter, r *http.Request) {
|
||||
"picture": payload.Claims["picture"],
|
||||
}
|
||||
|
||||
setProfile(w, profile)
|
||||
http.Redirect(w, r, "/home.html", http.StatusSeeOther)
|
||||
w.Header().Set("Content-Type", "application/json")
|
||||
json.NewEncoder(w).Encode(profile)
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
@@ -10,34 +10,101 @@
|
||||
<script src="https://accounts.google.com/gsi/client" async></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%;
|
||||
}
|
||||
#signin, #welcome { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body style="opacity: 0">
|
||||
<div id="g_id_onload"
|
||||
data-client_id="{{.env.GOOGLE_CLIENT_ID}}"
|
||||
data-login_uri="/auth/google/callback"
|
||||
data-ux_mode="redirect"
|
||||
data-use_fedcm_for_button="true"
|
||||
data-auto_prompt="false">
|
||||
</div>
|
||||
<div class="g_id_signin"
|
||||
data-type="standard"
|
||||
data-size="large"
|
||||
data-theme="outline"
|
||||
data-text="sign_in_with"
|
||||
data-shape="rectangular"
|
||||
data-logo_alignment="left">
|
||||
<div id="signin">
|
||||
<div id="g_id_onload"
|
||||
data-client_id="{{.env.GOOGLE_CLIENT_ID}}"
|
||||
data-callback="handleCredentialResponse"
|
||||
data-use_fedcm_for_button="true"
|
||||
data-auto_prompt="false">
|
||||
</div>
|
||||
<div class="g_id_signin"
|
||||
data-type="standard"
|
||||
data-size="large"
|
||||
data-theme="outline"
|
||||
data-text="sign_in_with"
|
||||
data-shape="rectangular"
|
||||
data-logo_alignment="left">
|
||||
</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">
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user