[Massive] Server account clients, avatar endpoints, auth token fixes,…

… config versions, Client WIP account account options, poem editor components, poem and request fixes
Zekiah-A · Oct 12, 2024 · 188ba1c · 188ba1c
1 parent d6e8266
commit 188ba1c
Show file tree

Hide file tree

Showing 59 changed files with 3,005 additions and 2,522 deletions.
diff --git a/Other/account-options-template.js b/Other/account-options-template.js
@@ -0,0 +1,84 @@
+"use strict";
+class AccountOptions extends HTMLElement {
+	constructor() {
+		super()
+		this.attachShadow({ mode: "open" })
+	}
+
+	connectedCallback() {
+		this.shadowRoot.innerHTML = html`
+			<link rel="stylesheet" href="styles.css">
+			<input id="loginButton" type="button" class="login-button" value="Login to Subliminal">
+			<div id="accountOptions" class="account-options" style="display: none;">
+				<a href="account" class="account-link">
+					<span id="accountName">Me</span>
+					<img id="accountImage" class="account-image" src="https://user-images.githubusercontent.com/11250/39013954-f5091c3a-43e6-11e8-9cac-37cf8e8c8e4e.jpg">
+				</a>
+				<input id="logoutButton" type="button" value="Logout" onclick="this.shadowThis.trySignout()">
+			</div>`
+		const style = document.createElement("style")
+		style.innerHTML = css`
+			.account-options {
+				display: flex;
+			}
+
+			.login-button {
+				height: 100%;
+			}
+			
+			.account-image {
+				height: 48px;
+				aspect-ratio: 1/1;
+				object-fit: cover;
+				border-radius: 4px;
+			}
+			
+			.account-link {
+				display: flex;
+				height: 100%;
+				justify-content: center;
+				width: 100px;
+				column-gap: 8px;
+				align-items: center;
+			}`
+		this.shadowRoot.appendChild(style)
+		defineAndInject(this, this.shadowRoot)
+
+		this.loginButton.addEventListener("click", () => {
+			let loginSignup = document.querySelector("login-signup");
+			if (loginSignup) {
+				loginSignup.remove()
+			}
+			loginSignup = createFromData("login-signup");
+			document.body.appendChild(loginSignup)
+			loginSignup.addEventListener("finished", (d, e) => {
+				this.loginCallback()
+			})
+			loginSignup.open()
+		})
+
+		isLoggedIn().then((loggedIn) => {
+			if (loggedIn) {
+				this.loginCallback()
+			}
+		})
+	}
+
+	trySignout() {
+		if (typeof signout === "undefined") {
+			signout()
+		}
+	}
+
+	async loginCallback() {
+		this.loginButton.style.display = "none"
+		this.accountOptions.style.display = "flex"
+
+		const accountData = await getAccountData()
+		if (accountData) {
+
+		}
+	}
+}
+
+customElements.define("account-options", AccountOptions)
diff --git a/Other/component-registrar.js b/Other/component-registrar.js
@@ -1,3 +1,4 @@
+"use strict";
 /**
  * Will instance the given element, returning it so that it can be inserted into the DOM.
  * @param {HTMLElement} name Element to be instanced
@@ -8,7 +9,9 @@ function createFromData(name, data = null) {
 	let element = document.createElement(name)
 	if (data) {
 		for (const [key, value] of Object.entries(data)) {
-			element.setAttribute(key, value.toString())
+			if (value !== undefined) {
+				element.setAttribute("data-" + key, value.toString())
+			}
 		}
 	}
 	// TODO: This causes issues with some nodes wanting to be IN the dom before methods can be used on them

diff --git a/Other/content-warning-template.js b/Other/content-warning-template.js
@@ -1,3 +1,5 @@
+"use strict";
+
 class ContentWarning extends HTMLElement {
 	constructor() {
 		super()

diff --git a/Other/header-template.js b/Other/header-template.js
@@ -1,3 +1,4 @@
+"use strict";
 class SubliminalHeader extends HTMLElement {
 	constructor() {
 		super()
@@ -8,7 +9,9 @@ class SubliminalHeader extends HTMLElement {
 		this.shadowRoot.innerHTML = html`
 			<link rel="stylesheet" href="styles.css">
 			<div>
-				<img src="Resources/AbbstrakDog.png" alt="Dog" width="48" height="48" onclick="window.location.href = window.location.origin">
+				<a href="/" class="logo-button">
+					<img src="Resources/AbbstraktDog.png" loading="eager" class="logo" alt="Subliminal dog logo" width="48" height="48">
+				</a>
 				<h1 style="margin: 0px; align-self: center;">Subliminal</h1>
 				<nav id="pageLinks">
 					<a href="contents">-&gt; Poems</a>
@@ -17,16 +20,7 @@ class SubliminalHeader extends HTMLElement {
 				</nav>
 				<div class="hilight" id="hilight"></div>
 				<div id="right">
-					<input id="loginButton" type="button" value="Login to Subliminal"
-						onclick="
-							let loginSignup = document.querySelector('login-signup');
-							if (loginSignup) { loginSignup.remove() }
-							loginSignup = createFromData('login-signup');
-							this.parentDocument.body.appendChild(loginSignup)
-							loginSignup.open()
-						">
-					<input id="logoutButton" type="button" value="Logout"
-						onclick="window.location.reload(true)" style="display: none;"> <!-- TODO: This -->
+					<account-options id="accountOptions"></account-options>
 				</div>
 			</div>
 			<hr style="margin: 0px; margin-left: 8px; margin-right: 8px;">`
@@ -64,40 +58,44 @@ class SubliminalHeader extends HTMLElement {
 				line-height: 64px;
 				white-space: nowrap;
 			}
-			
-			a {
+
+			nav > a {
 				align-self: center;
 				white-space: nowrap;
 				/*Click hitboxes*/
 				padding-top: 24px;
 				padding-bottom: 24px;
 			}
 
+			nav > a[current] {
+				background-color: #0074d90d;
+				border-bottom: 4px solid var(--input-hilight);
+			}
+
 			span, div {
 				font-family: Arial, Helvetica, sans-serif;
 			}
 
 			p, a {
 				font-family: Arial, Helvetica, sans-serif;
 				font-size: 110%;
-			}            
+			}
 			
-			a[current] {
-				background-color: #0074d90d;
-				border-bottom: 4px solid var(--input-hilight);
+			.logo-button {
+				display: flex;
+				cursor: pointer;
 			}
 			
-			img {
+			.logo {
 				align-self: center;
-				cursor: pointer;
 				transition: .2s transform;
 			}
-			
-			img:hover {
+
+			.logo:hover {
 				transform: rotate(10deg) scale(1.5);
 			}
-			
-			img:active {
+
+			.logo:active {
 				transform: rotate(8deg) scale(1.1);
 			}
 			
@@ -113,7 +111,7 @@ class SubliminalHeader extends HTMLElement {
 				column-gap: 8px;
 				padding: 8px;
 			}
-
+			
 			hr {
 				border: none;
 				border-top: 1px solid gray;
@@ -129,12 +127,12 @@ class SubliminalHeader extends HTMLElement {
 					display: none;
 				}
 			
-				img {
+				.logo {
 					width: 48px;
 					height: 48px;
 				}
 			
-				a {
+				nav > a {
 					font-size: 3.4vw;
 					flex: 1 1 auto;
 					white-space: nowrap;
@@ -163,7 +161,7 @@ class SubliminalHeader extends HTMLElement {
 			}
 
 			@media(prefers-color-scheme: dark) {
-				img {
+				.logo {
 					filter: invert(1);
 				}
 
@@ -181,19 +179,12 @@ class SubliminalHeader extends HTMLElement {
 			}
 		}
 
-		;(async function(_this){
-			if (_this.getAttribute("nologin") || typeof isLoggedIn === "undefined" || typeof isLoggedIn !== "function") {
-				// TODO: Potentially change right to just display 'The coolest crowdsourced anthology on the web' (delete buttons)
-				_this.right.style.display = 'none'
-				console.warn("WARNING: Page has not imported account.js or is requesting nologin. Login UI disabled")
-				return
-			}
-
-			if (await isLoggedIn()) {
-				_this.loginButton.style.display = "none"
-				_this.logoutButton.style.display = "block"
-			}
-		})(this)
+		if (this.getAttribute("nologin") || typeof isLoggedIn === "undefined" || typeof isLoggedIn !== "function") {
+			// TODO: Potentially change right to just display 'The coolest crowdsourced anthology on the web' (delete buttons)
+			this.right.style.display = 'none'
+			console.warn("WARNING: Page has not imported account.js or is requesting nologin. Login UI disabled")
+			return
+		}
 	}
 }
 

diff --git a/Other/login-template.js b/Other/login-template.js
@@ -1,3 +1,4 @@
+"use strict";
 class LoginSignup extends HTMLElement {
 	#nocancel = false
 
@@ -203,33 +204,30 @@ class LoginSignup extends HTMLElement {
 		}
 	}
 
-	//Impossible to log in without code, GUID can be retrieved though
 	async signin(username, email) {
+		let signinData = null
 		try {
 			const signinResponse = await fetch(serverBaseAddress + "/auth/signin", {
 				method: "POST",
 				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({ Username: username, Email: email })
+				body: JSON.stringify({ username, email })
 			})
 
 			if (!signinResponse.ok) {
 				this.confirmFail("Signin response was denied.")
 				return
 			}
 
-			const signinData = await signinResponse.json()
-
-			localStorage.accountUsername = username
-			localStorage.accountEmail = email
-			//localStorage.accountGuid = signinData.guid
-
-			showMyAccount()
+			signinData = await signinResponse.json()
+			//sessionStorage.accountId = signinData.id
+			//sessionStorage.accountToken = signinData.token
+			this.login.close()
 		}
 		catch (error) {
 			this.confirmFail(error)
 		}
 
-		const finishEvent = new CustomEvent("finished", { type: "signin" })
+		const finishEvent = new CustomEvent("finished", { type: "signin", data: signinData })
 		this.dispatchEvent(finishEvent)
 	}
 

diff --git a/Other/notification-template.js b/Other/notification-template.js
@@ -1,3 +1,4 @@
+"use strict";
 class SubliminalNotification extends HTMLElement {
 	constructor() {
 		super()