🎨 Separate Privacy Policy and EULA checkboxes (#5420)

Author: odeimaiz

services/static-webserver/client/source/class/osparc/auth/ui/RequestAccount.js

@@ -151,12 +151,6 @@ qx.Class.define("osparc.auth.ui.RequestAccount", {
       doubleSpaced.push(message);
       this._form.add(message, this.tr("Message"), null, "message");
 
-      const eula = new qx.ui.form.CheckBox().set({
-        required: true
-      })
-      doubleSpaced.push(eula);
-      this._form.add(eula, this.tr("I accept the below Privacy Policy and EULA"), null, "eula")
-
       // const formRenderer = new qx.ui.form.renderer.Single(this._form);
       const formRenderer = new osparc.ui.form.renderer.DoubleV(this._form, doubleSpaced);
       this.add(formRenderer);
@@ -165,26 +159,22 @@ qx.Class.define("osparc.auth.ui.RequestAccount", {
       const grp = new qx.ui.container.Composite(new qx.ui.layout.VBox(15));
       const buttons = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));
 
-      const eulaTextContainer = new qx.ui.container.Composite(new qx.ui.layout.Flow()).set({
-        width: 100
+      const color = qx.theme.manager.Color.getInstance().resolve("text");
+      const ppText = `I acknowledge that data will be processed in accordance with <a href='https://sim4life.swiss/privacy' style='color: ${color}' target='_blank''>our privacy policy</a>`;
+      const privacyPolicy = new qx.ui.form.CheckBox().set({
+        required: true,
+        value: false
       })
-      const part1 = "Data will be processed in accordance with"
-      part1.split(" ").forEach(word => eulaTextContainer.add(new qx.ui.basic.Label(word).set({
-        marginRight: 2
-      })))
-      eulaTextContainer.add(new osparc.ui.basic.LinkLabel("our privacy policy.", "https://sim4life.swiss/privacy").set({
-        marginRight: 2,
-        rich: false
-      }))
-      const part2 = "Users are authorized to use the web product in accordance with"
-      part2.split(" ").forEach(word => eulaTextContainer.add(new qx.ui.basic.Label(word).set({
-        marginRight: 2
-      })))
-      eulaTextContainer.add(new osparc.ui.basic.LinkLabel("the EULA.", "https://zurichmedtech.github.io/s4l-manual/#/docs/licensing/copyright_Sim4Life?id=zurich-medtech-ag-zmt").set({
-        rich: false
-      }))
-
-      grp.add(eulaTextContainer)
+      doubleSpaced.push(privacyPolicy);
+      this._form.add(privacyPolicy, ppText, null, "privacyPolicy")
+
+      const eulaText = `I accept the <a href='https://zurichmedtech.github.io/s4l-manual/#/docs/licensing/copyright_Sim4Life?id=zurich-medtech-ag-zmt' style='color: ${color}' target='_blank''>end users license agreement (EULA)</a> and I will use the product in accordance with it.`;
+      const eula = new qx.ui.form.CheckBox().set({
+        required: true,
+        value: false
+      })
+      doubleSpaced.push(eula);
+      this._form.add(eula, eulaText, null, "eula")
 
       const submitBtn = this.__requestButton = new qx.ui.form.Button(this.tr("Request")).set({
         center: true,
@@ -204,8 +194,8 @@ qx.Class.define("osparc.auth.ui.RequestAccount", {
 
       // interaction
       submitBtn.addListener("execute", e => {
-        const valid = this._form.validate();
-        if (valid) {
+        const validForm = this._form.validate();
+        if (validForm) {
           const formData = {};
           Object.entries(this._form.getItems()).forEach(([key, field]) => {
             const val = field.getValue();