Skip to content

Commit a7e18b9

Browse files
silverwindGiteaBot
silverwind
and
GiteaBot
authored
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 <[email protected]>
1 parent 7565e5c commit a7e18b9

File tree

11 files changed

+103
-100
lines changed

11 files changed

+103
-100
lines changed

‎public/img/svg/gitea-github.svg

-1
This file was deleted.

‎public/img/svg/gitea-gitlab.svg

+1-1
Loading

‎public/img/svg/gitea-openid.svg

+1
Loading

‎templates/repo/migrate/migrate.tmpl

+9-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,15 @@
66
<div class="ui three stackable cards">
77
{{range .Services}}
88
<a class="ui card gt-df gt-ac" href="{{AppSubUrl}}/repo/migrate?service_type={{.}}&org={{$.Org}}&mirror={{$.Mirror}}">
9-
{{svg (printf "gitea-%s" .Name) 184}}
9+
{{if eq .Name "github"}}
10+
{{svg "octicon-mark-github" 184 "gt-p-4"}}
11+
{{else if eq .Name "gitlab"}}
12+
{{svg "gitea-gitlab" 184 "gt-p-4"}}
13+
{{else if eq .Name "gitbucket"}}
14+
{{svg "gitea-gitbucket" 184 "gt-p-4"}}
15+
{{else}}
16+
{{svg (printf "gitea-%s" .Name) 184}}
17+
{{end}}
1018
<div class="content">
1119
<div class="header gt-tc">
1220
{{.Title}}

‎templates/user/auth/signin_inner.tmpl

+80-69
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,89 @@
1-
{{if or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn)}}
2-
{{template "base/alert" .}}
3-
{{end}}
4-
<h4 class="ui top attached header center">
1+
{{if or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn)}}
2+
{{template "base/alert" .}}
3+
{{end}}
4+
<h4 class="ui top attached header center">
5+
{{if .LinkAccountMode}}
6+
{{.locale.Tr "auth.oauth_signin_title"}}
7+
{{else}}
8+
{{.locale.Tr "auth.login_userpass"}}
9+
{{end}}
10+
</h4>
11+
<div class="ui attached segment">
12+
<form class="ui form" action="{{.SignInLink}}" method="post">
13+
{{.CsrfTokenHtml}}
14+
<div class="required inline field {{if and (.Err_UserName) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}">
15+
<label for="user_name">{{.locale.Tr "home.uname_holder"}}</label>
16+
<input id="user_name" type="text" name="user_name" value="{{.user_name}}" autofocus required>
17+
</div>
18+
{{if or (not .DisablePassword) .LinkAccountMode}}
19+
<div class="required inline field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}">
20+
<label for="password">{{.locale.Tr "password"}}</label>
21+
<input id="password" name="password" type="password" value="{{.password}}" autocomplete="current-password" required>
22+
</div>
23+
{{end}}
24+
{{if not .LinkAccountMode}}
25+
<div class="inline field">
26+
<label></label>
27+
<div class="ui checkbox">
28+
<label>{{.locale.Tr "auth.remember_me"}}</label>
29+
<input name="remember" type="checkbox">
30+
</div>
31+
</div>
32+
{{end}}
33+
34+
{{template "user/auth/captcha" .}}
35+
36+
<div class="inline field">
37+
<label></label>
38+
<button class="ui green button">
539
{{if .LinkAccountMode}}
6-
{{.locale.Tr "auth.oauth_signin_title"}}
40+
{{.locale.Tr "auth.oauth_signin_submit"}}
741
{{else}}
8-
{{.locale.Tr "auth.login_userpass"}}
9-
{{end}}
10-
</h4>
11-
<div class="ui attached segment">
12-
<form class="ui form" action="{{.SignInLink}}" method="post">
13-
{{.CsrfTokenHtml}}
14-
<div class="required inline field {{if and (.Err_UserName) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}">
15-
<label for="user_name">{{.locale.Tr "home.uname_holder"}}</label>
16-
<input id="user_name" type="text" name="user_name" value="{{.user_name}}" autofocus required>
17-
</div>
18-
{{if or (not .DisablePassword) .LinkAccountMode}}
19-
<div class="required inline field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}">
20-
<label for="password">{{.locale.Tr "password"}}</label>
21-
<input id="password" name="password" type="password" value="{{.password}}" autocomplete="current-password" required>
22-
</div>
23-
{{end}}
24-
{{if not .LinkAccountMode}}
25-
<div class="inline field">
26-
<label></label>
27-
<div class="ui checkbox">
28-
<label>{{.locale.Tr "auth.remember_me"}}</label>
29-
<input name="remember" type="checkbox">
30-
</div>
31-
</div>
42+
{{.locale.Tr "sign_in"}}
3243
{{end}}
44+
</button>
45+
<a href="{{AppSubUrl}}/user/forgot_password">{{.locale.Tr "auth.forgot_password"}}</a>
46+
</div>
3347

34-
{{template "user/auth/captcha" .}}
35-
36-
<div class="inline field">
37-
<label></label>
38-
<button class="ui green button">
39-
{{if .LinkAccountMode}}
40-
{{.locale.Tr "auth.oauth_signin_submit"}}
41-
{{else}}
42-
{{.locale.Tr "sign_in"}}
43-
{{end}}
44-
</button>
45-
<a href="{{AppSubUrl}}/user/forgot_password">{{.locale.Tr "auth.forgot_password"}}</a>
46-
</div>
47-
48-
{{if .ShowRegistrationButton}}
49-
<div class="inline field">
50-
<label></label>
51-
<a href="{{AppSubUrl}}/user/sign_up">{{.locale.Tr "auth.sign_up_now" | Str2html}}</a>
52-
</div>
53-
{{end}}
48+
{{if .ShowRegistrationButton}}
49+
<div class="inline field">
50+
<label></label>
51+
<a href="{{AppSubUrl}}/user/sign_up">{{.locale.Tr "auth.sign_up_now" | Str2html}}</a>
52+
</div>
53+
{{end}}
5454

55-
{{if and .OrderedOAuth2Names .OAuth2Providers}}
56-
<div class="ui attached segment">
57-
<div class="oauth2 center">
58-
<div id="oauth2-login-loader" class="ui disabled centered loader"></div>
59-
<div>
60-
<div id="oauth2-login-navigator">
61-
<p>{{.locale.Tr "sign_in_with"}}</p>
62-
{{range $key := .OrderedOAuth2Names}}
63-
{{$provider := index $.OAuth2Providers $key}}
64-
<a href="{{AppSubUrl}}/user/oauth2/{{$key}}">
65-
<img
66-
alt="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}"
67-
title="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}"
68-
class="{{$provider.Name}} oauth-login-image"
69-
src="{{AppSubUrl}}{{$provider.Image}}"
70-
></a>
55+
{{if and .OrderedOAuth2Names .OAuth2Providers}}
56+
<hr class="ui divider"/>
57+
<div class="oauth2 center">
58+
<div id="oauth2-login-loader" class="ui disabled centered loader"></div>
59+
<div>
60+
<div id="oauth2-login-navigator" class="gt-df gt-jc">
61+
<span class="gt-self-center gt-mr-3">{{.locale.Tr "sign_in_with"}}</span>
62+
<div class="gt-df gt-fw gt-gap-4">
63+
{{range $key := .OrderedOAuth2Names}}
64+
{{$provider := index $.OAuth2Providers $key}}
65+
<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}}">
66+
{{if eq $provider.Name "github"}}
67+
{{svg "octicon-mark-github" 40}}
68+
{{else if eq $provider.Name "gitlab"}}
69+
{{svg "gitea-gitlab" 40}}
70+
{{else if eq $provider.Name "openidConnect"}}
71+
{{svg "gitea-openid" 40}}
72+
{{else}}
73+
<img
74+
class="gt-object-contain"
75+
width="40"
76+
height="40"
77+
alt="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}"
78+
src="{{AppSubUrl}}{{$provider.Image}}"
79+
>
7180
{{end}}
72-
</div>
73-
</div>
81+
</a>
82+
{{end}}
7483
</div>
7584
</div>
76-
{{end}}
77-
</form>
7885
</div>
86+
</div>
87+
{{end}}
88+
</form>
89+
</div>

‎web_src/css/base.css

+8
Original file line numberDiff line numberDiff line change
@@ -338,7 +338,11 @@ a {
338338
text-decoration-skip-ink: all;
339339
}
340340

341+
/* muted link = only colored when hovered */
342+
/* silenced link = never colored */
343+
341344
a.muted,
345+
a.silenced,
342346
.muted-links a {
343347
color: inherit;
344348
}
@@ -350,6 +354,10 @@ a.muted:hover [class*="color-text"],
350354
color: var(--color-primary);
351355
}
352356

357+
a.silenced:hover {
358+
color: inherit;
359+
}
360+
353361
.delete-button,
354362
.delete-button:hover {
355363
color: var(--color-red);

‎web_src/css/form.css

-26
Original file line numberDiff line numberDiff line change
@@ -206,32 +206,6 @@ textarea:focus,
206206
}
207207
}
208208

209-
.signin .oauth2 div {
210-
display: inline-block;
211-
}
212-
213-
.signin .oauth2 div p {
214-
margin: 10px 5px 0 0;
215-
float: left;
216-
}
217-
218-
.signin .oauth2 a {
219-
margin-right: 3px;
220-
}
221-
222-
.signin .oauth2 a:last-child {
223-
margin-right: 0;
224-
}
225-
226-
.signin .oauth2 img {
227-
width: 32px;
228-
height: 32px;
229-
}
230-
231-
.signin .oauth2 img.openidConnect {
232-
width: auto;
233-
}
234-
235209
@media (min-width: 768px) {
236210
.g-recaptcha-style,
237211
.h-captcha-style {

‎web_src/css/helpers.css

+2
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,8 @@ Gitea's private styles use `g-` prefix.
7373
.gt-whitespace-nowrap { white-space: nowrap !important; }
7474
.gt-whitespace-pre { white-space: pre !important; }
7575
.gt-whitespace-pre-wrap { white-space: pre-wrap !important; }
76+
.gt-object-contain { object-fit: contain !important; }
77+
.gt-self-center { align-self: center !important; }
7678

7779
.gt-overflow-x-auto { overflow-x: auto !important; }
7880
.gt-overflow-x-scroll { overflow-x: scroll !important; }

‎web_src/svg/gitea-github.svg

-1
This file was deleted.

‎web_src/svg/gitea-gitlab.svg

+1-1
Loading

‎web_src/svg/gitea-openid.svg

+1
Loading

0 commit comments

Comments
 (0)