Mobile Formatting for Guides and Account Pages
This commit is contained in:
parent
13305e0f96
commit
1aa75f4be2
4 changed files with 86 additions and 43 deletions
|
|
@ -37,14 +37,14 @@
|
|||
<h3 class="center">Please log in before viewing account information</h3>
|
||||
<div class="form-group">
|
||||
<label for="username">SFID / Username:</label>
|
||||
<input type="text" id="username" name="username" required />
|
||||
<input class="login-input" type="text" id="username" name="username" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password:</label>
|
||||
<input type="password" id="password" name="password" required />
|
||||
<input class="login-input" type="password" id="password" name="password" required />
|
||||
</div>
|
||||
<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>
|
||||
<button class="form-button" type="submit">Login</button>
|
||||
<p class="form-note">Please ask an SPFN Developer in the <a href="https://discord.gg/grMSxZf">discord server</a> for assistance with password resets</p>
|
||||
</form>
|
||||
|
||||
<div id="user-info" class="info" style="display: none;">
|
||||
|
|
|
|||
|
|
@ -64,13 +64,13 @@ strong {
|
|||
padding: 4px;
|
||||
}
|
||||
|
||||
input {
|
||||
.login-input {
|
||||
background-color: #5f0808;
|
||||
border: 1px solid white;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
border-radius: 5px;
|
||||
padding: 4px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.header-button {
|
||||
|
|
@ -103,7 +103,38 @@ form {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
font-weight: bold;
|
||||
margin: 8px 0;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.form-button {
|
||||
font-size: 24px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-note {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media (orientation: portrait) {
|
||||
form {
|
||||
max-width: 100%;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.form-button {
|
||||
font-size: 64px;
|
||||
}
|
||||
|
||||
.login-input {
|
||||
font-size: 48px;
|
||||
border-width: 4px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.form-note {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
|
|
@ -167,7 +198,26 @@ form {
|
|||
width: 70%;
|
||||
background-color: #770505;
|
||||
border-radius: 15px;
|
||||
padding: 8px
|
||||
padding: 8px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@media (orientation: portrait) {
|
||||
.guide-container {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.guide-buttons {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.guide {
|
||||
font-size: 60px;
|
||||
height: 128px;
|
||||
line-height: 128px;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
|
|
@ -187,6 +237,14 @@ code {
|
|||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media (orientation: portrait) {
|
||||
.error-container {
|
||||
font-size: 36px;
|
||||
width: 100%;
|
||||
margin: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 80vh;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -40,20 +40,6 @@
|
|||
<div class="guide-content" id="guide-contents">
|
||||
<h3>Loading...</h3>
|
||||
</div>
|
||||
|
||||
<div class="guide-content" id="g-troubleshoot" style="display: none;">
|
||||
<h2>Troubleshooting - Wii U</h2>
|
||||
<h3>I'm getting error code 118-XXXX when joining Splatoon matches</h3>
|
||||
<p>
|
||||
Error codes starting with 118 refer to the Peer to Peer connection.
|
||||
Either your connection or the connection of the host console is bad, resulting in errors like this.
|
||||
Ensure that your NAT type is either A or B (preferrably A) and try again.
|
||||
</p>
|
||||
<h3>I'm getting error code 616-XXXX when booting into the SPFN environment</h3>
|
||||
<p>SPFN requires you to be on the latest version of Aroma. Open the Aroma Updater while in the SPFN environment and update it.</p>
|
||||
<h3>My error isn't listed</h3>
|
||||
<p><a href="https://discord.gg/grMSxZf" target="_blank">Join the Discord</a> and ask in the assistance channel</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="/js/guides.js"></script>
|
||||
|
|
|
|||
|
|
@ -24,12 +24,19 @@ function loginError(message, code = null) {
|
|||
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}`,
|
||||
}
|
||||
})
|
||||
let response;
|
||||
try {
|
||||
response = await fetch("https://account.spfn.net/api/v2/oauth2/generate_token", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Authorization": `Basic ${credentials}`,
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
loginError(`Internal Server Error: ${err.message}`)
|
||||
throw new Error(err);
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status == 400) { // Invalid Login
|
||||
loginError("Invalid SFID or Password");
|
||||
|
|
@ -55,26 +62,19 @@ async function getToken(username, password) {
|
|||
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")
|
||||
if (expiry < new Date()) { // Expired token
|
||||
token = await generateToken(username, password);
|
||||
} else if (!token) { // Expiry Saved but No Token (shouldn't be possible but it'll be caught if it happens)
|
||||
token = await generateToken(username, password);
|
||||
}
|
||||
} else {
|
||||
console.log("No expiry found - Generating new token")
|
||||
token = await generateToken(username, password); // Generate Token and Save to Session Storage
|
||||
} else { // Token Never Saved in Session
|
||||
token = await generateToken(username, password);
|
||||
}
|
||||
|
||||
return token
|
||||
}
|
||||
|
||||
function updateUserDataDisplay(data) {
|
||||
console.log(data)
|
||||
|
||||
document.getElementById("display-name").textContent = data["mii"]["name"];
|
||||
document.getElementById("sfid").textContent = `SFID: ${data["user_id"]}`;
|
||||
|
||||
|
|
@ -115,6 +115,7 @@ document.getElementById("login").addEventListener("submit", async function(event
|
|||
const password = await document.getElementById("password").value;
|
||||
|
||||
let token = await getToken(username, password);
|
||||
if (!token) return;
|
||||
|
||||
document.getElementById("password").value = "";
|
||||
|
||||
|
|
@ -141,11 +142,9 @@ document.getElementById("login").addEventListener("submit", async function(event
|
|||
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", {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue