Skip to content

Commit 1bb344a

Browse files
AchalogyAchalogy
authored
Merge pull request #41 from CapituloJaverianoACM/feature/log-in-and-sign-up-forms
Add: Provisional Sign-up and Log-in forms to test auth logic. 'cursor…
2 parents 93ad875 + 3987556 commit 1bb344a

File tree

9 files changed

+282
-55
lines changed

9 files changed

+282
-55
lines changed

‎src/app/(auth)/log-in/page.tsx‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
"use client";
2+
3+
import { Card, CardHeader, CardTitle, CardContent, CardFooter } from "@/components/home/ui/card";
4+
import { Button } from "@/components/home/ui/button";
5+
import { useState } from "react";
6+
import Link from "next/link";
7+
8+
export default function LoginPage() {
9+
const [email, setEmail] = useState("");
10+
const [password, setPassword] = useState("");
11+
const [loading, setLoading] = useState(false);
12+
const [error, setError] = useState("");
13+
14+
const handleSubmit = async (e: React.FormEvent) => {
15+
e.preventDefault();
16+
setLoading(true);
17+
setError("");
18+
// Lógica real de autenticación aquí
19+
20+
// Simulación de una llamada a la API
21+
setTimeout(() => {
22+
setLoading(false);
23+
if (email === "" || password === "") {
24+
setError("Por favor, completa todos los campos.");
25+
} else {
26+
// Simulación de éxito
27+
alert("¡Bienvenido/a a ACM Javeriana!");
28+
window.location.href = "/"
29+
}
30+
}, 1200);
31+
};
32+
33+
return (
34+
<div className="min-h-screen flex flex-col items-center justify-center bg-azul-niebla dark:bg-[#121212] p-4">
35+
{/* Logo ACM */}
36+
<Link href="/" className="mb-6 flex flex-col items-center group select-none">
37+
<img
38+
src="/Logo_Oscuro.svg"
39+
alt="Logo ACM Javeriana"
40+
className="h-16 w-auto dark:hidden drop-shadow-md transition-transform group-hover:scale-105"
41+
draggable={false}
42+
/>
43+
<img
44+
src="/Logo_Claro.svg"
45+
alt="Logo ACM Javeriana"
46+
className="h-16 w-auto hidden dark:flex drop-shadow-md transition-transform group-hover:scale-105"
47+
draggable={false}
48+
/>
49+
</Link>
50+
<Card className="w-full max-w-md shadow-lg">
51+
<CardHeader>
52+
<CardTitle className="dark:text-white">Iniciar sesión</CardTitle>
53+
</CardHeader>
54+
<CardContent>
55+
<form onSubmit={handleSubmit} className="flex flex-col gap-4">
56+
<div className="flex flex-col gap-1">
57+
<label htmlFor="email" className="text-sm font-medium text-azul-ultramar dark:text-white">Correo electrónico</label>
58+
<input
59+
id="email"
60+
type="email"
61+
autoComplete="email"
62+
className="border border-azul-crayon rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-azul-crayon bg-white dark:bg-black text-base"
63+
value={email}
64+
onChange={e => setEmail(e.target.value)}
65+
required
66+
/>
67+
</div>
68+
<div className="flex flex-col gap-1">
69+
<label htmlFor="password" className="text-sm font-medium text-azul-ultramar dark:text-white">Contraseña</label>
70+
<input
71+
id="password"
72+
type="password"
73+
autoComplete="current-password"
74+
className="border border-azul-crayon rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-azul-crayon bg-white dark:bg-black text-base"
75+
value={password}
76+
onChange={e => setPassword(e.target.value)}
77+
required
78+
/>
79+
</div>
80+
{error && <span className="text-red-600 text-sm">{error}</span>}
81+
<Button type="submit" className="w-full mt-2" disabled={loading}>
82+
{loading ? "Ingresando..." : "Iniciar sesión"}
83+
</Button>
84+
</form>
85+
</CardContent>
86+
<CardFooter className="flex flex-col items-center gap-2">
87+
<a href="#" className="text-xs text-azul-crayon dark:text-white hover:underline">¿Olvidaste tu contraseña?</a>
88+
<Link href="/sign-up" className="text-xs text-azul-crayon dark:text-white hover:underline mt-2">¿No tienes cuenta? Regístrate</Link>
89+
</CardFooter>
90+
</Card>
91+
</div>
92+
);
93+
}

‎src/app/(auth)/sign-up/page.tsx‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
"use client";
2+
3+
import { Card, CardHeader, CardTitle, CardContent, CardFooter } from "@/components/home/ui/card";
4+
import { Button } from "@/components/home/ui/button";
5+
import { useState } from "react";
6+
import Link from "next/link";
7+
8+
export default function SignUpPage() {
9+
const [nombre, setNombre] = useState("");
10+
const [apellido, setApellido] = useState("");
11+
const [email, setEmail] = useState("");
12+
const [password, setPassword] = useState("");
13+
const [loading, setLoading] = useState(false);
14+
const [error, setError] = useState("");
15+
16+
const handleSubmit = async (e: React.FormEvent) => {
17+
e.preventDefault();
18+
setLoading(true);
19+
setError("");
20+
// Lógica real de autenticación aquí
21+
22+
// Simulación de una llamada a la API
23+
setTimeout(() => {
24+
setLoading(false);
25+
if (!nombre || !apellido || !email || !password) {
26+
setError("Por favor, completa todos los campos.");
27+
} else {
28+
// Simulación de éxito
29+
alert("¡Registro exitoso! Ahora puedes iniciar sesión.");
30+
window.location.href = "/"
31+
}
32+
}, 1200);
33+
};
34+
35+
return (
36+
<div className="min-h-screen flex flex-col items-center justify-center bg-azul-niebla dark:bg-[#121212] p-4">
37+
{/* Logo ACM */}
38+
<Link href="/" className="mb-6 flex flex-col items-center group select-none">
39+
<img
40+
src="/Logo_Oscuro.svg"
41+
alt="Logo ACM Javeriana"
42+
className="h-16 w-auto dark:hidden drop-shadow-md transition-transform group-hover:scale-105"
43+
draggable={false}
44+
/>
45+
<img
46+
src="/Logo_Claro.svg"
47+
alt="Logo ACM Javeriana"
48+
className="h-16 w-auto hidden dark:flex drop-shadow-md transition-transform group-hover:scale-105"
49+
draggable={false}
50+
/>
51+
</Link>
52+
<Card className="w-full max-w-md shadow-lg">
53+
<CardHeader>
54+
<CardTitle className="dark:text-white">Crear cuenta</CardTitle>
55+
</CardHeader>
56+
<CardContent>
57+
<form onSubmit={handleSubmit} className="flex flex-col gap-4">
58+
<div className="flex flex-col gap-1">
59+
<label htmlFor="nombre" className="text-sm font-medium text-azul-ultramar dark:text-white">Nombre</label>
60+
<input
61+
id="nombre"
62+
type="text"
63+
autoComplete="given-name"
64+
className="border border-azul-crayon rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-azul-crayon bg-white dark:bg-black text-base"
65+
value={nombre}
66+
onChange={e => setNombre(e.target.value)}
67+
required
68+
/>
69+
</div>
70+
<div className="flex flex-col gap-1">
71+
<label htmlFor="apellido" className="text-sm font-medium text-azul-ultramar dark:text-white">Apellido</label>
72+
<input
73+
id="apellido"
74+
type="text"
75+
autoComplete="family-name"
76+
className="border border-azul-crayon rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-azul-crayon bg-white dark:bg-black text-base"
77+
value={apellido}
78+
onChange={e => setApellido(e.target.value)}
79+
required
80+
/>
81+
</div>
82+
<div className="flex flex-col gap-1">
83+
<label htmlFor="email" className="text-sm font-medium text-azul-ultramar dark:text-white">Correo electrónico</label>
84+
<input
85+
id="email"
86+
type="email"
87+
autoComplete="email"
88+
className="border border-azul-crayon rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-azul-crayon bg-white dark:bg-black text-base"
89+
value={email}
90+
onChange={e => setEmail(e.target.value)}
91+
required
92+
/>
93+
</div>
94+
<div className="flex flex-col gap-1">
95+
<label htmlFor="password" className="text-sm font-medium text-azul-ultramar dark:text-white">Contraseña</label>
96+
<input
97+
id="password"
98+
type="password"
99+
autoComplete="new-password"
100+
className="border border-azul-crayon rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-azul-crayon bg-white dark:bg-black text-base"
101+
value={password}
102+
onChange={e => setPassword(e.target.value)}
103+
required
104+
/>
105+
</div>
106+
{error && <span className="text-red-600 text-sm">{error}</span>}
107+
<Button type="submit" className="w-full mt-2" disabled={loading}>
108+
{loading ? "Registrando..." : "Registrarse"}
109+
</Button>
110+
</form>
111+
</CardContent>
112+
<CardFooter className="flex flex-col items-center gap-2">
113+
<Link href="/log-in" className="text-xs text-azul-crayon dark:text-white hover:underline mt-2">¿Ya tienes cuenta? Inicia sesión</Link>
114+
</CardFooter>
115+
</Card>
116+
</div>
117+
);
118+
}

‎src/app/page.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,18 @@ import { Hero } from "@/components/home/sections/hero";
66
import { Members } from "@/components/home/sections/members";
77
import { HeroUIProvider } from "@heroui/react";
88
import MainNavbar from '@/components/home/main-navbar';
9+
import { CursorWrapper } from "@/components/home/ui/CursorWrapper";
910

1011
export default function HomePage() {
1112
return (
1213
<HeroUIProvider>
13-
<MainNavbar />
14-
<div>
14+
<CursorWrapper>
15+
<MainNavbar />
1516
<Hero />
1617
<AboutUs />
1718
<Members />
1819
<Activities />
19-
</div>
20+
</CursorWrapper>
2021
</HeroUIProvider>
2122
);
2223
}

‎src/components/home/main-navbar.tsx‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
'use client';
22

33
import { IconMoon, IconSun } from "@tabler/icons-react";
4+
import Link from "next/link";
45
import React, { useState } from "react";
56

67
export default function MainNavbar() {
@@ -111,18 +112,18 @@ export default function MainNavbar() {
111112

112113
{/* User Links */}
113114
<div className="hidden md:flex items-center gap-4">
114-
<a
115-
href="#login"
115+
<Link
116+
href="/log-in"
116117
className="btn btn--outline btn--small "
117118
>
118119
Log in
119-
</a>
120-
<a
121-
href="#signup"
120+
</Link>
121+
<Link
122+
href="/sign-up"
122123
className="btn btn--primary btn--small"
123124
>
124125
Sign up
125-
</a>
126+
</Link>
126127
</div>
127128
{/* Mobile Menu Button */}
128129
<div className="md:hidden">
@@ -177,20 +178,20 @@ export default function MainNavbar() {
177178
</a>
178179
))}
179180
<div className="flex flex-col items-center gap-2 mt-2">
180-
<a
181-
href="#login"
181+
<Link
182+
href="/log-in"
182183
className="btn btn--outline btn--small w-full"
183184
onClick={closeMobileMenu}
184185
>
185186
Log in
186-
</a>
187-
<a
188-
href="#signup"
187+
</Link>
188+
<Link
189+
href="/sign-up"
189190
className="btn btn--primary btn--small w-full"
190191
onClick={closeMobileMenu}
191192
>
192193
Sign up
193-
</a>
194+
</Link>
194195
</div>
195196
</div>
196197
</div>

‎src/components/home/member-modal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const MemberModal = ({ member, isOpen, onClose }: MemberModalProps) => {
2525

2626
return (
2727
<Dialog open={isOpen} onOpenChange={onClose}>
28-
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-scroll bg-white dark:border-none dark:bg-[#1a1a1a]">
28+
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-scroll bg-white dark:border-none dark:bg-[#1a1a1a] cursor-none">
2929
<DialogHeader>
3030
<DialogTitle className="text-2xl font-bold text-gray-900 dark:text-gray-100">
3131
Sobre {member.name}
@@ -66,7 +66,7 @@ const MemberModal = ({ member, isOpen, onClose }: MemberModalProps) => {
6666
<Building className="w-4 h-4" />
6767
<span className="font-medium">{member.title}</span>
6868
</div>
69-
<div className="text-[var(--azul-niebla)]">{member.role}</div>
69+
<div className="dark:text-[var(--azul-niebla)]">{member.role}</div>
7070
<Button
7171
variant="outline"
7272
className="mt-4 dark:hover:bg-[#121212] hover:bg-[var(--azul-niebla)] hover:text-[var(--azul-electrico)] hover:border-[var(--azul-crayon)] transition-colors duration-200"

‎src/components/home/sections/hero.tsx‎

Lines changed: 1 addition & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,8 @@
11
"use client";
2-
import React, { useEffect } from "react";
2+
import React from "react";
33
import ThreeBlobs from "../three-blobs";
44

55
export function Hero() {
6-
// Add mouse movement handler for the cursor
7-
useEffect(() => {
8-
const handleMouseMove = (event: MouseEvent) => {
9-
const cursor = document.getElementById('custom-cursor');
10-
if (cursor) {
11-
cursor.style.left = `${event.clientX}px`;
12-
cursor.style.top = `${event.clientY}px`;
13-
}
14-
};
15-
16-
window.addEventListener('mousemove', handleMouseMove);
17-
18-
// Cleanup
19-
return () => {
20-
window.removeEventListener('mousemove', handleMouseMove);
21-
};
22-
}, []);
236

247
return (
258
<section
@@ -75,19 +58,6 @@ export function Hero() {
7558
{/* Enhanced gradient overlay for depth */}
7659
<div
7760
className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-white/25 dark:to-white/15 pointer-events-none z-10"></div>
78-
79-
{/* Custom cursor with higher z-index to ensure it's always on top */}
80-
<div
81-
className="hidden xl:flex fixed rounded-full w-6 h-6 border-2 border-azul-noche dark:border-white pointer-events-none"
82-
style={{
83-
left: 0,
84-
top: 0,
85-
transform: 'translate(-50%, -50%)',
86-
transition: 'transform 0.05s ease',
87-
zIndex: 999 // Very high z-index to stay above all other elements
88-
}}
89-
id="custom-cursor"
90-
/>
9161
</section>
9262
);
9363
}

0 commit comments

Comments
 (0)