Merge pull request #4720 from penpot/niwinz-bugfix-5

✨ Improve how email is passed on post-signup page

frontend/src/app/main/ui/auth/register.cljs

@@ -20,6 +20,7 @@
    [app.main.ui.icons :as i]
    [app.util.i18n :refer [tr tr-html]]
    [app.util.router :as rt]
+   [app.util.storage :as sto]
    [beicon.v2.core :as rx]
    [cljs.spec.alpha :as s]
    [rumext.v2 :as mf]))
@@ -163,11 +164,7 @@
 
 ;; --- PAGE: register validation
 
-(defn- handle-register-error
+(defn- on-register-success
-  [_form _data]
-  (st/emit! (msg/error (tr "errors.generic"))))
-
-(defn- handle-register-success
   [data]
   (cond
     (some? (:invitation-token data))
@@ -178,7 +175,9 @@
     (st/emit! (du/login-from-register))
 
     :else
-    (st/emit! (rt/nav :auth-register-success {} {:email (:email data)}))))
+    (do
+      (swap! sto/storage assoc ::email (:email data))
+      (st/emit! (rt/nav :auth-register-success)))))
 
 (s/def ::accept-terms-and-privacy (s/and ::us/boolean true?))
 (s/def ::accept-newsletter-subscription ::us/boolean)
@@ -192,31 +191,63 @@
             :opt-un [::accept-terms-and-privacy
                      ::accept-newsletter-subscription])))
 
+(mf/defc terms-and-privacy
+  {::mf/props :obj
+   ::mf/private true}
+  []
+  (let [terms-label
+        (mf/html
+         [:& tr-html
+          {:tag-name "div"
+           :label "auth.terms-and-privacy-agreement"
+           :params [cf/terms-of-service-uri cf/privacy-policy-uri]}])]
+
+    [:div {:class (stl/css :fields-row :input-visible :accept-terms-and-privacy-wrapper)}
+     [:& fm/input {:name :accept-terms-and-privacy
+                   :class (stl/css :checkbox-terms-and-privacy)
+                   :type "checkbox"
+                   :default-checked false
+                   :label terms-label}]]))
+
 (mf/defc register-validate-form
+  {::mf/props :obj}
   [{:keys [params on-success-callback]}]
-  (let [form       (fm/use-form :spec ::register-validate-form
+  (let [validators (mf/with-memo []
-                                :validators [(fm/validate-not-empty :fullname (tr "auth.name.not-all-space"))
+                     [(fm/validate-not-empty :fullname (tr "auth.name.not-all-space"))
-                                             (fm/validate-length :fullname fm/max-length-allowed (tr "auth.name.too-long"))]
+                      (fm/validate-length :fullname fm/max-length-allowed (tr "auth.name.too-long"))])
+
+        form       (fm/use-form :spec ::register-validate-form
+                                :validators validators
                                 :initial params)
+
         submitted? (mf/use-state false)
 
-        on-success (fn [p]
+        on-success
-                     (if (nil? on-success-callback)
+        (mf/use-fn
-                       (handle-register-success p)
+         (mf/deps on-success-callback)
-                       (on-success-callback (:email p))))
+         (fn [params]
+           (if (nil? on-success-callback)
+             (on-register-success params)
+             (on-success-callback (:email params)))))
+
+        on-error
+        (mf/use-fn
+         (fn [_cause]
+           (st/emit! (msg/error (tr "errors.generic")))))
 
         on-submit
         (mf/use-fn
-         (fn [form _event]
+         (fn [form _]
            (reset! submitted? true)
            (let [params (:clean-data @form)]
              (->> (rp/cmd! :register-profile params)
                   (rx/finalize #(reset! submitted? false))
-                  (rx/subs! on-success
+                  (rx/subs! on-success on-error)))))]
-                            (partial handle-register-error form))))))]
 
-    [:& fm/form {:on-submit on-submit :form form
+    [:& fm/form {:on-submit on-submit
+                 :form form
                  :class (stl/css :register-validate-form)}
+
      [:div {:class (stl/css :fields-row)}
       [:& fm/input {:name :fullname
                     :label (tr "auth.fullname")
@@ -225,18 +256,7 @@
                     :class (stl/css :form-field)}]]
 
      (when (contains? cf/flags :terms-and-privacy-checkbox)
-       (let [terms-label
+       [:& terms-and-privacy])
-             (mf/html
-              [:& tr-html
-               {:tag-name "div"
-                :label "auth.terms-and-privacy-agreement"
-                :params [cf/terms-of-service-uri cf/privacy-policy-uri]}])]
-         [:div {:class (stl/css :fields-row :input-visible :accept-terms-and-privacy-wrapper)}
-          [:& fm/input {:name :accept-terms-and-privacy
-                        :class (stl/css :checkbox-terms-and-privacy)
-                        :type "checkbox"
-                        :default-checked false
-                        :label terms-label}]]))
 
      [:> fm/submit-button*
       {:label (tr "auth.register-submit")
@@ -245,6 +265,7 @@
 
 
 (mf/defc register-validate-page
+  {::mf/props :obj}
   [{:keys [params]}]
   [:div {:class (stl/css :auth-form-wrapper)}
    [:h1 {:class (stl/css :logo-container)}
@@ -263,13 +284,15 @@
       (tr "labels.go-back")]]]])
 
 (mf/defc register-success-page
-  [{:keys [params]}]
+  {::mf/props :obj}
-  [:div {:class (stl/css :auth-form-wrapper :register-success)}
+  []
-   [:h1 {:class (stl/css :logo-container)}
+  (let [email (::email @sto/storage)]
-    [:a {:href "#/" :title "Penpot" :class (stl/css :logo-btn)} i/logo]]
+    [:div {:class (stl/css :auth-form-wrapper :register-success)}
-   [:div {:class (stl/css :auth-title-wrapper)}
+     [:h1 {:class (stl/css :logo-container)}
-    [:h2 {:class (stl/css :auth-title)}
+      [:a {:href "#/" :title "Penpot" :class (stl/css :logo-btn)} i/logo]]
-     (tr "auth.check-mail")]
+     [:div {:class (stl/css :auth-title-wrapper)}
-    [:div {:class (stl/css :notification-text)} (tr "auth.verification-email-sent")]]
+      [:h2 {:class (stl/css :auth-title)}
-   [:div {:class (stl/css :notification-text-email)} (:email params "")]
+       (tr "auth.check-mail")]
-   [:div {:class (stl/css :notification-text)} (tr "auth.check-your-email")]])
+      [:div {:class (stl/css :notification-text)} (tr "auth.verification-email-sent")]]
+     [:div {:class (stl/css :notification-text-email)} email]
+     [:div {:class (stl/css :notification-text)} (tr "auth.check-your-email")]]))