@revenexx/cover 0.1.0

package/app/components/auth/AuthForgotPasswordPanel.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import type { ForgotPasswordFormState } from "../../interfaces/auth";
+
+/**
+ * Password recovery request panel in the focus-page design. Requests a
+ * recovery mail via the auth store; the consuming page handles success
+ * feedback via the success emit.
+ */
+const emit = defineEmits<{
+	(e: "success"): void;
+}>();
+
+const { t } = useI18n();
+const localePath = useLocalePath();
+const auth = useAuthStore();
+const { loading, error } = storeToRefs(auth);
+
+const state = reactive<ForgotPasswordFormState>({
+	email: "",
+});
+
+const { validate } = useFormValidation<ForgotPasswordFormState>("forgotPassword");
+
+async function onSubmit(): Promise<void> {
+	try {
+		const url = new URL(localePath("/reset-password"), window.location.origin).toString();
+		await auth.requestRecovery(state.email, url);
+		emit("success");
+	}
+	catch {
+		// error is set on the store and rendered by UAlert
+	}
+}
+</script>
+
+<template>
+	<div class="bg-elevated py-6 px-8 rounded-lg">
+		<h2 class="text-xl font-semibold text-highlighted">
+			{{ t('auth.forgotPassword.title') }}
+		</h2>
+
+		<UForm
+			:state="state"
+			:validate="validate"
+			class="space-y-4 pt-6"
+			@submit="onSubmit"
+		>
+			<UFormField
+				:label="t('auth.forgotPassword.fields.email')"
+				name="email"
+				required
+			>
+				<UInput
+					v-model="state.email"
+					type="email"
+					autocomplete="email"
+					class="w-full"
+					:placeholder="t('auth.forgotPassword.fields.emailPlaceholder')"
+				/>
+			</UFormField>
+
+			<UAlert
+				v-if="error"
+				color="error"
+				variant="soft"
+				:title="t(error)"
+			/>
+
+			<UButton
+				type="submit"
+				color="primary"
+				variant="solid"
+				block
+				:loading="loading"
+				:label="t('auth.forgotPassword.submit')"
+			/>
+
+			<div class="text-center">
+				<NuxtLink
+					:to="localePath('/login')"
+					class="text-sm text-primary hover:underline"
+				>
+					{{ t('auth.forgotPassword.backToLogin') }}
+				</NuxtLink>
+			</div>
+		</UForm>
+	</div>
+</template>

package/app/components/auth/AuthLoginPanel.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import type { LoginFormState } from "../../interfaces/auth";
+
+/**
+ * "I already have an account" panel of the split login page. Owns the login
+ * form against the auth store; the consuming page decides where to navigate
+ * after a successful sign-in via the redirect emit.
+ */
+const emit = defineEmits<{
+	(e: "success"): void;
+}>();
+
+const { t } = useI18n();
+const localePath = useLocalePath();
+const auth = useAuthStore();
+const { loading, error } = storeToRefs(auth);
+
+const state = reactive<LoginFormState>({
+	email: "",
+	password: "",
+});
+
+const { validate } = useFormValidation<LoginFormState>("login");
+
+async function onSubmit(): Promise<void> {
+	try {
+		await auth.login({
+			email: state.email,
+			password: state.password,
+		});
+		emit("success");
+	}
+	catch {
+		// error is set on the store and rendered by UAlert
+	}
+}
+</script>
+
+<template>
+	<div class="bg-elevated py-6 px-8 rounded-lg">
+		<h2 class="text-xl font-semibold text-highlighted">
+			{{ t('auth.login.existingCustomer') }}
+		</h2>
+
+		<UForm
+			:state="state"
+			:validate="validate"
+			class="space-y-4 pt-6"
+			@submit="onSubmit"
+		>
+			<UFormField
+				:label="t('auth.login.fields.email')"
+				name="email"
+				required
+			>
+				<UInput
+					v-model="state.email"
+					type="email"
+					autocomplete="email"
+					class="w-full"
+					:placeholder="t('auth.login.fields.emailPlaceholder')"
+				/>
+			</UFormField>
+
+			<UFormField
+				:label="t('auth.login.fields.password')"
+				name="password"
+				required
+			>
+				<UiFormsPasswordInput
+					v-model="state.password"
+					autocomplete="current-password"
+					:placeholder="t('auth.login.fields.passwordPlaceholder')"
+				/>
+			</UFormField>
+
+			<UAlert
+				v-if="error"
+				color="error"
+				variant="soft"
+				:title="t(error)"
+			/>
+
+			<UButton
+				type="submit"
+				color="primary"
+				variant="solid"
+				block
+				:loading="loading"
+				:label="t('auth.login.submit')"
+			/>
+
+			<div class="text-center">
+				<NuxtLink
+					:to="localePath('/forgot-password')"
+					class="text-sm text-primary hover:underline"
+				>
+					{{ t('auth.login.forgotPassword') }}
+				</NuxtLink>
+			</div>
+		</UForm>
+	</div>
+</template>

package/app/components/auth/AuthLoginTeaser.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+/** "I already have an account" panel of the split register page. */
+const { t } = useI18n();
+const localePath = useLocalePath();
+</script>
+
+<template>
+	<div class="border border-default py-6 px-8 rounded-lg flex flex-col self-start">
+		<h2 class="text-xl font-semibold text-highlighted">
+			{{ t('auth.login.existingCustomer') }}
+		</h2>
+		<p class="pt-6 text-sm text-muted flex-1">
+			{{ t('auth.register.loginTeaserText') }}
+		</p>
+		<UButton
+			:to="localePath('/login')"
+			color="neutral"
+			variant="outline"
+			block
+			class="mt-6"
+			:label="t('auth.login.submit')"
+		/>
+	</div>
+</template>

package/app/components/auth/AuthPageHeader.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+/** Page intro of the focus auth pages — mirrors the login hero typography. */
+defineProps<{
+	title: string;
+	description?: string;
+}>();
+</script>
+
+<template>
+	<div class="pt-10 flex flex-col">
+		<h1 class="text-3xl font-semibold text-highlighted pb-3">
+			{{ title }}
+		</h1>
+		<p
+			v-if="description"
+			class="text-muted"
+		>
+			{{ description }}
+		</p>
+	</div>
+</template>

package/app/components/auth/AuthRegisterPanel.vue

@@ -0,0 +1,431 @@
+<script setup lang="ts">
+import { COUNTRIES } from "../../config/countries";
+import { required } from "../../validations/required";
+import { zipCode } from "../../validations/zipCode";
+import type { FormError } from "@nuxt/ui";
+
+import type { RegisterFormState, RegistrationMode, RegistrationProfile } from "../../interfaces/auth";
+
+/**
+ * B2B registration panel (BRW/IS8 pattern): two paths — new customers
+ * register their company with billing address, existing customers link
+ * their access via customer number. Owns the register + auto-login flow;
+ * the consuming page handles success feedback and navigation.
+ */
+const emit = defineEmits<{
+	(e: "success"): void;
+}>();
+
+const { icon } = useIcons();
+const { t } = useI18n();
+const auth = useAuthStore();
+const { loading, error } = storeToRefs(auth);
+
+const state = reactive<RegisterFormState>({
+	mode: "new",
+	company: "",
+	vatId: "",
+	customerNumber: "",
+	street: "",
+	streetNumber: "",
+	zip: "",
+	city: "",
+	country: "Deutschland",
+	salutation: "",
+	firstName: "",
+	lastName: "",
+	jobTitle: "",
+	phone: "",
+	email: "",
+	password: "",
+	passwordConfirm: "",
+	acceptTerms: false,
+});
+
+const modes: { value: RegistrationMode; icon: string }[] = [
+	{ value: "new", icon: "company" },
+	{ value: "existing", icon: "key" },
+];
+
+const salutationItems = computed(() =>
+	(["mr", "ms", "none"] as const).map(value => ({
+		value,
+		label: t(`auth.register.fields2.salutations.${value}`),
+	})));
+
+const countryItems = COUNTRIES;
+
+/* ---- validation: static base + mode-dependent fields ------------------- */
+const { validate: validateBase } = useFormValidation<RegisterFormState>("register");
+
+function validate(formState: RegisterFormState): FormError[] {
+	const errors = validateBase(formState);
+	const push = (name: string, key: string | null) => {
+		if (key !== null) {
+			errors.push({ name, message: t(key) });
+		}
+	};
+	if (formState.mode === "new") {
+		push("street", required(formState.street));
+		push("streetNumber", required(formState.streetNumber));
+		push("zip", required(formState.zip) ?? zipCode(formState.zip));
+		push("city", required(formState.city));
+		push("country", required(formState.country));
+	}
+	else {
+		push("customerNumber", required(formState.customerNumber));
+	}
+	return errors;
+}
+
+function buildProfile(): RegistrationProfile {
+	return {
+		mode: state.mode,
+		company: state.company.trim(),
+		...(state.vatId.trim() ? { vatId: state.vatId.trim() } : {}),
+		...(state.mode === "existing" && state.customerNumber.trim()
+			? { customerNumber: state.customerNumber.trim() }
+			: {}),
+		...(state.mode === "new"
+			? {
+					address: {
+						street: state.street.trim(),
+						streetNumber: state.streetNumber.trim(),
+						zip: state.zip.trim(),
+						city: state.city.trim(),
+						country: state.country,
+					},
+				}
+			: {}),
+		...(state.salutation ? { salutation: state.salutation } : {}),
+		...(state.jobTitle.trim() ? { jobTitle: state.jobTitle.trim() } : {}),
+		...(state.phone.trim() ? { phone: state.phone.trim() } : {}),
+	};
+}
+
+async function onSubmit(): Promise<void> {
+	try {
+		await auth.register({
+			email: state.email,
+			password: state.password,
+			name: `${state.firstName} ${state.lastName}`.trim(),
+			profile: buildProfile(),
+		});
+		await auth.login({
+			email: state.email,
+			password: state.password,
+		});
+		emit("success");
+	}
+	catch {
+		// error is set on the store and rendered by UAlert
+	}
+}
+</script>
+
+<template>
+	<div class="bg-elevated py-6 px-6 sm:px-8 rounded-lg">
+		<h2 class="text-xl font-semibold text-highlighted">
+			{{ t('auth.register.title') }}
+		</h2>
+
+		<!-- Path selection (new vs. existing customer) -->
+		<fieldset class="pt-6">
+			<legend class="text-sm font-medium text-highlighted">
+				{{ t('auth.register.modes.title') }}
+			</legend>
+			<div class="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-3">
+				<button
+					v-for="option in modes"
+					:key="option.value"
+					type="button"
+					tabindex="0"
+					class="text-left rounded-lg border p-4 transition-colors cursor-pointer"
+					:class="state.mode === option.value
+						? 'border-(--ui-primary) bg-primary/5 ring-1 ring-(--ui-primary)'
+						: 'border-(--ui-border) hover:border-(--ui-border-accented)'"
+					:aria-pressed="state.mode === option.value"
+					@click="state.mode = option.value"
+				>
+					<span class="flex items-center gap-2">
+						<UIcon
+							:name="icon(option.icon)"
+							class="size-5"
+							:class="state.mode === option.value ? 'text-primary' : 'text-muted'"
+						/>
+						<span class="text-sm font-semibold text-highlighted">
+							{{ t(`auth.register.modes.${option.value}.title`) }}
+						</span>
+					</span>
+					<span class="mt-1.5 block text-xs text-muted">
+						{{ t(`auth.register.modes.${option.value}.description`) }}
+					</span>
+				</button>
+			</div>
+		</fieldset>
+
+		<UForm
+			:state="state"
+			:validate="validate"
+			class="space-y-7 pt-7"
+			@submit="onSubmit"
+		>
+			<!-- Company -->
+			<section class="space-y-4">
+				<h3 class="text-xs font-semibold uppercase tracking-wide text-muted">
+					{{ t('auth.register.sections.company') }}
+				</h3>
+				<UFormField
+					:label="t('auth.register.fields.company')"
+					name="company"
+					required
+					:hint="t('auth.register.companyRequiredHint')"
+				>
+					<UInput
+						v-model="state.company"
+						autocomplete="organization"
+						class="w-full"
+					/>
+				</UFormField>
+				<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+					<UFormField
+						v-if="state.mode === 'existing'"
+						:label="t('auth.register.fields2.customerNumber')"
+						name="customerNumber"
+						required
+						:hint="t('auth.register.fields2.customerNumberHint')"
+					>
+						<UInput
+							v-model="state.customerNumber"
+							class="w-full"
+						/>
+					</UFormField>
+					<UFormField
+						:label="t('auth.register.fields2.vatId')"
+						name="vatId"
+						:hint="t('auth.register.fields2.vatIdHint')"
+					>
+						<UInput
+							v-model="state.vatId"
+							class="w-full"
+							placeholder="DE123456789"
+						/>
+					</UFormField>
+				</div>
+			</section>
+
+			<!-- Billing address (new customers) -->
+			<section
+				v-if="state.mode === 'new'"
+				class="space-y-4"
+			>
+				<h3 class="text-xs font-semibold uppercase tracking-wide text-muted">
+					{{ t('auth.register.sections.address') }}
+				</h3>
+				<div class="grid grid-cols-3 gap-4">
+					<UFormField
+						:label="t('auth.register.fields2.street')"
+						name="street"
+						required
+						class="col-span-2"
+					>
+						<UInput
+							v-model="state.street"
+							autocomplete="address-line1"
+							class="w-full"
+						/>
+					</UFormField>
+					<UFormField
+						:label="t('auth.register.fields2.streetNumber')"
+						name="streetNumber"
+						required
+					>
+						<UInput
+							v-model="state.streetNumber"
+							autocomplete="address-line2"
+							class="w-full"
+						/>
+					</UFormField>
+				</div>
+				<div class="grid grid-cols-3 gap-4">
+					<UFormField
+						:label="t('auth.register.fields2.zip')"
+						name="zip"
+						required
+					>
+						<UInput
+							v-model="state.zip"
+							autocomplete="postal-code"
+							class="w-full"
+						/>
+					</UFormField>
+					<UFormField
+						:label="t('auth.register.fields2.city')"
+						name="city"
+						required
+						class="col-span-2"
+					>
+						<UInput
+							v-model="state.city"
+							autocomplete="address-level2"
+							class="w-full"
+						/>
+					</UFormField>
+				</div>
+				<UFormField
+					:label="t('auth.register.fields2.country')"
+					name="country"
+					required
+				>
+					<USelect
+						v-model="state.country"
+						:items="countryItems"
+						class="w-full"
+					/>
+				</UFormField>
+			</section>
+
+			<!-- Contact person -->
+			<section class="space-y-4">
+				<h3 class="text-xs font-semibold uppercase tracking-wide text-muted">
+					{{ t('auth.register.sections.contact') }}
+				</h3>
+				<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+					<UFormField
+						:label="t('auth.register.fields2.salutation')"
+						name="salutation"
+					>
+						<USelect
+							v-model="state.salutation"
+							:items="salutationItems"
+							class="w-full"
+						/>
+					</UFormField>
+					<UFormField
+						:label="t('auth.register.fields.firstName')"
+						name="firstName"
+						required
+					>
+						<UInput
+							v-model="state.firstName"
+							autocomplete="given-name"
+							class="w-full"
+						/>
+					</UFormField>
+					<UFormField
+						:label="t('auth.register.fields.lastName')"
+						name="lastName"
+						required
+					>
+						<UInput
+							v-model="state.lastName"
+							autocomplete="family-name"
+							class="w-full"
+						/>
+					</UFormField>
+				</div>
+				<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+					<UFormField
+						:label="t('auth.register.fields2.jobTitle')"
+						name="jobTitle"
+						:hint="t('auth.register.fields2.jobTitleHint')"
+					>
+						<UInput
+							v-model="state.jobTitle"
+							autocomplete="organization-title"
+							class="w-full"
+						/>
+					</UFormField>
+					<UFormField
+						:label="t('auth.register.fields2.phone')"
+						name="phone"
+						:hint="t('auth.register.fields2.phoneHint')"
+					>
+						<UInput
+							v-model="state.phone"
+							type="tel"
+							autocomplete="tel"
+							class="w-full"
+						/>
+					</UFormField>
+				</div>
+			</section>
+
+			<!-- Account credentials -->
+			<section class="space-y-4">
+				<h3 class="text-xs font-semibold uppercase tracking-wide text-muted">
+					{{ t('auth.register.sections.account') }}
+				</h3>
+				<UFormField
+					:label="t('auth.register.fields.email')"
+					name="email"
+					required
+				>
+					<UInput
+						v-model="state.email"
+						type="email"
+						autocomplete="email"
+						class="w-full"
+						:placeholder="t('auth.register.fields.emailPlaceholder')"
+					/>
+				</UFormField>
+				<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+					<UFormField
+						:label="t('auth.register.fields.password')"
+						name="password"
+						required
+					>
+						<UiFormsPasswordInput
+							v-model="state.password"
+							autocomplete="new-password"
+							:placeholder="t('auth.register.fields.passwordPlaceholder')"
+							show-strength
+						/>
+					</UFormField>
+					<UFormField
+						:label="t('auth.register.fields.passwordConfirm')"
+						name="passwordConfirm"
+						required
+					>
+						<UiFormsPasswordInput
+							v-model="state.passwordConfirm"
+							autocomplete="new-password"
+							:placeholder="t('auth.register.fields.passwordConfirmPlaceholder')"
+						/>
+					</UFormField>
+				</div>
+			</section>
+
+			<UFormField name="acceptTerms">
+				<UCheckbox
+					v-model="state.acceptTerms"
+					:label="t('auth.register.fields.acceptTerms')"
+					:description="t('auth.register.fields.acceptTermsDescription')"
+				/>
+			</UFormField>
+
+			<UAlert
+				color="info"
+				variant="soft"
+				:icon="icon('info')"
+				:description="t('auth.register.vettingNotice')"
+			/>
+
+			<UAlert
+				v-if="error"
+				color="error"
+				variant="soft"
+				:title="t(error)"
+			/>
+
+			<UButton
+				type="submit"
+				color="primary"
+				variant="solid"
+				block
+				:loading="loading"
+				:label="t('auth.register.submit')"
+			/>
+		</UForm>
+	</div>
+</template>

package/app/components/auth/AuthRegisterTeaser.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+/** "I am a new customer" panel of the split login page. */
+const { t } = useI18n();
+const localePath = useLocalePath();
+</script>
+
+<template>
+	<div class="border border-default py-6 px-8 rounded-lg flex flex-col">
+		<h2 class="text-xl font-semibold text-highlighted">
+			{{ t('auth.login.newCustomer') }}
+		</h2>
+		<p class="pt-6 text-sm text-muted flex-1">
+			{{ t('auth.login.newCustomerText') }}
+		</p>
+		<UButton
+			:to="localePath('/register')"
+			color="neutral"
+			variant="outline"
+			block
+			class="mt-6"
+			:label="t('auth.login.registerCta')"
+		/>
+	</div>
+</template>