fix broken derived classes

Author: FreekBes

scripts/auth.ts

@@ -1,4 +1,4 @@
-import { LightDMMessageType, LightDMPromptType, LightDMUser, lightdm } from 'nody-greeter-types/index';
+import { LightDMMessageType, LightDMPromptType, lightdm } from 'nody-greeter-types/index';
 
 export interface AuthenticatorEvents {
 	/**

scripts/ui/lockscreen.ts

@@ -1,20 +1,30 @@
 import { Authenticator } from "../auth";
 import { LightDMUser } from "nody-greeter-types";
-import { Screen } from "./screen";
+import { UIScreen, UILockScreenElements } from "./screen";
 
-export interface UILockScreenElements {
-	lockForm: HTMLFormElement;
-	displayName: HTMLHeadingElement;
-	loginName: HTMLHeadingElement;
-	passwordInput: HTMLInputElement;
-	unlockButton: HTMLButtonElement;
-}
-
-export class LockScreenUI extends Screen {
+export class LockScreenUI extends UIScreen {
+	public readonly _form: UILockScreenElements;
 	private readonly _activeSession: LightDMUser;
 
 	public constructor(auth: Authenticator, activeSession: LightDMUser) {
-		super();
+		super(auth, {
+			authenticationStart: () => {
+				this._disableForm();
+			},
+			authenticationComplete: () => {
+				// TODO: Add a loading animation here
+			},
+			authenticationFailure: () => {
+				this._enableForm();
+				this._wigglePasswordInput();
+			},
+			errorMessage: (message: string) => {
+				alert(message);
+			},
+			infoMessage: (message: string) => {
+				alert(message);
+			},
+		});
 
 		this._activeSession = activeSession;
 		this._auth = auth;
@@ -26,10 +36,10 @@ export class LockScreenUI extends Screen {
 			unlockButton: document.getElementById('unlock-button') as HTMLButtonElement,
 		} as UILockScreenElements;
 
-		this._initLockScreenForm();
+		this._initForm();
 	}
 
-	private _initLockScreenForm(): void {
+	protected _initForm(): void {
 		const form = this._form as UILockScreenElements;
 
 		// Populate lock screen data

scripts/ui/loginscreen.ts

@@ -1,16 +1,28 @@
 import { Authenticator } from "../auth";
-import { Screen } from "./screen";
+import { UILoginElements, UIScreen } from "./screen";
 
-export interface UILoginElements {
-	loginForm: HTMLFormElement;
-	loginInput: HTMLInputElement;
-	passwordInput: HTMLInputElement;
-	loginButton: HTMLButtonElement;
-}
+export class LoginScreenUI extends UIScreen {
+	public readonly _form: UILoginElements;
 
-export class LoginScreenUI extends Screen {
 	public constructor(auth: Authenticator) {
-		super();
+		super(auth, {
+			authenticationStart: () => {
+				this._disableForm();
+			},
+			authenticationComplete: () => {
+				// TODO: Add a loading animation here
+			},
+			authenticationFailure: () => {
+				this._enableForm();
+				this._wigglePasswordInput();
+			},
+			errorMessage: (message: string) => {
+				alert(message);
+			},
+			infoMessage: (message: string) => {
+				alert(message);
+			},
+		});
 
 		this._auth = auth;
 		this._form = {
@@ -20,10 +32,10 @@ export class LoginScreenUI extends Screen {
 			loginButton: document.getElementById('login-button') as HTMLButtonElement,
 		} as UILoginElements;
 
-		this._initLoginForm();
+		this._initForm();
 	}
 
-	private _initLoginForm(): void {
+	protected _initForm(): void {
 		const form = this._form as UILoginElements;
 
 		// This event gets called when the user clicks the login button or submits the login form in any other way
@@ -83,23 +95,4 @@ export class LoginScreenUI extends Screen {
 		}
 		return form.passwordInput;
 	}
-
-	protected _events = {
-		authenticationStart: () => {
-			this._disableForm();
-		},
-		authenticationComplete: () => {
-			// TODO: Add a loading animation here
-		},
-		authenticationFailure: () => {
-			this._enableForm();
-			this._wigglePasswordInput();
-		},
-		errorMessage: (message: string) => {
-			alert(message);
-		},
-		infoMessage: (message: string) => {
-			alert(message);
-		},
-	}
 }

scripts/ui/screen.ts

@@ -1,17 +1,33 @@
 import { Authenticator, AuthenticatorEvents } from "../auth";
-import { UILockScreenElements } from "./lockscreen";
-import { UILoginElements } from "./loginscreen";
 
-export declare class Screen {
+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 abstract class UIScreen {
 	protected _auth: Authenticator;
-	protected _form: UILockScreenElements | UILoginElements;
+	abstract _form: UILockScreenElements | UILoginElements;
 	protected _events: AuthenticatorEvents;
 
-	public constructor();
+	public constructor(auth: Authenticator, events: AuthenticatorEvents) {
+		this._auth = auth;
+		this._events = events;
+	};
 
-	protected _initForm(): void;
-	protected _disableForm(): void;
-	protected _enableForm(): void;
-	protected _wigglePasswordInput(): void;
-	protected _getInputToFocusOn(): HTMLInputElement;
+	protected abstract _initForm(): void;
+	protected abstract _disableForm(): void;
+	protected abstract _enableForm(): void;
+	protected abstract _wigglePasswordInput(): void;
+	protected abstract _getInputToFocusOn(): HTMLInputElement;
 }