Improving login workflow to make extensible UI.
This commit is contained in:
parent
d73ff6692a
commit
d4927e2e1b
@ -17,6 +17,7 @@ import Style from 'ol/style/Style'
|
||||
import BaseEvent from 'ol/events/Event'
|
||||
import {click} from 'ol/events/condition'
|
||||
import ConquerLogin from '@burguillosinfo/conquer/login'
|
||||
import InterfaceManager from '@burguillosinfo/conquer/interface-manager'
|
||||
|
||||
type StylesInterface = Record<string, Style>
|
||||
export default class Conquer {
|
||||
@ -32,6 +33,7 @@ export default class Conquer {
|
||||
private alpha = 0
|
||||
private beta = 0
|
||||
private gamma = 0
|
||||
private conquerLogin: ConquerLogin
|
||||
static start() {
|
||||
const conquerContainer = document.querySelector(".conquer-container")
|
||||
if (conquerContainer !== null) {
|
||||
@ -112,11 +114,13 @@ export default class Conquer {
|
||||
}
|
||||
|
||||
async run() {
|
||||
const conquerLogin = new ConquerLogin()
|
||||
const interfaceManager = new InterfaceManager()
|
||||
const conquerLogin = new ConquerLogin(interfaceManager)
|
||||
conquerLogin.on('login', () => {
|
||||
this.onLoginSuccess()
|
||||
})
|
||||
conquerLogin.enableLogIfNeeded()
|
||||
conquerLogin.start()
|
||||
this.conquerLogin = conquerLogin
|
||||
const conquerContainer = this.conquerContainer
|
||||
//layer.on('prerender', (evt) => {
|
||||
// // return
|
||||
|
||||
@ -1,138 +1,25 @@
|
||||
import Conquer from '@burguillosinfo/conquer'
|
||||
import ConquerInterfaceManager from '@burguillosinfo/conquer/interface-manager'
|
||||
import LoginUI from '@burguillosinfo/conquer/interface/login'
|
||||
|
||||
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
|
||||
private conquerInterfaceManager: ConquerInterfaceManager
|
||||
private cachedIsLoggedIn = true
|
||||
|
||||
public async enableLogIfNeeded() {
|
||||
this.fillOverlay()
|
||||
this.fillConquerLogin()
|
||||
this.fillConquerRegister()
|
||||
this.checkLogin()
|
||||
constructor(conquerInterfaceManager: ConquerInterfaceManager) {
|
||||
this.conquerInterfaceManager = conquerInterfaceManager
|
||||
}
|
||||
|
||||
private async fillOverlay() {
|
||||
const conquerOverlayTransparent = document.querySelector('.conquer-overlay-transparent')
|
||||
if (conquerOverlayTransparent === null || !(conquerOverlayTransparent instanceof HTMLDivElement)) {
|
||||
Conquer.fail('No overlay found')
|
||||
}
|
||||
this.conquerOverlayTransparent = conquerOverlayTransparent
|
||||
public async start(): Promise<void> {
|
||||
this.loopCheckLogin()
|
||||
}
|
||||
|
||||
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)
|
||||
public async onRegisterRequest(loginUI: LoginUI, username: string, password: string, repeatPassword: string): Promise<void> {
|
||||
const urlUser = new URL('/conquer/user', window.location.protocol +
|
||||
'//' + window.location.hostname + ':' + window.location.port)
|
||||
let responseJson
|
||||
let status
|
||||
try {
|
||||
@ -148,86 +35,51 @@ export default class Login {
|
||||
status = response.status
|
||||
} catch(e) {
|
||||
console.error(e)
|
||||
this.addNewRegisterError('El servidor ha enviado datos inesperados.')
|
||||
loginUI.addNewRegisterError('El servidor ha enviado datos inesperados.')
|
||||
return
|
||||
}
|
||||
if (status !== 200) {
|
||||
this.addNewRegisterError(responseJson.error)
|
||||
loginUI.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')
|
||||
loginUI.addNewLoginSuccessText(`Usuario registrado ${username}.`)
|
||||
loginUI.goToLogin()
|
||||
}
|
||||
|
||||
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 async loopCheckLogin(): Promise<void> {
|
||||
window.setInterval(() => {
|
||||
this.isLogged().then((isLogged) => {
|
||||
if (!isLogged && this.cachedIsLoggedIn) {
|
||||
this.onLogout()
|
||||
this.cachedIsLoggedIn = false
|
||||
}
|
||||
})
|
||||
}, 5000)
|
||||
}
|
||||
|
||||
private async onLogout(): Promise<void> {
|
||||
const interfaceManager = this.conquerInterfaceManager
|
||||
const loginUI = new LoginUI(this)
|
||||
interfaceManager.push(loginUI)
|
||||
}
|
||||
|
||||
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)
|
||||
}
|
||||
this.callbacks[name].push(callback)
|
||||
}
|
||||
|
||||
private async onLoginSuccess(): Promise<void> {
|
||||
await this.removeLoginRegisterCombo()
|
||||
private async onLoginSuccess(loginUI: LoginUI): Promise<void> {
|
||||
this.cachedIsLoggedIn = true
|
||||
this.conquerInterfaceManager.remove(loginUI)
|
||||
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
|
||||
public async onLoginRequested(loginUI: LoginUI, username: string, password: string): Promise<void> {
|
||||
const urlUser = new URL('/conquer/user/login', window.location.protocol + '//' + window.location.hostname + ':' + window.location.port)
|
||||
let responseJson
|
||||
let status
|
||||
@ -243,33 +95,27 @@ export default class Login {
|
||||
status = response.status
|
||||
} catch(e) {
|
||||
console.error(e)
|
||||
this.addNewLoginError('El servidor ha enviado datos inesperados.')
|
||||
loginUI.addNewLoginError('El servidor ha enviado datos inesperados.')
|
||||
return
|
||||
}
|
||||
if (status !== 200) {
|
||||
this.addNewLoginError(responseJson.error)
|
||||
loginUI.addNewLoginError(responseJson.error)
|
||||
return
|
||||
}
|
||||
this.unsetLoginAndRegisterErrors()
|
||||
loginUI.unsetLoginAndRegisterErrors()
|
||||
const isLogged = await this.isLogged()
|
||||
if (isLogged) {
|
||||
this.onLoginSuccess()
|
||||
this.onLoginSuccess(loginUI)
|
||||
}
|
||||
}
|
||||
|
||||
private async addNewLoginRegisterError(message: string): Promise<void> {
|
||||
this.addNewRegisterError(message)
|
||||
this.addNewLoginError(message)
|
||||
}
|
||||
|
||||
private async isLogged(): Promise<boolean> {
|
||||
public 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
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -8,9 +8,9 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="conquer-overlay-transparent conquer-display-none">
|
||||
<div id="conquer-overlay-transparent-template" class="conquer-overlay-transparent conquer-display-none">
|
||||
</div>
|
||||
<div class="conquer-login conquer-display-none">
|
||||
<div id="conquer-login-template" class="conquer-login conquer-display-none">
|
||||
<form>
|
||||
<p class="conquer-login-error conquer-display-none"></p>
|
||||
<p class="conquer-login-success conquer-display-none"></p>
|
||||
@ -22,7 +22,7 @@
|
||||
<p>¿No tienes cuenta aun? <a href="#" class="conquer-login-go-to-register">Registrate</a></p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="conquer-register conquer-display-none">
|
||||
<div id="conquer-register-template" class="conquer-register conquer-display-none">
|
||||
<form>
|
||||
<p class="conquer-register-error conquer-display-none"></p>
|
||||
<label>Nombre de usuario</label>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user