CellTech/lms-frontend
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: new theme,layout tweaks etc.

Browse Source
This commit is contained in:
Rekcel Endencia
2025-04-08 02:10:06 +08:00
parent 35378d17d0
commit 58f7f09fbd
6 changed files with 91 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/widgets/LoginWidget.ts
View File

@@ -11,52 +11,40 @@ export class LoginWidget extends Widget {
render(): HTMLElement {
this.container.innerHTML = '';
// Create a logo container
const logoContainer = createElement('div') as HTMLElement;
logoContainer.classList.add('logo'); // Add class for circular logo
this.container.appendChild(logoContainer);
// Create header
const header = createElement('h2');
header.classList.add('widget-header');
header.textContent = 'Login';
this.container.appendChild(header);
// Create form
const form = createElement('form');
const userIdInputGroup = createElement('div');
userIdInputGroup.classList.add('mb-3');
const userIdLabel = createElement('label') as HTMLLabelElement; // Cast first
userIdLabel.classList.add('form-label');
userIdLabel.htmlFor = 'userId'; // Set htmlFor as property
userIdLabel.textContent = 'Student ID';
const userIdInput = createElement('input') as HTMLInputElement;
userIdInput.type = 'text';
userIdInput.classList.add('form-control');
userIdInput.id = 'userId';
userIdInput.placeholder = '123456';
userIdInputGroup.appendChild(userIdLabel);
userIdInputGroup.appendChild(userIdInput);
const passwordInputGroup = createElement('div');
passwordInputGroup.classList.add('mb-3');
const passwordLabel = createElement('label') as HTMLLabelElement; // Cast first
passwordLabel.classList.add('form-label');
passwordLabel.htmlFor = 'password'; // Set htmlFor as property
passwordLabel.textContent = 'Password';
const passwordInput = createElement('input') as HTMLInputElement;
passwordInput.type = 'password';
passwordInput.classList.add('form-control');
passwordInput.id = 'password';
passwordInput.placeholder = 'Password';
passwordInputGroup.appendChild(passwordLabel);
passwordInputGroup.appendChild(passwordInput);
// User ID input group
const userIdInputGroup = this.createInputGroup('userId', 'Student ID', 'text', 'Student ID');
form.appendChild(userIdInputGroup);
// Password input group
const passwordInputGroup = this.createInputGroup('password', 'Password', 'password', 'Password');
form.appendChild(passwordInputGroup);
// Login button
const loginButton = createElement('button');
loginButton.type = 'submit';
loginButton.classList.add('btn', 'btn-primary');
loginButton.textContent = 'Login';
form.appendChild(userIdInputGroup);
form.appendChild(passwordInputGroup);
form.appendChild(loginButton);
// Form submission handler
form.addEventListener('submit', async (event) => {
event.preventDefault();
const userId = userIdInput.value;
const password = passwordInput.value;
const userId = (userIdInputGroup.querySelector('input') as HTMLInputElement).value;
const password = (passwordInputGroup.querySelector('input') as HTMLInputElement).value;
try {
const response: ApiResponse<LoginResponseData> = await globalAPI.login({ userId, password });
@@ -71,8 +59,28 @@ export class LoginWidget extends Widget {
}
});
this.container.appendChild(header);
this.container.appendChild(form);
return this.container;
}
private createInputGroup(id: string, labelText: string, inputType: string, placeholder: string): HTMLElement {
const inputGroup = createElement('div');
inputGroup.classList.add('mb-3');
const label = createElement('label') as HTMLLabelElement;
label.classList.add('form-label');
label.htmlFor = id;
label.textContent = labelText;
const input = createElement('input') as HTMLInputElement;
input.type = inputType;
input.classList.add('form-control');
input.id = id;
input.placeholder = placeholder;
inputGroup.appendChild(label);
inputGroup.appendChild(input);
return inputGroup;
}
}

8
src/widgets/RegisterWidget.ts
View File

@@ -7,11 +7,11 @@ export class RegisterWidget extends Widget {
constructor(message?: string) {
super();
this.message = message || "For registration, please contact your department head for further instructions.";
this.message = message || "Please register first.. ";
}
render(): HTMLElement {
this.container.innerHTML = ''; // Clear previous content
this.container.innerHTML = '';
const header = createElement('h2');
header.classList.add('widget-header');
@@ -24,7 +24,7 @@ export class RegisterWidget extends Widget {
const button = createElement('button');
button.classList.add('btn', 'btn-secondary');
button.textContent = 'Register';
button.disabled = true;
button.addEventListener('click', () => {
navigateTo('/register');
});
@@ -34,4 +34,4 @@ export class RegisterWidget extends Widget {
this.container.appendChild(button);
return this.container;
}
}
}