Commit 4ff854ff authored by Yoon, Daeki's avatar Yoon, Daeki 😅
Browse files

로그인에 로직 적용

parent a8cb6867
import React, { useState } from "react";
import React, { ChangeEvent, FormEvent, useState } from "react";
import { useNavigate } from "react-router-dom";
// type LoginProps = {
// };
import { catchErrors } from "../helpers";
import { SpinnerIcon } from "../icons";
import { useAuth } from "./auth.context";
export const Login = () => {
// interface IUSER {
// email: string;
// password: string;
// }
// const [error, setError] = useState("");
// const [disabled, setDisabled] = useState(false);
// const [success, setSuccess] = useState(false);
// const navigate = useNavigate();
// function handleChange(event: type) {}
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
const [loginData, setLoginData] = useState({ email: "", password: "" });
const navigate = useNavigate();
const { login } = useAuth();
// function handleSubmit(params: type) {}
function handleChange(e: ChangeEvent<HTMLInputElement>) {
const { name, value } = e.currentTarget;
setLoginData({ ...loginData, [name]: value });
}
// if (success) {
// alert("회원가입 되었습니다");
// navigate(`../`);
// }
async function handleSubmit(e: FormEvent) {
e.preventDefault();
console.log(loginData);
const { email, password } = loginData;
try {
setLoading(true);
await login(email, password, () => navigate("/", { replace: true }));
} catch (error) {
setLoading(false);
catchErrors(error, setError);
}
}
return (
<div className="flex justify-center mt-3">
<div className="flex flex-col space-y-4 mt-5 text-xl font-bold">
<form
onSubmit={handleSubmit}
className="flex flex-col space-y-4 mt-5 text-xl font-bold"
>
<label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
이메일
</label>
<input
onChange={handleChange}
className="shadow appearance-none border rounded py-2 px-3 text-gray-70"
id="email"
name="email"
type="email"
autoComplete="username"
placeholder="이메일을 입력하세요"
value={loginData.email}
/>
<label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
비밀번호
</label>
<input
onChange={handleChange}
className="shadow appearance-none border rounded py-2 px-3 text-gray-70"
id="username"
name="password"
type="password"
autoComplete="current-password"
placeholder="비밀번호를 입력하세요"
value={loginData.password}
/>
{error && (
<div className="text-red-500 text-sm mb-6">
<p>{error}</p>
</div>
)}
<div className="text-center">
<button className="bg-themeColor text-white border rounded w-100 py-2 px-3 mt-3">
<button
type="submit"
disabled={loading ? true : false}
className="bg-themeColor text-white border rounded w-100 py-2 px-3 mt-3"
>
{loading && (
<SpinnerIcon className="animate-spin h-5 w-5 mr-1 text-white" />
)}
로그인
</button>
</div>
</div>
</form>
</div>
);
};
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment