Added User Profile Viewing

This commit is contained in:
BloxerHD 2025-06-06 13:03:02 +01:00
commit e232e153d8
3 changed files with 76 additions and 50 deletions

View file

@ -1,32 +1,59 @@
const requestAddr = "https://account.spfn.net/api/v2/oauth2/generate_token"
async function generateToken(creds) {
const response = await fetch("https://account.spfn.net/api/v2/oauth2/generate_token", {
method: "GET",
headers: {
"Authorization": `Basic ${creds}`,
}
})
if (!response.ok) throw new Error("Network Response was not okay when Generating Token");
const data = await response.json();
document.getElementById("login").addEventListener("submit", function(event) {
sessionStorage.setItem("authToken", data["token"])
sessionStorage.setItem("authExpires", data["expiry"])
}
document.getElementById("login").addEventListener("submit", async function(event) {
event.preventDefault();
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
const username = await document.getElementById("username").value;
const password = await document.getElementById("password").value;
const credentials = btoa(`${username} ${password}`);
fetch(requestAddr, {
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
}
} else {
console.log("No token found - Generating new token")
await generateToken(credentials);
}
const response = await fetch("https://account.spfn.net/api/v2/users/@me/profile", {
method: "GET",
headers: {
"Authorization": credentials,
"Authorization": `Bearer ${token}`
}
})
.then(response => {
if (!response.ok) throw new Error("Network Response was not okay");
return response.json();
})
.then(data => { // Success - Hide Form and Show Info on Screen
document.getElementById("username").value = `SFID: ${data["username"]}`
if (!response.ok) throw new Error("Network Response was not okay when requesting Profile")
const data = await response.json();
document.getElementById("email").value = data["email"];
document.getElementById("dob").value = data["birthdate"];
document.getElementById("tz").value = data["timezone"];
document.getElementById("region").value = data["region"];
console.log(data)
document.getElementById("login").style.display = "none";
document.getElementById("user-info").style.display = "flex";
})
// Success - Display user 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"]}`;
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";
})

View file

@ -5,9 +5,9 @@
</head>
<body>
<header>
<div>
<img rel="icon" href="/logo.ico" type="image/x-icon">
<h1>SPFN</h1>
<div style="display: flex;">
<h1 style="margin: 0 auto;">SPFN</h1>
<h2 style="font-size: 32px; margin: auto; padding: 12px">Account</h2>
</div>
<nav>
<ul class="nav-links">
@ -19,8 +19,6 @@
</header>
<main>
<h2>Accounts</h2>
<form id="login">
<h3 class="center">Please log in before viewing account information</h3>
<div class="form-group">
@ -38,7 +36,7 @@
<div id="user-info" class="info" style="display: none;">
<div id="user-display" class="info-container" style="width: 180px">
<h3 id="display-name" style="margin: 2px;">Display Name</h3>
<p id="username" style="margin: 2px;">SFID: Username</p>
<p id="sfid" style="margin: 2px;">SFID: Username</p>
</div>
<div id="user-details" class="info-container", style="flex: 1;">
<p class="info-text" id="email"><strong>Email: </strong>name@domain.com</p>

View file

@ -5,9 +5,9 @@
</head>
<body>
<header>
<div>
<img rel="icon" href="/logo.ico" type="image/x-icon">
<h1>SPFN</h1>
<div style="display: flex;">
<h1 style="margin: 0 auto;">SPFN</h1>
<h2 style="font-size: 32px; margin: auto; padding: 12px">Guides</h2>
</div>
<nav>
<ul class="nav-links">
@ -19,29 +19,30 @@
</header>
<main>
<h2>Guides</h2>
<div class="guide-buttons">
<button class="guide active" onclick="changeGuide('g-install')">Installation - Wii U</button>
<button class="guide" onclick="changeGuide('g-install-cemu')">Installation - Cemu</button>
<button class="guide" onclick="changeGuide('g-troubleshoot')">Troubleshooting - Wii U</button>
</div>
<div class="guide-container">
<div class="guide-buttons">
<button class="guide active" onclick="changeGuide('g-install')">Installation - Wii U</button>
<button class="guide" onclick="changeGuide('g-install-cemu')">Installation - Cemu</button>
<button class="guide" onclick="changeGuide('g-troubleshoot')">Troubleshooting - Wii U</button>
</div>
<div class="guide-content" id="g-install">
<h3>Installation - Wii U</h3>
<p>Install Plugins</p>
<p>Create Account</p>
</div>
<div class="guide-content" id="g-install-cemu" style="display: none;">
<h3>Installation - Cemu</h3>
<p>Install on Wii U first</p>
<p>Create Account</p>
<p>Dump SPFN account</p>
<p>Transfer to Cemu</p>
<p>Add network_services.xml to Cemu Folder</p>
</div>
<div class="guide-content" id="g-troubleshoot" style="display: none;">
<h3>Troubleshooting - Wii U</h3>
<p>Join the Discord</p>
<div class="guide-content" id="g-install">
<h3>Installation - Wii U</h3>
<p>Install Plugins</p>
<p>Create Account</p>
</div>
<div class="guide-content" id="g-install-cemu" style="display: none;">
<h3>Installation - Cemu</h3>
<p>Install on Wii U first</p>
<p>Create Account</p>
<p>Dump SPFN account</p>
<p>Transfer to Cemu</p>
<p>Add network_services.xml to Cemu Folder</p>
</div>
<div class="guide-content" id="g-troubleshoot" style="display: none;">
<h3>Troubleshooting - Wii U</h3>
<p>Join the Discord</p>
</div>
</div>
<script type="text/javascript" src="guides.js"></script>