Commit 60447e84 authored by Ha YeaJin's avatar Ha YeaJin
Browse files

login page 완성

parent 94464e75
......@@ -3,28 +3,36 @@ import { Link, Redirect } from 'react-router-dom';
import styled from 'styled-components';
const Nav = styled.nav`
background-color: #981e1e;
background-color: #7B031D;
max-height : 50px;
a {
color: #ffffff;
}
`
function Menu() {
const [state, setState] = useState()
if (state) return <Redirect to="/" />;
function logout() {
localStorage.removeItem('token');
alert("로그아웃 되었습니다.");
alert("로그인 화면으로 이동합니다.");
setState(true);
}
return (
<Nav className="navbar sticky-top navbar-expand-md">
<Link to="/home" className="navbar-brand">대관 서비스</Link>
<a class="navbar-brand" href="#">대관 서비스</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="collapsibleNavbar">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
<ul className="navbar-nav">
<li className="nav-item">
<Link to="/notice" className="nav-link">공지사항</Link>
</li>
<li className="nav-item">
<Link to="/home" className="nav-link">대관 현황</Link>
</li>
......@@ -34,13 +42,10 @@ function Menu() {
<li className="nav-item">
<Link to="/check" className="nav-link">대관 확인/취소</Link>
</li>
<li className="nav-item">
<Link to="/notice" className="nav-link">공지사항</Link>
</li>
</ul>
<div>
<div></div>
<button onClick={logout} type="button">로그아웃</button>
<button><Link to="/signup">회원가입</Link></button>
</div>
</div>
</Nav>
......
import React, { useState } from 'react';
import React, { useState, useEffect, useRef } from 'react';
import styled from 'styled-components';
import { Link, Redirect } from 'react-router-dom';
import { Formik } from 'formik';
import * as Yup from 'yup';
import axios from 'axios';
import 'bootstrap/dist/css/bootstrap.css';
import Logo from '../icon.png';
const Log = styled.div`
background-color: #981e1e;
`
const Logo = styled.div`
background-color: #E76A6A;
const Asd = styled.div`
background-color: #7B031D;
&.web {
display : flex;
align-items: center;
}
&.mobile {
height : 20vh;
display : flex;
}
& .mob-head {
display: flex;
flex-direction: row;
height : 100%;
width: 100%;
justify-content: center;
align-content: center;
}
& .mob-img {
max-width:100%;
max-height:100%;
}
`
const Asdf = styled.div`
background-color: rgb(239, 218, 200);
a {
color : #7B031D;
}
&.mob-formik {
height : 80vh;
width: 100%;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
&.web-formik {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
& .mobb {
height: 30vh;
display: flex;
flex-direction: column;
justify-content: space-around;
}
& .qwer {
display: flex;
justify-content: space-between;
height: 12vh;
width: 30vw;
margin-bottom: 25px;
}
& .web-input-form {
width: 80%;
justify-content: space-between;
align-content: space-around;
display: flex;
flex-direction: column;
}
& .mob-input-form {
}
`
function Login() {
const [state, setState]= useState(false);
const [state, setState] = useState(false);
const [mobile, setMobile] = useState(false);
useEffect(() => {
if (window.innerWidth < 960) {
setMobile(true)
} else {
setMobile(false)
}
}, []);
if (state) {
return <Redirect to="/home" />;
}
if (state) {
return <Redirect to="/home" />;
}
return (
<div className="container-fluid">
<div className="row">
<Logo className="col-md-5 col-12">
<h2>고려대학교</h2>
<h4>대관 시스템</h4>
</Logo>
<Log className="col-md-7 col-12">
<Formik
initialValues={{ id: '', password: '' }}
validationSchema={Yup.object({
id: Yup.string()
.required('학번을 입력해주세요.'),
password: Yup.string()
.required('비밀번호를 입력해주세요.')
.min(8, '8자 이상 입력해주세요.'),
})}
onSubmit={(values, { setSubmitting }) => {
axios({
method: 'post',
url: '/login',
data: values,
}).then(res => {
if (res.status === 404) return alert(res.data.error)
alert("로그인이 완료되었습니다!")
localStorage.setItem('token', res.data.token);
localStorage.setItem('id', res.data.users._id);
setState(true);
})
.catch(err => {
<div className="row vw-100 vh-100">
<Asd className={"col-md-4 px-0" + (mobile ? " mobile" : " web")}>
<div className={mobile ? " mob-head" : ""}>
<img className={mobile ? " mob-img" : "img-fluid"} src={Logo} />
<div className="d-flex justify-content-center">
<h1 className="font-weight-bold text-white align-self-center">고려대학교<br />대관 서비스</h1>
</div>
</div>
</Asd>
<Asdf className={"col-md-8 col-12" + (mobile ? " mob-formik" : " web-formik")}>
<Formik
initialValues={{ id: '', password: '' }}
validationSchema={Yup.object({
id: Yup.string()
.required('학번을 입력해주세요.'),
password: Yup.string()
.required('비밀번호를 입력해주세요.')
.min(8, '8자 이상 입력해주세요.'),
})}
onSubmit={(values, { setSubmitting }) => {
axios({
method: 'post',
url: '/login',
data: values,
}).then(res => {
if (res.status === 404) return alert(res.data.error)
localStorage.setItem('token', res.data.token);
localStorage.setItem('id', res.data.users._id);
setState(true);
})
.catch(err => {
alert(err.error)
});
setTimeout(() => {
setSubmitting(false);
}, 400); // finish the cycle in handler
}}
>
{({
errors,
touched,
handleSubmit,
getFieldProps, // contain values, handleChange, handleBlur
isSubmitting,
}) => (
<div className="row justify-content-center align-items-center">
<form onSubmit={handleSubmit} className="col-sm-3">
<div className="form-group mb-4">
});
setTimeout(() => {
setSubmitting(false);
}, 400); // finish the cycle in handler
}}
>
{({
errors,
touched,
handleSubmit,
getFieldProps, // contain values, handleChange, handleBlur
isSubmitting,
}) => (
<form onSubmit={handleSubmit} className={mobile ? "w-90 h-50vh" : ""}>
<div className={mobile ? "mobb" : "qwer"}>
<div className={(mobile ? "mob-" : "web-") + "input-form"}>
<div className={"form-group m-0" + (mobile ? " mb-3" : "")}>
<input
className={(touched.id && errors.id ? 'form-control is-invalid' : "form-control")}
type="number"
......@@ -76,11 +160,8 @@ function Login() {
{...getFieldProps('id')}
placeholder="Input Student Id"
/>
{touched.id && errors.id ? (
<div className="invalid-feedback text-left">{errors.id}</div>
) : null}
</div>
<div className="form-group mb-4">
<div className="form-group m-0">
<input
className={(touched.password && errors.password ? 'form-control is-invalid' : "form-control")}
type="password"
......@@ -88,26 +169,19 @@ function Login() {
{...getFieldProps('password')}
placeholder="Input Password"
/>
{touched.password && errors.password ? (
<div className="invalid-feedback text-left">{errors.password}</div>
) : null}
</div>
<button type="submit" className="btn btn-dark" disabled={isSubmitting}>
Login
</button>
<button><Link to="/home"></Link></button>
<div></div>
<Link to="/signup">비밀번호를 잊으셨나요?</Link>
<div></div>
<Link to="/signup">회원이 아니신가요?</Link>
</form>
</div>
<button type="submit" className={"btn btn-dark" + (mobile ? " w-100" : " w-20")} disabled={isSubmitting}> Login </button>
</div>
)}
</Formik>
</Log>
</div>
</div>
<div className="">
<Link to="/signup">비밀번호를 잊으셨나요? </Link> /
<Link to="/signup"> 회원이 아니신가요?</Link>
</div>
</form>
)}
</Formik>
</Asdf>
</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