Skip to content

GitLab

Commit fd848334 authored by Choi Ga Young's avatar Choi Ga Young
Browse files

비밀번호 찾기&변경 기능완성

parent e67fdeae
Expand all Show whitespace changes
Inline Side-by-side
server/client/src/Pages/ChangePage.js 0 → 100644
View file @ fd848334
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 { Link, Redirect } from 'react-router-dom';
function Change() {
// const [state, setState] = useState(false);
// if (state) {
// return <Redirect to="/login" />;
// }
return (
<div className="d-flex flex-column justify-content-between vh-100">
<Formik
initialValues={{ password: '' }}
validationSchema={Yup.object({
password: Yup.string()
.required('비밀번호를 입력해주세요.')
.min(8, '8자 이상 입력해주세요.'),
password2: Yup.string()
.required('비밀번호를 다시 입력해주세요.')
.min(8, '8자 이상 입력해주세요.')
.oneOf([Yup.ref("password"), null], '비밀번호가 일치하지 않습니다.'),
})}
onSubmit={(values, { setSubmitting }) => {
axios.put(`/users`, { ...values, id: localStorage.getItem('id') },
)
.then(res => {
console.log(res.data);
if (res.status === 404) return alert(res.data.error)
alert("회원정보가 수정되었습니다!")
})
.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">
<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>
<button class="btn btn-light"><Link to="/login">로그인</Link></button>
</form>
</div>
)}
</Formik>
</div >
);
}
export default Change;
\ No newline at end of file
server/client/src/Pages/FindPage.js 0 → 100644
View file @ fd848334
import React, { useState } from 'react';
import { Field, Form, Formik } from 'formik';
import * as Yup from 'yup';
import axios from 'axios';
import 'bootstrap/dist/css/bootstrap.css';
import { Link, Redirect } from 'react-router-dom';
function Find() {
const [state, setState] = useState(false);
if (state) {
return <Redirect to="/change" />;
}
return (
<div className="d-flex flex-column justify-content-between vh-100">
<Formik
initialValues={{ id: '', question: '', answer: '' }}
validationSchema={Yup.object({
id: Yup.string()
.required('학번을 입력해주세요.'),
answer: Yup.string()
.required('답변을 입력해주세요.'),
})}
onSubmit={(values, { setSubmitting }) => {
axios({
method: 'post',
url: '/login/find',
data: values,
}).then(res => {
if (res.status === 404) return alert(res.data.error)
localStorage.setItem('id', res.data.users._id);
setState(true);
})
.catch(err => {
alert(err.error)
});
console.log(values);
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">
<input
className={(touched.id && errors.id ? 'form-control is-invalid' : "form-control")}
type="number"
name="id"
{...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>
<Field as="select" name="question">
<option value="">질문을 선택하세요</option>
<option value="life">자신의 인생 좌우명은?</option>
<option value="school">자신이 다녔던 초등학교의 이름은?</option>
<option value="place">기억에 남는 추억의 장소는?</option>
</Field>
</div>
<div className="form-group mb-4">
<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>
</form>
</div>
)}
</Formik>
</div>
);
}
// const withFormik = Formik({
// mapPropsToValues: () => ({ color: '' }),
// validationSchema: Yup.object().shape({
// color: Yup.string().required('Color is required!'),
// }),
// handleSubmit: (values, { setSubmitting }) => {
// setTimeout(() => {
// alert(JSON.stringify(values, null, 2));
// setSubmitting(false);
// }, 1000);
// },
// displayName: 'BasicForm', // helps with React DevTools
// });
// const MyForm = props => {
// const {
// values,
// touched,
// errors,
// dirty,
// isSubmitting,
// handleChange,
// handleBlur,
// handleSubmit,
// handleReset,
// } = props;
// return (
// <form onSubmit={handleSubmit}>
// <label htmlFor="email" style={{ display: 'block' }}>
// Color
// </label>
// <select
// name="color"
// value={values.color}
// onChange={handleChange}
// onBlur={handleBlur}
// style={{ display: 'block' }}
// >
// <option value="" label="Select a color" />
// <option value="red" label="red" />
// <option value="blue" label="blue" />
// <option value="green" label="green" />
// </select>
// {errors.color &&
// touched.color &&
// <div className="input-feedback">
// {errors.color}
// </div>}
// <button
// type="button"
// className="outline"
// onClick={handleReset}
// disabled={!dirty || isSubmitting}
// >
// Reset
// </button>
// <button type="submit" disabled={isSubmitting}>
// Submit
// </button>
// <DisplayFormikState {...props} />
// </form>
// );
// };
export default Find;
server/client/src/Pages/HomePage.js
View file @ fd848334
......@@ -10,6 +10,7 @@ function Home() {
home
<button><Link to="/login">로그인</Link></button>
<button><Link to="/signup">회원가입</Link></button>
<button><Link to="/change">비밀번호 수정</Link></button>
</div>
</div>
)
......
server/client/src/Pages/Login.js deleted 100644 → 0
View file @ e67fdeae
import React, { } from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
const Log = styled.div`
background-color: #981e1e;
`
const Logo = styled.div`
background-color: #E76A6A;
`
function Login() {
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">
<form encType='multipart/form-data' className="mt-4" style={{ height: "100%" }}>
<div className="form-group">
<label for="title_input">학번</label>
<input className="form-control" id="title_input" name="title" type="text" required />
</div>
<div className="form-group">
<label for="author_input">비밀번호</label>
<input className="form-control" id="author_input" name="author" type="text" required />
</div>
<div className="form-group">
<Link to="/home">
<button className="btn" type="submit">로그인</button>
</Link>
</div>
</form>
</Log>
</div>
</div>
)
}
export default Login
server/client/src/Pages/LoginPage.js
View file @ fd848334
......@@ -7,10 +7,10 @@ import axios from 'axios';
import 'bootstrap/dist/css/bootstrap.css';
const Log = styled.div`
background-color: #981e1e;
background-color: #7B031D;
`
const Logo = styled.div`
background-color: #E76A6A;
background-color: rgb(239, 218, 200);
`
......@@ -92,12 +92,12 @@ function Login() {
<div className="invalid-feedback text-left">{errors.password}</div>
) : null}
</div>
<button type="submit" className="btn btn-dark" disabled={isSubmitting}>
<button type="submit" class="btn btn-outline-light" disabled={isSubmitting}>
Login
</button>
<button><Link to="/home">홈</Link></button>
<button class="btn btn-outline-light"><Link to="/home">홈</Link></button>
<div></div>
<Link to="/signup">비밀번호를 잊으셨나요?</Link>
<Link to="/find">비밀번호를 잊으셨나요?</Link>
<div></div>
<Link to="/signup">회원이 아니신가요?</Link>
</form>
......
server/client/src/Pages/SignupPage.js
View file @ fd848334
import React, { useState } from 'react';
import { Formik } from 'formik';
import { Field, Formik } from 'formik';
import * as Yup from 'yup';
import axios from 'axios';
import 'bootstrap/dist/css/bootstrap.css';
......@@ -15,7 +15,7 @@ function Signup() {
return (
<div className="d-flex flex-column justify-content-between vh-100">
<Formik
initialValues={{ name: '', id: '', password: '', password2: ''}}
initialValues={{ name: '', id: '', password: '', password2: '', question: '', answer: '' }}
validationSchema={Yup.object({
name: Yup.string()
.required('이름을 입력해주세요.'),
......@@ -28,6 +28,9 @@ function Signup() {
.required('비밀번호를 다시 입력해주세요.')
.min(8, '8자 이상 입력해주세요.')
.oneOf([Yup.ref("password"), null], '비밀번호가 일치하지 않습니다.'),
answer: Yup.string()
.required('답변을 입력해주세요.'),
})}
onSubmit={(values, { setSubmitting }) => {
axios({
......@@ -64,7 +67,7 @@ function Signup() {
type="text"
name="name"
{...getFieldProps('name')}
placeholder="Input Name" />
placeholder="이름" />
{touched.name && errors.name ? (
<div className="invalid-feedback text-left">{errors.name}</div>
) : null}
......@@ -72,10 +75,10 @@ function Signup() {
<div className="form-group mb-4">
<input
className={(touched.id && errors.id ? 'form-control is-invalid' : "form-control")}
type="number"
type="text"
name="id"
{...getFieldProps('id')}
placeholder="Input Student Id"
placeholder="학번/교번"
/>
{touched.id && errors.id ? (
<div className="invalid-feedback text-left">{errors.id}</div>
......@@ -87,7 +90,7 @@ function Signup() {
type="password"
name="password"
{...getFieldProps('password')}
placeholder="Input Password"
placeholder="비밀번호"
/>
{touched.password && errors.password ? (
<div className="invalid-feedback text-left">{errors.password}</div>
......@@ -99,17 +102,37 @@ function Signup() {
type="password"
name="password2"
{...getFieldProps('password2')}
placeholder="Input Confirm Password"
placeholder="비밀번호 확인"
/>
{touched.password2 && errors.password2 ? (
<div className="invalid-feedback text-left">{errors.password2}</div>
) : null}
</div>
<button type="submit" className="btn btn-dark" disabled={isSubmitting}>
<div className="form-group mb-4">
<label>본인 확인 질문</label>
<Field as="select" name="question">
<option value="">질문을 선택하세요</option>
<option value="life">자신의 인생 좌우명은?</option>
<option value="school">자신이 다녔던 초등학교의 이름은?</option>
<option value="place">기억에 남는 추억의 장소는?</option>
</Field>
</div>
<div className="form-group mb-4">
<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" class="btn btn-light" disabled={isSubmitting}>
Sign Up
</button>
<button><Link to="/login">로그인</Link></button>
<button><Link to="/">홈</Link></button>
<button class="btn btn-light"><Link to="/login">로그인</Link></button>
<button class="btn btn-light"><Link to="/">홈</Link></button>
</form>
</div>
)}
......
server/client/src/index.js
View file @ fd848334
......@@ -10,6 +10,8 @@ import { PrivateRoute } from './Components/PrivateRoute';
import Login from './Pages/LoginPage';
import Home from './Pages/HomePage';
import Signup from './Pages/SignupPage';
import Find from './Pages/FindPage';
import Change from './Pages/ChangePage';
import Apply from './Pages/ApplyPage';
import Check from './Pages/CheckPage';
import Notice from './Pages/NoticePage';
......@@ -25,11 +27,14 @@ ReactDOM.render(
<Route path="/login" component={Login} />
<Route path="/home" component={Home} />
<Route path="/signup" component={Signup} />
<Route path="/find" component={Find} />
<Route path="/change" component={Change} />
<Route path="/apply" component={Apply} />
<Route path="/check" component={Check} />
<Route path="/notice" component={Notice} />
<Redirect path="/login" to="/" />
<Redirect path="/home" to="/" />
<Redirect path="/change/:id" to="/change"/>
</Switch>
</Router>,
document.getElementById('root')
......
server/package-lock.json
View file @ fd848334
This diff is collapsed.
server/package.json
View file @ fd848334
......@@ -15,6 +15,7 @@
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.10.6",
"morgan": "~1.9.1",
"npm": "^6.14.8",
"pug": "^3.0.0"
}
}
server/routes/login.js
View file @ fd848334
......@@ -2,6 +2,7 @@ const express = require('express');
const User = require('../schemas/user');
const bcrypt = require("bcrypt");
const jwt = require('jsonwebtoken');
const user = require('../schemas/user');
const router = express.Router();
......@@ -23,7 +24,7 @@ router.post('/', function (req, res, next) {
if (err) return res.status(500).json({ error: err });
if (!users) {
return res.status(404).json({ error: '해당 아이디가 존재하지 않습니다.' });
return res.status(404).json({ error: '해당 학번이 존재하지 않습니다.' });
}
bcrypt.compare(req.body.password, users.password, function (err, result) {
......@@ -49,4 +50,21 @@ router.post('/', function (req, res, next) {
})
});
router.post('/find', function (req, res, next) {
console.log('/find post request', req.body)
User.findOne({ id: req.body.id }, 'id question answer', function (err, users) {
console.log('/user inform', users)
if (err) return res.status(500).json({ error: err });
if (users.question === req.body.question) {
if (users.answer === req.body.answer) {
return res.status(201).json({users});
}
return res.status(404).json({ error: '답변이 일치하지 않습니다.'});
}
return res.status(404).json({error: '질문을 다시 선택해주세요.'});
})
});
module.exports = router;
server/routes/users.js
View file @ fd848334
......@@ -11,13 +11,15 @@ router.post('/', function (req, res, next) {
if (err) return res.status(500).json({ error: err });
if (users) {
return res.status(404).json({ error: '이미 존재하는 아이디입니다.' })
return res.status(404).json({ error: '이미 존재하는 학번입니다.' })
};
const user = new User({
name: req.body.name,
id: req.body.id,
password: req.body.password,
question: req.body.question,
answer: req.body.answer,
});
user.save()
......@@ -31,4 +33,31 @@ router.post('/', function (req, res, next) {
});
})
});
router.put('/', function (req, res, next) {
console.log('/change put req.body', req.body)
User.findOne({ _id: req.body.id }, 'password', function (err, user) {
if (err) return res.status(500).json({ error: err });
bcrypt.compare(req.body.password, user.password, function (err, result) {
if (err) {
console.log(err)
return res.status(500).json({ error: err });
}
if (result) {
return res.status(404).json({ error: '새로운 비밀번호를 입력해주세요.' })
}
});
user.password = req.body.password;
user.save()
.then((result) => {
console.log(result);
res.status(201).json(result);
})
.catch((err) => {
console.error(err);
next(err);
});
})
});
module.exports = router;
server/schemas/user.js
View file @ fd848334
......@@ -12,6 +12,17 @@ const userSchema = new Schema({
type: String,
},
role: {
type: String,
default:'user',
},
answer:{
type: String,
},
question: {
type: String,
},
id: {
type: Number,
required: true,
......
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