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"
)
const defaultErrorMessage = "An internal error occurred. Please contact your administrator for help."
var (
//go:embed login_form.gohtml
rawHTMLTemplate string
errorMappings = map[string]string{
"login_error": "Incorrect username or password.",
}
)
type PageData struct {
State string
IDPName string
State string
IDPName string
HasAlertError bool
AlertMessage string
Title string
}
func NewGetHandler(upstreamIDPs oidc.UpstreamIdentityProvidersLister) HandlerFunc {
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 {
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 {
return err
}

View File

@ -4,6 +4,7 @@
package login
import (
"fmt"
"net/http"
"net/http/httptest"
"testing"
@ -18,40 +19,13 @@ import (
func TestGetLogin(t *testing.T) {
const (
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 {
name string
decodedState *oidc.UpstreamStateParamData
encodedState string
errParam string
idps oidc.UpstreamIdentityProvidersLister
wantStatus int
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.
wantStatus: http.StatusOK,
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
t.Run(tt.name, func(t *testing.T) {
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()
err := handler(rsp, req, tt.encodedState, tt.decodedState)
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
--><!DOCTYPE html>
<html>
<head>
<title>{{.Title}}</title>
</head>
<body>
<h1>Pinniped</h1>
<p>{{ .IDPName }}</p>
{{if .HasAlertError}}
<div class="alert">
<span>{{.AlertMessage}}</span>
</div>
{{end}}
<form action="/login" method="post">
<div>
<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>
<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>
<input type="hidden" name="state" id="state" value="{{.State}}">
</div>
<button type="submit" name="submit" id="submit">Login</button>
<button type="submit" name="submit" id="submit">Log in</button>
</form>