burguillos.info/js-src/conquer/login.ts

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
    private conquerOverlayTransparent: HTMLDivElement

    public async enableLogIfNeeded() {
        this.fillOverlay()
        this.fillConquerLogin()
        this.fillConquerRegister()
        this.checkLogin()
    }

    private async fillOverlay() {
        const conquerOverlayTransparent = document.querySelector('.conquer-overlay-transparent')
        if (conquerOverlayTransparent === null || !(conquerOverlayTransparent instanceof HTMLDivElement)) {
            Conquer.fail('No overlay found')
        }
        this.conquerOverlayTransparent = conquerOverlayTransparent
    }

    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.conquerOverlayTransparent.classList.add('conquer-display-none')
        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')
            this.conquerOverlayTransparent.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
    }

}