Reset_Password_Page/index.html at main · olalois/Reset_Password_Page · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reset Password</title>
    <link rel="stylesheet" href="style/style.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr .net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

</head>
<body onsubmit="return validatePassword()">
    <!-----------------------THE FORM---------------------->
    <form action="reset"  class="myForm" onsubmit="submitForm(); return false;" >
        <div class="reset_password_form">
            <!----------------------COMPANYS' LOGO------------------------->
            <div class="logo">
                <img src="/img/Group 211.png" alt="GO4GOLD">
            </div>
             <!----------------------END OF COMPANYS' LOGO------------------------->
            <div class="reset_form">

                <header>Reset Password</header>

                <div class="input" >

                    <label for="Password" class="newPass">New Password
                        <span class="material-icons-sharp">
                        lock_open
                        </span>
                    </label>

                 <!-- <input type="checkbox" class="showPassword" style="height: 17px; position: relative; left: 283px; top: 10px; display: inline-block; width: 17px;z-index: 10;"> -->

                 <!-- optional ooo -->
                        <!-- replaced the checkboxes with this, "eyes" -->
                 <i class="toggle-password fas fa-eye" onclick="togglePasswordVisibility()"></i>

                    <input type="password" required placeholder="******" class="newPassword" autocomplete="off" minlength="6" maxlength="12" title="6 to 12 characters" style="padding-left: 10px; padding-top: 5px;">

                    <label for="confirm_password">Confirm Password
                        <span class="material-icons-sharp">
                        lock
                        </span>
                    </label>

                    <!-- <input type="checkbox" class="showPassword2" style="height: 17px; position: relative; left: 283px; top: 10px; display: inline-block; width: 17px; z-index: 10;"> -->

                    <!-- optional ooo -->
                        <!-- replaced the checkboxes with this, "eyes" -->
                    <i class="toggle-password2 fas fa-eye" onclick="togglePasswordVisibility2()"></i>

                    <input type="password" required placeholder="******" class="confirmPassword" autocomplete="off" minlength="6" maxlength="12" title="6 to 12 characters" style="padding-left: 10px; padding-top: 5px;">

                </div>
            <a href=""><input type="submit" value="Reset"></a>
            </div>
        </div>
    </form>
    <!-- congratulation popup message -->
    <div class="overlay" id="overlay">
        <div class="popup">
            <span class="close" onclick="closePopup()">&times;</span>
            <p><div class="">&#129303</div>Congratulations! You Successfully Changed Password.</p>
        </div>
    </div>
    <!-- End of congratulatory message -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="script/script.js"></script>
</body>
<!-----------------------FOOTER------------------------->
<footer>
        <h5>  <span class="material-icons-sharp">
            copyright
            </span> 2023 Go4Gold Facility Management </h5>
</footer>
</html>