Skip to content

Commit fb9df56

Browse files
Tishasoumya-02Tishasoumya-02
committed
create special routes
1 parent 9c88064 commit fb9df56

File tree

6 files changed

+118
-28
lines changed

6 files changed

+118
-28
lines changed

‎apps/seven/app/root.tsx

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,12 @@ import {
1111
installServerMiddleware,
1212
otherResources,
1313
} from './middleware.server';
14-
14+
import Forbidden from '@plone/cmsui/routes/forbidden';
15+
import Unauthorized from '@plone/cmsui/routes/unauthorized';
16+
import NotFound from '@plone/cmsui/routes/notfound';
17+
import ConnectionRefused from '@plone/cmsui/routes/connection-refused';
1518
// eslint-disable-next-line import/no-unresolved
1619
import stylesheet from '../addons.styles.css?url';
17-
1820
export const unstable_middleware = [
1921
installServerMiddleware,
2022
otherResources,
@@ -81,12 +83,23 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
8183
let message = 'Oops!';
8284
let details = 'An unexpected error occurred.';
8385
let stack: string | undefined;
86+
let ErrorContent: React.ReactNode;
87+
8488
if (isRouteErrorResponse(error)) {
85-
message = error.status === 404 ? '404' : 'Error';
86-
details =
87-
error.status === 404
88-
? 'The requested page could not be found.'
89-
: error.statusText || details;
89+
switch (error.status) {
90+
case 403:
91+
ErrorContent = <Forbidden />;
92+
break;
93+
case 404:
94+
ErrorContent = <NotFound />;
95+
break;
96+
case 500:
97+
ErrorContent = <ConnectionRefused />;
98+
break;
99+
default:
100+
ErrorContent = <h1>404 error</h1>;
101+
break;
102+
}
90103
} else if (import.meta.env.DEV && error && error instanceof Error) {
91104
details = error.message;
92105
stack = error.stack;
@@ -99,17 +112,7 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
99112
<meta name="viewport" content="width=device-width, initial-scale=1" />
100113
<meta name="mobile-web-app-capable" content="yes" />
101114
</head>
102-
<body>
103-
<main className="container mx-auto p-4 pt-16">
104-
<h1>{message}</h1>
105-
<p>{details}</p>
106-
{stack && (
107-
<pre className="w-full overflow-x-auto p-4">
108-
<code>{stack}</code>
109-
</pre>
110-
)}
111-
</main>
112-
</body>
115+
<body>{ErrorContent}</body>
113116
</html>
114117
);
115118
}

‎packages/cmsui/locales/en/common.json

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,19 @@
11
{
22
"cmsui": {
33
"edit": "Edit",
4-
"save": "Save"
4+
"save": "Save",
5+
"forbidden": "Forbidden",
6+
"forbiddenDescription": "We apologize for the inconvenience, but you don't have permissions on this resource",
7+
"unauthorized": "Unauthorized",
8+
"login": "Login",
9+
"loginRequired": "You are trying to access a protected resource, please first ",
10+
"siteAdminstration": "Site Adminstration",
11+
"thankyou": "Thank You",
12+
"SiteAdminstration": "If you are certain you have the correct web address but are encountering an error, please contact the ",
13+
"connectionRefused": "Connection refused",
14+
"connectionRefusedDescription": "The backend is not responding, please check if you have started Plone, check your project's configuration object apiPath (or if you are using the internal proxy, devProxyToApiPath) or the RAZZLE_API_PATH Volto's environment variable.",
15+
"connectionRefusedProduction": "We apologize for the inconvenience, but the backend of the site you are accessing is not available right now. Please, try again later",
16+
"notFound": "This page does not seem to exist…",
17+
"notFoundDescription": "We apologize for the inconvenience, but the page you are trying to access does not exist or has been moved. Please check the URL or return to the homepage."
518
}
619
}

‎packages/cmsui/routes/connection-refused.tsx

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,40 @@
1-
import { ErrorBoundary } from 'seven/app/root';
1+
import config from '@plone/registry';
2+
import { Container } from '@plone/components/tailwind';
3+
import { useTranslation } from 'react-i18next';
24

35
const ConnectionRefused = () => {
4-
return <ErrorBoundary />;
6+
const { t } = useTranslation();
7+
8+
return (
9+
<Container className="flex min-h-screen flex-col items-center justify-center font-sans text-xl">
10+
<h1 className="mb-6 text-center leading-10">
11+
{t('cmsui.connectionRefused')}
12+
{process.env.NODE_ENV === 'development' && (
13+
<>
14+
<br />
15+
<a
16+
className="text-blue-600 hover:underline"
17+
href={config.settings.apiPath}
18+
>
19+
{config.settings.apiPath}
20+
</a>
21+
</>
22+
)}
23+
</h1>
24+
{process.env.NODE_ENV === 'development' && (
25+
<p className="mx-auto mb-5 w-[475px] text-center">
26+
{t('cmsui.connectionRefusedDescription')}
27+
</p>
28+
)}
29+
{process.env.NODE_ENV !== 'development' && (
30+
<>
31+
<p className="mx-auto mb-5 w-[475px] text-center">
32+
{t('cmsui.connectionRefusedProduction')}
33+
</p>
34+
<p className="text-center">{t('thankyou')}</p>
35+
</>
36+
)}
37+
</Container>
38+
);
539
};
640
export default ConnectionRefused;

‎packages/cmsui/routes/forbidden.tsx

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
1-
import { ErrorBoundary } from 'seven/app/root';
1+
import { Container } from '@plone/components/tailwind';
2+
import { useTranslation } from 'react-i18next';
23

34
const Forbidden = () => {
4-
return <ErrorBoundary />;
5+
const { t } = useTranslation();
6+
return (
7+
<Container>
8+
<div>
9+
<h1>{t('cmsui.forbidden')}</h1>
10+
<p>{t('cmsui.forbiddenDescription')}</p>
11+
</div>
12+
</Container>
13+
);
514
};
615
export default Forbidden;

‎packages/cmsui/routes/notfound.tsx

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,21 @@
1-
import { ErrorBoundary } from 'seven/app/root';
1+
import { Container } from '@plone/components/tailwind';
2+
import { useTranslation } from 'react-i18next';
3+
import { NavLink } from 'react-router';
24

35
const NotFound = () => {
4-
return <ErrorBoundary />;
6+
const { t } = useTranslation();
7+
return (
8+
<Container>
9+
<div>
10+
<h1>{t('cmsui.notFound')}</h1>
11+
<p>{t('cmsui.notFoundDescription')}</p>
12+
<p>
13+
{t('cmsui.SiteAdminstration')}
14+
<NavLink to="/contact-form">{t('cmsui.siteAdminstration')}</NavLink>
15+
</p>
16+
<p>{t('cmsui.thankyou')}</p>
17+
</div>
18+
</Container>
19+
);
520
};
621
export default NotFound;

‎packages/cmsui/routes/unauthorized.tsx

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,22 @@
1-
import { ErrorBoundary } from 'seven/app/root';
2-
1+
import { Container } from '@plone/components/tailwind';
2+
import { useTranslation } from 'react-i18next';
3+
import { NavLink } from 'react-router';
34
const Unauthorized = () => {
4-
return <ErrorBoundary />;
5+
const { t } = useTranslation();
6+
7+
return (
8+
<Container className="flex min-h-screen flex-col items-center justify-center font-sans text-xl">
9+
<h1 className="text-green-900">{t('cmsui.unauthorized')}</h1>
10+
<p>
11+
{t('cmsui.loginRequired')}
12+
<NavLink to="/login">{t('login')}</NavLink>
13+
</p>
14+
<p>
15+
{t('cmsui.SiteAdminstration')}
16+
<NavLink to="/contact-form">{t('cmsui.siteAdminstration')}</NavLink>
17+
</p>
18+
<p>{t('cmsui.thankyou')}</p>
19+
</Container>
20+
);
521
};
622
export default Unauthorized;

0 commit comments

Comments
 (0)