Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
reservation-service
Commits
60447e84
Commit
60447e84
authored
Oct 09, 2020
by
Ha YeaJin
Browse files
login page 완성
parent
94464e75
Changes
3
Hide whitespace changes
Inline
Side-by-side
server/client/src/Components/Menu.js
View file @
60447e84
...
...
@@ -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
"
class
Name
=
"
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
>
...
...
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
{
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 m
b-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
>
)
}
...
...
server/client/src/icon.png
0 → 100644
View file @
60447e84
2.44 MB
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment