|
1 | | -import logo from '../../assets/Codepply-Logotype-gradient.svg' |
2 | | -import { useContext, useEffect } from 'react' |
3 | | -import { useForm } from 'react-hook-form'; |
4 | | -import { Link, useLocation } from 'react-router'; |
5 | | -import { AuthContext } from '../../context/authContext'; |
| 1 | +import logo from "../../assets/Codepply-Logotype-gradient.svg"; |
| 2 | +import { useContext, useEffect } from "react"; |
| 3 | +import { useForm } from "react-hook-form"; |
| 4 | +import { Link, useLocation } from "react-router"; |
| 5 | +import { AuthContext } from "../../context/authContext"; |
6 | 6 | import { useNavigate } from "react-router"; |
7 | | -import { loginUser } from '../../services/authService'; |
| 7 | +import { loginUser } from "../../services/authService"; |
8 | 8 | export const Login = () => { |
9 | | - const { register, |
10 | | - watch, |
11 | | - handleSubmit, |
12 | | - formState: { errors } } = useForm(); |
13 | | - const navigate = useNavigate(); |
14 | | - const location = useLocation(); |
15 | | - const { setToken,profile } = useContext(AuthContext); |
| 9 | + const { |
| 10 | + register, |
| 11 | + watch, |
| 12 | + handleSubmit, |
| 13 | + formState: { errors }, |
| 14 | + } = useForm(); |
| 15 | + const navigate = useNavigate(); |
| 16 | + const location = useLocation(); |
| 17 | + const { setToken, profile } = useContext(AuthContext); |
16 | 18 |
|
17 | | - const login = async () => { |
18 | | - const resp = await loginUser(watch('email'), watch('password')); |
19 | | - localStorage.setItem('token', resp.token); |
20 | | - setToken(resp.token); // Esto dispara el efecto en el contexto |
21 | | - }; |
| 19 | + const login = async () => { |
| 20 | + const resp = await loginUser(watch("email"), watch("password")); |
| 21 | + localStorage.setItem("token", resp.token); |
| 22 | + setToken(resp.token); // Esto dispara el efecto en el contexto |
| 23 | + }; |
22 | 24 |
|
23 | | - // Cuando el profile se carga, redirigimos |
24 | | - useEffect(() => { |
| 25 | + // Cuando el profile se carga, redirigimos |
| 26 | + useEffect(() => { |
25 | 27 | if (profile) { |
26 | | - const from = location.state?.from; |
27 | | - if (from) { |
28 | | - navigate(from, { replace: true }); |
29 | | - } else if (profile.role.type === 'developer') { |
30 | | - navigate(`/profile/${profile._id}`, { replace: true }); |
31 | | - } else { |
32 | | - navigate(`/recruiter/${profile._id}`, { replace: true }); |
33 | | - } |
34 | | - } |
35 | | -}, [profile]); |
36 | | - |
37 | | - return ( |
38 | | - <div className="flex items-center justify-center px-4 mt-32 mb-56"> |
39 | | - <div className="card w-full max-w-md bg-neutral-80 shadow-2xl border-1 border-neutral-60"> |
| 28 | + const from = location.state?.from; |
40 | 29 |
|
41 | | - <div className="card-body"> |
42 | | - <h2 className="text-2xl font-bold text-center mb-4 mt-4">Login Account </h2> |
43 | | - |
44 | | - <form onSubmit={handleSubmit(login)} className="space-y-3"> |
45 | | - <div className="form-control"> |
46 | | - <label className="label"> |
47 | | - <span className="label-text text-neutral-20">Email</span> |
48 | | - </label> |
49 | | - <input |
50 | | - type="text" |
51 | | - placeholder="Your email" |
52 | | - className="input input-bordered input-md w-full bg-neutral-60 border-neutral-50" |
53 | | - {...register('email', { |
54 | | - required: { |
55 | | - value: true, |
56 | | - message: 'El campo es requerido' |
57 | | - }, |
58 | | - minLength: { |
59 | | - value: 4, |
60 | | - message: 'El campo debe tener al menos 4 caracteres' |
61 | | - } |
62 | | - })} |
63 | | - /> |
64 | | - { |
65 | | - errors.name && <p style={{ color: 'red' }}>{errors.name.message}</p> |
66 | | - } |
67 | | - </div> |
| 30 | + if (!profile.hasCompletedOnboarding) { |
| 31 | + navigate("/onboarding", { replace: true }); // 👈 redirige a onboarding |
| 32 | + } else if (from) { |
| 33 | + navigate(from, { replace: true }); |
| 34 | + } else if (profile.role.type === "developer") { |
| 35 | + navigate(`/profile/${profile._id}`, { replace: true }); |
| 36 | + } else { |
| 37 | + navigate(`/recruiter/${profile._id}`, { replace: true }); |
| 38 | + } |
| 39 | + } |
| 40 | + }, [profile]); |
68 | 41 |
|
69 | | - <div className="form-control"> |
70 | | - <label className="label"> |
71 | | - <span className="label-text text-neutral-20">Password</span> |
72 | | - </label> |
73 | | - <input |
74 | | - {...register('password')} |
75 | | - type="password" |
76 | | - placeholder="Your password" |
77 | | - className="input input-bordered input-md w-full bg-neutral-60 border-neutral-50" |
78 | | - /> |
79 | | - </div> |
| 42 | + return ( |
| 43 | + <div className="flex items-center justify-center px-4 mt-32 mb-56"> |
| 44 | + <div className="card w-full max-w-md bg-neutral-80 shadow-2xl border-1 border-neutral-60"> |
| 45 | + <div className="card-body"> |
| 46 | + <h2 className="text-2xl font-bold text-center mb-4 mt-4"> |
| 47 | + Login Account{" "} |
| 48 | + </h2> |
80 | 49 |
|
81 | | - <div className="form-control mt-6"> |
82 | | - <button className="btn bg-gradient-to-r from-primary-60 to-secondary-60 w-full text-lg text-neutral-0 font-semibold tracking-wide hover:bg-primary-70"> |
83 | | - Log in |
84 | | - </button> |
85 | | - </div> |
86 | | - </form> |
| 50 | + <form onSubmit={handleSubmit(login)} className="space-y-3"> |
| 51 | + <div className="form-control"> |
| 52 | + <label className="label"> |
| 53 | + <span className="label-text text-neutral-20">Email</span> |
| 54 | + </label> |
| 55 | + <input |
| 56 | + type="text" |
| 57 | + placeholder="Your email" |
| 58 | + className="input input-bordered input-md w-full bg-neutral-60 border-neutral-50" |
| 59 | + {...register("email", { |
| 60 | + required: { |
| 61 | + value: true, |
| 62 | + message: "El campo es requerido", |
| 63 | + }, |
| 64 | + minLength: { |
| 65 | + value: 4, |
| 66 | + message: "El campo debe tener al menos 4 caracteres", |
| 67 | + }, |
| 68 | + })} |
| 69 | + /> |
| 70 | + {errors.name && ( |
| 71 | + <p style={{ color: "red" }}>{errors.name.message}</p> |
| 72 | + )} |
| 73 | + </div> |
87 | 74 |
|
88 | | - <p className="text-sm text-center mt-2"> |
89 | | - Don't have an account yet?{' '} |
90 | | - <Link to={'/register'} className="text-primary-50 hover:underline">Sign Up</Link> |
91 | | - </p> |
92 | | - <img |
93 | | - src={logo} |
94 | | - alt="Codepply Logo" |
95 | | - className="h-6 mx-auto mt-8" |
96 | | - /> |
97 | | - <small className="text-[11px] text-neutral-30 text-center block mt-1"> |
98 | | - Codepply Spain ® 2025 |
99 | | - </small> |
| 75 | + <div className="form-control"> |
| 76 | + <label className="label"> |
| 77 | + <span className="label-text text-neutral-20">Password</span> |
| 78 | + </label> |
| 79 | + <input |
| 80 | + {...register("password")} |
| 81 | + type="password" |
| 82 | + placeholder="Your password" |
| 83 | + className="input input-bordered input-md w-full bg-neutral-60 border-neutral-50" |
| 84 | + /> |
| 85 | + </div> |
100 | 86 |
|
101 | | - </div> |
| 87 | + <div className="form-control mt-6"> |
| 88 | + <button className="btn bg-gradient-to-r from-primary-60 to-secondary-60 w-full text-lg text-neutral-0 font-semibold tracking-wide hover:bg-primary-70"> |
| 89 | + Log in |
| 90 | + </button> |
102 | 91 | </div> |
| 92 | + </form> |
| 93 | + |
| 94 | + <p className="text-sm text-center mt-2"> |
| 95 | + Don't have an account yet?{" "} |
| 96 | + <Link to={"/register"} className="text-primary-50 hover:underline"> |
| 97 | + Sign Up |
| 98 | + </Link> |
| 99 | + </p> |
| 100 | + <img src={logo} alt="Codepply Logo" className="h-6 mx-auto mt-8" /> |
| 101 | + <small className="text-[11px] text-neutral-30 text-center block mt-1"> |
| 102 | + Codepply Spain ® 2025 |
| 103 | + </small> |
103 | 104 | </div> |
104 | | - ); |
| 105 | + </div> |
| 106 | + </div> |
| 107 | + ); |
105 | 108 | }; |
0 commit comments