Skip to content

Commit 95bdc7b

Browse files
author
rafh
committed
update sign form layout
1 parent c65f862 commit 95bdc7b

File tree

5 files changed

+114
-119
lines changed

5 files changed

+114
-119
lines changed

‎templates/user/auth/signin_inner.tmpl

Lines changed: 52 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -9,65 +9,63 @@
99
{{end}}
1010
</h4>
1111
<div class="ui attached segment">
12-
<form class="ui form" action="{{.SignInLink}}" method="post">
13-
{{.CsrfTokenHtml}}
14-
<div class="required inline field {{if and (.Err_UserName) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}">
15-
<label for="user_name">{{ctx.Locale.Tr "home.uname_holder"}}</label>
16-
<input id="user_name" type="text" name="user_name" value="{{.user_name}}" autofocus required>
17-
</div>
18-
{{if or (not .DisablePassword) .LinkAccountMode}}
19-
<div class="required inline field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}">
20-
<label for="password">{{ctx.Locale.Tr "password"}}</label>
21-
<input id="password" name="password" type="password" value="{{.password}}" autocomplete="current-password" required>
22-
</div>
23-
{{end}}
24-
{{if not .LinkAccountMode}}
25-
<div class="inline field">
26-
<label></label>
27-
<div class="ui checkbox">
28-
<label>{{ctx.Locale.Tr "auth.remember_me"}}</label>
29-
<input name="remember" type="checkbox">
12+
<form class="ui form gt-max-width-48rem gt-w-100 gt-m-auto" action="{{.SignInLink}}" method="post">
13+
{{if .OAuth2Providers}}
14+
<div id="oauth2-login-navigator" class="gt-py-2">
15+
<div class="gt-df gt-fc gt-jc">
16+
<div id="oauth2-login-navigator-inner" class="gt-df gt-fc gt-fw gt-ac gt-gap-3">
17+
{{range $provider := .OAuth2Providers}}
18+
<a class="{{$provider.Name}} ui button gt-df gt-ac gt-jc gt-py-3 gt-max-width-36rem gt-w-100 oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$provider.DisplayName}}">
19+
{{$provider.IconHTML 28}}
20+
{{ctx.Locale.Tr "sign_in_with_provider" $provider.DisplayName}}
21+
</a>
22+
{{end}}
23+
</div>
24+
</div>
3025
</div>
31-
</div>
32-
{{end}}
33-
34-
{{template "user/auth/captcha" .}}
35-
36-
<div class="inline field">
37-
<label></label>
38-
<button class="ui primary button">
39-
{{if .LinkAccountMode}}
40-
{{ctx.Locale.Tr "auth.oauth_signin_submit"}}
41-
{{else}}
42-
{{ctx.Locale.Tr "sign_in"}}
26+
<div class="divider divider-text gt-mb-5 gt-mt-5">
27+
{{ctx.Locale.Tr "sign_in_or"}}
28+
</div>
29+
{{end}}
30+
<div class="gt-max-width-36rem gt-m-auto">
31+
{{.CsrfTokenHtml}}
32+
<div class="required inline field {{if and (.Err_UserName) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}">
33+
<label for="user_name">{{ctx.Locale.Tr "home.uname_holder"}}</label>
34+
<input id="user_name" class="gt-w-100" type="text" name="user_name" value="{{.user_name}}" autofocus required>
35+
</div>
36+
{{if or (not .DisablePassword) .LinkAccountMode}}
37+
<div class="required inline field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}">
38+
<label for="password">{{ctx.Locale.Tr "password"}}</label>
39+
<input id="password" class="gt-w-100" name="password" type="password" value="{{.password}}" autocomplete="current-password" required>
40+
</div>
41+
{{end}}
42+
{{if not .LinkAccountMode}}
43+
<div class="inline field">
44+
<div class="ui checkbox">
45+
<label>{{ctx.Locale.Tr "auth.remember_me"}}</label>
46+
<input name="remember" type="checkbox">
47+
</div>
48+
</div>
4349
{{end}}
44-
</button>
45-
<a href="{{AppSubUrl}}/user/forgot_password">{{ctx.Locale.Tr "auth.forgot_password"}}</a>
46-
</div>
4750

48-
{{if .ShowRegistrationButton}}
49-
<div class="inline field">
50-
<label></label>
51-
<a href="{{AppSubUrl}}/user/sign_up">{{ctx.Locale.Tr "auth.sign_up_now" | Str2html}}</a>
52-
</div>
53-
{{end}}
51+
{{template "user/auth/captcha" .}}
5452

55-
{{if .OAuth2Providers}}
56-
<div class="divider divider-text">
57-
{{ctx.Locale.Tr "sign_in_or"}}
58-
</div>
59-
<div id="oauth2-login-navigator" class="gt-py-2">
60-
<div class="gt-df gt-fc gt-jc">
61-
<div id="oauth2-login-navigator-inner" class="gt-df gt-fc gt-fw gt-ac gt-gap-3">
62-
{{range $provider := .OAuth2Providers}}
63-
<a class="{{$provider.Name}} ui button gt-df gt-ac gt-jc gt-py-3 oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$provider.DisplayName}}">
64-
{{$provider.IconHTML 28}}
65-
{{ctx.Locale.Tr "sign_in_with_provider" $provider.DisplayName}}
66-
</a>
67-
{{end}}
53+
<div class="inline field">
54+
<button class="ui primary button">
55+
{{if .LinkAccountMode}}
56+
{{ctx.Locale.Tr "auth.oauth_signin_submit"}}
57+
{{else}}
58+
{{ctx.Locale.Tr "sign_in"}}
59+
{{end}}
60+
</button>
61+
<a href="{{AppSubUrl}}/user/forgot_password">{{ctx.Locale.Tr "auth.forgot_password"}}</a>
6862
</div>
63+
64+
{{if .ShowRegistrationButton}}
65+
<div class="inline field">
66+
<a href="{{AppSubUrl}}/user/sign_up">{{ctx.Locale.Tr "auth.sign_up_now" | Str2html}}</a>
67+
</div>
68+
{{end}}
6969
</div>
70-
</div>
71-
{{end}}
7270
</form>
7371
</div>

‎templates/user/auth/signin_openid.tmpl

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,37 @@
11
{{template "base/head" .}}
22
<div role="main" aria-label="{{.Title}}" class="page-content user signin openid">
33
{{template "user/auth/signin_navbar" .}}
4-
<div class="ui container">
5-
{{template "base/alert" .}}
6-
<h4 class="ui top attached header center">
7-
{{svg "fontawesome-openid"}}
8-
OpenID
9-
</h4>
10-
<div class="ui attached segment">
11-
<form class="ui form" action="{{.Link}}" method="post">
12-
{{.CsrfTokenHtml}}
13-
<div class="inline field">
14-
{{ctx.Locale.Tr "auth.openid_signin_desc"}}
15-
</div>
16-
<div class="required inline field {{if .Err_OpenID}}error{{end}}">
17-
<label for="openid">
4+
<div class="ui middle very relaxed page grid">
5+
<div class="ui container column fluid">
6+
{{template "base/alert" .}}
7+
<h4 class="ui top attached header center">
188
{{svg "fontawesome-openid"}}
19-
OpenID URI
20-
</label>
21-
<input id="openid" name="openid" value="{{.openid}}" autofocus required>
22-
</div>
23-
<div class="inline field">
24-
<label></label>
25-
<div class="ui checkbox">
26-
<label>{{ctx.Locale.Tr "auth.remember_me"}}</label>
27-
<input name="remember" type="checkbox">
28-
</div>
29-
</div>
30-
<div class="inline field">
31-
<label></label>
32-
<button class="ui primary button">{{ctx.Locale.Tr "sign_in"}}</button>
9+
OpenID
10+
</h4>
11+
<div class="ui attached segment">
12+
<form class="ui form gt-max-width-36rem gt-w-100 gt-m-auto" action="{{.Link}}" method="post">
13+
{{.CsrfTokenHtml}}
14+
<div class="inline field">
15+
{{ctx.Locale.Tr "auth.openid_signin_desc"}}
16+
</div>
17+
<div class="required inline field {{if .Err_OpenID}}error{{end}}">
18+
<label for="openid">
19+
{{svg "fontawesome-openid"}}
20+
OpenID URI
21+
</label>
22+
<input id="openid" class="gt-w-100" name="openid" value="{{.openid}}" autofocus required>
23+
</div>
24+
<div class="inline field">
25+
<div class="ui checkbox">
26+
<label>{{ctx.Locale.Tr "auth.remember_me"}}</label>
27+
<input name="remember" type="checkbox">
28+
</div>
29+
</div>
30+
<div class="inline field">
31+
<button class="ui primary button">{{ctx.Locale.Tr "sign_in"}}</button>
32+
</div>
33+
</form>
3334
</div>
34-
</form>
3535
</div>
3636
</div>
3737
</div>

‎templates/user/auth/signup_inner.tmpl

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,26 @@
77
{{end}}
88
</h4>
99
<div class="ui attached segment">
10-
<form class="ui form" action="{{.SignUpLink}}" method="post">
10+
<form class="ui form gt-max-width-48rem gt-w-100 gt-m-auto" action="{{.SignUpLink}}" method="post">
11+
{{if .OAuth2Providers}}
12+
<div id="oauth2-login-navigator" class="gt-py-2">
13+
<div class="gt-df gt-fc gt-jc">
14+
<div id="oauth2-login-navigator-inner" class="gt-df gt-fc gt-fw gt-ac gt-gap-3">
15+
{{range $provider := .OAuth2Providers}}
16+
<a class="{{$provider.Name}} ui button gt-df gt-ac gt-jc gt-py-3 gt-max-width-36rem gt-w-100 oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$provider.DisplayName}}">
17+
{{$provider.IconHTML 28}}
18+
{{ctx.Locale.Tr "sign_in_with_provider" $provider.DisplayName}}
19+
</a>
20+
{{end}}
21+
</div>
22+
</div>
23+
</div>
24+
25+
<div class="divider divider-text gt-mb-5 gt-mt-5">
26+
{{ctx.Locale.Tr "sign_in_or"}}
27+
</div>
28+
{{end}}
29+
<div class="gt-max-width-36rem gt-m-auto">
1130
{{.CsrfTokenHtml}}
1231
{{if or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister)}}
1332
{{template "base/alert" .}}
@@ -17,28 +36,27 @@
1736
{{else}}
1837
<div class="required inline field {{if and (.Err_UserName) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister))}}error{{end}}">
1938
<label for="user_name">{{ctx.Locale.Tr "username"}}</label>
20-
<input id="user_name" type="text" name="user_name" value="{{.user_name}}" autofocus required>
39+
<input id="user_name" class="gt-w-100" type="text" name="user_name" value="{{.user_name}}" autofocus required>
2140
</div>
2241
<div class="required inline field {{if .Err_Email}}error{{end}}">
2342
<label for="email">{{ctx.Locale.Tr "email"}}</label>
24-
<input id="email" name="email" type="email" value="{{.email}}" required>
43+
<input id="email" class="gt-w-100" name="email" type="email" value="{{.email}}" required>
2544
</div>
2645

2746
{{if not .DisablePassword}}
28-
<div class="required inline field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister))}}error{{end}}">
29-
<label for="password">{{ctx.Locale.Tr "password"}}</label>
30-
<input id="password" name="password" type="password" value="{{.password}}" autocomplete="new-password" required>
31-
</div>
32-
<div class="required inline field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister))}}error{{end}}">
33-
<label for="retype">{{ctx.Locale.Tr "re_type"}}</label>
34-
<input id="retype" name="retype" type="password" value="{{.retype}}" autocomplete="new-password" required>
35-
</div>
47+
<div class="required inline field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister))}}error{{end}}">
48+
<label for="password">{{ctx.Locale.Tr "password"}}</label>
49+
<input id="password" class="gt-w-100" name="password" type="password" value="{{.password}}" autocomplete="new-password" required>
50+
</div>
51+
<div class="required inline field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister))}}error{{end}}">
52+
<label for="retype">{{ctx.Locale.Tr "re_type"}}</label>
53+
<input id="retype" class="gt-w-100" name="retype" type="password" value="{{.retype}}" autocomplete="new-password" required>
54+
</div>
3655
{{end}}
3756

3857
{{template "user/auth/captcha" .}}
3958

4059
<div class="inline field">
41-
<label></label>
4260
<button class="ui primary button">
4361
{{if .LinkAccountMode}}
4462
{{ctx.Locale.Tr "auth.oauth_signup_submit"}}
@@ -50,29 +68,11 @@
5068

5169
{{if not .LinkAccountMode}}
5270
<div class="inline field">
53-
<label></label>
5471
<a href="{{AppSubUrl}}/user/login">{{ctx.Locale.Tr "auth.register_helper_msg"}}</a>
5572
</div>
5673
{{end}}
5774
{{end}}
58-
59-
{{if .OAuth2Providers}}
60-
<div class="divider divider-text">
61-
{{ctx.Locale.Tr "sign_in_or"}}
6275
</div>
63-
<div id="oauth2-login-navigator" class="gt-py-2">
64-
<div class="gt-df gt-fc gt-jc">
65-
<div id="oauth2-login-navigator-inner" class="gt-df gt-fc gt-fw gt-ac gt-gap-3">
66-
{{range $provider := .OAuth2Providers}}
67-
<a class="{{$provider.Name}} ui button gt-df gt-ac gt-jc gt-py-3 oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$provider.DisplayName}}">
68-
{{$provider.IconHTML 28}}
69-
{{ctx.Locale.Tr "sign_in_with_provider" $provider.DisplayName}}
70-
</a>
71-
{{end}}
72-
</div>
73-
</div>
74-
</div>
75-
{{end}}
7676
</form>
7777
</div>
7878
</div>

‎web_src/css/form.css

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -243,7 +243,6 @@ textarea:focus,
243243
.user.forgot.password form,
244244
.user.reset.password form,
245245
.user.link-account form,
246-
.user.signin form,
247246
.user.signup form {
248247
margin: auto;
249248
width: 700px !important;
@@ -263,7 +262,6 @@ textarea:focus,
263262
.user.forgot.password form,
264263
.user.reset.password form,
265264
.user.link-account form,
266-
.user.signin form,
267265
.user.signup form {
268266
width: 800px !important;
269267
}
@@ -279,7 +277,6 @@ textarea:focus,
279277
.user.forgot.password form .inline.field > label,
280278
.user.reset.password form .inline.field > label,
281279
.user.link-account form .inline.field > label,
282-
.user.signin form .inline.field > label,
283280
.user.signup form .inline.field > label {
284281
text-align: right;
285282
width: 250px !important;
@@ -305,15 +302,13 @@ textarea:focus,
305302
.user.forgot.password form .inline.field > input,
306303
.user.reset.password form .inline.field > input,
307304
.user.link-account form .inline.field > input,
308-
.user.signin form .inline.field > input,
309305
.user.signup form .inline.field > input,
310306
.user.activate form .inline.field > textarea,
311307
.user.forgot.password form .inline.field > textarea,
312308
.user.reset.password form .inline.field > textarea,
313309
.user.link-account form .inline.field > textarea,
314310
.user.signin form .inline.field > textarea,
315-
.user.signup form .inline.field > textarea,
316-
.oauth-login-link {
311+
.user.signup form .inline.field > textarea {
317312
width: 50%;
318313
}
319314
}

‎web_src/css/helpers.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@ Gitea's private styles use `g-` prefix.
5050

5151
.gt-max-width-12rem { max-width: 12rem !important; }
5252
.gt-max-width-24rem { max-width: 24rem !important; }
53+
.gt-max-width-36rem { max-width: 36rem !important; }
54+
.gt-max-width-48rem { max-width: 48rem !important; }
5355

5456
/* below class names match Tailwind CSS */
5557
.gt-break-all { word-break: break-all !important; }

0 commit comments

Comments
 (0)