From 2f1859260f6bb4dbf995cd430974b4c2ae20f4d5 Mon Sep 17 00:00:00 2001 From: "maksim.nabokikh" Date: Sat, 14 Dec 2024 12:29:54 +0100 Subject: [PATCH] Add CSS for example app to make it prettier Signed-off-by: maksim.nabokikh --- examples/example-app/templates.go | 371 ++++++++++++++++++++++++++---- 1 file changed, 322 insertions(+), 49 deletions(-) diff --git a/examples/example-app/templates.go b/examples/example-app/templates.go index a9425ead27..7107eb8739 100644 --- a/examples/example-app/templates.go +++ b/examples/example-app/templates.go @@ -6,38 +6,225 @@ import ( "net/http" ) +const css = ` + body { + font-family: Arial, sans-serif; + background-color: #f2f2f2; + margin: 0; + } + + .header { + text-align: center; + margin-bottom: 20px; + } + + .dex { + font-size: 2em; + font-weight: bold; + color: #3F9FD8; /* Main color */ + } + + .example-app { + font-size: 1em; + color: #EF4B5C; /* Secondary color */ + } + + .form-instructions { + text-align: center; + margin-bottom: 15px; + font-size: 1em; + color: #555; + } + + hr { + border: none; + border-top: 1px solid #ccc; + margin-top: 10px; + margin-bottom: 20px; + } + + label { + flex: 1; + font-weight: bold; + color: #333; + } + + p { + margin-bottom: 15px; + display: flex; + align-items: center; + } + + input[type="text"] { + flex: 2; + padding: 8px; + border: 1px solid #ccc; + border-radius: 4px; + outline: none; + } + + input[type="checkbox"] { + margin-left: 10px; + transform: scale(1.2); + } + + .back-button { + display: inline-block; + padding: 8px 16px; + background-color: #EF4B5C; /* Secondary color */ + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 12px; + text-decoration: none; + transition: background-color 0.3s ease, transform 0.2s ease; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + position: fixed; + right: 20px; + bottom: 20px; + } + + .back-button:hover { + background-color: #C43B4B; /* Darker shade of secondary color */ + } + + .token-block { + background-color: #fff; + padding: 10px 15px; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + margin-bottom: 15px; + word-wrap: break-word; + display: flex; + flex-direction: column; + gap: 5px; + position: relative; + } + + .token-title { + font-weight: bold; + display: flex; + justify-content: space-between; + align-items: center; + } + + .token-title a { + font-size: 0.9em; + text-decoration: none; + color: #3F9FD8; /* Main color */ + } + + .token-title a:hover { + text-decoration: underline; + } + + .token-code { + overflow-wrap: break-word; + word-break: break-all; + white-space: normal; + } + + pre { + white-space: pre-wrap; + background-color: #f9f9f9; + padding: 8px; + border-radius: 4px; + border: 1px solid #ddd; + margin: 0; + font-family: 'Courier New', Courier, monospace; + overflow-x: auto; + font-size: 0.9em; + position: relative; + margin-top: 5px; + } + + pre .key { + color: #c00; + } + + pre .string { + color: #080; + } + + pre .number { + color: #00f; + } +` + var indexTmpl = template.Must(template.New("index.html").Parse(` - + + + + + + Example App - Login - - + + +
+
Dex
+
Example App
+
-

- - -

-

- - -

-

- - -

-

- - -

-

- -

+
+ If needed, customize your login settings below, then click Login to proceed. +
+
+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ +

- + `)) func renderIndex(w http.ResponseWriter) { @@ -53,30 +240,116 @@ type tokenTmplData struct { } var tokenTmpl = template.Must(template.New("token.html").Parse(` - + + + + + + Tokens - - -

ID Token: 

{{ .IDToken }}

-

Access Token: 

{{ .AccessToken }}

-

Claims: 

{{ .Claims }}

- {{ if .RefreshToken }} -

Refresh Token: 

{{ .RefreshToken }}

-
- - -
- {{ end }} - + + + {{ if .IDToken }} +
+
+ ID Token: + Decode on jwt.io +
+ 
{{ .IDToken }}
+
+ {{ end }} + + {{ if .AccessToken }} +
+
+ Access Token: + Decode on jwt.io +
+ 
{{ .AccessToken }}
+
+ {{ end }} + + {{ if .Claims }} +
+
Claims:
+ 
{{ .Claims }}
+
+ {{ end }} + + {{ if .RefreshToken }} +
+
Refresh Token:
+ 
{{ .RefreshToken }}
+
+ + +
+
+ {{ end }} + + Back to Home + + + `))