feat(example): apply new design

.editorconfig

@@ -9,3 +9,6 @@ indent_style = space
 indent_size = tab
 tab_width = 2
 
+[{go.mod,go.sum,*.go}]
+indent_style = tab
+indent_size = 4

example/main.go

@@ -1,6 +1,8 @@
 package main
 
 import (
+	"encoding/json"
+	"fmt"
 	"github.com/labstack/echo/v4"
 	mw "github.com/labstack/echo/v4/middleware"
 	"github.com/teamhanko/hanko/example/middleware"
@@ -9,11 +11,12 @@ import (
 	"log"
 	"net/http"
 	"os"
+	"time"
 )
 
 func main() {
 	t := &Template{
-		templates: template.Must(template.ParseGlob("public/html/index.html")),
+		templates: template.Must(template.ParseGlob("public/html/*.html")),
 	}
 
 	hankoUrl := getEnv("HANKO_URL")
@@ -28,6 +31,7 @@ func main() {
 	}
 
 	e := echo.New()
+	e.Renderer = t
 
 	e.Use(mw.LoggerWithConfig(mw.LoggerConfig{
 		Format: `{"time":"${time_rfc3339_nano}","time_unix":"${time_unix}","id":"${id}","remote_ip":"${remote_ip}",` +
@@ -39,15 +43,60 @@ func main() {
 	e.Use(middleware.CacheControlMiddleware())
 	e.Renderer = t
 
+	e.Static("/static", "public/assets")
+
 	e.GET("/", func(c echo.Context) error {
 		indexData := IndexData{
 			HankoUrl:        hankoUrl,
 			HankoElementUrl: hankoElementUrl,
 		}
 		return c.Render(http.StatusOK, "index.html", &indexData)
 	})
-	e.File("/secured", "public/html/secured.html", middleware.SessionMiddleware(hankoUrlInternal))
+
 	e.File("/unauthorized", "public/html/unauthorized.html")
+	e.GET("/secured", func(c echo.Context) error {
+		client := http.Client{}
+		req, err := http.NewRequest("GET", fmt.Sprintf("%s/users/%s", hankoUrlInternal, c.Get("user")), nil)
+		req.Header.Set("Authorization", fmt.Sprintf("Bearer %s", c.Get("token")))
+		if err != nil {
+			return c.Render(http.StatusOK, "error.html", map[string]interface{}{
+				"error": err.Error(),
+			})
+		}
+
+		resp, err := client.Do(req)
+		if err != nil {
+			return c.Render(http.StatusOK, "error.html", map[string]interface{}{
+				"error": err.Error(),
+			})
+		}
+
+		if resp != nil {
+			defer resp.Body.Close()
+		}
+
+		user := struct {
+			ID                  string    `json:"id"`
+			Email               string    `json:"email"`
+			CreatedAt           time.Time `json:"created_at"`
+			UpdatedAt           time.Time `json:"updated_at"`
+			Verified            bool      `json:"verified"`
+			WebauthnCredentials []struct {
+				ID string `json:"id"`
+			} `json:"webauthn_credentials"`
+		}{}
+		err = json.NewDecoder(resp.Body).Decode(&user)
+
+		if err != nil {
+			return c.Render(http.StatusOK, "error.html", map[string]interface{}{
+				"error": err.Error(),
+			})
+		}
+
+		return c.Render(http.StatusOK, "secured.html", map[string]interface{}{
+			"user": user.Email,
+		})
+	}, middleware.SessionMiddleware(hankoUrlInternal))
 
 	e.GET("/logout", func(c echo.Context) error {
 		cookie := &http.Cookie{

example/middleware/session.go

@@ -31,6 +31,8 @@ func SessionMiddleware(hankoUrl string) echo.MiddlewareFunc {
 			}
 
 			log.Printf("session for user '%s' verified successfully", token.Subject())
+			c.Set("token", cookie.Value)
+			c.Set("user", token.Subject())
 
 			return next(c)
 		}

example/public/assets/css/common.css

@@ -0,0 +1,47 @@
+@import url("fonts.css");
+
+body {
+    margin: 0;
+    text-align: center;
+    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background: url("../img/bg.png") no-repeat center center fixed;
+    background-size: cover;
+}
+
+.main {
+    margin-top: 8rem;
+}
+
+.footer {
+    margin-top: 6rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.footer img{
+    padding-bottom: 2.5rem;
+}
+
+@media screen and (max-height: 667px) {
+    .main {
+        margin-top: 1rem;
+    }
+    .footer {
+        margin-top: 2rem;
+    }
+    .footer img {
+        padding-bottom: 1.5rem;
+    }
+}
+
+@media screen and (max-width: 600px) {
+    .main {
+        padding: 0 1.25rem;
+    }
+}

example/public/assets/css/fonts.css

@@ -0,0 +1,39 @@
+/* inter-regular - latin */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    src: url('../fonts/inter-v12-latin-regular.eot'); /* IE9 Compat Modes */
+    src: local(''),
+    url('../fonts/inter-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('../fonts/inter-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+    url('../fonts/inter-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
+    url('../fonts/inter-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+    url('../fonts/inter-v12-latin-regular.svg#Inter') format('svg'); /* Legacy iOS */
+}
+/* inter-500 - latin */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 500;
+    src: url('../fonts/inter-v12-latin-500.eot'); /* IE9 Compat Modes */
+    src: local(''),
+    url('../fonts/inter-v12-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('../fonts/inter-v12-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
+    url('../fonts/inter-v12-latin-500.woff') format('woff'), /* Modern Browsers */
+    url('../fonts/inter-v12-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
+    url('../fonts/inter-v12-latin-500.svg#Inter') format('svg'); /* Legacy iOS */
+}
+/* inter-600 - latin */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    src: url('../fonts/inter-v12-latin-600.eot'); /* IE9 Compat Modes */
+    src: local(''),
+    url('../fonts/inter-v12-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('../fonts/inter-v12-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
+    url('../fonts/inter-v12-latin-600.woff') format('woff'), /* Modern Browsers */
+    url('../fonts/inter-v12-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
+    url('../fonts/inter-v12-latin-600.svg#Inter') format('svg'); /* Legacy iOS */
+}

example/public/assets/css/index.css

@@ -0,0 +1,53 @@
+@import url("common.css");
+
+hanko-auth {
+    --brand-color-h: 230;
+    --brand-color-s: 100%;
+    --brand-color-l: 90%;
+
+    --font-family: "Inter", sans-serif;
+    --border-radius: 16px;
+    --input-height: 52px;
+}
+
+hanko-auth::part(input) {
+    border-radius: 5px;
+    border-color: #BFC2CD;
+}
+
+hanko-auth::part(container) {
+    margin: auto;
+    min-width: 300px;
+    max-width: 450px;
+    padding: 20px;
+}
+
+hanko-auth::part(primary-button) {
+    background-color: #CBD4FF;
+    color: black;
+    border-style: none;
+    border-radius: 5px;
+    height: 52px;
+    font-weight: 500;
+}
+
+hanko-auth::part(primary-button):hover {
+    background-color: #b3beff;
+}
+
+hanko-auth::part(secondary-button) {
+    background-color: #506CF0;
+    color: white;
+    border-style: none;
+    border-radius: 5px;
+    height: 52px;
+    font-weight: 500;
+}
+
+hanko-auth::part(secondary-button):hover {
+    background-color: #6980f2;
+}
+
+hanko-auth::part(divider) {
+    border-bottom-color: #BFC2CD;
+}

example/public/assets/css/secured.css

@@ -0,0 +1,35 @@
+@import url("common.css");
+
+.main {
+    color: white;
+}
+
+.nav__itemList {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+.nav__listItem {
+    float: right;
+}
+
+.nav__link,
+.nav__link:visited,
+.nav__link:hover,
+.nav__link:active {
+    display: block;
+    margin: 2.5rem;
+    color: white;
+    background-color: transparent;
+    text-decoration: none;
+}
+
+.nav__link:hover {
+    text-decoration: underline;
+}
+
+.profile {
+    min-height: 350px;
+}

example/public/assets/css/unauthorized.css

@@ -0,0 +1,22 @@
+@import url("common.css");
+
+.main {
+    color: white;
+}
+
+a,
+a:visited,
+a:hover,
+a:active {
+    display: block;
+    margin: 2.5rem;
+    color: white;
+    background-color: transparent;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+