diff --git a/Electron/src/global/global.ts b/Electron/src/global/global.ts index 2dc5ddcf..65c1f761 100644 --- a/Electron/src/global/global.ts +++ b/Electron/src/global/global.ts @@ -10,6 +10,8 @@ namespace Global { export const songArchitecture: SongArchitecture = SongArchitecture.BLOB_ARCHITECTURE; + export const coldStartRequestTimeout = 5000; + export interface HandleUrlChangeResponse { canGoBack: boolean | undefined; canGoForward: boolean | undefined; diff --git a/Electron/src/pages/StartMenu/StartMenu.tsx b/Electron/src/pages/StartMenu/StartMenu.tsx index 4b185ffe..32b162ca 100644 --- a/Electron/src/pages/StartMenu/StartMenu.tsx +++ b/Electron/src/pages/StartMenu/StartMenu.tsx @@ -8,6 +8,8 @@ import { getToken } from 'utils/token'; // eslint-disable-next-line camelcase import { Body_login_user_login__post } from 'swagger/api/models/Body_login_user_login__post'; import timeout from 'utils/timeout'; +import LoadingCircle from 'components/AdvancedUIComponents/LoadingCircle/LoadingCircle'; +import Global from 'global/global'; import styles from './startMenu.module.css'; import SpotifyElectronLogo from '../../assets/imgs/SpotifyElectronLogo.png'; import { LoginService } from '../../swagger/api/services/LoginService'; @@ -17,6 +19,10 @@ interface PropsStartMenu { setIsSigningUp: Function; } +const coldStartTimeoutErrorTitle = 'El servidor esta iniciándose'; +const coldStartTimeoutErrorDescription = + 'El servidor esta iniciándose (cold-start), inténtelo de nuevo en 1 minuto'; + export default function StartMenu({ setIsLogged, setIsSigningUp, @@ -37,6 +43,22 @@ export default function StartMenu({ password: '', }); + const showErrorPopover = ({ + title, + description, + }: Pick) => { + setPropsPopOver({ + title, + description, + type: InfoPopoverType.ERROR, + triggerOpenConfirmationModal: false, + handleClose: () => { + setisOpenPopover(false); + }, + }); + setisOpenPopover(true); + }; + const handleChange = (e: ChangeEvent) => { const { name, value } = e.target; setFormData({ @@ -61,7 +83,7 @@ export default function StartMenu({ const loginUserPromise = LoginService.loginUserLoginPost(loginData); const loginResponse = await Promise.race([ loginUserPromise, - timeout(5000), + timeout(Global.coldStartRequestTimeout), ]); localStorage.setItem('jwt', loginResponse); setIsLogged(true); @@ -73,24 +95,14 @@ export default function StartMenu({ let description: string; if (error instanceof Error && error.message === 'Timeout') { - title = 'El servidor esta iniciándose'; - description = - 'El servidor esta iniciándose (cold-start), inténtelo de nuevo en 1 minuto'; + title = coldStartTimeoutErrorTitle; + description = coldStartTimeoutErrorDescription; } else { title = 'Los credenciales introducidos no son válidos'; description = 'No se ha podido iniciar sesión'; } - setPropsPopOver({ - title, - description, - type: InfoPopoverType.ERROR, - triggerOpenConfirmationModal: false, - handleClose: () => { - setisOpenPopover(false); - }, - }); - setisOpenPopover(true); + showErrorPopover({ title, description }); } finally { setLoginLoading(false); } @@ -106,10 +118,22 @@ export default function StartMenu({ setAutoLoginLoading(true); const token = getToken(); if (!token) return; - await LoginService.loginUserWithJwtLoginTokenTokenPost(token); + const autoLoginPromise = + LoginService.loginUserWithJwtLoginTokenTokenPost(token); + await Promise.race([ + autoLoginPromise, + timeout(Global.coldStartRequestTimeout), + ]); setIsLogged(true); } catch (error) { - console.log(`User invalid credentials for auto login with JWT token`); + if (error instanceof Error && error.message === 'Timeout') { + showErrorPopover({ + title: coldStartTimeoutErrorTitle, + description: coldStartTimeoutErrorDescription, + }); + } else { + console.log(`User invalid credentials for auto login with JWT token`); + } } finally { setAutoLoginLoading(false); } @@ -119,6 +143,11 @@ export default function StartMenu({ return (
+ {(autoLoginLoading || loginLoading) && ( +
+ +
+ )} {!autoLoginLoading && (
@@ -145,6 +174,7 @@ export default function StartMenu({ id="nombre" placeholder="Nombre de usuario" onChange={handleChange} + disabled={loginLoading} spellCheck={false} required /> @@ -160,6 +190,7 @@ export default function StartMenu({ id="password" placeholder="Contraseña" onChange={handleChange} + disabled={loginLoading} spellCheck={false} required /> @@ -185,6 +216,7 @@ export default function StartMenu({