mirror of
https://github.com/penpot/penpot.git
synced 2025-04-13 15:31:26 -05:00
Merge pull request #4320 from penpot/eva-login-tagline
♻️ Add tagline and some refactor to login page
This commit is contained in:
Alejandro
GitHub
commit
8585e73c0f
18 changed files with 186 additions and 175 deletions
|
|
@ -1,3 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
|
||||
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" fill="#fff"/>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 15.674"><path fill="#fff" fill-rule="evenodd" d="M7.976 0C3.566 0 0 3.592 0 8.035a8.03 8.03 0 0 0 5.454 7.623c.396.08.541-.173.541-.385 0-.187-.013-.825-.013-1.49-2.219.479-2.681-.958-2.681-.958-.356-.932-.885-1.171-.885-1.171-.726-.492.053-.492.053-.492.806.053 1.229.825 1.229.825.713 1.223 1.862.878 2.324.665.066-.519.277-.878.502-1.078-1.77-.186-3.632-.878-3.632-3.964 0-.878.317-1.597.819-2.155-.079-.2-.357-1.025.079-2.129 0 0 .674-.213 2.192.825a7.633 7.633 0 0 1 3.988 0c1.519-1.038 2.192-.825 2.192-.825.436 1.104.159 1.929.079 2.129.516.558.819 1.277.819 2.155 0 3.086-1.862 3.765-3.644 3.964.29.253.541.732.541 1.49 0 1.078-.013 1.943-.013 2.208 0 .213.145.466.541.386a8.028 8.028 0 0 0 5.454-7.623C15.952 3.592 12.374 0 7.976 0Z" class="fills" clip-rule="evenodd"/></svg>
|
||||
|
Before Width: | Height: | Size: 687 B After Width: | Height: | Size: 852 B |
|
|
@ -1 +1 @@
|
|||
<svg viewBox="3658.551 302.026 20 17.949" width="20" height="17.949" xmlns="http://www.w3.org/2000/svg" style="-webkit-print-color-adjust:exact"><path d="m3668.55 319.974 3.685-11.043h-7.364l3.68 11.043ZM3659.71 308.932l-1.122 3.355a.733.733 0 0 0 .277.83l9.685 6.857-8.84-11.042ZM3659.71 308.931h5.16l-2.22-6.65c-.114-.34-.61-.34-.727 0l-2.213 6.65Z" style="fill:#fff"/><path d="m3677.396 308.932 1.118 3.355a.733.733 0 0 1-.276.83l-9.688 6.857 8.846-11.042ZM3677.396 308.931h-5.16l2.216-6.65c.114-.34.61-.34.727 0l2.217 6.65ZM3668.55 319.974l3.685-11.042h5.16l-8.845 11.042ZM3668.55 319.974l-8.84-11.042h5.16l3.68 11.042Z" style="fill:#fff"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="screenshot-43864c00-8517-80fc-8004-14a71e4f14d1" fill="none" version="1.1" viewBox="0 0 16 16"><g id="shape-43864c00-8517-80fc-8004-14a71e4f14d1" fill="#000"><defs id="shape-43864c00-8517-80fc-8004-14a71e4f65d8" fill="#000"><style id="shape-43864c00-8517-80fc-8004-14a71e4f65da">.cls-2{fill:#fc6d26}</style></defs><g id="shape-43864c00-8517-80fc-8004-14a71e4f65d9" fill="#000"><g id="shape-43864c00-8517-80fc-8004-14a71e4f65dc"><path id="fills-43864c00-8517-80fc-8004-14a71e4f65dc" fill="#e24329" d="M15.733 6.099Zl-2.2-5.741a.561.561 0 0 0-.224-.269.583.583 0 0 0-.666.035.587.587 0 0 0-.194.294l-1.47 4.498H5.025L3.555.418a.57.57 0 0 0-.194-.294.581.581 0 0 0-.666-.036.57.57 0 0 0-.224.27L.289 6.038l-.022.058a4.043 4.043 0 0 0 1.342 4.673l.007.006.02.014 3.317 2.485 1.642 1.242.999.754a.67.67 0 0 0 .813 0l1-.754 1.641-1.242 3.337-2.5.009-.006a4.045 4.045 0 0 0 1.339-4.669Z" class="fills"/></g><g id="shape-43864c00-8517-80fc-8004-14a71e4f65dd"><g id="fills-43864c00-8517-80fc-8004-14a71e4f65dd" class="fills"><path d="M15.733 6.099Zc-1.083.16-2.083.61-2.95 1.259L8 10.974l3.047 2.303 3.337-2.499.008-.007a4.045 4.045 0 0 0 1.341-4.672Z" class="cls-2"/></g></g><g id="shape-43864c00-8517-80fc-8004-14a71e4f65de"><path id="fills-43864c00-8517-80fc-8004-14a71e4f65de" fill="#fca326" d="m4.953 13.277 1.642 1.242.999.755a.674.674 0 0 0 .813 0l1-.755 1.641-1.242S9.629 12.203 8 10.974c-1.629 1.229-3.047 2.303-3.047 2.303Z" class="fills"/></g><g id="shape-43864c00-8517-80fc-8004-14a71e4f65df"><g id="fills-43864c00-8517-80fc-8004-14a71e4f65df" class="fills"><path d="M3.217 7.358a7.364 7.364 0 0 0-2.928-1.32l-.022.058a4.043 4.043 0 0 0 1.342 4.673l.007.006.02.014 3.317 2.485L8 10.971Z" class="cls-2"/></g></g></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 650 B After Width: | Height: | Size: 1.7 KiB |
|
|
@ -1 +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>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/><path fill="none" d="M1 1h22v22H1z"/></svg>
|
||||
|
Before Width: | Height: | Size: 638 B After Width: | Height: | Size: 719 B |
|
|
@ -1 +1 @@
|
|||
<svg viewBox="7437 302 20.011 18.182" width="20.011" height="18.182" xmlns="http://www.w3.org/2000/svg" style="-webkit-print-color-adjust:exact"><path d="M7455.039 309.1c-1.9-1.183-4.555-1.918-7.46-1.918-5.845 0-10.579 2.922-10.579 6.526 0 3.3 3.945 6.007 9.055 6.473v-1.9c-3.442-.43-6.024-2.313-6.024-4.573 0-2.564 3.37-4.662 7.549-4.662 2.08 0 3.962.52 5.325 1.363l-1.937 1.202h6.043v-3.73l-1.972 1.22Zm-8.984-5.146v16.227l3.03-1.9V302l-3.03 1.954Z" style="fill:#fff;fill-opacity:1"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="#000"><path fill="#b2b2b2" d="M7.339 13.094v.207c-2.477-.311-4.354-1.669-4.354-3.305 0-1.229 1.058-2.3 2.64-2.891l-.062-1.48C2.778 6.328.813 8.019.813 9.996c0 2.384 2.839 4.348 6.529 4.678h.001l-.004-1.58Z" class="fills"/><path fill="#f7931e" d="M9.524 13.647ZL9.521 1.326 7.339 2.445v4.482h.004v7.747Z" class="fills"/><path fill="#b2b2b2" d="m15.187 9.123-.295-3.128-1.123.635c-.798-.485-1.816-1.083-3.144-1.091v1.372c.11.031.216.064.322.098.442.144.849.324 1.208.535l-1.181.664 4.213.915Z" class="fills"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 492 B After Width: | Height: | Size: 598 B |
|
|
@ -30,7 +30,7 @@
|
|||
[:a {:href cf/terms-of-service-uri :target "_blank"} (tr "auth.terms-of-service")])
|
||||
|
||||
(when show-all?
|
||||
[:span (tr "labels.and")])
|
||||
[:span (dm/str " " (tr "labels.and") " ")])
|
||||
|
||||
(when show-privacy?
|
||||
[:a {:href cf/privacy-policy-uri :target "_blank"} (tr "auth.privacy-policy")])])))
|
||||
|
|
@ -45,11 +45,12 @@
|
|||
(dom/set-html-title (tr "title.default")))
|
||||
|
||||
[:main {:class (stl/css :auth-section)}
|
||||
[:a {:href "#/" :class (stl/css :logo-btn)} i/logo]
|
||||
[:div {:class (stl/css :login-illustration)}
|
||||
i/login-illustration]
|
||||
|
||||
[:section {:class (stl/css :auth-content)}
|
||||
[:a {:href "#/" :class (stl/css :logo-btn)} i/logo]
|
||||
|
||||
(case section
|
||||
:auth-register
|
||||
[:& register-page {:params params}]
|
||||
|
|
@ -69,6 +70,5 @@
|
|||
:auth-recovery
|
||||
[:& recovery-page {:params params}])
|
||||
|
||||
(when (or (= section :auth-login)
|
||||
(= section :auth-register))
|
||||
(when (= section :auth-register)
|
||||
[:& terms-login])]]))
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
@use "common/refactor/common-refactor.scss" as *;
|
||||
|
||||
.auth-section {
|
||||
position: relative;
|
||||
align-items: center;
|
||||
background: var(--panel-background-color);
|
||||
display: grid;
|
||||
|
|
@ -43,8 +44,9 @@
|
|||
|
||||
.auth-content {
|
||||
grid-column: 4 / 6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
gap: $s-24;
|
||||
height: fit-content;
|
||||
max-width: $s-412;
|
||||
padding-bottom: $s-8;
|
||||
|
|
@ -53,6 +55,9 @@
|
|||
}
|
||||
|
||||
.logo-btn {
|
||||
position: absolute;
|
||||
top: $s-20;
|
||||
left: $s-20;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: $s-52;
|
||||
|
|
@ -68,8 +73,6 @@
|
|||
|
||||
.terms-login {
|
||||
font-size: $fs-11;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: $s-4;
|
||||
|
|
@ -77,7 +80,10 @@
|
|||
|
||||
a {
|
||||
font-weight: $fw700;
|
||||
color: $df-secondary;
|
||||
color: $da-primary;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
span {
|
||||
border-bottom: $s-1 solid transparent;
|
||||
|
|
|
|||
|
|
@ -6,36 +6,37 @@
|
|||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
|
||||
.auth-form {
|
||||
.auth-form-wrapper {
|
||||
width: 100%;
|
||||
padding-block-end: $s-16;
|
||||
|
||||
padding-block-end: 0;
|
||||
display: grid;
|
||||
gap: $s-24;
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-12;
|
||||
margin-block-end: $s-24;
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
border-color: $db-quaternary;
|
||||
margin: $s-24 0;
|
||||
}
|
||||
|
||||
.error-wrapper {
|
||||
padding-block-end: $s-8;
|
||||
border-color: var(--modal-separator-backogrund-color);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
@include bigTitleTipography;
|
||||
color: $df-primary;
|
||||
color: var(--title-foreground-color-hover);
|
||||
}
|
||||
|
||||
.auth-subtitle {
|
||||
margin-top: $s-24;
|
||||
font-size: $fs-14;
|
||||
color: $df-secondary;
|
||||
@include smallTitleTipography;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
||||
.auth-tagline {
|
||||
@include smallTitleTipography;
|
||||
margin: 0;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
||||
.form-field {
|
||||
|
|
@ -45,77 +46,102 @@
|
|||
}
|
||||
|
||||
.buttons-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
gap: $s-8;
|
||||
|
||||
button,
|
||||
:global(.btn-primary) {
|
||||
@extend .button-primary;
|
||||
font-size: $fs-11;
|
||||
height: $s-40;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.link-entry {
|
||||
.login-button,
|
||||
.login-ldap-button {
|
||||
@extend .button-primary;
|
||||
@include uppercaseTitleTipography;
|
||||
height: $s-40;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.demo-account,
|
||||
.go-back {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-12;
|
||||
padding: $s-24 0;
|
||||
border-top: $s-1 solid $db-quaternary;
|
||||
padding: 0;
|
||||
border-block-start: none;
|
||||
}
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
font-size: $fs-14;
|
||||
color: $df-secondary;
|
||||
}
|
||||
a {
|
||||
@extend .button-secondary;
|
||||
height: $s-40;
|
||||
text-transform: uppercase;
|
||||
font-size: $fs-11;
|
||||
}
|
||||
&.register a {
|
||||
@extend .button-primary;
|
||||
.demo-account-link,
|
||||
.go-back-link {
|
||||
@extend .button-secondary;
|
||||
@include uppercaseTitleTipography;
|
||||
height: $s-40;
|
||||
}
|
||||
|
||||
.links {
|
||||
display: grid;
|
||||
gap: $s-24;
|
||||
}
|
||||
|
||||
.register,
|
||||
.account,
|
||||
.recovery-request {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: $s-8;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.register-text,
|
||||
.account-text,
|
||||
.recovery-text {
|
||||
@include smallTitleTipography;
|
||||
text-align: right;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
||||
.register-link,
|
||||
.account-link,
|
||||
.recovery-link,
|
||||
.forgot-pass-link {
|
||||
@include smallTitleTipography;
|
||||
text-align: left;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
display: inline;
|
||||
color: var(--link-foreground-color);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
a {
|
||||
font-size: $fs-14;
|
||||
color: $df-secondary;
|
||||
font-weight: $fw400;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-btn,
|
||||
.register-btn,
|
||||
.recover-btn {
|
||||
@extend .button-primary;
|
||||
font-size: $fs-11;
|
||||
@include uppercaseTitleTipography;
|
||||
height: $s-40;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
border-radius: $br-8;
|
||||
font-size: $fs-14;
|
||||
@include smallTitleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $s-6;
|
||||
width: 100%;
|
||||
|
||||
border-radius: $br-8;
|
||||
background-color: var(--button-secondary-background-color-rest);
|
||||
color: var(--button-foreground-color-focus);
|
||||
span {
|
||||
padding-top: $s-2;
|
||||
padding-block-start: $s-2;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--app-white);
|
||||
color: var(--button-foreground-color-focus);
|
||||
background-color: var(--button-secondary-background-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -123,39 +149,3 @@
|
|||
display: flex;
|
||||
gap: $s-8;
|
||||
}
|
||||
|
||||
.btn-google-auth {
|
||||
color: var(--google-login-foreground);
|
||||
background-color: var(--google-login-background);
|
||||
&:hover {
|
||||
background: var(--google-login-background-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-github-auth {
|
||||
color: var(--github-login-foreground);
|
||||
background: var(--github-login-background);
|
||||
&:hover {
|
||||
background: var(--github-login-background-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-oidc-auth {
|
||||
color: var(--oidc-login-foreground);
|
||||
background: var(--oidc-login-background);
|
||||
&:hover {
|
||||
background: var(--oidc-login-background-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-gitlab-auth {
|
||||
color: var(--gitlab-login-foreground);
|
||||
background: var(--gitlab-login-background);
|
||||
&:hover {
|
||||
background: var(--gitlab-login-background-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
margin: $s-16 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,10 +38,9 @@
|
|||
(mf/defc demo-warning
|
||||
{::mf/props :obj}
|
||||
[]
|
||||
[:div {:class (stl/css :banner)}
|
||||
[:& context-notification
|
||||
{:type :warning
|
||||
:content (tr "auth.demo-warning")}]])
|
||||
[:& context-notification
|
||||
{:type :warning
|
||||
:content (tr "auth.demo-warning")}])
|
||||
|
||||
(defn- login-with-oidc
|
||||
[event provider params]
|
||||
|
|
@ -166,14 +165,15 @@
|
|||
|
||||
[:*
|
||||
(when-let [message @error]
|
||||
[:div {:class (stl/css :error-wrapper)}
|
||||
[:& context-notification
|
||||
{:type :warning
|
||||
:content message
|
||||
:data-test "login-banner"
|
||||
:role "alert"}]])
|
||||
[:& context-notification
|
||||
{:type :warning
|
||||
:content message
|
||||
:data-test "login-banner"
|
||||
:role "alert"}])
|
||||
|
||||
[:& fm/form {:on-submit on-submit :form form}
|
||||
[:& fm/form {:on-submit on-submit
|
||||
:class (stl/css :login-form)
|
||||
:form form}
|
||||
[:div {:class (stl/css :fields-row)}
|
||||
[:& fm/input
|
||||
{:name :email
|
||||
|
|
@ -193,6 +193,7 @@
|
|||
(contains? cf/flags :login-with-password)))
|
||||
[:div {:class (stl/css :fields-row :forgot-password)}
|
||||
[:& lk/link {:action on-recovery-request
|
||||
:class (stl/css :forgot-pass-link)
|
||||
:data-test "forgot-password"}
|
||||
(tr "auth.forgot-password")]])
|
||||
|
||||
|
|
@ -207,6 +208,7 @@
|
|||
(when (contains? cf/flags :login-with-ldap)
|
||||
[:> fm/submit-button*
|
||||
{:label (tr "auth.login-with-ldap-submit")
|
||||
:class (stl/css :login-ldap-button)
|
||||
:on-click on-submit-ldap}])]]]))
|
||||
|
||||
(mf/defc login-buttons
|
||||
|
|
@ -255,11 +257,11 @@
|
|||
(when (k/enter? event)
|
||||
(login-oidc event))))]
|
||||
(when (contains? cf/flags :login-with-oidc)
|
||||
[:div {:class (stl/css :link-entry :link-oidc)}
|
||||
[:a {:tab-index "0"
|
||||
:on-key-down handle-key-down
|
||||
:on-click login-oidc}
|
||||
(tr "auth.login-with-oidc-submit")]])))
|
||||
[:button {:tab-index "0"
|
||||
:class (stl/css :link-entry :link-oidc)
|
||||
:on-key-down handle-key-down
|
||||
:on-click login-oidc}
|
||||
(tr "auth.login-with-oidc-submit")])))
|
||||
|
||||
(mf/defc login-methods
|
||||
[{:keys [params on-success-callback origin] :as props}]
|
||||
|
|
@ -282,35 +284,29 @@
|
|||
[{:keys [params] :as props}]
|
||||
(let [go-register
|
||||
(mf/use-fn
|
||||
#(st/emit! (rt/nav :auth-register {} params)))
|
||||
#(st/emit! (rt/nav :auth-register {} params)))]
|
||||
|
||||
on-create-demo-profile
|
||||
(mf/use-fn
|
||||
#(st/emit! (du/create-demo-profile)))]
|
||||
|
||||
[:div {:class (stl/css :auth-form)}
|
||||
[:div {:class (stl/css :auth-form-wrapper)}
|
||||
[:h1 {:class (stl/css :auth-title)
|
||||
:data-test "login-title"} (tr "auth.login-title")]
|
||||
:data-test "login-title"} (tr "auth.login-account-title")]
|
||||
|
||||
[:p {:class (stl/css :auth-tagline)}
|
||||
(tr "auth.login-tagline")]
|
||||
|
||||
(when (contains? cf/flags :demo-warning)
|
||||
[:& demo-warning])
|
||||
|
||||
[:hr {:class (stl/css :separator)}]
|
||||
|
||||
[:& login-methods {:params params}]
|
||||
|
||||
[:hr {:class (stl/css :separator)}]
|
||||
|
||||
[:div {:class (stl/css :links)}
|
||||
(when (contains? cf/flags :registration)
|
||||
[:div {:class (stl/css :link-entry :register)}
|
||||
[:span (tr "auth.register") " "]
|
||||
[:div {:class (stl/css :register)}
|
||||
[:span {:class (stl/css :register-text)}
|
||||
(tr "auth.register") " "]
|
||||
[:& lk/link {:action go-register
|
||||
:class (stl/css :register-link)
|
||||
:data-test "register-submit"}
|
||||
(tr "auth.register-submit")]])]
|
||||
|
||||
(when (contains? cf/flags :demo-users)
|
||||
[:div {:class (stl/css :link-entry :demo-account)}
|
||||
[:span (tr "auth.create-demo-profile") " "]
|
||||
[:& lk/link {:action on-create-demo-profile
|
||||
:data-test "demo-account-link"}
|
||||
(tr "auth.create-demo-account")]])]))
|
||||
(tr "auth.register-submit")]])]]))
|
||||
|
||||
|
|
|
|||
|
|
@ -61,7 +61,9 @@
|
|||
(fm/validate-not-empty :password-1 (tr "auth.password-not-empty"))
|
||||
(fm/validate-not-empty :password-2 (tr "auth.password-not-empty"))]
|
||||
:initial params)]
|
||||
[:& fm/form {:on-submit on-submit :form form}
|
||||
[:& fm/form {:on-submit on-submit
|
||||
:class (stl/css :recovery-form)
|
||||
:form form}
|
||||
[:div {:class (stl/css :fields-row)}
|
||||
[:& fm/input {:type "password"
|
||||
:name :password-1
|
||||
|
|
@ -84,13 +86,14 @@
|
|||
|
||||
(mf/defc recovery-page
|
||||
[{:keys [params] :as props}]
|
||||
[:div {:class (stl/css :auth-form)}
|
||||
[:div {:class (stl/css :auth-form-wrapper)}
|
||||
[:h1 {:class (stl/css :auth-title)} "Forgot your password?"]
|
||||
[:div {:class (stl/css :auth-subtitle)} "Please enter your new password"]
|
||||
[:hr {:class (stl/css :separator)}]
|
||||
[:& recovery-form {:params params}]
|
||||
|
||||
[:div {:class (stl/css :links)}
|
||||
[:div {:class (stl/css :link-entry)}
|
||||
[:a {:on-click #(st/emit! (rt/nav :auth-login))}
|
||||
[:div {:class (stl/css :go-back)}
|
||||
[:a {:on-click #(st/emit! (rt/nav :auth-login))
|
||||
:class (stl/css :go-back-link)}
|
||||
(tr "profile.recovery.go-to-login")]]]])
|
||||
|
|
|
|||
|
|
@ -76,6 +76,7 @@
|
|||
(st/emit! (du/request-profile-recovery params)))))]
|
||||
|
||||
[:& fm/form {:on-submit on-submit
|
||||
:class (stl/css :recovery-request-form)
|
||||
:form form}
|
||||
[:div {:class (stl/css :fields-row)}
|
||||
[:& fm/input {:name :email
|
||||
|
|
@ -95,14 +96,15 @@
|
|||
[{:keys [params on-success-callback go-back-callback] :as props}]
|
||||
(let [default-go-back #(st/emit! (rt/nav :auth-login))
|
||||
go-back (or go-back-callback default-go-back)]
|
||||
[:div {:class (stl/css :auth-form)}
|
||||
[:div {:class (stl/css :auth-form-wrapper)}
|
||||
[:h1 {:class (stl/css :auth-title)} (tr "auth.recovery-request-title")]
|
||||
[:div {:class (stl/css :auth-subtitle)} (tr "auth.recovery-request-subtitle")]
|
||||
[:hr {:class (stl/css :separator)}]
|
||||
|
||||
[:& recovery-form {:params params :on-success-callback on-success-callback}]
|
||||
|
||||
[:div {:class (stl/css :link-entry)}
|
||||
[:hr {:class (stl/css :separator)}]
|
||||
[:div {:class (stl/css :go-back)}
|
||||
[:& lk/link {:action go-back
|
||||
:class (stl/css :go-back-link)
|
||||
:data-test "go-back-link"}
|
||||
(tr "labels.go-back")]]]))
|
||||
|
|
|
|||
|
|
@ -132,19 +132,18 @@
|
|||
[{:keys [params on-success-callback]}]
|
||||
[:*
|
||||
(when login/show-alt-login-buttons?
|
||||
[:*
|
||||
[:hr {:class (stl/css :separator)}]
|
||||
[:& login/login-buttons {:params params}]])
|
||||
[:& login/login-buttons {:params params}])
|
||||
[:hr {:class (stl/css :separator)}]
|
||||
[:& register-form {:params params :on-success-callback on-success-callback}]])
|
||||
|
||||
(mf/defc register-page
|
||||
{::mf/props :obj}
|
||||
[{:keys [params]}]
|
||||
[:div {:class (stl/css :auth-form)}
|
||||
[:div {:class (stl/css :auth-form-wrapper)}
|
||||
[:h1 {:class (stl/css :auth-title)
|
||||
:data-test "registration-title"} (tr "auth.register-title")]
|
||||
[:div {:class (stl/css :auth-subtitle)} (tr "auth.register-subtitle")]
|
||||
[:p {:class (stl/css :auth-tagline)}
|
||||
(tr "auth.login-tagline")]
|
||||
|
||||
(when (contains? cf/flags :demo-warning)
|
||||
[:& login/demo-warning])
|
||||
|
|
@ -152,18 +151,20 @@
|
|||
[:& register-methods {:params params}]
|
||||
|
||||
[:div {:class (stl/css :links)}
|
||||
[:div {:class (stl/css :link-entry :account)}
|
||||
[:span (tr "auth.already-have-account") " "]
|
||||
|
||||
[:div {:class (stl/css :account)}
|
||||
[:span {:class (stl/css :account-text)} (tr "auth.already-have-account") " "]
|
||||
[:& lk/link {:action #(st/emit! (rt/nav :auth-login {} params))
|
||||
:class (stl/css :account-link)
|
||||
:data-test "login-here-link"}
|
||||
(tr "auth.login-here")]]
|
||||
|
||||
(when (contains? cf/flags :demo-users)
|
||||
[:div {:class (stl/css :link-entry :demo-users)}
|
||||
[:span (tr "auth.create-demo-profile") " "]
|
||||
[:& lk/link {:action #(st/emit! (du/create-demo-profile))}
|
||||
(tr "auth.create-demo-account")]])]])
|
||||
[:*
|
||||
[:hr {:class (stl/css :separator)}]
|
||||
[:div {:class (stl/css :demo-account)}
|
||||
[:& lk/link {:action #(st/emit! (du/create-demo-profile))
|
||||
:class (stl/css :demo-account-link)}
|
||||
(tr "auth.create-demo-account")]]])]])
|
||||
|
||||
;; --- PAGE: register validation
|
||||
|
||||
|
|
@ -228,7 +229,8 @@
|
|||
(rx/subs! on-success
|
||||
(partial handle-register-error form))))))]
|
||||
|
||||
[:& fm/form {:on-submit on-submit :form form}
|
||||
[:& fm/form {:on-submit on-submit :form form
|
||||
:class (stl/css :register-validate-form)}
|
||||
[:div {:class (stl/css :fields-row)}
|
||||
[:& fm/input {:name :fullname
|
||||
:label (tr "auth.fullname")
|
||||
|
|
@ -258,7 +260,7 @@
|
|||
|
||||
(mf/defc register-validate-page
|
||||
[{:keys [params]}]
|
||||
[:div {:class (stl/css :auth-form)}
|
||||
[:div {:class (stl/css :auth-form-wrapper)}
|
||||
[:h1 {:class (stl/css :auth-title)
|
||||
:data-test "register-title"} (tr "auth.register-title")]
|
||||
[:div {:class (stl/css :auth-subtitle)} (tr "auth.register-subtitle")]
|
||||
|
|
@ -268,13 +270,14 @@
|
|||
[:& register-validate-form {:params params}]
|
||||
|
||||
[:div {:class (stl/css :links)}
|
||||
[:div {:class (stl/css :link-entry :go-back)}
|
||||
[:& lk/link {:action #(st/emit! (rt/nav :auth-register {} {}))}
|
||||
[:div {:class (stl/css :go-back)}
|
||||
[:& lk/link {:action #(st/emit! (rt/nav :auth-register {} {}))
|
||||
:class (stl/css :go-back-link)}
|
||||
(tr "labels.go-back")]]]])
|
||||
|
||||
(mf/defc register-success-page
|
||||
[{:keys [params]}]
|
||||
[:div {:class (stl/css :auth-form :register-success)}
|
||||
[:div {:class (stl/css :auth-form-wrapper :register-success)}
|
||||
[:div {:class (stl/css :notification-icon)} i/icon-verify]
|
||||
[:div {:class (stl/css :notification-text)} (tr "auth.verification-email-sent")]
|
||||
[:div {:class (stl/css :notification-text-email)} (:email params "")]
|
||||
|
|
|
|||
|
|
@ -50,7 +50,6 @@
|
|||
cursor: pointer;
|
||||
color: var(--modal-title-foreground-color);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: $s-8;
|
||||
input {
|
||||
@extend .input-element;
|
||||
color: var(--input-foreground-color-active);
|
||||
|
|
@ -144,8 +143,9 @@
|
|||
|
||||
.hint {
|
||||
@include bodySmallTypography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
width: 99%;
|
||||
margin-block-start: $s-8;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@
|
|||
|
||||
.group-name-input {
|
||||
@extend .input-element-label;
|
||||
margin-bottom: $s-8;
|
||||
label {
|
||||
@include flexColumn;
|
||||
@include bodySmallTypography;
|
||||
|
|
|
|||
|
|
@ -127,6 +127,7 @@
|
|||
height: $s-32;
|
||||
width: calc(100% - $s-24);
|
||||
margin-inline-start: $s-24;
|
||||
margin-block-end: $s-8;
|
||||
}
|
||||
|
||||
// STEP-4
|
||||
|
|
|
|||
|
|
@ -78,19 +78,21 @@
|
|||
:on-click close} i/close]]
|
||||
|
||||
[:div {:class (stl/css :modal-content)}
|
||||
|
||||
(case current-section
|
||||
:login
|
||||
[:div {:class (stl/css :form-container)}
|
||||
[:& login-methods {:on-success-callback success-login :origin :viewer}]
|
||||
[:div {:class (stl/css :links)}
|
||||
[:div {:class (stl/css :link-entry)}
|
||||
[:div {:class (stl/css :recovery-request)}
|
||||
[:a {:on-click set-section
|
||||
:class (stl/css :recovery-link)
|
||||
:data-value "recovery-request"}
|
||||
(tr "auth.forgot-password")]]
|
||||
[:div {:class (stl/css :link-entry)}
|
||||
[:span (tr "auth.register") " "]
|
||||
[:div {:class (stl/css :register)}
|
||||
[:span {:class (stl/css :register-text)}
|
||||
(tr "auth.register") " "]
|
||||
[:a {:on-click set-section
|
||||
:class (stl/css :register-link)
|
||||
:data-value "register"}
|
||||
(tr "auth.register-submit")]]]]
|
||||
|
||||
|
|
@ -98,7 +100,7 @@
|
|||
[:div {:class (stl/css :form-container)}
|
||||
[:& register-methods {:on-success-callback success-register}]
|
||||
[:div {:class (stl/css :links)}
|
||||
[:div {:class (stl/css :link-entry)}
|
||||
[:div {:class (stl/css :account)}
|
||||
[:span (tr "auth.already-have-account") " "]
|
||||
[:a {:on-click set-section
|
||||
:data-value "login"}
|
||||
|
|
@ -109,7 +111,7 @@
|
|||
[:& register-validate-form {:params {:token @register-token}
|
||||
:on-success-callback success-email-sent}]
|
||||
[:div {:class (stl/css :links)}
|
||||
[:div {:class (stl/css :link-entry)}
|
||||
[:div {:class (stl/css :register)}
|
||||
[:a {:on-click set-section
|
||||
:data-value "register"}
|
||||
(tr "labels.go-back")]]]]
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@
|
|||
}
|
||||
.input-wrapper {
|
||||
@extend .input-with-label;
|
||||
margin-bottom: $s-8;
|
||||
}
|
||||
.action-buttons {
|
||||
@extend .modal-action-btns;
|
||||
|
|
|
|||
|
|
@ -58,8 +58,12 @@ msgid "auth.login-submit"
|
|||
msgstr "Login"
|
||||
|
||||
#: src/app/main/ui/auth/login.cljs
|
||||
msgid "auth.login-title"
|
||||
msgstr "Great to see you again!"
|
||||
msgid "auth.login-account-title"
|
||||
msgstr "Log into my account"
|
||||
|
||||
#: src/app/main/ui/auth/login.cljs
|
||||
msgid "auth.login-tagline"
|
||||
msgstr "Penpot is the free open-source design tool for Design and Code collaboration"
|
||||
|
||||
#: src/app/main/ui/auth/login.cljs
|
||||
msgid "auth.login-with-github-submit"
|
||||
|
|
|
|||
|
|
@ -61,8 +61,12 @@ msgid "auth.login-submit"
|
|||
msgstr "Entrar"
|
||||
|
||||
#: src/app/main/ui/auth/login.cljs
|
||||
msgid "auth.login-title"
|
||||
msgstr "¡Un placer verte de nuevo!"
|
||||
msgid "auth.login-account-title"
|
||||
msgstr "Entrar en mi cuenta"
|
||||
|
||||
#: src/app/main/ui/auth/login.cljs
|
||||
msgid "auth.login-tagline"
|
||||
msgstr "Penpot es la herramienta de diseño libre y open-source para la colaboración entre Diseño y Código"
|
||||
|
||||
#: src/app/main/ui/auth/login.cljs
|
||||
msgid "auth.login-with-github-submit"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue