Improved Website Design and Home Page
This commit is contained in:
BloxerHD
parent
882d005e8c
commit
a23bc61efe
16 changed files with 360 additions and 36 deletions
|
|
@ -1,149 +0,0 @@
|
|||
function loginError(message, code = null) {
|
||||
let errorStr;
|
||||
if (code) {
|
||||
errorStr = `Status code ${code}: ${message}`;
|
||||
} else {
|
||||
errorStr = message;
|
||||
}
|
||||
|
||||
document.getElementById("error-text").textContent = errorStr;
|
||||
|
||||
document.getElementById("login-error").style.display = "block";
|
||||
}
|
||||
|
||||
async function generateToken(username, password) {
|
||||
const credentials = btoa(`${username} ${password}`);
|
||||
|
||||
const response = await fetch("https://account.spfn.net/api/v2/oauth2/generate_token", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Authorization": `Basic ${credentials}`,
|
||||
}
|
||||
})
|
||||
if (!response.ok) {
|
||||
if (response.status == 400) { // Invalid Login
|
||||
loginError("Invalid SFID or Password");
|
||||
} else {
|
||||
loginError(await response.text(), response.status);
|
||||
}
|
||||
|
||||
throw new Error("Network Response was not okay when Generating Token");
|
||||
};
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
sessionStorage.setItem("authToken", data["token"])
|
||||
|
||||
const expiry = data["expiry"].slice(0, 19) + "Z"
|
||||
sessionStorage.setItem("authExpires", expiry)
|
||||
return data["token"];
|
||||
}
|
||||
|
||||
function updateUserDataDisplay(data) {
|
||||
document.getElementById("display-name").textContent = data["mii"]["name"];
|
||||
document.getElementById("sfid").textContent = `SFID: ${data["user_id"]}`;
|
||||
|
||||
document.getElementById("email").innerHTML = `<strong>Email: </strong>${data["email"]["address"]}`;
|
||||
document.getElementById("dob").innerHTML = `<strong>Date of Birth: </strong>${data["birth_date"]}`;
|
||||
|
||||
let createdAt = new Date(data["create_date"] + "Z");
|
||||
document.getElementById("created-at").innerHTML = `<strong>Created: </strong>${createdAt.toLocaleString()}`
|
||||
|
||||
document.getElementById("tz").innerHTML = `<strong>Timezone: </strong>${data["tz_name"]}`;
|
||||
document.getElementById("region").innerHTML = `<strong>Country/Region: </strong>${data["country"]}`;
|
||||
|
||||
document.getElementById("login").style.display = "none";
|
||||
document.getElementById("user-info").style.display = "flex";
|
||||
}
|
||||
|
||||
function logOut() {
|
||||
document.getElementById("login-error").style.display = "none";
|
||||
|
||||
sessionStorage.clear();
|
||||
document.getElementById("user-info").style.display = "none";
|
||||
document.getElementById("login").style.display = "flex";
|
||||
}
|
||||
|
||||
document.getElementById("login").addEventListener("submit", async function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
document.getElementById("login-error").style.display = "none";
|
||||
|
||||
const username = await document.getElementById("username").value;
|
||||
const password = await document.getElementById("password").value;
|
||||
|
||||
let token = sessionStorage.getItem("authToken");
|
||||
|
||||
let expiryStr = sessionStorage.getItem("authExpires");
|
||||
if (expiryStr) { // Expiry exists so token should exist
|
||||
let expiry = new Date(expiryStr);
|
||||
if (expiry < new Date()) {
|
||||
console.log("Token Expired - Generating new token")
|
||||
token = await generateToken(username, password); // Generate Token and Save to Session Storage
|
||||
} else if (!token) {
|
||||
console.log("Expiry found but no token wtf? - Generating new token")
|
||||
token = await generateToken(username, password); // Generate Token and Save to Session Storage
|
||||
} else {
|
||||
console.log("Expiry is less than the current Date() and there is a token")
|
||||
}
|
||||
} else {
|
||||
console.log("No expiry found - Generating new token")
|
||||
token = await generateToken(username, password); // Generate Token and Save to Session Storage
|
||||
}
|
||||
|
||||
document.getElementById("password").value = "";
|
||||
|
||||
const response = await fetch("https://account.spfn.net/api/v2/users/@me/profile", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Authorization": `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
if (!response.ok) {
|
||||
loginError(await response.text(), response.status);
|
||||
throw new Error("Network Response was not okay when requesting Profile");
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// Success - Display user data
|
||||
updateUserDataDisplay(data);
|
||||
})
|
||||
|
||||
|
||||
|
||||
// Check if there is an active login
|
||||
window.onload = async function() {
|
||||
let expiryStr = sessionStorage.getItem("authExpires");
|
||||
if (expiryStr) {
|
||||
console.log("Expiry found")
|
||||
let expiry = new Date(expiryStr);
|
||||
|
||||
if (expiry > new Date()) { // Hasn't expired - Get user data
|
||||
console.log("Not expired - Requesting data")
|
||||
let token = sessionStorage.getItem("authToken");
|
||||
|
||||
const response = await fetch("https://account.spfn.net/api/v2/users/@me/profile", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Authorization": `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
if (!response.ok) throw new Error("Network Response was not okay when requesting Profile")
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
updateUserDataDisplay(data);
|
||||
document.getElementById("loading-screen").style.display = "none";
|
||||
|
||||
} else { // Has expired - Prompt user to log back in
|
||||
document.getElementById("loading-screen").style.display = "none";
|
||||
document.getElementById("login").style.display = "block";
|
||||
|
||||
loginError("Login expired - Please log in again")
|
||||
}
|
||||
} else { // User has never logged in for this session
|
||||
document.getElementById("loading-screen").style.display = "none";
|
||||
document.getElementById("login").style.display = "block";
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Account | SPFN</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<script type="text/javascript" src="/js/lang.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
|
|
@ -13,7 +15,7 @@
|
|||
<ul class="nav-links">
|
||||
<a href="/"><button class="header-button">Home</button></a>
|
||||
<a href="/guides"><button class="header-button">Guides</button></a>
|
||||
<a href="/account"><button class="header-button">Account</button></a>
|
||||
<a href="/account"><button class="header-button active">Account</button></a>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
|
@ -30,7 +32,7 @@
|
|||
<form id="login" style="display: none;">
|
||||
<h3 class="center">Please log in before viewing account information</h3>
|
||||
<div class="form-group">
|
||||
<label for="username">SFID:</label>
|
||||
<label for="username">SFID / Username:</label>
|
||||
<input type="text" id="username" name="username" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
|
|
@ -42,12 +44,13 @@
|
|||
</form>
|
||||
|
||||
<div id="user-info" class="info" style="display: none;">
|
||||
<div id="user-display" class="info-container" style="width: 180px">
|
||||
<div id="user-display" class="info-container" style="width: 180px; align-items: center;">
|
||||
<img src="/res/img/mii-placeholder.png" style="width: 100%">
|
||||
<h3 id="display-name" style="margin: 2px;">Display Name</h3>
|
||||
<p id="sfid" style="margin: 2px;">SFID: Username</p>
|
||||
<button style="font-size: 24px; width: 180px;" onclick="logOut()">Log Out</button>
|
||||
<button style="font-size: 24px; width: 160px;" onclick="logOut()">Log Out</button>
|
||||
</div>
|
||||
<div id="user-details" class="info-container", style="flex: 1;">
|
||||
<div id="user-details" class="info-container" style="flex: 1;">
|
||||
<p class="info-text" id="email"><strong>Email: </strong>name@domain.com</p>
|
||||
<p class="info-text" id="dob"><strong>Date of Birth: </strong>dd/mm/yyyy</p>
|
||||
<hr style="margin: 1rem 0; border: none; height: 1px; background: #aaa;">
|
||||
|
|
@ -58,7 +61,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="accounts.js"></script>
|
||||
<script type="text/javascript" src="/js/accounts.js"></script>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue