Skip to content

Commit 899749a

Browse files
jehiahjehiah
committed
Merge pull request bitly#36 from jehiah/better_templates_36
Better (mobile) sign in template
2 parents 7fae45a + b8ef510 commit 899749a

File tree

2 files changed

+91
-15
lines changed

2 files changed

+91
-15
lines changed

‎main.go‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,11 @@ func main() {
8686
oauthproxy := NewOauthProxy(upstreamUrls, *clientID, *clientSecret, validator)
8787
oauthproxy.SetRedirectUrl(redirectUrl)
8888
if len(googleAppsDomains) != 0 && *authenticatedEmailsFile == "" {
89-
oauthproxy.SignInMessage = fmt.Sprintf("using a email address from the following domains: %v", strings.Join(googleAppsDomains, ", "))
89+
if len(googleAppsDomains) > 1 {
90+
oauthproxy.SignInMessage = fmt.Sprintf("Authenticate using one of the following domains: %v", strings.Join(googleAppsDomains, ", "))
91+
} else {
92+
oauthproxy.SignInMessage = fmt.Sprintf("Authenticate using %v", googleAppsDomains[0])
93+
}
9094
}
9195
if *htpasswdFile != "" {
9296
oauthproxy.HtpasswdFile, err = NewHtpasswdFromFile(*htpasswdFile)

‎templates.go‎

Lines changed: 86 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,26 +9,95 @@ func getTemplates() *template.Template {
99
t, err := template.New("foo").Parse(`{{define "sign_in.html"}}
1010
<!DOCTYPE html>
1111
<html lang="en" charset="utf-8">
12-
<head><title>Sign In</title>
13-
<!-- Optimized mobile viewport -->
14-
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/>
15-
<meta name="apple-mobile-web-app-capable" content="yes">
12+
<head>
13+
<title>Sign In</title>
14+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
15+
<style>
16+
body {
17+
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
18+
font-size: 14px;
19+
line-height: 1.42857143;
20+
color: #333;
21+
background: #f0f0f0;
22+
}
23+
.signin {
24+
display:block;
25+
margin:20px auto;
26+
max-width:400px;
27+
background: #fff;
28+
border:1px solid #ccc;
29+
border-radius: 10px;
30+
padding: 20px;
31+
}
32+
.center {
33+
text-align:center;
34+
}
35+
.btn {
36+
color: #fff;
37+
background-color: #428bca;
38+
border: 1px solid #357ebd;
39+
-webkit-border-radius: 4;
40+
-moz-border-radius: 4;
41+
border-radius: 4px;
42+
font-size: 14px;
43+
padding: 6px 12px;
44+
text-decoration: none;
45+
cursor: pointer;
46+
}
47+
48+
.btn:hover {
49+
background-color: #3071a9;
50+
border-color: #285e8e;
51+
ext-decoration: none;
52+
}
53+
label {
54+
display: inline-block;
55+
max-width: 100%;
56+
margin-bottom: 5px;
57+
font-weight: 700;
58+
}
59+
input {
60+
display: block;
61+
width: 100%;
62+
height: 34px;
63+
padding: 6px 12px;
64+
font-size: 14px;
65+
line-height: 1.42857143;
66+
color: #555;
67+
background-color: #fff;
68+
background-image: none;
69+
border: 1px solid #ccc;
70+
border-radius: 4px;
71+
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
72+
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
73+
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
74+
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
75+
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
76+
margin:0;
77+
box-sizing: border-box;
78+
}
79+
</style>
1680
</head>
1781
<body>
82+
<div class="signin center">
1883
<form method="GET" action="/oauth2/start">
1984
<input type="hidden" name="rd" value="{{.Redirect}}">
20-
<button type="submit">Sign In w/ Google</button>
21-
{{.SignInMessage}}
85+
{{ if .SignInMessage }}
86+
<p>{{.SignInMessage}}</p>
87+
{{ end}}
88+
<button type="submit" class="btn">Sign in with a Google Account</button><br/>
2289
</form>
90+
</div>
91+
2392
{{ if .Htpasswd }}
24-
<fieldset>
25-
<form method="POST" action="/oauth2/sign_in">
93+
<div class="signin">
94+
<form method="POST" action="/oauth2/sign_in">
2695
<input type="hidden" name="rd" value="{{.Redirect}}">
27-
<label>Username: <input type="text" name="username" size="10"></label><br/>
28-
<label>Password: <input type="password" name="password" size="10"></label><br/>
29-
<button type="submit">Sign In</button>
30-
</form>
31-
</fieldset>
96+
<label for="username">Username:</label><input type="text" name="username" id="username" size="10"><br/>
97+
<label for="password">Password:</label><input type="password" name="password" id="password" size="10"><br/>
98+
<button type="submit" class="btn">Sign In</button>
99+
</form>
100+
</div>
32101
{{ end }}
33102
</body>
34103
</html>
@@ -40,7 +109,10 @@ func getTemplates() *template.Template {
40109
t, err = t.Parse(`{{define "error.html"}}
41110
<!DOCTYPE html>
42111
<html lang="en" charset="utf-8">
43-
<head><title>{{.Title}}</title></head>
112+
<head>
113+
<title>{{.Title}}</title>
114+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
115+
</head>
44116
<body>
45117
<h2>{{.Title}}</h2>
46118
<p>{{.Message}}</p>

0 commit comments

Comments
 (0)