472 lines
20 KiB
Vue
472 lines
20 KiB
Vue
<template>
|
|
<div class="w-full max-w-2xl mx-auto space-y-4 sm:space-y-6 px-4 sm:px-6 pb-4 sm:pb-6">
|
|
<!-- Header -->
|
|
<div class="text-center pt-2 sm:pt-0">
|
|
<h2 class="text-xl sm:text-2xl md:text-3xl font-bold text-gray-900">Créer un compte</h2>
|
|
<p class="mt-2 text-xs sm:text-sm text-gray-500">Remplissez ça et après promis je vous embête plus</p>
|
|
</div>
|
|
|
|
<!-- Progress Bar -->
|
|
<div class="pt-2 sm:pt-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="text-xs sm:text-sm font-medium text-gray-700">Étape {{ currentStep }} sur {{ totalSteps }}</span>
|
|
<span class="text-xs sm:text-sm font-medium text-gray-500">{{ Math.round((currentStep / totalSteps) * 100) }}%</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-2 sm:h-2.5">
|
|
<div
|
|
class="bg-primary-600 h-2 sm:h-2.5 rounded-full transition-all duration-500 ease-in-out"
|
|
:style="{ width: `${(currentStep / totalSteps) * 100}%` }"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step Content -->
|
|
<div class="flex flex-col justify-center py-4 sm:py-6">
|
|
<StepTransition :step="currentStep">
|
|
<!-- Step 1: Welcome -->
|
|
<div v-if="currentStep === 1" class="text-center px-2 sm:px-0">
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<h3 class="text-xl sm:text-2xl md:text-3xl font-bold text-gray-900 mb-3 sm:mb-4">Yo les ptits potes ! 🎉</h3>
|
|
<p class="text-sm sm:text-base text-gray-600 max-w-md mx-auto leading-relaxed mb-6 sm:mb-8">
|
|
Bienvenue sur LeDiscord ! Ici on partage nos vlogs, nos photos de soirées et on organise nos prochaines beuveries. 🍻
|
|
</p>
|
|
|
|
<!-- Minimalist features preview -->
|
|
<div class="grid grid-cols-3 gap-2 sm:gap-4 max-w-md mx-auto mt-6 sm:mt-8">
|
|
<div class="text-center">
|
|
<div class="text-2xl sm:text-3xl mb-1">📹</div>
|
|
<div class="text-xs sm:text-sm font-medium text-gray-700">Vlogs</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-2xl sm:text-3xl mb-1">🍺</div>
|
|
<div class="text-xs sm:text-sm font-medium text-gray-700">Événements</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-2xl sm:text-3xl mb-1">📸</div>
|
|
<div class="text-xs sm:text-sm font-medium text-gray-700">Albums</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 2: Registration Form -->
|
|
<div v-if="currentStep === 2" class="w-full">
|
|
<form @submit.prevent="nextStep" class="space-y-4 sm:space-y-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
|
|
<div>
|
|
<label for="email" class="label text-sm sm:text-base">Email</label>
|
|
<input
|
|
id="email"
|
|
v-model="form.email"
|
|
type="email"
|
|
required
|
|
class="input text-sm sm:text-base"
|
|
placeholder="exemple@email.com"
|
|
@blur="touchedFields.email = true"
|
|
>
|
|
</div>
|
|
<div>
|
|
<label for="username" class="label text-sm sm:text-base">Nom d'utilisateur</label>
|
|
<input
|
|
id="username"
|
|
v-model="form.username"
|
|
type="text"
|
|
required
|
|
minlength="3"
|
|
class="input text-sm sm:text-base"
|
|
placeholder="nom_utilisateur"
|
|
@blur="touchedFields.username = true"
|
|
>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for="full_name" class="label text-sm sm:text-base">Nom complet</label>
|
|
<input
|
|
id="full_name"
|
|
v-model="form.full_name"
|
|
type="text"
|
|
required
|
|
class="input text-sm sm:text-base"
|
|
placeholder="Prénom Nom"
|
|
@blur="touchedFields.full_name = true"
|
|
>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
|
|
<div>
|
|
<label for="password" class="label text-sm sm:text-base">Mot de passe</label>
|
|
<input
|
|
id="password"
|
|
v-model="form.password"
|
|
type="password"
|
|
required
|
|
minlength="6"
|
|
class="input text-sm sm:text-base"
|
|
placeholder="••••••••"
|
|
@blur="touchedFields.password = true"
|
|
>
|
|
</div>
|
|
<div>
|
|
<label for="password_confirm" class="label text-sm sm:text-base">Confirmer</label>
|
|
<input
|
|
id="password_confirm"
|
|
v-model="form.password_confirm"
|
|
type="password"
|
|
required
|
|
class="input text-sm sm:text-base"
|
|
placeholder="••••••••"
|
|
@blur="touchedFields.password_confirm = true"
|
|
>
|
|
</div>
|
|
</div>
|
|
<PasswordStrength :password="form.password" />
|
|
<div v-if="touchedFields.password_confirm && form.password_confirm && form.password !== form.password_confirm" class="flex items-center text-xs sm:text-sm text-red-600 mt-2">
|
|
<svg class="w-4 h-4 mr-1 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
|
|
</svg>
|
|
<span>Les mots de passe ne correspondent pas</span>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Step 3: Warning -->
|
|
<div v-if="currentStep === 3" class="w-full px-2 sm:px-0 text-center">
|
|
<h3 class="text-xl sm:text-2xl font-bold text-gray-900 mb-3 sm:mb-4">
|
|
Version Bêta en cours ! 🚧
|
|
</h3>
|
|
|
|
<div class="bg-gradient-to-br from-yellow-50 to-orange-50 border-2 border-yellow-200 rounded-xl p-4 sm:p-6 max-w-lg mx-auto mb-4 sm:mb-6">
|
|
<p class="text-sm sm:text-base text-gray-700 leading-relaxed mb-4">
|
|
Je suis encore en train de peaufiner tout ça, donc si tu vois un bug ou que quelque chose te fait chier, <strong>dis-moi !</strong> 💬
|
|
</p>
|
|
<div class="flex items-center justify-center space-x-2 text-xs sm:text-sm text-gray-600">
|
|
<span>🔧</span>
|
|
<span>J'améliore au fur et à mesure</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 sm:mt-6">
|
|
<p class="text-xs sm:text-sm text-gray-700 mb-3 font-medium">Pour me signaler un problème, utilise le bouton ticket :</p>
|
|
<div class="inline-flex items-center justify-center bg-primary-600 text-white rounded-full p-3 sm:p-4 shadow-lg">
|
|
<svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z" />
|
|
</svg>
|
|
</div>
|
|
<p class="text-xs sm:text-sm text-gray-500 mt-3">
|
|
Il se trouve en bas à droite de l'écran une fois connecté
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 4: Interactive Tour -->
|
|
<div v-if="currentStep === 4" class="w-full px-2 sm:px-0">
|
|
<h3 class="text-xl sm:text-2xl font-bold text-gray-900 mb-4 sm:mb-6 text-center">Petite visite guidée 🗺️</h3>
|
|
|
|
<div class="max-w-lg mx-auto">
|
|
<!-- Tour Content -->
|
|
<div class="bg-white border-2 border-gray-200 rounded-xl p-4 sm:p-6 mb-4 sm:mb-6 min-h-[280px] flex flex-col justify-center">
|
|
<div v-if="tourStep === 0" class="text-center">
|
|
<div class="text-4xl sm:text-5xl mb-4">🏠</div>
|
|
<h4 class="text-lg sm:text-xl font-bold text-gray-900 mb-3">Accueil</h4>
|
|
<p class="text-sm sm:text-base text-gray-600 mb-3">C'est ici que tu verras toutes les dernières activités de la communauté</p>
|
|
<div class="bg-gray-50 rounded-lg p-3 text-left text-xs sm:text-sm text-gray-600">
|
|
<p class="mb-1">✨ <strong>Astuce :</strong> Tu peux liker, commenter et partager tout ce qui t'intéresse</p>
|
|
<p>🔔 Les notifications te tiendront au courant des nouvelles interactions</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="tourStep === 1" class="text-center">
|
|
<div class="text-4xl sm:text-5xl mb-4">📅</div>
|
|
<h4 class="text-lg sm:text-xl font-bold text-gray-900 mb-3">Événements</h4>
|
|
<p class="text-sm sm:text-base text-gray-600 mb-3">Organise et participe aux prochaines soirées et beuveries</p>
|
|
<div class="bg-gray-50 rounded-lg p-3 text-left text-xs sm:text-sm text-gray-600">
|
|
<p class="mb-1">📝 <strong>Crée un événement :</strong> Date, lieu, description, le tout en quelques clics</p>
|
|
<p>✅ <strong>Participe :</strong> Indique ta présence et vois qui vient</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="tourStep === 2" class="text-center">
|
|
<div class="text-4xl sm:text-5xl mb-4">📸</div>
|
|
<h4 class="text-lg sm:text-xl font-bold text-gray-900 mb-3">Albums</h4>
|
|
<p class="text-sm sm:text-base text-gray-600 mb-3">Partage tes meilleures photos de soirées et de moments entre potes</p>
|
|
<div class="bg-gray-50 rounded-lg p-3 text-left text-xs sm:text-sm text-gray-600">
|
|
<p class="mb-1">📁 <strong>Crée un album :</strong> Regroupe tes photos par événement ou thème</p>
|
|
<p>💾 <strong>Upload multiple :</strong> Ajoute plusieurs photos d'un coup</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="tourStep === 3" class="text-center">
|
|
<div class="text-4xl sm:text-5xl mb-4">📹</div>
|
|
<h4 class="text-lg sm:text-xl font-bold text-gray-900 mb-3">Vlogs</h4>
|
|
<p class="text-sm sm:text-base text-gray-600 mb-3">Regarde et partage tes vlogs avec la communauté</p>
|
|
<div class="bg-gray-50 rounded-lg p-3 text-left text-xs sm:text-sm text-gray-600">
|
|
<p class="mb-1">🎬 <strong>Upload un vlog :</strong> Vidéos jusqu'à 500MB, avec thumbnail personnalisé</p>
|
|
<p>👀 <strong>Statistiques :</strong> Vues, replays, likes, tout est tracké</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="tourStep === 4" class="text-center">
|
|
<div class="text-4xl sm:text-5xl mb-4">💬</div>
|
|
<h4 class="text-lg sm:text-xl font-bold text-gray-900 mb-3">Publications</h4>
|
|
<p class="text-sm sm:text-base text-gray-600 mb-3">Discute, partage et échange avec tout le monde</p>
|
|
<div class="bg-gray-50 rounded-lg p-3 text-left text-xs sm:text-sm text-gray-600">
|
|
<p class="mb-1">@<strong>Mentions :</strong> Tag tes potes avec @nom_utilisateur</p>
|
|
<p>📎 <strong>Médias :</strong> Ajoute des images directement dans tes posts</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tour Navigation -->
|
|
<div class="flex items-center justify-between">
|
|
<button
|
|
@click="tourStep = Math.max(0, tourStep - 1)"
|
|
:disabled="tourStep === 0"
|
|
class="px-3 sm:px-4 py-2 text-xs sm:text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
|
>
|
|
← Précédent
|
|
</button>
|
|
|
|
<div class="flex space-x-2">
|
|
<div
|
|
v-for="i in 5"
|
|
:key="i"
|
|
class="w-2 h-2 rounded-full transition-all duration-300"
|
|
:class="tourStep === i - 1 ? 'bg-primary-600 w-6' : 'bg-gray-300'"
|
|
></div>
|
|
</div>
|
|
|
|
<button
|
|
@click="tourStep = Math.min(4, tourStep + 1)"
|
|
:disabled="tourStep === 4"
|
|
class="px-3 sm:px-4 py-2 text-xs sm:text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
|
>
|
|
Suivant →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 5: Install App -->
|
|
<div v-if="currentStep === 5" class="w-full px-2 sm:px-0 text-center">
|
|
<h3 class="text-xl sm:text-2xl font-bold text-gray-900 mb-3 sm:mb-4">
|
|
Ah et tiens... 📱
|
|
</h3>
|
|
|
|
<p class="text-sm sm:text-base text-gray-600 max-w-md mx-auto leading-relaxed mb-6 sm:mb-8">
|
|
Prends l'app, ce sera plus sympa sur mobile ! Accès rapide, notifications, et tout ça directement depuis ton téléphone.
|
|
</p>
|
|
|
|
<div class="bg-gradient-to-br from-primary-50 to-purple-50 border-2 border-primary-200 rounded-xl p-4 sm:p-6 max-w-md mx-auto mb-6">
|
|
<div class="flex items-center justify-center space-x-3 mb-4">
|
|
<div class="text-3xl">📱</div>
|
|
<div class="text-3xl">→</div>
|
|
<div class="text-3xl">✨</div>
|
|
</div>
|
|
<p class="text-xs sm:text-sm text-gray-700 mb-4">
|
|
Une fois connecté, tu pourras installer l'app depuis le menu de ton profil
|
|
</p>
|
|
<button
|
|
v-if="deferredPrompt"
|
|
@click="handleInstallApp"
|
|
class="w-full sm:w-auto bg-primary-600 hover:bg-primary-700 text-white font-medium py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-105 text-sm sm:text-base"
|
|
>
|
|
<div class="flex items-center justify-center space-x-2">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
|
|
</svg>
|
|
<span>Installer l'app maintenant</span>
|
|
</div>
|
|
</button>
|
|
<p v-else class="text-xs sm:text-sm text-gray-500">
|
|
Voilà, c'est quand même mieux comme ça !
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</StepTransition>
|
|
</div>
|
|
|
|
<!-- Navigation Buttons -->
|
|
<div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 sm:gap-4 pt-4 sm:pt-6" :class="currentStep > 1 ? 'sm:justify-between' : 'sm:justify-end'">
|
|
<button
|
|
v-if="currentStep > 1"
|
|
@click="previousStep"
|
|
class="btn-secondary w-full sm:w-auto order-2 sm:order-1 text-sm sm:text-base py-2.5 sm:py-2"
|
|
:disabled="loading"
|
|
>
|
|
Précédent
|
|
</button>
|
|
|
|
<button
|
|
v-if="currentStep < totalSteps"
|
|
@click="nextStep"
|
|
:disabled="!canProceed || loading"
|
|
class="btn-primary bg-gradient-to-r from-primary-500 to-purple-600 w-full sm:w-auto order-1 sm:order-2 text-sm sm:text-base py-2.5 sm:py-2"
|
|
:class="{ 'opacity-50 cursor-not-allowed': !canProceed || loading }"
|
|
>
|
|
Suivant
|
|
</button>
|
|
|
|
<button
|
|
v-if="currentStep === totalSteps"
|
|
@click="handleRegister"
|
|
:disabled="loading || !canProceed"
|
|
class="btn-primary bg-gradient-to-r from-primary-500 to-purple-600 w-full sm:w-auto order-1 sm:order-2 text-sm sm:text-base py-2.5 sm:py-2"
|
|
:class="{ 'opacity-50 cursor-not-allowed': loading || !canProceed }"
|
|
>
|
|
<span v-if="loading">Création en cours...</span>
|
|
<span v-else>Créer mon compte</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div v-if="error" class="mt-4 text-center text-xs sm:text-sm text-red-600 px-2">
|
|
{{ error }}
|
|
</div>
|
|
|
|
<!-- Login Link -->
|
|
<div class="mt-6 sm:mt-8 text-center pb-4 sm:pb-0">
|
|
<p class="text-xs sm:text-sm text-gray-600">
|
|
Déjà un compte ?
|
|
<router-link to="/login" class="font-medium text-primary-600 hover:text-primary-500 transition-colors">
|
|
Se connecter
|
|
</router-link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useAuthStore } from '@/stores/auth'
|
|
import StepTransition from '@/components/StepTransition.vue'
|
|
import PasswordStrength from '@/components/PasswordStrength.vue'
|
|
import FormValidation from '@/components/FormValidation.vue'
|
|
|
|
const authStore = useAuthStore()
|
|
const router = useRouter()
|
|
|
|
// Step management
|
|
const currentStep = ref(1)
|
|
const totalSteps = 5
|
|
const tourStep = ref(0)
|
|
const deferredPrompt = ref(null)
|
|
|
|
// Form data
|
|
const form = ref({
|
|
email: '',
|
|
username: '',
|
|
full_name: '',
|
|
password: '',
|
|
password_confirm: ''
|
|
})
|
|
|
|
const touchedFields = ref({
|
|
email: false,
|
|
username: false,
|
|
full_name: false,
|
|
password: false,
|
|
password_confirm: false
|
|
})
|
|
|
|
const loading = ref(false)
|
|
const error = ref('')
|
|
|
|
// Features for the tour
|
|
const features = ref([
|
|
{
|
|
title: 'Posts & Discussions',
|
|
description: 'Partagez vos idées et participez.',
|
|
icon: '<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>'
|
|
},
|
|
{
|
|
title: 'Vlogs & Vidéos',
|
|
description: 'Regardez des vidéos de la communauté.',
|
|
icon: '<svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>'
|
|
},
|
|
{
|
|
title: 'Événements',
|
|
description: 'Participez à des rencontres.',
|
|
icon: '<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>'
|
|
}
|
|
])
|
|
|
|
// Computed properties
|
|
const canProceed = computed(() => {
|
|
if (currentStep.value === 2) {
|
|
return form.value.email && form.value.username && form.value.full_name &&
|
|
form.value.password && form.value.password.length >= 6 &&
|
|
form.value.password === form.value.password_confirm
|
|
}
|
|
return true
|
|
})
|
|
|
|
// Methods
|
|
function nextStep() {
|
|
if (currentStep.value < totalSteps && canProceed.value) {
|
|
currentStep.value++
|
|
// Reset tour step when entering step 4
|
|
if (currentStep.value === 4) {
|
|
tourStep.value = 0
|
|
}
|
|
}
|
|
}
|
|
|
|
function previousStep() {
|
|
if (currentStep.value > 1) {
|
|
currentStep.value--
|
|
}
|
|
}
|
|
|
|
async function handleRegister() {
|
|
error.value = ''
|
|
if (!canProceed.value) return
|
|
|
|
loading.value = true
|
|
const result = await authStore.register({
|
|
email: form.value.email,
|
|
username: form.value.username,
|
|
full_name: form.value.full_name,
|
|
password: form.value.password
|
|
})
|
|
|
|
if (result.success) {
|
|
router.push('/')
|
|
} else {
|
|
error.value = result.error || 'Une erreur est survenue lors de l\'inscription.'
|
|
}
|
|
loading.value = false
|
|
}
|
|
|
|
// PWA Installation
|
|
function handleBeforeInstallPrompt(e) {
|
|
e.preventDefault()
|
|
deferredPrompt.value = e
|
|
}
|
|
|
|
async function handleInstallApp() {
|
|
if (!deferredPrompt.value) return
|
|
|
|
try {
|
|
deferredPrompt.value.prompt()
|
|
const { outcome } = await deferredPrompt.value.userChoice
|
|
|
|
if (outcome === 'accepted') {
|
|
console.log('✅ PWA installée avec succès')
|
|
}
|
|
|
|
deferredPrompt.value = null
|
|
} catch (error) {
|
|
console.error('Erreur lors de l\'installation:', error)
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
|
|
})
|
|
</script>
|