Daily10Minute_FrontSample/change_pw.html at master · cho881020/Daily10Minute_FrontSample · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <script src="https://code.jquery.com/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
        <!-- 커스터마이징한 axiosInstace 들고있는 파일 -->
        <script src="/custom_axios.js"></script>

    </head>
    <body>
        비번 변경

        <div>
            기존 비밀번호 입력 : <input type='password' id='currentPwInput' placeholder="사용중인 비밀번호"> <br><br>
            새 비밀번호 입력 : <input type="password" id='newPwInput' placeholder="변경할 비밀번호 입력"> <br>
            <span id='pwStatusTxt'>비밀번호를 입력해주세요.</span><br><br>
            새 비밀번호 확인 : <input type="password" id='newPwConfirmInput' placeholder="변경할 비밀번호 다시 입력"> <br>
            <span id='pwConfirmStatusTxt'>비밀번호 확인을 입력해주세요.</span><br><br>

            <button id='changePwBtn'>비번 변경 하기</button>
        </div>


        <script>
            // 이벤트 처리 전담

            // 비번 관련 검사 전담 함수
            function checkPassword() {

                // 입력한 모든 비번 가져오기 => 검사에 활용
                let currentPw = $('#currentPwInput').val()
                let newPw = $('#newPwInput').val()
                let newPwConfirm = $('#newPwConfirmInput').val()


                // 새 비번의 길이가 8글자 이상인지?
                let newPwLengthOk = false

                // 길이가 최소 8글자 되어야함
                if (newPw.length == 0) {
                    $('#pwStatusTxt').text('비밀번호를 입력해주세요.')
                }
                else if (newPw.length < 8) {

                    $('#pwStatusTxt').text('비밀번호가 너무 짧습니다.')
                }
                else {

                    $('#pwStatusTxt').text('사용해도 좋은 비밀번호 입니다.')
                    // 길이검사를 통과시킴.
                    newPwLengthOk = true
                }

                // 비번 확인의 내용이 새 비번과 같은지?
                let confirmPwOk = false

                // 0글자 : 입력 메세지 => 그 이외에는 같냐/아니냐만 체크
                if (newPwConfirm.length == 0) {
                    $('#pwConfirmStatusTxt').text('비밀번호 확인을 입력해주세요.')
                }
                else {

                    let newPw = $('#newPwInput').val()

                    if (newPw == newPwConfirm) {
                        $('#pwConfirmStatusTxt').text('비밀번호가 서로 같습니다.')
                        confirmPwOk = true

                    }
                    else {
                        $('#pwConfirmStatusTxt').text('비밀번호가 서로 다릅니다.')
                    }

                }

                // 둘다 OK이면 결과를 true로 리턴

                // 비번 검사 결과를 저장할 변수
                let passwordOk = newPwLengthOk && confirmPwOk

                // 최종 검사 결과를 리턴
                return passwordOk

            }

            // 새 비번 입력값 변경
            $('#newPwInput').keyup(function () {
                checkPassword()
            })

            // 새 비번 확인 입력값 변경
            $('#newPwConfirmInput').keyup(function () {
                checkPassword()
            })


            // 비번 변경 버튼

            $('#changePwBtn').click(function () {

                let currentPw = $('#currentPwInput').val()
                let newPw = $('#newPwInput').val()
                let newPwConfirm = $('#newPwConfirmInput').val()

                // 받아온 기존 비번 + 새 비번을 서버에 전달

                // 세개의 비번을 가지고 보내도 좋은지 검사

                // 검사 함수의 결과가 false로 나온다면
                if (!checkPassword()) {

                    // 비번 사용 불가 안내
                    alert('비밀번호 입력이 잘못되었습니다.')
                    return
                }

                // 검사를 통과한 비번을 서버에 변경요청
                // PATCH - /user 에 보내자.

                // 비번 변경 요청 데이터를 담아둘 FormData 클래스
                const form = new FormData()
                form.append('current_password', currentPw)
                form.append('new_password', newPw)

                // 커스텀 axios로 실제 비번 변경 호출

                axiosInstance.patch('/user', form)
                    .then(function (res) {

                        console.log(res)

                        let token = res.data.data.token
                        // 변수에 담아둔 토큰을 쿠키에 저장
                        $.cookie('userToken', token)

                        alert('비번 변경 완료')
                        $(location).attr('href', 'my_profile.html')

                    })
                    .catch(function (error) {
                        // 실패시 error의 응답에 담긴 message를 얼럿으로
                        alert(error.response.data.message)
                    })


            })
        </script>
    </body>
</html>