github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-04-25 11:18:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Normalize newsletter-updates checbox on different register flows (#8839)

Browse Source 
* ✨ Add newsletter opt-in checkbox to registration validation form

Add accept-newsletter-updates support through the full registration
token flow. The newsletter checkbox is now available on the
registration validation form, allowing users to opt-in during the
email verification step.

Backend changes:
- Refactor prepare-register to consolidate UTM params and newsletter
  preference into props at token creation time
- Add accept-newsletter-updates to prepare-register-profile and
  register-profile schemas
- Handle newsletter-updates in register-profile by updating token
  claims props on second step

Frontend changes:
- Add newsletter-options component to register-validate-form
- Add accept-newsletter-updates to validation schema
- Fix subscription finalize/error handling in register form

Signed-off-by: Andrey Antukh <niwi@niwi.nz>

* ♻️ Refactor auth register components to modern style

Migrate all components in app.main.ui.auth.register and
app.main.ui.auth.login/demo-warning to use the modern * suffix
convention, removing deprecated ::mf/props :obj metadata and
updating all invocations from [:& name] to [:> name*] syntax.

Components updated:
- terms-and-privacy -> terms-and-privacy*
- register-form -> register-form*
- register-methods -> register-methods*
- register-page -> register-page*
- register-success-page -> register-success-page*
- terms-register -> terms-register*
- register-validate-form -> register-validate-form*
- register-validate-page -> register-validate-page*
- demo-warning -> demo-warning*

Also remove unused old context-notification import in login.cljs.

Signed-off-by: Andrey Antukh <niwi@niwi.nz>

* 🔥 Remove unused onboarding-newsletter component

The newsletter opt-in is now handled directly in the registration
form via the newsletter-options* component, making the standalone
onboarding-newsletter modal obsolete.

Signed-off-by: Andrey Antukh <niwi@niwi.nz>

* 🐛 Fix register test for UTM params to use prepare-register step

UTM params are now extracted and stored in token props during the
prepare-register step, not at register-profile time. Move utm_campaign
and mtm_campaign from the register-profile call to the
prepare-register-profile call in the test.

Signed-off-by: Andrey Antukh <niwi@niwi.nz>

---------

Signed-off-by: Andrey Antukh <niwi@niwi.nz>
This commit is contained in:
Andrey Antukh 2026-04-08 17:00:52 +02:00 committed by GitHub
parent f8c04949e1
commit c8675c5b7e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 75 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
backend/src/app/auth/oidc.clj
View File

@ -423,7 +423,7 @@
(defn- qualify-prop-key
[provider k]
(keyword (:type provider) (name k)))
(keyword (:type provider) (-> k name str/kebab)))
(defn- qualify-props
[provider props]

24
backend/src/app/rpc/commands/auth.clj
View File

@ -253,12 +253,15 @@
:hint "email has complaint reports")))
(defn prepare-register
[{:keys [::db/pool] :as cfg} {:keys [fullname email accept-newsletter-updates] :as params}]
[{:keys [::db/pool] :as cfg} {:keys [fullname email] :as params}]
(validate-register-attempt! cfg params)
(let [email (profile/clean-email email)
profile (profile/get-profile-by-email pool email)
props (-> (audit/extract-utm-params params)
(cond-> (:accept-newsletter-updates params)
(assoc :newsletter-updates true)))
params {:email email
:fullname fullname
:password (:password params)
@ -267,13 +270,12 @@
:iss :prepared-register
:profile-id (:id profile)
:exp (ct/in-future {:days 7})
:props {:newsletter-updates (or accept-newsletter-updates false)}}
:props props}
params (d/without-nils params)
token (tokens/generate cfg params)]
(with-meta {:token token}
{::audit/profile-id uuid/zero})))
(-> {:token token}
(with-meta {::audit/profile-id uuid/zero}))))
(def schema:prepare-register-profile
[:map {:title "prepare-register-profile"}
@ -281,6 +283,7 @@
[:email ::sm/email]
[:password schema:password]
[:create-welcome-file {:optional true} :boolean]
[:accept-newsletter-updates {:optional true} :boolean]
[:invitation-token {:optional true} schema:token]])
(sv/defmethod ::prepare-register-profile
@ -317,8 +320,7 @@
attrs (all the other attrs are filled with default values)."
[{:keys [::db/conn] :as cfg} {:keys [email] :as params}]
(let [id (or (:id params) (uuid/next))
props (-> (audit/extract-utm-params params)
(merge (:props params))
props (-> (:props params)
(merge {:viewed-tutorial? false
:viewed-walkthrough? false
:nudge {:big 10 :small 1}
@ -369,7 +371,6 @@
:cause cause)
(throw cause))))))
(defn create-profile-rels
[conn {:keys [id] :as profile}]
(let [features (cfeat/get-enabled-features cf/flags)
@ -409,7 +410,9 @@
(defn register-profile
[{:keys [::db/conn ::wrk/executor] :as cfg} {:keys [token] :as params}]
(let [claims (tokens/verify cfg {:token token :iss :prepared-register})
params (into claims params)
params (cond-> claims
(:accept-newsletter-updates params)
(update :props assoc :newsletter-updates true))
profile (if-let [profile-id (:profile-id claims)]
(profile/get-profile conn profile-id)
@ -524,7 +527,8 @@
(def schema:register-profile
[:map {:title "register-profile"}
[:token schema:token]])
[:token schema:token]
[:accept-newsletter-updates {:optional true} :boolean]])
(sv/defmethod ::register-profile
{::rpc/auth false

12
backend/test/backend_tests/rpc_profile_test.clj
View File

@ -380,7 +380,9 @@
(let [data {::th/type :prepare-register-profile
:email "user@example.com"
:fullname "foobar"
:password "foobar"}
:password "foobar"
:utm_campaign "utma"
:mtm_campaign "mtma"}
out (th/command! data)
token (get-in out [:result :token])]
(t/is (string? token))
@ -396,11 +398,9 @@
;; try correct register
(let [data {::th/type :register-profile
:token token
:utm_campaign "utma"
:mtm_campaign "mtma"}]
(let [{:keys [result error]} (th/command! data)]
(t/is (nil? error))))
:token token}
out (th/command! data)]
(t/is (nil? (:error out))))
(let [profile (some-> (th/db-get :profile {:email "user@example.com"})
(profile/decode-row))]

10
frontend/src/app/main/ui.cljs
View File

@ -24,7 +24,6 @@
[app.main.ui.exports.files]
[app.main.ui.frame-preview :as frame-preview]
[app.main.ui.notifications :as notifications]
[app.main.ui.onboarding.newsletter :refer [onboarding-newsletter]]
[app.main.ui.onboarding.questions :refer [questions-modal]]
[app.main.ui.onboarding.team-choice :refer [onboarding-team-modal]]
[app.main.ui.releases :refer [release-notes-modal]]
@ -160,12 +159,6 @@
(not (:onboarding-viewed props))
(not (contains? props :onboarding-questions)))
show-newsletter-modal?
(and (contains? cf/flags :onboarding)
(not (:onboarding-viewed props))
(not (contains? props :newsletter-updates))
(contains? props :onboarding-questions))
show-team-modal?
(and (contains? cf/flags :onboarding)
(not (:onboarding-viewed props))
@ -242,9 +235,6 @@
show-question-modal?
[:& questions-modal]
show-newsletter-modal?
[:& onboarding-newsletter]
show-team-modal?
[:& onboarding-team-modal {:go-to-team true}]

31
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.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-register*]]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
@ -21,14 +21,19 @@
(mf/defc auth*
[{:keys [route]}]
(let [section (dm/get-in route [:data :name])
is-register (or
(= section :auth-register)
(= section :auth-register-validate)
(= section :register-validate-page)
(= section :auth-register-success))
params (:query-params route)
error (:error params)]
(let [section
(dm/get-in route [:data :name])
is-register
(or (= section :auth-register)
(= section :auth-register-validate)
(= section :register-validate-page)
(= section :auth-register-success))
params
(:query-params route)
error
(:error params)]
(mf/with-effect []
(dom/set-html-title (tr "title.default")))
@ -49,13 +54,13 @@
(case section
:auth-register
[:& register-page {:params params}]
[:> register-page* {:params params}]
:auth-register-success
[:& register-success-page {:params params}]
[:> register-success-page* {:params params}]
:auth-register-validate
[:& register-validate-page {:params params}]
[:> register-validate-page* {:params params}]
:auth-login
[:& login-page {:params params}]
@ -67,7 +72,7 @@
[:& recovery-page {:params params}])
(when (= section :auth-register)
[:& terms-register])]]))
[:> terms-register*])]]))
(mf/defc auth-page*

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

@ -20,7 +20,6 @@
[app.main.ui.components.link :as lk]
[app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.notifications.context-notification :refer [context-notification]]
[app.util.dom :as dom]
[app.util.i18n :refer [tr]]
[app.util.storage :as s]
@ -34,10 +33,9 @@
:login-with-gitlab
:login-with-oidc]))
(mf/defc demo-warning
{::mf/props :obj}
(mf/defc demo-warning*
[]
[:& context-notification
[:> context-notification*
{:level :warning
:content (tr "auth.demo-warning")}])
@ -274,7 +272,7 @@
(tr "auth.login-tagline")]
(when (contains? cf/flags :demo-warning)
[:& demo-warning])
[:> demo-warning*])
[:> login-dialog* {:params params}]

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

@ -40,9 +40,8 @@
:default-checked false
:label updates-label}]]))
(mf/defc terms-and-privacy
{::mf/props :obj
::mf/private true}
(mf/defc terms-and-privacy*
{::mf/private true}
[]
(let [terms-label
(mf/html
@ -70,8 +69,7 @@
[:accept-newsletter-updates {:optional true} :boolean]
[:token {:optional true} ::sm/text]])
(mf/defc register-form
{::mf/props :obj}
(mf/defc register-form*
[{:keys [params on-success-callback]}]
(let [initial (mf/use-memo (mf/deps params) (constantly params))
form (fm/use-form :schema schema:register-form
@ -150,8 +148,7 @@
(assoc :create-welcome-file true))]
(->> (rp/cmd! :prepare-register-profile cdata)
(rx/finalize #(reset! submitted? false))
(rx/subs! on-register-profile on-error)))))]
(rx/subs! on-register-profile on-error #(reset! submitted? false))))))]
[:& fm/form {:on-submit on-submit :form form}
[:div {:class (stl/css :fields-row)}
@ -177,7 +174,7 @@
:class (stl/css :form-field)}]]
(when (contains? cf/flags :terms-and-privacy-checkbox)
[:& terms-and-privacy])
[:> terms-and-privacy*])
[:> newsletter-options*]
@ -187,8 +184,7 @@
:data-testid "register-form-submit"
:class (stl/css :register-btn)}]]))
(mf/defc register-methods
{::mf/props :obj}
(mf/defc register-methods*
[{:keys [params hide-separator on-success-callback]}]
[:*
(when login/show-sso-login-buttons?
@ -196,19 +192,18 @@
(when (or login/show-sso-login-buttons? (false? hide-separator))
[:hr {:class (stl/css :separator)}])
(when (contains? cf/flags :login-with-password)
[:& register-form {:params params :on-success-callback on-success-callback}])])
[:> register-form* {:params params :on-success-callback on-success-callback}])])
(mf/defc register-page
{::mf/props :obj}
(mf/defc register-page*
[{:keys [params]}]
[:div {:class (stl/css :auth-form-wrapper :register-form)}
[:h1 {:class (stl/css :auth-title)
:data-testid "registration-title"} (tr "auth.register-title")]
(when (contains? cf/flags :demo-warning)
[:& login/demo-warning])
[:> login/demo-warning*])
[:& register-methods {:params params}]
[:> register-methods* {:params params}]
[:div {:class (stl/css :links)}
[:div {:class (stl/css :account)}
@ -228,8 +223,7 @@
;; --- PAGE: register success page
(mf/defc register-success-page
{::mf/props :obj}
(mf/defc register-success-page*
[{:keys [params]}]
(let [email (or (:email params) (::email storage/user))]
[:div {:class (stl/css :auth-form-wrapper :register-success)}
@ -239,8 +233,7 @@
[:div {:class (stl/css :notification-text)} (tr "auth.verification-email-sent")]]
[:div {:class (stl/css :notification-text-email)} email]]))
(mf/defc terms-register
(mf/defc terms-register*
[]
(let [show-all? (and cf/terms-of-service-uri cf/privacy-policy-uri)
show-terms? (some? cf/terms-of-service-uri)
@ -267,13 +260,14 @@
[:token ::sm/text]
[:fullname [::sm/text {:max 250}]]
[:accept-terms-and-privacy {:optional (not (contains? cf/flags :terms-and-privacy-checkbox))}
[:and :boolean [:= true]]]])
[:and :boolean [:= true]]]
[:accept-newsletter-updates {:optional true} :boolean]])
(mf/defc register-validate-form
{::mf/props :obj
::mf/private true}
(mf/defc register-validate-form*
{::mf/private true}
[{:keys [params on-success-callback]}]
(let [form (fm/use-form :schema schema:register-validate-form :initial params)
(let [form
(fm/use-form :schema schema:register-validate-form :initial params)
submitted?
(mf/use-state false)
@ -331,7 +325,9 @@
:class (stl/css :form-field)}]]
(when (contains? cf/flags :terms-and-privacy-checkbox)
[:& terms-and-privacy])
[:> terms-and-privacy*])
[:> newsletter-options*]
[:> fm/submit-button*
{:label (tr "auth.register-submit")
@ -339,8 +335,7 @@
:class (stl/css :register-btn)}]]))
(mf/defc register-validate-page
{::mf/props :obj}
(mf/defc register-validate-page*
[{:keys [params]}]
[:div {:class (stl/css :auth-form-wrapper :register-form)}
@ -350,7 +345,7 @@
:data-testid "register-title"} (tr "auth.register-account-title")]
[:div {:class (stl/css :auth-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 :go-back)}

106
frontend/src/app/main/ui/onboarding/newsletter.cljs
View File

@ -1,106 +0,0 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.onboarding.newsletter
(:require-macros [app.main.style :as stl])
(:require
[app.main.data.event :as-alias ev]
[app.main.data.notifications :as ntf]
[app.main.data.profile :as du]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[potok.v2.core :as ptk]
[rumext.v2 :as mf]))
(mf/defc onboarding-newsletter
[]
(let [state* (mf/use-state #(do {:newsletter-updates false
:newsletter-news false}))
state (deref state*)
team (mf/deref refs/team)
on-change
(mf/use-fn
(fn [event]
(let [attr (-> (dom/get-current-target event)
(dom/get-data "attr")
(keyword))]
(swap! state* update attr not))))
on-next
(mf/use-fn
(mf/deps state team)
(fn []
(when (or (:newsletter-updates state)
(:newsletter-news state))
(st/emit! (ntf/success (tr "onboarding.newsletter.acceptance-message"))))
(let [params (-> state
(assoc ::ev/name "onboarding-step")
(assoc :label "newsletter:subscriptions")
(assoc :step 6))]
(st/emit! (ptk/data-event ::ev/event params)
(du/update-profile-props
(cond-> state
(not (:is-default team))
(assoc :onboarding-viewed true)))))))]
[:div {:class (stl/css-case
:modal-overlay true)}
[:div.animated.fadeInDown {:class (stl/css :modal-container)}
[:div {:class (stl/css :modal-left)}
[:img {:src "images/deco-newsletter.png"
:border "0"}]]
[:div {:class (stl/css :modal-right)}
[:h2 {:class (stl/css :modal-title)
:data-testid "onboarding-newsletter-title"}
(tr "onboarding.newsletter.title")]
[:p {:class (stl/css :modal-text)}
(tr "onboarding-v2.newsletter.desc")]
[:div {:class (stl/css :newsletter-options)}
[:div {:class (stl/css :input-wrapper)}
[:label {:for "newsletter-updates"}
[:span {:class (stl/css-case :global/checked (:newsletter-updates state))}
deprecated-icon/status-tick]
(tr "onboarding-v2.newsletter.updates")
[:input {:type "checkbox"
:id "newsletter-updates"
:data-attr "newsletter-updates"
:value (:newsletter-updates state)
:on-change on-change}]]]
[:div {:class (stl/css :input-wrapper)}
[:label {:for "newsletter-news"}
[:span {:class (stl/css-case :global/checked (:newsletter-news state))}
deprecated-icon/status-tick]
(tr "onboarding-v2.newsletter.news")
[:input {:type "checkbox"
:id "newsletter-news"
:data-attr "newsletter-news"
:value (:newsletter-news state)
:on-change on-change}]]]]
[:p {:class (stl/css :modal-text)}
(tr "onboarding-v2.newsletter.privacy1")
[:a {:class (stl/css :modal-link)
:target "_blank"
:href "https://penpot.app/privacy"}
(tr "onboarding.newsletter.policy")]]
[:p {:class (stl/css :modal-text)}
(tr "onboarding-v2.newsletter.privacy2")]
[:button {:on-click on-next
:class (stl/css :accept-btn)}
(tr "labels.continue")]]]]))

76
frontend/src/app/main/ui/onboarding/newsletter.scss
View File

@ -1,76 +0,0 @@
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated;
.modal-overlay {
@extend .modal-overlay-base;
}
.modal-container {
@extend .modal-container-base;
position: relative;
display: grid;
grid-template-columns: auto auto;
gap: deprecated.$s-32;
padding-inline: deprecated.$s-100;
padding-block-start: deprecated.$s-100;
padding-block-end: deprecated.$s-72;
margin: 0;
width: deprecated.$s-960;
height: deprecated.$s-632;
max-width: deprecated.$s-960;
max-height: deprecated.$s-632;
}
.modal-left {
width: deprecated.$s-172;
margin-block-end: deprecated.$s-64;
img {
width: deprecated.$s-172;
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
}
}
.modal-right {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: deprecated.$s-40 auto auto auto auto deprecated.$s-32;
gap: deprecated.$s-24;
position: relative;
}
.modal-title {
@include deprecated.bigTitleTipography;
color: var(--modal-title-foreground-color);
}
.modal-text {
@include deprecated.bodyLargeTypography;
color: var(--modal-text-foreground-color);
margin: 0;
}
.newsletter-options {
display: grid;
gap: deprecated.$s-16;
margin-inline-start: deprecated.$s-16;
}
.input-wrapper {
@extend .input-checkbox;
}
.modal-link {
@include deprecated.bodyLargeTypography;
color: var(--modal-link-foreground-color);
margin: 0;
}
.accept-btn {
@extend .modal-accept-btn;
justify-self: flex-end;
}

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

@ -150,7 +150,7 @@
[:*
[:div {:class (stl/css :logo-title)} (tr "not-found.login.signup-free")]
[:div {:class (stl/css :logo-subtitle)} (tr "not-found.login.start-using")]
[:& register/register-methods {:on-success-callback success-register :hide-separator true}]
[:> register/register-methods* {:on-success-callback success-register :hide-separator true}]
#_[:hr {:class (stl/css :separator)}]
[:div {:class (stl/css :separator)}]
[:div {:class (stl/css :change-section)}
@ -160,11 +160,11 @@
:on-click set-section} (tr "auth.login-here")]]
[:div {:class (stl/css :links)}
[:hr {:class (stl/css :separator)}]
[:& register/terms-register]]]
[:> register/terms-register*]]]
:register-validate
[:div {:class (stl/css :form-container)}
[:& register/register-form
[:> register/register-form*
{:params {:token @register-token}
:on-success-callback register-email-sent}]
[:div {:class (stl/css :links)}
@ -175,7 +175,7 @@
:register-email-sent
[:div {:class (stl/css :form-container)}
[:& register/register-success-page {:params {:email @user-email :hide-logo true}}]]
[:> register/register-success-page* {:params {:email @user-email :hide-logo true}}]]
:recovery-request
[:& recovery-request-page {:go-back-callback set-section-login

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

@ -12,7 +12,7 @@
[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.auth.register :refer [register-methods* register-success-page* terms-register* register-validate-form*]]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
@ -94,7 +94,7 @@
:register
[:div {:class (stl/css :form-container)}
[:& register-methods {:on-success-callback success-register}]
[:> register-methods* {:on-success-callback success-register}]
[:div {:class (stl/css :links)}
[:div {:class (stl/css :account)}
[:span (tr "auth.already-have-account") " "]
@ -104,8 +104,8 @@
:register-validate
[:div {:class (stl/css :form-container)}
[:& register-validate-form {:params {:token @register-token}
:on-success-callback success-email-sent}]
[:> register-validate-form* {:params {:token @register-token}
:on-success-callback success-email-sent}]
[:div {:class (stl/css :links)}
[:div {:class (stl/css :register)}
[:a {:on-click set-section
@ -117,8 +117,8 @@
:on-success-callback success-email-sent}]
:email-sent
[:div {:class (stl/css :form-container)}
[:& register-success-page {:params {:email @user-email}}]])
[:> register-success-page* {:params {:email @user-email}}]])
(when main-section
[:div {:class (stl/css :links)}
[:& terms-register]])]]]))
[:> terms-register*]])]]]))