Browse Source

register & login working

master
arnaucube 5 years ago
parent
commit
06fd8dccfc
8 changed files with 286 additions and 0 deletions
  1. +4
    -0
      README.md
  2. +1
    -0
      constants.js
  3. +20
    -0
      css/dark-theme.css
  4. +32
    -0
      css/style.css
  5. +64
    -0
      dashboard.html
  6. +36
    -0
      dashboard.js
  7. +87
    -0
      index.html
  8. +42
    -0
      index.js

+ 4
- 0
README.md

@ -0,0 +1,4 @@
# gogame-frontend
Frontend webapp for https://github.com/arnaucube/gogame
Work in progress

+ 1
- 0
constants.js

@ -0,0 +1 @@
const url = "http://127.0.0.1:5000";

+ 20
- 0
css/dark-theme.css

@ -0,0 +1,20 @@
.dark-theme {
background: #232729;
color: #d9d9d9;
}
.dark-theme
.card,
.list-group-item,
input,
.nav-link {
background: none!important;
border-color: #3b4145;
}
.dark-theme input {
color: #00ffd8;
}
.dark-theme input:focus {
color: #00ffd8;
box-shadow: 0px 0px 5px #00ffd8!important;
border: none;
}

+ 32
- 0
css/style.css

@ -0,0 +1,32 @@
/* a, a:link, a:visited, a:hover {
color: #5ae1cd!important;
text-decoration: none!important;
}
a:hover {
color: #5ae1cd!important;
text-decoration: none!important;
} */
.btn {
cursor: pointer;
}
hr {
height: 2px!important;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00cee6+0,5ae1cd+98 */
background: #00cee6; /* Old browsers */
background: -moz-linear-gradient(left, #00cee6 0%, #5ae1cd 98%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #00cee6 0%,#5ae1cd 98%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #00cee6 0%,#5ae1cd 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00cee6', endColorstr='#5ae1cd',GradientType=1 ); /* IE6-9 */
}
.resourcesTable>thead>tr>th, .resourcesTable>tbody>tr>td{
padding-left: 5px;
padding-right: 5px;
text-align: center;
border:1px solid #ffffff;
}

+ 64
- 0
dashboard.html

@ -0,0 +1,64 @@
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/dark-theme.css">
<title>gogame</title>
</head>
<body class="dark-theme">
<div class="container">
<h3>Dashboard</h3>
User Name: <span id="name"></span>
<br><br>
<table class="resourcesTable">
<thead>
<tr>
<th scope="col">Metal</th>
<th scope="col">Crystal</th>
<th scope="col">Detuerium</th>
<th scope="col">Energy</th>
</tr>
</thead>
<tbody>
<tr>
<td id="metal"></td>
<td id="crystal"></td>
<td id="deuterium"></td>
<td id="energy"></td>
</tr>
</tbody>
</table>
<br><br><br><br><br>
<div onclick="logout()" class="btn btn-primary">Logout</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="constants.js"></script>
<script src="dashboard.js"></script>
</body>
</html>

+ 36
- 0
dashboard.js

@ -0,0 +1,36 @@
const token = localStorage.getItem("token");
console.log(token);
if (localStorage.getItem("token")===null) {
// redirect to dashboard
window.location.href = "/index.html";
}
function logout() {
localStorage.removeItem("token");
window.location.href = "/index.html";
}
let config = {
"crossdomain": true,
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer " + token
}
};
let user = {};
// get user data
axios.get(url + "/", config)
.then(function (res) {
console.log(res.data);
user = res.data.user;
console.log(user);
document.getElementById("name").innerHTML = user.Name;
document.getElementById("metal").innerHTML = user.Resources.Metal;
document.getElementById("crystal").innerHTML = user.Resources.Crystal;
document.getElementById("deuterium").innerHTML = user.Resources.Deuterium;
document.getElementById("energy").innerHTML = user.Resources.Energy;
})
.catch(function (error) {
console.log(error);
});

+ 87
- 0
index.html

@ -0,0 +1,87 @@
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/dark-theme.css">
<title>gogame</title>
</head>
<body class="dark-theme">
<div class="container">
<div class="row" style="margin-top:20%;">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<h3>gogame</h3>
<div class="card">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="login-tab" data-toggle="tab" href="#login" role="tab" aria-controls="login" aria-selected="true">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" id="register-tab" data-toggle="tab" href="#register" role="tab" aria-controls="register" aria-selected="false">Register</a>
</li>
</ul>
<div class="card-body">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
<h5 class="card-title">Login</h5>
<hr>
<p class="card-text">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="loginEmail" placeholder="Enter email">
<br>
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="loginPassword" placeholder="Password">
<div onclick="login()" class="btn btn-primary float-right">Login</div>
</p>
</div>
<div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register-tab">
<h5 class="card-title">Register</h5>
<hr>
<p class="card-text">
<label for="email">Email address</label>
<input type="email" class="form-control" id="registerEmail" placeholder="Enter email">
<br>
<label for="name">Name</label>
<input type="text" class="form-control" id="registerName" placeholder="Name">
<br>
<label for="password">Password</label>
<input type="password" class="form-control" id="registerPassword" placeholder="Password">
<div onclick="register()" class="btn btn-primary float-right">Register</div>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="constants.js"></script>
<script src="index.js"></script>
</body>
</html>

+ 42
- 0
index.js

@ -0,0 +1,42 @@
if (localStorage.getItem("token")!==null) {
// redirect to dashboard
window.location.href = "/dashboard.html";
}
function register() {
let email = document.getElementById("registerEmail").value;
let name = document.getElementById("registerName").value;
let password = document.getElementById("registerPassword").value;
let data = {
email: email,
name: name,
password: password
};
axios.post(url + "/register", data)
.then(function (res) {
console.log(res.data);
})
.catch(function (error) {
console.log(error);
});
}
function login() {
let email = document.getElementById("loginEmail").value;
let password = document.getElementById("loginPassword").value;
let data = {
email: email,
password: password
};
axios.post(url + "/login", data)
.then(function (res) {
console.log(res.data);
localStorage.setItem("token", res.data.token);
window.location.href = "/dashboard.html";
})
.catch(function (error) {
console.log(error);
});
}

Loading…
Cancel
Save