ECommerceApp_FullStackDev/signup.html at main · aroushq1/ECommerceApp_FullStackDev · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        @import url("styles.css");

    </style>
    <title>SignupPage</title>
</head>
    <body>
        <header class="homepage-header">
            <img style="display: inline;" src="images/logo.png" alt="logo" width = "60"  height = "50"/>
            <h1 class = "homepage-header" style="display: inline;">A&F Boutique</h1>

        </header>

        <div>
            <nav id="homepage-nav">
                <ul id="homepage-nav">
                    <a class="homepage-nav-elements" href="index.html">Home</a>
                    <a class="homepage-nav-elements" href="products.html">Products</a>
                    <a class="homepage-nav-elements" href="contact.html">Contact</a>
                    <a class="homepage-nav-elements" href="login.html">Login</a>
                </ul>
            </nav>
        </div>

        <script>
            function validatefields(){

                var password = document.getElementById("password").value;
                var confirmPassword = document.getElementById("confirm-password").value;
                var email = document.getElementById("email").value;
                var username = document.getElementById("username").value;
                var errormessage = ""
                var successmessage = "Success!"

                var specialchar = /[\!\@\#\$\%\^\&\*\(\)\-\_\=\+\[\]\{\}\|\;\:\'\"\,\.\<\>\?\/\`\~]/;
                var uppercase = /[A-Z]/;
                var lowercase = /[a-z]/;

                //does password meet requirements?
                if (password.length < 8 || /\s/.test(password) || !/\d/.test(password) || !specialchar.test(password) || !uppercase.test(password) || !lowercase.test(password)){
                    errormessage += "Incorrect Password Requirements<br>"
                    console.log(errormessage)
                }

                var userpattern = /^[A-Za-z][A-Za-z0-9_-]{2,19}$/;
                //check if the length or space lowercase is incorrect.
                if (username.length < 3 || username.length > 20 || /\s/.test(username) || !userpattern.test(username)){
                    errormessage += "Incorrect Username Requirements<br>"
                    console.log(errormessage)
                }

                var emailpattern = /^[^\s@]+@[^\s@]+\.(com|net|io)$/i;
                if (!emailpattern.test(email)) {
                    errormessage += "Invalid Email Address<br>";
                }

                if (password !== confirmPassword) {
                    errormessage += "Passwords do not match<br>";
                }

                //create div elemetn
                var newdiv = document.createElement("div");
                newdiv.id = "message"

                //create p element to go inside div
                var newp = document.createElement("p")
                newp.id = "messagecontent"

                if (errormessage !== ""){
                    newp.innerHTML = errormessage;
                }else{
                    newp.innerHTML = successmessage;
                }

                var main_elem = document.getElementById("main")
                var existing_message = document.getElementById("messagecontent")

                if (existing_message !== null){
                    existing_message.innerHTML = newp.innerHTML;
                }else{
                    main_elem.appendChild(newdiv);
                    newdiv.appendChild(newp);
                }
            }


        </script>


        <main id="main">
            <div id="signup-form">

                <h3><label for="username">Username: </label>
                <input type="text" id ="username" name="username" placeholder="Username" required></h3>

                <h3><label for="password">Password: </label>
                <input type="password" id ="password" name="password" placeholder="Password" required></h3>

                <h3><label for="confirm-password">Confirm Password: </label>
                <input type="password" id ="confirm-password" name="confirm-password" placeholder="Confirm Password" required></h3>

                <h3><label for="email">Email: </label>
                <input type="text" id ="email" name="email" placeholder="yourname@gmail.com" required></h3>

                <h3><button id="signup-button" onclick = "validatefields()">Signup</button></h3>

            </div>

        </main>

        <footer class="home-footer">
            <h5>&copy; Fatima Asif, Aroush Qureshi. A&F Boutique. All Rights Reserved.</h5>
        </footer>
    </body>
</html>