Added User Profile Viewing
This commit is contained in:
BloxerHD
parent
c1c292c437
commit
e232e153d8
3 changed files with 76 additions and 50 deletions
|
|
@ -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();
|
event.preventDefault();
|
||||||
|
|
||||||
const username = document.getElementById("username").value;
|
const username = await document.getElementById("username").value;
|
||||||
const password = document.getElementById("password").value;
|
const password = await document.getElementById("password").value;
|
||||||
|
|
||||||
const credentials = btoa(`${username} ${password}`);
|
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",
|
method: "GET",
|
||||||
headers: {
|
headers: {
|
||||||
"Authorization": credentials,
|
"Authorization": `Bearer ${token}`
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.then(response => {
|
if (!response.ok) throw new Error("Network Response was not okay when requesting Profile")
|
||||||
if (!response.ok) throw new Error("Network Response was not okay");
|
|
||||||
return response.json();
|
const data = await response.json();
|
||||||
})
|
|
||||||
.then(data => { // Success - Hide Form and Show Info on Screen
|
|
||||||
document.getElementById("username").value = `SFID: ${data["username"]}`
|
|
||||||
|
|
||||||
document.getElementById("email").value = data["email"];
|
console.log(data)
|
||||||
document.getElementById("dob").value = data["birthdate"];
|
|
||||||
document.getElementById("tz").value = data["timezone"];
|
|
||||||
document.getElementById("region").value = data["region"];
|
|
||||||
|
|
||||||
document.getElementById("login").style.display = "none";
|
// Success - Display user data
|
||||||
document.getElementById("user-info").style.display = "flex";
|
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";
|
||||||
})
|
})
|
||||||
|
|
@ -5,9 +5,9 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<div>
|
<div style="display: flex;">
|
||||||
<img rel="icon" href="/logo.ico" type="image/x-icon">
|
<h1 style="margin: 0 auto;">SPFN</h1>
|
||||||
<h1>SPFN</h1>
|
<h2 style="font-size: 32px; margin: auto; padding: 12px">Account</h2>
|
||||||
</div>
|
</div>
|
||||||
<nav>
|
<nav>
|
||||||
<ul class="nav-links">
|
<ul class="nav-links">
|
||||||
|
|
@ -19,8 +19,6 @@
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<h2>Accounts</h2>
|
|
||||||
|
|
||||||
<form id="login">
|
<form id="login">
|
||||||
<h3 class="center">Please log in before viewing account information</h3>
|
<h3 class="center">Please log in before viewing account information</h3>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
|
|
@ -38,7 +36,7 @@
|
||||||
<div id="user-info" class="info" style="display: none;">
|
<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">
|
||||||
<h3 id="display-name" style="margin: 2px;">Display Name</h3>
|
<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>
|
||||||
<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="email"><strong>Email: </strong>name@domain.com</p>
|
||||||
|
|
|
||||||
|
|
@ -5,9 +5,9 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<div>
|
<div style="display: flex;">
|
||||||
<img rel="icon" href="/logo.ico" type="image/x-icon">
|
<h1 style="margin: 0 auto;">SPFN</h1>
|
||||||
<h1>SPFN</h1>
|
<h2 style="font-size: 32px; margin: auto; padding: 12px">Guides</h2>
|
||||||
</div>
|
</div>
|
||||||
<nav>
|
<nav>
|
||||||
<ul class="nav-links">
|
<ul class="nav-links">
|
||||||
|
|
@ -19,29 +19,30 @@
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<h2>Guides</h2>
|
<div class="guide-container">
|
||||||
<div class="guide-buttons">
|
<div class="guide-buttons">
|
||||||
<button class="guide active" onclick="changeGuide('g-install')">Installation - Wii U</button>
|
<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-install-cemu')">Installation - Cemu</button>
|
||||||
<button class="guide" onclick="changeGuide('g-troubleshoot')">Troubleshooting - Wii U</button>
|
<button class="guide" onclick="changeGuide('g-troubleshoot')">Troubleshooting - Wii U</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="guide-content" id="g-install">
|
<div class="guide-content" id="g-install">
|
||||||
<h3>Installation - Wii U</h3>
|
<h3>Installation - Wii U</h3>
|
||||||
<p>Install Plugins</p>
|
<p>Install Plugins</p>
|
||||||
<p>Create Account</p>
|
<p>Create Account</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="guide-content" id="g-install-cemu" style="display: none;">
|
<div class="guide-content" id="g-install-cemu" style="display: none;">
|
||||||
<h3>Installation - Cemu</h3>
|
<h3>Installation - Cemu</h3>
|
||||||
<p>Install on Wii U first</p>
|
<p>Install on Wii U first</p>
|
||||||
<p>Create Account</p>
|
<p>Create Account</p>
|
||||||
<p>Dump SPFN account</p>
|
<p>Dump SPFN account</p>
|
||||||
<p>Transfer to Cemu</p>
|
<p>Transfer to Cemu</p>
|
||||||
<p>Add network_services.xml to Cemu Folder</p>
|
<p>Add network_services.xml to Cemu Folder</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="guide-content" id="g-troubleshoot" style="display: none;">
|
<div class="guide-content" id="g-troubleshoot" style="display: none;">
|
||||||
<h3>Troubleshooting - Wii U</h3>
|
<h3>Troubleshooting - Wii U</h3>
|
||||||
<p>Join the Discord</p>
|
<p>Join the Discord</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script type="text/javascript" src="guides.js"></script>
|
<script type="text/javascript" src="guides.js"></script>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue