3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-30 13:36:14 +02:00
Code Issues Projects Releases Packages Wiki Activity

💄 Social login redesign

Browse source
This commit is contained in:
Pablo Alba 2022-03-03 14:44:16 +01:00 • committed by Andrey Antukh
parent 636dbd4e57
commit 3d588a88e2
7 changed files with 123 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

1
CHANGES.md
View file

@ -6,6 +6,7 @@
### :sparkles: New features
- Set an artboard as the file thumbnail [Taiga #1526](https://tree.taiga.io/project/penpot/us/1526)
- Social login redesign [Taiga #2974](https://tree.taiga.io/project/penpot/task/2974)
- Add border radius to our artboars [Taiga #2056](https://tree.taiga.io/project/penpot/us/2056)
- Allow send multiple team invitations at once [Taiga #2798](https://tree.taiga.io/project/penpot/us/2798)
- Persist color palette and color picker across refresh [Taiga #1660](https://tree.taiga.io/project/penpot/issue/1660)

1
frontend/resources/images/icons/brand-google.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="5345 -1143 500 500"><path fill="#fff" fill-rule="evenodd" d="M5845-887c0-18-1-35-4-51h-240v96h137c-6 32-24 58-51 76v63h82c49-44 76-108 76-184z" clip-rule="evenodd"/><path fill="#fff" fill-rule="evenodd" d="M5601-643c68 0 126-22 168-60l-82-63a156 156 0 0 1-229-79h-85v64c42 82 128 138 228 138z" clip-rule="evenodd"/><path fill="#fff" fill-rule="evenodd" d="M5458-845a148 148 0 0 1 0-95v-65h-85a246 246 0 0 0 0 224z" clip-rule="evenodd"/><path fill="#fff" fill-rule="evenodd" d="M5601-1043c37 0 71 12 97 37l73-72a256 256 0 0 0-399 73l86 65c20-59 76-103 143-103z" clip-rule="evenodd"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 638 B

56
frontend/resources/styles/main/layouts/login.scss
View file

@ -72,20 +72,44 @@
width: 412px;
.auth-buttons {
margin-top: $size-6;
margin: $size-6 0 $size-4 0;
display: flex;
justify-content: center;
column-gap: 17px;
}
form {
margin: 2rem 0;
margin: 2rem 0 0.5rem 0;
}
}
.btn-large {
flex-grow: 1;
font-size: 14px;
font-family: sourcesanspro;
font-style: normal;
font-weight: normal;
}
.btn-google-auth {
background-color: #4285f4;
color: $color-white;
margin-bottom: $size-4;
text-decoration: none;
.logo {
width: 20px;
height: 20px;
margin-right: 1rem;
}
&:hover {
background-color: #2065d7;
color: $color-white;
}
}
.btn-gitlab-auth {
background-color: #fc6d26;
color: $color-white;
margin-bottom: $size-4;
text-decoration: none;
@ -94,9 +118,16 @@
height: 20px;
margin-right: 1rem;
}
&:hover {
background-color: #ee5f18;
color: $color-white;
}
}
.btn-github-auth {
background-color: #4c4c4c;
color: $color-white;
margin-bottom: $size-4;
text-decoration: none;
@ -105,6 +136,15 @@
height: 20px;
margin-right: 1rem;
}
&:hover {
background-color: #2f2f2f;
color: $color-white;
}
}
.link-oidc {
text-align: center;
}
.separator {
@ -112,6 +152,18 @@
justify-content: center;
width: 100%;
text-transform: uppercase;
text-align: center;
.text {
margin: 0 10px;
color: $color-gray-40;
}
.line {
border: 1px solid $color-gray-10;
flex-grow: 10;
margin: auto;
}
}
.links {

44
frontend/src/app/main/ui/auth/login.cljs
View file

@ -25,8 +25,7 @@
(def show-alt-login-buttons?
(or cf/google-client-id
cf/gitlab-client-id
cf/github-client-id
cf/oidc-client-id))
cf/github-client-id))
(s/def ::email ::us/email)
(s/def ::password ::us/not-empty-string)
@ -136,28 +135,32 @@
[{:keys [params] :as props}]
[:div.auth-buttons
(when cf/google-client-id
[:a.btn-ocean.btn-large.btn-google-auth
[:a.btn-primary.btn-large.btn-google-auth
{:on-click #(login-with-oauth % :google params)}
[:img.logo
{:src "/images/icons/brand-google.svg"}]
(tr "auth.login-with-google-submit")])
(when cf/gitlab-client-id
[:a.btn-ocean.btn-large.btn-gitlab-auth
[:a.btn-primary.btn-large.btn-gitlab-auth
{:on-click #(login-with-oauth % :gitlab params)}
[:img.logo
{:src "/images/icons/brand-gitlab.svg"}]
(tr "auth.login-with-gitlab-submit")])
(when cf/github-client-id
[:a.btn-ocean.btn-large.btn-github-auth
[:a.btn-primary.btn-large.btn-github-auth
{:on-click #(login-with-oauth % :github params)}
[:img.logo
{:src "/images/icons/brand-github.svg"}]
(tr "auth.login-with-github-submit")])
(tr "auth.login-with-github-submit")])])
(mf/defc login-button-oidc
[{:keys [params] :as props}]
(when cf/oidc-client-id
[:a.btn-ocean.btn-large.btn-github-auth
{:on-click #(login-with-oauth % :oidc params)}
(tr "auth.login-with-oidc-submit")])])
[:div.link-entry.link-oidc
[:a {:on-click #(login-with-oauth % :oidc params)}
(tr "auth.login-with-oidc-submit")]]))
(mf/defc login-page
[{:keys [params] :as props}]
@ -166,14 +169,29 @@
[:h1 {:data-test "login-title"} (tr "auth.login-title")]
[:div.subtitle (tr "auth.login-subtitle")]
[:& login-form {:params params}]
(when show-alt-login-buttons?
[:*
[:span.separator (tr "labels.or")]
[:span.separator
[:span.line]
[:span.text (tr "labels.continue-with")]
[:span.line]]
[:div.buttons
[:& login-buttons {:params params}]]])
[:& login-buttons {:params params}]]
[:span.separator
[:span.line]
[:span.text (tr "labels.or")]
[:span.line]]])
[:& login-form {:params params}]
(when cf/oidc-client-id
[:div.links
[:& login-button-oidc]])
[:span.separator
[:span.line]]
[:div.links
[:div.link-entry

24
frontend/src/app/main/ui/auth/register.cljs
View file

@ -121,14 +121,30 @@
(when (contains? @cf/flags :demo-warning)
[:& demo-warning])
[:& register-form {:params params}]
(when login/show-alt-login-buttons?
[:*
[:span.separator (tr "labels.or")]
[:span.separator
[:span.line]
[:span.text (tr "labels.continue-with")]
[:span.line]]
[:div.buttons
[:& login/login-buttons {:params params}]]])
[:& login/login-buttons {:params params}]]
[:span.separator
[:span.line]
[:span.text (tr "labels.or")]
[:span.line]]])
[:& register-form {:params params}]
(when cf/oidc-client-id
[:div.links
[:& login/login-button-oidc]])
[:span.separator
[:span.line]]
[:div.links
[:div.link-entry

11
frontend/translations/en.po
View file

@ -67,15 +67,15 @@ msgstr "Great to see you again!"
#: src/app/main/ui/auth/login.cljs
msgid "auth.login-with-github-submit"
msgstr "Login with GitHub"
msgstr "GitHub"
#: src/app/main/ui/auth/login.cljs
msgid "auth.login-with-gitlab-submit"
msgstr "Login with Gitlab"
msgstr "Gitlab"
#: src/app/main/ui/auth/login.cljs
msgid "auth.login-with-google-submit"
msgstr "Login with Google"
msgstr "Google"
#: src/app/main/ui/auth/login.cljs
msgid "auth.login-with-ldap-submit"
@ -1231,8 +1231,11 @@ msgstr "Old password"
msgid "labels.only-yours"
msgstr "Only yours"
msgid "labels.continue-with"
msgstr "Continue with"
msgid "labels.or"
msgstr "or"
msgstr "or email"
#: src/app/main/ui/dashboard/team.cljs, src/app/main/ui/dashboard/team.cljs
msgid "labels.owner"

11
frontend/translations/es.po
View file

@ -69,15 +69,15 @@ msgstr "¡Un placer verte de nuevo!"
#: src/app/main/ui/auth/login.cljs
msgid "auth.login-with-github-submit"
msgstr "Entrar con Github"
msgstr "Github"
#: src/app/main/ui/auth/login.cljs
msgid "auth.login-with-gitlab-submit"
msgstr "Entrar con Gitlab"
msgstr "Gitlab"
#: src/app/main/ui/auth/login.cljs
msgid "auth.login-with-google-submit"
msgstr "Entrar con Google"
msgstr "Google"
#: src/app/main/ui/auth/login.cljs
msgid "auth.login-with-ldap-submit"
@ -1232,8 +1232,11 @@ msgstr "Contraseña anterior"
msgid "labels.only-yours"
msgstr "Sólo los tuyos"
msgid "labels.continue-with"
msgstr "Continúa con"
msgid "labels.or"
msgstr "o"
msgstr "o email"
#: src/app/main/ui/dashboard/team.cljs, src/app/main/ui/dashboard/team.cljs
msgid "labels.owner"