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
6031e83e
Commit
6031e83e
authored
Nov 03, 2020
by
Ha YeaJin
Browse files
RBS 로그인 화면 적용중
parent
3df803a8
Changes
4
Show whitespace changes
Inline
Side-by-side
server/client/src/Pages/ChangePage.js
View file @
6031e83e
...
...
@@ -2,18 +2,38 @@ import React, { useState } from 'react';
import
{
Formik
}
from
'
formik
'
;
import
*
as
Yup
from
'
yup
'
;
import
axios
from
'
axios
'
;
import
'
bootstrap/dist/css/bootstrap.css
'
;
import
Menu
from
'
../Components/Menu
'
;
import
{
Link
,
Redirect
}
from
'
react-router-dom
'
;
import
{
Container
,
Button
,
Col
}
from
'
react-bootstrap
'
;
import
styled
from
'
styled-components
'
;
const
Check
=
styled
.
div
`
& #reCheck::after {
content: '새로운 비밀번호를 다시 입력하세요';
}
& #reCheck:not(.right) {
content: '비밀번호가 일치하지 않습니다.';
color: red;
}
`
function
Change
(
props
)
{
const
[
state
,
setState
]
=
useState
();
const
[
checkPw
,
setCheckPw
]
=
useState
(
true
);
if
(
state
)
{
return
<
Redirect
to
=
"
/
"
/>
;
}
console
.
log
(
props
)
// console.log(props)
return
(
<
div
className
=
"
d-flex flex-column justify-content-between vh-100
"
>
<
div
className
=
""
>
<
Menu
/>
<
Container
fluid
className
=
"
p-0 vh-90
"
>
<
Check
className
=
"
row justify-content-center m-0
"
>
<
Col
md
=
{
4
}
className
=
"
pt-5
"
>
<
Formik
initialValues
=
{{
password
:
''
}}
validationSchema
=
{
Yup
.
object
({
...
...
@@ -38,7 +58,6 @@ function Change(props) {
alert
(
err
.
error
)
});
setTimeout
(()
=>
{
setSubmitting
(
false
);
},
400
);
// finish the cycle in handler
...
...
@@ -51,21 +70,21 @@ function Change(props) {
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
"
>
<
form
onSubmit
=
{
handleSubmit
}
className
=
"
d-flex flex-column
"
>
<
div
className
=
"
form-group
"
>
<
div
className
=
{
touched
.
password
&&
errors
.
password
?
"
text-danger
"
:
""
}
>
새
비밀번호를
입력하세요
(
8
자리
이상
)
<
/div
>
<
input
className
=
{(
touched
.
password
&&
errors
.
password
?
'
form-control is-invalid
'
:
"
form-control
"
)}
type
=
"
password
"
name
=
"
password
"
{...
getFieldProps
(
'
password
'
)}
placeholder
=
"
새 비밀번호
를 입력해주세요.
"
placeholder
=
"
새
로운
비밀번호
"
/>
{
touched
.
password
&&
errors
.
password
?
(
<
div
className
=
"
invalid-feedback text-left
"
>
{
errors
.
password
}
<
/ div
>
)
:
null
}
<
/div
>
<
div
className
=
"
form-group mb-4
"
>
<
div
className
=
"
form-group
"
>
{
touched
.
password2
&&
errors
.
password2
?
setCheckPw
(
false
)
:
null
}
<
div
id
=
"
reCheck
"
className
=
{
checkPw
?
"
right
"
:
"
err
"
}
><
/div
>
<
input
className
=
{(
touched
.
password2
&&
errors
.
password2
?
'
form-control is-invalid
'
:
"
form-control
"
)}
type
=
"
password
"
...
...
@@ -73,15 +92,16 @@ function Change(props) {
{...
getFieldProps
(
'
password2
'
)}
placeholder
=
"
새 비밀번호를 다시 입력해주세요.
"
/>
{
touched
.
password2
&&
errors
.
password2
?
(
<
div
className
=
"
invalid-feedback text-left
"
>
{
errors
.
password2
}
<
/div
>
)
:
null
}
<
/div
>
<
b
utton
type
=
"
submit
"
className
=
"
btn btn-light
"
disabled
=
{
isSubmitting
}
>
저장
<
/
b
utton
>
<
B
utton
type
=
"
submit
"
variant
=
"
secondary
"
disabled
=
{
isSubmitting
}
>
저장
하기
<
/
B
utton
>
<
/form
>
<
/div
>
)}
<
/Formik
>
<
/Col
>
<
/Check
>
<
/Container
>
<
/div
>
);
}
...
...
server/client/src/Pages/FindPage.js
View file @
6031e83e
...
...
@@ -4,14 +4,13 @@ import * as Yup from 'yup';
import
axios
from
'
axios
'
;
import
{
Link
,
Redirect
}
from
'
react-router-dom
'
;
import
styled
from
'
styled-components
'
;
import
{
Container
,
Row
,
Col
}
from
'
react-bootstrap
'
;
import
{
Navbar
,
Container
,
Row
,
Col
,
Button
}
from
'
react-bootstrap
'
;
const
Nav
=
styled
.
nav
`
const
Menu
=
styled
(
Navbar
)
`
background-color: #7B031D;
height: 10vh;
a {
color:
#ffffff
;
color
:
white
;
}
`
...
...
@@ -26,12 +25,12 @@ function Find() {
}
return
(
<
div
className
=
"
vh-100
"
>
<
Nav
className
=
"
navbar sticky-top navbar-expand-md
"
>
<
a
class
=
"
n
avbar
-b
rand
"
href
=
"
#
"
>
비밀번호
찾기
<
/a
>
<
/
Nav
>
<
Menu
expand
=
"
md
"
variant
=
"
dark
"
>
<
N
avbar
.
B
rand
>
비밀번호
찾기
<
/Navbar.Brand
>
<
/
Menu
>
<
Container
fluid
>
<
Row
className
=
"
justify-content-center
rrooww
"
>
<
Col
md
=
{
4
}
className
=
"
d-flex align-items-center h-10
0
"
>
<
Row
className
=
"
justify-content-center
"
>
<
Col
md
=
{
3
}
xs
=
{
11
}
className
=
"
p-
0
"
>
<
Formik
initialValues
=
{{
id
:
''
,
question
:
''
,
answer
:
''
}}
validationSchema
=
{
Yup
.
object
({
...
...
@@ -67,10 +66,9 @@ function Find() {
getFieldProps
,
// contain values, handleChange, handleBlur
isSubmitting
,
})
=>
(
<
Row
className
=
"
justify-content-center align-items-center
"
>
<
form
onSubmit
=
{
handleSubmit
}
>
<
Col
sm
=
{
3
}
>
<
div
className
=
"
form-group mb-4
"
>
<
form
onSubmit
=
{
handleSubmit
}
className
=
"
d-flex flex-column pt-5
"
>
<
div
className
=
"
form-group pb-2
"
>
<
div
className
=
{
touched
.
id
&&
errors
.
id
?
"
text-danger
"
:
""
}
>
학번을
입력하세요
<
/div
>
<
input
className
=
{(
touched
.
id
&&
errors
.
id
?
'
form-control is-invalid
'
:
"
form-control
"
)}
type
=
"
number
"
...
...
@@ -78,12 +76,10 @@ function Find() {
{...
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
"
>
<
label
>
본인
확인
질문
<
/label
>
<
div
className
=
"
form-group pb-2
"
>
<
label
className
=
"
pr-2
"
>
본인
확인
질문
<
/label
>
<
Field
as
=
"
select
"
name
=
"
question
"
>
<
option
value
=
""
>
질문을
선택하세요
<
/option
>
<
option
value
=
"
life
"
>
자신의
인생
좌우명은
?
<
/option
>
...
...
@@ -91,23 +87,20 @@ function Find() {
<
option
value
=
"
place
"
>
기억에
남는
추억의
장소는
?
<
/option
>
<
/Field
>
<
/div
>
<
div
className
=
"
form-group mb-4
"
>
<
div
className
=
"
form-group pb-2
"
>
<
div
className
=
{
touched
.
answer
&&
errors
.
answer
?
"
text-danger
"
:
""
}
>
답변을
입력해주세요
.
<
/div
>
<
input
className
=
{(
touched
.
answer
&&
errors
.
answer
?
'
form-control is-invalid
'
:
"
form-control
"
)}
type
=
"
text
"
name
=
"
answer
"
{...
getFieldProps
(
'
answer
'
)}
placeholder
=
"
Input answer
"
/>
{
touched
.
answer
&&
errors
.
answer
?
(
<
div
className
=
"
invalid-feedback text-left
"
>
{
errors
.
answer
}
<
/div
>
)
:
null
}
<
/div
>
<
button
type
=
"
submit
"
className
=
"
btn btn-dark
"
disabled
=
{
isSubmitting
}
>
submit
<
/button
>
<
button
><
Link
to
=
"
/login
"
>
로그인
<
/Link></
button
>
<
button
><
Link
to
=
"
/
"
>
홈
<
/Link></
button
>
<
/Col
>
<
Button
className
=
"
mb-2
"
variant
=
"
secondary
"
type
=
"
submit
"
disabled
=
{
isSubmitting
}
>
비밀번호
찾기
<
/Button
>
<
Button
variant
=
"
outline-secondary
"
as
=
{
Link
}
to
=
"
/login
"
>
로그인하러
가기
<
/Button
>
<
/form
>
<
/Row
>
)}
<
/Formik
>
<
/Col
>
...
...
server/client/src/Pages/LoginPage.js
View file @
6031e83e
...
...
@@ -5,7 +5,7 @@ import { Formik } from 'formik';
import
*
as
Yup
from
'
yup
'
;
import
axios
from
'
axios
'
;
import
Logo
from
'
../icon.png
'
;
import
{
Container
,
Row
}
from
'
react-bootstrap
'
;
import
{
Container
,
Row
,
Button
}
from
'
react-bootstrap
'
;
const
Col_1
=
styled
.
div
`
background-color: #7B031D;
...
...
@@ -58,10 +58,8 @@ const Col_2 = styled.div`
}
& .mob-container {
height: 35vh;
display: flex;
flex-direction: column;
justify-content: space-around;
}
& .webb {
...
...
@@ -70,18 +68,15 @@ const Col_2 = styled.div`
& .web-container {
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;
flex-direction: column;
display: flex;
flex-direction: column;
justify-content: space-around;
}
& .mob-input-form {
...
...
@@ -158,10 +153,10 @@ function Login() {
isSubmitting
,
})
=>
(
<
div
className
=
{
mobile
?
"
mob-formik p-0
"
:
"
web-form
"
}
>
<
form
onSubmit
=
{
handleSubmit
}
className
=
{
mobile
?
"
w-75
h-50vh
"
:
"
d-flex webb
"
}
>
<
form
onSubmit
=
{
handleSubmit
}
className
=
{
mobile
?
"
w-75
"
:
"
d-flex webb
"
}
>
<
div
className
=
{
mobile
?
"
mob-container
"
:
"
web-container
"
}
>
<
div
className
=
{
mobile
?
"
mob-input-form
h-100
"
:
"
web-input-form
"
}
>
<
div
className
=
{
"
form-group m-0
"
+
(
mobile
?
"
mb-2
"
:
""
)}
>
<
div
className
=
{
mobile
?
"
mob-input-form
"
:
"
web-input-form
mr-2
"
}
>
<
div
className
=
{
"
form-group m-0
"
+
(
mobile
?
"
mb-2
"
:
"
"
)}
>
<
input
className
=
{(
touched
.
id
&&
errors
.
id
?
'
form-control is-invalid
'
:
"
form-control
"
)}
type
=
"
number
"
...
...
@@ -170,7 +165,7 @@ function Login() {
placeholder
=
"
Input Student Id
"
/>
<
/div
>
<
div
className
=
"
form-group
h-80 m-0
"
>
<
div
className
=
{
"
form-group
m-0
"
+
(
mobile
?
"
mb-2
"
:
"
"
)}
>
<
input
className
=
{(
touched
.
password
&&
errors
.
password
?
'
form-control is-invalid
'
:
"
form-control
"
)}
type
=
"
password
"
...
...
@@ -180,7 +175,7 @@ function Login() {
/>
<
/div
>
<
/div
>
<
b
utton
type
=
"
submit
"
className
=
{
"
btn btn-dark
"
+
(
mobile
?
"
w-100
"
:
"
w-20
"
)
}
disabled
=
{
isSubmitting
}
>
Login
<
/
b
utton
>
<
B
utton
type
=
"
submit
"
variant
=
"
dark
"
className
=
{
mobile
?
"
w-100
"
:
"
w-20
"
}
disabled
=
{
isSubmitting
}
>
Login
<
/
B
utton
>
<
/div
>
<
div
><
Link
to
=
"
/find
"
>
비밀번호를
잊으셨나요
?
<
/Link></
div
>
...
...
server/client/src/Pages/SignupPage.js
View file @
6031e83e
...
...
@@ -4,13 +4,13 @@ import * as Yup from 'yup';
import
axios
from
'
axios
'
;
import
{
Link
,
Redirect
}
from
'
react-router-dom
'
;
import
styled
from
'
styled-components
'
;
import
{
Col
,
Container
,
Navbar
}
from
'
react-bootstrap
'
;
const
Nav
=
styled
.
nav
`
const
Menu
=
styled
(
Navbar
)
`
background-color: #7B031D;
height: 10vh;
a {
color:
#ffffff
;
color
:
white
;
}
`
...
...
@@ -22,7 +22,7 @@ const Wow = styled.div`
}
& #reCheck:not(.right) {
content: '비밀번호가
다릅
니다.';
content: '비밀번호가
일치하지 않습
니다.';
color: red;
}
...
...
@@ -41,12 +41,12 @@ function Signup() {
}
return
(
<
div
className
=
"
vh-100
"
>
<
Nav
className
=
"
navbar sticky-top navbar-expand-md
"
>
<
a
class
=
"
n
avbar
-b
rand
"
href
=
"
#
"
>
회원가입
<
/a
>
<
/
Nav
>
<
div
className
=
"
c
ontainer
-
fluid
"
>
<
Wow
className
=
"
row justify-content-center
rrooww
"
>
<
div
className
=
"
col-md-4 col-12
d-flex align-items-center h-100
"
>
<
Menu
expand
=
"
md
"
variant
=
"
dark
"
>
<
N
avbar
.
B
rand
>
회원가입
<
/Navbar.Brand
>
<
/
Menu
>
<
C
ontainer
fluid
>
<
Wow
className
=
"
row justify-content-center
"
>
<
Col
md
=
{
4
}
className
=
"
d-flex align-items-center h-100
"
>
<
Formik
initialValues
=
{{
name
:
''
,
id
:
''
,
password
:
''
,
password2
:
''
,
question
:
''
,
answer
:
''
}}
validationSchema
=
{
Yup
.
object
({
...
...
@@ -92,10 +92,7 @@ function Signup() {
isSubmitting
,
})
=>
(
<
form
onSubmit
=
{
handleSubmit
}
className
=
"
asd
"
>
{
/* col-sm-3 */
}
<
div
className
=
"
form-group
"
>
{
/* mb-4 */
}
<
div
className
=
{
touched
.
name
&&
errors
.
name
?
"
text-danger
"
:
""
}
>
이름을
입력하세요
<
/div
>
<
input
className
=
{(
touched
.
name
&&
errors
.
name
?
'
form-control is-invalid
'
:
"
form-control
"
)}
...
...
@@ -104,10 +101,9 @@ function Signup() {
{...
getFieldProps
(
'
name
'
)}
placeholder
=
"
이름
"
/>
<
/div
>
<
div
className
=
"
form-group
"
>
{
/* mb-4 */
}
<
div
className
=
{
touched
.
id
&&
errors
.
id
?
"
text-danger
"
:
""
}
>
학번을
입력하세요
<
/div
>
<
input
className
=
{(
touched
.
id
&&
errors
.
id
?
'
form-control is-invalid
'
:
"
form-control
"
)}
type
=
"
text
"
...
...
@@ -115,14 +111,10 @@ function Signup() {
{...
getFieldProps
(
'
id
'
)}
placeholder
=
"
학번/교번
"
/>
{
/* {touched.id && errors.id ? (
<div className="invalid-feedback text-left">{errors.id}</div>
) : null} */
}
<
/div
>
<
div
className
=
"
form-group
"
>
{
/* mb-4 */
}
<
div
className
=
{
touched
.
password
&&
errors
.
password
?
"
text-danger
"
:
""
}
>
비밀번호를
입력하세요
(
8
자리
이상
)
<
/div
>
<
input
className
=
{(
touched
.
password
&&
errors
.
password
?
'
form-control is-invalid
'
:
"
form-control
"
)}
type
=
"
password
"
...
...
@@ -130,12 +122,9 @@ function Signup() {
{...
getFieldProps
(
'
password
'
)}
placeholder
=
"
비밀번호
"
/>
{
/* {touched.password && errors.password ? (
<div className="invalid-feedback text-left">{errors.password}</div>
) : null} */
}
<
/div
>
<
div
className
=
"
form-group
"
>
{
/* mb-4 */
}
{
touched
.
password2
&&
errors
.
password2
?
setCheckPw
(
false
)
:
null
}
<
div
id
=
"
reCheck
"
className
=
{
checkPw
?
"
right
"
:
"
err
"
}
><
/div
>
<
input
...
...
@@ -145,10 +134,9 @@ function Signup() {
{...
getFieldProps
(
'
password2
'
)}
placeholder
=
"
비밀번호 확인
"
/>
<
/div
>
<
div
className
=
"
form-group
"
>
{
/* mb-4 */
}
<
label
>
본인
확인
질문
<
/label
>
<
Field
as
=
"
select
"
name
=
"
question
"
>
<
option
value
=
""
>
질문을
선택하세요
<
/option
>
...
...
@@ -158,9 +146,7 @@ function Signup() {
<
/Field
>
<
/div
>
<
div
className
=
"
form-group
"
>
{
/* mb-4 */
}
<
div
className
=
{
touched
.
answer
&&
errors
.
answer
?
"
text-danger
"
:
""
}
>
답변을
입력해주세요
.
<
/div
>
<
input
className
=
{(
touched
.
answer
&&
errors
.
answer
?
'
form-control is-invalid
'
:
"
form-control
"
)}
type
=
"
text
"
...
...
@@ -173,13 +159,12 @@ function Signup() {
<
/form
>
)}
<
/Formik
>
<
/
div
>
<
/
Col
>
<
/Wow
>
<
/
div
>
<
/
Container
>
<
/div
>
);
}
export
default
Signup
;
\ No newline at end of file
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