268 lines
12 KiB
TypeScript
268 lines
12 KiB
TypeScript
|
import Conquer from '@burguillosinfo/conquer'
|
||
|
|
|
||
|
|
export type ConquerLoginEventCallback = () => void
|
||
|
|
export default class Login {
|
||
|
|
private conquerLogin: HTMLDivElement
|
||
|
|
private conquerLoginGoToRegister: HTMLAnchorElement
|
||
|
|
private conquerLoginError: HTMLParagraphElement
|
||
|
|
private conquerLoginSuccess: HTMLParagraphElement
|
||
|
|
private conquerLoginUsername: HTMLInputElement
|
||
|
|
private conquerLoginPassword: HTMLInputElement
|
||
|
|
private conquerLoginSubmit: HTMLButtonElement
|
||
|
|
private conquerRegisterGoToLogin: HTMLAnchorElement
|
||
|
|
private conquerRegister: HTMLDivElement
|
||
|
|
private conquerRegisterUsername: HTMLInputElement
|
||
|
|
private conquerRegisterPassword: HTMLInputElement
|
||
|
|
private conquerRegisterRepeatPassword: HTMLInputElement
|
||
|
|
private conquerRegisterSubmit: HTMLButtonElement
|
||
|
|
private conquerRegisterError: HTMLParagraphElement
|
||
|
|
|
||
|
|
|
||
|
|
public async enableLogIfNeeded() {
|
||
|
|
this.fillConquerLogin()
|
||
|
|
this.fillConquerRegister()
|
||
|
|
this.checkLogin()
|
||
|
|
}
|
||
|
|
|
||
|
|
private async fillConquerLogin() {
|
||
|
|
const conquerLogin = document.querySelector('.conquer-login')
|
||
|
|
if (conquerLogin === null || !(conquerLogin instanceof HTMLDivElement)) {
|
||
|
|
Conquer.fail('conquerLogin is invalid')
|
||
|
|
}
|
||
|
|
this.conquerLogin = conquerLogin
|
||
|
|
const conquerLoginGoToRegister = document.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 = document.querySelector('.conquer-login-error')
|
||
|
|
if (conquerLoginError === null || !(conquerLoginError instanceof HTMLParagraphElement)) {
|
||
|
|
Conquer.fail('Unable to find conquer login error.')
|
||
|
|
}
|
||
|
|
this.conquerLoginError = conquerLoginError
|
||
|
|
const conquerLoginSuccess = document.querySelector('.conquer-login-success')
|
||
|
|
if (conquerLoginSuccess === null || !(conquerLoginSuccess instanceof HTMLParagraphElement)) {
|
||
|
|
Conquer.fail('Unable to find conquer login success.')
|
||
|
|
}
|
||
|
|
this.conquerLoginSuccess = conquerLoginSuccess
|
||
|
|
const conquerLoginUsername = document.querySelector('.conquer-login-username')
|
||
|
|
if (conquerLoginUsername === null || !(conquerLoginUsername instanceof HTMLInputElement)) {
|
||
|
|
Conquer.fail('Unable to find conquer login username field.')
|
||
|
|
}
|
||
|
|
this.conquerLoginUsername = conquerLoginUsername
|
||
|
|
const conquerLoginPassword = document.querySelector('.conquer-login-password')
|
||
|
|
if (conquerLoginPassword === null || !(conquerLoginPassword instanceof HTMLInputElement)) {
|
||
|
|
Conquer.fail('Unable to find conquer login password field.')
|
||
|
|
}
|
||
|
|
this.conquerLoginPassword = conquerLoginPassword
|
||
|
|
const conquerLoginSubmit = document.querySelector('.conquer-login-submit')
|
||
|
|
if (conquerLoginSubmit === null || !(conquerLoginSubmit instanceof HTMLButtonElement)) {
|
||
|
|
Conquer.fail('Unable to find the submit button for the login.')
|
||
|
|
}
|
||
|
|
this.conquerLoginSubmit = conquerLoginSubmit
|
||
|
|
this.conquerLoginSubmit.addEventListener('click', (event: Event) => {
|
||
|
|
event.preventDefault()
|
||
|
|
this.onLoginRequested()
|
||
|
|
})
|
||
|
|
}
|
||
|
|
private async fillConquerRegister() {
|
||
|
|
const conquerRegister = document.querySelector('.conquer-register')
|
||
|
|
if (conquerRegister === null || !(conquerRegister instanceof HTMLDivElement)) {
|
||
|
|
Conquer.fail('conquerRegister is invalid')
|
||
|
|
}
|
||
|
|
this.conquerRegister = conquerRegister
|
||
|
|
const conquerRegisterGoToLogin = document.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 = document.querySelector('.conquer-register-username')
|
||
|
|
if (conquerRegisterUsername === null || !(conquerRegisterUsername instanceof HTMLInputElement)) {
|
||
|
|
Conquer.fail('No username field in conquer register.')
|
||
|
|
}
|
||
|
|
this.conquerRegisterUsername = conquerRegisterUsername
|
||
|
|
const conquerRegisterPassword = document.querySelector('.conquer-register-password')
|
||
|
|
if (conquerRegisterPassword === null || !(conquerRegisterPassword instanceof HTMLInputElement)) {
|
||
|
|
Conquer.fail('No password field in conquer register.')
|
||
|
|
}
|
||
|
|
this.conquerRegisterPassword = conquerRegisterPassword
|
||
|
|
const conquerRegisterRepeatPassword = document.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 = document.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()
|
||
|
|
this.onRegisterRequest()
|
||
|
|
})
|
||
|
|
const conquerRegisterError = document.querySelector('.conquer-register-error')
|
||
|
|
if (conquerRegisterError === null || !(conquerRegisterError instanceof HTMLParagraphElement)) {
|
||
|
|
Conquer.fail('Unable to find the conquer error element.')
|
||
|
|
}
|
||
|
|
this.conquerRegisterError = conquerRegisterError
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
private async unsetLoginAndRegisterErrors() {
|
||
|
|
this.conquerRegisterError.classList.add('conquer-display-none')
|
||
|
|
this.conquerLoginError.classList.add('conquer-display-none')
|
||
|
|
}
|
||
|
|
|
||
|
|
private async onRegisterRequest(): Promise<void> {
|
||
|
|
const username = this.conquerRegisterUsername.value
|
||
|
|
const password = this.conquerRegisterPassword.value
|
||
|
|
const repeatPassword = this.conquerRegisterRepeatPassword.value
|
||
|
|
const urlUser = new URL('/conquer/user', window.location.protocol + '//' + window.location.hostname + ':' + window.location.port)
|
||
|
|
let responseJson
|
||
|
|
let status
|
||
|
|
try {
|
||
|
|
const response = await fetch(urlUser, {
|
||
|
|
method: 'PUT',
|
||
|
|
body: JSON.stringify({
|
||
|
|
username: username,
|
||
|
|
password: password,
|
||
|
|
repeat_password: repeatPassword
|
||
|
|
})
|
||
|
|
})
|
||
|
|
responseJson = await response.json()
|
||
|
|
status = response.status
|
||
|
|
} catch(e) {
|
||
|
|
console.error(e)
|
||
|
|
this.addNewRegisterError('El servidor ha enviado datos inesperados.')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if (status !== 200) {
|
||
|
|
this.addNewRegisterError(responseJson.error)
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.addNewLoginSuccessText(`Usuario registrado ${username}.`)
|
||
|
|
this.goToLogin()
|
||
|
|
}
|
||
|
|
private async addNewLoginSuccessText(message: string): Promise<void> {
|
||
|
|
this.unsetLoginAndRegisterErrors()
|
||
|
|
this.conquerLoginSuccess.innerText = message
|
||
|
|
this.conquerLoginSuccess.classList.remove('conquer-display-none')
|
||
|
|
|
||
|
|
}
|
||
|
|
private 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')
|
||
|
|
}
|
||
|
|
private 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')
|
||
|
|
}
|
||
|
|
private async removeLoginRegisterCombo(): Promise<void> {
|
||
|
|
this.conquerLogin.classList.add('conquer-display-none')
|
||
|
|
this.conquerRegister.classList.add('conquer-display-none')
|
||
|
|
}
|
||
|
|
|
||
|
|
private async checkLogin(): Promise<void> {
|
||
|
|
const isLogged = await this.isLogged()
|
||
|
|
if (!isLogged) {
|
||
|
|
this.conquerLogin.classList.remove('conquer-display-none')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.onLoginSuccess()
|
||
|
|
}
|
||
|
|
|
||
|
|
private callbacks: Record<string, Array<ConquerLoginEventCallback>> = {}
|
||
|
|
public async on(name: string, callback: ConquerLoginEventCallback) {
|
||
|
|
if (this.callbacks[name] === undefined) {
|
||
|
|
this.callbacks[name] = []
|
||
|
|
this.callbacks[name].push(callback)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
private async onLoginSuccess(): Promise<void> {
|
||
|
|
await this.removeLoginRegisterCombo()
|
||
|
|
for (const callback of this.callbacks.login) {
|
||
|
|
callback()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
private async goToRegister(): Promise<void> {
|
||
|
|
const isLogged = await this.isLogged()
|
||
|
|
await this.removeLoginRegisterCombo()
|
||
|
|
if (!isLogged) {
|
||
|
|
this.conquerRegister.classList.remove('conquer-display-none')
|
||
|
|
} else {
|
||
|
|
this.onLoginSuccess()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
private async goToLogin(): Promise<void> {
|
||
|
|
const isLogged = await this.isLogged()
|
||
|
|
await this.removeLoginRegisterCombo()
|
||
|
|
if (!isLogged) {
|
||
|
|
this.conquerLogin.classList.remove('conquer-display-none')
|
||
|
|
} else {
|
||
|
|
this.onLoginSuccess()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
private async onLoginRequested(): Promise<void> {
|
||
|
|
const username = this.conquerLoginUsername.value
|
||
|
|
const password = this.conquerLoginPassword.value
|
||
|
|
const urlUser = new URL('/conquer/user/login', window.location.protocol + '//' + window.location.hostname + ':' + window.location.port)
|
||
|
|
let responseJson
|
||
|
|
let status
|
||
|
|
try {
|
||
|
|
const response = await fetch(urlUser, {
|
||
|
|
method: 'POST',
|
||
|
|
body: JSON.stringify({
|
||
|
|
username: username,
|
||
|
|
password: password,
|
||
|
|
})
|
||
|
|
})
|
||
|
|
responseJson = await response.json()
|
||
|
|
status = response.status
|
||
|
|
} catch(e) {
|
||
|
|
console.error(e)
|
||
|
|
this.addNewLoginError('El servidor ha enviado datos inesperados.')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if (status !== 200) {
|
||
|
|
this.addNewLoginError(responseJson.error)
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.unsetLoginAndRegisterErrors()
|
||
|
|
const isLogged = await this.isLogged()
|
||
|
|
if (isLogged) {
|
||
|
|
this.onLoginSuccess()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
private async addNewLoginRegisterError(message: string): Promise<void> {
|
||
|
|
this.addNewRegisterError(message)
|
||
|
|
this.addNewLoginError(message)
|
||
|
|
}
|
||
|
|
|
||
|
|
private async isLogged(): Promise<boolean> {
|
||
|
|
const urlUser = new URL('/conquer/user', window.location.protocol + '//' + window.location.hostname + ':' + window.location.port)
|
||
|
|
let status
|
||
|
|
try {
|
||
|
|
const response = await fetch(urlUser)
|
||
|
|
status = response.status
|
||
|
|
} catch {
|
||
|
|
this.addNewLoginRegisterError('Error del servidor')
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
return status === 200
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|