osparc.ui.form.renderer.LoginSinglePlaceholder

Author: odeimaiz

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

@@ -80,7 +80,7 @@ qx.Class.define("osparc.auth.ui.Login2FAValidationCodeView", {
       });
 
       this.beautifyFormFields();
-      const formRenderer = new qx.ui.form.renderer.SinglePlaceholder(this._form);
+      const formRenderer = new osparc.ui.form.renderer.LoginSinglePlaceholder(this._form);
       this.add(formRenderer);
 
       // buttons

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

@@ -75,7 +75,7 @@ qx.Class.define("osparc.auth.ui.LoginView", {
       });
       email.getContentElement().setAttribute("autocomplete", "username");
       osparc.utils.Utils.setIdToWidget(email, "loginUserEmailFld");
-      this._form.add(email, " Your email address", qx.util.Validate.email(), "email");
+      this._form.add(email, " Email", qx.util.Validate.email(), "email");
       this.addListener("appear", () => {
         email.focus();
         email.activate();
@@ -86,10 +86,10 @@ qx.Class.define("osparc.auth.ui.LoginView", {
       });
       pass.getChildControl("passwordField").getContentElement().setAttribute("autocomplete", "current-password");
       osparc.utils.Utils.setIdToWidget(pass.getChildControl("passwordField"), "loginPasswordFld");
-      this._form.add(pass, " Your password", null, "password");
+      this._form.add(pass, " Password", null, "password");
 
       this.beautifyFormFields();
-      const formRenderer = new qx.ui.form.renderer.SinglePlaceholder(this._form);
+      const formRenderer = new osparc.ui.form.renderer.LoginSinglePlaceholder(this._form);
       this.add(formRenderer);
 
       // buttons

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

@@ -85,7 +85,7 @@ qx.Class.define("osparc.auth.ui.RegistrationView", {
       validator.setValidator(() => osparc.auth.core.Utils.checkSamePasswords(password1, password2));
 
       this.beautifyFormFields();
-      const formRenderer = new qx.ui.form.renderer.SinglePlaceholder(this._form);
+      const formRenderer = new osparc.ui.form.renderer.LoginSinglePlaceholder(this._form);
       this.add(formRenderer);
 
       // buttons

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

@@ -49,7 +49,7 @@ qx.Class.define("osparc.auth.ui.ResetPassRequestView", {
       });
 
       this.beautifyFormFields();
-      const formRenderer = new qx.ui.form.renderer.SinglePlaceholder(this._form);
+      const formRenderer = new osparc.ui.form.renderer.LoginSinglePlaceholder(this._form);
       this.add(formRenderer);
 
       // buttons

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

@@ -63,7 +63,7 @@ qx.Class.define("osparc.auth.ui.ResetPassView", {
       });
 
       this.beautifyFormFields();
-      const formRenderer = new qx.ui.form.renderer.SinglePlaceholder(this._form);
+      const formRenderer = new osparc.ui.form.renderer.LoginSinglePlaceholder(this._form);
       this.add(formRenderer);
 
       // buttons

services/static-webserver/client/source/class/osparc/ui/form/renderer/LoginSinglePlaceholder.js

@@ -0,0 +1,38 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2025 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+/**
+ * Based on the single renderer {@link qx.ui.form.renderer.SinglePlaceholder}.
+ * Just a more relaxed version with more spacing and transparent backgrounds.
+ */
+qx.Class.define("osparc.ui.form.renderer.LoginSinglePlaceholder", {
+  extend: qx.ui.form.renderer.SinglePlaceholder,
+
+  construct: function(form) {
+    this.base(arguments, form);
+
+    this._getLayout().setSpacing(10);
+  },
+
+  members: {
+    addItems : function(items, names, title) {
+      this.base(arguments, items, names, title);
+
+      items.forEach(item => item.setBackgroundColor("transparent"));
+    }
+  }
+});