Shiloh/githaven
Shiloh/githaven
1
0
Fork 1
Code Issues Pull Requests Actions 1 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 GitHub
parent 1d2548949a
commit c996e35958
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
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"}}
@ -10,12 +10,11 @@
<div class="ui attached segment">
{{template "base/alert" .}}
{{if .NeedVerifyLocalPassword}}
<div class="required inline field">
<div class="required field">
<label for="verify-password">{{ctx.Locale.Tr "password"}}</label>
<input id="verify-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 name="code" type="hidden" value="{{.ActivationCode}}">
@ -29,7 +28,7 @@
</div>
</details>
<div class="divider"></div>
<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.change_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.change_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;