298 lines
9.3 KiB
Vue
298 lines
9.3 KiB
Vue
<script setup lang="ts">
|
|
import { z } from 'zod'
|
|
|
|
useSeoMeta({
|
|
title: 'Inscription - Wibx Tour Layer 2',
|
|
description: 'Créez votre compte Wibx Tour et commencez à déployer des connexions réseau Layer 2 en quelques minutes'
|
|
})
|
|
|
|
const schema = z.object({
|
|
firstName: z.string().min(2, 'Le prénom doit contenir au moins 2 caractères'),
|
|
lastName: z.string().min(2, 'Le nom doit contenir au moins 2 caractères'),
|
|
company: z.string().min(2, 'Le nom de l\'entreprise doit contenir au moins 2 caractères'),
|
|
email: z.string().email('Email invalide'),
|
|
password: z.string().min(8, 'Le mot de passe doit contenir au moins 8 caractères'),
|
|
confirmPassword: z.string(),
|
|
terms: z.boolean().refine(val => val === true, 'Vous devez accepter les conditions d\'utilisation')
|
|
}).refine((data) => data.password === data.confirmPassword, {
|
|
message: 'Les mots de passe ne correspondent pas',
|
|
path: ['confirmPassword']
|
|
})
|
|
|
|
type Schema = z.output<typeof schema>
|
|
|
|
const state = reactive({
|
|
firstName: '',
|
|
lastName: '',
|
|
company: '',
|
|
email: '',
|
|
password: '',
|
|
confirmPassword: '',
|
|
terms: false
|
|
})
|
|
|
|
const pending = ref(false)
|
|
const success = ref(false)
|
|
const error = ref('')
|
|
|
|
async function onSubmit(_event: Schema) {
|
|
try {
|
|
pending.value = true
|
|
error.value = ''
|
|
|
|
// Simulation de l'inscription
|
|
await new Promise(resolve => setTimeout(resolve, 1500))
|
|
|
|
success.value = true
|
|
|
|
// Redirection après succès
|
|
setTimeout(() => {
|
|
navigateTo('/login')
|
|
}, 2000)
|
|
} catch (_err) {
|
|
error.value = 'Une erreur s\'est produite lors de l\'inscription'
|
|
} finally {
|
|
pending.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen flex">
|
|
<!-- Left side - Form -->
|
|
<div class="flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-8">
|
|
<div class="max-w-md w-full space-y-8">
|
|
<div class="text-center">
|
|
<h1 class="text-3xl font-bold tracking-tight">
|
|
Créer un compte
|
|
</h1>
|
|
<p class="mt-2 text-gray-600 dark:text-gray-400">
|
|
Rejoignez Wibx Tour et déployez votre première connexion Layer 2
|
|
</p>
|
|
</div>
|
|
|
|
<UAlert
|
|
v-if="success"
|
|
icon="i-lucide-check-circle"
|
|
color="green"
|
|
variant="soft"
|
|
title="Compte créé avec succès !"
|
|
description="Vous allez être redirigé vers la page de connexion..."
|
|
class="mb-4"
|
|
/>
|
|
|
|
<UAlert
|
|
v-else-if="error"
|
|
icon="i-lucide-alert-circle"
|
|
color="red"
|
|
variant="soft"
|
|
:title="error"
|
|
class="mb-4"
|
|
/>
|
|
|
|
<UForm
|
|
v-if="!success"
|
|
:schema="schema"
|
|
:state="state"
|
|
class="space-y-6"
|
|
@submit="onSubmit"
|
|
>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<UFormGroup label="Prénom" name="firstName" required>
|
|
<UInput
|
|
v-model="state.firstName"
|
|
placeholder="John"
|
|
icon="i-lucide-user"
|
|
size="lg"
|
|
/>
|
|
</UFormGroup>
|
|
|
|
<UFormGroup label="Nom" name="lastName" required>
|
|
<UInput
|
|
v-model="state.lastName"
|
|
placeholder="Doe"
|
|
icon="i-lucide-user"
|
|
size="lg"
|
|
/>
|
|
</UFormGroup>
|
|
</div>
|
|
|
|
<UFormGroup label="Entreprise" name="company" required>
|
|
<UInput
|
|
v-model="state.company"
|
|
placeholder="Mon Entreprise"
|
|
icon="i-lucide-building"
|
|
size="lg"
|
|
/>
|
|
</UFormGroup>
|
|
|
|
<UFormGroup label="Email" name="email" required>
|
|
<UInput
|
|
v-model="state.email"
|
|
type="email"
|
|
placeholder="votre@email.com"
|
|
icon="i-lucide-mail"
|
|
size="lg"
|
|
/>
|
|
</UFormGroup>
|
|
|
|
<UFormGroup label="Mot de passe" name="password" required>
|
|
<UInput
|
|
v-model="state.password"
|
|
type="password"
|
|
placeholder="••••••••"
|
|
icon="i-lucide-lock"
|
|
size="lg"
|
|
/>
|
|
</UFormGroup>
|
|
|
|
<UFormGroup label="Confirmer le mot de passe" name="confirmPassword" required>
|
|
<UInput
|
|
v-model="state.confirmPassword"
|
|
type="password"
|
|
placeholder="••••••••"
|
|
icon="i-lucide-lock"
|
|
size="lg"
|
|
/>
|
|
</UFormGroup>
|
|
|
|
<UFormGroup name="terms" required>
|
|
<UCheckbox
|
|
v-model="state.terms"
|
|
name="terms"
|
|
>
|
|
<template #label>
|
|
<span class="text-sm">
|
|
J'accepte les
|
|
<ULink to="/terms" class="text-primary hover:text-primary-600">
|
|
conditions d'utilisation
|
|
</ULink>
|
|
et la
|
|
<ULink to="/privacy" class="text-primary hover:text-primary-600">
|
|
politique de confidentialité
|
|
</ULink>
|
|
</span>
|
|
</template>
|
|
</UCheckbox>
|
|
</UFormGroup>
|
|
|
|
<UButton
|
|
type="submit"
|
|
:loading="pending"
|
|
size="lg"
|
|
block
|
|
>
|
|
Créer mon compte
|
|
</UButton>
|
|
</UForm>
|
|
|
|
<div v-if="!success" class="text-center">
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">
|
|
Déjà un compte ?
|
|
<ULink
|
|
to="/login"
|
|
class="font-medium text-primary hover:text-primary-600"
|
|
>
|
|
Se connecter
|
|
</ULink>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Social Signup (Optional) -->
|
|
<div v-if="!success" class="mt-6">
|
|
<div class="relative">
|
|
<div class="absolute inset-0 flex items-center">
|
|
<div class="w-full border-t border-gray-300 dark:border-gray-600" />
|
|
</div>
|
|
<div class="relative flex justify-center text-sm">
|
|
<span class="px-2 bg-white dark:bg-gray-900 text-gray-500">
|
|
Ou s'inscrire avec
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 grid grid-cols-2 gap-3">
|
|
<UButton
|
|
variant="outline"
|
|
size="lg"
|
|
block
|
|
>
|
|
<UIcon name="i-simple-icons-google" class="mr-2" />
|
|
Google
|
|
</UButton>
|
|
|
|
<UButton
|
|
variant="outline"
|
|
size="lg"
|
|
block
|
|
>
|
|
<UIcon name="i-simple-icons-github" class="mr-2" />
|
|
GitHub
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right side - Benefits -->
|
|
<div class="hidden lg:block relative flex-1">
|
|
<div class="absolute inset-0 bg-gradient-to-br from-green-500 to-blue-600">
|
|
<div class="flex items-center justify-center h-full p-12">
|
|
<div class="text-center text-white">
|
|
<div class="mb-8">
|
|
<UIcon name="i-lucide-zap" size="80" class="mx-auto mb-4" />
|
|
<h2 class="text-4xl font-bold mb-4">
|
|
Commencez Gratuitement
|
|
</h2>
|
|
<p class="text-xl opacity-90">
|
|
Déployez votre première connexion Layer 2 en 5 minutes
|
|
</p>
|
|
</div>
|
|
|
|
<div class="space-y-6 text-left max-w-md">
|
|
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-4">
|
|
<div class="flex items-center mb-2">
|
|
<UIcon name="i-lucide-gift" class="mr-3 text-yellow-300" />
|
|
<span class="font-semibold">Offre de Lancement</span>
|
|
</div>
|
|
<p class="text-sm opacity-90">
|
|
Crédit de €100 offert pour vos premières connexions
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-4">
|
|
<div class="flex items-center mb-2">
|
|
<UIcon name="i-lucide-clock" class="mr-3 text-blue-300" />
|
|
<span class="font-semibold">Déploiement Instantané</span>
|
|
</div>
|
|
<p class="text-sm opacity-90">
|
|
Vos connexions Layer 2 prêtes en moins de 5 minutes
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-4">
|
|
<div class="flex items-center mb-2">
|
|
<UIcon name="i-lucide-shield" class="mr-3 text-green-300" />
|
|
<span class="font-semibold">Sécurité Enterprise</span>
|
|
</div>
|
|
<p class="text-sm opacity-90">
|
|
Connexions privées avec chiffrement de bout en bout
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-4">
|
|
<div class="flex items-center mb-2">
|
|
<UIcon name="i-lucide-headphones" class="mr-3 text-purple-300" />
|
|
<span class="font-semibold">Support 24/7</span>
|
|
</div>
|
|
<p class="text-sm opacity-90">
|
|
Équipe d'experts disponible en permanence
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |