loan/user-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implement error pages

Browse Source
This commit is contained in:
Amin Ghasempoor
2023-08-05 14:39:23 +03:30
parent c2751ea0ff
commit a613c5f17d
10 changed files with 226 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/errors/403.jsx Normal file
View File

@@ -0,0 +1,48 @@
import CenterLayout from "@/layouts/CenterLayout";
import FullPageLayout from "@/layouts/FullPageLayout";
import {Box, Button, Container, Stack, Typography} from "@mui/material";
import {NextLinkComposed} from "@/core/components/LinkRouting";
import {useTranslations} from "next-intl";
import Image from "next/image";
import TitlePage from "@/core/components/TitlePage";
const UnAuthorizedComponent = () => {
const t = useTranslations();
return (
<>
<TitlePage text="Titles.title_custom_403"/>
<FullPageLayout sx={{p: 1}}>
<CenterLayout>
<Container maxWidth="sm">
<Stack spacing={4} sx={{p: 4}}>
<Box sx={{position: "relative", width: "100%", height: 200}}>
<Image
fill
src="/images/403.svg"
alt={t("app_name")}
priority
/>
</Box>
<Typography margin={2} variant="h6" textAlign="center">
{t("ErrorPage.custom_403")}
</Typography>
<Button
variant="contained"
component={NextLinkComposed}
to={{
pathname: "/",
}}
>
{t("ErrorPage.link_routing_back_to")}{" "}
{t("ErrorPage.link_routing_main_page")}
</Button>
</Stack>
</Container>
</CenterLayout>
</FullPageLayout>
</>
);
};
export default UnAuthorizedComponent;

48
src/components/errors/404.jsx Normal file
View File

@@ -0,0 +1,48 @@
import CenterLayout from "@/layouts/CenterLayout";
import FullPageLayout from "@/layouts/FullPageLayout";
import {Box, Button, Container, Stack, Typography} from "@mui/material";
import {NextLinkComposed} from "@/core/components/LinkRouting";
import {useTranslations} from "next-intl";
import Image from "next/image";
import TitlePage from "@/core/components/TitlePage";
const NotFoundComponent = () => {
const t = useTranslations();
return (
<>
<TitlePage text="Titles.title_custom_404"/>
<FullPageLayout sx={{p: 1}}>
<CenterLayout>
<Container maxWidth="sm">
<Stack spacing={4} sx={{p: 4}}>
<Box sx={{position: "relative", width: "100%", height: 200}}>
<Image
fill
src="/images/404.svg"
alt={t("app_name")}
priority
/>
</Box>
<Typography margin={2} variant="h6" textAlign="center">
{t("ErrorPage.custom_404")}
</Typography>
<Button
variant="contained"
component={NextLinkComposed}
to={{
pathname: "/",
}}
>
{t("ErrorPage.link_routing_back_to")}{" "}
{t("ErrorPage.link_routing_main_page")}
</Button>
</Stack>
</Container>
</CenterLayout>
</FullPageLayout>
</>
);
};
export default NotFoundComponent;

48
src/components/errors/500.jsx Normal file
View File

@@ -0,0 +1,48 @@
import CenterLayout from "@/layouts/CenterLayout";
import FullPageLayout from "@/layouts/FullPageLayout";
import {Box, Button, Container, Stack, Typography} from "@mui/material";
import {NextLinkComposed} from "@/core/components/LinkRouting";
import {useTranslations} from "next-intl";
import Image from "next/image";
import TitlePage from "@/core/components/TitlePage";
const ServerErrorComponent = () => {
const t = useTranslations();
return (
<>
<TitlePage text="Titles.title_custom_500"/>
<FullPageLayout sx={{p: 1}}>
<CenterLayout>
<Container maxWidth="sm">
<Stack spacing={4} sx={{p: 4}}>
<Box sx={{position: "relative", width: "100%", height: 200}}>
<Image
fill
src="/images/500.svg"
alt={t("app_name")}
priority
/>
</Box>
<Typography margin={2} variant="h6" textAlign="center">
{t("ErrorPage.custom_500")}
</Typography>
<Button
variant="contained"
component={NextLinkComposed}
to={{
pathname: "/",
}}
>
{t("ErrorPage.link_routing_back_to")}{" "}
{t("ErrorPage.link_routing_main_page")}
</Button>
</Stack>
</Container>
</CenterLayout>
</FullPageLayout>
</>
);
};
export default ServerErrorComponent;

24
src/pages/403.jsx Normal file
View File

@@ -0,0 +1,24 @@
import {useEffect, useState} from "react";
import {useRouter} from "next/router";
import {NextIntlProvider} from "next-intl";
import UnAuthorizedComponent from "@/components/errors/403";
export default function Custom404() {
const router = useRouter()
const [messages, setMessages] = useState(null)
useEffect(() => {
const fetch = async () => {
const tempMessages = (await import(`&/locales/${router.locale}/app.json`)).default
setMessages(tempMessages)
}
fetch()
}, []);
if (!messages) return
return (
<NextIntlProvider messages={messages}>
<UnAuthorizedComponent/>
</NextIntlProvider>
);
}

28
src/pages/404.jsx
View File

@@ -1,13 +1,25 @@
import NotFoundComponent from "@/components/NotFound";
import Head from "next/head";
import {useEffect, useState} from "react";
import {useRouter} from "next/router";
import {NextIntlProvider} from "next-intl";
import NotFoundComponent from "@/components/errors/404";
export default function Custom404() {
const router = useRouter()
const [messages, setMessages] = useState(null)
useEffect(() => {
const fetch = async () => {
const tempMessages = (await import(`&/locales/${router.locale}/app.json`)).default
setMessages(tempMessages)
}
fetch()
}, []);
if (!messages) return
export default function NotFound() {
return (
<>
<Head>
<title>یافت نشد</title>
</Head>
<NextIntlProvider messages={messages}>
<NotFoundComponent/>
</>
</NextIntlProvider>
);
}

24
src/pages/500.jsx Normal file
View File

@@ -0,0 +1,24 @@
import {useEffect, useState} from "react";
import {useRouter} from "next/router";
import {NextIntlProvider} from "next-intl";
import ServerErrorComponent from "@/components/errors/500";
export default function Custom500() {
const router = useRouter()
const [messages, setMessages] = useState(null)
useEffect(() => {
const fetch = async () => {
const tempMessages = (await import(`&/locales/${router.locale}/app.json`)).default
setMessages(tempMessages)
}
fetch()
}, []);
if (!messages) return
return (
<NextIntlProvider messages={messages}>
<ServerErrorComponent/>
</NextIntlProvider>
);
}