Fix routing (#43)

generated/api/static.go

@@ -5,8 +5,23 @@ import (
 	"net/http"
 	"net/http/httputil"
 	"net/url"
+	"strings"
 )
 
+func VueStatic(fsys fs.FS) func(w http.ResponseWriter, r *http.Request) {
+	return func(w http.ResponseWriter, r *http.Request) {
+		handler := http.FileServer(http.FS(fsys))
+
+		if strings.HasPrefix(r.URL.Path, "/static/") {
+			handler = http.StripPrefix("/static/", handler)
+		} else {
+			r.URL.Path = "/"
+		}
+
+		handler.ServeHTTP(w, r)
+	}
+}
+
 func Static(fsys fs.FS) func(w http.ResponseWriter, r *http.Request) {
 	return func(w http.ResponseWriter, r *http.Request) {
 		http.FileServer(http.FS(fsys)).ServeHTTP(w, r)

server.go

@@ -3,7 +3,6 @@ package catalyst
 import (
 	"context"
 	"io/fs"
-	"log"
 	"net/http"
 	"time"
 
@@ -116,35 +115,33 @@ func New(hooks *hooks.Hooks, config *Config) (*Server, error) {
 }
 
 func setupAPI(catalystService *service.Service, catalystStorage *storage.Storage, catalystDatabase *database.Database, dbConfig *database.Config, bus *bus.Bus, config *Config) (chi.Router, error) {
-	// create server
-	allowAll := cors.AllowAll().Handler
-	apiServer := api.NewServer(
-		catalystService,
-		AuthorizeRole,
-		allowAll, Authenticate(catalystDatabase, config.Auth), AuthorizeBlockedUser(),
-	)
+	middlewares := []func(next http.Handler) http.Handler{Authenticate(catalystDatabase, config.Auth), AuthorizeBlockedUser()}
 
-	apiServer.With(AuthorizeRole([]string{role.FileReadWrite.String()})).Head("/files/{ticketID}/tusd/{id}", tusdUpload(catalystDatabase, bus, catalystStorage.S3(), config.ExternalAddress))
-	apiServer.With(AuthorizeRole([]string{role.FileReadWrite.String()})).Patch("/files/{ticketID}/tusd/{id}", tusdUpload(catalystDatabase, bus, catalystStorage.S3(), config.ExternalAddress))
-	apiServer.With(AuthorizeRole([]string{role.FileReadWrite.String()})).Post("/files/{ticketID}/tusd", tusdUpload(catalystDatabase, bus, catalystStorage.S3(), config.ExternalAddress))
-	apiServer.With(AuthorizeRole([]string{role.FileReadWrite.String()})).Post("/files/{ticketID}/upload", upload(catalystDatabase, catalystStorage.S3(), catalystStorage.Uploader()))
-	apiServer.With(AuthorizeRole([]string{role.FileReadWrite.String()})).Get("/files/{ticketID}/download/{key}", download(catalystStorage.Downloader()))
+	// create server
+	apiServerMiddleware := []func(next http.Handler) http.Handler{cors.AllowAll().Handler}
+	apiServerMiddleware = append(apiServerMiddleware, middlewares...)
+	apiServer := api.NewServer(catalystService, AuthorizeRole, apiServerMiddleware...)
+
+	fileReadWrite := AuthorizeRole([]string{role.FileReadWrite.String()})
+	tudHandler := tusdUpload(catalystDatabase, bus, catalystStorage.S3(), config.ExternalAddress)
+	apiServer.With(fileReadWrite).Head("/files/{ticketID}/tusd/{id}", tudHandler)
+	apiServer.With(fileReadWrite).Patch("/files/{ticketID}/tusd/{id}", tudHandler)
+	apiServer.With(fileReadWrite).Post("/files/{ticketID}/tusd", tudHandler)
+	apiServer.With(fileReadWrite).Post("/files/{ticketID}/upload", upload(catalystDatabase, catalystStorage.S3(), catalystStorage.Uploader()))
+	apiServer.With(fileReadWrite).Get("/files/{ticketID}/download/{key}", download(catalystStorage.Downloader()))
 
 	apiServer.With(AuthorizeRole([]string{role.BackupRead.String()})).Get("/backup/create", backupHandler(catalystStorage, dbConfig))
 	apiServer.With(AuthorizeRole([]string{role.BackupRestore.String()})).Post("/backup/restore", restoreHandler(catalystStorage, catalystDatabase, dbConfig))
 
 	server := chi.NewRouter()
-	server.Use(middleware.RequestID, middleware.RealIP, middleware.Logger, middleware.Recoverer, allowAll)
+	server.Use(middleware.RequestID, middleware.RealIP, middleware.Logger, middleware.Recoverer, cors.AllowAll().Handler)
 	server.Mount("/api", apiServer)
 
 	server.Get("/callback", callback(config.Auth))
-	server.With(Authenticate(catalystDatabase, config.Auth), AuthorizeBlockedUser()).Handle("/wss", handleWebSocket(bus))
+	server.With(middlewares...).Handle("/wss", handleWebSocket(bus))
 
 	fsys, _ := fs.Sub(ui.UI, "dist")
-	server.NotFound(func(w http.ResponseWriter, r *http.Request) {
-		log.Println("not found", r.URL.RawPath)
-		Authenticate(catalystDatabase, config.Auth)(AuthorizeBlockedUser()(http.HandlerFunc(api.Static(fsys)))).ServeHTTP(w, r)
-	})
+	server.With(middlewares...).NotFound(api.VueStatic(fsys))
 
 	return server, nil
 }

ui/public/index.html

@@ -4,7 +4,6 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="/flask.png?v=1">
     <title>Catalyst</title>
   </head>
   <body>
@@ -12,8 +11,5 @@
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <script>let global = globalThis;</script>
-    <script type="module" src="./src/main.ts"></script>
-    <!-- built files will be auto injected -->
   </body>
 </html>

ui/src/App.vue

@@ -4,7 +4,7 @@
       <v-list>
         <v-list-item class="px-2" :to="{ name: 'Home' }">
           <v-list-item-avatar rounded="0">
-            <v-img src="/flask_white.svg" :width="40"></v-img>
+            <v-img src="/static/flask_white.svg" :width="40"></v-img>
           </v-list-item-avatar>
           <v-list-item-content>
             <v-list-item-title class="title">
@@ -132,9 +132,7 @@
       </v-btn>
 
     </v-app-bar>
-    <div>
-      <router-view></router-view>
-    </div>
+    <router-view></router-view>
     <v-snackbar v-model="snackbar" :color="$store.state.alert.type" :timeout="$store.state.alert.type === 'error' ? -1 : 5000" outlined>
       <b style="display: block">{{ $store.state.alert.name | capitalize }}</b>
       {{ $store.state.alert.detail }}
@@ -190,6 +188,8 @@ export default Vue.extend({
       return this.$store.state.showAlert
     },
     crumbs: function() {
+      this.$route.name
+
       let pathArray = this.$route.path.split("/")
       pathArray.shift()
 

ui/src/router/index.ts

@@ -29,6 +29,7 @@ import TicketType from '../views/TicketType.vue';
 import TicketTypeList from "@/views/TicketTypeList.vue";
 import TaskList from "@/views/TaskList.vue";
 import Settings from "@/views/Settings.vue";
+import NotFound from "@/views/NotFound.vue";
 
 Vue.use(VueRouter);
 
@@ -229,7 +230,6 @@ const routes: Array<RouteConfig> = [
     ]
   },
 
-
   {
     path: "/dashboards",
     name: "DashboardList",
@@ -264,6 +264,13 @@ const routes: Array<RouteConfig> = [
     component: Graph,
     meta: { title: "Graph" },
   },
+
+  {
+    path: '*',
+    name: "Not Found",
+    component: NotFound,
+    meta: { title: "Not Found" },
+  }
 ];
 
 const router = new VueRouter({

ui/src/views/NotFound.vue

@@ -0,0 +1,13 @@
+<template>
+  <v-main>
+    <div class="fill-height d-flex flex-row align-center justify-center">
+      <h1>Page not found :(</h1>
+    </div>
+  </v-main>
+</template>
+
+<script>
+export default {
+  name: "NotFound"
+}
+</script>

ui/vue.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  publicPath: "/static/",
   transpileDependencies: ["vuetify", "@koumoul/vjsf"],
   pwa: {
     name: "Catalyst",