DogFatherGit/vans-diy-bastelbedarf
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Login-Seite professionalisiert: Social-Login-Optionen, Passwort-Toggle, DSGVO-Hinweis

Browse Source 
Nach Recherche zu üblichen Anmelde-Standards bei deutschen Online-Shops:
Ergänzt Social-Login-Buttons für Google, Apple und PayPal (PayPal explizit
wegen seiner Marktdominanz bei Zahlungen in DE/DACH), da Social Login
Registrierung/Login deutlich beschleunigt und laut Studien die Conversion
spürbar erhöht. Die Buttons sind noch nicht funktional (kein OAuth ohne
eigenes Backend) — ein Klick zeigt stattdessen ehrlich einen Phase-2-
Hinweis, statt eine Anmeldung vorzutäuschen.

Zusätzlich: Passwort-Sichtbarkeits-Toggle (Augen-Icon, eine der
wirkungsvollsten Login-UX-Verbesserungen laut UX-Recherche), "Angemeldet
bleiben"-Checkbox, sowie ein DSGVO-konformer Hinweis mit Link zur
Datenschutzerklärung unterhalb des Formulars. Gastbestellung ("Neu hier?")
war als gleichwertige Alternative schon vorhanden und bleibt bestehen —
Gastbestellung gilt laut EDPB-Empfehlung als Standard neben der freiwilligen
Registrierung.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
2026-08-03 04:33:12 +02:00
co-authored by Claude Sonnet 5
parent cc3e84bd98
commit ab3bf675b9
6 changed files with 393 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+65
View File
@@ -365,6 +365,71 @@ a:focus-visible, button:focus-visible {
.frm .checkbox-row { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.88rem; color: var(--c-text-muted); }
.frm .checkbox-row input { width: auto; margin-top: 0.2rem; }
/* ============================================================
Login: Social-Login-Buttons, Passwort-Sichtbarkeit, DSGVO-Hinweis
In Deutschland/DACH übliche Anmelde-Alternativen zur reinen E-Mail/Passwort-
Anmeldung (siehe Recherche: PayPal-Login ist wegen der PayPal-Marktdominanz
in DE besonders verbreitet, neben Google/Apple). Die Buttons sind bewusst
NICHT funktional (kein echtes OAuth ohne Backend) — ein Klick zeigt einen
ehrlichen Hinweis statt eine vorgetäuschte Anmeldung.
============================================================ */
.social-login { display: grid; gap: 0.6rem; }
.btn-social {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6em;
width: 100%;
padding: 0.7em 1em;
border-radius: var(--radius-s);
border: 1px solid rgba(244, 241, 247, 0.16);
background: var(--c-anthracite);
color: var(--c-text);
font-family: var(--font-body);
font-size: 0.92rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.1s var(--ease);
}
.btn-social:hover { background: var(--c-anthracite-light); border-color: rgba(244, 241, 247, 0.3); }
.btn-social:active { transform: scale(0.99); }
.btn-social svg { flex-shrink: 0; }
.btn-social-paypal .social-icon-badge {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; border-radius: 50%;
background: #003087; color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 0.72rem;
flex-shrink: 0;
}
.social-note {
display: none;
font-size: 0.82rem;
color: var(--c-text-muted);
background: color-mix(in srgb, var(--c-accent) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--c-accent) 25%, transparent);
border-radius: var(--radius-s);
padding: 0.6em 0.8em;
margin: -0.2rem 0 0;
}
.social-divider { display: flex; align-items: center; gap: 0.8em; color: var(--c-text-muted); font-size: 0.82rem; margin: 0.1rem 0; }
.social-divider::before, .social-divider::after { content: ""; flex: 1; height: 1px; background: rgba(244, 241, 247, 0.14); }
.pw-field { position: relative; }
.pw-field input { padding-right: 2.6em; }
.pw-toggle {
position: absolute;
top: 50%;
right: 0.5em;
transform: translateY(-50%);
background: none;
border: none;
color: var(--c-text-muted);
cursor: pointer;
padding: 0.3em;
display: flex;
border-radius: var(--radius-s);
}
.pw-toggle:hover { color: var(--c-text); }
.login-consent { color: var(--c-text-muted); margin-top: -0.3rem; }
/* ============================================================
Sprach-Umschalter + Konto-Button (Header)
============================================================ */