Skip to content

GitLab

Commit 6031e83e authored by Ha YeaJin's avatar Ha YeaJin
Browse files

RBS 로그인 화면 적용중

parent 3df803a8
Hide whitespace changes
Inline Side-by-side
server/client/src/Pages/ChangePage.js
View file @ 6031e83e
...@@ -2,86 +2,106 @@ import React, { useState } from 'react'; ...@@ -2,86 +2,106 @@ import React, { useState } from 'react';
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 Menu from '../Components/Menu';
import { Link, Redirect } from 'react-router-dom'; 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) { function Change(props) {
const [state, setState] = useState(); const [state, setState] = useState();
const [checkPw, setCheckPw] = useState(true);
if (state) { if (state) {
return <Redirect to="/" />; return <Redirect to="/" />;
} }
console.log(props) // console.log(props)
return ( return (
<div className="d-flex flex-column justify-content-between vh-100"> <div className="">
<Formik <Menu />
initialValues={{ password: '' }} <Container fluid className="p-0 vh-90">
validationSchema={Yup.object({ <Check className="row justify-content-center m-0">
password: Yup.string() <Col md={4} className="pt-5">
.required('비밀번호를 입력해주세요.') <Formik
.min(8, '8자 이상 입력해주세요.'), initialValues={{ password: '' }}
password2: Yup.string() validationSchema={Yup.object({
.required('비밀번호를 다시 입력해주세요.') password: Yup.string()
.min(8, '8자 이상 입력해주세요.') .required('비밀번호를 입력해주세요.')
.oneOf([Yup.ref("password"), null], '비밀번호가 일치하지 않습니다.'), .min(8, '8자 이상 입력해주세요.'),
})} password2: Yup.string()
onSubmit={(values, { setSubmitting }) => { .required('비밀번호를 다시 입력해주세요.')
axios.put(`/users/change/${props.location.state.id}`, { ...values }, .min(8, '8자 이상 입력해주세요.')
) .oneOf([Yup.ref("password"), null], '비밀번호가 일치하지 않습니다.'),
.then(res => { })}
console.log(res.data); onSubmit={(values, { setSubmitting }) => {
if (res.status === 404) return alert(res.data.error) axios.put(`/users/change/${props.location.state.id}`, { ...values },
alert("회원정보가 수정되었습니다!") )
setState(true); .then(res => {
}) console.log(res.data);
.catch(err => { if (res.status === 404) return alert(res.data.error)
alert(err.error) alert("회원정보가 수정되었습니다!")
}); 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,
}) => (
<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="새로운 비밀번호"
/>
</div>
<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"
name="password2"
{...getFieldProps('password2')}
placeholder="새 비밀번호를 다시 입력해주세요."
/>
</div>
<Button type="submit" variant="secondary" disabled={isSubmitting}>저장하기</Button>
</form>
)}
</Formik>
</Col>
</Check>
setTimeout(() => { </Container>
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">
<input
className={(touched.password && errors.password ? 'form-control is-invalid' : "form-control")}
type="password"
name="password"
{...getFieldProps('password')}
placeholder="새 비밀번호를 입력해주세요."
/>
{touched.password && errors.password ? (
<div className="invalid-feedback text-left">{errors.password}</ div>
) : null}
</div>
<div className="form-group mb-4">
<input
className={(touched.password2 && errors.password2 ? 'form-control is-invalid' : "form-control")}
type="password"
name="password2"
{...getFieldProps('password2')}
placeholder="새 비밀번호를 다시 입력해주세요."
/>
{touched.password2 && errors.password2 ? (
<div className="invalid-feedback text-left">{errors.password2}</div>
) : null}
</div>
<button type="submit" className="btn btn-light" disabled={isSubmitting}>저장</button>
</form>
</div>
)}
</Formik>
</div > </div >
); );
} }
......
server/client/src/Pages/FindPage.js
View file @ 6031e83e
...@@ -4,14 +4,13 @@ import * as Yup from 'yup'; ...@@ -4,14 +4,13 @@ import * as Yup from 'yup';
import axios from 'axios'; import axios from 'axios';
import { Link, Redirect } from 'react-router-dom'; import { Link, Redirect } from 'react-router-dom';
import styled from 'styled-components'; 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; background-color: #7B031D;
height: 10vh;
a { a {
color: #ffffff; color : white;
} }
` `
...@@ -26,12 +25,12 @@ function Find() { ...@@ -26,12 +25,12 @@ function Find() {
} }
return ( return (
<div className="vh-100"> <div className="vh-100">
<Nav className="navbar sticky-top navbar-expand-md"> <Menu expand="md" variant="dark">
<a class="navbar-brand" href="#">비밀번호 찾기</a> <Navbar.Brand>비밀번호 찾기</Navbar.Brand>
</Nav> </Menu>
<Container fluid> <Container fluid>
<Row className="justify-content-center rrooww"> <Row className="justify-content-center">
<Col md={4} className="d-flex align-items-center h-100"> <Col md={3} xs={11} className="p-0">
<Formik <Formik
initialValues={{ id: '', question: '', answer: '' }} initialValues={{ id: '', question: '', answer: '' }}
validationSchema={Yup.object({ validationSchema={Yup.object({
...@@ -67,47 +66,41 @@ function Find() { ...@@ -67,47 +66,41 @@ function Find() {
getFieldProps, // contain values, handleChange, handleBlur getFieldProps, // contain values, handleChange, handleBlur
isSubmitting, isSubmitting,
}) => ( }) => (
<Row className="justify-content-center align-items-center"> <form onSubmit={handleSubmit} className="d-flex flex-column pt-5">
<form onSubmit={handleSubmit}> <div className="form-group pb-2">
<Col sm={3}> <div className={touched.id && errors.id ? "text-danger" : ""}>학번을 입력하세요</div>
<div className="form-group mb-4"> <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" name="id"
name="id" {...getFieldProps('id')}
{...getFieldProps('id')} placeholder="Input Student Id"
placeholder="Input Student Id" />
/> </div>
{touched.id && errors.id ? (
<div className="invalid-feedback text-left">{errors.id}</div> <div className="form-group pb-2">
) : null} <label className="pr-2">본인 확인 질문</label>
</div> <Field as="select" name="question">
<div className="form-group mb-4"> <option value="">질문을 선택하세요</option>
<label>본인 확인 질문</label> <option value="life">자신의 인생 좌우명은?</option>
<Field as="select" name="question"> <option value="school">자신이 다녔던 초등학교의 이름은?</option>
<option value="">질문을 선택하세요</option> <option value="place">기억에 남는 추억의 장소는?</option>
<option value="life">자신의 인생 좌우명은?</option> </Field>
<option value="school">자신이 다녔던 초등학교의 이름은?</option> </div>
<option value="place">기억에 남는 추억의 장소는?</option>
</Field> <div className="form-group pb-2">
</div> <div className={touched.answer && errors.answer ? "text-danger" : ""}>답변을 입력해주세요.</div>
<div className="form-group mb-4"> <input
<input className={(touched.answer && errors.answer ? 'form-control is-invalid' : "form-control")}
className={(touched.answer && errors.answer ? 'form-control is-invalid' : "form-control")} type="text"
type="text" name="answer"
name="answer" {...getFieldProps('answer')}
{...getFieldProps('answer')} placeholder="Input answer" />
placeholder="Input answer" /> </div>
{touched.answer && errors.answer ? (
<div className="invalid-feedback text-left">{errors.answer}</div> <Button className="mb-2" variant="secondary" type="submit" disabled={isSubmitting}>비밀번호 찾기</Button>
) : null} <Button variant="outline-secondary" as={Link} to="/login">로그인하러 가기</Button>
</div> </form>
<button type="submit" className="btn btn-dark" disabled={isSubmitting}>submit </button>
<button><Link to="/login">로그인</Link></button>
<button><Link to="/">홈</Link></button>
</Col>
</form>
</Row>
)} )}
</Formik> </Formik>
</Col> </Col>
......
server/client/src/Pages/LoginPage.js
View file @ 6031e83e
...@@ -5,7 +5,7 @@ import { Formik } from 'formik'; ...@@ -5,7 +5,7 @@ import { Formik } from 'formik';
import * as Yup from 'yup'; import * as Yup from 'yup';
import axios from 'axios'; import axios from 'axios';
import Logo from '../icon.png'; import Logo from '../icon.png';
import { Container, Row } from 'react-bootstrap'; import { Container, Row, Button } from 'react-bootstrap';
const Col_1 = styled.div` const Col_1 = styled.div`
background-color: #7B031D; background-color: #7B031D;
...@@ -58,10 +58,8 @@ const Col_2 = styled.div` ...@@ -58,10 +58,8 @@ const Col_2 = styled.div`
} }
& .mob-container { & .mob-container {
height: 35vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around;
} }
& .webb { & .webb {
...@@ -70,18 +68,15 @@ const Col_2 = styled.div` ...@@ -70,18 +68,15 @@ const Col_2 = styled.div`
& .web-container { & .web-container {
display: flex; display: flex;
justify-content: space-between;
height: 12vh; height: 12vh;
width: 30vw; width: 30vw;
margin-bottom: 25px;
} }
& .web-input-form { & .web-input-form {
width: 80%; width: 80%;
justify-content: space-between;
align-content: space-around;
flex-direction: column;
display: flex; display: flex;
flex-direction: column;
justify-content: space-around;
} }
& .mob-input-form { & .mob-input-form {
...@@ -158,10 +153,10 @@ function Login() { ...@@ -158,10 +153,10 @@ function Login() {
isSubmitting, isSubmitting,
}) => ( }) => (
<div className={mobile ? " mob-formik p-0" : " web-form"}> <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-container" : "web-container"}>
<div className={mobile ? "mob-input-form h-100" : "web-input-form"}> <div className={mobile ? "mob-input-form" : "web-input-form mr-2"}>
<div className={"form-group m-0" + (mobile ? " mb-2" : "")}> <div className={"form-group m-0" + (mobile ? " mb-2" : " ")}>
<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"
...@@ -170,7 +165,7 @@ function Login() { ...@@ -170,7 +165,7 @@ function Login() {
placeholder="Input Student Id" placeholder="Input Student Id"
/> />
</div> </div>
<div className="form-group h-80 m-0"> <div className={"form-group m-0"+ (mobile ? " mb-2" : " ")}>
<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"
...@@ -180,7 +175,7 @@ function Login() { ...@@ -180,7 +175,7 @@ function Login() {
/> />
</div> </div>
</div> </div>
<button type="submit" className={"btn btn-dark" + (mobile ? " w-100" : " w-20")} disabled={isSubmitting}> Login </button> <Button type="submit" variant="dark" className={mobile ? " w-100" : " w-20"} disabled={isSubmitting}> Login </Button>
</div> </div>
<div><Link to="/find">비밀번호를 잊으셨나요?</Link></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'; ...@@ -4,13 +4,13 @@ import * as Yup from 'yup';
import axios from 'axios'; import axios from 'axios';
import { Link, Redirect } from 'react-router-dom'; import { Link, Redirect } from 'react-router-dom';
import styled from 'styled-components'; import styled from 'styled-components';
import { Col, Container, Navbar } from 'react-bootstrap';
const Nav = styled.nav` const Menu = styled(Navbar)`
background-color: #7B031D; background-color: #7B031D;
height: 10vh;
a { a {
color: #ffffff; color : white;
} }
` `
...@@ -22,7 +22,7 @@ const Wow = styled.div` ...@@ -22,7 +22,7 @@ const Wow = styled.div`
} }
& #reCheck:not(.right) { & #reCheck:not(.right) {
content: '비밀번호가 다릅니다.'; content: '비밀번호가 일치하지 않습니다.';
color: red; color: red;
} }
...@@ -41,12 +41,12 @@ function Signup() { ...@@ -41,12 +41,12 @@ function Signup() {
} }
return ( return (
<div className="vh-100"> <div className="vh-100">
<Nav className="navbar sticky-top navbar-expand-md"> <Menu expand="md" variant="dark">
<a class="navbar-brand" href="#">회원가입</a> <Navbar.Brand>회원가입</Navbar.Brand>
</Nav> </Menu>
<div className="container-fluid"> <Container fluid>
<Wow className="row justify-content-center rrooww"> <Wow className="row justify-content-center">
<div className="col-md-4 col-12 d-flex align-items-center h-100"> <Col md={4} className="d-flex align-items-center h-100">
<Formik <Formik
initialValues={{ name: '', id: '', password: '', password2: '', question: '', answer: '' }} initialValues={{ name: '', id: '', password: '', password2: '', question: '', answer: '' }}
validationSchema={Yup.object({ validationSchema={Yup.object({
...@@ -92,10 +92,7 @@ function Signup() { ...@@ -92,10 +92,7 @@ function Signup() {
isSubmitting, isSubmitting,
}) => ( }) => (
< form onSubmit={handleSubmit} className="asd"> < form onSubmit={handleSubmit} className="asd">
{/* col-sm-3 */}
<div className="form-group "> <div className="form-group ">
{/* mb-4 */}
<div className={touched.name && errors.name ? "text-danger" : ""}>이름을 입력하세요</div> <div className={touched.name && errors.name ? "text-danger" : ""}>이름을 입력하세요</div>
<input <input
className={(touched.name && errors.name ? 'form-control is-invalid' : "form-control")} className={(touched.name && errors.name ? 'form-control is-invalid' : "form-control")}
...@@ -104,10 +101,9 @@ function Signup() { ...@@ -104,10 +101,9 @@ function Signup() {
{...getFieldProps('name')} {...getFieldProps('name')}
placeholder="이름" /> placeholder="이름" />
</div> </div>
<div className="form-group"> <div className="form-group">
{/* mb-4 */}
<div className={touched.id && errors.id ? "text-danger" : ""}>학번을 입력하세요</div> <div className={touched.id && errors.id ? "text-danger" : ""}>학번을 입력하세요</div>
<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="text" type="text"
...@@ -115,14 +111,10 @@ function Signup() { ...@@ -115,14 +111,10 @@ function Signup() {
{...getFieldProps('id')} {...getFieldProps('id')}
placeholder="학번/교번" placeholder="학번/교번"
/> />
{/* {touched.id && errors.id ? (
<div className="invalid-feedback text-left">{errors.id}</div>
) : null} */}
</div> </div>
<div className="form-group"> <div className="form-group">
{/* mb-4 */}
<div className={touched.password && errors.password ? "text-danger" : ""}>비밀번호를 입력하세요(8자리 이상)</div> <div className={touched.password && errors.password ? "text-danger" : ""}>비밀번호를 입력하세요(8자리 이상)</div>
<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"
...@@ -130,12 +122,9 @@ function Signup() { ...@@ -130,12 +122,9 @@ function Signup() {
{...getFieldProps('password')} {...getFieldProps('password')}
placeholder="비밀번호" placeholder="비밀번호"
/> />
{/* {touched.password && errors.password ? (
<div className="invalid-feedback text-left">{errors.password}</div>
) : null} */}
</div> </div>
<div className="form-group"> <div className="form-group">
{/* mb-4 */}
{touched.password2 && errors.password2 ? setCheckPw(false) : null} {touched.password2 && errors.password2 ? setCheckPw(false) : null}
<div id="reCheck" className={checkPw ? "right" : "err"}></div> <div id="reCheck" className={checkPw ? "right" : "err"}></div>
<input <input
...@@ -145,10 +134,9 @@ function Signup() { ...@@ -145,10 +134,9 @@ function Signup() {
{...getFieldProps('password2')} {...getFieldProps('password2')}
placeholder="비밀번호 확인" placeholder="비밀번호 확인"
/> />
</div> </div>
<div className="form-group"> <div className="form-group">
{/* mb-4 */}
<label>본인 확인 질문</label> <label>본인 확인 질문</label>
<Field as="select" name="question"> <Field as="select" name="question">
<option value="">질문을 선택하세요</option> <option value="">질문을 선택하세요</option>
...@@ -158,9 +146,7 @@ function Signup() { ...@@ -158,9 +146,7 @@ function Signup() {
</Field> </Field>
</div> </div>
<div className="form-group"> <div className="form-group">
{/* mb-4 */}
<div className={touched.answer && errors.answer ? "text-danger" : ""}>답변을 입력해주세요.</div> <div className={touched.answer && errors.answer ? "text-danger" : ""}>답변을 입력해주세요.</div>
<input <input
className={(touched.answer && errors.answer ? 'form-control is-invalid' : "form-control")} className={(touched.answer && errors.answer ? 'form-control is-invalid' : "form-control")}
type="text" type="text"
...@@ -173,13 +159,12 @@ function Signup() { ...@@ -173,13 +159,12 @@ function Signup() {
</form> </form>
)} )}
</Formik> </Formik>
</div> </Col>
</Wow> </Wow>
</div> </Container>
</div > </div >
); );
} }
export default Signup; export default Signup;
\ No newline at end of file
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