Update account labeling, account change email / profile picture uploa…

…d, accessibility and tab fixes + contents accesibility

Other/header-template.js

@@ -19,7 +19,7 @@ class SubliminalHeader extends HTMLElement {
                             let loginSignup = createOrUpdateFromData('login-signup');
                             if (loginSignup) this.parentDocument.body.appendChild(loginSignup)">
                     <input id="logoutButton" type="button" value="Logout"
-                        onclick="window.location.reload(true)"> <!-- TODO: This -->
+                        onclick="window.location.reload(true)" style="display: none;"> <!-- TODO: This -->
                 </div>
             </div>
             <hr style="margin: 0px; margin-left: 8px; margin-right: 8px;">`
@@ -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)
     }
 }

Other/login-template.js

@@ -31,7 +31,7 @@ class LoginSignup extends HTMLElement {
                     <div style="display:flex;column-gap:8px;margin-top:8px">
                         <div class="popup-button" onclick="this.shadowThis.login.setAttribute('currentpage', 'signup');">I don't have an account
                         </div>
-                        <div class="popup-button" onclick="this.shadowThis.loginQRInput.click()">Scan QR</div>
+                        <div class="popup-button" disabled>Account recovery</div>
                     </div>
                 </div>
                 <div id="loginSignup" class="page">

Other/select-template.js

@@ -8,7 +8,7 @@ class SubliminalSelect extends HTMLElement {
         this.shadowRoot.innerHTML = html`
             <span id="selected" class="selected"></span>
             <span id="arrow" class="arrow">⯆</span>
-            <div id="options" class="options" style="display: none;"></div>`
+            <div id="options" class="options" tabIndex="1" style="display: none;"></div>`
         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"

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

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 @@ <h2>Enter your email:</h2>
 		<br>
 		<div class="popup-button" onclick="accountEmail.style.display = 'none'; executeAccountAction(actionType.UpdateEmail, email)">Done</div>
 	</div>
-	<div id="accountNumber" style="height: fit-content; width: 30%; display: none;" class="popup">
-		<h2>Enter your phone number:</h2>
-		<div style="display: flex; column-gap: 4px">
-			<input id="accountCCodeInput" type="text" class="popup-input" style="width: 64px; display: inline;" placeholder="+44" value="+" maxlength="4" oninput="if (value.length < 1) value = '+';">
-			<input id="accountNumberInput" type="text" class="popup-input" style="flex-grow: 1; display: inline;" placeholder="0123456789">
-		</div>
-		<br>
-		<div class="popup-button" onclick="accountNumber.style.display = 'none'; setProfileNumber(accountCCodeInput.value + accountNumberInput.value); executeAccountAction(actionType.UpdateNumber, number)">Done</div>
-	</div>
 	<div class="div-centre">
 		<div class="profile-container">
-		<div>
+		<div class="profile-picture">
 			<img id="profileAvatar" src="https://user-images.githubusercontent.com/11250/39013954-f5091c3a-43e6-11e8-9cac-37cf8e8c8e4e.jpg" width="200" height="200"
 				ondragenter="
 					event.stopPropagation()
@@ -171,18 +201,17 @@ <h2>Enter your phone number:</h2>
 					if (file && file.type.startsWith('image/')) updateProfilePicture(file)
 				" ondragleave="
 					event.stopPropagation()
-					event.preventDefault()
+					event.preventDefault() 
 					this.style.outline = 'initial'
 				">
-				<button type="button" id="profilePictureButton">
+				<button type="button" id="profilePictureButton" onclick="profilePictureInput.click()">
 					<img src="./Resources/EditPhoto.svg" alt="Edit">
 					Click to change
 				</button>
-			<input type="file" id="profilePictureInput" accept="image/*" onchange="
-			if (this.files[0]) {
-				updateProfilePicture(this.files[0])
-			}
-		" style="display: none;">
+				<input type="file" id="profilePictureInput" accept="image/*" style="display: none;" onchange="
+					if (this.files[0]) {
+						updateProfilePicture(this.files[0])
+					}">
 		</div>
 			<div class="profile-aside">
 				<div class="profile-title-container">
@@ -227,14 +256,9 @@ <h2>Following:</h2>
 		<h2>Private account info:</h2>
 		<hr>
 		<p>This stuff won't appear on your profile, it is for your eyes only!</p>
-		<button style="padding: 8px;margin: 4px;position: relative;" onclick="accountEmail.style.display = 'block';">
-			Edit Email
-			<div class="button-tooltip">Allow us to notify you when a new poem is uploaded, your poem recieves some feedback, or just spam your inbox with random stuff</div>
-		</button>
-
-		<button style="padding: 8px;margin: 4px;position: relative;" onclick="accountNumber.style.display = 'block';">
-			Edit Phone Number
-			<div class="button-tooltip">Use 2FA with your account, and allow us to send you messages about account activity, or just send random sms funnnies</div>
+		<button style="padding: 8px; margin: 4px; position: relative;" onclick="accountEmail.style.display = 'block';">
+			Change Email
+			<div class="button-tooltip">Change the primary email used for login, and allow us to notify you when a new poem is uploaded, your poem recieves some feedback, or other important updates</div>
 		</button>
 
 		<br><br>
@@ -313,18 +337,6 @@ <h3>TOS and Regulations:</h3>
 		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:
 	// <div class="following-card">
 	//		<img src="https://user-images.githubusercontent.com/11250/39013954-f5091c3a-43e6-11e8-9cac-37cf8e8c8e4e.jpg">

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")