211 lines
9.8 KiB
TypeScript
211 lines
9.8 KiB
TypeScript
import Conquer from '@burguillosinfo/conquer'
|
|
import ConquerLogin from '@burguillosinfo/conquer/login'
|
|
import ConquerInterface from '@burguillosinfo/conquer/interface'
|
|
|
|
export default class LoginUI extends ConquerInterface {
|
|
private conquerLogin: ConquerLogin
|
|
|
|
private conquerLoginGoToRegister: HTMLAnchorElement
|
|
private conquerLoginError: HTMLParagraphElement
|
|
private conquerLoginSuccess: HTMLParagraphElement
|
|
private conquerLoginUsername: HTMLInputElement
|
|
private conquerLoginPassword: HTMLInputElement
|
|
private conquerLoginSubmit: HTMLButtonElement
|
|
|
|
private conquerRegisterGoToLogin: HTMLAnchorElement
|
|
private conquerRegisterUsername: HTMLInputElement
|
|
private conquerRegisterPassword: HTMLInputElement
|
|
private conquerRegisterRepeatPassword: HTMLInputElement
|
|
private conquerRegisterSubmit: HTMLButtonElement
|
|
private conquerRegisterError: HTMLParagraphElement
|
|
|
|
constructor(conquerLogin: ConquerLogin) {
|
|
super()
|
|
this.conquerLogin = conquerLogin
|
|
}
|
|
|
|
public run() {
|
|
this.conquerLogin.on('login', () => {
|
|
this.runCallbacks('close');
|
|
});
|
|
this.storeRegisterElements()
|
|
this.storeLoginElements()
|
|
}
|
|
|
|
private getLoginDiv(): HTMLDivElement {
|
|
const element = this.getNodes()[1];
|
|
if (element === undefined || !(element instanceof HTMLDivElement)) {
|
|
Conquer.fail('Login is not a div.')
|
|
}
|
|
return element
|
|
}
|
|
|
|
private getOverlayDiv(): HTMLDivElement {
|
|
const element = this.getNodes()[0]
|
|
if (element === undefined || !(element instanceof HTMLDivElement)) {
|
|
Conquer.fail('Overlay transparent is not a div.')
|
|
}
|
|
return element
|
|
}
|
|
|
|
private getRegisterDiv(): HTMLDivElement {
|
|
const element = this.getNodes()[2]
|
|
if (element === undefined || !(element instanceof HTMLDivElement)) {
|
|
Conquer.fail('Register is not a div.')
|
|
}
|
|
return element
|
|
}
|
|
|
|
public generateNodes(): HTMLElement[] {
|
|
const resultArray = []
|
|
const overlay = this.getNodeFromTemplateId('conquer-overlay-transparent-template')
|
|
overlay.classList.remove('conquer-display-none')
|
|
resultArray.push(overlay)
|
|
const login = this.getNodeFromTemplateId('conquer-login-template')
|
|
login.classList.remove('conquer-display-none')
|
|
if (!(login instanceof HTMLDivElement)) {
|
|
Conquer.fail('Login is required to be a Div.')
|
|
}
|
|
resultArray.push(login)
|
|
const register = this.getNodeFromTemplateId('conquer-register-template')
|
|
resultArray.push(register)
|
|
return resultArray
|
|
}
|
|
private async storeRegisterElements() {
|
|
const registerElement = this.getRegisterDiv()
|
|
const conquerRegisterGoToLogin = registerElement.querySelector('.conquer-register-go-to-login')
|
|
if (conquerRegisterGoToLogin === null || !(conquerRegisterGoToLogin instanceof HTMLAnchorElement)) {
|
|
Conquer.fail('Link to go to login from register is invalid.')
|
|
}
|
|
this.conquerRegisterGoToLogin = conquerRegisterGoToLogin
|
|
this.conquerRegisterGoToLogin.addEventListener('click', () => {
|
|
this.goToLogin()
|
|
})
|
|
const conquerRegisterUsername = registerElement.querySelector('.conquer-register-username')
|
|
if (conquerRegisterUsername === null || !(conquerRegisterUsername instanceof HTMLInputElement)) {
|
|
Conquer.fail('No username field in conquer register.')
|
|
}
|
|
this.conquerRegisterUsername = conquerRegisterUsername
|
|
const conquerRegisterPassword = registerElement.querySelector('.conquer-register-password')
|
|
if (conquerRegisterPassword === null || !(conquerRegisterPassword instanceof HTMLInputElement)) {
|
|
Conquer.fail('No password field in conquer register.')
|
|
}
|
|
this.conquerRegisterPassword = conquerRegisterPassword
|
|
const conquerRegisterRepeatPassword = registerElement.querySelector('.conquer-register-repeat-password')
|
|
if (conquerRegisterRepeatPassword === null || !(conquerRegisterRepeatPassword instanceof HTMLInputElement)) {
|
|
Conquer.fail('No repeat password field in conquer register.')
|
|
}
|
|
this.conquerRegisterRepeatPassword = conquerRegisterRepeatPassword
|
|
const conquerRegisterSubmit = registerElement.querySelector('.conquer-register-submit')
|
|
if (conquerRegisterSubmit === null || !(conquerRegisterSubmit instanceof HTMLButtonElement)) {
|
|
Conquer.fail('No register submit button found.')
|
|
}
|
|
this.conquerRegisterSubmit = conquerRegisterSubmit
|
|
this.conquerRegisterSubmit.addEventListener('click', (event: Event) => {
|
|
event.preventDefault()
|
|
const username = this.conquerRegisterUsername.value
|
|
const password = this.conquerRegisterPassword.value
|
|
const repeatPassword = this.conquerRegisterRepeatPassword.value
|
|
this.conquerLogin.onRegisterRequest(this, username, password, repeatPassword)
|
|
})
|
|
const conquerRegisterError = registerElement.querySelector('.conquer-register-error')
|
|
if (conquerRegisterError === null || !(conquerRegisterError instanceof HTMLParagraphElement)) {
|
|
Conquer.fail('Unable to find the conquer error element.')
|
|
}
|
|
this.conquerRegisterError = conquerRegisterError
|
|
|
|
}
|
|
private storeLoginElements() {
|
|
const loginElement = this.getLoginDiv()
|
|
const conquerLoginGoToRegister = loginElement.querySelector('.conquer-login-go-to-register')
|
|
if (conquerLoginGoToRegister === null || !(conquerLoginGoToRegister instanceof HTMLAnchorElement)) {
|
|
Conquer.fail('Link to go to register from login is invalid.')
|
|
}
|
|
this.conquerLoginGoToRegister = conquerLoginGoToRegister
|
|
this.conquerLoginGoToRegister.addEventListener('click', () => {
|
|
this.goToRegister()
|
|
})
|
|
const conquerLoginError = loginElement.querySelector('.conquer-login-error')
|
|
if (conquerLoginError === null || !(conquerLoginError instanceof HTMLParagraphElement)) {
|
|
Conquer.fail('Unable to find conquer login error.')
|
|
}
|
|
this.conquerLoginError = conquerLoginError
|
|
const conquerLoginSuccess = loginElement.querySelector('.conquer-login-success')
|
|
if (conquerLoginSuccess === null || !(conquerLoginSuccess instanceof HTMLParagraphElement)) {
|
|
Conquer.fail('Unable to find conquer login success.')
|
|
}
|
|
this.conquerLoginSuccess = conquerLoginSuccess
|
|
const conquerLoginUsername = loginElement.querySelector('.conquer-login-username')
|
|
if (conquerLoginUsername === null || !(conquerLoginUsername instanceof HTMLInputElement)) {
|
|
Conquer.fail('Unable to find conquer login username field.')
|
|
}
|
|
this.conquerLoginUsername = conquerLoginUsername
|
|
const conquerLoginPassword = loginElement.querySelector('.conquer-login-password')
|
|
if (conquerLoginPassword === null || !(conquerLoginPassword instanceof HTMLInputElement)) {
|
|
Conquer.fail('Unable to find conquer login password field.')
|
|
}
|
|
this.conquerLoginPassword = conquerLoginPassword
|
|
const conquerLoginSubmit = loginElement.querySelector('.conquer-login-submit')
|
|
if (conquerLoginSubmit === null || !(conquerLoginSubmit instanceof HTMLButtonElement)) {
|
|
Conquer.fail('Unable to find the submit button for the login.')
|
|
}
|
|
this.conquerLoginSubmit = conquerLoginSubmit
|
|
console.log(this.conquerLoginSubmit.parentNode?.parentNode)
|
|
this.conquerLoginSubmit.addEventListener('click', (event: Event) => {
|
|
event.preventDefault()
|
|
const username = this.conquerLoginUsername.value
|
|
const password = this.conquerLoginPassword.value
|
|
this.conquerLogin.onLoginRequested(this, username, password)
|
|
})
|
|
}
|
|
|
|
private async goToRegister(): Promise<void> {
|
|
await this.removeLoginRegisterCombo()
|
|
const registerElement = this.getRegisterDiv()
|
|
registerElement.classList.remove('conquer-display-none')
|
|
}
|
|
|
|
public async removeLoginRegisterCombo(): Promise<void> {
|
|
const registerElement = this.getRegisterDiv()
|
|
const overlayElement = this.getOverlayDiv()
|
|
overlayElement.classList.add('conquer-display-none')
|
|
const loginElement = this.getLoginDiv()
|
|
loginElement.classList.add('conquer-display-none')
|
|
registerElement.classList.add('conquer-display-none')
|
|
}
|
|
|
|
public async addNewLoginSuccessText(message: string): Promise<void> {
|
|
this.unsetLoginAndRegisterErrors()
|
|
this.conquerLoginSuccess.innerText = message
|
|
this.conquerLoginSuccess.classList.remove('conquer-display-none')
|
|
|
|
}
|
|
public async addNewLoginError(error: string): Promise<void> {
|
|
this.unsetLoginAndRegisterErrors()
|
|
this.conquerLoginSuccess.classList.add('conquer-display-none')
|
|
this.conquerLoginError.innerText = error
|
|
this.conquerLoginError.classList.remove('conquer-display-none')
|
|
}
|
|
public async addNewRegisterError(error: string): Promise<void> {
|
|
this.unsetLoginAndRegisterErrors()
|
|
this.conquerLoginSuccess.classList.add('conquer-display-none')
|
|
this.conquerRegisterError.innerText = error
|
|
this.conquerRegisterError.classList.remove('conquer-display-none')
|
|
}
|
|
public async unsetLoginAndRegisterErrors() {
|
|
this.conquerRegisterError.classList.add('conquer-display-none')
|
|
this.conquerLoginError.classList.add('conquer-display-none')
|
|
}
|
|
|
|
public async goToLogin(): Promise<void> {
|
|
await this.removeLoginRegisterCombo()
|
|
const loginElement = this.getLoginDiv()
|
|
loginElement.classList.remove('conquer-display-none')
|
|
}
|
|
|
|
public async addNewLoginRegisterError(message: string): Promise<void> {
|
|
this.addNewRegisterError(message)
|
|
this.addNewLoginError(message)
|
|
}
|
|
}
|