utf8passwordinput/tw-changepassword.html at main · iapyeh/utf8passwordinput · 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
<html>
    <head>
        <meta charset="utf8"/>
        <script src="utf8passwordinput.js"></script>
    </head>
    <body>
        <h2>變更<span id="userid"></span>密碼</h2>
        <ul>
            <li>長度至少為8</li>
            <li>可以使用中文</li>
        </ul>
        <form id="changeform" method="post" action="change-password.cgi">
            <table>
                <tr>
                    <td>
                        新密碼:<input type="password" placeholder="" name="passwd" id="passwd" autocomplete="off">
                        長度：<span id="mesg1"></span>
                    </td>
                </tr><tr>
                    <td>
                        新密碼:<input type="password" placeholder="再一次" id="passwd2" autocomplete="off">
                        長度：<span id="mesg2"></span>
                    </td>
                </tr>
                </tr><tr>
                    <td>
                        <span style="color:red;padding-left:20px" id="mesg3"></span>
                        <br/>
                        <input type="reset">
                        <span id="submit" style="display:none">
                            <button id="submitbtn" onclick="changepwd();return false">變更</button>
                        </span>
                    </td>
                </tr>
            </table>
        </form>
    <script>
        const utf8Pwd1 = new Utf8PasswordInput(document.getElementById('passwd'),false)
        utf8Pwd1.star = '🇹🇼'
        const utf8Pwd2 = new Utf8PasswordInput(document.getElementById('passwd2'),false)
        utf8Pwd2.star = '🇹🇼'
        /**
         * Compares the values of two UTF-8 password input fields and updates the UI with the result.
         * Displays the length of each password input in corresponding message elements.
         * If both passwords match and have a length of at least 8 characters, it enables the submit button.
         * Otherwise, it displays an error message indicating that the passwords do not match.
         * @returns {string|undefined} Returns the password value if conditions are met; otherwise, undefined.
         */
        const check = ()=>{
            let v1 = utf8Pwd1.value
            document.getElementById('mesg1').innerText = utf8Pwd1.length
            let v2 = utf8Pwd2.value
            document.getElementById('mesg2').innerText = utf8Pwd2.length
            if (v1 && v2){
                if (v1 == v2){
                    document.getElementById('mesg3').innerText = '兩次密碼相符合'
                    if (utf8Pwd1.length >= 8){
                        document.getElementById('submit').style.display = ''
                        return v1
                    }
                }else{
                    document.getElementById('mesg3').innerText = '兩次密碼不符合'
                }
            }
            document.getElementById('submit').style.display = 'none'
        }
        utf8Pwd1.on('update', (evt)=>{
            check()
        })
        utf8Pwd2.on('update', (evt)=>{
            check()
        })
        /**
         * called when user clicks "變更" button
         *
         * 1. check if the password is valid
         * 2. if valid, show confirm dialog
         * 3. if confirmed, submit the form
         *
         */
        window.changepwd = ()=>{
            const value = check()
            if (value){
                //document.getElementById('changeform').submit()
                alert(`密碼是:${value}`)
            }
        }
    </script>
    </body>
</html>