Cifrado

PintudosFront/package.json

@@ -10,9 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@react-oauth/google": "^0.12.2",
     "@stomp/stompjs": "^7.1.0",
     "axios": "^1.8.4",
     "crypto-js": "^4.2.0",
+    "jwt-decode": "^4.0.0",
     "pintudos": "file:",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",

PintudosFront/src/App.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import Home from './components/Home/Home'; 
+import { GoogleOAuthProvider } from '@react-oauth/google';
+import { AuthProvider } from './components/AuthContext/AuthContext';
+import Login from './components/Login/Login'; 
 import Juego from './components/Juego/Juego'; 
+import ProtectedRoute from './components/ProtectedRoute/ProtectedRoute';
+import Home from './components/Home/Home'; // Asegúrate de que la ruta sea correcta
 
 function App() {
   return (
-    <Router>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/juego" element={<Juego />} />
-      </Routes>
-    </Router>
+    <GoogleOAuthProvider clientId="186447712086-73urgfm1lll5069lh18ed9venvnsr5an.apps.googleusercontent.com">
+      <AuthProvider>
+        <Router>
+          <Routes>
+            <Route path="/" element={<Login />} />
+            <Route path="/home" element={<Home />} />
+            <Route path="/juego" element={
+              <ProtectedRoute>
+                <Juego />
+              </ProtectedRoute>
+            } />
+          </Routes>
+        </Router>
+      </AuthProvider>
+    </GoogleOAuthProvider>
   );
 }
 

PintudosFront/src/components/AuthContext/AuthContext.tsx

@@ -0,0 +1,54 @@
+import React, {
+  createContext,
+  useState,
+  useContext,
+  ReactNode,
+  FC
+} from 'react';
+
+// Define el tipo del contexto
+interface AuthContextType {
+  token: string | null;
+  login: (newToken: string) => void;
+  logout: () => void;
+}
+
+// Crear contexto con valor inicial `undefined`
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+// Props del proveedor
+interface AuthProviderProps {
+  children: ReactNode;
+}
+
+// Componente proveedor
+export const AuthProvider: FC<AuthProviderProps> = ({ children }) => {
+  const [token, setToken] = useState<string | null>(
+    localStorage.getItem("token")
+  );
+
+  const login = (newToken: string) => {
+    setToken(newToken);
+    localStorage.setItem("token", newToken);
+  };
+
+  const logout = () => {
+    setToken(null);
+    localStorage.removeItem("token");
+  };
+
+  return (
+    <AuthContext.Provider value={{ token, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+// Hook para usar el contexto
+export const useAuth = (): AuthContextType => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("useAuth debe usarse dentro de un AuthProvider");
+  }
+  return context;
+};

PintudosFront/src/components/Login/Login.css

@@ -0,0 +1,45 @@
+/* Home.css */
+.login-container {
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(135deg, #6a0dad, #f7a83a, #6a0dad);
+  padding: 20px;
+}
+
+.login-card {
+  background-color: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+  padding: 40px 30px;
+  max-width: 400px;
+  width: 100%;
+  text-align: center;
+}
+
+.login-title {
+  font-size: 32px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 10px; 
+font-family: 'Finger Paint', cursive;
+}
+
+.login-title span {
+  color: #7e5bef;
+font-family: 'Finger Paint', cursive;
+}
+
+.login-subtitle {
+  color: #666;
+  margin-bottom: 30px;
+  font-size: 16px;
+  font-family: 'Finger Paint', cursive;
+}
+
+.login-button {
+  display: flex;
+  justify-content: center;
+  font-family: 'Finger Paint', cursive;
+}

PintudosFront/src/components/Login/Login.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { GoogleLogin, CredentialResponse } from '@react-oauth/google';
+import { jwtDecode } from 'jwt-decode';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../AuthContext/AuthContext';
+import './Login.css'; // Asegúrate de importar el CSS
+
+interface DecodedToken {
+  name: string;
+  email: string;
+  picture: string;
+  sub: string;
+  [key: string]: unknown;
+}
+
+const Login: React.FC = () => {
+  const navigate = useNavigate();
+  const { login } = useAuth();
+
+  const onSuccess = (credentialResponse: CredentialResponse) => {
+    const token = credentialResponse.credential;
+    if (token) {
+      const user = jwtDecode<DecodedToken>(token);
+      console.log("Usuario:", user);
+      login(token);
+      navigate("/home");
+    } else {
+      console.error("No se recibió token de Google");
+    }
+  };
+
+  return (
+    <div className="login-container">
+      <div className="login-card">
+        <h1 className="login-title">Bienvenido a <span>Pintu2</span></h1>
+        <p className="login-subtitle">Inicia sesión para comenzar a jugar</p>
+        <div className="login-button">
+          <GoogleLogin
+            onSuccess={onSuccess}
+            onError={() => console.log('Falló el login')}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Login;

PintudosFront/src/components/ProtectedRoute/ProtectedRoute.tsx

@@ -0,0 +1,15 @@
+import React, { ReactNode } from "react";
+import { Navigate } from "react-router-dom";
+import { useAuth } from "../AuthContext/AuthContext";
+
+interface ProtectedRouteProps {
+  children: ReactNode;
+}
+
+const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
+  const { token } = useAuth();
+  return token ? children : <Navigate to="/" />;
+};
+
+export default ProtectedRoute;
+

PintudosFront/src/main.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
-import { WebSocketProvider } from './useWebSocket'; 
+import { WebSocketProvider } from './useWebSocket';
+import { AuthProvider } from './components/AuthContext/AuthContext'; // Asegúrate que la ruta esté correcta
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <WebSocketProvider>
-      <App />
-    </WebSocketProvider>
+    <AuthProvider>
+      <WebSocketProvider>
+        <App />
+      </WebSocketProvider>
+    </AuthProvider>
   </React.StrictMode>
 );