allow additional buttons in login (#2347)

* allow additional buttons in login
resolves #2326

* dependencies

---------

Co-authored-by: Fred Lefévère-Laoide <Fred.Lefevere-Laoide@Taipy.io>

frontend/taipy-gui/package.json

@@ -116,9 +116,9 @@
     "ts-jest": "^29.0.0",
     "ts-jest-mock-import-meta": "^1.2.0",
     "ts-loader": "^9.2.6",
-    "typedoc": "^0.26.3",
-    "typedoc-plugin-markdown": "^4.1.1",
-    "typescript": "^5.5.3",
+    "typedoc": "^0.27.5",
+    "typedoc-plugin-markdown": "^4.3.2",
+    "typescript": "^5.7.2",
     "webpack": "^5.61.0",
     "webpack-cli": "^5.0.0"
   }

frontend/taipy-gui/src/components/Taipy/Login.spec.tsx

@@ -65,4 +65,10 @@ describe("Login Component", () => {
             type: "SEND_ACTION_ACTION",
         });
     });
+    it("shows additional buttons", async () => {
+        const { getByText } = render(<Login labels={JSON.stringify(["Button one", "Second button"])} />);
+        const elt = getByText("Button one");
+        expect(elt).toBeInTheDocument();
+        expect(elt.tagName).toBe("BUTTON");
+    });
 });

frontend/taipy-gui/src/components/Taipy/Login.tsx

@@ -40,6 +40,7 @@ interface LoginProps extends TaipyBaseProps {
     onAction?: string;
     defaultMessage?: string;
     message?: string;
+    labels?: string;
 }
 
 const closeSx: SxProps<Theme> = {
@@ -64,13 +65,24 @@ const Login = (props: LoginProps) => {
 
     const className = useClassNames(props.libClassName, props.dynamicClassName, props.className);
 
+    const labels = useMemo(() => {
+        if (props.labels) {
+            try {
+                return JSON.parse(props.labels) as string[];
+            } catch (e) {
+                console.info(`Error parsing login.labels\n${(e as Error).message || e}`);
+            }
+        }
+        return [];
+    }, [props.labels]);
+
     const handleAction = useCallback(
         (evt: MouseEvent<HTMLElement>) => {
-            const { close } = evt?.currentTarget.dataset || {};
+            const { close, idx } = evt?.currentTarget.dataset || {};
             const args = close
                 ? [null, null, document.location.pathname.substring(1)]
-                : [user, password, document.location.pathname.substring(1)];
-            setShowProgress(true);
+                : idx ? [user, password, document.location.pathname.substring(1), parseInt(idx, 10)]: [user, password, document.location.pathname.substring(1)];
+            setShowProgress(!idx);
             dispatch(createSendActionNameAction(id, module, onAction, ...args));
         },
         [user, password, dispatch, id, onAction, module]
@@ -168,6 +180,11 @@ const Login = (props: LoginProps) => {
                 <DialogContentText>{message || defaultMessage}</DialogContentText>
             </DialogContent>
             <DialogActions>
+                {labels.map((label, i) => (
+                    <Button onClick={handleAction} key={"label" + i} data-idx={i}>
+                        {label}
+                    </Button>
+                ))}
                 <Button
                     variant="outlined"
                     className={getSuffixedClassNames(className, "-button")}

taipy/gui/_renderers/factory.py

@@ -349,6 +349,7 @@ class _Factory:
             [
                 ("message", PropertyType.dynamic_string),
                 ("on_action", PropertyType.function, "on_login"),
+                ("labels", PropertyType.string_list),
             ]
         ),
         "menu": lambda gui, control_type, attrs: _Builder(

taipy/gui/viselements.json

@@ -1760,6 +1760,11 @@
                         "name": "message",
                         "type": "dynamic(str)",
                         "doc": "The message shown in the dialog."
+                    },
+                    {
+                        "name": "labels",
+                        "type": "Union[str,list[str]]",
+                        "doc": "A list of labels to show in a row of buttons at the bottom of the dialog. The index of the button in the list is reported as args in the <code>on_action</code> callback (that index is -1 for the <i>close</i> icon)."
                     }
                 ]
             }