@bagelink/auth 1.12.1 → 1.12.5

package/src/pages/Callback.vue

@@ -1,196 +0,0 @@
-<script setup lang="ts">
-import type { AuthenticationResponse, SSOProvider } from '@bagelink/auth'
-import { useAuth } from '@bagelink/auth'
-import { Btn, Card, Icon, Loading } from '@bagelink/vue'
-import { computed, onMounted, ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-
-import { providers } from '../constants'
-
-const isLoading = ref(true)
-const error = ref<string | null>(null)
-const success = ref(false)
-const isLinking = ref(false)
-const provider = ref<SSOProvider | null>(null)
-const authResponse = ref<AuthenticationResponse | null>(null)
-
-const { sso, user, accountInfo } = useAuth()
-const route = useRoute()
-const router = useRouter()
-const timeout = 4000
-// Get provider info for better UI
-const providerInfo = computed(() => {
-	if (provider.value === null) return null
-	return providers[provider.value]
-})
-
-async function linkCallback() {
-	isLinking.value = true
-	const { redirect } = route.query
-	try {
-		await sso.handleLinkCallback()
-		success.value = true
-		setTimeout(() => {
-			const redirectPath = typeof redirect === 'string' ? redirect : '/'
-			router.push(redirectPath)
-		}, timeout)
-	} catch (err: unknown) {
-		const errorMessage = err instanceof Error ? err.message : 'Failed to link account'
-		error.value = errorMessage
-	} finally {
-		isLoading.value = false
-	}
-}
-
-async function handleCallback() {
-	const { state, redirect } = route.query
-	provider.value = sessionStorage.getItem(`oauth_provider:${state}`) as SSOProvider
-	console.log('[Callback] Query params:', { state, redirect })
-	console.log('[Callback] Full route query:', route.query)
-
-	try {
-		const response = await sso.handleCallback()
-		if (response === null) {
-			error.value = `Failed to authenticate with ${providerInfo.value?.name ?? 'provider'}`
-		} else {
-			authResponse.value = response
-			success.value = true
-			console.log('[Callback] Login successful, redirect param:', redirect)
-			// Auto-redirect will handle navigation, but fallback to manual redirect
-			// if auto-redirect is disabled or router not connected
-			setTimeout(() => {
-				const redirectPath = typeof redirect === 'string' ? redirect : '/'
-				console.log('[Callback] Manual fallback redirecting to:', redirectPath)
-				router.push(redirectPath)
-			}, timeout)
-		}
-	} catch (err: unknown) {
-		const errorMessage = err instanceof Error ? err.message : 'Authentication failed'
-		error.value = errorMessage
-	} finally {
-		isLoading.value = false
-	}
-}
-
-onMounted(async () => {
-	if (user.value) {
-		await linkCallback()
-	} else {
-		await handleCallback()
-	}
-})
-</script>
-
-<template>
-	<div class="flex justify-content-center align-items-center vh-100 px-1">
-		<Card class="p-2 txt-center w450px shadow">
-			<!-- Loading State -->
-			<div v-if="isLoading" class="flex column align-items-center gap-1">
-				<Loading />
-				<div class="mt-1">
-					<h2 class="mb-05 pb-0 mt-0 txt24 m_txt20">
-						{{ isLinking ? 'Linking Account' : 'Authenticating' }}
-					</h2>
-					<p class="opacity-7 txt-14">
-						Please wait while we {{ isLinking ? 'link your' : 'complete the' }} {{ providerInfo?.name
-							|| 'OAuth' }} {{ isLinking ? 'account' : 'authentication' }}.
-					</p>
-				</div>
-			</div>
-
-			<!-- Success State -->
-			<div v-else-if="success && !error" class="flex column align-items-center gap-1">
-				<div class="flex justify-content-center align-items-center mb-1">
-					<div class="relative">
-						<Icon name="check_circle" size="5" class="txt-green line-height-1" />
-						<div
-							v-if="providerInfo"
-							class="absolute flex justify-content-center align-items-center bg-white rounded"
-							style="bottom: -8px; right: -8px; width: 40px; height: 40px; border: 3px solid white;"
-						>
-							<Icon :name="providerInfo.icon" size="1.5" :style="{ color: providerInfo.color }" />
-						</div>
-					</div>
-				</div>
-
-				<div>
-					<h2 class="mb-05 pb-0 mt-0 txt24 m_txt20">
-						{{ isLinking ? 'Account Linked!' : 'Welcome Back!' }}
-					</h2>
-					<p class="opacity-7 txt-14 mb-1">
-						{{ isLinking
-							? `Successfully linked your ${providerInfo?.name || 'account'}.`
-							: `You've successfully signed in with ${providerInfo?.name || 'your account'}.`
-						}}
-					</p>
-
-					<!-- Show user info if available -->
-					<div v-if="user || accountInfo" class="bg-gray-light rounded p-1 mt-1">
-						<div class="flex column gap-05">
-							<div v-if="user?.name" class="flex align-items-center gap-05 justify-content-center">
-								<Icon name="person" size="1.2" class="opacity-7" />
-								<span class="txt-14 bold">{{ user.name }}</span>
-							</div>
-							<div v-if="user?.email" class="flex align-items-center gap-05 justify-content-center">
-								<Icon name="email" size="1.2" class="opacity-7" />
-								<span class="txt-14 opacity-7">{{ user.email }}</span>
-							</div>
-							<div
-								v-if="accountInfo?.authentication_methods"
-								class="flex gap-05 justify-content-center mt-05"
-							>
-								<Icon
-									v-for="method in accountInfo.authentication_methods" :key="method.id"
-									:name="method.type === 'sso' ? (method.provider || 'link') : 'password'" size="1.2"
-									class="opacity-5"
-								/>
-							</div>
-						</div>
-					</div>
-
-					<p class="txt-12 opacity-5 mt-1">
-						Redirecting you to home...
-					</p>
-				</div>
-			</div>
-
-			<!-- Error State -->
-			<div v-else-if="error" class="flex column align-items-center gap-1">
-				<Icon name="error" size="5" class="txt-red mb-1 line-height-1" />
-				<div>
-					<h2 class="mb-05 pb-0 mt-0 txt24 m_txt20">
-						Authentication Failed
-					</h2>
-					<p class="opacity-7 txt-14 mb-1">
-						{{ error }}
-					</p>
-
-					<div class="bg-red-light rounded p-1 mt-1 mb-1">
-						<p class="txt-12 opacity-7">
-							This could happen if:
-						</p>
-						<ul class="txt-12 opacity-7 txt-start mt-05" style="list-style: none; padding-left: 0;">
-							<li class="mb-025">
-								• The authorization was cancelled
-							</li>
-							<li class="mb-025">
-								• The state parameter was invalid
-							</li>
-							<li class="mb-025">
-								• The OAuth provider denied access
-							</li>
-							<li class="mb-025">
-								• Network connectivity issues
-							</li>
-						</ul>
-					</div>
-
-					<div class="flex gap-05 justify-content-center">
-						<Btn outline value="Try Again" to="/login" />
-						<Btn value="Go Home" to="/" />
-					</div>
-				</div>
-			</div>
-		</Card>
-	</div>
-</template>

package/src/pages/ForgotPasswordPage.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import type { ForgotPasswordTexts } from '../components/auth/ForgotPasswordForm.vue'
-import { Card } from '@bagelink/vue'
-import { useRouter } from 'vue-router'
-import ForgotPasswordForm from '../components/auth/ForgotPasswordForm.vue'
-
-interface Props {
-	/** Custom texts for the forgot password form */
-	texts?: Partial<ForgotPasswordTexts>
-	/** Card styling */
-	cardWidth?: string
-	cardShadow?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	cardWidth: '450px',
-	cardShadow: true
-})
-
-const router = useRouter()
-
-function switchForm(form: string) {
-	if (form === 'login') {
-		router.push('/login')
-	}
-}
-</script>
-
-<template>
-	<div class="flex justify-content-center align-items-center min-vh-100 px-1 py-2">
-		<Card
-			:class="{ shadow: cardShadow }"
-			:style="{ width: cardWidth, maxWidth: '100%' }"
-			class="p-2"
-		>
-			<ForgotPasswordForm
-				:texts="texts"
-				@switch-form="switchForm"
-			/>
-		</Card>
-	</div>
-</template>

package/src/pages/LoginPage.vue

@@ -1,68 +0,0 @@
-<script setup lang="ts">
-import type { LoginTexts } from '../components/auth/LoginForm.vue'
-import { Card } from '@bagelink/vue'
-import { useRouter } from 'vue-router'
-import LoginForm from '../components/auth/LoginForm.vue'
-
-interface Props {
-	/** Custom texts for the login form */
-	texts?: Partial<LoginTexts>
-	/** Show/hide specific SSO providers */
-	github?: boolean
-	google?: boolean
-	microsoft?: boolean
-	apple?: boolean
-	okta?: boolean
-	facebook?: boolean
-	/** SSO button styling */
-	ssoOutline?: boolean
-	ssoShowValue?: boolean
-	ssoBrandBackground?: boolean
-	/** Show/hide form elements */
-	showForgotPassword?: boolean
-	showSignupButton?: boolean
-	/** Card styling */
-	cardWidth?: string
-	cardShadow?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	github: true,
-	google: true,
-	microsoft: true,
-	apple: true,
-	okta: true,
-	facebook: true,
-	ssoOutline: true,
-	ssoShowValue: true,
-	ssoBrandBackground: true,
-	showForgotPassword: true,
-	showSignupButton: true,
-	cardWidth: '450px',
-	cardShadow: true
-})
-
-const router = useRouter()
-
-function switchForm(form: string) {
-	if (form === 'signup') {
-		router.push('/signup')
-	} else if (form === 'forgot-password') {
-		router.push('/forgot-password')
-	}
-}
-</script>
-
-<template>
-	<div class="flex justify-content-center align-items-center min-vh-100 px-1 py-2">
-		<Card :class="{ shadow: cardShadow }" :style="{ width: cardWidth, maxWidth: '100%' }" class="p-2">
-			<LoginForm
-				:texts="texts" :github="github" :google="google" :microsoft="microsoft"
-				:apple="apple" :okta="okta" :facebook="facebook" :sso-outline="ssoOutline"
-				:sso-show-value="ssoShowValue" :sso-brand-background="ssoBrandBackground"
-				:show-forgot-password="showForgotPassword" :show-signup-button="showSignupButton"
-				@switch-form="switchForm"
-			/>
-		</Card>
-	</div>
-</template>

package/src/pages/ResetPasswordPage.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import type { ResetPasswordTexts } from '../components/auth/ResetPasswordForm.vue'
-import { Card } from '@bagelink/vue'
-import { computed } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import ResetPasswordForm from '../components/auth/ResetPasswordForm.vue'
-
-interface Props {
-	/** Custom texts for the reset password form */
-	texts?: Partial<ResetPasswordTexts>
-	/** Card styling */
-	cardWidth?: string
-	cardShadow?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	cardWidth: '450px',
-	cardShadow: true
-})
-
-const router = useRouter()
-const route = useRoute()
-
-const token = computed(() => route.query.token as string)
-
-function switchForm(form: string) {
-	if (form === 'login') {
-		router.push('/login')
-	}
-}
-</script>
-
-<template>
-	<div class="flex justify-content-center align-items-center min-vh-100 px-1 py-2">
-		<Card
-			:class="{ shadow: cardShadow }"
-			:style="{ width: cardWidth, maxWidth: '100%' }"
-			class="p-2"
-		>
-			<ResetPasswordForm
-				:texts="texts"
-				:token="token"
-				@switch-form="switchForm"
-			/>
-		</Card>
-	</div>
-</template>

package/src/pages/SignupPage.vue

@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import type { SignupTexts } from '../components/auth/SignupForm.vue'
-import { Card } from '@bagelink/vue'
-import { useRouter } from 'vue-router'
-import SignupForm from '../components/auth/SignupForm.vue'
-
-interface Props {
-	/** Custom texts for the signup form */
-	texts?: Partial<SignupTexts>
-	/** Show name fields (first name, last name) */
-	showNames?: boolean
-	/** Card styling */
-	cardWidth?: string
-	cardShadow?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	showNames: true,
-	cardWidth: '450px',
-	cardShadow: true
-})
-
-const router = useRouter()
-
-function switchForm(form: string) {
-	if (form === 'login') {
-		router.push('/login')
-	}
-}
-</script>
-
-<template>
-	<div class="flex justify-content-center align-items-center min-vh-100 px-1 py-2">
-		<Card
-			:class="{ shadow: cardShadow }"
-			:style="{ width: cardWidth, maxWidth: '100%' }"
-			class="p-2"
-		>
-			<SignupForm
-				:texts="texts"
-				:show-names="showNames"
-				@switch-form="switchForm"
-			/>
-		</Card>
-	</div>
-</template>