Add general not found page

changelog/unreleased/enhancement-add-not-found-page

@@ -0,0 +1,6 @@
+Enhancement: Add not found page
+
+We've added a not found page to communicate to users when they've navigated to a page that doesn't exist.
+
+https://github.com/owncloud/web/pull/11737
+https://github.com/owncloud/web/issues/5804

packages/web-runtime/src/pages/notFound.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="oc-flex oc-flex-center oc-flex-middle oc-flex-column page-not-found">
+    <oc-icon name="emotion-normal" fill-type="line" size="xxlarge" />
+    <h1 class="oc-text-muted">404</h1>
+    <p
+      class="oc-text-xlarge oc-m-rm oc-text-muted"
+      v-text="$gettext('The requested page you are looking for does not exist.')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { $gettext } from '@ownclouders/web-pkg/src/router/utils'
+</script>

packages/web-runtime/src/router/index.ts

@@ -2,6 +2,7 @@ import AccessDeniedPage from '../pages/accessDenied.vue'
 import Account from '../pages/account.vue'
 import LoginPage from '../pages/login.vue'
 import LogoutPage from '../pages/logout.vue'
+import NotFoundPage from '../pages/notFound.vue'
 import OidcCallbackPage from '../pages/oidcCallback.vue'
 import ResolvePublicLinkPage from '../pages/resolvePublicLink.vue'
 import ResolvePrivateLinkPage from '../pages/resolvePrivateLink.vue'
@@ -86,6 +87,12 @@ const routes = [
     name: 'account',
     component: Account,
     meta: { title: $gettext('Account'), authContext: 'hybrid' }
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    name: 'notFound',
+    component: NotFoundPage,
+    meta: { title: $gettext('Not found'), authContext: 'hybrid' }
   }
 ]
 export const router = patchRouter(