sergiotarxz/burguillos.info
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Splitting login logic to a separated file to make the code easier to work with.

Browse Source
This commit is contained in:
Sergiotarxz 2023-11-21 19:16:30 +01:00
parent 064ec75ed3
commit 90d85ed4af
5 changed files with 300 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

255
js-src/conquer/index.ts
View File

@ -16,6 +16,7 @@ import CircleStyle from 'ol/style/Circle'
import Style from 'ol/style/Style'
import BaseEvent from 'ol/events/Event'
import {click} from 'ol/events/condition'
import ConquerLogin from '@burguillosinfo/conquer/login'
type StylesInterface = Record<string, Style>
export default class Conquer {
@ -26,20 +27,6 @@ export default class Conquer {
private rotationOffset = 0
private heading = 0
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 vectorLayer: VectorLayer<VectorSource> | null = null
private alpha = 0
@ -68,92 +55,7 @@ export default class Conquer {
alert('Error de interfaz')
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> {
if (this.vectorLayer === null) {
@ -199,138 +101,22 @@ export default class Conquer {
}
}
async goToRegister(): Promise<void> {
const isLogged = await this.isLogged()
await this.removeLoginRegisterCombo()
if (!isLogged) {
this.conquerRegister.classList.remove('conquer-display-none')
async onLoginSuccess(): Promise<void> {
const currentPositionFeature = this.currentPositionFeature
if (currentPositionFeature === null) {
return
}
}
async goToLogin(): Promise<void> {
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()
this.map.on('click', (event: MapEvent) => {
this.onClickMap(event)
})
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() {
this.fillConquerLogin()
this.fillConquerRegister()
this.checkLogin()
const conquerLogin = new ConquerLogin()
conquerLogin.on('login', () => {
this.onLoginSuccess()
})
conquerLogin.enableLogIfNeeded()
const conquerContainer = this.conquerContainer
//layer.on('prerender', (evt) => {
// // return
@ -498,21 +284,4 @@ export default class Conquer {
constructor(conquerContainer: HTMLDivElement) {
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
View 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
}
}

7
public/css/styles.scss
View File

@ -28,6 +28,13 @@ body {
p.conquer-login-success {
color: green;
}
div.conquer-overlay-transparent {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
div.conquer-login,div.conquer-register {
form {
width: 100%;

13
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

2
templates/conquer/index.html.ep
View File

@ -8,6 +8,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="conquer-overlay-transparent conquer-display-none">
</div>
<div class="conquer-login conquer-display-none">
<form>
<p class="conquer-login-error conquer-display-none"></p>