diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json index 5f4a1c03..66820be3 100644 --- a/frontend/src/i18n/en/translation.json +++ b/frontend/src/i18n/en/translation.json @@ -1,8 +1,8 @@ { "nav": { "profile": "Profile", - "login": "Login", - "logout": "Logout", + "login": "Log in", + "logout": "Log out", "accountSwitch": "Switch Account", "theme": "Theme", "dark": "Dark", @@ -187,7 +187,7 @@ "error": { "title": "Error", "subtitle": "Something went wrong, please try again later", - "homepage": "Back Home", + "back": "Go back", "403_message": "you are not authorized to access this page.", "404_message": "Sorry, the page you visited does not exist.", "500_message": "Sorry, Something went wrong" diff --git a/frontend/src/i18n/nl/translation.json b/frontend/src/i18n/nl/translation.json index 30526257..5ce0b91e 100644 --- a/frontend/src/i18n/nl/translation.json +++ b/frontend/src/i18n/nl/translation.json @@ -192,7 +192,7 @@ "error": { "title": "Fout", "subtitle": "Er ging iets mis, probeer het later opnieuw.", - "homepage": "Naar Start", + "back": "Keer terug", "403_message": "Je bent niet bevoegd om deze pagina te bezoeken.", "404_message" : "Sorry, de pagina die je bezocht bestaat niet.", "500_message": "Sorry, er ging iets mis." diff --git a/frontend/src/pages/error/Error.tsx b/frontend/src/pages/error/Error.tsx index 332121c4..bd99a5f6 100644 --- a/frontend/src/pages/error/Error.tsx +++ b/frontend/src/pages/error/Error.tsx @@ -1,22 +1,22 @@ -import React from "react"; -import { AppRoutes } from "../../@types/routes" -import {useTranslation} from "react-i18next"; -import {Button, Result, Space, Typography} from "antd"; -import { Link, useNavigate } from "react-router-dom"; - +import React from "react"; +import { useTranslation } from "react-i18next"; +import { Button, Result, Space, Typography } from "antd"; +import { useNavigate } from "react-router-dom"; +import { AxiosError } from "axios"; interface ErrorPageProps { errorCode?: number; errorMessage?: string; + axiosError?: AxiosError; } -const Error: React.FC = ({ errorCode, errorMessage }) => { - const { t } = useTranslation() +const Error: React.FC = ({ errorCode, errorMessage, axiosError }) => { + const { t } = useTranslation(); const { Title, Text } = Typography; - const navigate = useNavigate() + const navigate = useNavigate(); - let title:string = ""; - let status: "403" | "404" | "500" = "404"; + let title: string + let status: "403" | "404" | "500" = "404"; // Mapping van errorCode naar status const statusMapping: { [key: number]: "403" | "404" | "500" } = { @@ -25,27 +25,34 @@ const Error: React.FC = ({ errorCode, errorMessage }) => { 500: "500" }; - const textMapping: { [key: number]: string} = { + const textMapping: { [key: number]: string } = { 404: t("error.404_message"), 403: t("error.403_message"), 500: t("error.500_message") + }; + + // If axiosError was provided, put error Info into the variables + if(axiosError){ + errorCode = axiosError.response?.status || undefined; + if(axiosError.response !== undefined){ + errorMessage = axiosError.response.data?.toString() || undefined + } } - // Add default message to error page when no error message was provided - if(errorMessage === undefined){ - if(errorCode !== undefined){ + // add default message to error page when no error message was provided + if (errorMessage === undefined) { + if (errorCode !== undefined) { errorMessage = textMapping[errorCode] || t("error.subtitle"); - }else{ + } else { errorMessage = t("error.subtitle"); } } // Add default error title if no error code was provided, otherwise set it to error code - if(errorCode === undefined){ - title = t("error.title") - - }else{ - title = errorCode.toString() - status = statusMapping[errorCode] || "404" + if (errorCode === undefined) { + title = t("error.title"); + } else { + title = errorCode.toString(); + status = statusMapping[errorCode] || "404"; } return ( @@ -53,11 +60,11 @@ const Error: React.FC = ({ errorCode, errorMessage }) => { {title} {errorMessage} - - + + ); -} +}; export default Error; diff --git a/frontend/src/pages/index/landing/Navbar.tsx b/frontend/src/pages/index/landing/Navbar.tsx index 7eece94e..2d2f4bda 100644 --- a/frontend/src/pages/index/landing/Navbar.tsx +++ b/frontend/src/pages/index/landing/Navbar.tsx @@ -1,10 +1,12 @@ -import { Space, Typography } from "antd" -import { Link, useNavigate } from "react-router-dom" +import { Typography } from "antd" +import { useNavigate } from "react-router-dom" import LanguageDropdown from "../../../components/LanguageDropdown" import { FC } from "react" +import {useTranslation} from "react-i18next"; const Navbar: FC<{ onLogin: () => void }> = ({ onLogin }) => { const navigate = useNavigate() + const { t } = useTranslation() return (
@@ -27,7 +29,7 @@ const Navbar: FC<{ onLogin: () => void }> = ({ onLogin }) => { className="landing-page-btn" onClick={onLogin} > - Aanmelden + {t("nav.login")}