add better styling to form inputs and buttons

Author: FreekBes

public/index.html

@@ -23,15 +23,15 @@
 			<form action="POST" id="login-form" spellcheck="false" autocomplete="off" autocapitalize="off" style="display: none;">
 				<input type="text" name="login" id="login" placeholder="Enter your login" maxlength="32" />
 				<input type="password" name="password" id="password" placeholder="Enter your password" maxlength="128" />
-				<button type="submit" id="login-button">Login</button>
+				<button type="submit" id="login-button" disabled>Login</button>
 			</form>
 
 			<!-- Lock screen form (used when one or more sessions are active) -->
 			<form action="POST" id="lock-form" spellcheck="false" autocomplete="off" autocapitalize="off" style="display: none;">
 				<h3 id="active-user-session-display-name">John Doe</h3>
 				<h4 id="active-user-session-login-name">jdoe</h4>
 				<input type="password" name="active-user-session-password" id="active-user-session-password" placeholder="Enter your password" maxlength="128" />
-				<button type="submit" id="unlock-button">Unlock</button>
+				<button type="submit" id="unlock-button" disabled>Unlock</button>
 			</form>
 		</main>
 

public/styles.css

@@ -163,13 +163,20 @@ form input {
 	text-align: left;
 	text-shadow: var(--text-shadow);
 	user-select: text !important;
+	cursor: text;
 }
 
 form input:focus {
 	outline: none;
 	border-color: var(--color-primary);
 }
 
+form input:disabled {
+	cursor: not-allowed;
+	color: var(--color-text-tertiary);
+	cursor: default;
+}
+
 form input::placeholder {
 	color: var(--color-text-tertiary);
 }
@@ -188,14 +195,21 @@ form button {
 	border-radius: var(--border-radius);
 	background: var(--color-primary);
 	padding: var(--padding) calc(var(--padding) * 2);
+	color: var(--color-text-primary);
+	cursor: pointer;
 }
 
-form button:hover,
-form button:focus {
+form button:not(:disabled):hover,
+form button:not(:disabled):focus {
 	cursor: pointer;
 	outline: none;
 }
 
+form button:disabled {
+	cursor: default;
+	color: rgba(16, 16, 16, 0.3);
+}
+
 form button::after,
 form button::after {
 	content: '';
@@ -207,20 +221,20 @@ form button::after {
 	position: absolute;
 	top: -1px;
 	left: -1px;
+	pointer-events: none;
 }
 
-form button:hover::after,
-form button:focus::after {
-	pointer-events: none;
+form button:not(:disabled):hover::after,
+form button:not(:disabled):focus::after {
 	background-color: var(--bg-color-lighten);
 }
 
-form button:active {
+form button:not(:disabled):active {
 	border-style: inset;
 }
 
-form button:active::after {
-	pointer-events: none;
+form button:active::after,
+form button:disabled::after {
 	background-color: var(--bg-color-darken);
 }
 

scripts/ui/lockscreen.ts

@@ -51,6 +51,11 @@ export class LockScreenUI extends UIScreen {
 			this._auth.login(this._activeSession.username, form.passwordInput.value);
 		});
 
+		// Only enable the login button when both the login and password fields are filled in
+		form.passwordInput.addEventListener('input', () => {
+			form.unlockButton.disabled = form.passwordInput.value === "";
+		});
+
 		// Display the lock screen form
 		form.lockForm.style.display = "block";
 		form.passwordInput.focus();

scripts/ui/loginscreen.ts

@@ -43,6 +43,14 @@ export class LoginScreenUI extends UIScreen {
 			this._auth.login(form.loginInput.value, form.passwordInput.value);
 		});
 
+		// Only enable the login button when both the login and password fields are filled in
+		form.loginInput.addEventListener('input', () => {
+			form.loginButton.disabled = form.loginInput.value.trim() === "" || form.passwordInput.value === "";
+		});
+		form.passwordInput.addEventListener('input', () => {
+			form.loginButton.disabled = form.loginInput.value.trim() === "" || form.passwordInput.value === "";
+		});
+
 		// Display the login form
 		form.loginForm.style.display = "block";
 		form.loginInput.focus();