spacebar/spfn-website
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added Support for Deleting Accounts, Mii Renders and Updated Credits

Browse source
This commit is contained in:
BloxerHD 2025-09-22 17:58:56 +01:00
commit 89d00a9a42
8 changed files with 105 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

22
account/index.html
View file

@ -10,7 +10,7 @@
<body> <body>
<header> <header>
<div style="display: flex;"> <div style="display: flex;">
<h1 style="margin: 0 auto;">SPFN</h1> <img style="width: 96px; padding: 0px; margin: 0 auto" src="/res/img/spfn.png">
<h2 style="font-size: 32px; margin: auto; padding: 12px">Account</h2> <h2 style="font-size: 32px; margin: auto; padding: 12px">Account</h2>
</div> </div>
<nav> <nav>
@ -47,7 +47,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; align-items: center;"> <div id="user-display" class="info-container" style="width: 180px; align-items: center;">
<img src="/res/img/mii-placeholder.png" style="width: 100%"> <img src="/res/img/mii-placeholder.png" id="mii-img" style="width: 100%">
<h3 id="display-name" style="margin: 2px;">Display Name</h3> <h3 id="display-name" style="margin: 2px;">Display Name</h3>
<p id="sfid" style="margin: 2px;">SFID: Username</p> <p id="sfid" style="margin: 2px;">SFID: Username</p>
<button style="font-size: 24px; width: 160px;" onclick="logOut()">Log Out</button> <button style="font-size: 24px; width: 160px;" onclick="logOut()">Log Out</button>
@ -60,9 +60,27 @@
<hr style="margin: 1rem 0; border: none; height: 1px; background: #aaa;"> <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="tz"><strong>Timezone: </strong>Europe/London</p>
<p class="info-text" id="region"><strong>Country/Region: </strong>GB</p> <p class="info-text" id="region"><strong>Country/Region: </strong>GB</p>
<hr style="margin: 1rem 0; border: none; height: 1px; background: #aaa;">
<button style="font-size: 24px; width: 40%;margin-left: auto;" onclick="showDeleteWarning()">Delete Account</button>
</div> </div>
</div> </div>
<div id="confirm-delete" class="delete-screen" style="display: none">
<h2 style="text-align: center;">WARNING: This Action Is Irreversible</h2>
<p style="text-align: center;">Deleting your account is an irreversible action. You cannot recover your account once this has been done.</p>
<p style="text-align: center;">This will delete your account from our database, not from your Wii U or Cemu. You will need to manually remove it from these.</p>
<div style="display: flex; flex-direction: row; padding: 8px; justify-content: center;">
<button id="confirm-delete-button" style="width: 300px; font-size: 32px;" class="delete-button">Delete Account</button>
<button id="cancel-delete-button" style="width: 300px; font-size: 32px;" onclick="hideDeleteWarning()">Cancel</button>
</div>
</div>
<div id="delete-success" class="delete-screen" style="display: none">
<h2 style="text-align: center; margin: 0;">Account Deleted Successfully</h2>
<p style="text-align: center;">Your account has been removed from our database. You can no longer log in to this account on this website, your Wii U or on Cemu. If you wish to use these services again, you will need to create a new account on your Wii U. Your old SFID can be reused on this new account if it remains unused.</p>
<p style="text-align: center;">This does not remove your account from your devices. You will need to manually remove the files with FTPiiU or by removing the files from your Cemu MLC folder. If you are not sure how to do this, <a href="https://discord.gg/grMSxZf" target="_blank">ask in the discord.</a></p>
</div>
<script type="text/javascript" src="/js/accounts.js"></script> <script type="text/javascript" src="/js/accounts.js"></script>
</main> </main>

16
css/style.css
View file

@ -267,6 +267,22 @@ code {
padding: 8px; padding: 8px;
} }
.delete-screen {
background-color: #6d0606;
border: 6px solid #a00b0b;
border-radius: 16px;
width: 60%;
margin: 0 auto;
padding: 8px;
}
.delete-button {
background-color: #dc0404;
border: none;
padding: 8px;
margin: 0 16px;
}
.active { .active {
background-color: #a00b0b; background-color: #a00b0b;
border-color: #6d0606; border-color: #6d0606;

2
guides/index.html
View file

@ -14,7 +14,7 @@
<body> <body>
<header> <header>
<div style="display: flex;"> <div style="display: flex;">
<h1 style="margin: 0 auto;">SPFN</h1> <img style="width: 96px; padding: 0px; margin: 0 auto" src="/res/img/spfn.png">
<h2 style="font-size: 32px; margin: auto; padding: 12px">Guides</h2> <h2 style="font-size: 32px; margin: auto; padding: 12px">Guides</h2>
</div> </div>
<nav> <nav>

16
index.html
View file

@ -9,8 +9,9 @@
</head> </head>
<body> <body>
<header> <header>
<div> <div style="display: flex;">
<h1>SPFN</h1> <img style="width: 96px; padding: 0px; margin: 0px" src="/res/img/spfn.png">
<h2 style="font-size: 32px; margin: auto; padding: 12px">Splatfestival Network</h2>
</div> </div>
<nav> <nav>
<ul class="nav-links"> <ul class="nav-links">
@ -22,11 +23,12 @@
</header> </header>
<main> <main>
<div class="title"> <div class="title">
<img style="width: 192px; padding: 0px; margin: 0px" src="/res/img/spfn.png">
<h2 class="title-main">Splatfestival Network</h2> <h2 class="title-main">Splatfestival Network</h2>
<p class="title-desc">Restoring Splatfests to Splatoon on the Wii U</p> <p class="title-desc">Restoring Splatfests to Splatoon on the Wii U</p>
<a href="https://github.com/Splatfestival-Network" target="_blank">Find us on Github</a> <a href="https://git.virintox.com/spfn" target="_blank">Find us on our GitLab</a>
</div> </div>
<div class="home-container"> <div class="home-container" style="display: none;">
<h2 style="margin: 4px;">Splatfest Information</h2> <h2 style="margin: 4px;">Splatfest Information</h2>
<p style="margin: 4px;">Check here for information about current or upcoming splatfests</p> <p style="margin: 4px;">Check here for information about current or upcoming splatfests</p>
<div id="splatfest-active" class="splatfest-active", style="display: none;"> <div id="splatfest-active" class="splatfest-active", style="display: none;">
@ -54,9 +56,9 @@
</div> </div>
</div> </div>
<div class="team-member"> <div class="team-member">
<img src="/res/img/tv.png"> <img src="/res/img/rusticmaple.png">
<div style="display: block;"> <div style="display: block;">
<a href="https://github.com/DJMrTV" target="_blank" class="team-link"><h2>TV</h2></a> <a href="https://github.com/RusticMaple" target="_blank" class="team-link"><h2>RusticMaple</h2></a>
<p>Owner and Server Developer</p> <p>Owner and Server Developer</p>
</div> </div>
</div> </div>
@ -73,7 +75,7 @@
<img src="/res/img/bloxerhd.png"> <img src="/res/img/bloxerhd.png">
<div style="display: block;"> <div style="display: block;">
<a href="https://github.com/BloxerHD018" target="_blank" class="team-link"><h2>BloxerHD</h2></a> <a href="https://github.com/BloxerHD018" target="_blank" class="team-link"><h2>BloxerHD</h2></a>
<p>Website Developer</p> <p>Website and Server Developer</p>
</div> </div>
</div> </div>
<div class="team-member"> <div class="team-member">

106
js/accounts.js
View file

@ -39,39 +39,7 @@ async function generateToken(username, password) {
return data["token"]; return data["token"];
} }
function updateUserDataDisplay(data) { async function getToken(username, password) {
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 token = sessionStorage.getItem("authToken");
let expiryStr = sessionStorage.getItem("authExpires"); let expiryStr = sessionStorage.getItem("authExpires");
@ -91,6 +59,49 @@ document.getElementById("login").addEventListener("submit", async function(event
token = await generateToken(username, password); // Generate Token and Save to Session Storage token = await generateToken(username, password); // Generate Token and Save to Session Storage
} }
return token
}
function updateUserDataDisplay(data) {
console.log(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";
let miiLink = `http://127.0.0.1:8000/${data["pid"]}/main.png`
document.getElementById("mii-img").src = miiLink;
}
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 = await getToken(username, password);
document.getElementById("password").value = ""; document.getElementById("password").value = "";
const response = await fetch("https://account.spfn.net/api/v2/users/@me/profile", { const response = await fetch("https://account.spfn.net/api/v2/users/@me/profile", {
@ -146,4 +157,33 @@ window.onload = async function() {
document.getElementById("loading-screen").style.display = "none"; document.getElementById("loading-screen").style.display = "none";
document.getElementById("login").style.display = "block"; document.getElementById("login").style.display = "block";
} }
}
function showDeleteWarning() {
document.getElementById("confirm-delete").style = ""
document.getElementById("user-info").style = "display: none;"
}
function hideDeleteWarning() {
document.getElementById("user-info").style = ""
document.getElementById("confirm-delete").style = "display: none;"
}
async function deleteAccount() {
let token = await getToken(username, password);
const response = await fetch("https://account.spfn.net/api/v2/users/@me/delete", {
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 Account Deletion");
}
document.getElementById("confirm-delete").style = "display: none;"
document.getElementById("delete-success").style = ""
} }

BIN
res/img/rusticmaple.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 761 KiB

BIN
res/img/spfn.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 107 KiB

BIN
res/img/tv.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 7.9 KiB