CU-8692r3312_Create-page-Not-found_Patryk-Kosiski

frontend/src/Pages/NotFound/NotFound.tsx

@@ -0,0 +1,24 @@
+import {Button, Center, Group, Image, Stack, Text} from "@mantine/core";
+import photo from "../../Assets/NotFound/cat-error.gif";
+import {ContainerVhVw} from "../../Components/ContainerVhVw";
+import {useNavigate} from "react-router-dom";
+import {useTranslation} from "react-i18next";
+
+export const NotFound = () => {
+  const navigate = useNavigate();
+  const {t} = useTranslation('notfound');
+
+  return (
+    <ContainerVhVw vh={100} vw={99}>
+      <Center h={"inherit"}>
+        <Stack align={"center"}>
+          <Text size={32} weight={700}>{t('label')}</Text>
+          <Group align={"center"} spacing={100} >
+            <Image maw={240} mx="auto" radius="md" src={photo} alt="Cat error 404"/>
+            <Button color={'pink'} size={"xl"} variant="light" onClick={() => navigate("/")}>{t('button')}</Button>
+          </Group>
+        </Stack>
+      </Center>
+    </ContainerVhVw>
+  );
+}

frontend/src/Pages/NotFound/index.tsx

@@ -0,0 +1 @@
+export * from './NotFound';

frontend/src/Pages/Root/Root.tsx

@@ -2,6 +2,7 @@ import {Route, Routes} from "react-router-dom";
 import { Layout } from "../../Components/Layout";
 import { MainPage } from "../MainPage";
 import {Login} from "../Login";
+import {NotFound} from "../NotFound";
 
 export const Root = () => {
   return(
@@ -12,7 +13,7 @@ export const Root = () => {
         {/*<Route path="/form" element={ <Form/>} />*/}
         {/*<Route path="/admin" element={ <Admin/>} />*/}
       </Route>
-      {/*<Route path="*" element={ <PageNotFound/> }/>*/}
+      <Route path="*" element={ <NotFound/> }/>
     </Routes>
   );
 }

frontend/src/Services/Utils/i18nInitializer.tsx

@@ -2,9 +2,11 @@ import i18next from "i18next";
 // english translations
 import enLogin from "../../Translations/en/login.json";
 import enFooter from "../../Translations/en/footer.json";
+import enNotFound from "../../Translations/en/notfound.json";
 // polish translations
 import plLogin from "../../Translations/pl/login.json";
 import plFooter from "../../Translations/pl/footer.json";
+import plNotFound from "../../Translations/pl/notfound.json";
 
 export const i18nInitializer = () => {
   return i18next.init({
@@ -14,10 +16,12 @@ export const i18nInitializer = () => {
       en: {
         login: enLogin,
         footer: enFooter,
+        notfound: enNotFound,
       },
       pl: {
         login: plLogin,
         footer: plFooter,
+        notfound: plNotFound,
       }
     }
   });

frontend/src/Translations/en/notfound.json

@@ -0,0 +1,4 @@
+{
+	"button": "Go to main page",
+	"label": "Sorry but page that you are looking for does not exist :("
+}

frontend/src/Translations/main.babel

@@ -249,6 +249,41 @@
 							</folder_node>
 						</children>
 					</file_node>
+					<file_node>
+						<name>notfound</name>
+						<children>
+							<concept_node>
+								<name>button</name>
+								<description/>
+								<comment/>
+								<translations>
+									<translation>
+										<language>en-US</language>
+										<approved>true</approved>
+									</translation>
+									<translation>
+										<language>pl-PL</language>
+										<approved>true</approved>
+									</translation>
+								</translations>
+							</concept_node>
+							<concept_node>
+								<name>label</name>
+								<description/>
+								<comment/>
+								<translations>
+									<translation>
+										<language>en-US</language>
+										<approved>true</approved>
+									</translation>
+									<translation>
+										<language>pl-PL</language>
+										<approved>true</approved>
+									</translation>
+								</translations>
+							</concept_node>
+						</children>
+					</file_node>
 				</children>
 			</package_node>
 		</children>

frontend/src/Translations/pl/notfound.json

@@ -0,0 +1,4 @@
+{
+	"button": "Przejdź do strony głównej",
+	"label": "Przykro nam, ale strona, której szukasz, nie istnieje :("
+}