feat: rebuild auth identity foundation flow

frontend/src/views/auth/OidcCallbackView.vue

@@ -15,36 +15,99 @@
       </div>
 
       <transition name="fade">
-        <div v-if="needsInvitation" class="space-y-4">
-          <p class="text-sm text-gray-700 dark:text-gray-300">
-            {{ t('auth.oidc.invitationRequired', { providerName }) }}
-          </p>
-          <div>
-            <input
-              v-model="invitationCode"
-              type="text"
-              class="input w-full"
-              :placeholder="t('auth.invitationCodePlaceholder')"
-              :disabled="isSubmitting"
-              @keyup.enter="handleSubmitInvitation"
-            />
-          </div>
-          <transition name="fade">
-            <p v-if="invitationError" class="text-sm text-red-600 dark:text-red-400">
-              {{ invitationError }}
-            </p>
-          </transition>
-          <button
-            class="btn btn-primary w-full"
-            :disabled="isSubmitting || !invitationCode.trim()"
-            @click="handleSubmitInvitation"
+        <div v-if="needsInvitation || needsAdoptionConfirmation" class="space-y-4">
+          <div
+            v-if="adoptionRequired && (suggestedDisplayName || suggestedAvatarUrl)"
+            class="rounded-xl border border-gray-200 bg-gray-50 p-4 dark:border-dark-600 dark:bg-dark-800/60"
           >
-            {{
-              isSubmitting
-                ? t('auth.oidc.completing')
-                : t('auth.oidc.completeRegistration')
-            }}
-          </button>
+            <div class="space-y-3">
+              <div class="space-y-1">
+                <p class="text-sm font-medium text-gray-900 dark:text-white">
+                  Use {{ providerName }} profile details
+                </p>
+                <p class="text-xs text-gray-500 dark:text-dark-400">
+                  Choose whether to apply the nickname or avatar from {{ providerName }} to this
+                  account.
+                </p>
+              </div>
+
+              <label
+                v-if="suggestedDisplayName"
+                class="flex items-start gap-3 rounded-lg border border-gray-200 bg-white p-3 text-sm dark:border-dark-600 dark:bg-dark-900/50"
+              >
+                <input v-model="adoptDisplayName" type="checkbox" class="mt-1 h-4 w-4" />
+                <span class="space-y-1">
+                  <span class="block font-medium text-gray-900 dark:text-white">
+                    Use display name
+                  </span>
+                  <span class="block text-gray-500 dark:text-dark-400">
+                    {{ suggestedDisplayName }}
+                  </span>
+                </span>
+              </label>
+
+              <label
+                v-if="suggestedAvatarUrl"
+                class="flex items-start gap-3 rounded-lg border border-gray-200 bg-white p-3 text-sm dark:border-dark-600 dark:bg-dark-900/50"
+              >
+                <input v-model="adoptAvatar" type="checkbox" class="mt-1 h-4 w-4" />
+                <img
+                  :src="suggestedAvatarUrl"
+                  :alt="`${providerName} avatar`"
+                  class="h-10 w-10 rounded-full border border-gray-200 object-cover dark:border-dark-600"
+                />
+                <span class="space-y-1">
+                  <span class="block font-medium text-gray-900 dark:text-white">
+                    Use avatar
+                  </span>
+                  <span class="block break-all text-gray-500 dark:text-dark-400">
+                    {{ suggestedAvatarUrl }}
+                  </span>
+                </span>
+              </label>
+            </div>
+          </div>
+
+          <template v-if="needsInvitation">
+            <p class="text-sm text-gray-700 dark:text-gray-300">
+              {{ t('auth.oidc.invitationRequired', { providerName }) }}
+            </p>
+            <div>
+              <input
+                v-model="invitationCode"
+                type="text"
+                class="input w-full"
+                :placeholder="t('auth.invitationCodePlaceholder')"
+                :disabled="isSubmitting"
+                @keyup.enter="handleSubmitInvitation"
+              />
+            </div>
+            <transition name="fade">
+              <p v-if="invitationError" class="text-sm text-red-600 dark:text-red-400">
+                {{ invitationError }}
+              </p>
+            </transition>
+            <button
+              class="btn btn-primary w-full"
+              :disabled="isSubmitting || !invitationCode.trim()"
+              @click="handleSubmitInvitation"
+            >
+              {{
+                isSubmitting
+                  ? t('auth.oidc.completing')
+                  : t('auth.oidc.completeRegistration')
+              }}
+            </button>
+          </template>
+
+          <template v-else-if="needsAdoptionConfirmation">
+            <p class="text-sm text-gray-700 dark:text-gray-300">
+              Review the {{ providerName }} profile details before continuing.
+            </p>
+            <button class="btn btn-primary w-full" :disabled="isSubmitting" @click="handleContinueLogin">
+              {{ isSubmitting ? t('common.processing') : 'Continue' }}
+            </button>
+          </template>
         </div>
       </transition>
 
@@ -81,7 +144,10 @@ import Icon from '@/components/icons/Icon.vue'
 import { useAuthStore, useAppStore } from '@/stores'
 import {
   completeOIDCOAuthRegistration,
-  getPublicSettings
+  exchangePendingOAuthCompletion,
+  getPublicSettings,
+  type OAuthAdoptionDecision,
+  type PendingOAuthExchangeResponse
 } from '@/api/auth'
 
 const route = useRoute()
@@ -95,12 +161,17 @@ const isProcessing = ref(true)
 const errorMessage = ref('')
 
 const needsInvitation = ref(false)
-const pendingOAuthToken = ref('')
 const invitationCode = ref('')
 const isSubmitting = ref(false)
 const invitationError = ref('')
 const redirectTo = ref('/dashboard')
 const providerName = ref('OIDC')
+const adoptionRequired = ref(false)
+const suggestedDisplayName = ref('')
+const suggestedAvatarUrl = ref('')
+const adoptDisplayName = ref(true)
+const adoptAvatar = ref(true)
+const needsAdoptionConfirmation = ref(false)
 
 function parseFragmentParams(): URLSearchParams {
   const raw = typeof window !== 'undefined' ? window.location.hash : ''
@@ -129,6 +200,54 @@ async function loadProviderName() {
   }
 }
 
+function currentAdoptionDecision(): OAuthAdoptionDecision {
+  return {
+    adoptDisplayName: adoptDisplayName.value,
+    adoptAvatar: adoptAvatar.value
+  }
+}
+
+function applyAdoptionSuggestionState(completion: {
+  adoption_required?: boolean
+  suggested_display_name?: string
+  suggested_avatar_url?: string
+}) {
+  adoptionRequired.value = completion.adoption_required === true
+  suggestedDisplayName.value = completion.suggested_display_name || ''
+  suggestedAvatarUrl.value = completion.suggested_avatar_url || ''
+
+  if (!suggestedDisplayName.value) {
+    adoptDisplayName.value = false
+  }
+  if (!suggestedAvatarUrl.value) {
+    adoptAvatar.value = false
+  }
+}
+
+function hasSuggestedProfile(completion: {
+  suggested_display_name?: string
+  suggested_avatar_url?: string
+}): boolean {
+  return Boolean(completion.suggested_display_name || completion.suggested_avatar_url)
+}
+
+async function finalizeLogin(completion: PendingOAuthExchangeResponse, redirect: string) {
+  if (!completion.access_token) {
+    throw new Error(t('auth.oidc.callbackMissingToken'))
+  }
+
+  if (completion.refresh_token) {
+    localStorage.setItem('refresh_token', completion.refresh_token)
+  }
+  if (completion.expires_in) {
+    localStorage.setItem('token_expires_at', String(Date.now() + completion.expires_in * 1000))
+  }
+
+  await authStore.setToken(completion.access_token)
+  appStore.showSuccess(t('auth.loginSuccess'))
+  await router.replace(redirect)
+}
+
 async function handleSubmitInvitation() {
   invitationError.value = ''
   if (!invitationCode.value.trim()) return
@@ -136,8 +255,8 @@ async function handleSubmitInvitation() {
   isSubmitting.value = true
   try {
     const tokenData = await completeOIDCOAuthRegistration(
-      pendingOAuthToken.value,
-      invitationCode.value.trim()
+      invitationCode.value.trim(),
+      currentAdoptionDecision()
     )
     if (tokenData.refresh_token) {
       localStorage.setItem('refresh_token', tokenData.refresh_token)
@@ -157,63 +276,67 @@ async function handleSubmitInvitation() {
   }
 }
 
+async function handleContinueLogin() {
+  isSubmitting.value = true
+  try {
+    const completion = await exchangePendingOAuthCompletion(currentAdoptionDecision())
+    await finalizeLogin(completion, redirectTo.value)
+  } catch (e: unknown) {
+    const err = e as { message?: string; response?: { data?: { detail?: string; message?: string } } }
+    errorMessage.value =
+      err.response?.data?.detail ||
+      err.response?.data?.message ||
+      err.message ||
+      t('auth.loginFailed')
+    appStore.showError(errorMessage.value)
+    needsAdoptionConfirmation.value = false
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
 onMounted(async () => {
   void loadProviderName()
 
   const params = parseFragmentParams()
-  const token = params.get('access_token') || ''
-  const refreshToken = params.get('refresh_token') || ''
-  const expiresInStr = params.get('expires_in') || ''
-  const redirect = sanitizeRedirectPath(
-    params.get('redirect') || (route.query.redirect as string | undefined) || '/dashboard'
-  )
   const error = params.get('error')
   const errorDesc = params.get('error_description') || params.get('error_message') || ''
 
   if (error) {
-    if (error === 'invitation_required') {
-      pendingOAuthToken.value = params.get('pending_oauth_token') || ''
-      redirectTo.value = sanitizeRedirectPath(params.get('redirect'))
-      if (!pendingOAuthToken.value) {
-        errorMessage.value = t('auth.oidc.invalidPendingToken')
-        appStore.showError(errorMessage.value)
-        isProcessing.value = false
-        return
-      }
-      needsInvitation.value = true
-      isProcessing.value = false
-      return
-    }
     errorMessage.value = errorDesc || error
     appStore.showError(errorMessage.value)
     isProcessing.value = false
     return
   }
 
-  if (!token) {
-    errorMessage.value = t('auth.oidc.callbackMissingToken')
-    appStore.showError(errorMessage.value)
-    isProcessing.value = false
-    return
-  }
-
   try {
-    if (refreshToken) {
-      localStorage.setItem('refresh_token', refreshToken)
-    }
-    if (expiresInStr) {
-      const expiresIn = parseInt(expiresInStr, 10)
-      if (!isNaN(expiresIn)) {
-        localStorage.setItem('token_expires_at', String(Date.now() + expiresIn * 1000))
-      }
+    const completion = await exchangePendingOAuthCompletion()
+    const redirect = sanitizeRedirectPath(
+      completion.redirect || (route.query.redirect as string | undefined) || '/dashboard'
+    )
+    applyAdoptionSuggestionState(completion)
+    redirectTo.value = redirect
+
+    if (completion.error === 'invitation_required') {
+      needsInvitation.value = true
+      isProcessing.value = false
+      return
     }
 
-    await authStore.setToken(token)
-    appStore.showSuccess(t('auth.loginSuccess'))
-    await router.replace(redirect)
+    if (adoptionRequired.value && hasSuggestedProfile(completion)) {
+      needsAdoptionConfirmation.value = true
+      isProcessing.value = false
+      return
+    }
+
+    await finalizeLogin(completion, redirect)
   } catch (e: unknown) {
-    const err = e as { message?: string; response?: { data?: { detail?: string } } }
-    errorMessage.value = err.response?.data?.detail || err.message || t('auth.loginFailed')
+    const err = e as { message?: string; response?: { data?: { detail?: string; message?: string } } }
+    errorMessage.value =
+      err.response?.data?.detail ||
+      err.response?.data?.message ||
+      err.message ||
+      t('auth.loginFailed')
     appStore.showError(errorMessage.value)
     isProcessing.value = false
   }