{{ t('I lost my password') }} {{ t('Create a new user account') }} - - {{ userName }} - {{ email }} + + {{ currentUser?.login }} + {{ currentUser?.mail }} {{ t('My account') }} authenticated && (isAuthFormOpened.value = false) +) function onToggleDropdownLang(isOpen: boolean) { isLangOpened.value = isOpen @@ -77,7 +67,7 @@ function onToggleDropdownAuth(isOpen: boolean) { class="flex items-center before:font-icons before:text-3xl before:w-16 text-primary uppercase h-full mr-3" :class="`before:content-${theme?.name}`" data-cy="selectedThemeIcon" - @click="onClick" + @click="toggleThemeGrid" > {{ t(`${theme?.name}`) diff --git a/src/services/auth/auth.service.spec.ts b/src/services/auth/auth.service.spec.ts new file mode 100644 index 00000000..cbb1ac63 --- /dev/null +++ b/src/services/auth/auth.service.spec.ts @@ -0,0 +1,103 @@ +import { afterEach, describe, expect, it, MockedFunction, vi } from 'vitest' +import { User, UserApi } from '@/stores/user-manager.store.model' +import { authenticate, logout, getUserInfo } from './auth.service' + +global.fetch = vi.fn() + +const mockUserApi: UserApi = { + login: 'the_user', + mail: 'the_user@test.com', + is_admin: true, + mymaps_role: 999, + role: 'admin', + role_id: 1, + sn: 'Dupont Marcel', + typeUtilisateur: 'prive', +} + +const resultUserInfo: User = { + login: 'the_user', + mail: 'the_user@test.com', + isAdmin: true, + mymapsRole: 999, + role: 'admin', + roleId: 1, + name: 'Dupont Marcel', + sn: 'Dupont Marcel', + typeUtilisateur: 'prive', +} + +const mockFetch = (response: any) => { + ;(fetch as MockedFunction).mockResolvedValueOnce( + response as unknown as Response + ) +} +const mockFetchError = () => + mockFetch({ + ok: false, + }) +const mockFetchUserApiSuccess = () => + mockFetch({ + ok: true, + json: vi.fn().mockResolvedValue(mockUserApi), + }) + +describe('Auth service', () => { + afterEach(() => { + vi.clearAllMocks() + }) + + describe('#authenticate', () => { + it('should authenticate user successfully and return user info', async () => { + mockFetchUserApiSuccess() + + const result = await authenticate('the_user', 'the_password') + expect(result).toStrictEqual(resultUserInfo) + }) + + it('should throw error when authentication fails', async () => { + mockFetchError() + + await expect(authenticate('the_user', 'the_password')).rejects.toThrow( + 'Error while trying to authenticate user' + ) + }) + }) + + describe('#logout', () => { + it('should logout user successfully', async () => { + mockFetch({ + ok: true, + text: vi.fn().mockResolvedValue('success'), + }) + + const result = await logout() + expect(result).toBe('success') + }) + + it('should throw error when logout fails', async () => { + mockFetchError() + + await expect(logout()).rejects.toThrow( + 'Error while trying to logout user' + ) + }) + }) + + describe('#getUserInfo', () => { + it('should get the user info', async () => { + mockFetchUserApiSuccess() + + const result = await getUserInfo() + expect(result).toStrictEqual(resultUserInfo) + }) + + it('should throw error when getUserInfo fails', async () => { + mockFetchError() + + await expect(getUserInfo()).rejects.toThrow( + 'Error while trying to get user info' + ) + }) + }) +}) diff --git a/src/services/auth/auth.service.ts b/src/services/auth/auth.service.ts new file mode 100644 index 00000000..dfeaf5e3 --- /dev/null +++ b/src/services/auth/auth.service.ts @@ -0,0 +1,106 @@ +import { User, UserApi } from '@/stores/user-manager.store.model' + +const LOGIN_URL = import.meta.env.VITE_LOGIN_URL +const LOGOUT_URL = import.meta.env.VITE_LOGOUT_URL +const USERINFO_URL = import.meta.env.VITE_USERINFO_URL + +/** + * Calls "/login" url to authenticate user + * @param userName The user's name, mandatory + * @param userPassword The user's password, mandatory + * @param isApp If the app is mobile app mode, false by default + * @returns The api returns user's info is succeeded + */ +export async function authenticate( + userName: string, + userPassword: string, + isApp = false +) { + const payload = new URLSearchParams({ + login: userName, + password: userPassword, + app: isApp ? 'true' : 'false', + }) + const response = await fetch(LOGIN_URL, { + method: 'POST', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', + }, + body: payload, + }) + + if (!response.ok) { + throw new Error('Error while trying to authenticate user') + } + + const data = await response.json() + + return mapUserApiToUser(data) +} + +/** + * Calls "/logout" url to log out the user + * @returns The api returns true if succeeded + */ +export async function logout() { + const response = await fetch(LOGOUT_URL) + + if (!response.ok) { + throw new Error('Error while trying to logout user') + } + + const data = await response.text() + + return data +} + +/** + * Calls "/getuserinfo" url to get user's info, the user needs to be authenticated first + * @returns The api returns user's info is succeeded + */ +export async function getUserInfo() { + const payload = new URLSearchParams({}) + const response = await fetch(USERINFO_URL, { + method: 'POST', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', + }, + body: payload, + }) + + const data = response.ok && (await response.json()) + + if (!data.login) { + throw new Error('Error while trying to get user info') + } + + return mapUserApiToUser(data) +} + +/** + * Transform User info returned by api to User model + * @param userApi The user info returned by the api + */ +function mapUserApiToUser(userApi: UserApi) { + const { + is_admin, + login, + mail, + mymaps_role, + role, + role_id, + sn, + typeUtilisateur, + } = userApi + return { + login, + mail, + isAdmin: is_admin, + mymapsRole: mymaps_role, + name: sn, + role, + roleId: role_id, + sn, + typeUtilisateur, + } +} diff --git a/src/services/state-persistor/state-persistor-app.service.ts b/src/services/state-persistor/state-persistor-app.service.ts index 08017383..69d8549a 100644 --- a/src/services/state-persistor/state-persistor-app.service.ts +++ b/src/services/state-persistor/state-persistor-app.service.ts @@ -2,7 +2,12 @@ import { watch, watchEffect, WatchStopHandle } from 'vue' import { storeToRefs } from 'pinia' import { useAppStore } from '@/stores/app.store' -import { SP_KEY_EMBEDDED, SP_KEY_LAYERS_OPEN } from './state-persistor.model' +import { + SP_KEY_APPLOGIN, + SP_KEY_EMBEDDED, + SP_KEY_LAYERS_OPEN, + SP_KEY_LOCALFORAGE, +} from './state-persistor.model' import { storageHelper } from './storage/storage.helper' class StatePersistorAppService { @@ -39,6 +44,7 @@ class StatePersistorAppService { restore() { this.restoreLayersOpen() this.restoreEmbeddedMode() // NB. don't persist embbeded mode, only do restore + this.restoreIsAppMode() } restoreEmbeddedMode() { @@ -57,6 +63,16 @@ class StatePersistorAppService { const { setLayersOpen } = useAppStore() setLayersOpen(layersOpen) } + + restoreIsAppMode() { + const { setIsApp } = useAppStore() + const isApp = + storageHelper.getValue(SP_KEY_LOCALFORAGE) === 'android' || + storageHelper.getValue(SP_KEY_LOCALFORAGE) === 'ios' || + storageHelper.getValue(SP_KEY_APPLOGIN) === 'yes' + + setIsApp(isApp) + } } export const statePersistorAppService = new StatePersistorAppService() diff --git a/src/stores/app.store.ts b/src/stores/app.store.ts index 72712014..58b62974 100644 --- a/src/stores/app.store.ts +++ b/src/stores/app.store.ts @@ -33,6 +33,11 @@ export const useAppStore = defineStore( ref(undefined) const drawToolbarOpen = ref(false) const isOffLine = ref(false) + const isApp = ref(false) // Is the app displayed for Android or Ios? + + function setIsApp(value: boolean) { + isApp.value = value + } function setLang(language: string) { lang.value = language @@ -121,6 +126,9 @@ export const useAppStore = defineStore( styleEditorOpenedSection, remoteLayersOpen, drawToolbarOpen, + isOffLine, + isApp, + setIsApp, setLang, setLayersOpen, setMyLayersTabOpen, @@ -130,7 +138,6 @@ export const useAppStore = defineStore( openStyleEditorPanel, closeStyleEditorPanel, setDrawToolbarOpen, - isOffLine, toggleMyMapsOpen, toggleThemeGrid, } diff --git a/src/stores/user-manager.store.model.ts b/src/stores/user-manager.store.model.ts new file mode 100644 index 00000000..4767a689 --- /dev/null +++ b/src/stores/user-manager.store.model.ts @@ -0,0 +1,22 @@ +export type User = { + login: string + mail: string + isAdmin: boolean // true if is a mymaps admin + mymapsRole?: number // The role used by mymaps + name?: string + role: string + roleId: number + sn: string + typeUtilisateur: string // user's type +} + +export type UserApi = { + is_admin: boolean + login: string + mail: string + mymaps_role: number + role: string + role_id: number + sn: string + typeUtilisateur: string +} diff --git a/src/stores/user-manager.store.ts b/src/stores/user-manager.store.ts new file mode 100644 index 00000000..d3692f58 --- /dev/null +++ b/src/stores/user-manager.store.ts @@ -0,0 +1,48 @@ +import { computed, Ref, ref } from 'vue' +import { acceptHMRUpdate, defineStore, storeToRefs } from 'pinia' + +import { useAppStore } from '@/stores/app.store' +import { User } from './user-manager.store.model' + +export const useUserManagerStore = defineStore( + 'user-manager', + () => { + const appStore = useAppStore() + const { isOffLine } = storeToRefs(appStore) + const currentUser: Ref = ref(undefined) + const authenticated = computed(() => isOffLine.value || !!currentUser.value) // Mimic v3 when broadcasting "authenticated" + + /** + * True if user is authenticated or if app is offline mode, false otherwise. + */ + function isAuthenticated() { + return authenticated.value + } + + function setCurrentUser(user: User) { + if (user.login) { + currentUser.value = user + } else { + clearUser() + throw new Error('Invalid username or password') + } + } + + function clearUser() { + currentUser.value = undefined + } + + return { + authenticated, + currentUser, + clearUser, + isAuthenticated, + setCurrentUser, + } + }, + {} +) + +if (import.meta.hot) { + import.meta.hot.accept(acceptHMRUpdate(useUserManagerStore, import.meta.hot)) +}