Show error message on login page

Also add autocomplete attribute and title element

Signed-off-by: Margo Crawford <margaretc@vmware.com>
This commit is contained in:
Margo Crawford 2022-04-29 10:36:13 -07:00
parent 453c69af7d
commit 646c6ec9ed
3 changed files with 130 additions and 38 deletions

View File

@ -11,20 +11,40 @@ import (
"go.pinniped.dev/internal/oidc" "go.pinniped.dev/internal/oidc"
) )
const defaultErrorMessage = "An internal error occurred. Please contact your administrator for help."
var ( var (
//go:embed login_form.gohtml //go:embed login_form.gohtml
rawHTMLTemplate string rawHTMLTemplate string
errorMappings = map[string]string{
"login_error": "Incorrect username or password.",
}
) )
type PageData struct { type PageData struct {
State string State string
IDPName string IDPName string
HasAlertError bool
AlertMessage string
Title string
} }
func NewGetHandler(upstreamIDPs oidc.UpstreamIdentityProvidersLister) HandlerFunc { func NewGetHandler(upstreamIDPs oidc.UpstreamIdentityProvidersLister) HandlerFunc {
var parsedHTMLTemplate = template.Must(template.New("login_post.gohtml").Parse(rawHTMLTemplate)) var parsedHTMLTemplate = template.Must(template.New("login_post.gohtml").Parse(rawHTMLTemplate))
return func(w http.ResponseWriter, r *http.Request, encodedState string, decodedState *oidc.UpstreamStateParamData) error { return func(w http.ResponseWriter, r *http.Request, encodedState string, decodedState *oidc.UpstreamStateParamData) error {
err := parsedHTMLTemplate.Execute(w, &PageData{State: encodedState, IDPName: decodedState.UpstreamName}) alertError := r.URL.Query().Get("err")
message := errorMappings[alertError]
if message == "" {
message = defaultErrorMessage
}
err := parsedHTMLTemplate.Execute(w, &PageData{
State: encodedState,
IDPName: decodedState.UpstreamName,
HasAlertError: alertError != "",
AlertMessage: message,
Title: "Pinniped",
})
if err != nil { if err != nil {
return err return err
} }

View File

@ -4,6 +4,7 @@
package login package login
import ( import (
"fmt"
"net/http" "net/http"
"net/http/httptest" "net/http/httptest"
"testing" "testing"
@ -18,40 +19,13 @@ import (
func TestGetLogin(t *testing.T) { func TestGetLogin(t *testing.T) {
const ( const (
happyLdapIDPName = "some-ldap-idp" happyLdapIDPName = "some-ldap-idp"
happyGetResult = `<!DOCTYPE html>
<html>
<body>
<h1>Pinniped</h1>
<p>some-ldap-idp</p>
<form action="/login" method="post">
<div>
<label for="username"><b>Username</b></label>
<input type="text" placeholder="Username" name="username" id="username" required>
</div>
<div>
<label for="password"><b>Password</b></label>
<input type="password" placeholder="Password" name="password" id="password" required>
</div>
<div>
<input type="hidden" name="state" id="state" value="foo">
</div>
<button type="submit" name="submit" id="submit">Login</button>
</form>
</body>
</html>`
) )
tests := []struct { tests := []struct {
name string name string
decodedState *oidc.UpstreamStateParamData decodedState *oidc.UpstreamStateParamData
encodedState string encodedState string
errParam string
idps oidc.UpstreamIdentityProvidersLister idps oidc.UpstreamIdentityProvidersLister
wantStatus int wantStatus int
wantContentType string wantContentType string
@ -66,7 +40,57 @@ func TestGetLogin(t *testing.T) {
encodedState: "foo", // the encoded and decoded state don't match, but that verification is handled one level up. encodedState: "foo", // the encoded and decoded state don't match, but that verification is handled one level up.
wantStatus: http.StatusOK, wantStatus: http.StatusOK,
wantContentType: htmlContentType, wantContentType: htmlContentType,
wantBody: happyGetResult, wantBody: getHTMLResult(""),
},
{
name: "displays error banner when err=login_error param is sent",
decodedState: &oidc.UpstreamStateParamData{
UpstreamName: happyLdapIDPName,
UpstreamType: "ldap",
},
encodedState: "foo",
errParam: "login_error",
wantStatus: http.StatusOK,
wantContentType: htmlContentType,
wantBody: getHTMLResult(`
<div class="alert">
<span>Incorrect username or password.</span>
</div>
`),
},
{
name: "displays error banner when err=internal_error param is sent",
decodedState: &oidc.UpstreamStateParamData{
UpstreamName: happyLdapIDPName,
UpstreamType: "ldap",
},
encodedState: "foo",
errParam: "internal_error",
wantStatus: http.StatusOK,
wantContentType: htmlContentType,
wantBody: getHTMLResult(`
<div class="alert">
<span>An internal error occurred. Please contact your administrator for help.</span>
</div>
`),
},
// If we get an error that we don't recognize, that's also an error, so we
// should probably just tell you to contact your administrator...
{
name: "displays generic error banner when unrecognized err param is sent",
decodedState: &oidc.UpstreamStateParamData{
UpstreamName: happyLdapIDPName,
UpstreamType: "ldap",
},
encodedState: "foo",
errParam: "some_other_error",
wantStatus: http.StatusOK,
wantContentType: htmlContentType,
wantBody: getHTMLResult(`
<div class="alert">
<span>An internal error occurred. Please contact your administrator for help.</span>
</div>
`),
}, },
} }
@ -74,7 +98,11 @@ func TestGetLogin(t *testing.T) {
tt := test tt := test
t.Run(tt.name, func(t *testing.T) { t.Run(tt.name, func(t *testing.T) {
handler := NewGetHandler(tt.idps) handler := NewGetHandler(tt.idps)
req := httptest.NewRequest(http.MethodGet, "/login", nil) target := "/login?state=" + tt.encodedState
if tt.errParam != "" {
target += "&err=" + tt.errParam
}
req := httptest.NewRequest(http.MethodGet, target, nil)
rsp := httptest.NewRecorder() rsp := httptest.NewRecorder()
err := handler(rsp, req, tt.encodedState, tt.decodedState) err := handler(rsp, req, tt.encodedState, tt.decodedState)
require.NoError(t, err) require.NoError(t, err)
@ -86,3 +114,40 @@ func TestGetLogin(t *testing.T) {
}) })
} }
} }
func getHTMLResult(errorBanner string) string {
happyGetResult := `<!DOCTYPE html>
<html>
<head>
<title>Pinniped</title>
</head>
<body>
<h1>Pinniped</h1>
<p>some-ldap-idp</p>
%s
<form action="/login" method="post">
<div>
<label for="username"><b>Username</b></label>
<input type="text" name="username" id="username" autocomplete="username" required>
</div>
<div>
<label for="password"><b>Password</b></label>
<input type="password" name="password" id="password current-password" autocomplete="current-password" required>
</div>
<div>
<input type="hidden" name="state" id="state" value="foo">
</div>
<button type="submit" name="submit" id="submit">Log in</button>
</form>
</body>
</html>
`
return fmt.Sprintf(happyGetResult, errorBanner)
}

View File

@ -3,28 +3,35 @@ Copyright 2022 the Pinniped contributors. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0 SPDX-License-Identifier: Apache-2.0
--><!DOCTYPE html> --><!DOCTYPE html>
<html> <html>
<head>
<title>{{.Title}}</title>
</head>
<body> <body>
<h1>Pinniped</h1> <h1>Pinniped</h1>
<p>{{ .IDPName }}</p> <p>{{ .IDPName }}</p>
{{if .HasAlertError}}
<div class="alert">
<span>{{.AlertMessage}}</span>
</div>
{{end}}
<form action="/login" method="post"> <form action="/login" method="post">
<div> <div>
<label for="username"><b>Username</b></label> <label for="username"><b>Username</b></label>
<input type="text" placeholder="Username" name="username" id="username" required> <input type="text" name="username" id="username" autocomplete="username" required>
</div> </div>
<div> <div>
<label for="password"><b>Password</b></label> <label for="password"><b>Password</b></label>
<input type="password" placeholder="Password" name="password" id="password" required> <input type="password" name="password" id="password current-password" autocomplete="current-password" required>
</div> </div>
<div> <div>
<input type="hidden" name="state" id="state" value="{{.State}}"> <input type="hidden" name="state" id="state" value="{{.State}}">
</div> </div>
<button type="submit" name="submit" id="submit">Login</button> <button type="submit" name="submit" id="submit">Log in</button>
</form> </form>