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>tags/v1.22.0-rc0
@@ -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}} |
@@ -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> |
@@ -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> |
@@ -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,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> |
@@ -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}}&scratch_code=true">{{ctx.Locale.Tr "auth.use_scratch_code"}}</a> |
@@ -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> |
@@ -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> |
@@ -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> |
@@ -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> |
@@ -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> |
@@ -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> |
@@ -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; |