@bagelink/auth 1.6.51 → 1.6.57

package/src/components/auth/SignupForm.vue

@@ -0,0 +1,224 @@
+<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')" />
+		<p v-if="error" class="txt-center color-red txt-12 mt-1" v-text="error" />
+	</form>
+</template>

package/src/components/index.ts

@@ -0,0 +1,5 @@
+// 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/constants.ts

@@ -0,0 +1,10 @@
+export const INTAKE_WORKFLOW_ID = 'fdba1933-0964-4850-b52a-7a4324175790'
+export const DEFAULT_AGENT_ID = 'fdba1933-0964-4850-b52a-7a4324175790'
+export const providers = {
+	github: { name: 'GitHub', icon: 'github', color: '#24292F' },
+	google: { name: 'Google', icon: 'google', color: '#DB4437' },
+	microsoft: { name: 'Microsoft', icon: 'microsoft', color: '#00A4EF' },
+	apple: { name: 'Apple', icon: 'apple', color: '#000000' },
+	okta: { name: 'Okta', icon: 'sun', color: '#FFB600' },
+	facebook: { name: 'Facebook', icon: 'facebook', color: '#1877F3' },
+}

package/src/index.ts

@@ -1,5 +1,30 @@
+// Core auth functionality
 export * from './api'
+// Components
+export { default as ForgotPasswordForm } from './components/auth/ForgotPasswordForm.vue'
+export { default as LoginForm } from './components/auth/LoginForm.vue'
+export { default as ResetPasswordForm } from './components/auth/ResetPasswordForm.vue'
+
+export { default as SignupForm } from './components/auth/SignupForm.vue'
+export * from './constants'
+// Page components
+export { default as Callback } from './pages/Callback.vue'
+export { default as ForgotPasswordPage } from './pages/ForgotPasswordPage.vue'
+
+export { default as LoginPage } from './pages/LoginPage.vue'
+export { default as ResetPasswordPage } from './pages/ResetPasswordPage.vue'
+export { default as SignupPage } from './pages/SignupPage.vue'
+// Routes
+export * from './routes'
 export * from './sso'
+
+// Types (re-export from types file and module)
 export * from './types'
-export { AuthState } from './types'
+
+export type {
+	ForgotPasswordTexts,
+	LoginTexts,
+	ResetPasswordTexts,
+	SignupTexts,
+} from './types/'
 export * from './useAuth'

package/src/pages/Callback.vue

@@ -0,0 +1,183 @@
+<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
+	try {
+		await sso.handleLinkCallback()
+		success.value = true
+		setTimeout(() => router.push('/'), 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 } = route.query
+	provider.value = sessionStorage.getItem(`oauth_provider:${state}`) as SSOProvider
+
+	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
+			setTimeout(() => router.push('/'), 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

@@ -0,0 +1,42 @@
+<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

@@ -0,0 +1,68 @@
+<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 */
+	showGithub?: boolean
+	showGoogle?: boolean
+	showMicrosoft?: boolean
+	showApple?: boolean
+	showOkta?: boolean
+	showFacebook?: 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>(), {
+	showGithub: true,
+	showGoogle: true,
+	showMicrosoft: true,
+	showApple: true,
+	showOkta: true,
+	showFacebook: 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="showGithub" :google="showGoogle" :microsoft="showMicrosoft"
+				:apple="showApple" :okta="showOkta" :facebook="showFacebook" :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

@@ -0,0 +1,47 @@
+<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

@@ -0,0 +1,46 @@
+<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>