Refonte front : flux inscription/connexion, saisie code et historique gains
- Redesign Connexion, Inscription avec modal succès et compte à rebours - Page SaisirCodeUnique connectée au backend avec overlay Félicitation - Page Perdu pour les codes invalides/déjà utilisés - MesGains redesigné en timeline avec appel API et bouton saisir nouveau code - Profile redesigné avec onglets et données depuis localStorage - Service game.js ajouté (participateApi, myGainsApi) - Ajout des designs de référence dans frontend/Design/ Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Emma781227
@@ -1,65 +1,88 @@
|
||||
import { useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { participateApi } from '../services/game'
|
||||
|
||||
export default function SaisirCodeUnique() {
|
||||
const [form, setForm] = useState({
|
||||
codeUnique: '',
|
||||
})
|
||||
const navigate = useNavigate()
|
||||
const [code, setCode] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [gain, setGain] = useState(null)
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target
|
||||
setForm({ ...form, [name]: value.toUpperCase() })
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault()
|
||||
setLoading(true)
|
||||
try {
|
||||
const data = await participateApi(code.trim().toUpperCase())
|
||||
setGain(data.gain)
|
||||
} catch (err) {
|
||||
navigate('/perdu', { state: { message: err.message } })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault()
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex flex-col justify-center px-8 py-12 max-w-sm mx-auto">
|
||||
|
||||
const code = form.codeUnique.trim()
|
||||
|
||||
if (!code) {
|
||||
alert('Veuillez saisir un code')
|
||||
return
|
||||
}
|
||||
if (code.length !== 10) {
|
||||
alert('Le code doit contenir exactement 10 caractères')
|
||||
return
|
||||
}
|
||||
|
||||
// TODO: appeler backend pour valider le code unique
|
||||
alert('Code validé')
|
||||
}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl font-bold italic font-serif text-[#006B6B]">Saisir mon code gagnant</h1>
|
||||
<p className="text-gray-500 mt-2 text-sm">Saisissez le code présent sur votre ticket</p>
|
||||
</div>
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-green-50 flex items-center justify-center p-4">
|
||||
<div className="bg-white rounded-2xl shadow-lg w-full max-w-md p-8">
|
||||
<h1 className="text-3xl font-bold text-green-800 mb-2">Saisir mon code gagnant</h1>
|
||||
<p className="text-gray-600 mb-6">Saisissez le code présent sur votre ticket</p>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<input
|
||||
type="text"
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value.toUpperCase())}
|
||||
placeholder="Votre code"
|
||||
maxLength={10}
|
||||
required
|
||||
className="w-full border border-gray-200 rounded-lg px-4 py-3 text-sm text-gray-700 placeholder-gray-300 bg-white focus:outline-none focus:ring-1 focus:ring-[#006B6B] focus:border-[#006B6B]"
|
||||
/>
|
||||
|
||||
{/* Formulaire */}
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || code.length !== 10}
|
||||
className="w-full bg-[#00786F] hover:bg-[#1A6B65] disabled:opacity-60 text-white font-medium py-3 rounded-lg transition-colors"
|
||||
>
|
||||
{loading ? 'Validation...' : 'Valider'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Code unique */}
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
name="codeUnique"
|
||||
value={form.codeUnique}
|
||||
onChange={handleChange}
|
||||
placeholder="Votre code"
|
||||
maxLength={10}
|
||||
className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-green-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Bouton de soumission */}
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-green-700 hover:bg-green-800 text-white font-semibold py-2.5 rounded-lg transition-colors"
|
||||
>
|
||||
Valider
|
||||
</button>
|
||||
</form>
|
||||
{/* Overlay Félicitation */}
|
||||
{gain && (
|
||||
<div className="fixed inset-0 bg-black/60 flex flex-col items-center justify-between z-50 px-6 py-12">
|
||||
<div className="w-full max-w-sm">
|
||||
<h2 className="text-4xl font-bold italic font-serif text-white mb-1">Félicitation !</h2>
|
||||
<p className="text-white/80 text-sm">Vous avez obtenu une récompense</p>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
{/* Code saisi */}
|
||||
<div className="bg-white/10 rounded-lg px-6 py-3 mb-6 text-white font-mono tracking-widest text-lg">
|
||||
{code}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Icône décorative */}
|
||||
<div className="mb-8">
|
||||
<svg className="w-24 h-24 text-yellow-200" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17l-6.2 4.3 2.4-7.4L2 9.4h7.6z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="w-full max-w-sm">
|
||||
<p className="text-white text-center font-semibold mb-1">{gain.name}</p>
|
||||
<p className="text-white/70 text-center text-sm mb-6">{gain.description}</p>
|
||||
<button
|
||||
onClick={() => navigate('/mes-gains')}
|
||||
className="w-full bg-[#006B6B] hover:bg-[#005959] text-white font-medium py-3 rounded-lg transition-colors"
|
||||
>
|
||||
Découvrir mon lot
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user