gamzinav/forgejo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move all login and account creation page labels to be above inputs (#29432)

Browse Source 
There are a few inconsistencies within Gitea and this PR addresses one
of them. This PR updates the sign-in page layout, including the register
and openID tabs, to match the layout of the settings pages
(/user/settings) for more consistency.

This PR updates the following routes:
`/user/login`
`/user/sign_up`
`/user/login/openid`
`/user/forgot_password`
`/user/link_account`
`/user/recover_account`

**Before**
<img width="968" alt="Screenshot 2024-02-05 at 8 27 24 AM"
src="https://github.com/go-gitea/gitea/assets/6152817/fb0cb517-57c0-4eed-be1d-56f36bd1960d">

**After**
<img width="968" alt="Screenshot 2024-02-05 at 8 26 39 AM"
src="https://github.com/go-gitea/gitea/assets/6152817/428d691d-0a42-4a67-a646-05527f2a7b41">

This PR addresses a revert of the original PR due to this
[comment](https://github.com/go-gitea/gitea/pull/28753#issuecomment-1956596817).

---------

Co-authored-by: rafh <rafaelheard@gmail.com>
This commit is contained in:
Rafael Heard 2024-03-06 09:20:26 -05:00 committed by Gergely Nagy
parent b7ee0b6ad2
commit 3acea02eb6
No known key found for this signature in database
13 changed files with 34 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
templates/user/auth/activate.tmpl
View File

@ -2,7 +2,7 @@
<div role="main" aria-label="{{.Title}}" class="page-content user activate">
<div class="ui middle very relaxed page grid">
<div class="column">
<form class="ui form ignore-dirty" action="{{AppSubUrl}}/user/activate" method="post">
<form class="ui form ignore-dirty tw-max-w-2xl tw-m-auto" action="{{AppSubUrl}}/user/activate" method="post">
{{.CsrfTokenHtml}}
<h2 class="ui top attached header">
{{ctx.Locale.Tr "auth.active_your_account"}}
@ -19,12 +19,11 @@
{{end}}
{{else}}
{{if .NeedsPassword}}
<div class="required inline field">
<div class="required field">
<label for="password">{{ctx.Locale.Tr "password"}}</label>
<input id="password" name="password" type="password" autocomplete="off" required>
</div>
<div class="inline field">
<label></label>
<button class="ui primary button">{{ctx.Locale.Tr "install.confirm_password"}}</button>
</div>
<input id="code" name="code" type="hidden" value="{{.Code}}">
@ -49,7 +48,7 @@
</div>
</details>
<div class="text right">
<div class="text">
<button class="ui primary button">{{ctx.Locale.Tr "auth.resend_mail"}}</button>
</div>
{{end}}

3
templates/user/auth/captcha.tmpl
View File

@ -1,9 +1,8 @@
{{if .EnableCaptcha}}{{if eq .CaptchaType "image"}}
<div class="inline field">
<label>{{/* This is CAPTCHA field */}}</label>
{{.Captcha.CreateHTML}}
</div>
<div class="required inline field {{if .Err_Captcha}}error{{end}}">
<div class="required field {{if .Err_Captcha}}error{{end}}">
<label for="captcha">{{ctx.Locale.Tr "captcha"}}</label>
<input id="captcha" name="captcha" value="{{.captcha}}" autocomplete="off">
</div>

7
templates/user/auth/change_passwd_inner.tmpl
View File

@ -5,18 +5,17 @@
{{ctx.Locale.Tr "settings.update_password"}}
</h4>
<div class="ui attached segment">
<form class="ui form" action="{{.ChangePasscodeLink}}" method="post">
<form class="ui form tw-max-w-2xl tw-m-auto" action="{{.ChangePasscodeLink}}" method="post">
{{.CsrfTokenHtml}}
<div class="required inline field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}">
<div class="required field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}">
<label for="password">{{ctx.Locale.Tr "password"}}</label>
<input id="password" name="password" type="password" value="{{.password}}" autocomplete="new-password" required>
</div>
<div class="required inline field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister))}}error{{end}}">
<div class="required field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister))}}error{{end}}">
<label for="retype">{{ctx.Locale.Tr "re_type"}}</label>
<input id="retype" name="retype" type="password" autocomplete="new-password" required>
</div>
<div class="inline field">
<label></label>
<button class="ui primary button">{{ctx.Locale.Tr "settings.update_password"}}</button>
</div>
</form>

3
templates/user/auth/forgot_passwd.tmpl
View File

@ -12,13 +12,12 @@
{{if .IsResetSent}}
<p>{{ctx.Locale.Tr "auth.reset_password_mail_sent_prompt" .Email .ResetPwdCodeLives}}</p>
{{else if .IsResetRequest}}
<div class="required inline field {{if .Err_Email}}error{{end}}">
<div class="required field {{if .Err_Email}}error{{end}}">
<label for="email">{{ctx.Locale.Tr "email"}}</label>
<input id="email" name="email" type="email" value="{{.Email}}" autofocus required>
</div>
<div class="divider"></div>
<div class="inline field">
<label></label>
<button class="ui primary button">{{ctx.Locale.Tr "auth.send_reset_mail"}}</button>
</div>
{{else if .IsResetDisable}}

2
templates/user/auth/prohibit_login.tmpl
View File

@ -2,7 +2,7 @@
<div role="main" aria-label="{{.Title}}" class="page-content user activate">
<div class="ui middle very relaxed page grid">
<div class="column">
<form class="ui form">
<form class="ui form tw-max-w-2xl tw-m-auto">
<h2 class="ui top attached header">
{{ctx.Locale.Tr "auth.prohibit_login"}}
</h2>

6
templates/user/auth/reset_passwd.tmpl
View File

@ -17,13 +17,12 @@
</div>
{{end}}
{{if .IsResetForm}}
<div class="required inline field {{if .Err_Password}}error{{end}}">
<div class="required field {{if .Err_Password}}error{{end}}">
<label for="password">{{ctx.Locale.Tr "settings.new_password"}}</label>
<input id="password" name="password" type="password" value="{{.password}}" autocomplete="new-password" autofocus required>
</div>
{{if not .user_signed_in}}
<div class="inline field">
<label></label>
<div class="ui checkbox">
<label>{{ctx.Locale.Tr "auth.remember_me"}}</label>
<input name="remember" type="checkbox">
@ -42,7 +41,7 @@
</div>
<input type="hidden" name="scratch_code" value="true">
{{else}}
<div class="required inline field {{if .Err_Passcode}}error{{end}}">
<div class="required field {{if .Err_Passcode}}error{{end}}">
<label for="passcode">{{ctx.Locale.Tr "passcode"}}</label>
<input id="passcode" name="passcode" type="number" autocomplete="off" autofocus required>
</div>
@ -50,7 +49,6 @@
{{end}}
<div class="divider"></div>
<div class="inline field">
<label></label>
<button class="ui primary button">{{ctx.Locale.Tr "auth.reset_password_helper"}}</button>
{{if and .has_two_factor (not .scratch_code)}}
<a href="{{.Link}}?code={{.Code}}&amp;scratch_code=true">{{ctx.Locale.Tr "auth.use_scratch_code"}}</a>

15
templates/user/auth/signin_inner.tmpl
View File

@ -9,21 +9,20 @@
{{end}}
</h4>
<div class="ui attached segment">
<form class="ui form" action="{{.SignInLink}}" method="post">
<form class="ui form tw-max-w-2xl tw-m-auto" action="{{.SignInLink}}" method="post">
{{.CsrfTokenHtml}}
<div class="required inline field {{if and (.Err_UserName) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}">
<div class="required field {{if and (.Err_UserName) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}">
<label for="user_name">{{ctx.Locale.Tr "home.uname_holder"}}</label>
<input id="user_name" type="text" name="user_name" value="{{.user_name}}" autofocus required>
</div>
{{if or (not .DisablePassword) .LinkAccountMode}}
<div class="required inline field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}">
<div class="required field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}">
<label for="password">{{ctx.Locale.Tr "password"}}</label>
<input id="password" name="password" type="password" value="{{.password}}" autocomplete="current-password" required>
</div>
{{end}}
{{if not .LinkAccountMode}}
<div class="inline field">
<label></label>
<div class="ui checkbox">
<label>{{ctx.Locale.Tr "auth.remember_me"}}</label>
<input name="remember" type="checkbox">
@ -33,8 +32,7 @@
{{template "user/auth/captcha" .}}
<div class="inline field">
<label></label>
<div class="field">
<button class="ui primary button">
{{if .LinkAccountMode}}
{{ctx.Locale.Tr "auth.oauth_signin_submit"}}
@ -46,8 +44,7 @@
</div>
{{if .ShowRegistrationButton}}
<div class="inline field">
<label></label>
<div class="field">
<a href="{{AppSubUrl}}/user/sign_up">{{ctx.Locale.Tr "auth.sign_up_now"}}</a>
</div>
{{end}}
@ -60,7 +57,7 @@
<div class="gt-df gt-fc gt-jc">
<div id="oauth2-login-navigator-inner" class="gt-df gt-fc gt-fw gt-ac gt-gap-3">
{{range $provider := .OAuth2Providers}}
<a class="{{$provider.Name}} ui button gt-df gt-ac gt-jc gt-py-3 oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$provider.DisplayName}}">
<a class="{{$provider.Name}} ui button gt-df gt-ac gt-jc gt-py-3 tw-w-full oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$provider.DisplayName}}">
{{$provider.IconHTML 28}}
{{ctx.Locale.Tr "sign_in_with_provider" $provider.DisplayName}}
</a>

6
templates/user/auth/signin_openid.tmpl
View File

@ -8,12 +8,12 @@
OpenID
</h4>
<div class="ui attached segment">
<form class="ui form" action="{{.Link}}" method="post">
<form class="ui form tw-m-auto" action="{{.Link}}" method="post">
{{.CsrfTokenHtml}}
<div class="inline field">
{{ctx.Locale.Tr "auth.openid_signin_desc"}}
</div>
<div class="required inline field {{if .Err_OpenID}}error{{end}}">
<div class="required field {{if .Err_OpenID}}error{{end}}">
<label for="openid">
{{svg "fontawesome-openid"}}
OpenID URI
@ -21,14 +21,12 @@
<input id="openid" name="openid" value="{{.openid}}" autofocus required>
</div>
<div class="inline field">
<label></label>
<div class="ui checkbox">
<label>{{ctx.Locale.Tr "auth.remember_me"}}</label>
<input name="remember" type="checkbox">
</div>
</div>
<div class="inline field">
<label></label>
<button class="ui primary button">{{ctx.Locale.Tr "sign_in"}}</button>
</div>
</form>

14
templates/user/auth/signup_inner.tmpl
View File

@ -7,7 +7,7 @@
{{end}}
</h4>
<div class="ui attached segment">
<form class="ui form" action="{{.SignUpLink}}" method="post">
<form class="ui form tw-max-w-2xl tw-m-auto" action="{{.SignUpLink}}" method="post">
{{.CsrfTokenHtml}}
{{if or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister)}}
{{template "base/alert" .}}
@ -15,21 +15,21 @@
{{if .DisableRegistration}}
<p>{{ctx.Locale.Tr "auth.disable_register_prompt"}}</p>
{{else}}
<div class="required inline field {{if and (.Err_UserName) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister))}}error{{end}}">
<div class="required field {{if and (.Err_UserName) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister))}}error{{end}}">
<label for="user_name">{{ctx.Locale.Tr "username"}}</label>
<input id="user_name" type="text" name="user_name" value="{{.user_name}}" autofocus required>
</div>
<div class="required inline field {{if .Err_Email}}error{{end}}">
<div class="required field {{if .Err_Email}}error{{end}}">
<label for="email">{{ctx.Locale.Tr "email"}}</label>
<input id="email" name="email" type="email" value="{{.email}}" required>
</div>
{{if not .DisablePassword}}
<div class="required inline field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister))}}error{{end}}">
<div class="required field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister))}}error{{end}}">
<label for="password">{{ctx.Locale.Tr "password"}}</label>
<input id="password" name="password" type="password" value="{{.password}}" autocomplete="new-password" required>
</div>
<div class="required inline field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister))}}error{{end}}">
<div class="required field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister))}}error{{end}}">
<label for="retype">{{ctx.Locale.Tr "re_type"}}</label>
<input id="retype" name="retype" type="password" value="{{.retype}}" autocomplete="new-password" required>
</div>
@ -38,7 +38,6 @@
{{template "user/auth/captcha" .}}
<div class="inline field">
<label></label>
<button class="ui primary button">
{{if .LinkAccountMode}}
{{ctx.Locale.Tr "auth.oauth_signup_submit"}}
@ -50,7 +49,6 @@
{{if not .LinkAccountMode}}
<div class="inline field">
<label></label>
<a href="{{AppSubUrl}}/user/login">{{ctx.Locale.Tr "auth.register_helper_msg"}}</a>
</div>
{{end}}
@ -64,7 +62,7 @@
<div class="gt-df gt-fc gt-jc">
<div id="oauth2-login-navigator-inner" class="gt-df gt-fc gt-fw gt-ac gt-gap-3">
{{range $provider := .OAuth2Providers}}
<a class="{{$provider.Name}} ui button gt-df gt-ac gt-jc gt-py-3 oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$provider.DisplayName}}">
<a class="{{$provider.Name}} ui button gt-df gt-ac gt-jc gt-py-3 tw-w-full oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$provider.DisplayName}}">
{{$provider.IconHTML 28}}
{{ctx.Locale.Tr "sign_in_with_provider" $provider.DisplayName}}
</a>

9
templates/user/auth/signup_openid_register.tmpl
View File

@ -7,28 +7,27 @@
{{ctx.Locale.Tr "auth.openid_register_title"}}
</h4>
<div class="ui attached segment">
<p>
<p class="tw-max-w-2xl tw-mx-auto">
{{ctx.Locale.Tr "auth.openid_register_desc"}}
</p>
<form class="ui form" action="{{.Link}}" method="post">
{{.CsrfTokenHtml}}
<div class="required inline field {{if .Err_UserName}}error{{end}}">
<div class="required field {{if .Err_UserName}}error{{end}}">
<label for="user_name">{{ctx.Locale.Tr "username"}}</label>
<input id="user_name" type="text" name="user_name" value="{{.user_name}}" autofocus required>
</div>
<div class="required inline field {{if .Err_Email}}error{{end}}">
<div class="required field {{if .Err_Email}}error{{end}}">
<label for="email">{{ctx.Locale.Tr "email"}}</label>
<input id="email" name="email" type="email" value="{{.email}}" required>
</div>
{{template "user/auth/captcha" .}}
<div class="inline field">
<div class="field">
<label for="openid">OpenID URI</label>
<input id="openid" value="{{.OpenID}}" readonly>
</div>
<div class="inline field">
<label></label>
<button class="ui primary button">{{ctx.Locale.Tr "auth.create_new_account"}}</button>
</div>
</form>

5
templates/user/auth/twofa.tmpl
View File

@ -2,20 +2,19 @@
<div role="main" aria-label="{{.Title}}" class="page-content user signin">
<div class="ui middle very relaxed page grid">
<div class="column">
<form class="ui form" action="{{.Link}}" method="post">
<form class="ui form tw-max-w-2xl tw-m-auto" action="{{.Link}}" method="post">
{{.CsrfTokenHtml}}
<h3 class="ui top attached header">
{{ctx.Locale.Tr "twofa"}}
</h3>
<div class="ui attached segment">
{{template "base/alert" .}}
<div class="required inline field">
<div class="required field">
<label for="passcode">{{ctx.Locale.Tr "passcode"}}</label>
<input id="passcode" name="passcode" type="text" autocomplete="one-time-code" inputmode="numeric" pattern="[0-9]*" autofocus required>
</div>
<div class="inline field">
<label></label>
<button class="ui primary button">{{ctx.Locale.Tr "auth.verify"}}</button>
<a href="{{AppSubUrl}}/user/two_factor/scratch">{{ctx.Locale.Tr "auth.use_scratch_code"}}</a>
</div>

5
templates/user/auth/twofa_scratch.tmpl
View File

@ -2,20 +2,19 @@
<div role="main" aria-label="{{.Title}}" class="page-content user signin">
<div class="ui middle very relaxed page grid">
<div class="column">
<form class="ui form" action="{{.Link}}" method="post">
<form class="ui form tw-max-w-2xl tw-m-auto" action="{{.Link}}" method="post">
{{.CsrfTokenHtml}}
<h3 class="ui top attached header">
{{ctx.Locale.Tr "twofa_scratch"}}
</h3>
<div class="ui attached segment">
{{template "base/alert" .}}
<div class="required inline field">
<div class="required field">
<label for="token">{{ctx.Locale.Tr "auth.scratch_code"}}</label>
<input id="token" name="token" type="text" autocomplete="off" autofocus required>
</div>
<div class="inline field">
<label></label>
<button class="ui primary button">{{ctx.Locale.Tr "auth.verify"}}</button>
</div>
</div>

10
web_src/css/form.css
View File

@ -239,11 +239,8 @@ textarea:focus,
}
}
.user.activate form,
.user.forgot.password form,
.user.reset.password form,
.user.link-account form,
.user.signin form,
.user.signup form {
margin: auto;
width: 700px !important;
@ -275,12 +272,7 @@ textarea:focus,
.user.signup form .header {
padding-left: 280px !important;
}
.user.activate form .inline.field > label,
.user.forgot.password form .inline.field > label,
.user.reset.password form .inline.field > label,
.user.link-account form .inline.field > label,
.user.signin form .inline.field > label,
.user.signup form .inline.field > label {
.user.activate form .inline.field > label {
text-align: right;
width: 250px !important;
word-wrap: break-word;