mirror of https://github.com/go-gitea/gitea
Rework Oauth login buttons, swap github logo to monocolor (#24740)
Diff without whitespace: https://github.com/go-gitea/gitea/pull/24740/files?diff=unified&w=1 - Use SVGs for GitHub and GitLab oauth providers - Replace section wrapping with a divider - Rework icon rendering, increase size from 32px to 40px Before: <img width="853" alt="Screenshot 2023-05-15 at 21 54 23" src="https://github.com/go-gitea/gitea/assets/115237/6ab5cfb4-46ff-469a-bd1f-06780d4a6a0b"> After (more providers): <img width="849" alt="Screenshot 2023-05-15 at 21 51 21" src="https://github.com/go-gitea/gitea/assets/115237/fa84f92f-98e0-4aed-9357-5d62ddd98195"> <img width="856" alt="Screenshot 2023-05-15 at 21 56 45" src="https://github.com/go-gitea/gitea/assets/115237/d3edd7ed-dadd-4302-aca7-08f20adc220e"> Ref: https://codeberg.org/Codeberg/Community/issues/1023 --------- Co-authored-by: Giteabot <teabot@gitea.io>pull/24744/head
silverwind
2 years ago
committed by
GitHub
parent
7565e5c3de
commit
a7e18b9fb7
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 430 B After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
@ -1,78 +1,89 @@ |
||||
{{if or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn)}} |
||||
{{template "base/alert" .}} |
||||
{{end}} |
||||
<h4 class="ui top attached header center"> |
||||
{{if or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn)}} |
||||
{{template "base/alert" .}} |
||||
{{end}} |
||||
<h4 class="ui top attached header center"> |
||||
{{if .LinkAccountMode}} |
||||
{{.locale.Tr "auth.oauth_signin_title"}} |
||||
{{else}} |
||||
{{.locale.Tr "auth.login_userpass"}} |
||||
{{end}} |
||||
</h4> |
||||
<div class="ui attached segment"> |
||||
<form class="ui form" action="{{.SignInLink}}" method="post"> |
||||
{{.CsrfTokenHtml}} |
||||
<div class="required inline field {{if and (.Err_UserName) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}"> |
||||
<label for="user_name">{{.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}}"> |
||||
<label for="password">{{.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>{{.locale.Tr "auth.remember_me"}}</label> |
||||
<input name="remember" type="checkbox"> |
||||
</div> |
||||
</div> |
||||
{{end}} |
||||
|
||||
{{template "user/auth/captcha" .}} |
||||
|
||||
<div class="inline field"> |
||||
<label></label> |
||||
<button class="ui green button"> |
||||
{{if .LinkAccountMode}} |
||||
{{.locale.Tr "auth.oauth_signin_title"}} |
||||
{{.locale.Tr "auth.oauth_signin_submit"}} |
||||
{{else}} |
||||
{{.locale.Tr "auth.login_userpass"}} |
||||
{{end}} |
||||
</h4> |
||||
<div class="ui attached segment"> |
||||
<form class="ui form" action="{{.SignInLink}}" method="post"> |
||||
{{.CsrfTokenHtml}} |
||||
<div class="required inline field {{if and (.Err_UserName) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}"> |
||||
<label for="user_name">{{.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}}"> |
||||
<label for="password">{{.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>{{.locale.Tr "auth.remember_me"}}</label> |
||||
<input name="remember" type="checkbox"> |
||||
</div> |
||||
</div> |
||||
{{.locale.Tr "sign_in"}} |
||||
{{end}} |
||||
</button> |
||||
<a href="{{AppSubUrl}}/user/forgot_password">{{.locale.Tr "auth.forgot_password"}}</a> |
||||
</div> |
||||
|
||||
{{template "user/auth/captcha" .}} |
||||
|
||||
<div class="inline field"> |
||||
<label></label> |
||||
<button class="ui green button"> |
||||
{{if .LinkAccountMode}} |
||||
{{.locale.Tr "auth.oauth_signin_submit"}} |
||||
{{else}} |
||||
{{.locale.Tr "sign_in"}} |
||||
{{end}} |
||||
</button> |
||||
<a href="{{AppSubUrl}}/user/forgot_password">{{.locale.Tr "auth.forgot_password"}}</a> |
||||
</div> |
||||
|
||||
{{if .ShowRegistrationButton}} |
||||
<div class="inline field"> |
||||
<label></label> |
||||
<a href="{{AppSubUrl}}/user/sign_up">{{.locale.Tr "auth.sign_up_now" | Str2html}}</a> |
||||
</div> |
||||
{{end}} |
||||
{{if .ShowRegistrationButton}} |
||||
<div class="inline field"> |
||||
<label></label> |
||||
<a href="{{AppSubUrl}}/user/sign_up">{{.locale.Tr "auth.sign_up_now" | Str2html}}</a> |
||||
</div> |
||||
{{end}} |
||||
|
||||
{{if and .OrderedOAuth2Names .OAuth2Providers}} |
||||
<div class="ui attached segment"> |
||||
<div class="oauth2 center"> |
||||
<div id="oauth2-login-loader" class="ui disabled centered loader"></div> |
||||
<div> |
||||
<div id="oauth2-login-navigator"> |
||||
<p>{{.locale.Tr "sign_in_with"}}</p> |
||||
{{range $key := .OrderedOAuth2Names}} |
||||
{{$provider := index $.OAuth2Providers $key}} |
||||
<a href="{{AppSubUrl}}/user/oauth2/{{$key}}"> |
||||
<img |
||||
alt="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}" |
||||
title="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}" |
||||
class="{{$provider.Name}} oauth-login-image" |
||||
src="{{AppSubUrl}}{{$provider.Image}}" |
||||
></a> |
||||
{{if and .OrderedOAuth2Names .OAuth2Providers}} |
||||
<hr class="ui divider"/> |
||||
<div class="oauth2 center"> |
||||
<div id="oauth2-login-loader" class="ui disabled centered loader"></div> |
||||
<div> |
||||
<div id="oauth2-login-navigator" class="gt-df gt-jc"> |
||||
<span class="gt-self-center gt-mr-3">{{.locale.Tr "sign_in_with"}}</span> |
||||
<div class="gt-df gt-fw gt-gap-4"> |
||||
{{range $key := .OrderedOAuth2Names}} |
||||
{{$provider := index $.OAuth2Providers $key}} |
||||
<a class="{{$provider.Name}} silenced oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$key}}" data-tooltip-content="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}"> |
||||
{{if eq $provider.Name "github"}} |
||||
{{svg "octicon-mark-github" 40}} |
||||
{{else if eq $provider.Name "gitlab"}} |
||||
{{svg "gitea-gitlab" 40}} |
||||
{{else if eq $provider.Name "openidConnect"}} |
||||
{{svg "gitea-openid" 40}} |
||||
{{else}} |
||||
<img |
||||
class="gt-object-contain" |
||||
width="40" |
||||
height="40" |
||||
alt="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}" |
||||
src="{{AppSubUrl}}{{$provider.Image}}" |
||||
> |
||||
{{end}} |
||||
</div> |
||||
</div> |
||||
</a> |
||||
{{end}} |
||||
</div> |
||||
</div> |
||||
{{end}} |
||||
</form> |
||||
</div> |
||||
</div> |
||||
{{end}} |
||||
</form> |
||||
</div> |
||||
|
||||
|
Before Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 409 B After Width: | Height: | Size: 971 B |
|
After Width: | Height: | Size: 1.1 KiB |
Loading…
Reference in new issue