From 06fd8dccfc85170707dd0c83c2d8a78e7cb13742 Mon Sep 17 00:00:00 2001 From: arnaucube Date: Sat, 15 Jun 2019 13:55:29 +0200 Subject: [PATCH] register & login working --- README.md | 4 +++ constants.js | 1 + css/dark-theme.css | 20 +++++++++++ css/style.css | 32 +++++++++++++++++ dashboard.html | 64 ++++++++++++++++++++++++++++++++++ dashboard.js | 36 +++++++++++++++++++ index.html | 87 ++++++++++++++++++++++++++++++++++++++++++++++ index.js | 42 ++++++++++++++++++++++ 8 files changed, 286 insertions(+) create mode 100644 README.md create mode 100644 constants.js create mode 100644 css/dark-theme.css create mode 100644 css/style.css create mode 100644 dashboard.html create mode 100644 dashboard.js create mode 100644 index.html create mode 100644 index.js diff --git a/README.md b/README.md new file mode 100644 index 0000000..8f479c0 --- /dev/null +++ b/README.md @@ -0,0 +1,4 @@ +# gogame-frontend +Frontend webapp for https://github.com/arnaucube/gogame + +Work in progress diff --git a/constants.js b/constants.js new file mode 100644 index 0000000..ec030cb --- /dev/null +++ b/constants.js @@ -0,0 +1 @@ +const url = "http://127.0.0.1:5000"; diff --git a/css/dark-theme.css b/css/dark-theme.css new file mode 100644 index 0000000..90c028e --- /dev/null +++ b/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; +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..ae57277 --- /dev/null +++ b/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; +} diff --git a/dashboard.html b/dashboard.html new file mode 100644 index 0000000..b926ca6 --- /dev/null +++ b/dashboard.html @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + gogame + + + +
+ +

Dashboard

+ User Name: + +

+ + + + + + + + + + + + + + + + + +
MetalCrystalDetueriumEnergy
+ +




+
Logout
+
+ + + + + + + + + + + + + + + + + + + diff --git a/dashboard.js b/dashboard.js new file mode 100644 index 0000000..3290000 --- /dev/null +++ b/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); +}); diff --git a/index.html b/index.html new file mode 100644 index 0000000..ec2f023 --- /dev/null +++ b/index.html @@ -0,0 +1,87 @@ + + + + + + + + + + + + + + gogame + + + +
+
+
+
+ +

gogame

+
+ + +
+ +
+
+
Login
+
+

+ + +
+ + +

Login
+

+
+
+
Register
+
+

+ + +
+ + +
+ + +

Register
+

+
+
+ +
+
+ +
+
+
+ + + + + + + + + + + + + + + + diff --git a/index.js b/index.js new file mode 100644 index 0000000..a33c159 --- /dev/null +++ b/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); + }); +}