github/wonderwall
1
0
Fork 0
mirror of https://github.com/nais/wonderwall.git synced 2026-02-14 17:49:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: Morten Lied Johansen <morten.lied.johansen@nav.no>
This commit is contained in:
Trong Huu Nguyen
2024-10-07 16:15:30 +02:00
parent df5c78b821
commit a4b832839c
13 changed files with 1669 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
pkg/handler/error.go
View File

@@ -11,11 +11,11 @@ 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 (
@@ -23,11 +23,6 @@ const (
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)
}

22
pkg/handler/templates/error.go
View File

@@ -1,22 +0,0 @@
package templates
import (
_ "embed"
"html/template"
log "github.com/sirupsen/logrus"
)
//go:embed error.gohtml
var errorGoHtml string
var ErrorTemplate *template.Template
func init() {
var err error
ErrorTemplate = template.New("error")
ErrorTemplate, err = ErrorTemplate.Parse(errorGoHtml)
if err != nil {
log.Fatalf("parsing error template: %+v", err)
}
}

184
pkg/handler/templates/error.gohtml
View File

File diff suppressed because one or more lines are too long

5
templates/Makefile Normal file
View File

@@ -0,0 +1,5 @@
local:
npx tailwindcss -i ./input.css -o ./output.css --watch
build:
npx tailwindcss -o ./output.css --minify

25
templates/README.md Normal file
View File

@@ -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
```

9
templates/css.go Normal file
View File

@@ -0,0 +1,9 @@
package templates
import (
_ "embed"
"html/template"
)
//go:embed output.css
var CSS template.CSS

34
templates/error.go Normal file
View File

@@ -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)
}

39
templates/error.gohtml Normal file
View File

@@ -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>

3
templates/input.css Normal file
View File

@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

1
templates/output.css Normal file
View File

File diff suppressed because one or more lines are too long

1500
templates/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

5
templates/package.json Normal file
View File

@@ -0,0 +1,5 @@
{
"devDependencies": {
"tailwindcss": "^3.4.13"
}
}

37
templates/tailwind.config.js Normal file
View File

@@ -0,0 +1,37 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./*.{html,js,gohtml}"],
plugins: [],
theme: {
extend: {
colors: {
primary: {
"50": "#FFE6E6",
"100": "#FFC2C2",
"200": "#F68282",
"300": "#F25C5C",
"400": "#DE2E2E",
"500": "#C30000",
"600": "#AD0000",
"700": "#8C0000",
"800": "#5C0000",
"900": "#260000",
"950": "#180000"
},
action: {
"50": "#E6F0FF",
"100": "#CCE1FF",
"200": "#99C3FF",
"300": "#66A5F4",
"400": "#3386E0",
"500": "#0067C5",
"600": "#0056B4",
"700": "#00459C",
"800": "#00347D",
"900": "#002252",
"950": "#00131A"
},
}
}
}
}