From 611fe1efca0b792ca62a46ed7f4348248f271131 Mon Sep 17 00:00:00 2001 From: Zekiah-A Date: Sun, 24 Mar 2024 21:56:19 +0000 Subject: [PATCH] Update account labeling, account change email / profile picture upload, accessibility and tab fixes + contents accesibility --- Other/header-template.js | 9 ++- Other/login-template.js | 2 +- Other/select-template.js | 31 ++++++--- SubliminalServer/Program.cs | 44 ++++++------ account.html | 86 ++++++++++++++---------- account.js | 2 +- contents.html | 29 +++++--- disclaimer.html | 4 +- editor-document.js | 130 ++++++++++++++++++++++++++++-------- 9 files changed, 224 insertions(+), 113 deletions(-) diff --git a/Other/header-template.js b/Other/header-template.js index 28864b3..7a96ecf 100644 --- a/Other/header-template.js +++ b/Other/header-template.js @@ -19,7 +19,7 @@ class SubliminalHeader extends HTMLElement { let loginSignup = createOrUpdateFromData('login-signup'); if (loginSignup) this.parentDocument.body.appendChild(loginSignup)"> + onclick="window.location.reload(true)" style="display: none;">
` @@ -175,8 +175,11 @@ class SubliminalHeader extends HTMLElement { console.warn("WARNING: Page has not imported account.js or is requesting nologin. Login UI disabled") return } - _this.shadowRoot.getElementById( - await isLoggedIn() ? "loginButton" : "logoutButton").style.display = 'none' + + if (await isLoggedIn()) { + _this.loginButton.style.display = "none" + _this.logoutButton.style.display = "block" + } })(this) } } diff --git a/Other/login-template.js b/Other/login-template.js index 0f371e9..316c7f3 100644 --- a/Other/login-template.js +++ b/Other/login-template.js @@ -31,7 +31,7 @@ class LoginSignup extends HTMLElement {
I don't have an account
-
Scan QR
+
Account recovery
diff --git a/Other/select-template.js b/Other/select-template.js index 1f28850..e20798f 100644 --- a/Other/select-template.js +++ b/Other/select-template.js @@ -8,7 +8,7 @@ class SubliminalSelect extends HTMLElement { this.shadowRoot.innerHTML = html` ⯆ - ` + ` const style = document.createElement("style") style.innerHTML = css` :host { @@ -26,7 +26,7 @@ class SubliminalSelect extends HTMLElement { user-select: none; } :host(:hover) { - background-color: #85859269; + background-color: #85859269;x } :host(:active) { background-color: #b1b1bb; @@ -84,25 +84,34 @@ class SubliminalSelect extends HTMLElement { `; this.shadowRoot.append(style) defineAndInject(this, this.shadowRoot) - const thisElement = this + this.tabIndex = "0" - const selectedElement = this.shadowRoot.getElementById("selected") - const optionsElement = this.shadowRoot.getElementById("options") - const arrowElement = this.shadowRoot.getElementById("arrow") - this.onclick = function () { + function toggleOpen() { const open = optionsElement.style.display == "block" optionsElement.style.display = open ? "none" : "block" arrowElement.style.transform = open ? "none" : "scaleY(-1)" recalcOptionsPosition() } - this.onblur = function () { - optionsElement.style.display = "none"; - } + + const selectedElement = this.shadowRoot.getElementById("selected") + const optionsElement = this.shadowRoot.getElementById("options") + const arrowElement = this.shadowRoot.getElementById("arrow") + this.addEventListener("click", toggleOpen) + this.addEventListener("keypress", event => { + if (event.key == "Enter") { + toggleOpen() + } + }) + this.addEventListener("blur", function() { + optionsElement.style.display = "none" + arrowElement.style.transform = "none" + }) selectedElement.textContent = this.getAttribute("placeholder") + " " + const _this = this function recalcOptionsPosition() { const overflowLeft = - thisElement.getBoundingClientRect().left + + _this.getBoundingClientRect().left + optionsElement.offsetWidth - window.innerWidth optionsElement.style.left = Math.min(0, -overflowLeft - 8) + "px" diff --git a/SubliminalServer/Program.cs b/SubliminalServer/Program.cs index 6b0f2f0..348b3da 100644 --- a/SubliminalServer/Program.cs +++ b/SubliminalServer/Program.cs @@ -405,21 +405,21 @@ static string GenerateToken() rateLimitEndpoints.Add("/Profiles", (1, TimeSpan.FromMilliseconds(500))); // Account action endpoints -httpServer.MapPost("/Block", ([FromBody] string blockedKey, [FromServices] DatabaseContext database, HttpContext context) => +httpServer.MapPost("/Block", ([FromBody] int userKey, [FromServices] DatabaseContext database, HttpContext context) => { - return Results.Ok(); // TODO: Implement + return Results.Problem(); // TODO: Implement }); rateLimitEndpoints.Add("/Block", (1, TimeSpan.FromSeconds(2))); authRequiredEndpoints.Add("/Block"); -httpServer.MapPost("/Unblock", ([FromBody] string userGuid, HttpContext context) => +httpServer.MapPost("/Unblock", ([FromBody] int userKey, HttpContext context) => { - return Results.Ok(); // TODO: Implement + return Results.Problem(); // TODO: Implement }); -httpServer.MapPost("/Follow", ([FromBody] string userGuid, HttpContext context) => +httpServer.MapPost("/Follow", ([FromBody] int userKey, HttpContext context) => { - return Results.Ok(); // TODO: Implement + return Results.Problem(); // TODO: Implement }); httpServer.MapPost("/Report", ([FromBody] UploadableReport reportUpload, [FromServices] DatabaseContext database, HttpContext context) => @@ -468,64 +468,64 @@ static string GenerateToken() httpServer.MapPost("/UnfollowUser", ([FromBody] string userKey, HttpContext context) => { - return Results.Ok(); // TODO: Implement + return Results.Problem(); // TODO: Implement }); -httpServer.MapPost("/LikePoem", ([FromBody] string poemGuid, HttpContext context) => +httpServer.MapPost("/LikePoem", ([FromBody] int poemKey, HttpContext context) => { - return Results.Ok(); // TODO: Implement + return Results.Problem(); // TODO: Implement }); -httpServer.MapPost("/UnlikePoem", ([FromBody] string poemKey, HttpContext context) => +httpServer.MapPost("/UnlikePoem", ([FromBody] int poemKey, HttpContext context) => { - return Results.Ok(); // TODO: Implement + return Results.Problem(); // TODO: Implement }); -httpServer.MapPost("/PinPoem", ([FromBody] string poemKey, HttpContext context) => +httpServer.MapPost("/PinPoem", ([FromBody] int poemKey, HttpContext context) => { - return Results.Ok(); // TODO: Implement + return Results.Problem(); // TODO: Implement }); -httpServer.MapPost("/UnpinPoem", ([FromBody] string poemKey, HttpContext context) => +httpServer.MapPost("/UnpinPoem", ([FromBody] int poemKey, HttpContext context) => { - return Results.Ok(); // TODO: Implement + return Results.Problem(); // TODO: Implement }); httpServer.MapPost("/UpdateEmail", ([FromBody] string email, HttpContext context) => { - return Results.Ok(); // TODO: Implement + return Results.Problem(); // TODO: Implement }); httpServer.MapPost("/UpdatePenName", ([FromBody] string penName, HttpContext context) => { - return Results.Ok(); // TODO: Implement + return Results.Problem(); // TODO: Implement }); httpServer.MapPost("/UpdateBiography", ([FromBody] string biography, HttpContext context) => { - return Results.Ok(); // TODO: Implement + return Results.Problem(); // TODO: Implement }); httpServer.MapPost("/UpdateLocation", ([FromBody] string location, HttpContext context) => { - return Results.Ok(); // TODO: Implement + return Results.Problem(); // TODO: Implement }); httpServer.MapPost("/UpdateRole", ([FromBody] string role, HttpContext context) => { - return Results.Ok(); // TODO: Implement + return Results.Problem(); // TODO: Implement }); httpServer.MapPost("/UpdateAvatar", ([FromBody] string avatarUrl, HttpContext context) => { - return Results.Ok(); // TODO: Implement + return Results.Problem(); // TODO: Implement }); httpServer.MapPost("/RatePoem", ([FromBody] UploadableRating ratingUpload, HttpContext context) => { - return Results.Ok(); // TODO: Implement + return Results.Problem(); // TODO: Implement }); // Endpoints that enforce Account/IP rate limiting diff --git a/account.html b/account.html index 49e18a8..138b438 100644 --- a/account.html +++ b/account.html @@ -31,6 +31,45 @@ display: flex; } + .profile-picture { + position: relative; + height: 200px; + width: 200px; + display: flex; + overflow: clip; + border-radius: 4px; + } + + .profile-picture::before { + position: absolute; + content: ""; + width: 100%; + height: 100%; + opacity: 0; + transition: .2s opacity; + background-color: rgba(0, 0, 0, 0.2); + } + + .profile-picture:focus-within > button, + .profile-picture:hover > button, + .profile-picture:focus-within::before, + .profile-picture:hover::before { + opacity: 1; + } + + .profile-picture > button { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: max-content; + text-align: center; + display: flex; + align-items: center; + transition: .2s opacity; + opacity: 0; + } + #profileName { --contentWidth: 198px; display: inline-block; @@ -142,18 +181,9 @@

Enter your email:


Done
-
-
+
- - +
@@ -227,14 +256,9 @@

Following:

Private account info:

This stuff won't appear on your profile, it is for your eyes only!

- - -

@@ -313,18 +337,6 @@

TOS and Regulations:

email = newEmail } - function setProfileNumber(newNumber) { - if (newNumber == null) return - - if (!number) { - accountCCodeInput.value = newNumber.substring(0, 2) - accountNumberInput.value = newNumber.slice(3) - } - - number = newNumber - } - - // This method should produce: //
// diff --git a/account.js b/account.js index 4d45d2d..7cc1823 100644 --- a/account.js +++ b/account.js @@ -109,5 +109,5 @@ async function isLoggedIn() { return response.ok } -console.log("%cYour account's data is held in browser local storage, a thing that can be acessed by putting code in this browser console! If someone tells you to put something here, there is a high chance that you may get hacked!", "background: red; color: yellow; font-size: large") +console.log("%cPrivate account data may be held in browser local storage, a thing that can be acessed by putting code in this browser console! If someone tells you to put something here, there is a high chance that you may get hacked!", "background: red; color: yellow; font-size: large") console.log("%cTL;DR: Never put anything you do not understand here. Uncool things may happen.", "color: blue; font-size: x-large") \ No newline at end of file diff --git a/contents.html b/contents.html index 6ab455e..212a7bb 100644 --- a/contents.html +++ b/contents.html @@ -338,7 +338,7 @@ - +