Update templates to bulma framework

oauthproxy.go

@@ -478,7 +478,7 @@ func (p *OAuthProxy) serveHTTP(rw http.ResponseWriter, req *http.Request) {
 
 	switch path := req.URL.Path; {
 	case path == p.RobotsPath:
-		p.RobotsTxt(rw)
+		p.RobotsTxt(rw, req)
 	case p.IsAllowedRequest(req):
 		p.SkipAuthProxy(rw, req)
 	case path == p.SignInPath:
@@ -499,30 +499,49 @@ func (p *OAuthProxy) serveHTTP(rw http.ResponseWriter, req *http.Request) {
 }
 
 // RobotsTxt disallows scraping pages from the OAuthProxy
-func (p *OAuthProxy) RobotsTxt(rw http.ResponseWriter) {
+func (p *OAuthProxy) RobotsTxt(rw http.ResponseWriter, req *http.Request) {
 	_, err := fmt.Fprintf(rw, "User-agent: *\nDisallow: /")
 	if err != nil {
 		logger.Printf("Error writing robots.txt: %v", err)
-		p.ErrorPage(rw, http.StatusInternalServerError, "Internal Server Error", err.Error())
+		p.ErrorPage(rw, req, http.StatusInternalServerError, "Internal Server Error", err.Error())
 		return
 	}
 	rw.WriteHeader(http.StatusOK)
 }
 
 // ErrorPage writes an error response
-func (p *OAuthProxy) ErrorPage(rw http.ResponseWriter, code int, title string, message string) {
+func (p *OAuthProxy) ErrorPage(rw http.ResponseWriter, req *http.Request, code int, title string, message string) {
+	redirectURL, err := p.getAppRedirect(req)
+	if err != nil {
+		logger.Errorf("Error obtaining redirect: %v", err)
+	}
+	if redirectURL == p.SignInPath || redirectURL == "" {
+		redirectURL = "/"
+	}
+
 	rw.WriteHeader(code)
+
+	// We allow unescaped template.HTML since it is user configured options
+	/* #nosec G203 */
 	t := struct {
 		Title       string
 		Message     string
 		ProxyPrefix string
+		StatusCode  int
+		Redirect    string
+		Footer      template.HTML
+		Version     string
 	}{
-		Title:       fmt.Sprintf("%d %s", code, title),
+		Title:       title,
 		Message:     message,
 		ProxyPrefix: p.ProxyPrefix,
+		StatusCode:  code,
+		Redirect:    redirectURL,
+		Footer:      template.HTML(p.Footer),
+		Version:     VERSION,
 	}
-	err := p.templates.ExecuteTemplate(rw, "error.html", t)
+
-	if err != nil {
+	if err := p.templates.ExecuteTemplate(rw, "error.html", t); err != nil {
 		logger.Printf("Error rendering error.html template: %v", err)
 		http.Error(rw, "Internal Server Error", http.StatusInternalServerError)
 	}
@@ -570,7 +589,7 @@ func (p *OAuthProxy) SignInPage(rw http.ResponseWriter, req *http.Request, code
 	err := p.ClearSessionCookie(rw, req)
 	if err != nil {
 		logger.Printf("Error clearing session cookie: %v", err)
-		p.ErrorPage(rw, http.StatusInternalServerError, "Internal Server Error", err.Error())
+		p.ErrorPage(rw, req, http.StatusInternalServerError, "Internal Server Error", err.Error())
 		return
 	}
 	rw.WriteHeader(code)
@@ -578,7 +597,7 @@ func (p *OAuthProxy) SignInPage(rw http.ResponseWriter, req *http.Request, code
 	redirectURL, err := p.getAppRedirect(req)
 	if err != nil {
 		logger.Errorf("Error obtaining redirect: %v", err)
-		p.ErrorPage(rw, http.StatusInternalServerError, "Internal Server Error", err.Error())
+		p.ErrorPage(rw, req, http.StatusInternalServerError, "Internal Server Error", err.Error())
 		return
 	}
 
@@ -611,7 +630,7 @@ func (p *OAuthProxy) SignInPage(rw http.ResponseWriter, req *http.Request, code
 	err = p.templates.ExecuteTemplate(rw, "sign_in.html", t)
 	if err != nil {
 		logger.Printf("Error rendering sign_in.html template: %v", err)
-		p.ErrorPage(rw, http.StatusInternalServerError, "Internal Server Error", err.Error())
+		p.ErrorPage(rw, req, http.StatusInternalServerError, "Internal Server Error", err.Error())
 	}
 }
 
@@ -639,7 +658,7 @@ func (p *OAuthProxy) SignIn(rw http.ResponseWriter, req *http.Request) {
 	redirect, err := p.getAppRedirect(req)
 	if err != nil {
 		logger.Errorf("Error obtaining redirect: %v", err)
-		p.ErrorPage(rw, http.StatusInternalServerError, "Internal Server Error", err.Error())
+		p.ErrorPage(rw, req, http.StatusInternalServerError, "Internal Server Error", err.Error())
 		return
 	}
 
@@ -649,7 +668,7 @@ func (p *OAuthProxy) SignIn(rw http.ResponseWriter, req *http.Request) {
 		err = p.SaveSession(rw, req, session)
 		if err != nil {
 			logger.Printf("Error saving session: %v", err)
-			p.ErrorPage(rw, http.StatusInternalServerError, "Internal Server Error", err.Error())
+			p.ErrorPage(rw, req, http.StatusInternalServerError, "Internal Server Error", err.Error())
 			return
 		}
 		http.Redirect(rw, req, redirect, http.StatusFound)
@@ -688,7 +707,7 @@ func (p *OAuthProxy) UserInfo(rw http.ResponseWriter, req *http.Request) {
 	err = json.NewEncoder(rw).Encode(userInfo)
 	if err != nil {
 		logger.Printf("Error encoding user info: %v", err)
-		p.ErrorPage(rw, http.StatusInternalServerError, "Internal Server Error", err.Error())
+		p.ErrorPage(rw, req, http.StatusInternalServerError, "Internal Server Error", err.Error())
 	}
 }
 
@@ -697,13 +716,13 @@ func (p *OAuthProxy) SignOut(rw http.ResponseWriter, req *http.Request) {
 	redirect, err := p.getAppRedirect(req)
 	if err != nil {
 		logger.Errorf("Error obtaining redirect: %v", err)
-		p.ErrorPage(rw, http.StatusInternalServerError, "Internal Server Error", err.Error())
+		p.ErrorPage(rw, req, http.StatusInternalServerError, "Internal Server Error", err.Error())
 		return
 	}
 	err = p.ClearSessionCookie(rw, req)
 	if err != nil {
 		logger.Errorf("Error clearing session cookie: %v", err)
-		p.ErrorPage(rw, http.StatusInternalServerError, "Internal Server Error", err.Error())
+		p.ErrorPage(rw, req, http.StatusInternalServerError, "Internal Server Error", err.Error())
 		return
 	}
 	http.Redirect(rw, req, redirect, http.StatusFound)
@@ -715,14 +734,14 @@ func (p *OAuthProxy) OAuthStart(rw http.ResponseWriter, req *http.Request) {
 	nonce, err := encryption.Nonce()
 	if err != nil {
 		logger.Errorf("Error obtaining nonce: %v", err)
-		p.ErrorPage(rw, http.StatusInternalServerError, "Internal Server Error", err.Error())
+		p.ErrorPage(rw, req, http.StatusInternalServerError, "Internal Server Error", err.Error())
 		return
 	}
 	p.SetCSRFCookie(rw, req, nonce)
 	redirect, err := p.getAppRedirect(req)
 	if err != nil {
 		logger.Errorf("Error obtaining redirect: %v", err)
-		p.ErrorPage(rw, http.StatusInternalServerError, "Internal Server Error", err.Error())
+		p.ErrorPage(rw, req, http.StatusInternalServerError, "Internal Server Error", err.Error())
 		return
 	}
 	redirectURI := p.getOAuthRedirectURI(req)
@@ -738,34 +757,34 @@ func (p *OAuthProxy) OAuthCallback(rw http.ResponseWriter, req *http.Request) {
 	err := req.ParseForm()
 	if err != nil {
 		logger.Errorf("Error while parsing OAuth2 callback: %v", err)
-		p.ErrorPage(rw, http.StatusInternalServerError, "Internal Server Error", err.Error())
+		p.ErrorPage(rw, req, http.StatusInternalServerError, "Internal Server Error", err.Error())
 		return
 	}
 	errorString := req.Form.Get("error")
 	if errorString != "" {
 		logger.Errorf("Error while parsing OAuth2 callback: %s", errorString)
-		p.ErrorPage(rw, http.StatusForbidden, "Permission Denied", errorString)
+		p.ErrorPage(rw, req, http.StatusForbidden, "Permission Denied", errorString)
 		return
 	}
 
 	session, err := p.redeemCode(req)
 	if err != nil {
 		logger.Errorf("Error redeeming code during OAuth2 callback: %v", err)
-		p.ErrorPage(rw, http.StatusInternalServerError, "Internal Server Error", "Internal Error")
+		p.ErrorPage(rw, req, http.StatusInternalServerError, "Internal Server Error", "Internal Error")
 		return
 	}
 
 	err = p.enrichSessionState(req.Context(), session)
 	if err != nil {
 		logger.Errorf("Error creating session during OAuth2 callback: %v", err)
-		p.ErrorPage(rw, http.StatusInternalServerError, "Internal Server Error", "Internal Error")
+		p.ErrorPage(rw, req, http.StatusInternalServerError, "Internal Server Error", "Internal Error")
 		return
 	}
 
 	state := strings.SplitN(req.Form.Get("state"), ":", 2)
 	if len(state) != 2 {
 		logger.Error("Error while parsing OAuth2 state: invalid length")
-		p.ErrorPage(rw, http.StatusInternalServerError, "Internal Server Error", "Invalid State")
+		p.ErrorPage(rw, req, http.StatusInternalServerError, "Internal Server Error", "Invalid State")
 		return
 	}
 	nonce := state[0]
@@ -773,13 +792,13 @@ func (p *OAuthProxy) OAuthCallback(rw http.ResponseWriter, req *http.Request) {
 	c, err := req.Cookie(p.CSRFCookieName)
 	if err != nil {
 		logger.PrintAuthf(session.Email, req, logger.AuthFailure, "Invalid authentication via OAuth2: unable to obtain CSRF cookie")
-		p.ErrorPage(rw, http.StatusForbidden, "Permission Denied", err.Error())
+		p.ErrorPage(rw, req, http.StatusForbidden, "Permission Denied", err.Error())
 		return
 	}
 	p.ClearCSRFCookie(rw, req)
 	if c.Value != nonce {
 		logger.PrintAuthf(session.Email, req, logger.AuthFailure, "Invalid authentication via OAuth2: CSRF token mismatch, potential attack")
-		p.ErrorPage(rw, http.StatusForbidden, "Permission Denied", "CSRF Failed")
+		p.ErrorPage(rw, req, http.StatusForbidden, "Permission Denied", "CSRF Failed")
 		return
 	}
 
@@ -797,13 +816,13 @@ func (p *OAuthProxy) OAuthCallback(rw http.ResponseWriter, req *http.Request) {
 		err := p.SaveSession(rw, req, session)
 		if err != nil {
 			logger.Errorf("Error saving session state for %s: %v", remoteAddr, err)
-			p.ErrorPage(rw, http.StatusInternalServerError, "Internal Server Error", err.Error())
+			p.ErrorPage(rw, req, http.StatusInternalServerError, "Internal Server Error", err.Error())
 			return
 		}
 		http.Redirect(rw, req, redirect, http.StatusFound)
 	} else {
 		logger.PrintAuthf(session.Email, req, logger.AuthFailure, "Invalid authentication via OAuth2: unauthorized")
-		p.ErrorPage(rw, http.StatusForbidden, "Permission Denied", "Invalid Account")
+		p.ErrorPage(rw, req, http.StatusForbidden, "Permission Denied", "Invalid Account")
 	}
 }
 
@@ -885,12 +904,12 @@ func (p *OAuthProxy) Proxy(rw http.ResponseWriter, req *http.Request) {
 		}
 
 	case ErrAccessDenied:
-		p.ErrorPage(rw, http.StatusUnauthorized, "Permission Denied", "Unauthorized")
+		p.ErrorPage(rw, req, http.StatusUnauthorized, "Permission Denied", "Unauthorized")
 
 	default:
 		// unknown error
 		logger.Errorf("Unexpected internal error: %v", err)
-		p.ErrorPage(rw, http.StatusInternalServerError,
+		p.ErrorPage(rw, req, http.StatusInternalServerError,
 			"Internal Error", "Internal Error")
 	}
 }

templates.go

@@ -29,112 +29,24 @@ func getTemplates() *template.Template {
 <!DOCTYPE html>
 <html lang="en" charset="utf-8">
   <head>
-	<title>Sign In</title>
+    <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <title>Sign In</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
+
     <style>
       body {
-		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+        height: 100vh;
-		font-size: 14px;
-		line-height: 1.42857143;
-		color: #333;
-		background: #f0f0f0;
       }
-	.signin {
+      .sign-in-box {
-		display:block;
-		margin:20px auto;
         max-width: 400px;
-		background: #fff;
+        margin: 1.25rem auto;
-		border:1px solid #ccc;
-		border-radius: 10px;
-		padding: 20px;
-	}
-	.center {
-		text-align:center;
-	}
-	.btn {
-		color: #fff;
-		background-color: #428bca;
-		border: 1px solid #357ebd;
-		-webkit-border-radius: 4;
-		-moz-border-radius: 4;
-		border-radius: 4px;
-		font-size: 14px;
-		padding: 6px 12px;
-	  	text-decoration: none;
-		cursor: pointer;
-	}
-
-	.btn:hover {
-		background-color: #3071a9;
-		border-color: #285e8e;
-		text-decoration: none;
-	}
-	label {
-		display: inline-block;
-		max-width: 100%;
-		margin-bottom: 5px;
-		font-weight: 700;
-	}
-	input {
-		display: block;
-		width: 100%;
-		height: 34px;
-		padding: 6px 12px;
-		font-size: 14px;
-		line-height: 1.42857143;
-		color: #555;
-		background-color: #fff;
-		background-image: none;
-		border: 1px solid #ccc;
-		border-radius: 4px;
-		-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-		box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-		-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-		-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
-		transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
-		margin:0;
-		box-sizing: border-box;
-	}
-	footer {
-		display:block;
-		font-size:10px;
-		color:#aaa;
-		text-align:center;
-		margin-bottom:10px;
       }
       footer a {
-		display:inline-block;
-		height:25px;
-		line-height:25px;
-		color:#aaa;
         text-decoration: underline;
       }
-	footer a:hover {
-		color:#aaa;
-	}
     </style>
-</head>
-<body>
-	<div class="signin center">
-	<form method="GET" action="{{.ProxyPrefix}}/start">
-	<input type="hidden" name="rd" value="{{.Redirect}}">
-	{{ if .SignInMessage }}
-	<p>{{.SignInMessage}}</p>
-	{{ end}}
-	<button type="submit" class="btn">Sign in with {{.ProviderName}}</button><br/>
-	</form>
-	</div>
 
-	{{ if .CustomLogin }}
-	<div class="signin">
-	<form method="POST" action="{{.ProxyPrefix}}/sign_in">
-		<input type="hidden" name="rd" value="{{.Redirect}}">
-		<label for="username">Username:</label><input type="text" name="username" id="username" size="10"><br/>
-		<label for="password">Password:</label><input type="password" name="password" id="password" size="10"><br/>
-		<button type="submit" class="btn">Sign In</button>
-	</form>
-	</div>
-	{{ end }}
     <script>
       if (window.location.hash) {
         (function() {
@@ -151,14 +63,54 @@ func getTemplates() *template.Template {
         })();
       }
     </script>
-	<footer>
+  </head>
+  <body class="has-background-light">
+  <section class="section">
+    <div class="box block sign-in-box has-text-centered">
+      <form method="GET" action="{{.ProxyPrefix}}/start">
+        <input type="hidden" name="rd" value="{{.Redirect}}">
+          {{ if .SignInMessage }}
+          <p class="block">{{.SignInMessage}}</p>
+          {{ end}}
+          <button type="submit" class="button block is-primary">Sign in with {{.ProviderName}}</button>
+      </form>
+
+      {{ if .CustomLogin }}
+      <hr>
+
+      <form method="POST" action="{{.ProxyPrefix}}/sign_in" class="block">
+        <input type="hidden" name="rd" value="{{.Redirect}}">
+
+        <div class="field">
+          <label class="label" for="username">Username</label>
+          <div class="control">
+            <input class="input" type="email" placeholder="e.g. userx@example.com"  name="username" id="username">
+          </div>
+        </div>
+
+        <div class="field">
+          <label class="label" for="password">Password</label>
+          <div class="control">
+            <input class="input" type="password" placeholder="********" name="password" id="password">
+          </div>
+        </div>
+        <button class="button is-primary">Sign in</button>
+        {{ end }}
+    </form>
+    </div>
+  </section>
+
+  <footer class="footer has-text-grey has-background-light is-size-7">
+    <div class="content has-text-centered">
     	{{ if eq .Footer "-" }}
     	{{ else if eq .Footer ""}}
-	Secured with <a href="https://github.com/oauth2-proxy/oauth2-proxy#oauth2_proxy">OAuth2 Proxy</a> version {{.Version}}
+    	<p>Secured with <a href="https://github.com/oauth2-proxy/oauth2-proxy#oauth2_proxy" class="has-text-grey">OAuth2 Proxy</a> version {{.Version}}</p>
     	{{ else }}
-	{{.Footer}}
+    	<p>{{.Footer}}</p>
     	{{ end }}
+    </div>
 	</footer>
+
   </body>
 </html>
 {{end}}`)
@@ -170,16 +122,100 @@ func getTemplates() *template.Template {
 <!DOCTYPE html>
 <html lang="en" charset="utf-8">
 <head>
-	<title>{{.Title}}</title>
+  <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+  	<title>{{.StatusCode}} {{.Title}}</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
+
+  <script type="text/javascript">
+    document.addEventListener('DOMContentLoaded', function() {
+    	let cardToggles = document.getElementsByClassName('card-toggle');
+    	for (let i = 0; i < cardToggles.length; i++) {
+    		cardToggles[i].addEventListener('click', e => {
+    			e.currentTarget.parentElement.parentElement.childNodes[3].classList.toggle('is-hidden');
+    		});
+    	}
+    });
+  </script>
+
+  <style>
+    body {
+      height: 100vh;
+    }
+    .error-box {
+      margin: 1.25rem auto;
+      max-width: 600px;
+    }
+    .status-code {
+      font-size: 12rem;
+      font-weight: 600;
+    }
+    #more-info.card {
+      border: 1px solid #f0f0f0;
+    }
+    footer a {
+      text-decoration: underline;
+    }
+  </style>
 </head>
-<body>
+<body class="has-background-light">
-	<h2>{{.Title}}</h2>
+  <section class="section">
-	<p>{{.Message}}</p>
+    <div class="box block error-box has-text-centered">
+      <div class="status-code">{{.StatusCode}}</div>
+      <div class="block">
+        <h1 class="subtitle is-1">{{.Title}}</h1>
+      </div>
+
+      {{ if .Message }}
+      <div id="more-info" class="block card is-fullwidth is-shadowless">
+  			<header class="card-header is-shadowless">
+  				<p class="card-header-title">More Info</p>
+  				<a class="card-header-icon card-toggle">
+  					<i class="fa fa-angle-down"></i>
+  				</a>
+  			</header>
+  			<div class="card-content has-text-left is-hidden">
+  				<div class="content">
+  					{{.Message}}
+  				</div>
+  			</div>
+  		</div>
+      {{ end }}
+
       <hr>
-	<p><a href="{{.ProxyPrefix}}/sign_in">Sign In</a></p>
+
+      <div class="columns">
+        <div class="column">
+          <form method="GET" action="{{.Redirect}}">
+            <button type="submit" class="button is-danger is-fullwidth">Go back</button>
+          </form>
+        </div>
+        <div class="column">
+          <form method="GET" action="{{.ProxyPrefix}}/sign_in">
+            <input type="hidden" name="rd" value="{{.Redirect}}">
+            <button type="submit" class="button is-primary is-fullwidth">Sign in</button>
+          </form>
+        </div>
+      </div>
+
+    </div>
+  </section>
+
+  <footer class="footer has-text-grey has-background-light is-size-7">
+    <div class="content has-text-centered">
+    	{{ if eq .Footer "-" }}
+    	{{ else if eq .Footer ""}}
+    	<p>Secured with <a href="https://github.com/oauth2-proxy/oauth2-proxy#oauth2_proxy" class="has-text-grey">OAuth2 Proxy</a> version {{.Version}}</p>
+    	{{ else }}
+    	<p>{{.Footer}}</p>
+    	{{ end }}
+    </div>
+	</footer>
+
   </body>
-</html>{{end}}`)
+</html>
+{{end}}`)
 	if err != nil {
 		logger.Fatalf("failed parsing template %s", err)
 	}