feat(frontend): Migrate /settings and /login to SPA

.github/workflows/frontend-test.yml

@@ -0,0 +1,133 @@
+name: "Frontend"
+
+on:
+  push:
+    branches: [ dev ]
+  pull_request:
+    branches: [ dev ]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7
+      - name: Install modules
+        working-directory: ./frontend
+        run: npm ci
+      - name: Typecheck
+        working-directory: ./frontend
+        run: npm run typecheck
+      - name: Test
+        working-directory: ./frontend
+        run: npm test
+      # Building here also guards the Go side: web/spa_test.go skips when no build is
+      # present, so without this the router wiring would go unverified in CI.
+      - name: Build
+        working-directory: ./frontend
+        run: npm run build
+
+  # Browser tests against a real server: a MariaDB seeded from the starter dump, the
+  # Go binary serving both frontends, and Playwright driving Chromium against it. This
+  # is the only job that can see gin choosing between the SPA shell and a template, or
+  # the session cookie surviving a login redirect.
+  #
+  # The server runs on the config.yaml in the repository root, unchanged — the same
+  # file a developer starts with, which is the point: if it stops being enough to boot
+  # a working server, this job says so. Two of its settings matter here. The db block
+  # has to match the service container below, and the ldap block has to stay disabled:
+  # with it, a rejected password falls back to LDAP and the login test waits for
+  # ldap://abc.de to answer, which it never will.
+  e2e:
+    runs-on: ubuntu-latest
+    services:
+      db:
+        image: mariadb:11
+        env:
+          MARIADB_ROOT_PASSWORD: example
+          MARIADB_DATABASE: tumlive
+        ports:
+          - 3306:3306
+        options: >-
+          --health-cmd="healthcheck.sh --connect --innodb_initialized"
+          --health-interval=5s
+          --health-timeout=5s
+          --health-retries=30
+    steps:
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7
+
+      - name: Install Go
+        uses: actions/setup-go@b7ad1dad31e06c5925ef5d2fc7ad053ef454303e # v7
+        with:
+          go-version: 1.26.x
+
+      # The starter dump creates the schema and the example courses, users and streams
+      # the pages render. The server migrates it forward on boot, so an old dump is
+      # fine. Run through the mariadb image rather than a client on the runner, so the
+      # client version always matches the server and nothing depends on what happens to
+      # be preinstalled.
+      - name: Seed the database
+        run: |
+          docker run --rm --network host -v "$PWD:/repo:ro" mariadb:11 \
+            sh -c 'mariadb -h 127.0.0.1 -P 3306 -u root -pexample < /repo/tum-live-starter.sql'
+
+      # web/router.go embeds web/node_modules, so this is needed to compile at all, not
+      # just to make the icons show up.
+      - name: Install template assets
+        working-directory: ./web
+        run: npm ci
+
+      # Without a build, every migrated route falls back to its template and the suite
+      # would test the frontend it is replacing.
+      - name: Build the SPA
+        working-directory: ./frontend
+        run: npm ci && npm run build
+
+      - name: Start the server
+        run: |
+          go run cmd/tumlive/main.go > server.log 2>&1 &
+          echo $! > server.pid
+          for _ in $(seq 1 60); do
+            if curl -fsS -o /dev/null http://localhost:8081/login; then
+              echo "server is up"
+              exit 0
+            fi
+            # Compiling and the first migration take a while; fail early if it died.
+            if ! kill -0 "$(cat server.pid)" 2>/dev/null; then
+              echo "server exited before it started serving"
+              cat server.log
+              exit 1
+            fi
+            sleep 2
+          done
+          echo "server did not start within two minutes"
+          cat server.log
+          exit 1
+
+      # After the server, so that the account is created against the migrated schema
+      # rather than the 2022 one in the dump.
+      - name: Create the test account
+        run: go run ./frontend/e2e/seeduser
+
+      - name: Install Playwright browsers
+        working-directory: ./frontend
+        run: npx playwright install --with-deps chromium
+
+      - name: Run the browser tests
+        working-directory: ./frontend
+        run: npm run test:e2e
+
+      - name: Collect the server log
+        if: failure()
+        run: cat server.log
+
+      # Traces and screenshots for the failing tests; Playwright is configured to keep
+      # them only on failure.
+      - name: Upload the Playwright report
+        if: failure()
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+        with:
+          name: playwright-report
+          path: |
+            frontend/playwright-report/
+            frontend/test-results/
+          retention-days: 7

.github/workflows/go-test.yml

@@ -17,6 +17,11 @@ jobs:
       - name: Install modules
         working-directory: ./web
         run: npm ci
+      # web/spa_test.go skips when no SPA build is present, so build it here or the
+      # router wiring goes untested.
+      - name: Build SPA
+        working-directory: ./frontend
+        run: npm ci && npm run build
       - name: Install Go
         uses: actions/setup-go@b7ad1dad31e06c5925ef5d2fc7ad053ef454303e # v7
         with:

Dockerfile

@@ -2,14 +2,20 @@ FROM node:25 AS node
 
 WORKDIR /app
 COPY web web
+COPY frontend frontend
 
 ## remove generated files in case the developer build with npm before
 RUN rm -rf web/assets/ts-dist &&\
-    rm -rf web/assets/css-dist
+    rm -rf web/assets/css-dist &&\
+    rm -rf web/spa/assets web/spa/index.html
 
 WORKDIR /app/web
 RUN npm i --no-dev
 
+## build the single-page app serving the migrated pages; output lands in web/spa
+WORKDIR /app/frontend
+RUN npm ci && npm run build
+
 FROM golang:1.26 AS build-env
 
 RUN mkdir /gostuff
@@ -23,6 +29,7 @@ WORKDIR /go/src/app
 COPY . .
 COPY --from=node /app/web/assets ./web/assets
 COPY --from=node /app/web/node_modules ./web/node_modules
+COPY --from=node /app/web/spa ./web/spa
 
 # bundle version into binary if specified in build-args, dev otherwise.
 ARG version=dev

Makefile

@@ -1,5 +1,5 @@
 .PHONY: all
-all: npm_dependencies go_dependencies bundle
+all: npm_dependencies spa go_dependencies bundle
 
 VERSION := $(shell git rev-parse --short origin/HEAD)
 
@@ -8,6 +8,23 @@ npm_dependencies:
 	cd web; \
 	npm i --no-dev
 
+# Builds the single-page frontend into web/spa, where it is embedded into the binary.
+# Skipping this target leaves every page served by its template handler.
+.PHONY: spa
+spa:
+	cd frontend; \
+	npm ci; \
+	npm run build
+
+# Regenerates the TypeScript client in frontend/src/gen from apiv2/server/apiv2.proto.
+# The output is committed, so this only needs running when the proto changes; use it
+# together with apiv2/generate.sh, which regenerates the Go side from the same file.
+.PHONY: proto_es
+proto_es:
+	cd frontend; \
+	npm ci; \
+	npm run proto
+
 .PHONY: go_dependencies
 go_dependencies:
 	go get ./...
@@ -19,6 +36,8 @@ bundle:
 .PHONY: clean
 clean:
 	rm -fr web/node_modules
+	rm -fr frontend/node_modules
+	rm -fr web/spa/assets web/spa/index.html
 
 .PHONY: install
 install:
@@ -40,11 +59,25 @@ run:
 .PHONY: test
 test:
 	go test -race ./...
+	cd frontend; npm test
+
+# Browser tests against a running server. Not part of `test`: these need the server and
+# its database up, and they sign in as an account that has to exist first.
+#
+#   go run ./frontend/e2e/seeduser   # once, and again whenever the database is reset
+#   make run                         # in another terminal
+#   make test_e2e
+.PHONY: test_e2e
+test_e2e:
+	cd frontend; \
+	npx playwright install --with-deps chromium; \
+	npm run test:e2e
 
 .PHONY: lint
 lint:
 	golangci-lint run
 	cd web; npm run lint
+	cd frontend; npm run typecheck
 
 .PHONY: protoVoice
 protoVoice:

api/audit.go

@@ -19,7 +19,7 @@ type auditRoutes struct {
 func configAuditRouter(r *gin.Engine, d dao.DaoWrapper) {
 	auditRouter := auditRoutes{d}
 	g := r.Group("/api")
-	g.Use(tools.Admin)
+	g.Use(tools.RequirePermission(model.PermAdministerServer))
 	{
 		g.GET("/audits", auditRouter.getAudits)
 	}

api/courses.go

@@ -49,7 +49,7 @@ func configGinCourseRouter(router *gin.Engine, daoWrapper dao.DaoWrapper) {
 
 		lecturers := api.Group("")
 		{
-			lecturers.Use(tools.AtLeastLecturer)
+			lecturers.Use(tools.RequirePermission(model.PermLecture))
 			lecturers.POST("/courseInfo", routes.courseInfo)
 			lecturers.POST("/createCourse", routes.createCourse)
 			lecturers.POST("/createTestCourse", routes.createTestCourse)
@@ -1519,7 +1519,7 @@ func (r coursesRoutes) createCourse(c *gin.Context) {
 		Streams:             []model.Stream{},
 		Language:            lang,
 	}
-	if tumLiveContext.User.Role != model.AdminType {
+	if !tumLiveContext.User.Can(model.PermAdministerAllCourses) {
 		course.Admins = []model.User{*tumLiveContext.User}
 	}
 
@@ -1697,7 +1697,7 @@ func (r coursesRoutes) copyStream(c *gin.Context) {
 	}
 	tlctx := c.MustGet("TUMLiveContext").(tools.TUMLiveContext)
 
-	isAdmin := tlctx.User.Role == model.AdminType
+	isAdmin := tlctx.User.Can(model.PermAdministerAllCourses)
 
 	if !isAdmin {
 		targetCourseAdmins, err := r.DaoWrapper.CoursesDao.GetCourseAdmins(request.TargetCourse)

api/info-pages.go

@@ -15,7 +15,7 @@ func configInfoPageRouter(router *gin.Engine, wrapper dao.DaoWrapper) {
 	routes := infoPageRoutes{wrapper}
 	api := router.Group("/api")
 	{
-		api.Use(tools.Admin)
+		api.Use(tools.RequirePermission(model.PermAdministerServer))
 		api.PUT("/texts/:id", routes.updateText)
 	}
 }

api/lecture_halls.go

@@ -27,7 +27,7 @@ func configGinLectureHallApiRouter(router *gin.Engine, daoWrapper dao.DaoWrapper
 	}
 
 	admins := router.Group("/api")
-	admins.Use(tools.Admin)
+	admins.Use(tools.RequirePermission(model.PermAdministerServer))
 	admins.PUT("/lectureHall/:id", routes.updateLectureHall)
 	admins.POST("/lectureHall/:id/defaultPreset", routes.updateLectureHallsDefaultPreset)
 	admins.DELETE("/lectureHall/:id", routes.deleteLectureHall)
@@ -255,7 +255,7 @@ func (r lectureHallRoutes) lectureHallIcal(c *gin.Context) {
 	tumLiveContext := foundContext.(tools.TUMLiveContext)
 	// pass 0 to db query to get all lectures if user is not logged in or admin
 	queryUid := uint(0)
-	if tumLiveContext.User != nil && tumLiveContext.User.Role != model.AdminType {
+	if tumLiveContext.User != nil && !tumLiveContext.User.Can(model.PermViewAllCourses) {
 		queryUid = tumLiveContext.User.ID
 	}
 	icalData, err := r.LectureHallsDao.GetStreamsForLectureHallIcal(queryUid, lectureHalls, all)

api/maintenance.go

@@ -16,7 +16,7 @@ func configMaintenanceRouter(router *gin.Engine, daoWrapper dao.DaoWrapper) {
 	routes := maintenanceRoutes{DaoWrapper: daoWrapper}
 
 	g := router.Group("/api/maintenance")
-	g.Use(tools.Admin)
+	g.Use(tools.RequirePermission(model.PermAdministerServer))
 	{
 		g.POST("/generateThumbnails", routes.generateThumbnails)
 		g.GET("/generateThumbnails/status", routes.getThumbGenProgress)

api/notifications.go

@@ -18,8 +18,8 @@ func configNotificationsRouter(r *gin.Engine, daoWrapper dao.DaoWrapper) {
 	{
 		notifications.GET("/", routes.getNotifications)
 		notifications.GET("/server", routes.getServerNotifications)
-		notifications.POST("/", tools.Admin, routes.createNotification)
-		notifications.DELETE("/:id", tools.Admin, routes.deleteNotification)
+		notifications.POST("/", tools.RequirePermission(model.PermAdministerServer), routes.createNotification)
+		notifications.DELETE("/:id", tools.RequirePermission(model.PermAdministerServer), routes.deleteNotification)
 	}
 }
 

api/runner.go

@@ -98,7 +98,7 @@ func liveRunnerPageUpdateOnSubscribe(psc *realtime.Context) {
 
 	if tumLiveContext.User != nil {
 		userId = tumLiveContext.User.ID
-		if tumLiveContext.User.Role != model.AdminType {
+		if !tumLiveContext.User.Can(model.PermAdministerServer) {
 			err = errors.New("user is not admin")
 			logger.Error("User is not admin", "err", err)
 			return
@@ -228,7 +228,7 @@ type runnerRoutes struct {
 
 func configRunnerRouter(r *gin.Engine, daoWrapper dao.DaoWrapper) {
 	g := r.Group("/api/runners")
-	g.Use(tools.Admin)
+	g.Use(tools.RequirePermission(model.PermAdministerServer))
 
 	routes := runnerRoutes{dao: daoWrapper.RunnerDao}
 

api/search.go

@@ -365,7 +365,7 @@ func meiliStreamFilter(c *gin.Context, user *model.User, semester model.Semester
 	}
 
 	semesterFilter := fmt.Sprintf("(year = %d AND semester = \"%s\")", semester.Year, semester.TeachingTerm)
-	if user != nil && user.Role == model.AdminType {
+	if user.Can(model.PermViewAllCourses) {
 		return semesterFilter
 	}
 
@@ -397,7 +397,7 @@ func meiliStreamFilter(c *gin.Context, user *model.User, semester model.Semester
 // ignores either semesters or firstSemester/lastSemester, depending on semesters == nil
 func meiliCourseFilter(c *gin.Context, user *model.User, firstSemester model.Semester, lastSemester model.Semester, semesters []model.Semester) string {
 	semesterFilter := meiliSemesterFilter(firstSemester, lastSemester, semesters)
-	if user != nil && user.Role == model.AdminType {
+	if user.Can(model.PermViewAllCourses) {
 		return semesterFilter
 	}
 

api/server-notifications.go

@@ -15,7 +15,7 @@ import (
 func configServerNotificationsRoutes(engine *gin.Engine, daoWrapper dao.DaoWrapper) {
 	routes := serverNotificationRoutes{daoWrapper}
 	adminGroup := engine.Group("/api/serverNotification")
-	adminGroup.Use(tools.Admin)
+	adminGroup.Use(tools.RequirePermission(model.PermAdministerServer))
 	adminGroup.POST("/:notificationId", routes.updateServerNotification)
 	adminGroup.POST("/create", routes.createServerNotification)
 }

api/statistics.go

@@ -37,7 +37,7 @@ func (r coursesRoutes) getStats(c *gin.Context) {
 	// check if request is for server -> validate
 	cidFromContext := c.Param("courseID")
 	if cidFromContext == "0" {
-		if ctx.(tools.TUMLiveContext).User.Role != model.AdminType {
+		if !ctx.(tools.TUMLiveContext).User.Can(model.PermAdministerServer) {
 			_ = c.Error(tools.RequestError{
 				Status:        http.StatusForbidden,
 				CustomMessage: "not admin",
@@ -283,7 +283,7 @@ func (r coursesRoutes) exportStats(c *gin.Context) {
 	// check if request is for server -> validate
 	cidFromContext := c.Param("courseId")
 	if cidFromContext == "0" {
-		if ctx.(tools.TUMLiveContext).User.Role != model.AdminType {
+		if !ctx.(tools.TUMLiveContext).User.Can(model.PermAdministerServer) {
 			_ = c.Error(tools.RequestError{
 				Status:        http.StatusForbidden,
 				CustomMessage: "not admin",