Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 | import React, { useEffect, useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import { useAuth } from "../../contexts/AuthContext";
const Login = () => {
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
const { loginWithGoogle, isAuthenticated } = useAuth();
const navigate = useNavigate();
const [searchParams] = useSearchParams();
useEffect(() => {
const errorParam = searchParams.get("error");
if (errorParam) {
const errorMessages = {
no_code: "Authentification annulée",
invalid_state: "Session invalide, veuillez réessayer",
callback_failed: "Erreur lors de l'authentification Google",
access_denied: "Accès refusé par Google",
};
setError(errorMessages[errorParam] || "Erreur d'authentification");
}
}, [searchParams]);
useEffect(() => {
if (isAuthenticated) {
navigate("/", { replace: true });
}
}, [isAuthenticated, navigate]);
const handleGoogleLogin = () => {
setError("");
setLoading(true);
const plan = searchParams.get("plan");
loginWithGoogle(plan || undefined);
setTimeout(() => setLoading(false), 2000);
};
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-md w-full space-y-8">
<div>
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
Connexion à Nooloom
</h2>
<p className="mt-2 text-center text-sm text-gray-600">
Authentifiez-vous avec votre compte Google
</p>
</div>
{error && (
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
{error}
</div>
)}
<div className="space-y-4">
<button
onClick={handleGoogleLogin}
disabled={loading}
className="group relative w-full flex justify-center py-3 px-4 border border-gray-300 rounded-md shadow-sm bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
>
{loading ? (
<span className="flex items-center">
<svg
className="animate-spin -ml-1 mr-3 h-5 w-5 text-gray-500"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
></circle>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
Redirection...
</span>
) : (
<span className="flex items-center">
<svg className="w-5 h-5 mr-2" viewBox="0 0 24 24">
<path
fill="#4285F4"
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
/>
<path
fill="#34A853"
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
/>
<path
fill="#FBBC05"
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
/>
<path
fill="#EA4335"
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 12 2.09 12 5.38c0 1.06.25 2.05.67 2.93l2.9-2.9c-.57-.63-1.34-.98-2.2-.98z"
/>
</svg>
Se connecter avec Google
</span>
)}
</button>
</div>
<div className="mt-6 text-center text-xs text-gray-500">
En vous connectant, vous acceptez les conditions d'utilisation de
Nooloom.
</div>
</div>
</div>
);
};
export default Login;
|