Style and add OIDC logo to the login page.

cmd/auth.go

@@ -2,6 +2,7 @@ package main
 
 import (
 	"net/http"
+	"net/url"
 	"strings"
 	"time"
 
@@ -15,11 +16,19 @@ type loginTpl struct {
 	Title       string
 	Description string
 
-	NextURI         string
+	NextURI          string
-	Nonce           string
+	Nonce            string
-	PasswordEnabled bool
+	PasswordEnabled  bool
-	OIDCEnabled     bool
+	OIDCProvider     string
-	Error           string
+	OIDCProviderLogo string
+	Error            string
+}
+
+var oidcProviders = map[string]bool{
+	"google.com":          true,
+	"microsoftonline.com": true,
+	"auth0.com":           true,
+	"github.com":          true,
 }
 
 // handleLoginPage renders the login page and handles the login form.
@@ -33,11 +42,33 @@ func handleLoginPage(c echo.Context) error {
 		next = uriAdmin
 	}
 
+	oidcProvider := ""
+	oidcProviderLogo := ""
+	if app.constants.Security.OIDC.Enabled {
+		oidcProviderLogo = "oidc.png"
+		u, err := url.Parse(app.constants.Security.OIDC.Provider)
+		if err == nil {
+			h := strings.Split(u.Hostname(), ".")
+
+			// Get the last two h for the root domain
+			if len(h) >= 2 {
+				oidcProvider = h[len(h)-2] + "." + h[len(h)-1]
+			} else {
+				oidcProvider = u.Hostname()
+			}
+
+			if _, ok := oidcProviders[oidcProvider]; ok {
+				oidcProviderLogo = oidcProvider + ".png"
+			}
+		}
+	}
+
 	out := loginTpl{
-		Title:           app.i18n.T("users.login"),
+		Title:            app.i18n.T("users.login"),
-		PasswordEnabled: true,
+		PasswordEnabled:  true,
-		OIDCEnabled:     true,
+		OIDCProvider:     oidcProvider,
-		NextURI:         next,
+		OIDCProviderLogo: oidcProviderLogo,
+		NextURI:          next,
 	}
 
 	// Login request.

i18n/en.json

@@ -596,7 +596,7 @@
     "templates.rawHTML": "Raw HTML",
     "templates.subject": "Subject",
     "users.login": "Login",
-    "users.loginOIDC": "Login with OIDC",
+    "users.loginOIDC": "Login with {name}",
     "users.logout": "Logout",
     "users.profile": "Profile",
     "users.lastLogin": "Last login",

static/public/static/style.css

@@ -87,7 +87,8 @@ input[disabled] {
   color: #0055d4;
 }
 .button.button-outline:hover {
-  background-color: #0055d4;
+  border-color: #333;
+  background-color: #333;
   color: #fff;
 }
 
@@ -181,6 +182,21 @@ input[disabled] {
     font-weight: bold;
   }
 
+.login .submit {
+  margin-top: 20px;
+}
+  .login button {
+    width: 100%;
+    vertical-align: middle;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .login button img {
+    max-width: 24px;
+    margin-right: 10px;
+  }
+
 #btn-back {
   display: none;
 }

static/public/templates/login.html

@@ -1,7 +1,7 @@
 {{ define "admin-login" }}
 {{ template "header" .}}
 
-<section>
+<section class="login">
 	<h2>{{ .L.T "users.login"}}</h2>
 	{{ if .Data.PasswordEnabled }}
 	<form method="post" action="" class="form">
@@ -19,16 +19,19 @@
 
 			{{ if .Data.Error }}<p><span class="error">{{ .Data.Error }}</span></p>{{ end }}
 
-			<p><button class="button" type="submit">{{ .L.T "users.login" }}</button></p>
+			<p class="submit"><button class="button" type="submit">{{ .L.T "users.login" }}</button></p>
 		</div>
 	</form>
 	{{ end }}
 
-	{{ if .Data.OIDCEnabled }}
+	{{ if .Data.OIDCProvider }}
 	<form method="post" action="/oidc/login">
 		<div>
 			<input type="hidden" name="nonce" value="{{ .Data.Nonce }}" />
-			<p><button type="submit">{{ .L.T "users.loginOIDC" }}</button></p>
+			<p><button class="button button-outline" type="submit">
+				<img src="{{ .RootURL }}/public/static/auth/{{ .Data.OIDCProviderLogo }}" alt="" />
+				{{ .L.Ts "users.loginOIDC" "name" .Data.OIDCProvider }}
+			</button></p>
 		</div>
 	</form>
 	{{ end }}