feat(templates): make error page more generic and ✨ responsive ✨

Co-authored-by: Morten Lied Johansen <[email protected]>
nais · Oct 9, 2024 · a4b8328 · a4b8328
1 parent df5c78b
commit a4b8328
Show file tree

Hide file tree

Showing 13 changed files with 1,669 additions and 216 deletions.
diff --git a/pkg/handler/error.go b/pkg/handler/error.go
@@ -11,23 +11,18 @@ import (
 	log "github.com/sirupsen/logrus"
 
 	"github.com/nais/wonderwall/pkg/cookie"
-	"github.com/nais/wonderwall/pkg/handler/templates"
 	mw "github.com/nais/wonderwall/pkg/middleware"
 	"github.com/nais/wonderwall/pkg/openid"
 	"github.com/nais/wonderwall/pkg/router/paths"
 	urlpkg "github.com/nais/wonderwall/pkg/url"
+	"github.com/nais/wonderwall/templates"
 )
 
 const (
 	// MaxAutoRetryAttempts is the maximum number of times to automatically redirect the user to retry their original request.
 	MaxAutoRetryAttempts = 3
 )
 
-type Page struct {
-	CorrelationID string
-	RetryURI      string
-}
-
 func (s *Standalone) InternalError(w http.ResponseWriter, r *http.Request, cause error) {
 	s.respondError(w, r, http.StatusInternalServerError, cause, log.ErrorLevel)
 }
@@ -108,11 +103,17 @@ func (s *Standalone) defaultErrorResponse(w http.ResponseWriter, r *http.Request
 		loginCookie = nil
 	}
 
-	errorPage := Page{
-		CorrelationID: middleware.GetReqID(r.Context()),
-		RetryURI:      s.Retry(r, loginCookie),
+	defaultRedirect := s.Ingresses.Single().String()
+	if s.Config.SSO.IsServer() {
+		defaultRedirect = s.Config.SSO.ServerDefaultRedirectURL
 	}
-	err = templates.ErrorTemplate.Execute(w, errorPage)
+
+	err = templates.ExecError(w, templates.ErrorVariables{
+		CorrelationID:      middleware.GetReqID(r.Context()),
+		CSS:                templates.CSS,
+		DefaultRedirectURI: defaultRedirect,
+		RetryURI:           s.Retry(r, loginCookie),
+	})
 	if err != nil {
 		mw.LogEntryFrom(r).Errorf("errorhandler: executing error template: %+v", err)
 	}

diff --git a/pkg/handler/templates/error.go b/pkg/handler/templates/error.go
diff --git a/pkg/handler/templates/error.gohtml b/pkg/handler/templates/error.gohtml
diff --git a/templates/Makefile b/templates/Makefile
@@ -0,0 +1,5 @@
+local:
+	npx tailwindcss -i ./input.css -o ./output.css --watch
+
+build:
+	npx tailwindcss -o ./output.css --minify
diff --git a/templates/README.md b/templates/README.md
@@ -0,0 +1,25 @@
+# Error templates
+
+This directory contains `.gohtml` templates for static error pages served by Wonderwall.
+
+These pages are typically only shown on exceptional errors, i.e. invalid configuration or infrastructure errors.
+End-users should generally not see these pages unless something is really wrong.
+
+We embed the CSS directly into the `.gohtml` templates.
+This avoids implementing an endpoint to serve the CSS file separately.
+
+## Prerequisites
+
+If you haven't already, [install the Tailwind CSS CLI](https://tailwindcss.com/docs/installation).
+
+## Development
+
+```shell
+make local
+```
+
+## Production
+
+```shell
+make build
+```
diff --git a/templates/css.go b/templates/css.go
@@ -0,0 +1,9 @@
+package templates
+
+import (
+	_ "embed"
+	"html/template"
+)
+
+//go:embed output.css
+var CSS template.CSS
diff --git a/templates/error.go b/templates/error.go
@@ -0,0 +1,34 @@
+package templates
+
+import (
+	_ "embed"
+	"html/template"
+	"io"
+
+	log "github.com/sirupsen/logrus"
+)
+
+//go:embed error.gohtml
+var errorGoHtml string
+var errorTemplate *template.Template
+
+type ErrorVariables struct {
+	CorrelationID      string
+	CSS                template.CSS
+	DefaultRedirectURI string
+	RetryURI           string
+}
+
+func init() {
+	var err error
+
+	errorTemplate = template.New("error")
+	errorTemplate, err = errorTemplate.Parse(errorGoHtml)
+	if err != nil {
+		log.Fatalf("parsing error template: %+v", err)
+	}
+}
+
+func ExecError(w io.Writer, vars ErrorVariables) error {
+	return errorTemplate.Execute(w, vars)
+}
diff --git a/templates/error.gohtml b/templates/error.gohtml
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="no">
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        {{ .CSS }}
+    </style>
+    <title>Innloggingsfeil</title>
+</head>
+<body>
+<section class="bg-white">
+    <div class="py-8 px-6 mx-auto max-w-screen-xl lg:py-26 lg:px-12">
+        <div class="mx-auto max-w-screen-md text-left">
+            <h1 class="h-[4rem] mb-2 sm:mb-8 text-4xl tracking-tight font-extrabold sm:text-5xl bg-gradient-to-r from-indigo-700 via-primary-300 to-primary-500 inline-block text-transparent bg-clip-text">
+                Beklager, noe gikk galt.
+            </h1>
+            <p class="mb-2 text-xl tracking-tight font-bold text-gray-900 sm:text-2xl">
+                Vi kunne ikke logge deg på.
+            </p>
+            <p class="mb-8 text-base tracking-tight font-normal text-gray-900">
+                En teknisk feil gjør at siden er utilgjengelig. Dette skyldes ikke noe du gjorde.<br />
+                Vent litt og prøv igjen.
+            </p>
+            <div class="flex flex-col gap-3 mt-8 sm:flex-row sm:items-center sm:gap-3">
+                <a href="{{.RetryURI}}" class="inline-flex items-center justify-center min-w-44 p-4 text-base font-normal text-white rounded-md bg-action-500 hover:bg-action-600">
+                    <span class="w-full text-center">Prøv igjen</span>
+                </a>
+                <a href="{{.DefaultRedirectURI}}" class="inline-flex items-center justify-center min-w-44 p-4 text-base font-normal rounded-md border-2 border-action-500 text-action-500 hover:bg-action-100">
+                    <span class="w-full text-center">Gå til forsiden</span>
+                </a>
+            </div>
+            <p class="mt-8 font-light text-sm text-gray-500">
+                ID: {{.CorrelationID}}
+            </p>
+        </div>
+    </div>
+</section>
+</body>
+</html>
diff --git a/templates/input.css b/templates/input.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/templates/output.css b/templates/output.css