feat(auth): add login/logout, user identity, and soft auth gate
- api/logout.php: destroys session + clears cookie, redirects to / - api/guest-session.php: sets guest flag, lets users explore without account - layout.php: removes hard PHP redirect; authenticated users see email + "Logg ut" in topbar; guests see guest banner (sticky, dismissible) and auth gate modal (dismissible via localStorage) instead of redirect - layout_footer.php: injects auth gate modal + JS for banner/modal dismiss - layout_dashboard.php: adds username + "Logg ut" to dash-topbar - index.php: adds "Utforsk uten konto" link under primary login CTA - tools.css: .guest-banner, .auth-gate-*, .topbar-user, .dash-topbar__user Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -8612,3 +8612,205 @@ body.lt-landing {
|
||||
margin-top: 0;
|
||||
scroll-margin-top: 70px;
|
||||
}
|
||||
|
||||
/* ── Auth gate & user identity ────────────────────────────────────────────── */
|
||||
|
||||
/* Guest banner — sticky strip at the top of tool pages for unauthenticated users */
|
||||
.guest-banner {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 800;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.55rem 1.25rem;
|
||||
background: #00205b;
|
||||
color: #fff;
|
||||
font-size: 0.84rem;
|
||||
font-family: inherit;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.guest-banner__login {
|
||||
color: #f4c542;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.guest-banner__login:hover { text-decoration: underline; }
|
||||
.guest-banner__close {
|
||||
margin-left: auto;
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(255,255,255,0.65);
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
padding: 0.15rem 0.3rem;
|
||||
border-radius: 4px;
|
||||
transition: color 120ms;
|
||||
}
|
||||
.guest-banner__close:hover { color: #fff; }
|
||||
|
||||
/* Auth gate modal */
|
||||
.auth-gate-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.58);
|
||||
backdrop-filter: blur(5px);
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
z-index: 9000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
.auth-gate-backdrop[hidden] { display: none; }
|
||||
.auth-gate-card {
|
||||
background: #fff;
|
||||
border-radius: 18px;
|
||||
padding: 2.5rem 2.25rem 2rem;
|
||||
max-width: 430px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
box-shadow: 0 24px 60px rgba(0,0,0,0.28);
|
||||
}
|
||||
.auth-gate-eyebrow {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.09em;
|
||||
text-transform: uppercase;
|
||||
color: #ba0c2f;
|
||||
margin: 0 0 0.65rem;
|
||||
}
|
||||
.auth-gate-title {
|
||||
font-size: clamp(1.35rem, 3vw, 1.75rem);
|
||||
font-weight: 800;
|
||||
color: #16130f;
|
||||
margin: 0 0 0.85rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.auth-gate-body {
|
||||
font-size: 0.95rem;
|
||||
color: rgba(22,19,15,0.65);
|
||||
margin: 0 0 1.75rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.auth-gate-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
.auth-gate-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 46px;
|
||||
border-radius: 10px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background 140ms, transform 110ms, box-shadow 140ms;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
}
|
||||
.auth-gate-btn--primary {
|
||||
background: #00205b;
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 14px rgba(0,32,91,0.30);
|
||||
}
|
||||
.auth-gate-btn--primary:hover {
|
||||
background: #001840;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 8px 20px rgba(0,32,91,0.38);
|
||||
}
|
||||
.auth-gate-btn--ghost {
|
||||
background: none;
|
||||
color: rgba(22,19,15,0.50);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
height: auto;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
.auth-gate-btn--ghost:hover { color: rgba(22,19,15,0.75); }
|
||||
.auth-gate-note {
|
||||
margin: 1.1rem 0 0;
|
||||
font-size: 0.78rem;
|
||||
color: rgba(22,19,15,0.40);
|
||||
}
|
||||
|
||||
/* Topbar user identity (authenticated users) */
|
||||
.topbar-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
.topbar-user__name {
|
||||
color: rgba(255,255,255,0.80);
|
||||
font-weight: 500;
|
||||
max-width: 120px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.topbar-user__logout {
|
||||
color: rgba(255,255,255,0.65);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
padding: 0.25rem 0.6rem;
|
||||
border: 1px solid rgba(255,255,255,0.25);
|
||||
border-radius: 6px;
|
||||
transition: color 120ms, border-color 120ms, background 120ms;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.topbar-user__logout:hover {
|
||||
color: #fff;
|
||||
border-color: rgba(255,255,255,0.55);
|
||||
background: rgba(255,255,255,0.08);
|
||||
}
|
||||
|
||||
/* Dashboard topbar user identity */
|
||||
.dash-topbar__user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-left: auto;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
.dash-topbar__username {
|
||||
color: rgba(22,19,15,0.55);
|
||||
font-weight: 500;
|
||||
max-width: 140px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.dash-topbar__logout {
|
||||
color: rgba(22,19,15,0.50);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
padding: 0.2rem 0.55rem;
|
||||
border: 1px solid rgba(22,19,15,0.18);
|
||||
border-radius: 6px;
|
||||
transition: color 120ms, border-color 120ms;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.dash-topbar__logout:hover {
|
||||
color: #ba0c2f;
|
||||
border-color: rgba(186,12,47,0.40);
|
||||
}
|
||||
|
||||
/* "Utforsk uten konto" link on landing page */
|
||||
.lt-gate__explore-link {
|
||||
margin: 0.75rem 0 0;
|
||||
font-size: 0.84rem;
|
||||
}
|
||||
.lt-gate__explore-link a {
|
||||
color: rgba(22,19,15,0.50);
|
||||
text-decoration: none;
|
||||
}
|
||||
.lt-gate__explore-link a:hover {
|
||||
color: rgba(22,19,15,0.80);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user