Fixed Profile Fail when Generating Token + Auto Display Profile when Valid Token Found in Session
This commit is contained in:
BloxerHD
parent
189db5e479
commit
1ec81f79a8
4 changed files with 141 additions and 30 deletions
|
|
@ -1,59 +1,149 @@
|
|||
async function generateToken(creds) {
|
||||
const response = await fetch("https://account.spfn.net/api/v2/oauth2/generate_token", {
|
||||
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/generatetoken", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Authorization": `Basic ${creds}`,
|
||||
"Authorization": `Basic ${credentials}`,
|
||||
}
|
||||
})
|
||||
if (!response.ok) throw new Error("Network Response was not okay when Generating Token");
|
||||
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"])
|
||||
sessionStorage.setItem("authExpires", data["expiry"])
|
||||
|
||||
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;
|
||||
|
||||
const credentials = btoa(`${username} ${password}`);
|
||||
|
||||
let expiry = sessionStorage.getItem("authExpires");
|
||||
let token = sessionStorage.getItem("authToken");
|
||||
if (expiry) {
|
||||
if (!token) {
|
||||
console.log("No token found - Generating new token")
|
||||
await generateToken(credentials); // Generate Token and Save to Session Storage
|
||||
|
||||
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 token found - Generating new token")
|
||||
await generateToken(credentials);
|
||||
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) throw new Error("Network Response was not okay when requesting Profile")
|
||||
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();
|
||||
|
||||
console.log(data)
|
||||
|
||||
// Success - Display user data
|
||||
document.getElementById("display-name").textContent = data["mii"]["name"];
|
||||
document.getElementById("sfid").textContent = `SFID: ${data["user_id"]}`;
|
||||
updateUserDataDisplay(data);
|
||||
})
|
||||
|
||||
document.getElementById("email").innerHTML = `<strong>Email: </strong>${data["email"]["address"]}`;
|
||||
document.getElementById("dob").innerHTML = `<strong>Date of Birth: </strong>${data["birth_date"]}`;
|
||||
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";
|
||||
})
|
||||
|
||||
// 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";
|
||||
}
|
||||
}
|
||||
|
|
@ -19,7 +19,15 @@
|
|||
</header>
|
||||
|
||||
<main>
|
||||
<form id="login">
|
||||
<div id="loading-screen">
|
||||
<h2 class="center">Loading...</h2>
|
||||
</div>
|
||||
|
||||
<div id="login-error" class="error-container" style="display: none;">
|
||||
<h2 id="error-text">ERROR</h2>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
|
@ -29,7 +37,7 @@
|
|||
<label for="password">Password:</label>
|
||||
<input type="password" id="password" name="password" required />
|
||||
</div>
|
||||
<button type="submit" style="font-size: 24px;">Login</button>
|
||||
<button type="submit" style="font-size: 24px; width: 100%;">Login</button>
|
||||
<p class="center" style="font-size: 12px;">Please ask an SPFN Developer in the <a href="https://discord.gg/grMSxZf">discord server</a> for assistance with password resets</p>
|
||||
</form>
|
||||
|
||||
|
|
@ -37,10 +45,14 @@
|
|||
<div id="user-display" class="info-container" style="width: 180px">
|
||||
<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>
|
||||
</div>
|
||||
<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;">
|
||||
<p class="info-text" id="created-at"><strong>Created: </strong>dd/mm/yyyy hh:mm</p>
|
||||
<hr style="margin: 1rem 0; border: none; height: 1px; background: #aaa;">
|
||||
<p class="info-text" id="tz"><strong>Timezone: </strong>Europe/London</p>
|
||||
<p class="info-text" id="region"><strong>Country/Region: </strong>GB</p>
|
||||
</div>
|
||||
|
|
@ -50,6 +62,6 @@
|
|||
</main>
|
||||
|
||||
<footer>
|
||||
<p class="center">Need assistance? <a href="https://discord.gg/grMSxZf">Join the Discord</a></p>
|
||||
<p class="center">Need assistance? <a href="https://discord.gg/grMSxZf" target="_blank">Join the Discord</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
|
|
@ -110,4 +110,13 @@ form {
|
|||
background-color: #bfbfbf;
|
||||
color: black;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.error-container {
|
||||
background-color: #aa0000;
|
||||
width: 40%;
|
||||
margin: 0 auto;
|
||||
color: white;
|
||||
text-align: center;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
|
@ -20,6 +20,6 @@
|
|||
<p>Splatfestival Network - Restoring Splatfests to Splatoon on the Wii U</p>
|
||||
</main>
|
||||
<footer>
|
||||
<p class="center">Need assistance? <a href="https://discord.gg/grMSxZf">Join the Discord</a></p>
|
||||
<p class="center">Need assistance? <a href="https://discord.gg/grMSxZf" target="_blank">Join the Discord</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
Loading…
Add table
Add a link
Reference in a new issue