find 완료-가영change연결 필요

server/client/src/Pages/ChangePage.js

+import React, { useState, useEffect } from 'react';
+
+function Change() {
+    return (
+        <div>
+            <div className="container">change
+            </div>
+        </div>
+    )
+}
+
+export default Change
\ No newline at end of file

server/client/src/Pages/FindPage.js

+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)
+
+                        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

@@ -8,7 +8,7 @@ function Home() {
             <Menu />
             <div className="container">
                 home
-                <button><Link to="/">로그인</Link></button>
+                <button><Link to="/login">로그인</Link></button>
                 <button><Link to="/signup">회원가입</Link></button>
             </div>
         </div>

server/client/src/Pages/LoginPage.js

@@ -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);
 `
 
 
@@ -97,7 +97,7 @@ function Login() {
                                         </button>
                                         <button><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

 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';
 import { Link, Redirect } from 'react-router-dom';
 
 function Signup() {
-      const [state, setState] = useState(false);
+    const [state, setState] = useState(false);
 
-      if (state) {
+    if (state) {
         return <Redirect to="/login" />;
-      }
+    }
 
     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,21 +28,23 @@ function Signup() {
                         .required('비밀번호를 다시 입력해주세요.')
                         .min(8, '8자 이상 입력해주세요.')
                         .oneOf([Yup.ref("password"), null], '비밀번호가 일치하지 않습니다.'),
+                    answer: Yup.string()
+                        .required('답변을 입력해주세요.'),
                 })}
                 onSubmit={(values, { setSubmitting }) => {
                     axios({
-                      method: 'post',
-                      url: '/users',
-                      data: values,
+                        method: 'post',
+                        url: '/users',
+                        data: values,
                     }).then(res => {
-                      if (res.status === 404) return alert(res.data.error)
-                    alert("회원가입이 완료되었습니다!")
+                        if (res.status === 404) return alert(res.data.error)
+                        alert("회원가입이 완료되었습니다!")
 
-                      setState(true);
+                        setState(true);
                     })
-                      .catch(err => {
-                        alert(err.error)
-                      });
+                        .catch(err => {
+                            alert(err.error)
+                        });
 
                     setTimeout(() => {
                         setSubmitting(false);
@@ -72,7 +74,7 @@ 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"
@@ -105,6 +107,26 @@ function Signup() {
                                         <div className="invalid-feedback text-left">{errors.password2}</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}>
                                     Sign Up
                                 </button>

server/client/src/index.js

@@ -4,8 +4,7 @@ import * as serviceWorker from './serviceWorker';
 import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
 import 'bootstrap/dist/css/bootstrap.css';
 import axios from 'axios';
-// import { PrivateRoute } from './PrivateRoute';
-
+import { PrivateRoute } from './Components/PrivateRoute';
 
 import Login from './Pages/LoginPage';
 import Home from './Pages/HomePage';
@@ -13,6 +12,8 @@ import Signup from './Pages/SignupPage';
 import Apply from './Pages/ApplyPage';
 import Check from './Pages/CheckPage';
 import Notice from './Pages/NoticePage';
+import Find from './Pages/FindPage';
+import Change from './Pages/ChangePage';
 
 axios.defaults.validateStatus = function (status) {
   return status < 500; // default
@@ -21,12 +22,18 @@ axios.defaults.validateStatus = function (status) {
 ReactDOM.render(
 <Router>
     <Switch>
-      <Route exact path="/" component={Login} />
+      <PrivateRoute exact path="/" component={Home} />
+      <Route path="/login" component={Login} />
       <Route path="/home" component={Home} />
       <Route path="/signup" component={Signup} />
       <Route path="/apply" component={Apply} />
       <Route path="/check" component={Check} />
       <Route path="/notice" component={Notice} />
+      <Route path="/find" component={Find} />
+      <Route path="/change" component={Change}/>
+      <Redirect path="/login" to="/" />
+      <Redirect path="/home" to="/" />
+      <Redirect path="/change/:id" to="/change"/>
     </Switch>
   </Router>,
   document.getElementById('root')

server/routes/login.js

@@ -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) {
@@ -34,7 +35,7 @@ router.post('/', function (req, res, next) {
 
             if (result) {
                 const token = jwt.sign({
-                    id:users.id,
+                    id: users.id,
                 }, process.env.JWT_SECRET, {
                     expiresIn: '1m',
                 });
@@ -49,4 +50,18 @@ 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) {
+        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

@@ -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,6 @@ router.post('/', function (req, res, next) {
       });
   })
 });
+
+
 module.exports = router;

server/schemas/user.js

@@ -4,38 +4,44 @@ const saltRounds = 10;
 
 const { Schema } = mongoose;
 const userSchema = new Schema({
-    name: {
-        type: String,
-        required: true,
-    },
-    password: {
-        type: String,
-        
-    },
-    id: {
-        type: Number,
-        required: true,
-    },
-    
+  name: {
+    type: String,
+    required: true,
+  },
+  password: {
+    type: String,
+
+  },
+  id: {
+    type: Number,
+    required: true,
+  },
+  question: {
+    type: String,
+  },
+  answer: {
+    type: String,
+  },
+
 });
 
 userSchema.pre("save", function (next) {
-    let user = this; //User모델 자체를 가르킴.
-  
-    //model 안의 paswsword가 변경 또는 생성될 때 암호화
-    if (user.isModified("password")) {
-      bcrypt.genSalt(saltRounds, function (err, salt) {
+  let user = this; //User모델 자체를 가르킴.
+
+  //model 안의 paswsword가 변경 또는 생성될 때 암호화
+  if (user.isModified("password")) {
+    bcrypt.genSalt(saltRounds, function (err, salt) {
+      if (err) return next(err);
+      bcrypt.hash(user.password, salt, function (err, hash) {
         if (err) return next(err);
-        bcrypt.hash(user.password, salt, function (err, hash) {
-          if (err) return next(err);
-          user.password = hash;
-          next();
-        });
+        user.password = hash;
+        next();
       });
-    } else {
-      next();
-    }
-  });
+    });
+  } else {
+    next();
+  }
+});
 
 
 module.exports = mongoose.model('User', userSchema);