가영 머지, 비번수정기능 완료

server/.gitignore

-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+node_modules

server/client/src/Pages/ChangePage.js

-import React, { useState, useEffect } from 'react';
+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() {
-    return (
-        <div>
-            <div className="container">change
+function Change(props) {
+  const [state, setState] = useState();
+  if (state) {
+  return <Redirect to="/" />;
+  }
+  console.log(props)
+
+  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/change/${props.location.state.id}`, { ...values },
+          )
+            .then(res => {
+              console.log(res.data);
+              if (res.status === 404) return alert(res.data.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,
+        }) => (
+            <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>
-        </div>
-    )
+          )}
+      </Formik>
+    </div >
+  );
 }
 
-export default Change
\ No newline at end of file
+
+export default Change;

server/client/src/Pages/FindPage.js

@@ -6,10 +6,13 @@ import 'bootstrap/dist/css/bootstrap.css';
 import { Link, Redirect } from 'react-router-dom';
 
 function Find() {
-    const [state, setState] = useState(false);
+    const [state, setState] = useState();
 
     if (state) {
-        return <Redirect to="/change" />;
+        return <Redirect to={{
+            pathname: `/change/${localStorage.getItem('_id')}`,
+            state: { id: localStorage.getItem('_id') },
+        }} />;
     }
 
     return (
@@ -29,7 +32,7 @@ function 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 => {

server/client/src/Pages/HomePage.js

@@ -10,6 +10,10 @@ function Home() {
                 home
                 <button><Link to="/login">로그인</Link></button>
                 <button><Link to="/signup">회원가입</Link></button>
+                <button><Link to={{
+                            pathname: `/change/${localStorage.getItem('_id')}`,
+                            state: { id: localStorage.getItem('_id') },
+                        }}>비밀번호 수정</Link></button>
             </div>
         </div>
     )

server/client/src/Pages/SignupPage.js

@@ -66,7 +66,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}
@@ -77,7 +77,7 @@ function Signup() {
                                         type="text"
                                         name="id"
                                         {...getFieldProps('id')}
-                                        placeholder="Input Student Id"
+                                        placeholder="학번/교번"
                                     />
                                     {touched.id && errors.id ? (
                                         <div className="invalid-feedback text-left">{errors.id}</div>
@@ -89,7 +89,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>
@@ -101,7 +101,7 @@ 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>
@@ -130,8 +130,8 @@ function Signup() {
                                 <button type="submit" className="btn btn-dark" 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

@@ -9,11 +9,11 @@ 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';
-import Find from './Pages/FindPage';
-import Change from './Pages/ChangePage';
 
 axios.defaults.validateStatus = function (status) {
   return status < 500; // default
@@ -26,12 +26,12 @@ 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/:id" component={Check} />
       <Route path="/notice" component={Notice} />
-      <Route path="/find" component={Find} />
-      <Route path="/change" component={Change}/>
-      <Redirect path="/login" to="/" />
+      <Redirect path="/" to="/" />
       <Redirect path="/home" to="/" />
       <Redirect path="/change/:id" to="/change"/>
     </Switch>

server/routes/index.js

-var express = require('express');   
+const express = require('express');
 const User = require('../schemas/user');
-var router = express.Router();
+
+const router = express.Router();
 
 /* GET home page. */
 // router.get('/', function(req, res, next) {

server/routes/users.js

@@ -34,5 +34,31 @@ router.post('/', function (req, res, next) {
   })
 });
 
+router.put('/change/:id', function (req, res, next) {
+  console.log('/change put req.body', req.params)
+  User.findOne({ _id: req.params.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

@@ -4,25 +4,30 @@ const saltRounds = 10;
 
 const { Schema } = mongoose;
 const userSchema = new Schema({
-  name: {
-    type: String,
-    required: true,
-  },
-  password: {
-    type: String,
-
-  },
-  id: {
-    type: Number,
-    required: true,
-  },
-  question: {
-    type: String,
-  },
-  answer: {
-    type: String,
-  },
-
+    name: {
+        type: String,
+        required: true,
+    },
+    password: {
+        type: String,
+        
+    },
+    role: {
+      type: String,
+      default:'user',
+    },
+    answer:{
+      type: String,
+    },
+    question: {
+      type: String,
+    },
+  
+    id: {
+        type: Number,
+        required: true,
+    },
+    
 });
 
 userSchema.pre("save", function (next) {