divide lock & login screen ui and auth module

Author: FreekBes

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "codam-web-greeter",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "LightDM greeter theme for Codam Coding College, compatible with nody-greeter and web-greeter",
   "main": "main.js",
   "scripts": {

package.json

@@ -175,7 +175,8 @@ form input::placeholder {
 }
 
 form input.wiggle {
-	animation: wiggle 0.6s ease-in-out;
+	animation: wiggle 0.6s ease-in-out 0s 1 normal;
+	border-color: var(--color-red) !important;
 }
 
 form button {

public/styles.css

@@ -1,98 +1,52 @@
 import { LightDMMessageType, LightDMPromptType, LightDMUser, lightdm } from 'nody-greeter-types/index';
 
-export interface UILoginElements {
-	loginForm: HTMLFormElement;
-	loginInput: HTMLInputElement;
-	passwordInput: HTMLInputElement;
-	loginButton: HTMLButtonElement;
-}
-
-export interface UILockScreenElements {
-	lockForm: HTMLFormElement;
-	displayName: HTMLHeadingElement;
-	loginName: HTMLHeadingElement;
-	passwordInput: HTMLInputElement;
-	unlockButton: HTMLButtonElement;
+export interface AuthenticatorEvents {
+	/**
+	 * This event gets called when the login process starts without error.
+	 */
+	authenticationStart: () => void;
+
+	/**
+	 * This event gets called when the login process completes without error.
+	 */
+	authenticationComplete: () => void;
+
+	/**
+	 * This event gets called when the login process fails due to an authentication failure (wrong username or password).
+	 */
+	authenticationFailure: () => void;
+
+	/**
+	 * This event gets called when LightDM wants to display an error message or when an error occurs in the Authenticator class.
+	 * @param message The error message.
+	 */
+	errorMessage: (message: string) => void;
+
+	/**
+	 * This event gets called when LightDM wants to display an info message.
+	 * @param message The info message.
+	 */
+	infoMessage: (message: string) => void;
 }
 
 export class Authenticator {
-	private _loginElements: UILoginElements;
-	private _lockScreenElements: UILockScreenElements;
-
 	private _authenticating: boolean = false;
 	private _authenticated: boolean = false;
+
+	private _authEvents: AuthenticatorEvents | null = null;
+
 	private _username: string = "";
 	private _password: string = "";
 	private _session: string = "ubuntu"; // always start with ubuntu.desktop X11 session
 
-	private _isLockScreen: boolean = false;
-	private _activeSession: LightDMUser | undefined;
+	public static readonly MAX_LEN_USERNAME = 32;
+	public static readonly MAX_LEN_PASSWORD = 128;
 
 	public constructor() {
-		this._loginElements = {
-			loginForm: document.getElementById('login-form') as HTMLFormElement,
-			loginInput: document.getElementById('login') as HTMLInputElement,
-			passwordInput: document.getElementById('password') as HTMLInputElement,
-			loginButton: document.getElementById('login-button') as HTMLButtonElement,
-		};
-
-		this._lockScreenElements = {
-			lockForm: document.getElementById('lock-form') as HTMLFormElement,
-			displayName: document.getElementById('active-user-session-display-name') as HTMLHeadingElement,
-			loginName: document.getElementById('active-user-session-login-name') as HTMLHeadingElement,
-			passwordInput: document.getElementById('active-user-session-password') as HTMLInputElement,
-			unlockButton: document.getElementById('unlock-button') as HTMLButtonElement,
-		};
-
-		// Check for any active sessions
-		this._activeSession = lightdm.users.find((user: LightDMUser) => user.logged_in);
-
-		if (this._activeSession !== undefined) {
-			// Active session found, show lock screen form
-			this._isLockScreen = true;
-			this._username = this._activeSession.username;
-			this._initLockScreenForm();
-		}
-		else {
-			// No active session found, show login form
-			this._initLoginForm();
-		}
-
 		// Initialize LightDM event listeners
 		this._initLightDMListeners();
 	}
 
-	private _initLoginForm(): void {
-		// This event gets called when the user clicks the login button or submits the login form in any other way
-		this._loginElements.loginForm.addEventListener('submit', (event: Event) => {
-			event.preventDefault();
-			this._username = this._loginElements.loginInput.value.trim();
-			this._password = this._loginElements.passwordInput.value.trim();
-			this._login();
-		});
-
-		// Display the login form
-		this._loginElements.loginForm.style.display = "block";
-		this._loginElements.loginInput.focus();
-	}
-
-	private _initLockScreenForm(): void {
-		// Populate lock screen data
-		this._lockScreenElements.displayName.innerText = this._activeSession?.display_name ?? this._activeSession?.username ?? "User";
-		this._lockScreenElements.loginName.innerText = this._activeSession?.username ?? "user";
-
-		// This event gets called when the user clicks the unlock button or submits the lock screen form in any other way
-		this._lockScreenElements.lockForm.addEventListener('submit', (event: Event) => {
-			event.preventDefault();
-			this._password = this._lockScreenElements.passwordInput.value.trim();
-			this._login();
-		});
-
-		// Display the lock screen form
-		this._lockScreenElements.lockForm.style.display = "block";
-		this._lockScreenElements.passwordInput.focus();
-	}
-
 	private _initLightDMListeners(): void {
 		// This event gets called when LightDM asks for more authentication data
 		lightdm.show_prompt.connect((message: string, type: LightDMPromptType) => {
@@ -122,9 +76,15 @@ export class Authenticator {
 				switch (type) {
 					case LightDMMessageType.Info:
 						console.log(`LightDM info message: ${message}`);
+						if (this._authEvents) {
+							this._authEvents.infoMessage(message);
+						}
 						break;
 					case LightDMMessageType.Error:
 						console.error(`LightDM error message: ${message}`);
+						if (this._authEvents) {
+							this._authEvents.errorMessage(message);
+						}
 						break;
 					default:
 						console.warn(`Unknown lightDM message type: ${type}, message: ${message}`);
@@ -144,96 +104,77 @@ export class Authenticator {
 				if (lightdm.is_authenticated) {
 					this._authenticated = true;
 					console.log("LightDM authentication successful! Starting session...");
+					if (this._authEvents) {
+						this._authEvents.authenticationComplete();
+					}
 					lightdm.start_session(this._session ?? null);
 				}
 				else {
 					console.log("LightDM authentication failed. User not found or password incorrect.");
 					this._stopAuthentication();
-					this._wigglePasswordInput();
+					if (this._authEvents) {
+						this._authEvents.authenticationFailure();
+					}
 				}
 			}
 			catch (err) {
 				console.error(err);
+				if (this._authEvents) {
+					this._authEvents.errorMessage(String(err));
+				}
 			}
 		});
 	}
 
-	private _clearAuth(): void {
-		if (!this._isLockScreen) {
-			this._username = "";
-		}
-		this._password = "";
+	/**
+	 * Check if the authentication process has started.
+	 * @returns True if the authentication process has started, false otherwise.
+	 */
+	public get authenticating(): boolean {
+		return this._authenticating;
 	}
 
-	private _disableForm(): void {
-		const uiElementsObject = this._isLockScreen ? this._lockScreenElements : this._loginElements;
-		for (const element of Object.values(uiElementsObject)) {
-			if ("disabled" in element && typeof element.disabled === "boolean") { // check if element has disabled property and disable every element that has it
-				element.disabled = true;
-			}
-		}
-
-		// Unfocus the focused element
-		if (document.activeElement) {
-			(document.activeElement as HTMLElement).blur();
-		}
+	/**
+	 * Check if the authentication process has completed.
+	 * @returns True if the authentication process has completed, false otherwise.
+	 */
+	public get authenticated(): boolean {
+		return this._authenticated;
 	}
 
-	private _enableForm(focusElement: HTMLInputElement | null = null): void {
-		const uiElementsObject = this._isLockScreen ? this._lockScreenElements : this._loginElements;
-		for (const element of Object.values(uiElementsObject)) {
-			if ("disabled" in element && typeof element.disabled === "boolean") { // check if element has disabled property and enable every element that has it
-				element.disabled = false;
-			}
-		}
-
-		if (!focusElement) {
-			focusElement = this._getInputToFocusOn();
-		}
-		focusElement.focus();
+	/**
+	 * Get the username that is currently being authenticated.
+	 * @returns The username that is currently being authenticated.
+	 */
+	public get username(): string {
+		return this._username;
 	}
 
-	private _wigglePasswordInput(clearInput: boolean = true): void {
-		const passwordInput = this._isLockScreen ? this._lockScreenElements.passwordInput : this._loginElements.passwordInput;
-		passwordInput.classList.add('wiggle');
-		setTimeout(() => {
-			passwordInput.classList.remove('wiggle');
-		}, 800); // overdo the animation a bit to make sure it's finished before we remove the class
-
-		if (clearInput) {
-			passwordInput.value = "";
-			passwordInput.focus();
-		}
+	/**
+	 * Configure the callback functions that are called on certain events.
+	 * @param authEvents The callback functions that are called on certain events.
+	 * @returns void
+	 */
+	public set authEvents(authEvents: AuthenticatorEvents) {
+		this._authEvents = authEvents;
 	}
 
-	private _getInputToFocusOn(): HTMLInputElement {
-		if (this._isLockScreen) {
-			return this._lockScreenElements.passwordInput;
-		}
-		else {
-			if (this._loginElements.loginInput.value.trim() === "") {
-				return this._loginElements.loginInput;
-			}
-			return this._loginElements.passwordInput;
-		}
+	private _clearAuth(): void {
+		this._username = "";
+		this._password = "";
 	}
 
 	private _stopAuthentication(): void {
 		lightdm.cancel_authentication();
 		this._authenticating = false;
 		this._authenticated = false;
 		this._clearAuth();
-		this._enableForm();
 	}
 
 	private _startAuthentication(): void {
 		try {
 			console.log("Starting LightDM authentication...");
 			lightdm.cancel_authentication();
-			if (this._username === "" || this._password === "") {
-				console.log("Username or password is empty. Stopping authentication.");
-				return this._stopAuthentication();
-			}
 			this._authenticating = true;
 			lightdm.authenticate(this._username); // provide username to skip the username prompt
 		}
@@ -242,12 +183,29 @@ export class Authenticator {
 		}
 	}
 
-	private _login(): void {
+	/**
+	 * Start the login process. The authenticationStart auth event will be called when the login process starts without error.
+	 * @param username The username to log in with.
+	 * @param password The password to log in with.
+	 * @returns void
+	 */
+	public login(username: string, password: string): void {
+		this._username = username.substring(0, Authenticator.MAX_LEN_USERNAME).trim();
+		this._password = password.substring(0, Authenticator.MAX_LEN_PASSWORD); // do not trim password as it could contain spaces at the beginning or end
+
 		if (this._authenticating || this._authenticated) {
+			console.warn("Login() was called while already authenticating or authenticated. Stopping authentication.");
 			return;
 		}
 
-		this._disableForm();
+		if (this._username === "" || this._password === "") {
+			console.log("Login() was called while username or password is empty. Stopping authentication.");
+			return;
+		}
+
+		if (this._authEvents) {
+			this._authEvents.authenticationStart();
+		}
 		this._startAuthentication();
 	}
 }

scripts/auth.ts

@@ -1,13 +1,13 @@
 // Import local classes
 import { Data } from './data';
-import { UI } from './ui';
+import { UI } from './ui/ui';
 import { Authenticator } from './auth';
 
 declare global {
 	interface Window {
 		data: Data;
-		ui: UI;
 		auth: Authenticator;
+		ui: UI;
 
 		sleep(ms: number): Promise<void>;
 	}
@@ -24,8 +24,8 @@ window.sleep = sleep;
 async function initGreeter(): Promise<void> {
 	// Initialize local classes
 	window.data = new Data();
-	window.ui = new UI();
 	window.auth = new Authenticator();
+	window.ui = new UI(window.auth);
 }
 
 window.addEventListener("GreeterReady", () => {

scripts/main.ts

@@ -6,7 +6,7 @@ export interface UIInfoElements {
 	debug: HTMLSpanElement;
 }
 
-export class UI {
+export class InfoBarsUI {
 	private _infoElements: UIInfoElements;
 
 	public constructor() {
@@ -25,11 +25,11 @@ export class UI {
 		// Populate debug info
 		this._infoElements.debug.innerText = '';
 		window.addEventListener('error', (event: ErrorEvent) => {
-			window.ui._infoElements.debug.innerText += event.error + '\n';
+			this._infoElements.debug.innerText += event.error + '\n';
 		});
 
 		// Populate version info
-		this._infoElements.version.innerText = window.data.pkgName + " " + window.data.pkgVersion;
+		this._infoElements.version.innerText = window.data.pkgName + " v" + window.data.pkgVersion;
 
 		// Populate hostname info
 		this._infoElements.hostname.innerText = window.data.hostname;