Modify OAuth login ui and fix display name, iconurl related logic (#25030)

Close #24808 

Co-Authour @wxiaoguang @silverwind 

1. Most svgs are found from https://worldvectorlogo.com/ , and some are
from conversion of png to svg. (facebook and nextcloud). And also
changed `templates/user/settings/security/accountlinks.tmpl`.

2. Fixed display name and iconurl related logic

# After

<img width="1436" alt="Screen Shot 2023-06-05 at 14 09 05"
src="a5db39d8-1ab0-4676-82a4-fba60a1d1f84">

On mobile

<img width="378" alt="Screen Shot 2023-06-05 at 14 09 46"
src="71d0f51b-baac-4f48-8ca2-ae0e013bd62e">


user/settings/security/accountlinks (The dropdown might be improved
later)

<img width="973" alt="Screen Shot 2023-06-01 at 10 01 44"
src="27010e7e-2785-4fc5-8c49-b06621898f37">

---------

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
HesterG 2023-06-09 00:35:29 +08:00 committed by GitHub
parent 9aaaf980f0
commit 63a429581c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
44 changed files with 80 additions and 270 deletions

View file

@ -53,29 +53,17 @@
{{end}}
{{if and .OrderedOAuth2Names .OAuth2Providers}}
<hr class="ui divider"/>
<div id="oauth2-login-navigator">
<div id="oauth2-login-navigator-inner" 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">
<div class="gt-df gt-fc gt-jc">
<div class="ui horizontal divider">
{{.locale.Tr "sign_in_or"}}
</div>
<div id="oauth2-login-navigator-inner" class="gt-df gt-fc gt-fw gt-ac gt-gap-3">
{{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}}
<a class="{{$provider.Name}} ui button gt-df gt-ac gt-jc gt-py-3 oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$key}}">
<img class="gt-mr-3" width="20" height="20" src="{{$provider.IconURL}}" alt="{{$provider.DisplayName}}">
{{$.locale.Tr "sign_in_with_provider" $provider.DisplayName}}
</a>
{{end}}
</div>

View file

@ -8,7 +8,7 @@
{{range $key := .OrderedOAuth2Names}}
{{$provider := index $.OAuth2Providers $key}}
<a class="item" href="{{AppSubUrl}}/user/oauth2/{{$key}}">
<img width="20" height="20" src="{{AppSubUrl}}{{$provider.Image}}" alt="{{$provider.DisplayName}}">
<img class="gt-mr-3" width="20" height="20" src="{{$provider.IconURL}}" alt="{{$provider.DisplayName}}">
{{$provider.DisplayName}}
</a>
{{end}}