From 6c770ed76bdc25bc35493d4686d56a08ef97a693 Mon Sep 17 00:00:00 2001 From: Sam Date: Sun, 15 Aug 2021 10:50:39 +0200 Subject: [PATCH] Client - error message style (wip) Need some updates api side. --- .../src/components/Common/ErrorMessage.vue | 41 +++++++++++++++++++ .../components/User/LoginOrRegisterForm.vue | 15 ++++--- fittrackee_client/src/locales/en/api.json | 10 +++++ fittrackee_client/src/locales/en/en.ts | 2 + fittrackee_client/src/locales/fr/api.json | 10 +++++ fittrackee_client/src/locales/fr/fr.ts | 2 + fittrackee_client/src/scss/colors.scss | 3 ++ .../src/store/modules/root/enums.ts | 6 +-- .../src/store/modules/root/getters.ts | 4 +- .../src/store/modules/root/interfaces.ts | 6 ++- .../src/store/modules/root/mutations.ts | 10 ++--- .../src/store/modules/root/state.ts | 2 +- .../src/store/modules/root/types.ts | 7 +++- .../src/store/modules/user/actions.ts | 6 +-- fittrackee_client/src/utils.ts | 17 ++++++-- 15 files changed, 114 insertions(+), 27 deletions(-) create mode 100644 fittrackee_client/src/components/Common/ErrorMessage.vue create mode 100644 fittrackee_client/src/locales/en/api.json create mode 100644 fittrackee_client/src/locales/fr/api.json diff --git a/fittrackee_client/src/components/Common/ErrorMessage.vue b/fittrackee_client/src/components/Common/ErrorMessage.vue new file mode 100644 index 00000000..ab520d3a --- /dev/null +++ b/fittrackee_client/src/components/Common/ErrorMessage.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/fittrackee_client/src/components/User/LoginOrRegisterForm.vue b/fittrackee_client/src/components/User/LoginOrRegisterForm.vue index ce51edf1..af29fd0f 100644 --- a/fittrackee_client/src/components/User/LoginOrRegisterForm.vue +++ b/fittrackee_client/src/components/User/LoginOrRegisterForm.vue @@ -36,9 +36,7 @@ -

- {{ errorMessage }} -

+ @@ -51,9 +49,13 @@ import { IFormData } from '@/interfaces' import { ROOT_STORE, USER_STORE } from '@/store/constants' import { useStore } from '@/use/useStore' + import ErrorMessage from '@/components/Common/ErrorMessage.vue' export default defineComponent({ name: 'LoginForm', + components: { + ErrorMessage, + }, props: { action: { type: String, @@ -73,8 +75,8 @@ const buttonText: ComputedRef = computed(() => props.action === 'register' ? 'buttons.REGISTER' : 'buttons.LOGIN' ) - const errorMessage: ComputedRef = computed( - () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGE] + const errorMessages: ComputedRef = computed( + () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES] ) function onSubmit(actionType: string) { @@ -87,7 +89,7 @@ return { t, buttonText, - errorMessage, + errorMessages, formData, onSubmit, } @@ -119,6 +121,7 @@ @media screen and (max-width: $medium-limit) { height: auto; + margin-bottom: 50px; } } diff --git a/fittrackee_client/src/locales/en/api.json b/fittrackee_client/src/locales/en/api.json new file mode 100644 index 00000000..84575f56 --- /dev/null +++ b/fittrackee_client/src/locales/en/api.json @@ -0,0 +1,10 @@ +{ + "ERROR": { + "UNKNOWN": "Error. Please try again or contact the administrator.", + "Invalid credentials": "Invalid credentials.", + "Password and password confirmation don't match": "Password and password confirmation don't match.", + "Password: 8 characters required": "Password: 8 characters required.", + "Username: 3 to 12 characters required": "Username: 3 to 12 characters required.", + "Valid email must be provided": "Valid email must be provided." + } +} \ No newline at end of file diff --git a/fittrackee_client/src/locales/en/en.ts b/fittrackee_client/src/locales/en/en.ts index 1364a04c..f2628784 100644 --- a/fittrackee_client/src/locales/en/en.ts +++ b/fittrackee_client/src/locales/en/en.ts @@ -1,4 +1,5 @@ import AdministrationTranslations from './administration.json' +import ApiTranslations from './api.json' import ButtonsTranslations from './buttons.json' import CommonTranslations from './common.json' import DashboardTranslations from './dashboard.json' @@ -9,6 +10,7 @@ import WorkoutsTranslations from './workouts.json' export default { administration: AdministrationTranslations, + api: ApiTranslations, buttons: ButtonsTranslations, common: CommonTranslations, dashboard: DashboardTranslations, diff --git a/fittrackee_client/src/locales/fr/api.json b/fittrackee_client/src/locales/fr/api.json new file mode 100644 index 00000000..3029df08 --- /dev/null +++ b/fittrackee_client/src/locales/fr/api.json @@ -0,0 +1,10 @@ +{ + "ERROR": { + "UNKNOWN": "Erreur. Veuillez réessayer ou contacter l'administrateur.", + "Invalid credentials": "Identifiants invalides.", + "Password and password confirmation don't match": "Les mots de passe saisis sont différents.", + "Password: 8 characters required": "8 caractères minimum pour le mot de passe.", + "Username: 3 to 12 characters required": "3 à 12 caractères requis pour le nom.", + "Valid email must be provided": "L'email fourni n'est pas valide." + } +} \ No newline at end of file diff --git a/fittrackee_client/src/locales/fr/fr.ts b/fittrackee_client/src/locales/fr/fr.ts index 1364a04c..f2628784 100644 --- a/fittrackee_client/src/locales/fr/fr.ts +++ b/fittrackee_client/src/locales/fr/fr.ts @@ -1,4 +1,5 @@ import AdministrationTranslations from './administration.json' +import ApiTranslations from './api.json' import ButtonsTranslations from './buttons.json' import CommonTranslations from './common.json' import DashboardTranslations from './dashboard.json' @@ -9,6 +10,7 @@ import WorkoutsTranslations from './workouts.json' export default { administration: AdministrationTranslations, + api: ApiTranslations, buttons: ButtonsTranslations, common: CommonTranslations, dashboard: DashboardTranslations, diff --git a/fittrackee_client/src/scss/colors.scss b/fittrackee_client/src/scss/colors.scss index 72ca3a03..3fc41bf9 100644 --- a/fittrackee_client/src/scss/colors.scss +++ b/fittrackee_client/src/scss/colors.scss @@ -14,4 +14,7 @@ --footer-border-color: #ebeef3; --footer-color: #8b8c8c; + --error-background-color: #ffd2d2; + --error-color: #db1924; + } \ No newline at end of file diff --git a/fittrackee_client/src/store/modules/root/enums.ts b/fittrackee_client/src/store/modules/root/enums.ts index 557bcedf..71ba92f1 100644 --- a/fittrackee_client/src/store/modules/root/enums.ts +++ b/fittrackee_client/src/store/modules/root/enums.ts @@ -1,10 +1,10 @@ export enum RootGetters { - ERROR_MESSAGE = 'ERROR_MESSAGE', + ERROR_MESSAGES = 'ERROR_MESSAGES', LANGUAGE = 'LANGUAGE', } export enum RootMutations { - EMPTY_ERROR_MESSAGE = 'EMPTY_ERROR_MESSAGE', - SET_ERROR_MESSAGE = 'SET_ERROR_MESSAGE', + EMPTY_ERROR_MESSAGES = 'EMPTY_ERROR_MESSAGES', + SET_ERROR_MESSAGES = 'SET_ERROR_MESSAGES', UPDATE_LANG = 'UPDATE_LANG', } diff --git a/fittrackee_client/src/store/modules/root/getters.ts b/fittrackee_client/src/store/modules/root/getters.ts index 41262386..670fa57d 100644 --- a/fittrackee_client/src/store/modules/root/getters.ts +++ b/fittrackee_client/src/store/modules/root/getters.ts @@ -4,8 +4,8 @@ import { ROOT_STORE } from '@/store/constants' import { IRootState, IRootGetters } from '@/store/modules/root/interfaces' export const getters: GetterTree & IRootGetters = { - [ROOT_STORE.GETTERS.ERROR_MESSAGE]: (state: IRootState) => { - return state.errorMessage + [ROOT_STORE.GETTERS.ERROR_MESSAGES]: (state: IRootState) => { + return state.errorMessages }, [ROOT_STORE.GETTERS.LANGUAGE]: (state: IRootState) => { return state.language diff --git a/fittrackee_client/src/store/modules/root/interfaces.ts b/fittrackee_client/src/store/modules/root/interfaces.ts index 82dab734..15724d46 100644 --- a/fittrackee_client/src/store/modules/root/interfaces.ts +++ b/fittrackee_client/src/store/modules/root/interfaces.ts @@ -3,10 +3,12 @@ import { ROOT_STORE } from '@/store/constants' export interface IRootState { root: boolean language: string - errorMessage: string | null + errorMessages: string | string[] | null } export interface IRootGetters { - [ROOT_STORE.GETTERS.ERROR_MESSAGE](state: IRootState): string | null + [ROOT_STORE.GETTERS.ERROR_MESSAGES]( + state: IRootState + ): string | string[] | null [ROOT_STORE.GETTERS.LANGUAGE](state: IRootState): string } diff --git a/fittrackee_client/src/store/modules/root/mutations.ts b/fittrackee_client/src/store/modules/root/mutations.ts index 1f5b1e28..d23a05e5 100644 --- a/fittrackee_client/src/store/modules/root/mutations.ts +++ b/fittrackee_client/src/store/modules/root/mutations.ts @@ -5,14 +5,14 @@ import { IRootState } from '@/store/modules/root/interfaces' import { TRootMutations } from '@/store/modules/root/types' export const mutations: MutationTree & TRootMutations = { - [ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGE](state: IRootState) { - state.errorMessage = null + [ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES](state: IRootState) { + state.errorMessages = null }, - [ROOT_STORE.MUTATIONS.SET_ERROR_MESSAGE]( + [ROOT_STORE.MUTATIONS.SET_ERROR_MESSAGES]( state: IRootState, - errorMessage: string + errorMessages: string ) { - state.errorMessage = errorMessage + state.errorMessages = errorMessages }, [ROOT_STORE.MUTATIONS.UPDATE_LANG](state: IRootState, language: string) { state.language = language diff --git a/fittrackee_client/src/store/modules/root/state.ts b/fittrackee_client/src/store/modules/root/state.ts index 89c9f9ac..4074f50a 100644 --- a/fittrackee_client/src/store/modules/root/state.ts +++ b/fittrackee_client/src/store/modules/root/state.ts @@ -3,5 +3,5 @@ import { IRootState } from '@/store/modules/root/interfaces' export const state: IRootState = { root: true, language: 'en', - errorMessage: null, + errorMessages: null, } diff --git a/fittrackee_client/src/store/modules/root/types.ts b/fittrackee_client/src/store/modules/root/types.ts index cdc7e4c1..3317791f 100644 --- a/fittrackee_client/src/store/modules/root/types.ts +++ b/fittrackee_client/src/store/modules/root/types.ts @@ -4,8 +4,11 @@ import { ROOT_STORE } from '@/store/constants' import { IRootGetters, IRootState } from '@/store/modules/root/interfaces' export type TRootMutations = { - [ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGE](state: S): void - [ROOT_STORE.MUTATIONS.SET_ERROR_MESSAGE](state: S, errorMessage: string): void + [ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES](state: S): void + [ROOT_STORE.MUTATIONS.SET_ERROR_MESSAGES]( + state: S, + errorMessages: string + ): void [ROOT_STORE.MUTATIONS.UPDATE_LANG](state: S, language: string): void } diff --git a/fittrackee_client/src/store/modules/user/actions.ts b/fittrackee_client/src/store/modules/user/actions.ts index 2b220b7e..8035f80a 100644 --- a/fittrackee_client/src/store/modules/user/actions.ts +++ b/fittrackee_client/src/store/modules/user/actions.ts @@ -30,7 +30,7 @@ export const actions: ActionTree & IUserActions = { [USER_STORE.ACTIONS.GET_USER_PROFILE]( context: ActionContext ): void { - context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGE) + context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES) authApi .get('auth/profile') .then((res) => { @@ -49,7 +49,7 @@ export const actions: ActionTree & IUserActions = { context: ActionContext, data: ILoginOrRegisterData ): void { - context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGE) + context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES) api .post(`/auth/${data.actionType}`, data.formData) .then((res) => { @@ -71,7 +71,7 @@ export const actions: ActionTree & IUserActions = { ): void { localStorage.removeItem('authToken') context.commit(USER_STORE.MUTATIONS.CLEAR_AUTH_USER_TOKEN) - context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGE) + context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES) router.push('/login') }, } diff --git a/fittrackee_client/src/utils.ts b/fittrackee_client/src/utils.ts index 142b9fdd..8bb14389 100644 --- a/fittrackee_client/src/utils.ts +++ b/fittrackee_client/src/utils.ts @@ -10,12 +10,15 @@ export const getApiUrl = (): string => { : 'http://localhost:5000/api' } +// TODO: update api error messages to remove these workarounds +const removeLastEndOfLine = (text: string): string => text.replace(/\n$/gm, '') +const removeLastDot = (text: string): string => text.replace(/\.$/gm, '') export const handleError = ( context: ActionContext, error: AxiosError | null, - msg = 'error.UNKNOWN' + msg = 'UNKNOWN' ): void => { - const errorMessage = !error + let errorMessages = !error ? msg : error.response ? error.response.data.message @@ -24,5 +27,13 @@ export const handleError = ( : error.message ? error.message : msg - context.commit(ROOT_STORE.MUTATIONS.SET_ERROR_MESSAGE, errorMessage) + errorMessages = removeLastEndOfLine(errorMessages) + context.commit( + ROOT_STORE.MUTATIONS.SET_ERROR_MESSAGES, + errorMessages.includes('\n') + ? errorMessages + .split('\n') + .map((m: string) => `api.ERROR.${removeLastDot(m)}`) + : `api.ERROR.${removeLastDot(errorMessages)}` + ) }