🐛 Add links for terms of service and privacy policy in register checkbox

CHANGES.md

@@ -18,6 +18,7 @@
 - Fix problem with masked texts on exporting [Taiga #2116](https://tree.taiga.io/project/penpot/issue/2116)
 - Fix text editor enter behaviour with centered texts [Taiga #2126](https://tree.taiga.io/project/penpot/issue/2126)
 - Fix residual stroke on imported svg [Taiga #2125](https://tree.taiga.io/project/penpot/issue/2125)
+- Add links for terms of service and privacy policy in register checkbox [Taiga #2020](https://tree.taiga.io/project/penpot/issue/2020)
 
 ### :arrow_up: Deps updates
 ### :boom: Breaking changes

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

@@ -210,8 +210,13 @@
      [:div.fields-row
       [:& fm/input {:name :accept-terms-and-privacy
                     :class "check-primary"
-                    :label (tr "auth.terms-privacy-agreement")
-                    :type "checkbox"}]]
+                    :type "checkbox"}
+       [:span
+        (tr "auth.terms-privacy-agreement")
+        [:div
+         [:a {:href "https://penpot.app/terms.html" :target "_blank"} (tr "auth.terms-of-service")]
+         [:span ",\u00A0"]
+         [:a {:href "https://penpot.app/privacy.html" :target "_blank"} (tr "auth.privacy-policy")]]]]]
 
      ;; (when (contains? @cf/flags :newsletter-registration-check)
      ;;   [:div.fields-row

frontend/src/app/main/ui/components/forms.cljs

@@ -19,7 +19,7 @@
 (def use-form fm/use-form)
 
 (mf/defc input
-  [{:keys [label help-icon disabled form hint trim] :as props}]
+  [{:keys [label help-icon disabled form hint trim children] :as props}]
   (let [input-type   (get props :type "text")
         input-name   (get props :name)
         more-classes (get props :class)
@@ -82,7 +82,7 @@
             (swap! form assoc-in [:touched input-name] true)))
 
         props (-> props
-                  (dissoc :help-icon :form :trim)
+                  (dissoc :help-icon :form :trim :children)
                   (assoc :id (name input-name)
                          :value value
                          :auto-focus auto-focus?
@@ -97,7 +97,13 @@
      {:class klass}
      [:*
       [:> :input props]
-      [:label {:for (name input-name)} label]
+      (cond
+        (some? label)
+        [:label {:for (name input-name)} label]
+
+        (some? children)
+        [:label {:for (name input-name)} children])
+
       (when help-icon'
         [:div.help-icon
          {:style {:cursor "pointer"}

frontend/translations/en.po

@@ -163,6 +163,12 @@ msgstr ""
 "When creating a new account, you agree to our terms of service and privacy "
 "policy."
 
+msgid "auth.terms-of-service"
+msgstr "Terms of service"
+
+msgid "auth.privacy-policy"
+msgstr "Privacy policy"
+
 #: src/app/main/ui/auth/register.cljs
 msgid "auth.verification-email-sent"
 msgstr "We've sent a verification email to"

frontend/translations/es.po

@@ -167,6 +167,12 @@ msgstr ""
 "Al crear una nueva cuenta, aceptas nuestros términos de servicio y política "
 "de privacidad."
 
+msgid "auth.terms-of-service"
+msgstr "Terminos de servicio"
+
+msgid "auth.privacy-policy"
+msgstr "Política de privacidad"
+
 #: src/app/main/ui/auth/register.cljs
 msgid "auth.verification-email-sent"
 msgstr "Hemos enviado un email de verificación a"

frontend/translations/fr.po

@@ -161,6 +161,12 @@ msgstr ""
 "En créant un compte, vous acceptez nos conditions générales d'utilisation "
 "et notre politique de confidentialité."
 
+msgid "auth.terms-of-service"
+msgstr "Conditions générales d'utilisation"
+
+msgid "auth.privacy-policy"
+msgstr "Politique de confidentialité"
+
 #: src/app/main/ui/auth/register.cljs
 msgid "auth.verification-email-sent"
 msgstr "Nous avons envoyé un e-mail de vérification à"