@bagelink/auth 1.6.53 → 1.6.57

package/dist/utils.d.ts

@@ -0,0 +1,11 @@
+import { AxiosInstance } from 'axios';
+import { AuthEventMap, AuthState } from './types';
+export declare function createAxiosInstance(baseURL: string): AxiosInstance;
+export declare class EventEmitter {
+    private listeners;
+    on<K extends AuthState>(event: K, handler: AuthEventMap[K]): void;
+    off<K extends AuthState>(event: K, handler: AuthEventMap[K]): void;
+    emit<K extends AuthState>(event: K): void;
+    removeAllListeners<K extends AuthState>(event?: K): void;
+}
+export declare function queryParams(): Record<string, string>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/auth",
   "type": "module",
-  "version": "1.6.53",
+  "version": "1.6.57",
   "description": "Bagelink auth package",
   "author": {
     "name": "Bagel Studio",
@@ -40,23 +40,21 @@
   },
   "devDependencies": {
     "@types/node": "^24.0.0",
+    "@vitejs/plugin-vue": "^5.0.0",
     "typescript": "^5.8.3",
-    "unbuild": "^3.5.0",
-    "@typescript-eslint/eslint-plugin": "^8.34.0",
-    "@typescript-eslint/parser": "^8.34.0",
-    "eslint": "^9.28.0",
-    "rimraf": "^6.0.1",
-    "tsup": "^8.5.0"
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^4.0.0",
+    "vite-tsconfig-paths": "^5.0.0",
+    "vue": "^3.5.16",
+    "vue-router": "^4.6.3",
+    "vue-tsc": "^2.0.0"
   },
   "peerDependencies": {
     "vue": "^3.0.0"
   },
   "scripts": {
-    "dev": "unbuild --stub",
-    "build": "unbuild",
-    "start": "tsx src/index.ts",
-    "watch": "tsx watch src/index.ts",
-    "lint": "eslint . --ext .ts",
-    "clean": "rimraf dist"
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "typecheck": "vue-tsc --noEmit"
   }
 }

package/src/components/auth/ForgotPasswordForm.vue

@@ -0,0 +1,97 @@
+<script lang="ts" setup>
+import { useAuth } from '@bagelink/auth'
+import { Btn, Icon, TextInput } from '@bagelink/vue'
+import { computed, ref } from 'vue'
+
+export interface ForgotPasswordTexts {
+	title?: string
+	emailLabel?: string
+	submitButton?: string
+	backToLogin?: string
+	emailSentTitle?: string
+	emailSentMessage?: string
+}
+
+interface Props {
+	emailSent?: boolean
+	useHebrewDefaults?: boolean
+	texts?: Partial<ForgotPasswordTexts>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	emailSent: false,
+	useHebrewDefaults: false,
+	texts: () => ({})
+})
+
+defineEmits<{
+	switchForm: [form: string]
+}>()
+
+const { forgotPassword } = useAuth()
+
+const email = ref<string>('')
+const internalEmailSent = ref(false)
+
+const showEmailSent = computed(() => props.emailSent || internalEmailSent.value)
+
+// Text configuration with conditional defaults
+const texts = computed(() => {
+	const hebrewDefaults = {
+		title: 'שכחתם סיסמה',
+		emailLabel: 'איימיל',
+		submitButton: 'שליחת איימיל איפוס',
+		backToLogin: 'חזרה להתחברות',
+		emailSentTitle: 'איימיל נשלח!',
+		emailSentMessage: 'יש לבדוק את תיבת הדואר שלכם לקישור איפוס הסיסמה'
+	}
+
+	const englishDefaults = {
+		title: 'Forgot Password',
+		emailLabel: 'Email',
+		submitButton: 'Send Reset Email',
+		backToLogin: 'Back to Login',
+		emailSentTitle: 'Email Sent!',
+		emailSentMessage: 'Check your inbox for a password reset link'
+	}
+
+	const defaults = props.useHebrewDefaults ? hebrewDefaults : englishDefaults
+
+	return {
+		title: props.texts?.title ?? defaults.title,
+		emailLabel: props.texts?.emailLabel ?? defaults.emailLabel,
+		submitButton: props.texts?.submitButton ?? defaults.submitButton,
+		backToLogin: props.texts?.backToLogin ?? defaults.backToLogin,
+		emailSentTitle: props.texts?.emailSentTitle ?? defaults.emailSentTitle,
+		emailSentMessage: props.texts?.emailSentMessage ?? defaults.emailSentMessage
+	}
+})
+
+const textDirection = computed(() => ({ 'auth-rtl': props.useHebrewDefaults }))
+
+async function handleRecoverPassword() {
+	await forgotPassword(email.value)
+	internalEmailSent.value = true
+}
+</script>
+
+<template>
+	<div v-if="showEmailSent" class="txt-center" :class="[textDirection]">
+		<Icon name="email" size="4" class="opacity-3 mb-1" />
+		<h1 class="txt20 bold mb-1">
+			{{ texts.emailSentTitle }}
+		</h1>
+		<p class="txt-center opacity-7">
+			{{ texts.emailSentMessage }}
+		</p>
+		<Btn thin flat class="txt-12 mt-2 underline" :value="texts.backToLogin" @click="$emit('switchForm', 'login')" />
+	</div>
+	<form v-else :class="textDirection" @submit.prevent="handleRecoverPassword">
+		<h1 class="txt20 bold txt-center mb-1">
+			{{ texts.title }}
+		</h1>
+		<TextInput v-model="email" :label="texts.emailLabel" autocomplete="email" type="email" />
+		<Btn type="submit" class="w-100 mt-05" :value="texts.submitButton" />
+		<Btn thin flat class="txt-12 mt-075 underline block" :value="texts.backToLogin" @click="$emit('switchForm', 'login')" />
+	</form>
+</template>

package/src/components/auth/LoginForm.vue

@@ -0,0 +1,257 @@
+<script lang="ts" setup>
+import { useAuth } from '@bagelink/auth'
+import { Btn, PasswordInput, TextInput } from '@bagelink/vue'
+import { computed, ref } from 'vue'
+
+export interface LoginTexts {
+	title?: string
+	emailLabel?: string
+	passwordLabel?: string
+	forgotPassword?: string
+	loginButton?: string
+	signupButton?: string
+	orText?: string
+	githubButton?: string
+	googleButton?: string
+	microsoftButton?: string
+	appleButton?: string
+	oktaButton?: string
+	facebookButton?: string
+}
+
+interface Props {
+	hideRegularLogin?: boolean
+	showForgotPassword?: boolean
+	showSignupButton?: boolean
+	github?: boolean
+	google?: boolean
+	microsoft?: boolean
+	apple?: boolean
+	okta?: boolean
+	facebook?: boolean
+	ssoOutline?: boolean
+	ssoShowValue?: boolean
+	ssoSize?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large'
+	ssoAlign?: boolean
+	ssoBrandBackground?: boolean
+	useHebrewDefaults?: boolean
+	errorState?: 'normal' | 'email-required' | 'email-invalid' | 'password-required' | 'invalid-credentials' | 'server-error'
+	texts?: Partial<LoginTexts>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	hideRegularLogin: false,
+	showForgotPassword: true,
+	showSignupButton: true,
+	github: true,
+	google: true,
+	microsoft: true,
+	apple: true,
+	okta: true,
+	facebook: true,
+	ssoOutline: true,
+	ssoShowValue: true,
+	ssoSize: undefined,
+	ssoAlign: false,
+	ssoBrandBackground: true,
+	useHebrewDefaults: false,
+	errorState: 'normal',
+	texts: () => ({})
+})
+
+defineEmits<{
+	switchForm: [form: string]
+}>()
+
+const { login, sso } = useAuth()
+const form = ref({
+	email: '',
+	password: '',
+})
+
+const internalError = ref<string>('')
+
+// Text configuration with conditional defaults
+const texts = computed(() => {
+	const hebrewDefaults = {
+		title: 'התחברות',
+		emailLabel: 'אימייל',
+		passwordLabel: 'סיסמה',
+		forgotPassword: 'שכחתם סיסמה?',
+		loginButton: 'התחברות',
+		signupButton: 'יצירת חשבון',
+		orText: 'או',
+		githubButton: 'התחברות עם GitHub',
+		googleButton: 'התחברות עם Google',
+		microsoftButton: 'התחברות עם Microsoft',
+		appleButton: 'התחברות עם Apple',
+		oktaButton: 'התחברות עם Okta',
+		facebookButton: 'התחברות עם Facebook'
+	}
+
+	const englishDefaults = {
+		title: 'Login In',
+		emailLabel: 'Email',
+		passwordLabel: 'Password',
+		forgotPassword: 'Forgot Password?',
+		loginButton: 'Login In',
+		signupButton: 'Create Account',
+		orText: 'or',
+		githubButton: 'Login with GitHub',
+		googleButton: 'Login with Google',
+		microsoftButton: 'Login with Microsoft',
+		appleButton: 'Login with Apple',
+		oktaButton: 'Login with Okta',
+		facebookButton: 'Login with Facebook'
+	}
+
+	const defaults = props.useHebrewDefaults ? hebrewDefaults : englishDefaults
+
+	return {
+		title: props.texts?.title ?? defaults.title,
+		emailLabel: props.texts?.emailLabel ?? defaults.emailLabel,
+		passwordLabel: props.texts?.passwordLabel ?? defaults.passwordLabel,
+		forgotPassword: props.texts?.forgotPassword ?? defaults.forgotPassword,
+		loginButton: props.texts?.loginButton ?? defaults.loginButton,
+		signupButton: props.texts?.signupButton ?? defaults.signupButton,
+		orText: props.texts?.orText ?? defaults.orText,
+		githubButton: props.texts?.githubButton ?? defaults.githubButton,
+		googleButton: props.texts?.googleButton ?? defaults.googleButton,
+		microsoftButton: props.texts?.microsoftButton ?? defaults.microsoftButton,
+		appleButton: props.texts?.appleButton ?? defaults.appleButton,
+		oktaButton: props.texts?.oktaButton ?? defaults.oktaButton,
+		facebookButton: props.texts?.facebookButton ?? defaults.facebookButton
+	}
+})
+
+const showAnySso = computed(() => props.github || props.google || props.microsoft
+	|| props.apple || props.okta || props.facebook
+)
+
+const textDirection = computed(() => ({ 'auth-rtl': props.useHebrewDefaults }))
+
+const error = computed(() => getDevError() || internalError.value)
+
+function getDevError() {
+	switch (props.errorState) {
+		case 'email-required': return props.useHebrewDefaults ? 'איימיל נדרש' : 'Email is required'
+		case 'email-invalid': return props.useHebrewDefaults ? 'יש להזין כתובת איימיל תקינה' : 'Please enter a valid email address'
+		case 'password-required': return props.useHebrewDefaults ? 'סיסמה נדרשת' : 'Password is required'
+		case 'invalid-credentials': return props.useHebrewDefaults ? 'איימיל או סיסמה לא נכונים' : 'Invalid email or password'
+		case 'server-error': return props.useHebrewDefaults ? 'ההתחברות נכשלה. אנא נסה שוב.' : 'Login failed. Please try again.'
+		default: return null
+	}
+}
+
+async function handleLogin() {
+	// Clear any previous internal errors
+	internalError.value = ''
+
+	// Development error states don't need actual form submission
+	if (props.errorState !== 'normal') {
+		return
+	}
+
+	const { message } = await login(form.value)
+	internalError.value = message as string
+}
+</script>
+
+<template>
+	<form :class="textDirection" @submit.prevent="handleLogin">
+		<h1 class="txt20 bold txt-center mb-1">
+			{{ texts.title }}
+		</h1>
+
+		<!-- Regular Login Form - Hidden when hideRegularLogin is true -->
+		<template v-if="!props.hideRegularLogin">
+			<TextInput v-model="form.email" type="email" :label="texts.emailLabel" autocomplete="email" />
+			<PasswordInput v-model="form.password" :label="texts.passwordLabel" />
+
+			<Btn
+				v-if="props.showForgotPassword" thin flat class="txt-12 mt-075 underline block"
+				:value="texts.forgotPassword" @click="$emit('switchForm', 'forgot-password')"
+			/>
+			<Btn type="submit" class="w-100 mt-1" :value="texts.loginButton" />
+			<Btn
+				v-if="props.showSignupButton" outline color="primary" class="w-100 mt-05" :value="texts.signupButton"
+				@click="$emit('switchForm', 'signup')"
+			/>
+		</template>
+
+		<!-- SSO Section -->
+		<div v-if="showAnySso">
+			<div v-if="!props.hideRegularLogin" class="flex gap-1 opacity-6">
+				<div class="line" />
+				<p class="txt-center my-05">
+					{{ texts.orText }}
+				</p>
+				<div class="line" />
+			</div>
+
+			<div
+				class="gap-05"
+				:class="{ 'grid grid-wrap-1': props.ssoShowValue, 'flex justify-content-center gap-05 flex-wrap': !props.ssoShowValue }"
+			>
+				<Btn
+					v-if="props.github" v-tooltip="!props.ssoShowValue ? texts.githubButton : undefined"
+					:outline="props.ssoOutline" :full-width="props.ssoAlign"
+					:align-txt="props.ssoAlign ? 'start' : undefined"
+					:style="props.ssoOutline ? 'color: #24292F;' : `color: #FFFFFF; ${props.ssoBrandBackground ? 'background: #24292F;' : ''}`"
+					icon="github" :class="{ 'px-075': props.ssoAlign ? 'px-075' : '' }"
+					:value="props.ssoShowValue ? texts.githubButton : undefined" :size="props.ssoSize"
+					@click="sso.github.redirect()"
+				/>
+				<Btn
+					v-if="props.google" v-tooltip="!props.ssoShowValue ? texts.googleButton : undefined"
+					:outline="props.ssoOutline" :full-width="props.ssoAlign"
+					:align-txt="props.ssoAlign ? 'start' : undefined"
+					:style="props.ssoOutline ? 'color: #DB4437;' : `color: #FFFFFF; ${props.ssoBrandBackground ? 'background: #DB4437;' : ''}`"
+					icon="google" :class="{ 'px-075': props.ssoAlign ? 'px-075' : '' }"
+					:value="props.ssoShowValue ? texts.googleButton : undefined" :size="props.ssoSize"
+					@click="sso.google.redirect()"
+				/>
+				<Btn
+					v-if="props.microsoft" v-tooltip="!props.ssoShowValue ? texts.microsoftButton : undefined"
+					:outline="props.ssoOutline" :full-width="props.ssoAlign"
+					:align-txt="props.ssoAlign ? 'start' : undefined"
+					:style="props.ssoOutline ? 'color: #2F2FEE;' : `color: #FFFFFF; ${props.ssoBrandBackground ? 'background: #2F2FEE;' : ''}`"
+					icon="microsoft" :class="{ 'px-075': props.ssoAlign ? 'px-075' : '' }"
+					:value="props.ssoShowValue ? texts.microsoftButton : undefined" :size="props.ssoSize"
+					@click="sso.microsoft.redirect()"
+				/>
+				<Btn
+					v-if="props.apple" v-tooltip="!props.ssoShowValue ? texts.appleButton : undefined"
+					:outline="props.ssoOutline" :full-width="props.ssoAlign"
+					:align-txt="props.ssoAlign ? 'start' : undefined"
+					:style="props.ssoOutline ? 'color: #000000;' : `color: #FFFFFF; ${props.ssoBrandBackground ? 'background: #000000;' : ''}`"
+					icon="apple" :class="{ 'px-075': props.ssoAlign ? 'px-075' : '' }"
+					:value="props.ssoShowValue ? texts.appleButton : undefined" :size="props.ssoSize"
+					@click="sso.apple.redirect()"
+				/>
+				<Btn
+					v-if="props.okta" v-tooltip="!props.ssoShowValue ? texts.oktaButton : undefined"
+					:outline="props.ssoOutline" :full-width="props.ssoAlign"
+					:align-txt="props.ssoAlign ? 'start' : undefined"
+					:style="props.ssoOutline ? 'color: #FFB600;' : `color: #FFFFFF; ${props.ssoBrandBackground ? 'background: #FFB600;' : ''}`"
+					icon="sun" :class="{ 'px-075': props.ssoAlign ? 'px-075' : '' }"
+					:value="props.ssoShowValue ? texts.oktaButton : undefined" :size="props.ssoSize"
+					@click="sso.okta.redirect()"
+				/>
+				<Btn
+					v-if="props.facebook" v-tooltip="!props.ssoShowValue ? texts.facebookButton : undefined"
+					:outline="props.ssoOutline" :full-width="props.ssoAlign"
+					:align-txt="props.ssoAlign ? 'start' : undefined"
+					:style="props.ssoOutline ? 'color: #1877F3;' : `color: #FFFFFF; ${props.ssoBrandBackground ? 'background: #1877F3;' : ''}`"
+					icon="facebook" :class="{ 'px-075': props.ssoAlign ? 'px-075' : '' }"
+					:value="props.ssoShowValue ? texts.facebookButton : undefined" :size="props.ssoSize"
+					@click="sso.facebook.redirect()"
+				/>
+			</div>
+		</div>
+
+		<p v-if="error" class="txt-center color-red txt-12 mt-1">
+			{{ error }}
+		</p>
+	</form>
+</template>

package/src/components/auth/ResetPasswordForm.vue

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