github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-09-06 20:18:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix viewer login modal lacks spacing between SSO buttons and work email field (#11312)

Browse Source 
* 🐛 Fix spacing between SSO buttons and email field

* ♻️ Update scrollbar on register page

* ♻️ Translate hardcoded string

---------

Co-authored-by: Eva Marco <evamarcod@gmail.com>
This commit is contained in:
Luis de Dios 2026-08-31 12:17:57 +02:00 committed by GitHub
parent 2ed0981e8a
commit bfb5cae9f4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 428 additions and 428 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/main/ui/auth.cljs
View File

@ -13,7 +13,7 @@
[app.main.ui.auth.login :refer [login-page*]] [app.main.ui.auth.login :refer [login-page*]]
[app.main.ui.auth.recovery :refer [recovery-page*]] [app.main.ui.auth.recovery :refer [recovery-page*]]
[app.main.ui.auth.recovery-request :refer [recovery-request-page*]] [app.main.ui.auth.recovery-request :refer [recovery-request-page*]]
[app.main.ui.auth.register :refer [register-page* register-success-page* register-validate-page* terms-register*]] [app.main.ui.auth.register :refer [register-page* register-success-page* register-validate-page* terms-service-privacy-policy*]]
[app.main.ui.ds.foundations.assets.raw-svg :refer [raw-svg*] :as raw-svg] [app.main.ui.ds.foundations.assets.raw-svg :refer [raw-svg*] :as raw-svg]
[app.main.ui.ds.foundations.typography.heading :refer [heading*]] [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
[app.util.dom :as dom] [app.util.dom :as dom]
@ -74,7 +74,7 @@
[:> recovery-page* {:params params}]) [:> recovery-page* {:params params}])
(when (= section :auth-register) (when (= section :auth-register)
[:> terms-register*])]])) [:> terms-service-privacy-policy*])]]))
(mf/defc auth-page* (mf/defc auth-page*

3
frontend/src/app/main/ui/auth.scss
View File

@ -6,6 +6,7 @@
@use "ds/_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "ds/_utils.scss" as *; @use "ds/_utils.scss" as *;
@use "./ds/mixins.scss" as *;
.auth-section { .auth-section {
display: grid; display: grid;
@ -26,6 +27,8 @@
} }
.auth-section.register { .auth-section.register {
@include custom-scrollbar;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

248
frontend/src/app/main/ui/auth/common.scss
View File

@ -4,56 +4,15 @@
// //
// Copyright (c) KALEIDOS INC Sucursal en España SL // Copyright (c) KALEIDOS INC Sucursal en España SL
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *; @use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *; @use "ds/typography.scss" as *;
.auth-form-wrapper { .form {
inline-size: 100%; display: flex;
padding-block-end: 0; flex-direction: column;
display: grid;
gap: var(--sp-m); gap: var(--sp-m);
margin: var(--sp-m) 0;
// Native <form> inside auth-form-wrapper — no class available
form {
display: flex;
flex-direction: column;
gap: var(--sp-m);
margin-block-start: var(--sp-m);
}
}
.auth-title-wrapper {
inline-size: 100%;
padding-block-end: 0;
display: grid;
gap: var(--sp-s);
}
.separator {
border-color: var(--color-background-quaternary);
margin: 0;
}
.auth-title {
@include use-typography("title-large");
line-height: 1.2;
color: var(--color-foreground-primary);
}
.auth-subtitle {
@include use-typography("title-small");
color: var(--color-foreground-secondary);
}
.auth-tagline {
@include use-typography("title-small");
margin: 0;
color: var(--color-foreground-secondary);
} }
.form-field { .form-field {
@ -62,36 +21,40 @@
--input-min-width: 100%; --input-min-width: 100%;
} }
.buttons-stack { .form-submit-btn {
display: grid; --button-bg-color: var(--color-accent-primary);
gap: var(--sp-s); --button-border-color: var(--color-accent-primary);
} --button-fg-color: var(--color-background-secondary);
.login-button,
.login-ldap-button {
@include use-typography("headline-small"); @include use-typography("headline-small");
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer; background-color: var(--button-bg-color);
background-color: var(--color-accent-primary); border: $b-1 solid var(--button-border-color);
border: $b-1 solid var(--color-accent-primary); color: var(--button-fg-color);
color: var(--color-background-secondary);
border-radius: $br-8; border-radius: $br-8;
min-block-size: $sz-32; min-block-size: $sz-32;
block-size: $sz-40; block-size: $sz-40;
inline-size: 100%; inline-size: 100%;
&:hover {
--button-bg-color: var(--color-accent-tertiary);
--button-border-color: var(--color-accent-tertiary);
--button-fg-color: var(--color-background-secondary);
text-decoration: none;
}
&:disabled { &:disabled {
background-color: var(--color-background-quaternary); --button-bg-color: var(--color-background-quaternary);
border: 1px solid var(--color-background-quaternary); --button-border-color: var(--color-background-quaternary);
color: var(--color-foreground-disabled); --button-fg-color: var(--color-foreground-disabled);
cursor: unset;
} }
} }
.go-back { .go-back-row {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--sp-m); gap: var(--sp-m);
@ -100,19 +63,68 @@
} }
.go-back-link { .go-back-link {
--button-bg-color: var(--color-background-tertiary);
--button-border-color: var(--color-background-tertiary);
--button-fg-color: var(--color-foreground-secondary);
@include use-typography("headline-small");
background: none; background: none;
cursor: pointer;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: $br-8; border-radius: $br-8;
background-color: var(--color-background-tertiary); background-color: var(--button-bg-color);
border: $b-1 solid var(--color-background-tertiary); border: $b-1 solid var(--button-border-color);
color: var(--color-foreground-secondary); color: var(--button-fg-color);
@include use-typography("headline-small");
block-size: $sz-40; block-size: $sz-40;
&:hover {
--button-bg-color: var(--color-background-quaternary);
--button-border-color: var(--color-background-quaternary);
--button-fg-color: var(--color-accent-primary);
text-decoration: none;
}
}
.separator {
border-color: var(--color-background-quaternary);
margin: 0;
}
.wrapper {
inline-size: 100%;
padding-block-end: 0;
display: grid;
gap: var(--sp-m);
}
.title-wrapper {
inline-size: 100%;
padding-block-end: 0;
display: grid;
gap: var(--sp-s);
}
.title {
@include use-typography("title-large");
line-height: 1.2;
color: var(--color-foreground-primary);
}
.subtitle {
@include use-typography("title-small");
color: var(--color-foreground-secondary);
}
.tagline {
@include use-typography("title-small");
margin: 0;
color: var(--color-foreground-secondary);
} }
.links { .links {
@ -120,104 +132,10 @@
gap: var(--sp-xxl); gap: var(--sp-xxl);
} }
.register, .notification-email {
.account, @include use-typography("title-medium");
.recovery-request,
.demo-account {
display: flex;
justify-content: center;
gap: var(--sp-s);
padding: 0;
}
.register-text, line-height: 1.2;
.account-text,
.recovery-text,
.demo-account-text {
@include use-typography("title-small");
text-align: right;
color: var(--color-foreground-secondary);
}
.register-link,
.account-link,
.recovery-link,
.forgot-pass-link,
.demo-account-link {
@include use-typography("title-small");
text-align: left;
background-color: transparent;
border: none;
display: inline;
color: var(--color-accent-primary); color: var(--color-accent-primary);
margin-inline: $sz-36;
&:hover {
text-decoration: underline;
}
}
.forgot-password {
display: flex;
justify-content: flex-end;
}
.submit-btn,
.register-btn,
.recover-btn {
@include use-typography("headline-small");
background: none;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--color-accent-primary);
border: $b-1 solid var(--color-accent-primary);
color: var(--color-background-secondary);
border-radius: $br-8;
min-block-size: $sz-32;
block-size: $sz-40;
inline-size: 100%;
&:disabled {
background-color: var(--color-background-quaternary);
border: $b-1 solid var(--color-background-quaternary);
color: var(--color-foreground-disabled);
cursor: unset;
}
}
.login-btn {
@include use-typography("title-small");
display: flex;
align-items: center;
gap: px2rem(6);
inline-size: 100%;
border-radius: $br-8;
background-color: var(--color-background-tertiary);
color: var(--color-foreground-primary);
span {
padding-block-start: var(--sp-xxs);
}
&:hover {
color: var(--color-foreground-primary);
background-color: var(--color-background-quaternary);
}
&:disabled {
background-color: var(--color-background-quaternary);
border: 1px solid var(--color-background-quaternary);
color: var(--color-foreground-disabled);
cursor: unset;
}
}
.auth-buttons {
display: flex;
gap: var(--sp-s);
} }

111
frontend/src/app/main/ui/auth/login.cljs
View File

@ -71,10 +71,17 @@
(mf/defc login-form* (mf/defc login-form*
[{:keys [params handle-redirect on-success-callback on-recovery-request origin] :as props}] [{:keys [params handle-redirect on-success-callback on-recovery-request origin] :as props}]
(let [initial (mf/with-memo [params] params) (let [initial (mf/with-memo [params] params)
error (mf/use-state false)
form (fm/use-form :schema schema:login-form form (fm/use-form :schema schema:login-form
:initial initial) :initial initial)
error (mf/use-state false)
show-password-field* (mf/use-state #(not (contains? cf/flags :login-with-custom-sso)))
show-password-field? (deref show-password-field*)
callback-url (:callback-url params) callback-url (:callback-url params)
on-error on-error
(fn [cause] (fn [cause]
(let [cause (ex-data cause)] (let [cause (ex-data cause)]
@ -102,12 +109,6 @@
:else :else
(reset! error (tr "errors.generic"))))) (reset! error (tr "errors.generic")))))
show-password-field*
(mf/use-state #(not (contains? cf/flags :login-with-custom-sso)))
show-password-field?
(deref show-password-field*)
on-success on-success
(fn [data] (fn [data]
(when (fn? on-success-callback) (when (fn? on-success-callback)
@ -130,7 +131,8 @@
(->> (rp/cmd! :get-sso-provider {:email (:email params)}) (->> (rp/cmd! :get-sso-provider {:email (:email params)})
(rx/map :id) (rx/map :id)
(rx/catch (fn [cause] (rx/catch (fn [cause]
(log/error :hint "error on retrieving sso provider" :cause cause) (log/error :hint "error on retrieving sso provider"
:cause cause)
(rx/of nil))) (rx/of nil)))
(rx/subs! (fn [sso-provider-id] (rx/subs! (fn [sso-provider-id]
(if sso-provider-id (if sso-provider-id
@ -139,7 +141,7 @@
(reset! show-password-field* true)))))))))) (reset! show-password-field* true))))))))))
on-submit-ldap on-submit-ldap
(mf/use-callback (mf/use-fn
(mf/deps form) (mf/deps form)
(fn [event] (fn [event]
(dom/prevent-default event) (dom/prevent-default event)
@ -168,91 +170,102 @@
{:level :error} message]) {:level :error} message])
[:& fm/form {:on-submit on-submit [:& fm/form {:on-submit on-submit
:class (stl/css :login-form) :class (stl/css :form)
:form form} :form form}
[:div {:class (stl/css :fields-row)} [:div {:class (stl/css :form-row)}
[:& fm/input [:& fm/input {:name :email
{:name :email :type "email"
:type "email" :label (tr "auth.work-email")
:label (tr "auth.work-email") :class (stl/css :form-field)}]]
:class (stl/css :form-field)}]]
(when show-password-field? (when show-password-field?
[:div {:class (stl/css :fields-row)} [:div {:class (stl/css :form-row)}
[:& fm/input [:& fm/input {:type "password"
{:type "password" :name :password
:name :password :auto-focus? true
:auto-focus? true :label (tr "auth.password")
:label (tr "auth.password") :class (stl/css :form-field)}]])
:class (stl/css :form-field)}]])
(when (and (not= origin :viewer) (when (and (not= origin :viewer)
(or (contains? cf/flags :login) (or (contains? cf/flags :login)
(contains? cf/flags :login-with-password))) (contains? cf/flags :login-with-password)))
[:div {:class (stl/css :fields-row :forgot-password)} [:div {:class (stl/css :form-row :forgot-password-row)}
[:> lk/link* {:action on-recovery-request [:> lk/link* {:action on-recovery-request
:class (stl/css :forgot-pass-link) :class (stl/css :forgot-password-link)
:data-testid "forgot-password"} :data-testid "forgot-password"}
(tr "auth.forgot-password")]]) (tr "auth.forgot-password")]])
[:div {:class (stl/css :buttons-stack)} [:div {:class (stl/css :form-submit-buttons)}
(when (or (contains? cf/flags :login) (when (or (contains? cf/flags :login)
(contains? cf/flags :login-with-password)) (contains? cf/flags :login-with-password))
[:> fm/submit-button* [:> fm/submit-button* {:label (tr "labels.continue")
{:label (tr "labels.continue") :data-testid "login-submit"
:data-testid "login-submit" :class (stl/css :form-submit-btn)}])
:class (stl/css :login-button)}])
(when (contains? cf/flags :login-with-ldap) (when (contains? cf/flags :login-with-ldap)
[:> fm/submit-button* [:> fm/submit-button* {:label (tr "auth.login-with-ldap-submit")
{:label (tr "auth.login-with-ldap-submit") :class (stl/css :form-submit-btn)
:class (stl/css :login-ldap-button) :on-click on-submit-ldap}])]]]))
:on-click on-submit-ldap}])]]]))
(defn raw-icon (defn raw-icon
[id] [id]
(mf/html (mf/html
[:> raw-svg* {:id id :class (stl/css :sso-icon)}])) [:> raw-svg* {:id id :class (stl/css :sso-icon)}]))
(mf/defc login-sso-buttons* (mf/defc sso-buttons*
[{:keys [params] :as props}] [{:keys [params] :as props}]
(let [login-with-google (mf/use-fn (mf/deps params) #(login-with-sso "google" params)) (let [login-with-google
login-with-github (mf/use-fn (mf/deps params) #(login-with-sso "github" params)) (mf/use-fn
login-with-gitlab (mf/use-fn (mf/deps params) #(login-with-sso "gitlab" params)) (mf/deps params)
login-with-oidc (mf/use-fn (mf/deps params) #(login-with-sso "oidc" params))] #(login-with-sso "google" params))
[:div {:class (stl/css :auth-buttons)} login-with-github
(mf/use-fn
(mf/deps params)
#(login-with-sso "github" params))
login-with-gitlab
(mf/use-fn
(mf/deps params)
#(login-with-sso "gitlab" params))
login-with-oidc
(mf/use-fn
(mf/deps params)
#(login-with-sso "oidc" params))]
[:div {:class (stl/css :sso-row)}
(when (contains? cf/flags :login-with-google) (when (contains? cf/flags :login-with-google)
[:> bl/button-link* {:on-click login-with-google [:> bl/button-link* {:on-click login-with-google
:icon (raw-icon raw-icons/brand-google) :icon (raw-icon raw-icons/brand-google)
:label (tr "auth.login-with-google-submit") :label (tr "auth.login-with-google-submit")
:class (stl/css :login-btn :btn-google-auth)}]) :class (stl/css :sso-btn)}])
(when (contains? cf/flags :login-with-github) (when (contains? cf/flags :login-with-github)
[:> bl/button-link* {:on-click login-with-github [:> bl/button-link* {:on-click login-with-github
:icon (raw-icon raw-icons/brand-github) :icon (raw-icon raw-icons/brand-github)
:label (tr "auth.login-with-github-submit") :label (tr "auth.login-with-github-submit")
:class (stl/css :login-btn :btn-github-auth)}]) :class (stl/css :sso-btn)}])
(when (contains? cf/flags :login-with-gitlab) (when (contains? cf/flags :login-with-gitlab)
[:> bl/button-link* {:on-click login-with-gitlab [:> bl/button-link* {:on-click login-with-gitlab
:icon (raw-icon raw-icons/brand-gitlab) :icon (raw-icon raw-icons/brand-gitlab)
:label (tr "auth.login-with-gitlab-submit") :label (tr "auth.login-with-gitlab-submit")
:class (stl/css :login-btn :btn-gitlab-auth)}]) :class (stl/css :sso-btn)}])
(when (contains? cf/flags :login-with-oidc) (when (contains? cf/flags :login-with-oidc)
[:> bl/button-link* {:on-click login-with-oidc [:> bl/button-link* {:on-click login-with-oidc
:icon (raw-icon raw-icons/brand-openid) :icon (raw-icon raw-icons/brand-openid)
:label (or (not-empty cf/oidc-name) (tr "auth.login-with-oidc-submit")) :label (or (not-empty cf/oidc-name) (tr "auth.login-with-oidc-submit"))
:class (stl/css :login-btn :btn-oidc-auth)}])])) :class (stl/css :sso-btn)}])]))
(mf/defc login-dialog* (mf/defc login-dialog*
[{:keys [params] :as props}] [{:keys [params] :as props}]
[:* [:*
(when show-sso-login-buttons? (when show-sso-login-buttons?
[:* [:*
[:> login-sso-buttons* {:params params}] [:> sso-buttons* {:params params}]
(when (or (contains? cf/flags :login) (when (or (contains? cf/flags :login)
(contains? cf/flags :login-with-password) (contains? cf/flags :login-with-password)
@ -270,11 +283,11 @@
(mf/use-fn (mf/use-fn
#(st/emit! (rt/nav :auth-register params)))] #(st/emit! (rt/nav :auth-register params)))]
[:div {:class (stl/css :auth-form-wrapper)} [:div {:class (stl/css :wrapper)}
[:h1 {:class (stl/css :auth-title) [:h1 {:class (stl/css :title)
:data-testid "login-title"} (tr "auth.login-account-title")] :data-testid "login-title"} (tr "auth.login-account-title")]
[:p {:class (stl/css :auth-tagline)} [:p {:class (stl/css :tagline)}
(tr "auth.login-tagline")] (tr "auth.login-tagline")]
(when (contains? cf/flags :demo-warning) (when (contains? cf/flags :demo-warning)
@ -286,7 +299,7 @@
[:div {:class (stl/css :links)} [:div {:class (stl/css :links)}
(when (contains? cf/flags :registration) (when (contains? cf/flags :registration)
[:div {:class (stl/css :register)} [:div {:class (stl/css :register-row)}
[:span {:class (stl/css :register-text)} [:span {:class (stl/css :register-text)}
(tr "auth.register") " "] (tr "auth.register") " "]
[:> lk/link* {:action go-register [:> lk/link* {:action go-register

80
frontend/src/app/main/ui/auth/login.scss
View File

@ -6,8 +6,88 @@
@use "./common"; @use "./common";
@use "ds/_utils.scss" as *; @use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.forgot-password-row {
display: flex;
justify-content: flex-end;
}
.forgot-password-link {
@include use-typography("title-small");
text-align: left;
background-color: transparent;
border: none;
display: inline;
color: var(--color-accent-primary);
&:hover {
text-decoration: underline;
}
}
.form-submit-buttons {
display: grid;
gap: var(--sp-s);
}
.sso-icon { .sso-icon {
max-inline-size: px2rem(26); max-inline-size: px2rem(26);
max-block-size: px2rem(26); max-block-size: px2rem(26);
} }
.sso-row {
display: flex;
gap: var(--sp-s);
}
.sso-btn {
--button-bg-color: var(--color-background-tertiary);
--button-fg-color: var(--color-foreground-primary);
@include use-typography("title-small");
display: flex;
align-items: center;
gap: px2rem(6);
inline-size: 100%;
border-radius: $br-8;
background-color: var(--button-bg-color);
color: var(--button-fg-color);
&:hover {
--button-bg-color: var(--color-background-quaternary);
--button-fg-color: var(--color-foreground-primary);
}
}
.register-row {
display: flex;
justify-content: center;
gap: var(--sp-s);
padding: 0;
}
.register-text {
@include use-typography("title-small");
text-align: right;
color: var(--color-foreground-secondary);
}
.register-link {
@include use-typography("title-small");
text-align: left;
background-color: transparent;
border: none;
display: inline;
color: var(--color-accent-primary);
&:hover {
text-decoration: underline;
}
}

19
frontend/src/app/main/ui/auth/recovery.cljs
View File

@ -60,39 +60,38 @@
:initial params)] :initial params)]
[:& fm/form {:on-submit on-submit [:& fm/form {:on-submit on-submit
:class (stl/css :recovery-form) :class (stl/css :form)
:form form} :form form}
[:div {:class (stl/css :fields-row)} [:div {:class (stl/css :form-row)}
[:& fm/input {:type "password" [:& fm/input {:type "password"
:name :password-1 :name :password-1
:show-success? true :show-success? true
:label (tr "auth.new-password") :label (tr "auth.new-password")
:class (stl/css :form-field)}]] :class (stl/css :form-field)}]]
[:div {:class (stl/css :fields-row)} [:div {:class (stl/css :form-row)}
[:& fm/input {:type "password" [:& fm/input {:type "password"
:name :password-2 :name :password-2
:show-success? true :show-success? true
:label (tr "auth.confirm-password") :label (tr "auth.confirm-password")
:class (stl/css :form-field)}]] :class (stl/css :form-field)}]]
[:> fm/submit-button* [:> fm/submit-button* {:label (tr "auth.recovery-submit")
{:label (tr "auth.recovery-submit") :class (stl/css :form-submit-btn)}]]))
:class (stl/css :submit-btn)}]]))
;; --- Recovery Request Page ;; --- Recovery Request Page
(mf/defc recovery-page* (mf/defc recovery-page*
[{:keys [params]}] [{:keys [params]}]
[:div {:class (stl/css :auth-form-wrapper)} [:div {:class (stl/css :wrapper)}
[:h1 {:class (stl/css :auth-title)} "Forgot your password?"] [:h1 {:class (stl/css :title)} (tr "auth.recovery-request-title")]
[:div {:class (stl/css :auth-subtitle)} "Please enter your new password"] [:div {:class (stl/css :subtitle)} (tr "auth.recovery-request-subtitle")]
[:hr {:class (stl/css :separator)}] [:hr {:class (stl/css :separator)}]
[:> recovery-form* {:params params}] [:> recovery-form* {:params params}]
[:div {:class (stl/css :links)} [:div {:class (stl/css :links)}
[:div {:class (stl/css :go-back)} [:div {:class (stl/css :go-back-row)}
[:a {:on-click #(st/emit! (rt/nav :auth-login)) [:a {:on-click #(st/emit! (rt/nav :auth-login))
:class (stl/css :go-back-link)} :class (stl/css :go-back-link)}
(tr "profile.recovery.go-to-login")]]]]) (tr "profile.recovery.go-to-login")]]]])

4
frontend/src/app/main/ui/auth/recovery.scss
View File

@ -5,7 +5,3 @@
// Copyright (c) KALEIDOS INC Sucursal en España SL // Copyright (c) KALEIDOS INC Sucursal en España SL
@use "./common"; @use "./common";
.submit-btn {
margin-block-start: var(--sp-l);
}

28
frontend/src/app/main/ui/auth/recovery_request.cljs
View File

@ -70,18 +70,17 @@
(st/emit! (du/request-profile-recovery params)))))] (st/emit! (du/request-profile-recovery params)))))]
[:& fm/form {:on-submit on-submit [:& fm/form {:on-submit on-submit
:class (stl/css :recovery-request-form) :class (stl/css :form)
:form form} :form form}
[:div {:class (stl/css :fields-row)} [:div {:class (stl/css :form-row)}
[:& fm/input {:name :email [:& fm/input {:name :email
:label (tr "auth.work-email") :label (tr "auth.work-email")
:type "text" :type "text"
:class (stl/css :form-field)}]] :class (stl/css :form-field)}]]
[:> fm/submit-button* [:> fm/submit-button* {:label (tr "auth.recovery-request-submit")
{:label (tr "auth.recovery-request-submit") :data-testid "recovery-resquest-submit"
:data-testid "recovery-resquest-submit" :class (stl/css :form-submit-btn)}]]))
:class (stl/css :recover-btn)}]]))
;; --- Recovery Request Page ;; --- Recovery Request Page
@ -90,14 +89,14 @@
[{:keys [params on-success-callback go-back-callback]}] [{:keys [params on-success-callback go-back-callback]}]
(let [default-go-back #(st/emit! (rt/nav :auth-login)) (let [default-go-back #(st/emit! (rt/nav :auth-login))
go-back (or go-back-callback default-go-back)] go-back (or go-back-callback default-go-back)]
[:div {:class (stl/css :auth-form-wrapper)} [:div {:class (stl/css :wrapper)}
[:h1 {:class (stl/css :auth-title)} (tr "auth.recovery-request-title")] [:h1 {:class (stl/css :title)} (tr "auth.recovery-request-title")]
[:div {:class (stl/css :auth-subtitle)} (tr "auth.recovery-request-subtitle")] [:div {:class (stl/css :subtitle)} (tr "auth.recovery-request-subtitle")]
[:hr {:class (stl/css :separator)}] [:hr {:class (stl/css :separator)}]
[:> recovery-form* {:params params :on-success-callback on-success-callback}] [:> recovery-form* {:params params :on-success-callback on-success-callback}]
[:hr {:class (stl/css :separator)}] [:hr {:class (stl/css :separator)}]
[:div {:class (stl/css :go-back)} [:div {:class (stl/css :go-back-row)}
[:> lk/link* {:action go-back [:> lk/link* {:action go-back
:class (stl/css :go-back-link) :class (stl/css :go-back-link)
:data-testid "go-back-link"} :data-testid "go-back-link"}
@ -106,11 +105,10 @@
(mf/defc recovery-sent-page* (mf/defc recovery-sent-page*
[{:keys [email]}] [{:keys [email]}]
[:div {:class (stl/css :auth-form-wrapper :register-success)} [:div {:class (stl/css :wrapper :register-success)}
[:div {:class (stl/css :auth-title-wrapper)} [:div {:class (stl/css :title-wrapper)}
[:h2 {:class (stl/css :auth-title)} [:h2 {:class (stl/css :title)}
(tr "auth.check-email")] (tr "auth.check-email")]
[:div {:class (stl/css :notification-text)} (tr "not-found.login.sent-recovery")]] [:div {:class (stl/css :notification-text)} (tr "not-found.login.sent-recovery")]]
[:div {:class (stl/css :notification-text-email)} email] [:div {:class (stl/css :notification-email)} email]
[:div {:class (stl/css :notification-text)} (tr "not-found.login.sent-recovery-check")]]) [:div {:class (stl/css :notification-text)} (tr "not-found.login.sent-recovery-check")]])

15
frontend/src/app/main/ui/auth/recovery_request.scss
View File

@ -4,19 +4,4 @@
// //
// Copyright (c) KALEIDOS INC Sucursal en España SL // Copyright (c) KALEIDOS INC Sucursal en España SL
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/typography.scss" as *;
@use "./common"; @use "./common";
.fields-row {
margin-block-end: var(--sp-s);
}
.notification-text-email {
@include use-typography("title-medium");
line-height: 1.2;
color: var(--color-accent-primary);
margin-inline: $sz-36;
}

113
frontend/src/app/main/ui/auth/register.cljs
View File

@ -26,39 +26,38 @@
;; --- PAGE: Register ;; --- PAGE: Register
(mf/defc newsletter-options* (mf/defc newsletter-checkbox*
{::mf/private true} {::mf/private true}
[] []
(let [updates-label (let [newsletter-label
(mf/html (mf/html
[:> i18n/tr-html* [:> i18n/tr-html* {:tag-name "div"
{:tag-name "div" :content (tr "onboarding-v2.newsletter.updates")}])]
:content (tr "onboarding-v2.newsletter.updates")}])]
[:div {:class (stl/css :fields-row :input-visible :newsletter-option-wrapper)} [:div {:class (stl/css :form-row :input-visible :newsletter-option-wrapper)}
[:& fm/input {:name :accept-newsletter-updates [:& fm/input {:name :accept-newsletter-updates
:class (stl/css :checkbox-newsletter-updates) :class (stl/css :checkbox-newsletter-updates)
:type "checkbox" :type "checkbox"
:default-checked false :default-checked false
:label updates-label}]])) :label newsletter-label}]]))
(mf/defc terms-and-privacy* (mf/defc terms-and-privacy-checkbox*
{::mf/private true} {::mf/private true}
[] []
(let [terms-label (let [terms-and-privacy-label
(mf/html (mf/html
[:> i18n/tr-html* [:> i18n/tr-html* {:tag-name "div"
{:tag-name "div" :content (tr "auth.terms-and-privacy-agreement"
:content (tr "auth.terms-and-privacy-agreement" cf/terms-of-service-uri
cf/terms-of-service-uri cf/privacy-policy-uri)}])]
cf/privacy-policy-uri)}])]
[:div {:class (stl/css :fields-row :input-visible :accept-terms-and-privacy-wrapper)} [:div {:class (stl/css :form-row :input-visible :accept-terms-and-privacy-wrapper)}
[:& fm/input {:name :accept-terms-and-privacy [:& fm/input {:name :accept-terms-and-privacy
:show-error false :show-error false
:class (stl/css :checkbox-terms-and-privacy) :class (stl/css :checkbox-terms-and-privacy)
:type "checkbox" :type "checkbox"
:default-checked false :default-checked false
:label terms-label}]])) :label terms-and-privacy-label}]]))
(def ^:private schema:register-form (def ^:private schema:register-form
[:map {:title "RegisterForm"} [:map {:title "RegisterForm"}
@ -76,8 +75,7 @@
form (fm/use-form :schema schema:register-form form (fm/use-form :schema schema:register-form
:initial initial) :initial initial)
submitted? submitted? (mf/use-state false)
(mf/use-state false)
on-error on-error
(mf/use-fn (mf/use-fn
@ -167,22 +165,24 @@
(->> (rp/cmd! :prepare-register-profile cdata) (->> (rp/cmd! :prepare-register-profile cdata)
(rx/subs! on-register-profile on-error #(reset! submitted? false))))))] (rx/subs! on-register-profile on-error #(reset! submitted? false))))))]
[:& fm/form {:on-submit on-submit :form form} [:& fm/form {:on-submit on-submit
[:div {:class (stl/css :fields-row)} :form form
:class (stl/css :form)}
[:div {:class (stl/css :form-row)}
[:& fm/input {:name :fullname [:& fm/input {:name :fullname
:label (tr "auth.fullname") :label (tr "auth.fullname")
:type "text" :type "text"
:show-success? true :show-success? true
:class (stl/css :form-field)}]] :class (stl/css :form-field)}]]
[:div {:class (stl/css :fields-row)} [:div {:class (stl/css :form-row)}
[:& fm/input {:type "text" [:& fm/input {:type "text"
:name :email :name :email
:label (tr "auth.work-email") :label (tr "auth.work-email")
:data-testid "email-input" :data-testid "email-input"
:show-success? true :show-success? true
:class (stl/css :form-field)}]] :class (stl/css :form-field)}]]
[:div {:class (stl/css :fields-row)} [:div {:class (stl/css :form-row)}
[:& fm/input {:name :password [:& fm/input {:name :password
:hint (tr "auth.password-length-hint") :hint (tr "auth.password-length-hint")
:label (tr "auth.password") :label (tr "auth.password")
@ -191,21 +191,20 @@
:class (stl/css :form-field)}]] :class (stl/css :form-field)}]]
(when (contains? cf/flags :terms-and-privacy-checkbox) (when (contains? cf/flags :terms-and-privacy-checkbox)
[:> terms-and-privacy*]) [:> terms-and-privacy-checkbox*])
[:> newsletter-options*] [:> newsletter-checkbox*]
[:> fm/submit-button* [:> fm/submit-button* {:label (tr "auth.register-submit")
{:label (tr "auth.register-submit") :disabled @submitted?
:disabled @submitted? :data-testid "register-form-submit"
:data-testid "register-form-submit" :class (stl/css :form-submit-btn)}]]))
:class (stl/css :register-btn)}]]))
(mf/defc register-methods* (mf/defc register-methods*
[{:keys [params hide-separator on-success-callback]}] [{:keys [params hide-separator on-success-callback]}]
[:* [:*
(when login/show-sso-login-buttons? (when login/show-sso-login-buttons?
[:> login/login-sso-buttons* {:params params}]) [:> login/sso-buttons* {:params params}])
(when (or login/show-sso-login-buttons? (false? hide-separator)) (when (or login/show-sso-login-buttons? (false? hide-separator))
[:hr {:class (stl/css :separator)}]) [:hr {:class (stl/css :separator)}])
(when (contains? cf/flags :login-with-password) (when (contains? cf/flags :login-with-password)
@ -213,8 +212,8 @@
(mf/defc register-page* (mf/defc register-page*
[{:keys [params]}] [{:keys [params]}]
[:div {:class (stl/css :auth-form-wrapper :register-form)} [:div {:class (stl/css :wrapper :register-form)}
[:h1 {:class (stl/css :auth-title) [:h1 {:class (stl/css :title)
:data-testid "registration-title"} (tr "auth.register-title")] :data-testid "registration-title"} (tr "auth.register-title")]
(when (contains? cf/flags :demo-warning) (when (contains? cf/flags :demo-warning)
@ -223,7 +222,7 @@
[:> register-methods* {:params params}] [:> register-methods* {:params params}]
[:div {:class (stl/css :links)} [:div {:class (stl/css :links)}
[:div {:class (stl/css :account)} [:div {:class (stl/css :account-row)}
[:span {:class (stl/css :account-text)} (tr "auth.already-have-account") " "] [:span {:class (stl/css :account-text)} (tr "auth.already-have-account") " "]
[:> lk/link* {:action #(st/emit! (rt/nav :auth-login params)) [:> lk/link* {:action #(st/emit! (rt/nav :auth-login params))
:class (stl/css :account-link) :class (stl/css :account-link)
@ -233,9 +232,9 @@
(when (contains? cf/flags :demo-users) (when (contains? cf/flags :demo-users)
[:* [:*
[:hr {:class (stl/css :separator)}] [:hr {:class (stl/css :separator)}]
[:div {:class (stl/css :demo-account)} [:div {:class (stl/css :account-row)}
[:> lk/link* {:action login/create-demo-profile [:> lk/link* {:action login/create-demo-profile
:class (stl/css :demo-account-link)} :class (stl/css :account-link)}
(tr "auth.create-demo-account")]]])]]) (tr "auth.create-demo-account")]]])]])
@ -244,31 +243,31 @@
(mf/defc register-success-page* (mf/defc register-success-page*
[{:keys [params]}] [{:keys [params]}]
(let [email (or (:email params) (::email storage/user))] (let [email (or (:email params) (::email storage/user))]
[:div {:class (stl/css :auth-form-wrapper :register-success)} [:div {:class (stl/css :wrapper :register-success)}
[:div {:class (stl/css :auth-title-wrapper)} [:div {:class (stl/css :title-wrapper)}
[:h2 {:class (stl/css :auth-title)} [:h2 {:class (stl/css :register-success-title)}
(tr "auth.check-email")] (tr "auth.check-email")]
[:div {:class (stl/css :notification-text)} (tr "auth.verification-sent-email")]] [:div {:class (stl/css :notification-text)} (tr "auth.verification-sent-email")]]
[:div {:class (stl/css :notification-text-email)} email]])) [:div {:class (stl/css :notification-email)} email]]))
(mf/defc terms-register* (mf/defc terms-service-privacy-policy*
[] []
(let [show-all? (and cf/terms-of-service-uri cf/privacy-policy-uri) (let [show-all? (and cf/terms-of-service-uri cf/privacy-policy-uri)
show-terms? (some? cf/terms-of-service-uri) show-terms? (some? cf/terms-of-service-uri)
show-privacy? (some? cf/privacy-policy-uri)] show-privacy? (some? cf/privacy-policy-uri)]
(when show-all? (when show-all?
[:div {:class (stl/css :terms-register)} [:div {:class (stl/css :terms)}
(when show-terms? (when show-terms?
[:a {:href cf/terms-of-service-uri :target "_blank" :class (stl/css :auth-link)} [:a {:href cf/terms-of-service-uri :target "_blank" :class (stl/css :terms-link)}
(tr "auth.terms-of-service")]) (tr "auth.terms-of-service")])
(when show-all? (when show-all?
[:span {:class (stl/css :and-text)} [:span {:class (stl/css :terms-and)}
(dm/str " " (tr "labels.and") " ")]) (dm/str " " (tr "labels.and") " ")])
(when show-privacy? (when show-privacy?
[:a {:href cf/privacy-policy-uri :target "_blank" :class (stl/css :auth-link)} [:a {:href cf/privacy-policy-uri :target "_blank" :class (stl/css :terms-link)}
(tr "auth.privacy-policy")])]))) (tr "auth.privacy-policy")])])))
;; --- PAGE: register validation ;; --- PAGE: register validation
@ -334,9 +333,9 @@
[:& fm/form {:on-submit on-submit [:& fm/form {:on-submit on-submit
:form form :form form
:class (stl/css :register-validate-form)} :class (stl/css :auth-form)}
[:div {:class (stl/css :fields-row)} [:div {:class (stl/css :form-row)}
[:& fm/input {:name :fullname [:& fm/input {:name :fullname
:label (tr "auth.fullname") :label (tr "auth.fullname")
:type "text" :type "text"
@ -344,30 +343,28 @@
:class (stl/css :form-field)}]] :class (stl/css :form-field)}]]
(when (contains? cf/flags :terms-and-privacy-checkbox) (when (contains? cf/flags :terms-and-privacy-checkbox)
[:> terms-and-privacy*]) [:> terms-and-privacy-checkbox*])
[:> newsletter-options*] [:> newsletter-checkbox*]
[:> fm/submit-button*
{:label (tr "auth.register-submit")
:disabled @submitted?
:class (stl/css :register-btn)}]]))
[:> fm/submit-button* {:label (tr "auth.register-submit")
:disabled @submitted?
:class (stl/css :form-submit-btn)}]]))
(mf/defc register-validate-page* (mf/defc register-validate-page*
[{:keys [params]}] [{:keys [params]}]
[:div {:class (stl/css :auth-form-wrapper :register-form)} [:div {:class (stl/css :wrapper :register-form)}
[:div {:class (stl/css :auth-title-wrapper)} [:div {:class (stl/css :title-wrapper)}
[:h2 {:class (stl/css :auth-title) [:h2 {:class (stl/css :title)
:data-testid "register-title"} (tr "auth.register-account-title")] :data-testid "register-title"} (tr "auth.register-account-title")]
[:div {:class (stl/css :auth-subtitle)} (tr "auth.register-account-tagline")]] [:div {:class (stl/css :subtitle)} (tr "auth.register-account-tagline")]]
[:> register-validate-form* {:params params}] [:> register-validate-form* {:params params}]
[:div {:class (stl/css :links)} [:div {:class (stl/css :links)}
[:div {:class (stl/css :go-back)} [:div {:class (stl/css :go-back-row)}
[:> lk/link* {:action #(st/emit! (rt/nav :auth-register {})) [:> lk/link* {:action #(st/emit! (rt/nav :auth-register {}))
:class (stl/css :go-back-link)} :class (stl/css :go-back-link)}
(tr "labels.go-back")]]]]) (tr "labels.go-back")]]]])

77
frontend/src/app/main/ui/auth/register.scss
View File

@ -4,57 +4,64 @@
// //
// Copyright (c) KALEIDOS INC Sucursal en España SL // Copyright (c) KALEIDOS INC Sucursal en España SL
@use "./common";
@use "ds/_utils.scss" as *; @use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *; @use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *; @use "ds/typography.scss" as *;
@use "./common";
.checkbox-terms-and-privacy,
.checkbox-newsletter-updates { .checkbox-newsletter-updates {
align-items: flex-start; align-items: flex-start;
} }
.checkbox-terms-and-privacy {
align-items: flex-start;
}
.register-form { .register-form {
gap: var(--sp-xxl); gap: var(--sp-xxl);
} }
.account-row {
display: flex;
justify-content: center;
gap: var(--sp-s);
padding: 0;
}
.account-text {
@include use-typography("title-small");
text-align: right;
color: var(--color-foreground-secondary);
}
.account-link {
@include use-typography("title-small");
text-align: left;
background-color: transparent;
border: none;
display: inline;
color: var(--color-accent-primary);
&:hover {
text-decoration: underline;
}
}
.register-success { .register-success {
gap: var(--sp-xxl); gap: var(--sp-xxl);
} }
.register-success .auth-title { .register-success-title {
@include use-typography("title-medium"); @include use-typography("title-medium");
line-height: 1.2; line-height: 1.2;
color: var(--color-foreground-primary);
} }
.notification-text { .terms {
@include use-typography("body-medium");
color: var(--color-foreground-secondary);
}
.notification-text-email {
@include use-typography("title-medium");
line-height: 1.2;
color: var(--color-accent-primary);
margin-inline: $sz-36;
}
.logo-btn {
block-size: $sz-40;
}
.logo-container {
display: flex;
justify-content: flex-start;
inline-size: $sz-120;
margin-block-end: var(--sp-xxl);
}
.terms-register {
@include use-typography("body-small"); @include use-typography("body-small");
display: flex; display: flex;
@ -63,15 +70,15 @@
inline-size: 100%; inline-size: 100%;
} }
.and-text { .terms-link {
border-block-end: $b-1 solid transparent;
color: var(--color-foreground-secondary);
}
.auth-link {
color: var(--color-accent-primary); color: var(--color-accent-primary);
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
.terms-and {
border-block-end: $b-1 solid transparent;
color: var(--color-foreground-secondary);
}

2
frontend/src/app/main/ui/static.cljs
View File

@ -185,7 +185,7 @@
:on-click set-section} (tr "auth.login-here")]] :on-click set-section} (tr "auth.login-here")]]
[:div {:class (stl/css :links)} [:div {:class (stl/css :links)}
[:hr {:class (stl/css :separator)}] [:hr {:class (stl/css :separator)}]
[:> register/terms-register*]]] [:> register/terms-service-privacy-policy*]]]
:register-validate :register-validate
[:div {:class (stl/css :form-container)} [:div {:class (stl/css :form-container)}

66
frontend/src/app/main/ui/viewer/login.cljs
View File

@ -12,8 +12,10 @@
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.auth.login :refer [login-dialog*]] [app.main.ui.auth.login :refer [login-dialog*]]
[app.main.ui.auth.recovery-request :refer [recovery-request-page*]] [app.main.ui.auth.recovery-request :refer [recovery-request-page*]]
[app.main.ui.auth.register :refer [register-methods* register-success-page* terms-register* register-validate-form*]] [app.main.ui.auth.register :refer [register-methods* register-success-page*
[app.main.ui.icons :as deprecated-icon] register-validate-form* terms-service-privacy-policy*]]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.ds.foundations.assets.icon :as i]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
@ -24,14 +26,15 @@
{::mf/register modal/components {::mf/register modal/components
::mf/register-as :login-register} ::mf/register-as :login-register}
[_] [_]
(let [user-email (mf/use-state "") (let [user-email (mf/use-state "")
register-token (mf/use-state "") register-token (mf/use-state "")
current-section* (mf/use-state :login) current-section* (mf/use-state :login)
current-section (deref current-section*) current-section (deref current-section*)
set-current-section set-current-section
(mf/use-fn #(reset! current-section* %)) (mf/use-fn
#(reset! current-section* %))
set-section set-section
(mf/use-fn (mf/use-fn
@ -41,7 +44,9 @@
(keyword))] (keyword))]
(set-current-section section)))) (set-current-section section))))
go-back-to-login (mf/use-fn #(set-current-section :login)) go-back-to-login
(mf/use-fn
#(set-current-section :login))
main-section (or main-section (or
(= current-section :login) (= current-section :login)
@ -51,13 +56,16 @@
(fn [event] (fn [event]
(dom/prevent-default event) (dom/prevent-default event)
(st/emit! (modal/hide))) (st/emit! (modal/hide)))
success-email-sent success-email-sent
(fn [email] (fn [email]
(reset! user-email email) (reset! user-email email)
(set-current-section :email-sent)) (set-current-section :email-sent))
success-login success-login
(fn [] (fn []
(.reload js/window.location true)) (.reload js/window.location true))
success-register success-register
(fn [data] (fn [data]
(reset! register-token (:token data)) (reset! register-token (:token data))
@ -66,48 +74,47 @@
[:div {:class (stl/css :modal-overlay)} [:div {:class (stl/css :modal-overlay)}
[:div {:class (stl/css :modal-container)} [:div {:class (stl/css :modal-container)}
[:div {:class (stl/css :modal-header)} [:div {:class (stl/css :modal-header)}
[:h2 {:class (stl/css :modal-title)} (tr "labels.continue-with-penpot")] [:h2 {:class (stl/css :modal-header-title)} (tr "labels.continue-with-penpot")]
[:button {:class (stl/css :modal-close-btn) [:> icon-button* {:variant "ghost"
:title (tr "labels.close") :class (stl/css :modal-close)
:on-click close} deprecated-icon/close]] :aria-label (tr "labels.close")
:on-click close
:icon i/close}]]
[:div {:class (stl/css :modal-content)} [:div {:class (stl/css :modal-content)}
(case current-section (case current-section
:login :login
[:div {:class (stl/css :form-container)} [:div {:class (stl/css :login-form)}
[:> login-dialog* [:> login-dialog* {:on-success-callback success-login
{:on-success-callback success-login :origin :viewer}]
:origin :viewer}] [:div {:class (stl/css :login-links)}
[:div {:class (stl/css :links)} [:div
[:div {:class (stl/css :recovery-request)}
[:a {:on-click set-section [:a {:on-click set-section
:class (stl/css :recovery-link)
:data-value "recovery-request"} :data-value "recovery-request"}
(tr "auth.forgot-password")]] (tr "auth.forgot-password")]]
[:div {:class (stl/css :register)} [:div
[:span {:class (stl/css :register-text)} [:span
(tr "auth.register") " "] (tr "auth.register") " "]
[:a {:on-click set-section [:a {:on-click set-section
:class (stl/css :register-link)
:data-value "register"} :data-value "register"}
(tr "auth.register-submit")]]]] (tr "auth.register-submit")]]]]
:register :register
[:div {:class (stl/css :form-container)} [:div {:class (stl/css :login-form)}
[:> register-methods* {:on-success-callback success-register}] [:> register-methods* {:on-success-callback success-register}]
[:div {:class (stl/css :links)} [:div {:class (stl/css :login-links)}
[:div {:class (stl/css :account)} [:div
[:span (tr "auth.already-have-account") " "] [:span (tr "auth.already-have-account") " "]
[:a {:on-click set-section [:a {:on-click set-section
:data-value "login"} :data-value "login"}
(tr "auth.login-here")]]]] (tr "auth.login-here")]]]]
:register-validate :register-validate
[:div {:class (stl/css :form-container)} [:div {:class (stl/css :login-form)}
[:> register-validate-form* {:params {:token @register-token} [:> register-validate-form* {:params {:token @register-token}
:on-success-callback success-email-sent}] :on-success-callback success-email-sent}]
[:div {:class (stl/css :links)} [:div {:class (stl/css :login-links)}
[:div {:class (stl/css :register)} [:div
[:a {:on-click set-section [:a {:on-click set-section
:data-value "register"} :data-value "register"}
(tr "labels.go-back")]]]] (tr "labels.go-back")]]]]
@ -115,10 +122,11 @@
:recovery-request :recovery-request
[:> recovery-request-page* {:go-back-callback go-back-to-login [:> recovery-request-page* {:go-back-callback go-back-to-login
:on-success-callback success-email-sent}] :on-success-callback success-email-sent}]
:email-sent :email-sent
[:div {:class (stl/css :form-container)} [:div {:class (stl/css :login-form)}
[:> register-success-page* {:params {:email @user-email}}]]) [:> register-success-page* {:params {:email @user-email}}]])
(when main-section (when main-section
[:div {:class (stl/css :links)} [:div {:class (stl/css :login-links)}
[:> terms-register*]])]]])) [:> terms-service-privacy-policy*]])]]]))

86
frontend/src/app/main/ui/viewer/login.scss
View File

@ -4,75 +4,71 @@
// //
// Copyright (c) KALEIDOS INC Sucursal en España SL // Copyright (c) KALEIDOS INC Sucursal en España SL
@use "refactor/common-refactor.scss" as deprecated; @use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
@use "ds/z-index.scss" as *;
.modal-overlay { .modal-overlay {
@extend %modal-overlay-base; display: flex;
justify-content: center;
align-items: center;
position: fixed;
inset: 0;
block-size: 100%;
inline-size: 100%;
z-index: var(--z-index-set);
background-color: var(--color-overlay-default);
} }
.modal-container { .modal-container {
@extend %modal-container-base; position: relative;
padding: var(--sp-xxxl);
width: deprecated.$s-368; border-radius: $br-8;
background-color: var(--color-background-primary);
border: $b-2 solid var(--color-background-quaternary);
min-inline-size: $sz-364;
min-block-size: $sz-192;
max-inline-size: $sz-512;
max-block-size: $sz-712;
inline-size: $sz-364;
} }
.modal-header { .modal-header {
margin-bottom: deprecated.$s-24; margin-block-end: var(--sp-xxl);
} }
.modal-title { .modal-header-title {
@include deprecated.uppercase-title-typography; @include use-typography("headline-small");
color: var(--modal-title-foreground-color); color: var(--color-foreground-primary);
} }
.modal-close-btn { .modal-close {
@extend %modal-close-btn-base; position: absolute;
inset-block-start: var(--sp-s);
inset-inline-end: var(--sp-s);
} }
.modal-content { .modal-content {
@include deprecated.flex-column; @include use-typography("body-small");
@include deprecated.body-small-typography;
gap: deprecated.$s-24; display: flex;
max-height: deprecated.$s-400; flex-direction: column;
gap: var(--sp-xxl);
max-block-size: px2rem(576);
overflow: hidden auto; overflow: hidden auto;
form {
display: flex;
flex-direction: column;
margin-bottom: 1.5rem;
gap: 0.75rem;
}
} }
.form-container { .login-form {
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
gap: var(--sp-m);
} }
.links { .login-links {
position: relative; position: relative;
} color: var(--color-foreground-primary);
.link-entry {
display: flex;
flex-direction: column;
gap: deprecated.$s-12;
span {
text-align: center;
font-size: deprecated.$fs-14;
color: var(--modal-text-foreground-color);
margin-top: deprecated.$s-12;
}
a {
@extend %button-secondary;
height: deprecated.$s-40;
text-transform: uppercase;
font-size: deprecated.$fs-11;
}
} }