Add OAuth integration for multiple providers and implement user linking

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

frontend/src/views/home/NoLoginView.vue

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