implement an error alert message for invalid basic auth credentials

pkg/app/pagewriter/pagewriter.go

@@ -10,7 +10,7 @@ import (
 // It can also be used to write errors for the http.ReverseProxy used in the
 // upstream package.
 type Writer interface {
-	WriteSignInPage(rw http.ResponseWriter, req *http.Request, redirectURL string)
+	WriteSignInPage(rw http.ResponseWriter, req *http.Request, redirectURL string, statusCode int)
 	WriteErrorPage(rw http.ResponseWriter, opts ErrorPageOpts)
 	ProxyErrorHandler(rw http.ResponseWriter, req *http.Request, proxyErr error)
 	WriteRobotsTxt(rw http.ResponseWriter, req *http.Request)
@@ -108,7 +108,7 @@ func NewWriter(opts Opts) (Writer, error) {
 // If any of the funcs are not provided, a default implementation will be used.
 // This is primarily for us in testing.
 type WriterFuncs struct {
-	SignInPageFunc func(rw http.ResponseWriter, req *http.Request, redirectURL string)
+	SignInPageFunc func(rw http.ResponseWriter, req *http.Request, redirectURL string, statusCode int)
 	ErrorPageFunc  func(rw http.ResponseWriter, opts ErrorPageOpts)
 	ProxyErrorFunc func(rw http.ResponseWriter, req *http.Request, proxyErr error)
 	RobotsTxtfunc  func(rw http.ResponseWriter, req *http.Request)
@@ -117,9 +117,9 @@ type WriterFuncs struct {
 // WriteSignInPage implements the Writer interface.
 // If the SignInPageFunc is provided, this will be used, else a default
 // implementation will be used.
-func (w *WriterFuncs) WriteSignInPage(rw http.ResponseWriter, req *http.Request, redirectURL string) {
+func (w *WriterFuncs) WriteSignInPage(rw http.ResponseWriter, req *http.Request, redirectURL string, statusCode int) {
 	if w.SignInPageFunc != nil {
-		w.SignInPageFunc(rw, req, redirectURL)
+		w.SignInPageFunc(rw, req, redirectURL, statusCode)
 		return
 	}
 

pkg/app/pagewriter/sign_in.html

@@ -18,6 +18,28 @@
       .logo-box {
         margin: 1.5rem 3rem;
       }
+      .alert {
+        padding: 5px;
+        background-color: #f44336; /* Red */
+        color: white;
+        margin-bottom: 5px;
+        border-radius: 5px
+      }
+      /* The close button */
+      .closebtn {
+        margin-left: 10px;
+        color: white;
+        font-weight: bold;
+        float: right;
+        font-size: 22px;
+        line-height: 20px;
+        cursor: pointer;
+        transition: 0.3s;
+      }
+      /* When moving the mouse over the close button */
+      .closebtn:hover {
+        color: black;
+      }
       footer a {
         text-decoration: underline;
       }
@@ -62,6 +84,18 @@
         <button class="button is-primary">Sign in</button>
       </form>
       {{ end }}
+
+      {{ if eq .StatusCode 400 401 }}
+      <div class="alert">
+        <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
+        {{ if eq .StatusCode 400 }}
+        {{.StatusCode}}: Username cannot be empty
+        {{ else }}
+        {{.StatusCode}}: Invalid Username or Password
+        {{ end }}
+      </div> 
+      {{ end }}
+
     </div>
   </section>
 

pkg/app/pagewriter/sign_in_page.go

@@ -54,12 +54,13 @@ type signInPageWriter struct {
 
 // WriteSignInPage writes the sign-in page to the given response writer.
 // It uses the redirectURL to be able to set the final destination for the user post login.
-func (s *signInPageWriter) WriteSignInPage(rw http.ResponseWriter, req *http.Request, redirectURL string) {
+func (s *signInPageWriter) WriteSignInPage(rw http.ResponseWriter, req *http.Request, redirectURL string, statusCode int) {
 	// We allow unescaped template.HTML since it is user configured options
 	/* #nosec G203 */
 	t := struct {
 		ProviderName  string
 		SignInMessage template.HTML
+		StatusCode    int
 		CustomLogin   bool
 		Redirect      string
 		Version       string
@@ -69,6 +70,7 @@ func (s *signInPageWriter) WriteSignInPage(rw http.ResponseWriter, req *http.Req
 	}{
 		ProviderName:  s.providerName,
 		SignInMessage: template.HTML(s.signInMessage),
+		StatusCode:    statusCode,
 		CustomLogin:   s.displayLoginForm,
 		Redirect:      redirectURL,
 		Version:       s.version,