font consistency fixes

app/routes/account.go

@@ -12,8 +12,8 @@ import (
 )
 
 type Account struct {
-	Username string
+	paas.User
-	Pools    map[string]paas.Pool
+	Pools map[string]paas.Pool
 }
 
 // numerical constraint
@@ -98,6 +98,13 @@ var Green = color.RGB{
 func HandleGETAccount(c *gin.Context) {
 	auth, err := common.GetAuth(c)
 	if err == nil {
+
+		account, err := GetUser(auth)
+		if err != nil {
+			common.HandleNonFatalError(c, err)
+			return
+		}
+
 		pools, err := GetUserPools(auth)
 		if err != nil {
 			common.HandleNonFatalError(c, err)
@@ -167,19 +174,33 @@ func HandleGETAccount(c *gin.Context) {
 			}
 		}
 
+		account.Pools = pools
+
 		c.HTML(http.StatusOK, "html/account.html", gin.H{
-			"global": common.Global,
+			"global":  common.Global,
-			"page":   "account",
+			"page":    "account",
-			"account": map[string]any{
+			"account": account,
-				"Username": auth.Username,
-				"Pools":    pools,
-			},
 		})
 	} else {
 		c.Redirect(http.StatusFound, "/login") // if user is not authed, redirect user to login page
 	}
 }
 
+func GetUser(auth common.Auth) (Account, error) {
+	account := Account{}
+	ctx := common.GetRequestContextFromCookies(auth)
+	body := map[string]any{}
+	res, code, err := common.RequestGetAPI(fmt.Sprintf("/access/users/%s", auth.Username), ctx, &body)
+	if err != nil {
+		return account, err
+	}
+	if code != 200 {
+		return account, fmt.Errorf("request to /access/pools resulted in %+v", res)
+	}
+	err = mapstructure.Decode(body, &account)
+	return account, err
+}
+
 func GetUserPools(auth common.Auth) (map[string]paas.Pool, error) {
 	pools := map[string]paas.Pool{}
 

web/css/form.css

@@ -41,6 +41,7 @@ legend {
 
 fieldset {
 	border: 0;
+	padding: 0;
 }
 
 fieldset > *:last-child {

web/css/nav.css

@@ -53,7 +53,6 @@ header {
 }
 
 header h1 {
-	font-size: 18px;
 	margin: 0;
 	background-color: var(--nav-header-bg-color);
 	color: var(--nav-header-text-color);
@@ -61,8 +60,8 @@ header h1 {
 }
 
 nav {
+	font-size: var(--small-font-size);
 	overflow: hidden;
-	font-size: larger;
 	width: fit-content;
 }
 

web/css/style.css

@@ -3,6 +3,9 @@
 	--positive-color: #0f0;
 	--highlight-color: yellow;
 	--lightbg-text-color: black;
+	--large-font-size: 32px;
+	--medium-font-size: 24px;
+	--small-font-size: 16px;
 }
 
 @media screen and (prefers-color-scheme: dark) {
@@ -41,9 +44,22 @@
 	}
 }
 
-* {
+*, h1, h2, h3, p {
 	box-sizing: border-box;
 	font-family: monospace;
+	
+}
+
+h1, p {
+	font-size: var(--small-font-size);
+}
+
+h2 {
+	font-size: var(--large-font-size);
+}
+
+h3 {
+	font-size: var(--medium-font-size);
 }
 
 html {

web/html/account.html

@@ -39,13 +39,9 @@
 			<h2>Account</h2>
 			<section class="w3-card w3-padding">
 				<h3>Account Details</h3>
-				<p id="username">Username: {{.account.Username}}</p>
+				<p id="username">Username: {{.account.Username.UserID}}@{{.account.Username.Realm}}</p>
-			</section>
+				<p id="email">Email: {{.account.Mail}}</p>
-			<section class="w3-card w3-padding">
+				<p>Password: <button class="w3-button" id="change-password" type="button" style="padding: 0em; height: 1.5em; line-height: 1.5em;">Change Password</button></p>
-				<div class="flex row nowrap">
-					<h3>Password</h3>
-					<button class="w3-button w3-margin" id="change-password" type="button">Change Password</button>
-				</div>
 			</section>
 			{{range $poolname, $pool := .account.Pools}}
 				{{template "pool-resources" $pool}}

web/html/index.html

@@ -72,7 +72,7 @@
 				<div class="w3-card w3-padding">
 					<div class="flex row nowrap" style="margin-top: 1em; justify-content: space-between;">
 						<form id="vm-search" role="search" class="flex row nowrap" tabindex="0">
-							<img alt="Search Instances" aria-label="Search Instances" src="images/common/search.svg#symb">
+							<button type="submit"><img alt="Search Instances" aria-label="Search Instances" src="images/common/search.svg#symb"></button>
 							<input type="search" id="search" class="w3-input w3-border" style="height: 1lh; max-width: fit-content;" aria-label="search instances by name">
 						</form>
 						<!--Add Instance Button & Dialog Template-->

web/scripts/clientsync.js

@@ -3,7 +3,7 @@ import { getSyncSettings, requestAPI } from "./utils.js";
 export async function setupClientSync (callback) {
 	const { scheme, rate } = getSyncSettings();
 	if (scheme === "never") {
-		return
+		return;
 	}
 	else if (scheme === "always") {
 		window.setInterval(callback, rate * 1000);