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

95
static/index.html
View File

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