feat: add team invitation acceptance flow with email link routing
Implement end-to-end invitation acceptance: neutral entry route validates token and routes to register (new users), login (existing users), or auto-accepts (authenticated users). Handles 2FA token survival via session, email case-insensitive matching, and dedicated error pages. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
31
resources/js/pages/auth/InvitationError.vue
Normal file
31
resources/js/pages/auth/InvitationError.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
import { Head } from '@inertiajs/vue3';
|
||||
import TextLink from '@/components/TextLink.vue';
|
||||
import AuthBase from '@/layouts/AuthLayout.vue';
|
||||
|
||||
type Props = {
|
||||
title: string;
|
||||
message: string;
|
||||
homeUrl: string;
|
||||
};
|
||||
|
||||
defineProps<Props>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AuthBase
|
||||
:title="title"
|
||||
:description="message"
|
||||
>
|
||||
<Head :title="title" />
|
||||
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<TextLink
|
||||
:href="homeUrl"
|
||||
class="underline underline-offset-4"
|
||||
>
|
||||
Retour à l'accueil
|
||||
</TextLink>
|
||||
</div>
|
||||
</AuthBase>
|
||||
</template>
|
||||
@@ -12,11 +12,21 @@ import { register } from '@/routes';
|
||||
import { store } from '@/routes/login';
|
||||
import { request } from '@/routes/password';
|
||||
|
||||
defineProps<{
|
||||
type Props = {
|
||||
status?: string;
|
||||
canResetPassword: boolean;
|
||||
canRegister: boolean;
|
||||
}>();
|
||||
invitation?: string;
|
||||
};
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
status: undefined,
|
||||
invitation: undefined,
|
||||
});
|
||||
|
||||
const registerUrl = props.invitation
|
||||
? `${register()}?invitation=${props.invitation}`
|
||||
: register();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -39,6 +49,8 @@ defineProps<{
|
||||
v-slot="{ errors, processing }"
|
||||
class="flex flex-col gap-6"
|
||||
>
|
||||
<input v-if="invitation" type="hidden" name="invitation" :value="invitation" />
|
||||
|
||||
<div class="grid gap-6">
|
||||
<div class="grid gap-2">
|
||||
<Label for="email">Email address</Label>
|
||||
@@ -103,7 +115,7 @@ defineProps<{
|
||||
v-if="canRegister"
|
||||
>
|
||||
Don't have an account?
|
||||
<TextLink :href="register()" :tabindex="5">Sign up</TextLink>
|
||||
<TextLink :href="registerUrl" :tabindex="5">Sign up</TextLink>
|
||||
</div>
|
||||
</Form>
|
||||
</AuthBase>
|
||||
|
||||
@@ -9,14 +9,28 @@ import { Spinner } from '@/components/ui/spinner';
|
||||
import AuthBase from '@/layouts/AuthLayout.vue';
|
||||
import { login } from '@/routes';
|
||||
import { store } from '@/routes/register';
|
||||
|
||||
type Props = {
|
||||
invitation?: string;
|
||||
invitationEmail?: string;
|
||||
};
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
invitation: undefined,
|
||||
invitationEmail: undefined,
|
||||
});
|
||||
|
||||
const loginUrl = props.invitation
|
||||
? `${login()}?invitation=${props.invitation}`
|
||||
: login();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AuthBase
|
||||
title="Create an account"
|
||||
description="Enter your details below to create your account"
|
||||
:title="invitation ? 'Rejoindre l\'espace de travail' : 'Create an account'"
|
||||
:description="invitation ? 'Créez votre compte pour accepter l\'invitation' : 'Enter your details below to create your account'"
|
||||
>
|
||||
<Head title="Register" />
|
||||
<Head :title="invitation ? 'Rejoindre l\'espace de travail' : 'Register'" />
|
||||
|
||||
<Form
|
||||
v-bind="store.form()"
|
||||
@@ -24,6 +38,8 @@ import { store } from '@/routes/register';
|
||||
v-slot="{ errors, processing }"
|
||||
class="flex flex-col gap-6"
|
||||
>
|
||||
<input v-if="invitation" type="hidden" name="invitation" :value="invitation" />
|
||||
|
||||
<div class="grid gap-6">
|
||||
<div class="grid gap-2">
|
||||
<Label for="name">Name</Label>
|
||||
@@ -49,7 +65,9 @@ import { store } from '@/routes/register';
|
||||
:tabindex="2"
|
||||
autocomplete="email"
|
||||
name="email"
|
||||
placeholder="email@example.com"
|
||||
:placeholder="invitationEmail ?? 'email@example.com'"
|
||||
:value="invitationEmail"
|
||||
:readonly="!!invitationEmail"
|
||||
/>
|
||||
<InputError :message="errors.email" />
|
||||
</div>
|
||||
@@ -97,7 +115,7 @@ import { store } from '@/routes/register';
|
||||
<div class="text-center text-sm text-muted-foreground">
|
||||
Already have an account?
|
||||
<TextLink
|
||||
:href="login()"
|
||||
:href="loginUrl"
|
||||
class="underline underline-offset-4"
|
||||
:tabindex="6"
|
||||
>Log in</TextLink
|
||||
|
||||
@@ -5,9 +5,9 @@ Bonjour,
|
||||
|
||||
Vous êtes invité(e) à rejoindre le cabinet **{{ $workspaceName }}** en tant que **{{ $roleLabel }}**.
|
||||
|
||||
Cliquez sur le bouton ci-dessous pour créer votre compte et rejoindre l'équipe.
|
||||
Cliquez sur le bouton ci-dessous pour rejoindre l'équipe.
|
||||
|
||||
<x-mail::button :url="$registerUrl" color="primary">
|
||||
<x-mail::button :url="$acceptUrl" color="primary">
|
||||
Rejoindre l'équipe
|
||||
</x-mail::button>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user