diff --git a/src/App.tsx b/src/App.tsx index ae2aa83..128e484 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,5 @@ import Container from "react-bootstrap/Container"; -import {Route, Routes, BrowserRouter, Navigate} from "react-router-dom"; +import {Route, Routes, BrowserRouter} from "react-router-dom"; import styled from "styled-components"; import theme from "styled-theming"; import { QueryParamProvider } from 'use-query-params'; @@ -17,6 +17,7 @@ import {V1, V2} from "./common"; import EditServicePage from "./views/my-apps/EditService"; import MyCatalogPage from "./views/my-catalog/MyCatalog"; import AddEditSpecPage from "./views/my-catalog/AddEditSpec"; +import ErrorPage from "./common/errors/error"; export const colors = { backgroundColor: { light: "#FBFBFB", dark: "#475362" }, @@ -98,7 +99,9 @@ function App() { } /> } /> } /> - } /> + } /> + } /> + } /> diff --git a/src/common/errors/error.tsx b/src/common/errors/error.tsx new file mode 100644 index 0000000..0ce5395 --- /dev/null +++ b/src/common/errors/error.tsx @@ -0,0 +1,89 @@ +import "swagger-ui-react/swagger-ui.css"; +import {useSelector} from "react-redux"; +import {useEffect, useState} from "react"; +import ReactGA from "react-ga"; +import Button from "react-bootstrap/Button"; +import {useQueryParam} from "use-query-params"; +import {Navigate} from "react-router-dom"; + +function ErrorPage(props: { code: string; }) { + // TODO: light/dark theming + //const darkThemeEnabled = useSelector((state: any) => state.preferences.darkThemeEnabled); + + const env = useSelector((state: any) => state.env); + const [redirect, setRedirect] = useState(''); + const [rd] = useQueryParam('rd') + + useEffect(() => { + if (env?.customization?.product_name) { + document.title = `${env?.customization?.product_name}: Unauthorized`; + } + }, [env]); + + useEffect(() => { + if (env?.analytics_tracking_id && props.code) { + ReactGA.pageview(`/${props.code}.html`); + } else if (env?.analytics_tracking_id) { + ReactGA.pageview(`/error.html`); + } + }, [env?.analytics_tracking_id, props.code]); + + const renderErrorMessage = (code: string) => { + switch(code) { + case '401': { + return ( + <> +

You must Sign In to view this page.

+ + + ); + } + case '503': { + return( + rd ? + <> +

App is still launching.. Please wait and you will be redirected when it is online.

+ + + : + <> +

An unknown error has occurred

+ { + props?.code &&

Code: {props.code}

+ } + + ); + } + case '404': { + return( + <> +

Page not found, please try again :(

+

If you think you have reached this page in error, contact your administrator.

+ + ); + } + default: { + return( + <> +

An unknown error has occurred

+ { + props?.code &&

Code: {props.code}

+ } + + ); + } + } + } + + return ( + redirect ? + + : +
+ {renderErrorMessage(props?.code)} +
+ + ); +} + +export default ErrorPage;