File name
Commit message
Commit date
2023-04-18
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import React from "react";
import { useNavigate, useLocation } from "react-router";
import Join from "./../join/Join.jsx";
import passwordChange from "./../main/PasswordChange.jsx";
import Button from "../../component/Button.jsx";
export default function Login() {
const navigate = useNavigate();
const location = useLocation();
//로그인 정보
const [loginInfo, setLoginInfo] = React.useState({ 'user_id': '', 'user_password': '' });
//사용자의 입력으로 인한 로그인 정보 변경
const loginInfoChange = (key, value) => {
let newLoginInfo = JSON.parse(JSON.stringify(loginInfo));
newLoginInfo[key] = value;
setLoginInfo(newLoginInfo);
}
//로그인 엔터
const loginEnter = (key) => {
if (key == 'Enter') {
login();
} else {
return;
}
}
//로그인
const login = () => {
fetch("/user/login.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(loginInfo),
}).then((response) => response.json()).then((data) => {
console.log("로그인 결과 : ", data);
if (data.isSuccess == true) {
navigate('/');
} else {
alert(data.message);
}
}).catch((error) => {
console.log('login() /user/login.json error : ', error);
});
};
return (
<div className="row login-wrap">
<h1>시니어 스마트 케어 모니터링 플랫폼</h1>
{location.pathname == '/Join' ? (<Join />) : (
<div className="container row flex-center join-login">
<div className="login-form">
<div>
<h3>로그인</h3>
<div className="login-inner">
<div className="content">
<i className="fa-solid fa-user"></i>
<input type="text" placeholder="아이디를 입력하세요"
value={loginInfo['user_id']}
onChange={(e) => { loginInfoChange('user_id', e.target.value) }}
onKeyUp={(e) => { loginEnter(e.key) }}
/>
</div>
<div className="content">
<i className="fa-solid fa-lock"></i>
<input type="password" placeholder="비밀번호를 입력하세요"
value={loginInfo['user_password']}
onChange={(e) => { loginInfoChange('user_password', e.target.value) }}
onKeyUp={(e) => { loginEnter(e.key) }}
/>
</div>
</div>
</div>
<div className="btn-wrap">
<Button
className={"btn-100 gray-btn"}
btnName={"로그인"}
onClick={login}
/>
<div className="flex-center btn-bottom">
<Button
className={"join-btn"}
btnName={"회원가입"}
onClick={() => { navigate('/Join') }}
/>
</div>
</div>
</div>
</div>
)}
</div>
);
}