Skip to content

GitLab

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

login page 완성

parent 94464e75
Show whitespace changes
Inline Side-by-side
server/client/src/Components/Menu.js
View file @ 60447e84
...@@ -3,7 +3,12 @@ import { Link, Redirect } from 'react-router-dom'; ...@@ -3,7 +3,12 @@ import { Link, Redirect } from 'react-router-dom';
import styled from 'styled-components'; import styled from 'styled-components';
const Nav = styled.nav` const Nav = styled.nav`
background-color: #981e1e; background-color: #7B031D;
max-height : 50px;
a {
color: #ffffff;
}
` `
function Menu() { function Menu() {
...@@ -13,18 +18,21 @@ function Menu() { ...@@ -13,18 +18,21 @@ function Menu() {
function logout() { function logout() {
localStorage.removeItem('token'); localStorage.removeItem('token');
alert("로그아웃 되었습니다."); alert("로그인 화면으로 이동합니다.");
setState(true); setState(true);
} }
return ( return (
<Nav className="navbar sticky-top navbar-expand-md"> <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"> <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="collapsibleNavbar">
<span className="navbar-toggler-icon"></span> <span className="navbar-toggler-icon"></span>
</button> </button>
<div className="collapse navbar-collapse justify-content-between" id="collapsibleNavbar"> <div className="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
<ul className="navbar-nav"> <ul className="navbar-nav">
<li className="nav-item">
<Link to="/notice" className="nav-link">공지사항</Link>
</li>
<li className="nav-item"> <li className="nav-item">
<Link to="/home" className="nav-link">대관 현황</Link> <Link to="/home" className="nav-link">대관 현황</Link>
</li> </li>
...@@ -34,13 +42,10 @@ function Menu() { ...@@ -34,13 +42,10 @@ function Menu() {
<li className="nav-item"> <li className="nav-item">
<Link to="/check" className="nav-link">대관 확인/취소</Link> <Link to="/check" className="nav-link">대관 확인/취소</Link>
</li> </li>
<li className="nav-item">
<Link to="/notice" className="nav-link">공지사항</Link>
</li>
</ul> </ul>
<div> <div>
<div></div>
<button onClick={logout} type="button">로그아웃</button> <button onClick={logout} type="button">로그아웃</button>
<button><Link to="/signup">회원가입</Link></button>
</div> </div>
</div> </div>
</Nav> </Nav>
......
server/client/src/Pages/LoginPage.js
View file @ 60447e84
import React, { useState } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { Link, Redirect } from 'react-router-dom'; import { Link, Redirect } from 'react-router-dom';
import { Formik } from 'formik'; import { Formik } from 'formik';
import * as Yup from 'yup'; import * as Yup from 'yup';
import axios from 'axios'; import axios from 'axios';
import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap/dist/css/bootstrap.css';
import Logo from '../icon.png';
const Log = styled.div` const Asd = styled.div`
background-color: #981e1e; background-color: #7B031D;
`
const Logo = styled.div` &.web {
background-color: #E76A6A; 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() { 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) { if (state) {
return <Redirect to="/home" />; return <Redirect to="/home" />;
} }
return ( return (
<div className="container-fluid"> <div className="row vw-100 vh-100">
<div className="row"> <Asd className={"col-md-4 px-0" + (mobile ? " mobile" : " web")}>
<Logo className="col-md-5 col-12"> <div className={mobile ? " mob-head" : ""}>
<h2>고려대학교</h2> <img className={mobile ? " mob-img" : "img-fluid"} src={Logo} />
<h4>대관 시스템</h4> <div className="d-flex justify-content-center">
</Logo> <h1 className="font-weight-bold text-white align-self-center">고려대학교<br />대관 서비스</h1>
<Log className="col-md-7 col-12"> </div>
</div>
</Asd>
<Asdf className={"col-md-8 col-12" + (mobile ? " mob-formik" : " web-formik")}>
<Formik <Formik
initialValues={{ id: '', password: '' }} initialValues={{ id: '', password: '' }}
validationSchema={Yup.object({ validationSchema={Yup.object({
...@@ -44,7 +128,6 @@ function Login() { ...@@ -44,7 +128,6 @@ function Login() {
data: values, data: values,
}).then(res => { }).then(res => {
if (res.status === 404) return alert(res.data.error) if (res.status === 404) return alert(res.data.error)
alert("로그인이 완료되었습니다!")
localStorage.setItem('token', res.data.token); localStorage.setItem('token', res.data.token);
localStorage.setItem('id', res.data.users._id); localStorage.setItem('id', res.data.users._id);
...@@ -66,9 +149,10 @@ function Login() { ...@@ -66,9 +149,10 @@ function Login() {
getFieldProps, // contain values, handleChange, handleBlur getFieldProps, // contain values, handleChange, handleBlur
isSubmitting, isSubmitting,
}) => ( }) => (
<div className="row justify-content-center align-items-center"> <form onSubmit={handleSubmit} className={mobile ? "w-90 h-50vh" : ""}>
<form onSubmit={handleSubmit} className="col-sm-3"> <div className={mobile ? "mobb" : "qwer"}>
<div className="form-group mb-4"> <div className={(mobile ? "mob-" : "web-") + "input-form"}>
<div className={"form-group m-0" + (mobile ? " mb-3" : "")}>
<input <input
className={(touched.id && errors.id ? 'form-control is-invalid' : "form-control")} className={(touched.id && errors.id ? 'form-control is-invalid' : "form-control")}
type="number" type="number"
...@@ -76,11 +160,8 @@ function Login() { ...@@ -76,11 +160,8 @@ function Login() {
{...getFieldProps('id')} {...getFieldProps('id')}
placeholder="Input Student Id" placeholder="Input Student Id"
/> />
{touched.id && errors.id ? (
<div className="invalid-feedback text-left">{errors.id}</div>
) : null}
</div> </div>
<div className="form-group mb-4"> <div className="form-group m-0">
<input <input
className={(touched.password && errors.password ? 'form-control is-invalid' : "form-control")} className={(touched.password && errors.password ? 'form-control is-invalid' : "form-control")}
type="password" type="password"
...@@ -88,26 +169,19 @@ function Login() { ...@@ -88,26 +169,19 @@ function Login() {
{...getFieldProps('password')} {...getFieldProps('password')}
placeholder="Input Password" placeholder="Input Password"
/> />
{touched.password && errors.password ? (
<div className="invalid-feedback text-left">{errors.password}</div>
) : null}
</div> </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> </div>
)} <button type="submit" className={"btn btn-dark" + (mobile ? " w-100" : " w-20")} disabled={isSubmitting}> Login </button>
</Formik>
</Log>
</div> </div>
<div className="">
<Link to="/signup">비밀번호를 잊으셨나요? </Link> /
<Link to="/signup"> 회원이 아니신가요?</Link>
</div> </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