Database/sign_in.html at master · dollychu/Database · 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


<!DOCTYPE html>
<html lang="en">
<head>
  <title> Login </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <script src="js/document_ready.js"></script>


  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  <link rel="stylesheet" type="text/css" href="css/form.css">
</head>

<body>
  <div id="HEADER"></div>
  <div class="container">
    <div class="card card-container">
      <img id="profile-img" class="profile-img-card" src="//ssl.gstatic.com/accounts/ui/avatar_2x.png">
      <p id="profile-name" class="profile-name-card"></p>

      <form class="form-signin">
        <span id="reauth-email" class="reauth-email"></span>
        <input type="text" id="inputEmail" class="form-control" placeholder="User name" required autofocus name="name">
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required name="passwd">
        <input class="btn btn-primary btn-block btn-signin" type="submit" name="submit" value="Login" id="submit">
        <small class="text-danger" id="warning"></small>
      </form><!-- /form -->
      <a href="#" class="forgot-password">
          Forgot the password?
      </a>
      <a href="create_acount.html" class="forgot-password">
          Create acount
      </a>
    </div><!-- /card-container -->
  </div><!-- /container -->
  </body>
</html>

<script>
  $("form").on("submit", function(event){
    event.preventDefault();
    var data = $(this).serialize();
    $.ajax({
      url: "php/sign_in.php",
      method: "POST",
      dataType: "json",
      data: data})
        .done(function(result){
          if(result.success){
            window.location.href = "./index.html";
          }
          else{
            $("#warning").html("Invalid password or username.");
          }
        })
        .fail(function(jxx, textStatus){
          alert(textStatus);
        });
  });
</script>