PersonalContactManager/auth.html at main · COP4331C-Project-Group/PersonalContactManager · 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
<!-- Login/register page; default page if not logged in -->
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="js/common.js" defer></script>
  <script type="text/javascript" src="js/auth.js" defer></script>
  <link href="css/auth.css" rel="stylesheet" />
  <title>PCM - Login</title>
  <link rel="icon" type="image/x-icon" href="images/favicon.ico">

  <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function()
    {
      readCookie();
    }, false);
  </script>

</head>

<body id="newBody">
  <span id="title">Log In</span>

  <div class="form-group">
    <form action="", id="loginForm">
      <input type="text" id="loginUsername" class="loginInputs" placeholder="Username" /><br />
      <input type="password" id="loginPassword" class="loginInputs" placeholder="Password" /><br />
      <button type="button" id="loginButton" class="loginPageButton">Log In</button>
      <img id= "usernameLoginAlert" class="usernameLoginAlert" src="images/alerticon.png" alt="Default">
      <img id= "passLoginAlert" class="passLoginAlert" src="images/alerticon.png" alt="Default">
      <img id= "authLoginAlert" class="authLoginAlert" src="images/alerticon.png" alt="Default">
      <div id= usernameLoginAlertMessage>
        <span id="authLoginUsernameResult"></span>
      </div>
      <div id= passLoginAlertMessage>
        <span id="authLoginPasswordResult"></span>
      </div>
      <div id= authLoginAlertMessage>
        <span id="authLoginResult"></span>
      </div>
      <div id="registerLink">
        <a href="javascript:changeLoginToRegister()">Register</a>
      </div>
    </form>
    <form action="", id="registerForm">
      <input type="text" id="registerFirstName" class="firstnameInput" placeholder="First" /><br />
      <input type="text" id="registerLastName" class="lastnameInput" placeholder="Last" /><br />
      <input type="text" id="registerUsername" class="registerUsernameInput" placeholder="Username" /><br />
      <input type="password" id="registerPassword" class="registerPasswordInput" placeholder="Password" /><br />
      <input type="password" id="registerConfirmPassword" class="registerRetypePasswordInput" placeholder="Retype Password" /><br />
      <button type="button" id="registerButton" class="registerPageButton" onclick="doRegister();">Sign Up</button>
      <img id= "firstRegisterAlert" class="firstRegisterAlert" src="images/alerticon.png" alt="Default">
      <img id= "lastRegisterAlert" class="lastRegisterAlert" src="images/alerticon.png" alt="Default">
      <img id= "usernameRegisterAlert" class="usernameRegisterAlert" src="images/alerticon.png" alt="Default">
      <img id= "passRegisterAlert" class="passRegisterAlert" src="images/alerticon.png" alt="Default">
      <img id= "retypepassRegisterAlert" class="retypepassRegisterAlert" src="images/alerticon.png" alt="Default">
      <img id= "authRegisterAlert" class="authRegisterAlert" src="images/alerticon.png" alt="Default">
      <div id= firstRegisterAlertMessage>
        <span id="authRegisterFirstResult"></span>
      </div>
      <div id= lastRegisterAlertMessage>
        <span id="authRegisterLastResult"></span>
      </div>
      <div id= usernameRegisterAlertMessage>
        <span id="authRegisterUsernameResult"></span>
      </div>
      <div id= passRegisterAlertMessage>
        <span id="authRegisterPasswordResult"></span>
      </div>
      <div id= retypepassRegisterAlertMessage>
        <span id="authRegisterRetypePasswordResult"></span>
      </div>
      <div id= authRegisterAlertMessage>
        <span id="authRegisterResult"></span>
      </div>
      <div id="loginLink">
        <a href="javascript:changeRegisterToLogin()">Log In</a>
      </div>

      <div id="myModal" class="modal">
        <!-- Modal content -->
        <div class="modal-content">
          <span class="close">&times;</span>
          <center>
            <p>Successfully registered, please login</p>
          </center>
        </div>
      </div>
    </form>
  </div>
</body>
</html>