pretty styling of sign in page
This commit is contained in:
		
							parent
							
								
									7fae45a7b6
								
							
						
					
					
						commit
						b8ef5107de
					
				
							
								
								
									
										6
									
								
								main.go
								
								
								
								
							
							
						
						
									
										6
									
								
								main.go
								
								
								
								
							|  | @ -86,7 +86,11 @@ func main() { | ||||||
| 	oauthproxy := NewOauthProxy(upstreamUrls, *clientID, *clientSecret, validator) | 	oauthproxy := NewOauthProxy(upstreamUrls, *clientID, *clientSecret, validator) | ||||||
| 	oauthproxy.SetRedirectUrl(redirectUrl) | 	oauthproxy.SetRedirectUrl(redirectUrl) | ||||||
| 	if len(googleAppsDomains) != 0 && *authenticatedEmailsFile == "" { | 	if len(googleAppsDomains) != 0 && *authenticatedEmailsFile == "" { | ||||||
| 		oauthproxy.SignInMessage = fmt.Sprintf("using a email address from the following domains: %v", strings.Join(googleAppsDomains, ", ")) | 		if len(googleAppsDomains) > 1 { | ||||||
|  | 			oauthproxy.SignInMessage = fmt.Sprintf("Authenticate using one of the following domains: %v", strings.Join(googleAppsDomains, ", ")) | ||||||
|  | 		} else { | ||||||
|  | 			oauthproxy.SignInMessage = fmt.Sprintf("Authenticate using %v", googleAppsDomains[0]) | ||||||
|  | 		} | ||||||
| 	} | 	} | ||||||
| 	if *htpasswdFile != "" { | 	if *htpasswdFile != "" { | ||||||
| 		oauthproxy.HtpasswdFile, err = NewHtpasswdFromFile(*htpasswdFile) | 		oauthproxy.HtpasswdFile, err = NewHtpasswdFromFile(*htpasswdFile) | ||||||
|  |  | ||||||
							
								
								
									
										96
									
								
								templates.go
								
								
								
								
							
							
						
						
									
										96
									
								
								templates.go
								
								
								
								
							|  | @ -9,26 +9,95 @@ func getTemplates() *template.Template { | ||||||
| 	t, err := template.New("foo").Parse(`{{define "sign_in.html"}} | 	t, err := template.New("foo").Parse(`{{define "sign_in.html"}} | ||||||
| <!DOCTYPE html> | <!DOCTYPE html> | ||||||
| <html lang="en" charset="utf-8"> | <html lang="en" charset="utf-8"> | ||||||
| <head><title>Sign In</title> | <head> | ||||||
| <!-- Optimized mobile viewport --> | 	<title>Sign In</title> | ||||||
| <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/> | 	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | ||||||
| <meta name="apple-mobile-web-app-capable" content="yes"> | 	<style> | ||||||
|  | 	body { | ||||||
|  | 		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; | ||||||
|  | 		font-size: 14px; | ||||||
|  | 		line-height: 1.42857143; | ||||||
|  | 		color: #333; | ||||||
|  | 		background: #f0f0f0; | ||||||
|  | 	} | ||||||
|  | 	.signin { | ||||||
|  | 		display:block; | ||||||
|  | 		margin:20px auto; | ||||||
|  | 		max-width:400px; | ||||||
|  | 		background: #fff; | ||||||
|  | 		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; | ||||||
|  | 		ext-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; | ||||||
|  | 	} | ||||||
|  | 	</style> | ||||||
| </head> | </head> | ||||||
| <body> | <body> | ||||||
|  | 	<div class="signin center"> | ||||||
| 	<form method="GET" action="/oauth2/start"> | 	<form method="GET" action="/oauth2/start"> | ||||||
| 	<input type="hidden" name="rd" value="{{.Redirect}}"> | 	<input type="hidden" name="rd" value="{{.Redirect}}"> | ||||||
| 	<button type="submit">Sign In w/ Google</button> | 	{{ if .SignInMessage }} | ||||||
| 	{{.SignInMessage}} | 	<p>{{.SignInMessage}}</p> | ||||||
|  | 	{{ end}} | ||||||
|  | 	<button type="submit" class="btn">Sign in with a Google Account</button><br/> | ||||||
| 	</form> | 	</form> | ||||||
|  | 	</div> | ||||||
|  | 	 | ||||||
| 	{{ if .Htpasswd }} | 	{{ if .Htpasswd }} | ||||||
| 	<fieldset> | 	<div class="signin"> | ||||||
| 	<form method="POST" action="/oauth2/sign_in"> | 	<form method="POST" action="/oauth2/sign_in"> | ||||||
| 		<input type="hidden" name="rd" value="{{.Redirect}}"> | 		<input type="hidden" name="rd" value="{{.Redirect}}"> | ||||||
| 		<label>Username: <input type="text" name="username" size="10"></label><br/> | 		<label for="username">Username:</label><input type="text" name="username" id="username" size="10"><br/> | ||||||
| 		<label>Password: <input type="password" name="password" size="10"></label><br/> | 		<label for="password">Password:</label><input type="password" name="password" id="password" size="10"><br/> | ||||||
| 		<button type="submit">Sign In</button> | 		<button type="submit" class="btn">Sign In</button> | ||||||
| 	</form> | 	</form> | ||||||
| 	</fieldset> | 	</div> | ||||||
| 	{{ end }} | 	{{ end }} | ||||||
| </body> | </body> | ||||||
| </html> | </html> | ||||||
|  | @ -40,7 +109,10 @@ func getTemplates() *template.Template { | ||||||
| 	t, err = t.Parse(`{{define "error.html"}} | 	t, err = t.Parse(`{{define "error.html"}} | ||||||
| <!DOCTYPE html> | <!DOCTYPE html> | ||||||
| <html lang="en" charset="utf-8"> | <html lang="en" charset="utf-8"> | ||||||
| <head><title>{{.Title}}</title></head> | <head> | ||||||
|  | 	<title>{{.Title}}</title> | ||||||
|  | 	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | ||||||
|  | </head> | ||||||
| <body> | <body> | ||||||
| 	<h2>{{.Title}}</h2> | 	<h2>{{.Title}}</h2> | ||||||
| 	<p>{{.Message}}</p> | 	<p>{{.Message}}</p> | ||||||
|  |  | ||||||
		Loading…
	
		Reference in New Issue