arnaucube/gogame-frontend
1
0
Fork 0
mirror of https://github.com/arnaucube/gogame-frontend.git synced 2026-02-06 19:06:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

register & login working

Browse Source
This commit is contained in:
arnaucube
2019-06-15 13:55:29 +02:00
parent eea27692ad
commit 06fd8dccfc
8 changed files with 286 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md Normal file
View File

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

1
constants.js Normal file
View File

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

20
css/dark-theme.css Normal file
View File

@@ -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
css/style.css Normal file
View File

@@ -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
dashboard.html Normal file
View File

@@ -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
dashboard.js Normal file
View File

@@ -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
index.html Normal file
View File

@@ -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
index.js Normal file
View File

@@ -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);
});
}