ChangePage.js 4.18 KB
Newer Older
1
2
3
4
import React, { useState } from 'react';
import { Formik } from 'formik';
import * as Yup from 'yup';
import axios from 'axios';
Ha YeaJin's avatar
Ha YeaJin committed
5
import Menu from '../Components/Menu';
6
import { Link, Redirect } from 'react-router-dom';
7
import { Container, Button, Navbar, Col } from 'react-bootstrap';
Ha YeaJin's avatar
Ha YeaJin committed
8
9
10
11
12
13
14
15
16
17
18
19
20
import styled from 'styled-components';

const Check = styled.div`
  
  & #reCheck::after {
    content: '새로운 비밀번호를 다시 입력하세요';
  }

  & #reCheck:not(.right) {
    content: '비밀번호가 일치하지 않습니다.';
    color: red;
  }
`
21

22
23
function Change(props) {
  const [state, setState] = useState();
Ha YeaJin's avatar
Ha YeaJin committed
24
25
  const [checkPw, setCheckPw] = useState(true);

26
  if (state) {
Ha YeaJin's avatar
Ha YeaJin committed
27
    return <Redirect to="/" />;
28
  }
Ha YeaJin's avatar
Ha YeaJin committed
29
  // console.log(props)
30
  return (
Ha YeaJin's avatar
Ha YeaJin committed
31
    <div className="">
32
33
34
35
36
37
38
      {(localStorage.getItem("token") !== null) ? (
                <Menu />
            ) : (
                    <Menu expand="md" variant="dark">
                        <Navbar.Brand>회원가입</Navbar.Brand>
                    </Menu>
                )}
Ha YeaJin's avatar
Ha YeaJin committed
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
      <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({
                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,
              }) => (
                  <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>
106

Ha YeaJin's avatar
Ha YeaJin committed
107
        </Check>
108

Ha YeaJin's avatar
Ha YeaJin committed
109
      </Container>
110
111
    </div >
  );
112
113
}

114

115
export default Change;