mirror of
https://github.com/penpot/penpot.git
synced 2026-08-29 08:08:46 +00:00
🐛 Fix spacing between SSO buttons and email field
This commit is contained in:
Luis de Dios
parent
b4dc8207ff
commit
9eb53cfb9c
@ -13,7 +13,7 @@
|
||||
[app.main.ui.auth.login :refer [login-page*]]
|
||||
[app.main.ui.auth.recovery :refer [recovery-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.typography.heading :refer [heading*]]
|
||||
[app.util.dom :as dom]
|
||||
@ -74,7 +74,7 @@
|
||||
[:> recovery-page* {:params params}])
|
||||
|
||||
(when (= section :auth-register)
|
||||
[:> terms-register*])]]))
|
||||
[:> terms-service-privacy-policy*])]]))
|
||||
|
||||
|
||||
(mf/defc auth-page*
|
||||
|
||||
@ -4,56 +4,15 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC Sucursal en España SL
|
||||
|
||||
@use "ds/_utils.scss" as *;
|
||||
@use "ds/_sizes.scss" as *;
|
||||
@use "ds/_borders.scss" as *;
|
||||
@use "ds/typography.scss" as *;
|
||||
|
||||
.auth-form-wrapper {
|
||||
inline-size: 100%;
|
||||
padding-block-end: 0;
|
||||
display: grid;
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-m);
|
||||
|
||||
// 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);
|
||||
margin: var(--sp-m) 0;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
@ -62,36 +21,40 @@
|
||||
--input-min-width: 100%;
|
||||
}
|
||||
|
||||
.buttons-stack {
|
||||
display: grid;
|
||||
gap: var(--sp-s);
|
||||
}
|
||||
.form-submit-btn {
|
||||
--button-bg-color: var(--color-accent-primary);
|
||||
--button-border-color: var(--color-accent-primary);
|
||||
--button-fg-color: var(--color-background-secondary);
|
||||
|
||||
.login-button,
|
||||
.login-ldap-button {
|
||||
@include use-typography("headline-small");
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
background-color: var(--color-accent-primary);
|
||||
border: $b-1 solid var(--color-accent-primary);
|
||||
color: var(--color-background-secondary);
|
||||
background-color: var(--button-bg-color);
|
||||
border: $b-1 solid var(--button-border-color);
|
||||
color: var(--button-fg-color);
|
||||
border-radius: $br-8;
|
||||
min-block-size: $sz-32;
|
||||
block-size: $sz-40;
|
||||
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 {
|
||||
background-color: var(--color-background-quaternary);
|
||||
border: 1px solid var(--color-background-quaternary);
|
||||
color: var(--color-foreground-disabled);
|
||||
cursor: unset;
|
||||
--button-bg-color: var(--color-background-quaternary);
|
||||
--button-border-color: var(--color-background-quaternary);
|
||||
--button-fg-color: var(--color-foreground-disabled);
|
||||
}
|
||||
}
|
||||
|
||||
.go-back {
|
||||
.go-back-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-m);
|
||||
@ -100,19 +63,68 @@
|
||||
}
|
||||
|
||||
.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;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--color-background-tertiary);
|
||||
border: $b-1 solid var(--color-background-tertiary);
|
||||
color: var(--color-foreground-secondary);
|
||||
|
||||
@include use-typography("headline-small");
|
||||
|
||||
background-color: var(--button-bg-color);
|
||||
border: $b-1 solid var(--button-border-color);
|
||||
color: var(--button-fg-color);
|
||||
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 {
|
||||
@ -120,104 +132,10 @@
|
||||
gap: var(--sp-xxl);
|
||||
}
|
||||
|
||||
.register,
|
||||
.account,
|
||||
.recovery-request,
|
||||
.demo-account {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: var(--sp-s);
|
||||
padding: 0;
|
||||
}
|
||||
.notification-email {
|
||||
@include use-typography("title-medium");
|
||||
|
||||
.register-text,
|
||||
.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;
|
||||
line-height: 1.2;
|
||||
color: var(--color-accent-primary);
|
||||
|
||||
&: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);
|
||||
margin-inline: $sz-36;
|
||||
}
|
||||
|
||||
@ -71,10 +71,17 @@
|
||||
(mf/defc login-form*
|
||||
[{:keys [params handle-redirect on-success-callback on-recovery-request origin] :as props}]
|
||||
(let [initial (mf/with-memo [params] params)
|
||||
error (mf/use-state false)
|
||||
|
||||
form (fm/use-form :schema schema:login-form
|
||||
: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)
|
||||
|
||||
on-error
|
||||
(fn [cause]
|
||||
(let [cause (ex-data cause)]
|
||||
@ -102,12 +109,6 @@
|
||||
:else
|
||||
(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
|
||||
(fn [data]
|
||||
(when (fn? on-success-callback)
|
||||
@ -130,7 +131,8 @@
|
||||
(->> (rp/cmd! :get-sso-provider {:email (:email params)})
|
||||
(rx/map :id)
|
||||
(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/subs! (fn [sso-provider-id]
|
||||
(if sso-provider-id
|
||||
@ -139,7 +141,7 @@
|
||||
(reset! show-password-field* true))))))))))
|
||||
|
||||
on-submit-ldap
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps form)
|
||||
(fn [event]
|
||||
(dom/prevent-default event)
|
||||
@ -168,91 +170,102 @@
|
||||
{:level :error} message])
|
||||
|
||||
[:& fm/form {:on-submit on-submit
|
||||
:class (stl/css :login-form)
|
||||
:class (stl/css :form)
|
||||
:form form}
|
||||
|
||||
[:div {:class (stl/css :fields-row)}
|
||||
[:& fm/input
|
||||
{:name :email
|
||||
:type "email"
|
||||
:label (tr "auth.work-email")
|
||||
:class (stl/css :form-field)}]]
|
||||
[:div {:class (stl/css :form-row)}
|
||||
[:& fm/input {:name :email
|
||||
:type "email"
|
||||
:label (tr "auth.work-email")
|
||||
:class (stl/css :form-field)}]]
|
||||
|
||||
(when show-password-field?
|
||||
[:div {:class (stl/css :fields-row)}
|
||||
[:& fm/input
|
||||
{:type "password"
|
||||
:name :password
|
||||
:auto-focus? true
|
||||
:label (tr "auth.password")
|
||||
:class (stl/css :form-field)}]])
|
||||
[:div {:class (stl/css :form-row)}
|
||||
[:& fm/input {:type "password"
|
||||
:name :password
|
||||
:auto-focus? true
|
||||
:label (tr "auth.password")
|
||||
:class (stl/css :form-field)}]])
|
||||
|
||||
(when (and (not= origin :viewer)
|
||||
(or (contains? cf/flags :login)
|
||||
(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
|
||||
:class (stl/css :forgot-pass-link)
|
||||
:class (stl/css :forgot-password-link)
|
||||
:data-testid "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)
|
||||
(contains? cf/flags :login-with-password))
|
||||
[:> fm/submit-button*
|
||||
{:label (tr "labels.continue")
|
||||
:data-testid "login-submit"
|
||||
:class (stl/css :login-button)}])
|
||||
[:> fm/submit-button* {:label (tr "labels.continue")
|
||||
:data-testid "login-submit"
|
||||
:class (stl/css :form-submit-btn)}])
|
||||
|
||||
(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}])]]]))
|
||||
[:> fm/submit-button* {:label (tr "auth.login-with-ldap-submit")
|
||||
:class (stl/css :form-submit-btn)
|
||||
:on-click on-submit-ldap}])]]]))
|
||||
|
||||
(defn raw-icon
|
||||
[id]
|
||||
(mf/html
|
||||
[:> raw-svg* {:id id :class (stl/css :sso-icon)}]))
|
||||
|
||||
(mf/defc login-sso-buttons*
|
||||
(mf/defc sso-buttons*
|
||||
[{:keys [params] :as props}]
|
||||
(let [login-with-google (mf/use-fn (mf/deps params) #(login-with-sso "google" params))
|
||||
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))]
|
||||
(let [login-with-google
|
||||
(mf/use-fn
|
||||
(mf/deps 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)
|
||||
[:> bl/button-link* {:on-click login-with-google
|
||||
:icon (raw-icon raw-icons/brand-google)
|
||||
: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)
|
||||
[:> bl/button-link* {:on-click login-with-github
|
||||
:icon (raw-icon raw-icons/brand-github)
|
||||
: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)
|
||||
[:> bl/button-link* {:on-click login-with-gitlab
|
||||
:icon (raw-icon raw-icons/brand-gitlab)
|
||||
: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)
|
||||
[:> bl/button-link* {:on-click login-with-oidc
|
||||
:icon (raw-icon raw-icons/brand-openid)
|
||||
: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*
|
||||
[{:keys [params] :as props}]
|
||||
[:*
|
||||
(when show-sso-login-buttons?
|
||||
[:*
|
||||
[:> login-sso-buttons* {:params params}]
|
||||
[:> sso-buttons* {:params params}]
|
||||
|
||||
(when (or (contains? cf/flags :login)
|
||||
(contains? cf/flags :login-with-password)
|
||||
@ -270,11 +283,11 @@
|
||||
(mf/use-fn
|
||||
#(st/emit! (rt/nav :auth-register params)))]
|
||||
|
||||
[:div {:class (stl/css :auth-form-wrapper)}
|
||||
[:h1 {:class (stl/css :auth-title)
|
||||
[:div {:class (stl/css :wrapper)}
|
||||
[:h1 {:class (stl/css :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")]
|
||||
|
||||
(when (contains? cf/flags :demo-warning)
|
||||
@ -286,7 +299,7 @@
|
||||
|
||||
[:div {:class (stl/css :links)}
|
||||
(when (contains? cf/flags :registration)
|
||||
[:div {:class (stl/css :register)}
|
||||
[:div {:class (stl/css :register-row)}
|
||||
[:span {:class (stl/css :register-text)}
|
||||
(tr "auth.register") " "]
|
||||
[:> lk/link* {:action go-register
|
||||
|
||||
@ -6,8 +6,88 @@
|
||||
|
||||
@use "./common";
|
||||
@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 {
|
||||
max-inline-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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -60,39 +60,38 @@
|
||||
:initial params)]
|
||||
|
||||
[:& fm/form {:on-submit on-submit
|
||||
:class (stl/css :recovery-form)
|
||||
:class (stl/css :form)
|
||||
:form form}
|
||||
|
||||
[:div {:class (stl/css :fields-row)}
|
||||
[:div {:class (stl/css :form-row)}
|
||||
[:& fm/input {:type "password"
|
||||
:name :password-1
|
||||
:show-success? true
|
||||
:label (tr "auth.new-password")
|
||||
:class (stl/css :form-field)}]]
|
||||
|
||||
[:div {:class (stl/css :fields-row)}
|
||||
[:div {:class (stl/css :form-row)}
|
||||
[:& fm/input {:type "password"
|
||||
:name :password-2
|
||||
:show-success? true
|
||||
:label (tr "auth.confirm-password")
|
||||
:class (stl/css :form-field)}]]
|
||||
|
||||
[:> fm/submit-button*
|
||||
{:label (tr "auth.recovery-submit")
|
||||
:class (stl/css :submit-btn)}]]))
|
||||
[:> fm/submit-button* {:label (tr "auth.recovery-submit")
|
||||
:class (stl/css :form-submit-btn)}]]))
|
||||
|
||||
;; --- Recovery Request Page
|
||||
|
||||
(mf/defc recovery-page*
|
||||
[{:keys [params]}]
|
||||
[: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"]
|
||||
[:div {:class (stl/css :wrapper)}
|
||||
[:h1 {:class (stl/css :title)} "Forgot your password?"]
|
||||
[:div {:class (stl/css :subtitle)} "Please enter your new password"]
|
||||
[:hr {:class (stl/css :separator)}]
|
||||
[:> recovery-form* {:params params}]
|
||||
|
||||
[: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))
|
||||
:class (stl/css :go-back-link)}
|
||||
(tr "profile.recovery.go-to-login")]]]])
|
||||
|
||||
@ -5,7 +5,3 @@
|
||||
// Copyright (c) KALEIDOS INC Sucursal en España SL
|
||||
|
||||
@use "./common";
|
||||
|
||||
.submit-btn {
|
||||
margin-block-start: var(--sp-l);
|
||||
}
|
||||
|
||||
@ -70,18 +70,17 @@
|
||||
(st/emit! (du/request-profile-recovery params)))))]
|
||||
|
||||
[:& fm/form {:on-submit on-submit
|
||||
:class (stl/css :recovery-request-form)
|
||||
:class (stl/css :form)
|
||||
:form form}
|
||||
[:div {:class (stl/css :fields-row)}
|
||||
[:div {:class (stl/css :form-row)}
|
||||
[:& fm/input {:name :email
|
||||
:label (tr "auth.work-email")
|
||||
:type "text"
|
||||
:class (stl/css :form-field)}]]
|
||||
|
||||
[:> fm/submit-button*
|
||||
{:label (tr "auth.recovery-request-submit")
|
||||
:data-testid "recovery-resquest-submit"
|
||||
:class (stl/css :recover-btn)}]]))
|
||||
[:> fm/submit-button* {:label (tr "auth.recovery-request-submit")
|
||||
:data-testid "recovery-resquest-submit"
|
||||
:class (stl/css :form-submit-btn)}]]))
|
||||
|
||||
|
||||
;; --- Recovery Request Page
|
||||
@ -90,14 +89,14 @@
|
||||
[{:keys [params on-success-callback go-back-callback]}]
|
||||
(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-wrapper)}
|
||||
[:h1 {:class (stl/css :auth-title)} (tr "auth.recovery-request-title")]
|
||||
[:div {:class (stl/css :auth-subtitle)} (tr "auth.recovery-request-subtitle")]
|
||||
[:div {:class (stl/css :wrapper)}
|
||||
[:h1 {:class (stl/css :title)} (tr "auth.recovery-request-title")]
|
||||
[:div {:class (stl/css :subtitle)} (tr "auth.recovery-request-subtitle")]
|
||||
[:hr {:class (stl/css :separator)}]
|
||||
|
||||
[:> recovery-form* {:params params :on-success-callback on-success-callback}]
|
||||
[:hr {:class (stl/css :separator)}]
|
||||
[:div {:class (stl/css :go-back)}
|
||||
[:div {:class (stl/css :go-back-row)}
|
||||
[:> lk/link* {:action go-back
|
||||
:class (stl/css :go-back-link)
|
||||
:data-testid "go-back-link"}
|
||||
@ -106,11 +105,10 @@
|
||||
|
||||
(mf/defc recovery-sent-page*
|
||||
[{:keys [email]}]
|
||||
[:div {:class (stl/css :auth-form-wrapper :register-success)}
|
||||
[:div {:class (stl/css :auth-title-wrapper)}
|
||||
[:h2 {:class (stl/css :auth-title)}
|
||||
[:div {:class (stl/css :wrapper :register-success)}
|
||||
[:div {:class (stl/css :title-wrapper)}
|
||||
[:h2 {:class (stl/css :title)}
|
||||
(tr "auth.check-email")]
|
||||
[: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")]])
|
||||
|
||||
|
||||
@ -4,19 +4,4 @@
|
||||
//
|
||||
// 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";
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@ -26,39 +26,38 @@
|
||||
|
||||
;; --- PAGE: Register
|
||||
|
||||
(mf/defc newsletter-options*
|
||||
(mf/defc newsletter-checkbox*
|
||||
{::mf/private true}
|
||||
[]
|
||||
(let [updates-label
|
||||
(let [newsletter-label
|
||||
(mf/html
|
||||
[:> i18n/tr-html*
|
||||
{:tag-name "div"
|
||||
:content (tr "onboarding-v2.newsletter.updates")}])]
|
||||
[:div {:class (stl/css :fields-row :input-visible :newsletter-option-wrapper)}
|
||||
[:> i18n/tr-html* {:tag-name "div"
|
||||
:content (tr "onboarding-v2.newsletter.updates")}])]
|
||||
|
||||
[:div {:class (stl/css :form-row :input-visible :newsletter-option-wrapper)}
|
||||
[:& fm/input {:name :accept-newsletter-updates
|
||||
:class (stl/css :checkbox-newsletter-updates)
|
||||
:type "checkbox"
|
||||
:default-checked false
|
||||
:label updates-label}]]))
|
||||
:label newsletter-label}]]))
|
||||
|
||||
(mf/defc terms-and-privacy*
|
||||
(mf/defc terms-and-privacy-checkbox*
|
||||
{::mf/private true}
|
||||
[]
|
||||
(let [terms-label
|
||||
(let [terms-and-privacy-label
|
||||
(mf/html
|
||||
[:> i18n/tr-html*
|
||||
{:tag-name "div"
|
||||
:content (tr "auth.terms-and-privacy-agreement"
|
||||
cf/terms-of-service-uri
|
||||
cf/privacy-policy-uri)}])]
|
||||
[:> i18n/tr-html* {:tag-name "div"
|
||||
:content (tr "auth.terms-and-privacy-agreement"
|
||||
cf/terms-of-service-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
|
||||
:show-error false
|
||||
:class (stl/css :checkbox-terms-and-privacy)
|
||||
:type "checkbox"
|
||||
:default-checked false
|
||||
:label terms-label}]]))
|
||||
:label terms-and-privacy-label}]]))
|
||||
|
||||
(def ^:private schema:register-form
|
||||
[:map {:title "RegisterForm"}
|
||||
@ -76,8 +75,7 @@
|
||||
form (fm/use-form :schema schema:register-form
|
||||
:initial initial)
|
||||
|
||||
submitted?
|
||||
(mf/use-state false)
|
||||
submitted? (mf/use-state false)
|
||||
|
||||
on-error
|
||||
(mf/use-fn
|
||||
@ -167,22 +165,24 @@
|
||||
(->> (rp/cmd! :prepare-register-profile cdata)
|
||||
(rx/subs! on-register-profile on-error #(reset! submitted? false))))))]
|
||||
|
||||
[:& fm/form {:on-submit on-submit :form form}
|
||||
[:div {:class (stl/css :fields-row)}
|
||||
[:& fm/form {:on-submit on-submit
|
||||
:form form
|
||||
:class (stl/css :form)}
|
||||
[:div {:class (stl/css :form-row)}
|
||||
|
||||
[:& fm/input {:name :fullname
|
||||
:label (tr "auth.fullname")
|
||||
:type "text"
|
||||
:show-success? true
|
||||
:class (stl/css :form-field)}]]
|
||||
[:div {:class (stl/css :fields-row)}
|
||||
[:div {:class (stl/css :form-row)}
|
||||
[:& fm/input {:type "text"
|
||||
:name :email
|
||||
:label (tr "auth.work-email")
|
||||
:data-testid "email-input"
|
||||
:show-success? true
|
||||
:class (stl/css :form-field)}]]
|
||||
[:div {:class (stl/css :fields-row)}
|
||||
[:div {:class (stl/css :form-row)}
|
||||
[:& fm/input {:name :password
|
||||
:hint (tr "auth.password-length-hint")
|
||||
:label (tr "auth.password")
|
||||
@ -191,21 +191,20 @@
|
||||
:class (stl/css :form-field)}]]
|
||||
|
||||
(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?
|
||||
:data-testid "register-form-submit"
|
||||
:class (stl/css :register-btn)}]]))
|
||||
[:> fm/submit-button* {:label (tr "auth.register-submit")
|
||||
:disabled @submitted?
|
||||
:data-testid "register-form-submit"
|
||||
:class (stl/css :form-submit-btn)}]]))
|
||||
|
||||
(mf/defc register-methods*
|
||||
[{:keys [params hide-separator on-success-callback]}]
|
||||
[:*
|
||||
(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))
|
||||
[:hr {:class (stl/css :separator)}])
|
||||
(when (contains? cf/flags :login-with-password)
|
||||
@ -213,8 +212,8 @@
|
||||
|
||||
(mf/defc register-page*
|
||||
[{:keys [params]}]
|
||||
[:div {:class (stl/css :auth-form-wrapper :register-form)}
|
||||
[:h1 {:class (stl/css :auth-title)
|
||||
[:div {:class (stl/css :wrapper :register-form)}
|
||||
[:h1 {:class (stl/css :title)
|
||||
:data-testid "registration-title"} (tr "auth.register-title")]
|
||||
|
||||
(when (contains? cf/flags :demo-warning)
|
||||
@ -223,7 +222,7 @@
|
||||
[:> register-methods* {:params params}]
|
||||
|
||||
[: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") " "]
|
||||
[:> lk/link* {:action #(st/emit! (rt/nav :auth-login params))
|
||||
:class (stl/css :account-link)
|
||||
@ -233,9 +232,9 @@
|
||||
(when (contains? cf/flags :demo-users)
|
||||
[:*
|
||||
[:hr {:class (stl/css :separator)}]
|
||||
[:div {:class (stl/css :demo-account)}
|
||||
[:div {:class (stl/css :account-row)}
|
||||
[:> lk/link* {:action login/create-demo-profile
|
||||
:class (stl/css :demo-account-link)}
|
||||
:class (stl/css :account-link)}
|
||||
(tr "auth.create-demo-account")]]])]])
|
||||
|
||||
|
||||
@ -244,31 +243,31 @@
|
||||
(mf/defc register-success-page*
|
||||
[{:keys [params]}]
|
||||
(let [email (or (:email params) (::email storage/user))]
|
||||
[:div {:class (stl/css :auth-form-wrapper :register-success)}
|
||||
[:div {:class (stl/css :auth-title-wrapper)}
|
||||
[:h2 {:class (stl/css :auth-title)}
|
||||
[:div {:class (stl/css :wrapper :register-success)}
|
||||
[:div {:class (stl/css :title-wrapper)}
|
||||
[:h2 {:class (stl/css :register-success-title)}
|
||||
(tr "auth.check-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)
|
||||
show-terms? (some? cf/terms-of-service-uri)
|
||||
show-privacy? (some? cf/privacy-policy-uri)]
|
||||
|
||||
(when show-all?
|
||||
[:div {:class (stl/css :terms-register)}
|
||||
[:div {:class (stl/css :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")])
|
||||
|
||||
(when show-all?
|
||||
[:span {:class (stl/css :and-text)}
|
||||
[:span {:class (stl/css :terms-and)}
|
||||
(dm/str " " (tr "labels.and") " ")])
|
||||
|
||||
(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")])])))
|
||||
|
||||
;; --- PAGE: register validation
|
||||
@ -334,9 +333,9 @@
|
||||
|
||||
[:& fm/form {:on-submit on-submit
|
||||
: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
|
||||
:label (tr "auth.fullname")
|
||||
:type "text"
|
||||
@ -344,30 +343,28 @@
|
||||
:class (stl/css :form-field)}]]
|
||||
|
||||
(when (contains? cf/flags :terms-and-privacy-checkbox)
|
||||
[:> terms-and-privacy*])
|
||||
[:> terms-and-privacy-checkbox*])
|
||||
|
||||
[:> newsletter-options*]
|
||||
|
||||
[:> fm/submit-button*
|
||||
{:label (tr "auth.register-submit")
|
||||
:disabled @submitted?
|
||||
:class (stl/css :register-btn)}]]))
|
||||
[:> newsletter-checkbox*]
|
||||
|
||||
[:> fm/submit-button* {:label (tr "auth.register-submit")
|
||||
:disabled @submitted?
|
||||
:class (stl/css :form-submit-btn)}]]))
|
||||
|
||||
(mf/defc register-validate-page*
|
||||
[{: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)}
|
||||
[:h2 {:class (stl/css :auth-title)
|
||||
[:div {:class (stl/css :title-wrapper)}
|
||||
[:h2 {:class (stl/css :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}]
|
||||
|
||||
[: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 {}))
|
||||
:class (stl/css :go-back-link)}
|
||||
(tr "labels.go-back")]]]])
|
||||
|
||||
@ -4,57 +4,64 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC Sucursal en España SL
|
||||
|
||||
@use "./common";
|
||||
@use "ds/_utils.scss" as *;
|
||||
@use "ds/_sizes.scss" as *;
|
||||
@use "ds/_borders.scss" as *;
|
||||
@use "ds/typography.scss" as *;
|
||||
@use "./common";
|
||||
|
||||
.checkbox-terms-and-privacy,
|
||||
.checkbox-newsletter-updates {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.checkbox-terms-and-privacy {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.register-form {
|
||||
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 {
|
||||
gap: var(--sp-xxl);
|
||||
}
|
||||
|
||||
.register-success .auth-title {
|
||||
.register-success-title {
|
||||
@include use-typography("title-medium");
|
||||
|
||||
line-height: 1.2;
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.notification-text {
|
||||
@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 {
|
||||
.terms {
|
||||
@include use-typography("body-small");
|
||||
|
||||
display: flex;
|
||||
@ -63,15 +70,15 @@
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
.and-text {
|
||||
border-block-end: $b-1 solid transparent;
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
.auth-link {
|
||||
.terms-link {
|
||||
color: var(--color-accent-primary);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.terms-and {
|
||||
border-block-end: $b-1 solid transparent;
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
@ -185,7 +185,7 @@
|
||||
:on-click set-section} (tr "auth.login-here")]]
|
||||
[:div {:class (stl/css :links)}
|
||||
[:hr {:class (stl/css :separator)}]
|
||||
[:> register/terms-register*]]]
|
||||
[:> register/terms-service-privacy-policy*]]]
|
||||
|
||||
:register-validate
|
||||
[:div {:class (stl/css :form-container)}
|
||||
|
||||
@ -12,8 +12,10 @@
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.auth.login :refer [login-dialog*]]
|
||||
[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.icons :as deprecated-icon]
|
||||
[app.main.ui.auth.register :refer [register-methods* register-success-page*
|
||||
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.i18n :as i18n :refer [tr]]
|
||||
[rumext.v2 :as mf]))
|
||||
@ -24,14 +26,15 @@
|
||||
{::mf/register modal/components
|
||||
::mf/register-as :login-register}
|
||||
[_]
|
||||
(let [user-email (mf/use-state "")
|
||||
(let [user-email (mf/use-state "")
|
||||
register-token (mf/use-state "")
|
||||
|
||||
current-section* (mf/use-state :login)
|
||||
current-section (deref current-section*)
|
||||
current-section (deref current-section*)
|
||||
|
||||
set-current-section
|
||||
(mf/use-fn #(reset! current-section* %))
|
||||
(mf/use-fn
|
||||
#(reset! current-section* %))
|
||||
|
||||
set-section
|
||||
(mf/use-fn
|
||||
@ -41,7 +44,9 @@
|
||||
(keyword))]
|
||||
(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
|
||||
(= current-section :login)
|
||||
@ -51,13 +56,16 @@
|
||||
(fn [event]
|
||||
(dom/prevent-default event)
|
||||
(st/emit! (modal/hide)))
|
||||
|
||||
success-email-sent
|
||||
(fn [email]
|
||||
(reset! user-email email)
|
||||
(set-current-section :email-sent))
|
||||
|
||||
success-login
|
||||
(fn []
|
||||
(.reload js/window.location true))
|
||||
|
||||
success-register
|
||||
(fn [data]
|
||||
(reset! register-token (:token data))
|
||||
@ -66,48 +74,47 @@
|
||||
[:div {:class (stl/css :modal-overlay)}
|
||||
[:div {:class (stl/css :modal-container)}
|
||||
[:div {:class (stl/css :modal-header)}
|
||||
[:h2 {:class (stl/css :modal-title)} (tr "labels.continue-with-penpot")]
|
||||
[:button {:class (stl/css :modal-close-btn)
|
||||
:title (tr "labels.close")
|
||||
:on-click close} deprecated-icon/close]]
|
||||
[:h2 {:class (stl/css :modal-header-title)} (tr "labels.continue-with-penpot")]
|
||||
[:> icon-button* {:variant "ghost"
|
||||
:class (stl/css :modal-close)
|
||||
:aria-label (tr "labels.close")
|
||||
:on-click close
|
||||
:icon i/close}]]
|
||||
|
||||
[:div {:class (stl/css :modal-content)}
|
||||
(case current-section
|
||||
:login
|
||||
[:div {:class (stl/css :form-container)}
|
||||
[:> login-dialog*
|
||||
{:on-success-callback success-login
|
||||
:origin :viewer}]
|
||||
[:div {:class (stl/css :links)}
|
||||
[:div {:class (stl/css :recovery-request)}
|
||||
[:div {:class (stl/css :login-form)}
|
||||
[:> login-dialog* {:on-success-callback success-login
|
||||
:origin :viewer}]
|
||||
[:div {:class (stl/css :login-links)}
|
||||
[:div
|
||||
[:a {:on-click set-section
|
||||
:class (stl/css :recovery-link)
|
||||
:data-value "recovery-request"}
|
||||
(tr "auth.forgot-password")]]
|
||||
[:div {:class (stl/css :register)}
|
||||
[:span {:class (stl/css :register-text)}
|
||||
[:div
|
||||
[:span
|
||||
(tr "auth.register") " "]
|
||||
[:a {:on-click set-section
|
||||
:class (stl/css :register-link)
|
||||
:data-value "register"}
|
||||
(tr "auth.register-submit")]]]]
|
||||
|
||||
:register
|
||||
[:div {:class (stl/css :form-container)}
|
||||
[:div {:class (stl/css :login-form)}
|
||||
[:> register-methods* {:on-success-callback success-register}]
|
||||
[:div {:class (stl/css :links)}
|
||||
[:div {:class (stl/css :account)}
|
||||
[:div {:class (stl/css :login-links)}
|
||||
[:div
|
||||
[:span (tr "auth.already-have-account") " "]
|
||||
[:a {:on-click set-section
|
||||
:data-value "login"}
|
||||
(tr "auth.login-here")]]]]
|
||||
|
||||
:register-validate
|
||||
[:div {:class (stl/css :form-container)}
|
||||
[:div {:class (stl/css :login-form)}
|
||||
[:> register-validate-form* {:params {:token @register-token}
|
||||
:on-success-callback success-email-sent}]
|
||||
[:div {:class (stl/css :links)}
|
||||
[:div {:class (stl/css :register)}
|
||||
[:div {:class (stl/css :login-links)}
|
||||
[:div
|
||||
[:a {:on-click set-section
|
||||
:data-value "register"}
|
||||
(tr "labels.go-back")]]]]
|
||||
@ -115,10 +122,11 @@
|
||||
:recovery-request
|
||||
[:> recovery-request-page* {:go-back-callback go-back-to-login
|
||||
:on-success-callback success-email-sent}]
|
||||
|
||||
:email-sent
|
||||
[:div {:class (stl/css :form-container)}
|
||||
[:div {:class (stl/css :login-form)}
|
||||
[:> register-success-page* {:params {:email @user-email}}]])
|
||||
|
||||
(when main-section
|
||||
[:div {:class (stl/css :links)}
|
||||
[:> terms-register*]])]]]))
|
||||
[:div {:class (stl/css :login-links)}
|
||||
[:> terms-service-privacy-policy*]])]]]))
|
||||
|
||||
@ -4,75 +4,71 @@
|
||||
//
|
||||
// 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 {
|
||||
@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 {
|
||||
@extend %modal-container-base;
|
||||
|
||||
width: deprecated.$s-368;
|
||||
position: relative;
|
||||
padding: var(--sp-xxxl);
|
||||
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 {
|
||||
margin-bottom: deprecated.$s-24;
|
||||
margin-block-end: var(--sp-xxl);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.uppercase-title-typography;
|
||||
.modal-header-title {
|
||||
@include use-typography("headline-small");
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.modal-close-btn {
|
||||
@extend %modal-close-btn-base;
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
inset-block-start: var(--sp-s);
|
||||
inset-inline-end: var(--sp-s);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include deprecated.flex-column;
|
||||
@include deprecated.body-small-typography;
|
||||
@include use-typography("body-small");
|
||||
|
||||
gap: deprecated.$s-24;
|
||||
max-height: deprecated.$s-400;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-xxl);
|
||||
max-block-size: px2rem(576);
|
||||
overflow: hidden auto;
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1.5rem;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.form-container {
|
||||
.login-form {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-m);
|
||||
}
|
||||
|
||||
.links {
|
||||
.login-links {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user