chore/NoAccess and InvalidURL page

src/App.tsx

@@ -7,6 +7,7 @@ import { Outlet } from 'react-router-dom'
 import * as Styled from './App.styled'
 import AppBar from './features/AppBar/AppBar'
 import { Footer } from './features/Footer/Footer'
+import { NoAccess } from './pages/NoAccess/NoAccess'
 
 export function App() {
   const { instance } = useMsal()
@@ -25,6 +26,7 @@ export function App() {
       <UnauthenticatedTemplate>
         <p>Not authenticated</p>
         <button onClick={() => instance.loginRedirect()}>Log in</button>
+        <NoAccess />
       </UnauthenticatedTemplate>
     </>
   )

src/pages/InvalidURL/InvalidURL.tsx

@@ -0,0 +1,14 @@
+import { Button, Typography } from '@equinor/eds-core-react'
+import { useNavigate } from 'react-router-dom'
+import { InfoPageComponent } from '../../components/InfoPageComponent/InfoPageComponent'
+
+export const InvalidURL = () => {
+  const navigate = useNavigate()
+
+  return (
+    <InfoPageComponent title="Invalid URL">
+      <Typography variant="body_long">This URL is not valid!</Typography>
+      <Button onClick={() => navigate(-1)}>Go back</Button>
+    </InfoPageComponent>
+  )
+}

src/pages/NoAccess/NoAccess.tsx

@@ -0,0 +1,31 @@
+import { Icon, Typography } from '@equinor/eds-core-react'
+import { external_link as externalLink } from '@equinor/eds-icons'
+import { InfoPageComponent } from '../../components/InfoPageComponent/InfoPageComponent'
+
+export const NoAccess = () => {
+  const requiredAccesses = [
+    {
+      name: 'Parameter estimation from conseptual geological models',
+      type: 'Basic access',
+    },
+  ]
+  return (
+    <InfoPageComponent title="Access required">
+      <Typography variant="body_long">
+        You will need the following access before you can use PEPM:
+        {requiredAccesses.map((item) => (
+          <li key={item.name}>
+            {item.name}
+            {' - '}
+            {item.type}
+          </li>
+        ))}
+      </Typography>
+
+      <Typography link href="https://accessit.equinor.com/">
+        Apply through Access IT
+        <Icon data={externalLink} title={'Link to Api'} />
+      </Typography>
+    </InfoPageComponent>
+  )
+}

src/router.tsx

@@ -4,6 +4,7 @@ import { ModelView } from './features/ModelView/ModelView'
 import { About } from './pages/About/About'
 import { Api } from './pages/Api/Api'
 import { Browse } from './pages/Browse/Browse'
+import { InvalidURL } from './pages/InvalidURL/InvalidURL'
 import { Compute } from './pages/ModelPages/Compute/Compute'
 import { Model } from './pages/ModelPages/Model/Model'
 import { Results } from './pages/ModelPages/Results/Results'
@@ -50,7 +51,7 @@ const router = createBrowserRouter([
   },
   {
     path: '*',
-    element: <p>Invalid url</p>,
+    element: <InvalidURL />,
   },
 ])