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

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
        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)
    }
}