Human_Interface_Computing_Project/logout.html at main · BCuthbert/Human_Interface_Computing_Project · 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Logout</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif}
.w3-bar,h1,button {font-family: "Montserrat", sans-serif}
.fa-anchor,.fa-coffee {font-size:200px}
</style>
</head>
<body>

<!-- Navbar -->
<div class="w3-top">
  <div class="w3-bar w3-white w3-card w3-large">
    <a href="/index.html" class="w3-bar-item w3-left-align w3-button w3-padding-large w3-hover-red" style="font-size:23px;background-color:#A64D79;color:white;">RealCompany</a>
    <a href="whyreal.html" class="w3-bar-item w3-left-align w3-button w3-hide-small w3-padding-large w3-hover-red" style="font-size:23px;">Why</a>
    <a href="product.html" class="w3-bar-item w3-left-align w3-button w3-hide-small w3-padding-large w3-hover-red" style="font-size:23px;">Product</a>
    <a href="about.html" class="w3-bar-item w3-left-align w3-button w3-hide-small w3-padding-large w3-hover-red" style="font-size:23px;">Company</a>
    <a href="blog.html" class="w3-bar-item w3-left-align w3-button w3-hide-small w3-padding-large w3-hover-red" style="font-size:23px;">Blog</a>
    <a class="w3-bar-item w3-right w3-button w3-hide-small w3-padding-large w3-hover-red" onclick="window.location.reload()"><i class="fa fa-user" style="font-size:32px;padding:medium;"></i><div id="display_username"></div></a>
  </div>

<!-- Login form -->
<header class="w3-container w3-white w3-center" style="padding:128px 16px" id="logoutHead">
  <button class="w3-button w3-hover-red w3-margin-top w3-padding-medium" style="width:auto;background-color:#A64D79;color:white;" id="loginbtn" onclick="logout();">Log Out</button>
</header>


<script src="login.js"></script>

</body>
<script>
  const hideLogin = () => {
    head = document.getElementById("loginHead");
    head.setAttribute("class", "w3-hide");

    newHead = document.getElementById("createHead");
    newHead.setAttribute("class", "w3-container w3-white w3-center");

    loginbtn = document.getElementById("loginbtn");
    loginbtn.setAttribute("class", "w3-hide");

    p = document.getElementById("or");
    p.setAttribute("class", "w3-hide");
  }
  var flag = false;
  const showPassword = () => {
    if (!flag){
      document.getElementById("newPass").setAttribute("type", "text");
      document.getElementById("confirmPassword").setAttribute("type", "text");
      flag = true;
    } else {
      document.getElementById("newPass").setAttribute("type", "password");
      document.getElementById("confirmPassword").setAttribute("type", "password");
      flag = false;
    }

  }
  function hide() {
    document.getElementById("displayHead").setAttribute("style", "display:none;");
    document.getElementById("createHead").setAttribute("style", "display:none;");
  }
  window.onload = async function() {
    const webAddress = "http://localhost:5000/isLoggedIn";
    const response = await fetch(webAddress);
    const json = await response.json();

    if (json.username != null){
      document.getElementById("display_username").textContent = json.username;
    }
  }
  const logout = async() => {
    const address = "http://localhost:5000/logout";
    const response = await fetch(address);
    const json = await response.json();
    if (json.success){
        window.location.href = "login.html";
    }
  }

</script>
</html>