package-lock.json

@@ -12,6 +12,7 @@
         "axios": "^1.8.4",
         "bootstrap": "^5.3.3",
         "bootstrap-icons": "^1.11.3",
+        "js-cookie": "^3.0.5",
         "next": "15.2.4",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
@@ -20,6 +21,7 @@
       "devDependencies": {
         "@eslint/eslintrc": "^3",
         "@types/bootstrap": "^5.2.10",
+        "@types/js-cookie": "^3.0.6",
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
@@ -1229,6 +1231,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/js-cookie": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
+      "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -4042,6 +4051,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

package.json

@@ -13,6 +13,7 @@
     "axios": "^1.8.4",
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
+    "js-cookie": "^3.0.5",
     "next": "15.2.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -21,6 +22,7 @@
   "devDependencies": {
     "@eslint/eslintrc": "^3",
     "@types/bootstrap": "^5.2.10",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",

src/app/(auth)/login/administradores/page.tsx

@@ -1,5 +1,62 @@
-import React from 'react';
+'use client';
+import Button from '@/components/button';
+import Input from '@/components/input';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import Cookies from 'js-cookie';
 
 export default function Page() {
-  return <div>Page</div>;
+  const router = useRouter();
+  const [formData, setFormData] = useState({ username: '', password: '' });
+  const [error, setError] = useState('');
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
+    setError('');
+  };
+
+  const handleOnSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const { username, password } = formData;
+
+    if (username === 'user-admin' && password === '@dm1nP@ss') {
+      Cookies.set('token', 'staff1');
+      router.push('/staff');
+    } else {
+      setError('Usuario o contraseña incorrectos');
+    }
+  };
+
+  return (
+    <div className='d-flex flex-column justify-content-center align-items-center'>
+      <h1 className='text-dorado'>Iniciar sesión</h1>
+      <h2 className='text-azul'>Administradores</h2>
+
+      <form className='w-300px' onSubmit={handleOnSubmit}>
+        <Input
+          name='username'
+          label='Usuario'
+          value={formData.username}
+          onChange={handleChange}
+        />
+        <Input
+          name='password'
+          type='password'
+          label='Contraseña'
+          value={formData.password}
+          onChange={handleChange}
+        />
+        {error && <div className='alert alert-danger text-center' role='alert'>{error}</div>}
+        <div className='mb-3'>
+          <Button className='w-100' type='submit'>
+            Iniciar sesión
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
 }

src/app/(auth)/login/staff/page.tsx

@@ -2,16 +2,33 @@
 import Button from '@/components/button';
 import Input from '@/components/input';
 import { useRouter } from 'next/navigation';
-import React from 'react';
+import React, { useState } from 'react';
+import Cookies from 'js-cookie';
 
 export default function Page() {
   const router = useRouter();
+  const [formData, setFormData] = useState({ username: '', password: '' });
+  const [error, setError] = useState('');
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
+    setError('');
+  };
 
   const handleOnSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    // Aquí puedes agregar la lógica para manejar el inicio de sesión
-    // Por ejemplo, validar las credenciales y redirigir al usuario
-    router.push('/staff');
+
+    const { username, password } = formData;
+
+    if (username === 'staff1' && password === 'st@ffP@ss') {
+      Cookies.set('token', 'staff1');
+      router.push('/staff');
+    } else {
+      setError('Usuario o contraseña incorrectos');
+    }
   };
 
   return (
@@ -20,8 +37,20 @@ export default function Page() {
       <h2 className='text-azul'>Staff</h2>
 
       <form className='w-300px' onSubmit={handleOnSubmit}>
-        <Input label='Usuario' />
-        <Input type='password' label='Contraseña' />
+        <Input
+          name='username'
+          label='Usuario'
+          value={formData.username}
+          onChange={handleChange}
+        />
+        <Input
+          name='password'
+          type='password'
+          label='Contraseña'
+          value={formData.password}
+          onChange={handleChange}
+        />
+        {error && <div className='alert alert-danger text-center' role='alert'>{error}</div>}
         <div className='mb-3'>
           <Button className='w-100' type='submit'>
             Iniciar sesión

src/app/layout.tsx

@@ -12,13 +12,32 @@ const roboto = Roboto({
 });
 
 export const metadata: Metadata = {
-  title: "Sistema de formularios",
-  description: "",
+  title: "Registros - Eventos FES Acatlán",
+  description: "Plataforma para consultar y registrarse a eventos organizados dentro de la FES Acatlán. Completa un formulario para confirmar tu asistencia.",
   icons: {
     icon: "/unam.png",
   },
+  keywords: ["eventos", "FES Acatlán", "UNAM", "registro", "formulario", "asistencia", "registros"],
+  authors: [{ name: "FES Acatlán" }],
+  creator: "FES Acatlán",
+  metadataBase: new URL("https://registro.acatlan.unam.mx/"), // cámbialo por el dominio real
+  openGraph: {
+    title: "Registros - Eventos FES Acatlán",
+    description: "Consulta los eventos disponibles en la FES Acatlán y regístrate para asistir.",
+    url: "https://registro.acatlan.unam.mx/",
+    siteName: "Registros FES Acatlán",
+    images: [
+      {
+        url: "/ogimage.png",
+        alt: "Logo UNAM",
+      },
+    ],
+    locale: "es_MX",
+    type: "website",
+  },
 };
 
+
 export default function RootLayout({
   children,
 }: Readonly<{

src/app/not-found.tsx

@@ -0,0 +1,21 @@
+import Footer from '@/components/layout/footer';
+import Header from '@/components/layout/header';
+import Image from 'next/image';
+import Link from 'next/link';
+import React from 'react';
+
+export default function Page() {
+  return (
+    <div className='d-flex flex-column min-vh-100'>
+      <Header small />
+      <div className="flex-grow-1 d-flex flex-column align-items-center justify-content-center">
+        <Image src={'/404.png'} width={350} height={350} alt="404" />
+        <p>
+          La página que buscas no existe. Por favor, verifica la URL o regresa
+          al <Link href="/">inicio</Link>
+        </p>
+      </div>
+      <Footer />
+    </div>
+  );
+}

src/middleware.ts

@@ -0,0 +1,17 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export function middleware(request: NextRequest) {
+  const token = request.cookies.get('token');
+
+  if (!token) {
+    console.log('No hay token, redirigiendo a la página de inicio de sesión');
+    return NextResponse.redirect(new URL('/', request.url));
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ['/staff/:path*', '/administrador/:path*'],
+};