86 lines
3.0 KiB
TypeScript
86 lines
3.0 KiB
TypeScript
// widgets/LoginWidget.ts
|
|
import { Widget } from '../components/Widget';
|
|
import { createElement, navigateTo } from '../utils/utils';
|
|
import { globalAPI, ApiResponse, LoginResponseData } from '../api/api';
|
|
|
|
export class LoginWidget extends Widget {
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
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');
|
|
|
|
// 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(loginButton);
|
|
|
|
// Form submission handler
|
|
form.addEventListener('submit', async (event) => {
|
|
event.preventDefault();
|
|
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 });
|
|
if (response.success) {
|
|
navigateTo('/dashboard');
|
|
} else {
|
|
alert('Login failed: ' + response.message);
|
|
}
|
|
} catch (error) {
|
|
console.error('Login error:', error);
|
|
alert('Login error occurred.');
|
|
}
|
|
});
|
|
|
|
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;
|
|
}
|
|
} |