Bernt
48ea61cdcc
- Product documentation in docs/products/ - Updated MEMORY.md with product info - quiXzoom Auth Core as AAMOS Identity product
143 lines
3.5 KiB
HTML
143 lines
3.5 KiB
HTML
<!--
|
|
quiXzoom Auth Header Snippet
|
|
Add this to the <head> of every quixzoom page
|
|
|
|
Features:
|
|
- Auto-detects if user is logged in
|
|
- Shows login button or user menu
|
|
- Works across all quixzoom domains
|
|
-->
|
|
|
|
<!-- Auth check script -->
|
|
<script type="module">
|
|
import { quixzoomAuth } from 'https://auth.quixzoom.com/sso-client.js';
|
|
|
|
// Initialize auth on page load
|
|
const user = await quixzoomAuth.init();
|
|
|
|
// Update all auth-aware elements
|
|
document.querySelectorAll('[data-auth-state]').forEach(el => {
|
|
const state = el.dataset.authState;
|
|
const isLoggedIn = user !== null;
|
|
|
|
if (state === 'authenticated') {
|
|
el.style.display = isLoggedIn ? '' : 'none';
|
|
} else if (state === 'anonymous') {
|
|
el.style.display = isLoggedIn ? 'none' : '';
|
|
}
|
|
});
|
|
|
|
// Update user info
|
|
if (user) {
|
|
document.querySelectorAll('[data-auth-user-name]').forEach(el => {
|
|
el.textContent = `${user.first_name || ''} ${user.last_name || ''}`.trim() || user.email;
|
|
});
|
|
|
|
document.querySelectorAll('[data-auth-user-avatar]').forEach(el => {
|
|
const initial = (user.first_name?.[0] || user.email?.[0] || 'Z').toUpperCase();
|
|
el.textContent = initial;
|
|
});
|
|
}
|
|
|
|
// Update login links with redirect
|
|
document.querySelectorAll('a[href*="auth.quixzoom.com/login"]').forEach(link => {
|
|
const url = new URL(link.href);
|
|
if (!url.searchParams.has('redirect')) {
|
|
url.searchParams.set('redirect', window.location.href);
|
|
link.href = url.toString();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<!-- Auth UI Components -->
|
|
|
|
<!-- Anonymous state (not logged in) -->
|
|
<div data-auth-state="anonymous" style="display:none">
|
|
<a href="https://auth.quixzoom.com/login" class="auth-btn login-btn">
|
|
Logga in
|
|
</a>
|
|
<a href="https://auth.quixzoom.com/register" class="auth-btn register-btn">
|
|
Registrera dig
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Authenticated state (logged in) -->
|
|
<div data-auth-state="authenticated" style="display:none">
|
|
<div class="user-menu">
|
|
<a href="/mina-sidor" class="user-link">
|
|
<span class="user-avatar" data-auth-user-avatar>Z</span>
|
|
<span class="user-name" data-auth-user-name>Zoomer</span>
|
|
</a>
|
|
<button onclick="quixzoomAuth.logout().then(() => window.location.reload())" class="logout-btn">
|
|
Logga ut
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.auth-btn {
|
|
padding: 8px 16px;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition: .2s;
|
|
}
|
|
.login-btn {
|
|
color: #0066FF;
|
|
border: 1px solid rgba(0,102,255,.2);
|
|
}
|
|
.login-btn:hover {
|
|
background: rgba(0,102,255,.06);
|
|
}
|
|
.register-btn {
|
|
background: #0066FF;
|
|
color: #fff;
|
|
margin-left: 8px;
|
|
}
|
|
.register-btn:hover {
|
|
background: #0052CC;
|
|
}
|
|
.user-menu {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.user-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
text-decoration: none;
|
|
}
|
|
.user-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
background: #0066FF;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
}
|
|
.user-name {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #1a1a1a;
|
|
}
|
|
.logout-btn {
|
|
padding: 6px 12px;
|
|
border: 1px solid rgba(0,0,0,.1);
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: #6B6B6B;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
}
|
|
.logout-btn:hover {
|
|
border-color: #ff4444;
|
|
color: #ff4444;
|
|
}
|
|
</style>
|