torsten/yourpart3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add OAuth integration for multiple providers and implement user linking
Some checks failed
Deploy to production / deploy (push) Failing after 49s
Details

Browse Source 
- Created OAuth credentials setup guide for Google, Microsoft, Keycloak, ORY, and ZITADEL.
- Added migration for oauth_identity table to store OAuth identities linked to users.
- Implemented OAuthIdentity model for managing OAuth identities in the database.
- Developed oauthService to handle OAuth login, user creation, and identity linking.
- Created OAuthCallbackView and OAuthUserCallbackView components for handling OAuth responses in the frontend.
- Added error handling and user feedback during the OAuth process.
This commit is contained in:
Torsten Schulz (local)
2026-05-15 13:59:40 +02:00
parent 464208e30e
commit ac57931928
16 changed files with 7620 additions and 949 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
frontend/src/views/auth/OAuthCallbackView.vue Normal file
View File

@@ -0,0 +1,83 @@
<template>
<div class="oauth-callback-view">
<div class="oauth-callback-card surface-card">
<p class="oauth-callback-kicker">{{ $t('home.nologin.oauth.callbackKicker') }}</p>
<h1>{{ $t('home.nologin.oauth.callbackTitle') }}</h1>
<p v-if="!hasError">{{ $t('home.nologin.oauth.callbackText') }}</p>
<p v-else class="oauth-callback-error">{{ errorMessage }}</p>
</div>
</div>
</template>
<script>
import { mapActions } from 'vuex';
import apiClient from '@/utils/axios.js';
export default {
name: 'OAuthCallbackView',
data() {
return {
hasError: false,
errorMessage: ''
};
},
methods: {
...mapActions(['login']),
async finishLogin() {
const { code, state, error, error_description: errorDescription } = this.$route.query;
if (error) {
this.hasError = true;
this.errorMessage = errorDescription || error;
return;
}
if (!code || !state) {
this.hasError = true;
this.errorMessage = this.$t('home.nologin.oauth.callbackMissing');
return;
}
try {
const response = await apiClient.post('/api/auth/oauth/exchange', { code, state });
await this.login({ user: response.data, rememberMe: true });
await this.$router.replace('/settings/personal');
} catch (loginError) {
this.hasError = true;
this.errorMessage = loginError?.response?.data?.error || this.$t('home.nologin.oauth.callbackFailure');
}
}
},
mounted() {
this.finishLogin();
}
};
</script>
<style scoped>
.oauth-callback-view {
display: grid;
place-items: center;
min-height: calc(100vh - 140px);
padding: 2rem 1rem;
}
.oauth-callback-card {
width: min(100%, 520px);
padding: 2rem;
text-align: center;
}
.oauth-callback-kicker {
margin: 0 0 0.5rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.78rem;
font-weight: 700;
color: var(--color-text-secondary);
}
.oauth-callback-error {
color: #a94442;
}
</style>

98
frontend/src/views/auth/OAuthUserCallbackView.vue Normal file
View File

@@ -0,0 +1,98 @@
<template>
<div class="oauth-callback-view">
<div class="oauth-callback-card surface-card">
<p class="oauth-callback-kicker">{{ title }}</p>
<h1>{{ message }}</h1>
<p v-if="!hasError" class="oauth-callback-status">{{ statusText }}</p>
<p v-else class="oauth-callback-error">{{ errorMessage }}</p>
</div>
</div>
</template>
<script>
import apiClient from '@/utils/axios.js';
export default {
name: 'OAuthUserCallbackView',
data() {
return {
hasError: false,
errorMessage: '',
message: 'Authentifizierung wird verknüpft...',
title: 'Externe Authentifizierung',
statusText: 'Bitte warten...'
};
},
methods: {
async finishLinking() {
const { code, state, error, error_description: errorDescription } = this.$route.query;
if (error) {
this.hasError = true;
this.message = 'Fehler bei der Authentifizierung';
this.errorMessage = errorDescription || error;
return;
}
if (!code || !state) {
this.hasError = true;
this.message = 'Fehler';
this.errorMessage = 'Code oder State fehlen. Bitte versuche es erneut.';
return;
}
try {
this.statusText = 'Authentifizierung wird mit deinem Konto verknüpft...';
const response = await apiClient.post('/api/auth/oauth/user/exchange', { code, state });
this.message = 'Erfolgreich verknüpft!';
this.statusText = `${response.data.identity.displayName} wurde erfolgreich hinzugefügt. Du kannst diese Seite jetzt schließen oder zur Sicherheitsseite zurückkehren.`;
setTimeout(() => {
this.$router.replace('/settings/personal');
}, 3000);
} catch (linkError) {
this.hasError = true;
this.message = 'Fehler beim Verknüpfen';
this.errorMessage = linkError?.response?.data?.error || 'Ein Fehler ist aufgetreten. Bitte versuche es später erneut.';
console.error('OAuth user linking error:', linkError);
}
}
},
mounted() {
this.finishLinking();
}
};
</script>
<style scoped>
.oauth-callback-view {
display: grid;
place-items: center;
min-height: calc(100vh - 140px);
padding: 2rem 1rem;
}
.oauth-callback-card {
width: min(100%, 520px);
padding: 2rem;
text-align: center;
}
.oauth-callback-kicker {
margin: 0 0 0.5rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.78rem;
font-weight: 700;
color: var(--color-text-secondary);
}
.oauth-callback-status {
color: var(--color-text-secondary);
}
.oauth-callback-error {
color: #a94442;
}
</style>

114
frontend/src/views/home/NoLoginView.vue
View File

@@ -56,6 +56,25 @@
<button type="button" class="secondary-action" @click="openRegisterDialog">{{ $t('home.nologin.login.register') }}</button>
<button type="button" class="secondary-action" @click="openRandomChat">{{ $t('home.nologin.startrandomchat') }}</button>
</div>
<div class="oauth-section" v-if="oauthProviders.length">
<div class="oauth-section__header">
<span class="panel-kicker">Externe Konten</span>
<p class="oauth-section__text">Google, Microsoft, Keycloak, ORY oder ZITADEL nutzen.</p>
</div>
<div class="oauth-provider-list">
<button
v-for="provider in oauthProviders"
:key="provider.slug"
type="button"
class="oauth-provider-button"
:class="`oauth-provider-button--${provider.slug}`"
:disabled="oauthLoading"
@click="startOAuthLogin(provider.slug)"
>
Mit {{ provider.label }} fortfahren
</button>
</div>
</div>
<div class="login-fields">
<input ref="usernameInput" v-model="username" size="20" type="text" :placeholder="$t('home.nologin.login.name')"
:title="$t('home.nologin.login.namedescription')" @keydown.enter="focusPassword">
@@ -149,6 +168,8 @@ export default {
username: '',
password: '',
rememberMe: true,
oauthProviders: [],
oauthLoading: false,
};
},
components: {
@@ -159,6 +180,10 @@ export default {
},
methods: {
...mapActions(['login']),
getOAuthBaseUrl() {
const baseUrl = apiClient.defaults.baseURL || window.location.origin;
return String(baseUrl).replace(/\/api\/?$/, '').replace(/\/$/, '');
},
openRandomChat() {
const dlg = this.$refs.randomChatDialog;
if (dlg && typeof dlg.open === 'function') dlg.open();
@@ -171,6 +196,23 @@ export default {
const dlg = this.$refs.passwordResetDialog;
if (dlg && typeof dlg.open === 'function') dlg.open();
},
async loadOAuthProviders() {
try {
const response = await apiClient.get('/api/auth/oauth/providers');
this.oauthProviders = (response.data.providers || []).filter((provider) => provider.configured);
} catch (error) {
console.error('Error loading OAuth providers:', error);
this.oauthProviders = [];
}
},
startOAuthLogin(providerSlug) {
if (this.oauthLoading) {
return;
}
this.oauthLoading = true;
window.location.href = `${this.getOAuthBaseUrl()}/api/auth/oauth/${encodeURIComponent(providerSlug)}/start`;
},
focusPassword() {
this.$refs.passwordInput.focus();
},
@@ -184,6 +226,9 @@ export default {
}
}
},
async created() {
await this.loadOAuthProviders();
},
mounted() {
this.$nextTick(() => {
this.$refs.usernameInput?.focus?.();
@@ -365,6 +410,72 @@ export default {
margin-bottom: 0.1rem;
}
.oauth-section {
padding: 0.9rem 1rem;
border-radius: var(--radius-lg);
background: linear-gradient(180deg, rgba(255, 248, 238, 0.95), rgba(255, 243, 229, 0.95));
border: 1px solid rgba(248, 162, 43, 0.14);
display: grid;
gap: 0.8rem;
}
.oauth-section__header {
display: grid;
gap: 0.35rem;
}
.oauth-section__text {
margin: 0;
color: var(--color-text-secondary);
line-height: 1.35;
}
.oauth-provider-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.55rem;
}
.oauth-provider-button {
padding: 0.72rem 0.9rem;
border-radius: 14px;
border: 1px solid rgba(93, 64, 55, 0.12);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(247, 242, 236, 0.94));
color: #4b342e;
font-weight: 700;
text-align: left;
box-shadow: 0 6px 16px rgba(93, 64, 55, 0.06);
}
.oauth-provider-button:hover:not(:disabled) {
transform: translateY(-1px);
}
.oauth-provider-button:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.oauth-provider-button--google {
border-left: 4px solid #4285f4;
}
.oauth-provider-button--microsoft {
border-left: 4px solid #0078d4;
}
.oauth-provider-button--keycloak {
border-left: 4px solid #d67f2f;
}
.oauth-provider-button--ory {
border-left: 4px solid #0f766e;
}
.oauth-provider-button--zitadel {
border-left: 4px solid #0f5132;
}
.login-fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -513,7 +624,8 @@ export default {
.story-columns,
.access-split,
.login-fields {
.login-fields,
.oauth-provider-list {
grid-template-columns: 1fr;
}
}

417
frontend/src/views/settings/AccountView.vue
View File

@@ -1,66 +1,106 @@
<template>
<div class="account-settings">
<section class="account-settings__hero surface-card">
<span class="account-settings__eyebrow">{{ $t("settings.account.heroEyebrow") }}</span>
<h2>{{ $t("settings.account.title") }}</h2>
<p>{{ $t("settings.account.heroIntro") }}</p>
<span class="account-settings__eyebrow">{{ $t("settings.security.heroEyebrow") }}</span>
<h2>{{ $t("settings.security.title") }}</h2>
<p>{{ $t("settings.security.heroIntro") }}</p>
</section>
<section class="account-settings__panel surface-card">
<div class="account-settings__grid">
<label class="account-settings__field">
<span>{{ $t("settings.account.username") }}</span>
<input type="text" v-model="username" :placeholder="$t('settings.account.username')" />
<span>{{ $t("settings.security.username") }}</span>
<input type="text" v-model="username" :placeholder="$t('settings.security.username')" />
</label>
<label class="account-settings__field">
<span>{{ $t("settings.account.email") }}</span>
<input type="text" v-model="email" :placeholder="$t('settings.account.email')" />
<span>{{ $t("settings.security.email") }}</span>
<input type="text" v-model="email" :placeholder="$t('settings.security.email')" />
</label>
<label class="account-settings__field">
<span>{{ $t("settings.account.newpassword") }}</span>
<input type="password" v-model="newpassword" :placeholder="$t('settings.account.newpassword')"
<span>{{ $t("settings.security.newpassword") }}</span>
<input type="password" v-model="newpassword" :placeholder="$t('settings.security.newpassword')"
autocomplete="new-password" :class="{ 'field-error': newpassword && !isNewPasswordValid }" />
<span v-if="newpassword && !isNewPasswordValid" class="form-error">{{ $t("settings.account.validation.newPasswordTooShort") }}</span>
<span v-if="newpassword && !isNewPasswordValid" class="form-error">{{ $t("settings.security.validation.newPasswordTooShort") }}</span>
</label>
<label class="account-settings__field">
<span>{{ $t("settings.account.newpasswordretype") }}</span>
<span>{{ $t("settings.security.newpasswordretype") }}</span>
<input type="password" v-model="newpasswordretype"
:placeholder="$t('settings.account.newpasswordretype')" autocomplete="new-password"
:placeholder="$t('settings.security.newpasswordretype')" autocomplete="new-password"
:class="{ 'field-error': newpasswordretype && !passwordsMatch }" />
<span v-if="newpasswordretype && !passwordsMatch" class="form-error">{{ $t("settings.account.validation.passwordMismatch") }}</span>
<span v-if="newpasswordretype && !passwordsMatch" class="form-error">{{ $t("settings.security.validation.passwordMismatch") }}</span>
</label>
<label class="account-settings__field account-settings__field--full">
<span>{{ $t("settings.account.oldpassword") }}</span>
<input type="password" v-model="oldpassword" :placeholder="$t('settings.account.oldpassword')"
<span>{{ $t("settings.security.oldpassword") }}</span>
<input type="password" v-model="oldpassword" :placeholder="$t('settings.security.oldpassword')"
autocomplete="current-password" :class="{ 'field-error': requiresOldPassword && !oldpassword.trim() }" />
<span v-if="requiresOldPassword && !oldpassword.trim()" class="form-error">{{ $t("settings.account.validation.oldPasswordRequired") }}</span>
<span v-if="requiresOldPassword && !oldpassword.trim()" class="form-error">{{ $t("settings.security.validation.oldPasswordRequired") }}</span>
</label>
</div>
<label class="account-settings__toggle">
<input type="checkbox" v-model="showInSearch" />
<span>{{ $t("settings.account.showinsearch") }}</span>
<span>{{ $t("settings.security.showinsearch") }}</span>
</label>
<section class="account-settings__oauth surface-card">
<h3>{{ $t("settings.security.oauthTitle") }}</h3>
<p>{{ $t("settings.security.oauthIntro") }}</p>
<div v-if="oauthIdentities.length > 0" class="account-settings__oauth-list">
<div v-for="identity in oauthIdentities" :key="identity.id" class="oauth-identity-item">
<div class="oauth-identity-item__info">
<strong>{{ identity.displayName }}</strong>
<span class="oauth-identity-item__date">{{ formatDate(identity.createdAt) }}</span>
</div>
<button
type="button"
class="oauth-identity-item__remove"
@click="removeOAuthIdentity(identity.id)"
:disabled="oauthLoading"
title="Authentifizierung entfernen"
>
✕
</button>
</div>
</div>
<p v-else class="oauth-identity-item__empty">{{ $t("settings.security.oauthNoIdentities") }}</p>
<div class="account-settings__oauth-actions">
<div v-if="availableProviders.length > 0" class="oauth-provider-buttons">
<button
v-for="provider in availableProviders"
:key="provider.slug"
type="button"
class="oauth-provider-button"
:class="`oauth-provider-button--${provider.slug}`"
:disabled="oauthLoading"
@click="startAddOAuthIdentity(provider.slug)"
>
{{ provider.label }} hinzufügen
</button>
</div>
</div>
</section>
<section class="account-settings__adult surface-card">
<h3>{{ $t("settings.account.adultAccessTitle") }}</h3>
<p>{{ $t("settings.account.adultAccessIntro") }}</p>
<h3>{{ $t("settings.security.adultAccessTitle") }}</h3>
<p>{{ $t("settings.security.adultAccessIntro") }}</p>
<div class="account-settings__adult-status">
<strong>{{ adultStatusTitle }}</strong>
<span>{{ adultStatusText }}</span>
<span v-if="adultVerificationRequest?.originalName">{{ adultVerificationRequest.originalName }}</span>
</div>
<div class="account-settings__adult-actions" v-if="canRequestAdultVerification">
<router-link to="/socialnetwork/erotic/access">{{ $t("settings.account.requestAdultVerification") }}</router-link>
<router-link to="/socialnetwork/erotic/access">{{ $t("settings.security.requestAdultVerification") }}</router-link>
</div>
</section>
<div class="account-settings__actions">
<button @click="changeAccount">{{ $t("settings.account.changeaction") }}</button>
<button @click="changeAccount" :disabled="oauthLoading">{{ $t("settings.security.changeaction") }}</button>
</div>
</section>
</div>
@@ -85,6 +125,9 @@ export default {
isAdult: false,
adultVerificationStatus: "none",
adultVerificationRequest: null,
oauthIdentities: [],
oauthProviders: [],
oauthLoading: false,
};
},
computed: {
@@ -103,18 +146,24 @@ export default {
},
adultStatusTitle() {
if (!this.isAdult) {
return this.$t('settings.account.adultStatus.ineligible.title');
return this.$t('settings.security.adultStatus.ineligible.title');
}
return this.$t(`settings.account.adultStatus.${this.adultVerificationStatus}.title`);
return this.$t(`settings.security.adultStatus.${this.adultVerificationStatus}.title`);
},
adultStatusText() {
if (!this.isAdult) {
return this.$t('settings.account.adultStatus.ineligible.body');
return this.$t('settings.security.adultStatus.ineligible.body');
}
return this.$t(`settings.account.adultStatus.${this.adultVerificationStatus}.body`);
return this.$t(`settings.security.adultStatus.${this.adultVerificationStatus}.body`);
},
availableProviders() {
return this.oauthProviders.filter(p => p.configured && !this.oauthIdentities.some(id => id.provider === p.slug));
}
},
methods: {
formatDate(date) {
return new Date(date).toLocaleDateString();
},
async loadAccount() {
const response = await apiClient.post('/api/settings/account', { userId: this.user.id });
this.username = response.data.username;
@@ -124,6 +173,48 @@ export default {
this.adultVerificationStatus = response.data.adultVerificationStatus || 'none';
this.adultVerificationRequest = response.data.adultVerificationRequest || null;
},
async loadOAuthIdentities() {
try {
const response = await apiClient.get('/api/auth/oauth/user/identities');
this.oauthIdentities = response.data.identities || [];
} catch (error) {
console.error('Error loading OAuth identities:', error);
this.oauthIdentities = [];
}
},
async loadOAuthProviders() {
try {
const response = await apiClient.get('/api/auth/oauth/providers');
this.oauthProviders = response.data.providers || [];
} catch (error) {
console.error('Error loading OAuth providers:', error);
this.oauthProviders = [];
}
},
startAddOAuthIdentity(providerSlug) {
if (this.oauthLoading) {
return;
}
this.oauthLoading = true;
window.location.href = `/api/auth/oauth/user/${encodeURIComponent(providerSlug)}/start`;
},
async removeOAuthIdentity(identityId) {
if (!confirm('Möchtest du diese Authentifizierung wirklich entfernen?')) {
return;
}
try {
this.oauthLoading = true;
await apiClient.delete(`/api/auth/oauth/user/${identityId}`);
showSuccess(this, 'Authentifizierung entfernt');
await this.loadOAuthIdentities();
} catch (error) {
console.error('Error removing OAuth identity:', error);
showApiError(this, error, 'Fehler beim Entfernen der Authentifizierung');
} finally {
this.oauthLoading = false;
}
},
registerSocketListeners(sock) {
if (!sock) return;
this._adultVerificationChangedHandler = async (payload = {}) => {
@@ -149,18 +240,18 @@ export default {
if (hasNewPassword) {
if (!this.isNewPasswordValid) {
showError(this, 'tr:settings.account.validation.newPasswordTooShort');
showError(this, 'tr:settings.security.validation.newPasswordTooShort');
return;
}
// Validiere Passwort-Wiederholung nur wenn ein neues Passwort eingegeben wurde
if (!this.passwordsMatch) {
showError(this, 'tr:settings.account.validation.passwordMismatch');
showError(this, 'tr:settings.security.validation.passwordMismatch');
return;
}
// Prüfe ob das alte Passwort eingegeben wurde
if (!this.oldpassword || this.oldpassword.trim() === '') {
showError(this, 'tr:settings.account.validation.oldPasswordRequired');
showError(this, 'tr:settings.security.validation.oldPasswordRequired');
return;
}
}
@@ -184,7 +275,7 @@ export default {
// API-Aufruf zum Speichern der Account-Einstellungen
await apiClient.post('/api/settings/set-account', accountData);
showSuccess(this, 'tr:settings.account.feedback.saved');
showSuccess(this, 'tr:settings.security.feedback.saved');
// Leere die Passwort-Felder nach erfolgreichem Speichern
this.newpassword = '';
@@ -193,7 +284,7 @@ export default {
} catch (error) {
console.error('Fehler beim Speichern der Account-Einstellungen:', error);
showApiError(this, error, 'tr:settings.account.feedback.saveError');
showApiError(this, error, 'tr:settings.security.feedback.saveError');
}
},
@@ -203,6 +294,8 @@ export default {
this.registerSocketListeners(this.socket);
}
await this.loadAccount();
await this.loadOAuthProviders();
await this.loadOAuthIdentities();
// Stelle sicher, dass Passwort-Felder leer sind
this.newpassword = '';
@@ -236,7 +329,9 @@ export default {
}
.account-settings__hero,
.account-settings__panel {
.account-settings__panel,
.account-settings__adult,
.account-settings__oauth {
background: linear-gradient(180deg, rgba(255, 252, 247, 0.97), rgba(250, 244, 235, 0.95));
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
@@ -248,107 +343,249 @@ export default {
padding: 26px 28px;
}
.account-settings__eyebrow {
display: inline-flex;
margin-bottom: 8px;
padding: 4px 10px;
border-radius: var(--radius-pill);
background: var(--color-primary-soft);
color: var(--color-text-secondary);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
.account-settings__panel {
flex: 0 0 auto;
padding: 28px;
}
.account-settings__hero p {
.account-settings__oauth {
flex: 0 0 auto;
padding: 20px 24px;
display: grid;
gap: 16px;
}
.account-settings__oauth h3 {
margin: 0;
}
.account-settings__oauth p {
margin: 0;
color: var(--color-text-secondary);
font-size: 0.95rem;
}
/* Unteres Panel: füllt Resthöhe und scrollt (global .surface-card hat overflow:hidden) */
.account-settings__panel.account-settings__panel {
flex: 1 1 0%;
min-height: 0;
padding: 24px;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
.account-settings__oauth-list {
display: grid;
gap: 8px;
}
.oauth-identity-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(200, 150, 100, 0.15);
border-radius: 10px;
}
.oauth-identity-item__info {
display: grid;
gap: 4px;
}
.oauth-identity-item__info strong {
font-size: 0.95rem;
}
.oauth-identity-item__date {
font-size: 0.85rem;
color: var(--color-text-secondary);
}
.oauth-identity-item__remove {
background: rgba(200, 80, 80, 0.15);
border: 1px solid rgba(200, 80, 80, 0.3);
color: #a94442;
width: 28px;
height: 28px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s ease;
}
.oauth-identity-item__remove:hover:not(:disabled) {
background: rgba(200, 80, 80, 0.25);
}
.oauth-identity-item__remove:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.oauth-identity-item__empty {
margin: 0;
color: var(--color-text-secondary);
font-size: 0.95rem;
font-style: italic;
}
.account-settings__oauth-actions {
padding-top: 8px;
border-top: 1px solid rgba(200, 150, 100, 0.1);
}
.oauth-provider-buttons {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
}
.oauth-provider-button {
padding: 10px 14px;
border-radius: 10px;
border: 1px solid rgba(150, 100, 80, 0.2);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(248, 240, 230, 0.6));
color: #5a4a42;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s ease;
}
.oauth-provider-button:hover:not(:disabled) {
transform: translateY(-1px);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(250, 245, 235, 0.8));
}
.oauth-provider-button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.oauth-provider-button--google {
border-left: 4px solid #4285f4;
}
.oauth-provider-button--microsoft {
border-left: 4px solid #0078d4;
}
.oauth-provider-button--keycloak {
border-left: 4px solid #d67f2f;
}
.oauth-provider-button--ory {
border-left: 4px solid #0f766e;
}
.oauth-provider-button--zitadel {
border-left: 4px solid #0f5132;
}
.account-settings__adult {
flex: 0 0 auto;
padding: 20px 24px;
}
.account-settings__actions {
display: flex;
gap: 12px;
padding-top: 8px;
}
.account-settings__actions button {
padding: 10px 20px;
border-radius: 8px;
border: 1px solid rgba(150, 100, 80, 0.3);
background: #4a8f3d;
color: white;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.account-settings__actions button:hover:not(:disabled) {
background: #3d7631;
}
.account-settings__actions button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.account-settings__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
gap: 18px;
margin-bottom: 18px;
}
.account-settings__field {
display: grid;
gap: 8px;
gap: 6px;
font-size: 0.95rem;
}
.account-settings__field span {
font-weight: 600;
color: var(--color-text-secondary);
}
.account-settings__field input {
padding: 10px;
border: 1px solid rgba(150, 100, 80, 0.2);
border-radius: 8px;
font-size: 0.95rem;
}
.account-settings__field--full {
grid-column: 1 / -1;
}
.form-error {
color: #a94442;
font-size: 0.85rem;
}
.account-settings__toggle {
display: inline-flex;
display: flex;
align-items: center;
gap: 10px;
margin-top: 18px;
color: var(--color-text-secondary);
cursor: pointer;
}
.account-settings__actions {
display: flex;
justify-content: flex-end;
margin-top: 18px;
}
.account-settings__adult {
margin-top: 18px;
padding: 18px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: rgba(250, 244, 235, 0.72);
}
.account-settings__adult p,
.account-settings__adult-status {
color: var(--color-text-secondary);
.account-settings__toggle input[type="checkbox"] {
cursor: pointer;
}
.account-settings__adult-status {
display: grid;
gap: 6px;
margin-top: 10px;
padding: 12px;
background: rgba(248, 240, 230, 0.6);
border-radius: 8px;
margin: 12px 0;
}
.account-settings__adult-actions {
margin-top: 14px;
padding-top: 12px;
}
@media (max-width: 760px) {
.account-settings__grid {
.account-settings__adult-actions a {
display: inline-block;
padding: 10px 16px;
background: #4a8f3d;
color: white;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.2s ease;
}
.account-settings__adult-actions a:hover {
background: #3d7631;
}
@media (max-width: 768px) {
.account-settings__grid,
.oauth-provider-buttons {
grid-template-columns: 1fr;
}
.account-settings__hero,
.account-settings__panel {
padding: 20px;
}
.account-settings__actions {
justify-content: stretch;
}
.account-settings__actions button {
width: 100%;
.account-settings__field--full {
grid-column: 1;
}
}
</style>