Splitting login logic to a separated file to make the code easier to work with.
This commit is contained in:
parent
064ec75ed3
commit
90d85ed4af
@ -16,6 +16,7 @@ import CircleStyle from 'ol/style/Circle'
|
|||||||
import Style from 'ol/style/Style'
|
import Style from 'ol/style/Style'
|
||||||
import BaseEvent from 'ol/events/Event'
|
import BaseEvent from 'ol/events/Event'
|
||||||
import {click} from 'ol/events/condition'
|
import {click} from 'ol/events/condition'
|
||||||
|
import ConquerLogin from '@burguillosinfo/conquer/login'
|
||||||
|
|
||||||
type StylesInterface = Record<string, Style>
|
type StylesInterface = Record<string, Style>
|
||||||
export default class Conquer {
|
export default class Conquer {
|
||||||
@ -26,20 +27,6 @@ export default class Conquer {
|
|||||||
private rotationOffset = 0
|
private rotationOffset = 0
|
||||||
private heading = 0
|
private heading = 0
|
||||||
private disableSetRotationOffset = false
|
private disableSetRotationOffset = false
|
||||||
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 currentPositionFeature: Feature | null
|
private currentPositionFeature: Feature | null
|
||||||
private vectorLayer: VectorLayer<VectorSource> | null = null
|
private vectorLayer: VectorLayer<VectorSource> | null = null
|
||||||
private alpha = 0
|
private alpha = 0
|
||||||
@ -68,92 +55,7 @@ export default class Conquer {
|
|||||||
alert('Error de interfaz')
|
alert('Error de interfaz')
|
||||||
throw new Error(error)
|
throw new Error(error)
|
||||||
}
|
}
|
||||||
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()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
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()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
async onLoginSuccess(): Promise<void> {
|
|
||||||
await this.removeLoginRegisterCombo()
|
|
||||||
const currentPositionFeature = this.currentPositionFeature
|
|
||||||
if (currentPositionFeature === null) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.map.on('click', (event: MapEvent) => {
|
|
||||||
this.onClickMap(event)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
async onClickMap(event: MapEvent): Promise<void> {
|
async onClickMap(event: MapEvent): Promise<void> {
|
||||||
if (this.vectorLayer === null) {
|
if (this.vectorLayer === null) {
|
||||||
@ -199,138 +101,22 @@ export default class Conquer {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async goToRegister(): Promise<void> {
|
async onLoginSuccess(): Promise<void> {
|
||||||
const isLogged = await this.isLogged()
|
const currentPositionFeature = this.currentPositionFeature
|
||||||
await this.removeLoginRegisterCombo()
|
if (currentPositionFeature === null) {
|
||||||
if (!isLogged) {
|
return
|
||||||
this.conquerRegister.classList.remove('conquer-display-none')
|
|
||||||
}
|
}
|
||||||
}
|
this.map.on('click', (event: MapEvent) => {
|
||||||
async goToLogin(): Promise<void> {
|
this.onClickMap(event)
|
||||||
const isLogged = await this.isLogged()
|
|
||||||
await this.removeLoginRegisterCombo()
|
|
||||||
if (!isLogged) {
|
|
||||||
this.conquerLogin.classList.remove('conquer-display-none')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async removeLoginRegisterCombo(): Promise<void> {
|
|
||||||
this.conquerLogin.classList.add('conquer-display-none')
|
|
||||||
this.conquerRegister.classList.add('conquer-display-none')
|
|
||||||
}
|
|
||||||
|
|
||||||
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
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
unsetLoginAndRegisterErrors() {
|
|
||||||
this.conquerRegisterError.classList.add('conquer-display-none')
|
|
||||||
this.conquerLoginError.classList.add('conquer-display-none')
|
|
||||||
}
|
|
||||||
|
|
||||||
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()
|
|
||||||
}
|
|
||||||
addNewLoginSuccessText(message: string): void {
|
|
||||||
this.unsetLoginAndRegisterErrors()
|
|
||||||
this.conquerLoginSuccess.innerText = message
|
|
||||||
this.conquerLoginSuccess.classList.remove('conquer-display-none')
|
|
||||||
|
|
||||||
}
|
|
||||||
addNewLoginError(error: string): void {
|
|
||||||
this.unsetLoginAndRegisterErrors()
|
|
||||||
this.conquerLoginSuccess.classList.add('conquer-display-none')
|
|
||||||
this.conquerLoginError.innerText = error
|
|
||||||
this.conquerLoginError.classList.remove('conquer-display-none')
|
|
||||||
}
|
|
||||||
addNewRegisterError(error: string): void {
|
|
||||||
this.unsetLoginAndRegisterErrors()
|
|
||||||
this.conquerLoginSuccess.classList.add('conquer-display-none')
|
|
||||||
this.conquerRegisterError.innerText = error
|
|
||||||
this.conquerRegisterError.classList.remove('conquer-display-none')
|
|
||||||
}
|
|
||||||
|
|
||||||
async checkLogin(): Promise<void> {
|
|
||||||
const isLogged = await this.isLogged()
|
|
||||||
if (!isLogged) {
|
|
||||||
this.conquerLogin.classList.remove('conquer-display-none')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.onLoginSuccess()
|
|
||||||
}
|
|
||||||
async run() {
|
async run() {
|
||||||
this.fillConquerLogin()
|
const conquerLogin = new ConquerLogin()
|
||||||
this.fillConquerRegister()
|
conquerLogin.on('login', () => {
|
||||||
this.checkLogin()
|
this.onLoginSuccess()
|
||||||
|
})
|
||||||
|
conquerLogin.enableLogIfNeeded()
|
||||||
const conquerContainer = this.conquerContainer
|
const conquerContainer = this.conquerContainer
|
||||||
//layer.on('prerender', (evt) => {
|
//layer.on('prerender', (evt) => {
|
||||||
// // return
|
// // return
|
||||||
@ -498,21 +284,4 @@ export default class Conquer {
|
|||||||
constructor(conquerContainer: HTMLDivElement) {
|
constructor(conquerContainer: HTMLDivElement) {
|
||||||
this.conquerContainer = conquerContainer
|
this.conquerContainer = conquerContainer
|
||||||
}
|
}
|
||||||
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 responseJson
|
|
||||||
let status
|
|
||||||
try {
|
|
||||||
const response = await fetch(urlUser)
|
|
||||||
status = response.status
|
|
||||||
} catch {
|
|
||||||
this.addNewLoginRegisterError('Error del servidor')
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
return status === 200
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
267
js-src/conquer/login.ts
Normal file
267
js-src/conquer/login.ts
Normal file
@ -0,0 +1,267 @@
|
|||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -28,6 +28,13 @@ body {
|
|||||||
p.conquer-login-success {
|
p.conquer-login-success {
|
||||||
color: green;
|
color: green;
|
||||||
}
|
}
|
||||||
|
div.conquer-overlay-transparent {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
div.conquer-login,div.conquer-register {
|
div.conquer-login,div.conquer-register {
|
||||||
form {
|
form {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -8,6 +8,8 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div class="conquer-overlay-transparent conquer-display-none">
|
||||||
|
</div>
|
||||||
<div class="conquer-login conquer-display-none">
|
<div class="conquer-login conquer-display-none">
|
||||||
<form>
|
<form>
|
||||||
<p class="conquer-login-error conquer-display-none"></p>
|
<p class="conquer-login-error conquer-display-none"></p>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user