@bagelink/auth 1.12.3 → 1.12.8

package/src/components/auth/ResetPasswordForm.vue

@@ -1,156 +0,0 @@
-<script lang="ts" setup>
-import { useAuth } from '@bagelink/auth'
-import { Btn, Icon, PasswordInput } from '@bagelink/vue'
-import { computed, ref } from 'vue'
-
-export interface ResetPasswordTexts {
-	title?: string
-	invalidLinkTitle?: string
-	invalidLinkMessage?: string
-	newPasswordLabel?: string
-	confirmPasswordLabel?: string
-	submitButton?: string
-	backToLogin?: string
-	passwordMismatchError?: string
-	invalidTokenError?: string
-	successTitle?: string
-	successMessage?: string
-	goToLogin?: string
-}
-
-interface Props {
-	token?: string
-	showSuccess?: boolean
-	useHebrewDefaults?: boolean
-	texts?: Partial<ResetPasswordTexts>
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	useHebrewDefaults: false
-})
-defineEmits<{
-	switchForm: [form: string]
-}>()
-
-const { resetPassword } = useAuth()
-
-const error = ref<string>('')
-const internalSuccess = ref<boolean>(false)
-const newPassword = ref<string>('')
-const confirmPassword = ref<string>('')
-
-const isValidToken = computed(() => !!props.token)
-const isSuccess = computed(() => props.showSuccess || internalSuccess.value)
-
-// Text configuration with conditional defaults
-const texts = computed(() => {
-	const hebrewDefaults = {
-		title: 'איפוס סיסמה',
-		invalidLinkTitle: 'קישור לא תקין',
-		invalidLinkMessage: 'קישור איפוס הסיסמה לא תקין או פג תוקף',
-		newPasswordLabel: 'סיסמה חדשה',
-		confirmPasswordLabel: 'אימות סיסמה',
-		submitButton: 'איפוס סיסמה',
-		backToLogin: 'חזרה להתחברות',
-		passwordMismatchError: 'הסיסמאות לא תואמות',
-		invalidTokenError: 'אסימון לא תקין',
-		successTitle: 'הסיסמה אופסה בהצלחה!',
-		successMessage: 'הסיסמה שלכם אופסה. כעת תוכלו להתחברות עם הסיסמה החדשה.',
-		goToLogin: 'מעבר להתחברות'
-	}
-
-	const englishDefaults = {
-		title: 'Reset Password',
-		invalidLinkTitle: 'Invalid Link',
-		invalidLinkMessage: 'This reset link is invalid or has expired',
-		newPasswordLabel: 'New Password',
-		confirmPasswordLabel: 'Confirm Password',
-		submitButton: 'Reset Password',
-		backToLogin: 'Back to Login',
-		passwordMismatchError: 'Passwords do not match',
-		invalidTokenError: 'Invalid token',
-		successTitle: 'Password Reset Successfully!',
-		successMessage: 'Your password has been reset. You can now log in with your new password.',
-		goToLogin: 'Go to Login'
-	}
-
-	const defaults = props.useHebrewDefaults ? hebrewDefaults : englishDefaults
-
-	return {
-		title: props.texts?.title ?? defaults.title,
-		invalidLinkTitle: props.texts?.invalidLinkTitle ?? defaults.invalidLinkTitle,
-		invalidLinkMessage: props.texts?.invalidLinkMessage ?? defaults.invalidLinkMessage,
-		newPasswordLabel: props.texts?.newPasswordLabel ?? defaults.newPasswordLabel,
-		confirmPasswordLabel: props.texts?.confirmPasswordLabel ?? defaults.confirmPasswordLabel,
-		submitButton: props.texts?.submitButton ?? defaults.submitButton,
-		backToLogin: props.texts?.backToLogin ?? defaults.backToLogin,
-		passwordMismatchError: props.texts?.passwordMismatchError ?? defaults.passwordMismatchError,
-		invalidTokenError: props.texts?.invalidTokenError ?? defaults.invalidTokenError,
-		successTitle: props.texts?.successTitle ?? defaults.successTitle,
-		successMessage: props.texts?.successMessage ?? defaults.successMessage,
-		goToLogin: props.texts?.goToLogin ?? defaults.goToLogin
-	}
-})
-
-const textDirection = computed(() => ({ 'auth-rtl': props.useHebrewDefaults }))
-
-async function handleResetPassword() {
-	if (newPassword.value !== confirmPassword.value) {
-		error.value = texts.value.passwordMismatchError
-		return
-	}
-	if (!props.token) {
-		error.value = texts.value.invalidTokenError
-		return
-	}
-	try {
-		await resetPassword(props.token, newPassword.value)
-		internalSuccess.value = true
-		error.value = ''
-	} catch (err: unknown) {
-		error.value = err instanceof Error ? err.message : 'Reset failed'
-	}
-}
-</script>
-
-<template>
-	<div v-if="!isValidToken" class="txt-center" :class="textDirection">
-		<h1 class="txt20 bold mb-1">
-			{{ texts.invalidLinkTitle }}
-		</h1>
-		<p class="opacity-7 mb-2">
-			{{ texts.invalidLinkMessage }}
-		</p>
-		<Btn :value="texts.backToLogin" @click="$emit('switchForm', 'login')" />
-	</div>
-	<div v-else-if="isSuccess" class="txt-center" :class="textDirection">
-		<Icon name="check_circle" size="4" class="txt-green mb-1" />
-		<h1 class="txt20 bold mb-1">
-			{{ texts.successTitle }}
-		</h1>
-		<p class="opacity-7 mb-2">
-			{{ texts.successMessage }}
-		</p>
-		<Btn :value="texts.goToLogin" @click="$emit('switchForm', 'login')" />
-	</div>
-	<form v-else :class="textDirection" @submit.prevent="handleResetPassword">
-		<h1 class="txt20 bold txt-center mb-1">
-			{{ texts.title }}
-		</h1>
-		<PasswordInput
-			v-model="newPassword" class="mb-05" :label="texts.newPasswordLabel"
-			autocomplete="new-password"
-		/>
-		<PasswordInput v-model="confirmPassword" :label="texts.confirmPasswordLabel" autocomplete="new-password" />
-		<Btn type="submit" class="w-100 mt-2" :value="texts.submitButton" />
-		<Btn
-			thin flat class="txt-12 mt-075 underline block" :value="texts.backToLogin"
-			@click="$emit('switchForm', 'login')"
-		/>
-		<div class="h-20px pt-075">
-			<p v-if="error" class="txt-center color-red txt-12">
-				{{ error }}
-			</p>
-		</div>
-	</form>
-</template>

package/src/components/auth/SignupForm.vue

@@ -1,231 +0,0 @@
-<script lang="ts" setup>
-import { useAuth } from '@bagelink/auth'
-import { Btn, PasswordInput, TextInput } from '@bagelink/vue'
-import { computed, ref } from 'vue'
-
-export interface SignupTexts {
-	title?: string
-	firstNameLabel?: string
-	lastNameLabel?: string
-	emailLabel?: string
-	passwordLabel?: string
-	confirmPasswordLabel?: string
-	signupButton?: string
-	alreadyHaveAccount?: string
-	// Validation errors
-	emailRequiredError?: string
-	emailInvalidError?: string
-	passwordRequiredError?: string
-	passwordTooShortError?: string
-	passwordMismatchError?: string
-	firstNameRequiredError?: string
-	lastNameRequiredError?: string
-}
-
-interface Props {
-	showNames?: boolean
-	useHebrewDefaults?: boolean
-	errorState?: 'normal' | 'email-required' | 'email-invalid' | 'password-short' | 'password-mismatch' | 'name-required' | 'server-error'
-	texts?: Partial<SignupTexts>
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	showNames: true,
-	useHebrewDefaults: false,
-	errorState: 'normal',
-	texts: () => ({})
-})
-
-defineEmits<{
-	switchForm: [form: string]
-}>()
-
-const { signup, login } = useAuth()
-
-// Internal error for actual validation
-const internalError = ref<string>('')
-
-// Use computed for error that reacts to errorState changes
-const error = computed(() => {
-	if (props.errorState !== 'normal') {
-		return getDevError()
-	}
-	return internalError.value
-})
-
-const form = ref({
-	email: '',
-	password: '',
-	confirmPassword: '',
-	first_name: '',
-	last_name: '',
-})
-
-// Text configuration with conditional defaults
-const texts = computed(() => {
-	const hebrewDefaults = {
-		title: 'יצירת חשבון',
-		firstNameLabel: 'שם פרטי',
-		lastNameLabel: 'שם משפחה',
-		emailLabel: 'איימיל',
-		passwordLabel: 'סיסמה',
-		confirmPasswordLabel: 'אימות סיסמה',
-		signupButton: 'יצירת חשבון',
-		alreadyHaveAccount: 'יש לך כבר חשבון?',
-		// Validation errors
-		emailRequiredError: 'איימיל נדרש',
-		emailInvalidError: 'יש להזין כתובת איימיל תקינה',
-		passwordRequiredError: 'סיסמה נדרשת',
-		passwordTooShortError: 'הסיסמה חייבת להיות לפחות 8 תווים',
-		passwordMismatchError: 'הסיסמאות לא תואמות',
-		firstNameRequiredError: 'שם פרטי נדרש',
-		lastNameRequiredError: 'שם משפחה נדרש'
-	}
-
-	const englishDefaults = {
-		title: 'Create Account',
-		firstNameLabel: 'First Name',
-		lastNameLabel: 'Last Name',
-		emailLabel: 'Email',
-		passwordLabel: 'Password',
-		confirmPasswordLabel: 'Confirm Password',
-		signupButton: 'Create Account',
-		alreadyHaveAccount: 'Already have an account?',
-		// Validation errors
-		emailRequiredError: 'Email is required',
-		emailInvalidError: 'Please enter a valid email address',
-		passwordRequiredError: 'Password is required',
-		passwordTooShortError: 'Password must be at least 8 characters',
-		passwordMismatchError: 'Passwords do not match',
-		firstNameRequiredError: 'First name is required',
-		lastNameRequiredError: 'Last name is required'
-	}
-
-	const defaults = props.useHebrewDefaults ? hebrewDefaults : englishDefaults
-
-	return {
-		title: props.texts.title || defaults.title,
-		firstNameLabel: props.texts.firstNameLabel || defaults.firstNameLabel,
-		lastNameLabel: props.texts.lastNameLabel || defaults.lastNameLabel,
-		emailLabel: props.texts.emailLabel || defaults.emailLabel,
-		passwordLabel: props.texts.passwordLabel || defaults.passwordLabel,
-		confirmPasswordLabel: props.texts.confirmPasswordLabel || defaults.confirmPasswordLabel,
-		signupButton: props.texts.signupButton || defaults.signupButton,
-		alreadyHaveAccount: props.texts.alreadyHaveAccount || defaults.alreadyHaveAccount,
-		// Validation errors
-		emailRequiredError: props.texts.emailRequiredError || defaults.emailRequiredError,
-		emailInvalidError: props.texts.emailInvalidError || defaults.emailInvalidError,
-		passwordRequiredError: props.texts.passwordRequiredError || defaults.passwordRequiredError,
-		passwordTooShortError: props.texts.passwordTooShortError || defaults.passwordTooShortError,
-		passwordMismatchError: props.texts.passwordMismatchError || defaults.passwordMismatchError,
-		firstNameRequiredError: props.texts.firstNameRequiredError || defaults.firstNameRequiredError,
-		lastNameRequiredError: props.texts.lastNameRequiredError || defaults.lastNameRequiredError
-	}
-})
-
-const textDirection = computed(() => ({ 'auth-rtl': props.useHebrewDefaults }))
-
-function getDevError() {
-	switch (props.errorState) {
-		case 'email-required': return texts.value.emailRequiredError
-		case 'email-invalid': return texts.value.emailInvalidError
-		case 'password-short': return texts.value.passwordTooShortError
-		case 'password-mismatch': return texts.value.passwordMismatchError
-		case 'name-required': return props.showNames ? texts.value.firstNameRequiredError : null
-		case 'server-error': return props.useHebrewDefaults ? 'כתובת האימייל כבר קיימת או שגיאת שרת' : 'Email already exists or server error'
-		default: return null
-	}
-}
-
-function validateForm() {
-	// Email validation
-	if (!form.value.email.trim()) {
-		return texts.value.emailRequiredError
-	}
-	const emailRegex = /^[^\s@]+@[^\s@][^\s.@]*\.[^\s@]+$/
-	if (!emailRegex.test(form.value.email)) {
-		return texts.value.emailInvalidError
-	}
-
-	// Password validation
-	if (!form.value.password) {
-		return texts.value.passwordRequiredError
-	}
-	if (form.value.password.length < 8) {
-		return texts.value.passwordTooShortError
-	}
-	if (form.value.password !== form.value.confirmPassword) {
-		return texts.value.passwordMismatchError
-	}
-
-	// Name validation (only if names are shown)
-	if (props.showNames) {
-		if (!form.value.first_name.trim()) {
-			return texts.value.firstNameRequiredError
-		}
-		if (!form.value.last_name.trim()) {
-			return texts.value.lastNameRequiredError
-		}
-	}
-
-	return null
-}
-
-async function handleSignup() {
-	// Don't process if we're showing a development error
-	if (props.errorState !== 'normal') {
-		return
-	}
-
-	// Clear previous errors
-	internalError.value = ''
-
-	// Validate form first
-	const validationError = validateForm()
-	if (validationError) {
-		internalError.value = validationError
-		return
-	}
-	const { message, success } = await signup(form.value).catch((error) => {
-		console.error(error)
-		// Handle specific server errors
-		const errorMessage = error.response?.data?.detail as string
-		if (errorMessage?.toLowerCase().includes('email')) {
-			return { success: false, message: 'Email already exists or invalid' }
-		}
-		if (errorMessage?.toLowerCase().includes('password')) {
-			return { success: false, message: 'Password does not meet requirements' }
-		}
-		return { success: false, message: errorMessage || 'Registration failed. Please try again.' }
-	})
-	if (!success) {
-		internalError.value = message as string
-		return
-	}
-	await login({ email: form.value.email, password: form.value.password })
-}
-</script>
-
-<template>
-	<form :class="textDirection" @submit.prevent="handleSignup">
-		<h1 class="txt20 bold txt-center mb-1">
-			{{ texts.title }}
-		</h1>
-
-		<TextInput v-if="props.showNames" v-model="form.first_name" :label="texts.firstNameLabel" />
-		<TextInput v-if="props.showNames" v-model="form.last_name" :label="texts.lastNameLabel" />
-		<TextInput v-model="form.email" type="email" :label="texts.emailLabel" autocomplete="username" />
-		<PasswordInput v-model="form.password" class="mb-05" :label="texts.passwordLabel" />
-		<PasswordInput v-model="form.confirmPassword" :label="texts.confirmPasswordLabel" />
-		<Btn class="w-100 mt-2" :value="texts.signupButton" type="submit" />
-		<Btn
-			thin flat class="txt-12 mt-075 underline block" :value="texts.alreadyHaveAccount"
-			@click="$emit('switchForm', 'login')"
-		/>
-		<div class="h-20px pt-075">
-			<p v-if="error" class="txt-center color-red txt-12">
-				{{ error }}
-			</p>
-		</div>
-	</form>
-</template>

package/src/components/index.ts

@@ -1,5 +0,0 @@
-// Export form components
-export { default as ForgotPasswordForm } from './auth/ForgotPasswordForm.vue'
-export { default as LoginForm } from './auth/LoginForm.vue'
-export { default as ResetPasswordForm } from './auth/ResetPasswordForm.vue'
-export { default as SignupForm } from './auth/SignupForm.vue'

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>