-
Notifications
You must be signed in to change notification settings - Fork 213
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #950 from Sveimoldr/master
Login.html refactored
- Loading branch information
Showing
3 changed files
with
130 additions
and
121 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| unction fetchRecentActivity() { | ||
| var url = "https://api.github.com/repos/SapphireMordred/Sapphire/events"; | ||
| var xhr = new XMLHttpRequest(); | ||
| xhr.open("GET", url, true); | ||
|
|
||
| xhr.onreadystatechange = function() { | ||
| if (xhr.readyState == 4 && xhr.status == 200) { | ||
| var response = JSON.parse(xhr.responseText); | ||
| var commitLog = document.getElementById("commit-log"); | ||
|
|
||
| for (var i = 0; i < response.length; i++) { | ||
| var commit = response[i]; | ||
| var commitItem = document.createElement("li"); | ||
| commitItem.innerHTML = commit.type + " - " + commit.actor.login; | ||
| commitLog.appendChild(commitItem); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| xhr.send(); | ||
| } | ||
|
|
||
| // Call the fetchRecentActivity function when the page loads | ||
| window.onload = function() { | ||
| fetchRecentActivity(); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
|
|
||
| function readBody(xhr) { | ||
| var data; | ||
| if (!xhr.responseType || xhr.responseType === "text") { | ||
| data = xhr.responseText; | ||
| } else if (xhr.responseType === "document") { | ||
| data = xhr.responseXML; | ||
| } else { | ||
| data = xhr.response; | ||
| } | ||
| return data; | ||
| } | ||
|
|
||
|
|
||
| function doLogin() { | ||
| var url = "sapphire-api/lobby/login"; | ||
| var params = "{\"username\":\"" + document.getElementsByName('username')[0].value + "\",\"pass\":\"" + document.getElementsByName('password')[0].value + "\"}"; | ||
| var xhr = new XMLHttpRequest(); | ||
| xhr.open("POST", url, true); | ||
|
|
||
| xhr.onreadystatechange = function() { | ||
| if (xhr.readyState == 4) { | ||
| try { | ||
| var response = readBody(xhr); | ||
| var parsed = JSON.parse(response); | ||
| window.external.Boot(parsed.sId, parsed.lobbyHost, parsed.frontierHost); | ||
| } catch(err) { | ||
| document.getElementById("Error").innerHTML = "Login failed."; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| xhr.send(params); | ||
| } | ||
|
|
||
|
|
||
| function keypressing(e) { | ||
| if (!e) e = window.event; | ||
| var keyCode = e.keyCode || e.which; | ||
| if (keyCode == '13'){ | ||
| doLogin(); | ||
| return false; | ||
| } | ||
| } | ||
|
|
||
| document.getElementsByName('password')[0].addEventListener('keypress', function(event) { | ||
| return keypressing(event); | ||
| }); | ||
| document.getElementById('submitButton').addEventListener('click', doLogin); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,129 +1,63 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Sapphire - Login</title> | ||
| <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"> | ||
| <link rel="stylesheet" href="assets/css/styles.css"> | ||
| <link rel="stylesheet" href="assets/css/global.css"> | ||
| <script src="//cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script> | ||
| <script> | ||
| function doLogin(){ | ||
| var url = "sapphire-api/lobby/login"; | ||
| var params = "{\"username\":\"" + document.getElementsByName('username')[0].value + "\",\"pass\":\"" + document.getElementsByName('password')[0].value + "\"}"; | ||
| var xhr = new XMLHttpRequest(); | ||
| xhr.open("POST", url, true); | ||
|
|
||
| xhr.onreadystatechange = function() { | ||
| if (xhr.readyState == 4) { | ||
| try { | ||
| var response = readBody(xhr); | ||
| var parsed = JSON.parse(response); | ||
| window.external.Boot(parsed.sId, parsed.lobbyHost, parsed.frontierHost); | ||
| } catch(err) { | ||
| document.getElementById("Error").innerHTML = "Login failed."; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| xhr.send(params); | ||
| } | ||
|
|
||
| function readBody(xhr) { | ||
| var data; | ||
| if (!xhr.responseType || xhr.responseType === "text") { | ||
| data = xhr.responseText; | ||
| } else if (xhr.responseType === "document") { | ||
| data = xhr.responseXML; | ||
| } else { | ||
| data = xhr.response; | ||
| } | ||
| return data; | ||
| } | ||
|
|
||
| function keypressing(e) { | ||
| if (!e) e = window.event; | ||
| var keyCode = e.keyCode || e.which; | ||
| if (keyCode == '13'){ | ||
| doLogin(); | ||
| return false; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| </script> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Sapphire - Login</title> | ||
| <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"> | ||
| <link rel="stylesheet" href="assets/css/styles.css"> | ||
| <link rel="stylesheet" href="assets/css/global.css"> | ||
| <script src="//cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script> | ||
| <script src="assets/js/login.js"></script> | ||
| </head> | ||
|
|
||
| <body scroll="no"> | ||
| <div class="s-full-split s-left-half col-xs-7"> | ||
| <div class="clearfix s-link-badge-wrapper"> | ||
| <a href="https://discord.gg/KfrZCkx" class="s-link-badge s-link-badge-discord col-xs-5"> | ||
| Join us on Discord! | ||
| </a> | ||
| <a href="https://github.com/SapphireMordred/Sapphire" class="s-link-badge s-link-badge-github col-xs-5 pull-right"> | ||
| Our Github repository | ||
| </a> | ||
| </div> | ||
| <h2>Recent Activity</h2> | ||
| <ul id="commit-log" class="commit-history"> | ||
|
|
||
| </ul> | ||
| </div> | ||
| <div class="s-full-split s-right-half col-xs-5"> | ||
| <div class="s-logo"> | ||
| <img src="assets/img/sapphire_logo_resize.png"> | ||
| </div> | ||
| <div class="s-login-box col-xs-12"> | ||
| <div class="s-login-box-form"> | ||
| <h1 class="text-center s-login-call">Login to Account</h1> | ||
| <div class="input-control"> | ||
| <label class="s-login-input-wrapper"> | ||
| Username | ||
| <input type="text" name="username" autofocus> | ||
| </label> | ||
| </div> | ||
| <div class="input-control"> | ||
| <label class="s-login-input-wrapper"> | ||
| Password | ||
| <input type="password" name="password" onkeypress="return keypressing(event)"> | ||
| </label> | ||
| </div> | ||
| <button class="btn btn-default s-login-btn pull-right" id="submitButton" onclick="doLogin()">Login</button> | ||
| <p id="Error" class="s-error-text"></p> | ||
| </div> | ||
| <a class="btn btn-default s-acc-btn" href="createUser.html">Create Account</a> | ||
| </div> | ||
| <div class="s-gears"> | ||
| <img class="s-gears" src="assets/img/graffletopia-gears.png" alt=""> | ||
| </div> | ||
| </div> | ||
| <div id="TopDiv"></div> | ||
| <div class="container"></div> | ||
|
|
||
| <script src="assets/js/jquery.min.js"></script> | ||
| <script src="assets/bootstrap/js/bootstrap.min.js"></script> | ||
|
|
||
| <script> | ||
| fetch( "https://api.github.com/repos/SapphireMordred/Sapphire/events" ).then( function( resp ) { | ||
| return resp.json(); | ||
| }).then( function( data ) { | ||
| data = data.filter( function( e ) { | ||
| return e.type == "PushEvent"; | ||
| }); | ||
|
|
||
| let commitContainer = document.getElementById( 'commit-log' ); | ||
| for ( var evnt of data ) { | ||
| for ( var commit of evnt.payload.commits ) { | ||
| let e = document.createElement( 'li' ); | ||
| e.innerHTML = '<a href="https://github.com/SapphireMordred/Sapphire/commit/' + commit.sha + '">' + commit.message + '</a>'; | ||
|
|
||
| commitContainer.appendChild( e ); | ||
| } | ||
| } | ||
| }); | ||
| </script> | ||
| <div class="s-full-split s-left-half col-xs-7"> | ||
| <div class="clearfix s-link-badge-wrapper"> | ||
| <a href="https://discord.gg/KfrZCkx" class="s-link-badge s-link-badge-discord col-xs-5"> | ||
| Join us on Discord! | ||
| </a> | ||
| <a href="https://github.com/SapphireMordred/Sapphire" class="s-link-badge s-link-badge-github col-xs-5 pull-right"> | ||
| Our Github repository | ||
| </a> | ||
| </div> | ||
| <h2>Recent Activity</h2> | ||
| <ul id="commit-log" class="commit-history"></ul> | ||
| </div> | ||
| <div class="s-full-split s-right-half col-xs-5"> | ||
| <div class="s-logo"> | ||
| <img src="assets/img/sapphire_logo_resize.png"> | ||
| </div> | ||
| <div class="s-login-box col-xs-12"> | ||
| <div class="s-login-box-form"> | ||
| <h1 class="text-center s-login-call">Login to Account</h1> | ||
| <div class="input-control"> | ||
| <label class="s-login-input-wrapper"> | ||
| Username | ||
| <input type="text" name="username" autofocus> | ||
| </label> | ||
| </div> | ||
| <div class="input-control"> | ||
| <label class="s-login-input-wrapper"> | ||
| Password | ||
| <input type="password" name="password"> | ||
| </label> | ||
| </div> | ||
| <button class="btn btn-default s-login-btn pull-right" id="submitButton">Login</button> | ||
| <p id="Error" class="s-error-text"></p> | ||
| </div> | ||
| <a class="btn btn-default s-acc-btn" href="createUser.html">Create Account</a> | ||
| </div> | ||
| <div class="s-gears"> | ||
| <img class="s-gears" src="assets/img/graffletopia-gears.png" alt=""> | ||
| </div> | ||
| </div> | ||
| <div id="TopDiv"></div> | ||
| <div class="container"></div> | ||
|
|
||
| <script src="assets/js/jquery.min.js"></script> | ||
| <script src="assets/bootstrap/js/bootstrap.min.js"></script> | ||
| <script src="assets/js/github.js"></script> | ||
| </body> | ||
|
|
||
| </html> | ||
| </html> |