@webiny/app-admin 6.6.0-alpha.1 → 6.6.0-alpha.10

package/presentation/adminUsers/userMenu/AccountDetails.js

@@ -0,0 +1,20 @@
+import react from "react";
+import { ReactComponent } from "@webiny/icons/account_circle.svg";
+import { AdminConfig } from "../../../config/AdminConfig.js";
+import { useIsDefaultTenant } from "./useIsDefaultTenant.js";
+const { Menu: Menu } = AdminConfig;
+const AccountDetails = (props)=>{
+    const isDefaultTenant = useIsDefaultTenant();
+    if (!isDefaultTenant) return null;
+    return /*#__PURE__*/ react.createElement(Menu.User.Link, {
+        icon: /*#__PURE__*/ react.createElement(Menu.User.Item.Icon, {
+            element: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "Account settings"
+        }),
+        text: "Account settings",
+        to: props.accountRoute
+    });
+};
+export { AccountDetails };
+
+//# sourceMappingURL=AccountDetails.js.map

package/presentation/adminUsers/userMenu/AccountDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/adminUsers/userMenu/AccountDetails.js","sources":["../../../../src/presentation/adminUsers/userMenu/AccountDetails.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as AccountIcon } from \"@webiny/icons/account_circle.svg\";\nimport { AdminConfig } from \"~/config/AdminConfig.js\";\nimport { useIsDefaultTenant } from \"./useIsDefaultTenant.js\";\n\nconst { Menu } = AdminConfig;\n\ninterface AccountDetailsProps {\n    accountRoute: string;\n}\n\nexport const AccountDetails = (props: AccountDetailsProps) => {\n    const isDefaultTenant = useIsDefaultTenant();\n\n    if (!isDefaultTenant) {\n        return null;\n    }\n    return (\n        <Menu.User.Link\n            icon={<Menu.User.Item.Icon element={<AccountIcon />} label={\"Account settings\"} />}\n            text={\"Account settings\"}\n            to={props.accountRoute}\n        />\n    );\n};\n"],"names":["Menu","AdminConfig","AccountDetails","props","isDefaultTenant","useIsDefaultTenant","AccountIcon"],"mappings":";;;;AAKA,MAAM,EAAEA,MAAAA,IAAI,EAAE,GAAGC;AAMV,MAAMC,iBAAiB,CAACC;IAC3B,MAAMC,kBAAkBC;IAExB,IAAI,CAACD,iBACD,OAAO;IAEX,OAAO,WAAP,GACI,oBAACJ,KAAK,IAAI,CAAC,IAAI;QACX,oBAAM,oBAACA,KAAK,IAAI,CAAC,IAAI,CAAC,IAAI;YAAC,uBAAS,oBAACM,gBAAWA;YAAK,OAAO;;QAC5D,MAAM;QACN,IAAIH,MAAM,YAAY;;AAGlC"}

package/presentation/adminUsers/userMenu/useIsDefaultTenant.d.ts

@@ -0,0 +1 @@
+export declare function useIsDefaultTenant(): boolean;

package/presentation/adminUsers/userMenu/useIsDefaultTenant.js

@@ -0,0 +1,9 @@
+import { useIdentity } from "../../security/hooks/useIdentity.js";
+function useIsDefaultTenant() {
+    const { identity } = useIdentity();
+    const { currentTenant, defaultTenant } = identity;
+    return currentTenant.id === defaultTenant.id;
+}
+export { useIsDefaultTenant };
+
+//# sourceMappingURL=useIsDefaultTenant.js.map

package/presentation/adminUsers/userMenu/useIsDefaultTenant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/adminUsers/userMenu/useIsDefaultTenant.js","sources":["../../../../src/presentation/adminUsers/userMenu/useIsDefaultTenant.ts"],"sourcesContent":["import { useIdentity } from \"~/presentation/security/hooks/useIdentity.js\";\n\nexport function useIsDefaultTenant(): boolean {\n    const { identity } = useIdentity();\n\n    // This is only applicable in multi-tenant environments\n    const { currentTenant, defaultTenant } = identity;\n\n    return currentTenant.id === defaultTenant.id;\n}\n"],"names":["useIsDefaultTenant","identity","useIdentity","currentTenant","defaultTenant"],"mappings":";AAEO,SAASA;IACZ,MAAM,EAAEC,QAAQ,EAAE,GAAGC;IAGrB,MAAM,EAAEC,aAAa,EAAEC,aAAa,EAAE,GAAGH;IAEzC,OAAOE,cAAc,EAAE,KAAKC,cAAc,EAAE;AAChD"}

package/presentation/adminUsers/views/Account/Account.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const UserAccountForm: () => React.JSX.Element;

package/presentation/adminUsers/views/Account/Account.js

@@ -0,0 +1,137 @@
+import react, { useEffect, useState } from "react";
+import omit from "lodash/omit.js";
+import { useFeature } from "@webiny/app";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { Form } from "@webiny/form";
+import { validation } from "@webiny/validation";
+import { AvatarImage } from "../../components/AvatarImage/index.js";
+import { GetCurrentUserFeature } from "../../../../features/adminUsers/account/getCurrentUser/index.js";
+import { UpdateCurrentUserFeature } from "../../../../features/adminUsers/account/updateCurrentUser/index.js";
+import { SimpleForm, SimpleFormContent, SimpleFormFooter, SimpleFormHeader } from "../../../../components/SimpleForm/index.js";
+import { useIdentity } from "../../../security/hooks/useIdentity.js";
+import { CenteredView } from "../../../../base/ui/CenteredView.js";
+import { PasswordPolicyFeature } from "../../../../features/adminUsers/passwordPolicy/index.js";
+import { Alert, Button, Grid, Input, OverlayLoader, useToast } from "@webiny/admin-ui";
+const t = i18n.ns("app-security-admin-users/account-form");
+const UserAccountForm = ()=>{
+    const [isSaving, setSaving] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
+    const [user, setUser] = useState({});
+    const toast = useToast();
+    const { identity } = useIdentity();
+    const { passwordPolicy } = useFeature(PasswordPolicyFeature);
+    const { useCase: getCurrentUser } = useFeature(GetCurrentUserFeature);
+    const { useCase: updateCurrentUser } = useFeature(UpdateCurrentUserFeature);
+    useEffect(()=>{
+        getCurrentUser.execute().then((data)=>{
+            setUser(data);
+            setIsLoading(false);
+        });
+    }, []);
+    const isFormLoading = isSaving || isLoading;
+    const loaderMessage = isSaving ? "Saving account..." : "Loading account...";
+    const isExternal = user?.external === true;
+    const onSubmit = async (formData)=>{
+        setSaving(true);
+        try {
+            await updateCurrentUser.execute(omit(formData, [
+                "id",
+                "external"
+            ]));
+            identity.update({
+                displayName: `${formData.firstName} ${formData.lastName}`,
+                profile: {
+                    ...identity.profile || {},
+                    firstName: formData.firstName,
+                    lastName: formData.lastName,
+                    avatar: formData.avatar
+                }
+            });
+            toast.showSuccessToast({
+                title: "Account updated successfully!"
+            });
+        } catch (error) {
+            const message = error instanceof Error ? error.message : "Unknown error";
+            toast.showWarningToast({
+                title: "Error updating user account",
+                description: message,
+                duration: 1 / 0
+            });
+        } finally{
+            setSaving(false);
+        }
+    };
+    return /*#__PURE__*/ react.createElement(CenteredView, {
+        maxWidth: 600
+    }, /*#__PURE__*/ react.createElement(Form, {
+        data: user,
+        onSubmit: onSubmit
+    }, ({ data, form, Bind })=>/*#__PURE__*/ react.createElement(SimpleForm, null, isFormLoading && /*#__PURE__*/ react.createElement(OverlayLoader, {
+            text: loaderMessage
+        }), /*#__PURE__*/ react.createElement(SimpleFormHeader, {
+            title: "Account"
+        }), /*#__PURE__*/ react.createElement(SimpleFormContent, null, isExternal && /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Alert, {
+            type: "info",
+            title: "External User"
+        }, "This user is an external user and cannot be edited."))), /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12,
+            "data-testid": "avatar"
+        }, /*#__PURE__*/ react.createElement(Bind, {
+            name: "avatar"
+        }, /*#__PURE__*/ react.createElement(AvatarImage, {
+            round: true,
+            disabled: isExternal
+        }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Bind, {
+            name: "firstName",
+            validators: validation.create("required")
+        }, /*#__PURE__*/ react.createElement(Input, {
+            label: t`First Name`,
+            disabled: isExternal,
+            "data-testid": "account.firstname"
+        }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, " ", /*#__PURE__*/ react.createElement(Bind, {
+            name: "lastName",
+            validators: validation.create("required")
+        }, /*#__PURE__*/ react.createElement(Input, {
+            label: t`Last Name`,
+            disabled: isExternal,
+            "data-testid": "account.lastname"
+        }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Bind, {
+            name: "email",
+            validators: validation.create("required,email")
+        }, /*#__PURE__*/ react.createElement(Input, {
+            value: data.email,
+            label: t`Email`,
+            disabled: true,
+            "data-testid": "account.email",
+            description: "Email is your unique identifier used to login. It can't be changed!"
+        }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Bind, {
+            name: "password",
+            validators: (value)=>passwordPolicy.validate(value)
+        }, /*#__PURE__*/ react.createElement(Input, {
+            autoComplete: "off",
+            disabled: data.external,
+            description: data.id && "Type a new password to reset it.",
+            type: "password",
+            label: "Password",
+            "data-testid": "account.password"
+        }))))), /*#__PURE__*/ react.createElement(SimpleFormFooter, {
+            "data-testid": "form-footer"
+        }, /*#__PURE__*/ react.createElement(Button, {
+            disabled: isExternal,
+            "data-testid": "account.updatebutton",
+            onClick: form.submit
+        }, t`Update account`)))));
+};
+export { UserAccountForm };
+
+//# sourceMappingURL=Account.js.map

package/presentation/adminUsers/views/Account/Account.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/adminUsers/views/Account/Account.js","sources":["../../../../../src/presentation/adminUsers/views/Account/Account.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport omit from \"lodash/omit.js\";\nimport { useFeature } from \"@webiny/app\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { Form } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport { AvatarImage } from \"../../components/AvatarImage/index.js\";\nimport { GetCurrentUserFeature } from \"~/features/adminUsers/account/getCurrentUser/index.js\";\nimport { UpdateCurrentUserFeature } from \"~/features/adminUsers/account/updateCurrentUser/index.js\";\n\nimport {\n    SimpleForm,\n    SimpleFormHeader,\n    SimpleFormFooter,\n    SimpleFormContent\n} from \"~/components/SimpleForm/index.js\";\nimport { useIdentity } from \"~/presentation/security/hooks/useIdentity.js\";\nimport { CenteredView } from \"~/base/ui/CenteredView.js\";\nimport { PasswordPolicyFeature } from \"~/features/adminUsers/passwordPolicy/index.js\";\nimport { Alert, Button, Grid, Input, OverlayLoader, useToast } from \"@webiny/admin-ui\";\n\nconst t = i18n.ns(\"app-security-admin-users/account-form\");\n\ninterface UserAccountFormData {\n    id?: boolean;\n    firstName: string;\n    lastName: string;\n    email: string;\n    password?: string;\n    external?: boolean;\n    avatar: {\n        src?: string;\n    };\n}\n\nexport const UserAccountForm = () => {\n    const [isSaving, setSaving] = useState(false);\n    const [isLoading, setIsLoading] = useState(true);\n    const [user, setUser] = useState<Record<string, any>>({});\n    const toast = useToast();\n    const { identity } = useIdentity();\n    const { passwordPolicy } = useFeature(PasswordPolicyFeature);\n    const { useCase: getCurrentUser } = useFeature(GetCurrentUserFeature);\n    const { useCase: updateCurrentUser } = useFeature(UpdateCurrentUserFeature);\n\n    useEffect(() => {\n        getCurrentUser.execute().then(data => {\n            setUser(data);\n            setIsLoading(false);\n        });\n    }, []);\n\n    const isFormLoading = isSaving || isLoading;\n    const loaderMessage = isSaving ? \"Saving account...\" : \"Loading account...\";\n\n    const isExternal = user?.external === true;\n\n    const onSubmit = async (formData: UserAccountFormData) => {\n        setSaving(true);\n\n        try {\n            await updateCurrentUser.execute(omit(formData, [\"id\", \"external\"]));\n\n            identity.update({\n                displayName: `${formData.firstName} ${formData.lastName}`,\n                profile: {\n                    ...(identity.profile || {}),\n                    firstName: formData.firstName,\n                    lastName: formData.lastName,\n                    avatar: formData.avatar\n                }\n            });\n\n            toast.showSuccessToast({ title: \"Account updated successfully!\" });\n        } catch (error) {\n            const message = error instanceof Error ? error.message : \"Unknown error\";\n            toast.showWarningToast({\n                title: \"Error updating user account\",\n                description: message,\n                duration: Infinity\n            });\n        } finally {\n            setSaving(false);\n        }\n    };\n\n    return (\n        <CenteredView maxWidth={600}>\n            <Form<UserAccountFormData> data={user} onSubmit={onSubmit}>\n                {({ data, form, Bind }) => (\n                    <SimpleForm>\n                        {isFormLoading && <OverlayLoader text={loaderMessage} />}\n                        <SimpleFormHeader title={\"Account\"} />\n                        <SimpleFormContent>\n                            {isExternal && (\n                                <Grid>\n                                    <Grid.Column span={12}>\n                                        <Alert type={\"info\"} title={\"External User\"}>\n                                            This user is an external user and cannot be edited.\n                                        </Alert>\n                                    </Grid.Column>\n                                </Grid>\n                            )}\n                            <Grid>\n                                <Grid.Column span={12} data-testid={\"avatar\"}>\n                                    <Bind name=\"avatar\">\n                                        <AvatarImage round disabled={isExternal} />\n                                    </Bind>\n                                </Grid.Column>\n                                <Grid.Column span={12}>\n                                    <Bind\n                                        name=\"firstName\"\n                                        validators={validation.create(\"required\")}\n                                    >\n                                        <Input\n                                            label={t`First Name`}\n                                            disabled={isExternal}\n                                            data-testid=\"account.firstname\"\n                                        />\n                                    </Bind>\n                                </Grid.Column>\n                                <Grid.Column span={12}>\n                                    {\" \"}\n                                    <Bind\n                                        name=\"lastName\"\n                                        validators={validation.create(\"required\")}\n                                    >\n                                        <Input\n                                            label={t`Last Name`}\n                                            disabled={isExternal}\n                                            data-testid=\"account.lastname\"\n                                        />\n                                    </Bind>\n                                </Grid.Column>\n                                <Grid.Column span={12}>\n                                    <Bind\n                                        name=\"email\"\n                                        validators={validation.create(\"required,email\")}\n                                    >\n                                        <Input\n                                            value={data.email}\n                                            label={t`Email`}\n                                            disabled={true}\n                                            data-testid=\"account.email\"\n                                            description={\n                                                \"Email is your unique identifier used to login. It can't be changed!\"\n                                            }\n                                        />\n                                    </Bind>\n                                </Grid.Column>\n                                <Grid.Column span={12}>\n                                    <Bind\n                                        name=\"password\"\n                                        validators={value => passwordPolicy.validate(value)}\n                                    >\n                                        <Input\n                                            autoComplete=\"off\"\n                                            disabled={data.external}\n                                            description={\n                                                data.id && \"Type a new password to reset it.\"\n                                            }\n                                            type=\"password\"\n                                            label={\"Password\"}\n                                            data-testid=\"account.password\"\n                                        />\n                                    </Bind>\n                                </Grid.Column>\n                            </Grid>\n                        </SimpleFormContent>\n                        <SimpleFormFooter data-testid={\"form-footer\"}>\n                            <Button\n                                disabled={isExternal}\n                                data-testid=\"account.updatebutton\"\n                                onClick={form.submit}\n                            >{t`Update account`}</Button>\n                        </SimpleFormFooter>\n                    </SimpleForm>\n                )}\n            </Form>\n        </CenteredView>\n    );\n};\n"],"names":["t","i18n","UserAccountForm","isSaving","setSaving","useState","isLoading","setIsLoading","user","setUser","toast","useToast","identity","useIdentity","passwordPolicy","useFeature","PasswordPolicyFeature","getCurrentUser","GetCurrentUserFeature","updateCurrentUser","UpdateCurrentUserFeature","useEffect","data","isFormLoading","loaderMessage","isExternal","onSubmit","formData","omit","error","message","Error","Infinity","CenteredView","Form","form","Bind","SimpleForm","OverlayLoader","SimpleFormHeader","SimpleFormContent","Grid","Alert","AvatarImage","validation","Input","value","SimpleFormFooter","Button"],"mappings":"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"}

package/presentation/adminUsers/views/Account/index.d.ts

@@ -0,0 +1 @@
+export { UserAccountForm } from "./Account.js";

package/presentation/adminUsers/views/Account/index.js

@@ -0,0 +1 @@
+export { UserAccountForm } from "./Account.js";

package/presentation/adminUsers/views/Users/UsersDataList.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const UsersDataList: () => React.JSX.Element;
+export default UsersDataList;

package/presentation/adminUsers/views/Users/UsersDataList.js

@@ -0,0 +1,180 @@
+import react, { useCallback, useEffect, useMemo, useState } from "react";
+import orderBy from "lodash/orderBy.js";
+import { useFeature, useRouter } from "@webiny/app";
+import { Avatar, Button, DataList, DataListModal, DeleteIcon, Grid, List, Select, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/add.svg";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { useSecurity } from "../../../security/hooks/useSecurity.js";
+import { useSnackbar } from "../../../../hooks/useSnackbar.js";
+import { useConfirmationDialog } from "../../../../hooks/useConfirmationDialog.js";
+import { SearchUI } from "../../../../components/SearchUI.js";
+import { ListUsersFeature } from "../../../../features/adminUsers/users/listUsers/index.js";
+import { DeleteUserFeature } from "../../../../features/adminUsers/users/deleteUser/index.js";
+import { deserializeSorters } from "../utils.js";
+import { Routes } from "../../routes.js";
+const t = i18n.ns("app-identity/admin/users/data-list");
+const SORTERS = [
+    {
+        label: t`Newest to oldest`,
+        sorter: "createdOn_DESC"
+    },
+    {
+        label: t`Oldest to newest`,
+        sorter: "createdOn_ASC"
+    },
+    {
+        label: t`Email A-Z`,
+        sorter: "email_ASC"
+    },
+    {
+        label: t`Email Z-A`,
+        sorter: "email_DESC"
+    }
+];
+const UsersDataList = ()=>{
+    const [filter, setFilter] = useState("");
+    const [sort, setSort] = useState(SORTERS[0].sorter);
+    const [users, setUsers] = useState([]);
+    const [usersLoading, setUsersLoading] = useState(true);
+    const [deleteLoading, setDeleteLoading] = useState(false);
+    const { identity } = useSecurity();
+    const { goToRoute } = useRouter();
+    const { showSnackbar } = useSnackbar();
+    const { showConfirmation } = useConfirmationDialog({
+        dataTestId: "default-data-list.delete-dialog",
+        title: "Delete user",
+        message: "Are you sure you want to delete this user? This action cannot be undone."
+    });
+    const { useCase: listUsers } = useFeature(ListUsersFeature);
+    const { useCase: deleteUser } = useFeature(DeleteUserFeature);
+    const fetchUsers = useCallback(()=>{
+        setUsersLoading(true);
+        listUsers.execute().then((data)=>{
+            setUsers(data || []);
+            setUsersLoading(false);
+        });
+    }, [
+        listUsers
+    ]);
+    useEffect(()=>{
+        fetchUsers();
+    }, []);
+    const filterUsers = useCallback(({ email, firstName, lastName })=>email.toLowerCase().includes(filter) || firstName.toLowerCase().includes(filter) || lastName.toLowerCase().includes(filter), [
+        filter
+    ]);
+    const sortUsers = useCallback((list)=>{
+        if (!sort) return list;
+        const [key, sortBy] = deserializeSorters(sort);
+        return orderBy(list, [
+            key
+        ], [
+            sortBy
+        ]);
+    }, [
+        sort
+    ]);
+    const filteredData = "" === filter ? users : users.filter(filterUsers);
+    const userList = sortUsers(filteredData);
+    const id = new URLSearchParams(location.search).get("id");
+    const deleteItem = useCallback((item)=>{
+        showConfirmation(async ()=>{
+            setDeleteLoading(true);
+            try {
+                await deleteUser.execute({
+                    id: item.id
+                });
+                showSnackbar(t`User "{email}" deleted.`({
+                    email: item.email
+                }));
+                fetchUsers();
+                if (id === item.id) goToRoute(Routes.Users.List);
+            } catch (error) {
+                const message = error instanceof Error ? error.message : "Unknown error";
+                showSnackbar(message);
+            } finally{
+                setDeleteLoading(false);
+            }
+        });
+    }, [
+        id,
+        deleteUser,
+        fetchUsers
+    ]);
+    const usersDataListModalOverlay = useMemo(()=>/*#__PURE__*/ react.createElement(DataListModal.Content, null, /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Select, {
+            value: sort,
+            onChange: setSort,
+            label: t`Sort by`,
+            options: SORTERS.map(({ label, sorter: value })=>({
+                    label,
+                    value
+                }))
+        })))), [
+        sort
+    ]);
+    const loading = usersLoading || deleteLoading;
+    return /*#__PURE__*/ react.createElement(DataList, {
+        title: t`Admin Users`,
+        actions: /*#__PURE__*/ react.createElement(Button, {
+            text: t`New`,
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            size: "sm",
+            className: "ml-xs",
+            "data-testid": "new-record-button",
+            onClick: ()=>{
+                goToRoute(Routes.Users.List, {
+                    new: true
+                });
+            }
+        }),
+        data: userList,
+        loading: loading,
+        search: /*#__PURE__*/ react.createElement(SearchUI, {
+            value: filter,
+            onChange: setFilter,
+            inputPlaceholder: t`Search users...`
+        }),
+        modalOverlay: usersDataListModalOverlay,
+        modalOverlayAction: /*#__PURE__*/ react.createElement(DataListModal.Trigger, {
+            "data-testid": "default-data-list.filter"
+        }),
+        showOptions: {
+            refresh: false
+        }
+    }, ({ data })=>/*#__PURE__*/ react.createElement(List, {
+            "data-testid": "default-data-list"
+        }, data.map((item)=>/*#__PURE__*/ react.createElement(List.Item, {
+                key: item.id,
+                selected: item.id === id,
+                title: `${item.firstName} ${item.lastName}`,
+                description: item.email,
+                icon: /*#__PURE__*/ react.createElement(Avatar, {
+                    image: /*#__PURE__*/ react.createElement(Avatar.Image, {
+                        src: item.avatar ? item.avatar.src : void 0,
+                        alt: item.firstName
+                    }),
+                    fallback: /*#__PURE__*/ react.createElement(Avatar.Fallback, {
+                        delayMs: 0
+                    }, item.firstName ? item.firstName.charAt(0) : "A")
+                }),
+                onClick: ()=>{
+                    goToRoute(Routes.Users.List, {
+                        id: item.id
+                    });
+                },
+                actions: identity && identity.id !== item.id ? /*#__PURE__*/ react.createElement(DeleteIcon, {
+                    onClick: ()=>deleteItem(item),
+                    "data-testid": "default-data-list.delete"
+                }) : /*#__PURE__*/ react.createElement(Tooltip, {
+                    content: /*#__PURE__*/ react.createElement("span", null, t`You can't delete your own user account.`),
+                    trigger: /*#__PURE__*/ react.createElement(DeleteIcon, {
+                        disabled: true
+                    })
+                })
+            }))));
+};
+const Users_UsersDataList = UsersDataList;
+export default Users_UsersDataList;
+
+//# sourceMappingURL=UsersDataList.js.map

package/presentation/adminUsers/views/Users/UsersDataList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/adminUsers/views/Users/UsersDataList.js","sources":["../../../../../src/presentation/adminUsers/views/Users/UsersDataList.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport orderBy from \"lodash/orderBy.js\";\nimport { useFeature } from \"@webiny/app\";\nimport { Avatar, Button, Grid, Select, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { useSecurity } from \"~/presentation/security/hooks/useSecurity.js\";\nimport { List, DataList, DataListModal, DeleteIcon } from \"@webiny/admin-ui\";\nimport { useRouter } from \"@webiny/app\";\nimport { useSnackbar } from \"~/hooks/useSnackbar.js\";\nimport { useConfirmationDialog } from \"~/hooks/useConfirmationDialog.js\";\nimport { SearchUI } from \"~/components/SearchUI.js\";\nimport { ListUsersFeature } from \"~/features/adminUsers/users/listUsers/index.js\";\nimport { DeleteUserFeature } from \"~/features/adminUsers/users/deleteUser/index.js\";\nimport { deserializeSorters } from \"../utils.js\";\nimport { Routes } from \"~/presentation/adminUsers/routes.js\";\nimport type { UserItem } from \"~/presentation/adminUsers/UserItem.js\";\n\nconst t = i18n.ns(\"app-identity/admin/users/data-list\");\n\nconst SORTERS = [\n    {\n        label: t`Newest to oldest`,\n        sorter: \"createdOn_DESC\"\n    },\n    {\n        label: t`Oldest to newest`,\n        sorter: \"createdOn_ASC\"\n    },\n    {\n        label: t`Email A-Z`,\n        sorter: \"email_ASC\"\n    },\n    {\n        label: t`Email Z-A`,\n        sorter: \"email_DESC\"\n    }\n];\n\ninterface FilterUsersCallable {\n    (user: Pick<UserItem, \"email\" | \"firstName\" | \"lastName\">): boolean;\n}\n\nconst UsersDataList = () => {\n    const [filter, setFilter] = useState(\"\");\n    const [sort, setSort] = useState<string>(SORTERS[0].sorter);\n    const [users, setUsers] = useState<UserItem[]>([]);\n    const [usersLoading, setUsersLoading] = useState(true);\n    const [deleteLoading, setDeleteLoading] = useState(false);\n    const { identity } = useSecurity();\n    const { goToRoute } = useRouter();\n    const { showSnackbar } = useSnackbar();\n    const { showConfirmation } = useConfirmationDialog({\n        dataTestId: \"default-data-list.delete-dialog\",\n        title: \"Delete user\",\n        message: \"Are you sure you want to delete this user? This action cannot be undone.\"\n    });\n\n    const { useCase: listUsers } = useFeature(ListUsersFeature);\n    const { useCase: deleteUser } = useFeature(DeleteUserFeature);\n\n    const fetchUsers = useCallback(() => {\n        setUsersLoading(true);\n        listUsers.execute().then(data => {\n            setUsers((data || []) as UserItem[]);\n            setUsersLoading(false);\n        });\n    }, [listUsers]);\n\n    useEffect(() => {\n        fetchUsers();\n    }, []);\n\n    const filterUsers = useCallback<FilterUsersCallable>(\n        ({ email, firstName, lastName }) => {\n            return (\n                email.toLowerCase().includes(filter) ||\n                firstName.toLowerCase().includes(filter) ||\n                lastName.toLowerCase().includes(filter)\n            );\n        },\n        [filter]\n    );\n\n    const sortUsers = useCallback(\n        (list: UserItem[]) => {\n            if (!sort) {\n                return list;\n            }\n            const [key, sortBy] = deserializeSorters(sort);\n            return orderBy(list, [key], [sortBy]);\n        },\n        [sort]\n    );\n\n    const filteredData = filter === \"\" ? users : users.filter(filterUsers);\n    const userList = sortUsers(filteredData);\n    const id = new URLSearchParams(location.search).get(\"id\");\n\n    const deleteItem = useCallback(\n        (item: Pick<UserItem, \"id\" | \"email\">) => {\n            showConfirmation(async () => {\n                setDeleteLoading(true);\n                try {\n                    await deleteUser.execute({ id: item.id });\n                    showSnackbar(t`User \"{email}\" deleted.`({ email: item.email }));\n                    fetchUsers();\n\n                    if (id === item.id) {\n                        goToRoute(Routes.Users.List);\n                    }\n                } catch (error) {\n                    const message = error instanceof Error ? error.message : \"Unknown error\";\n                    showSnackbar(message);\n                } finally {\n                    setDeleteLoading(false);\n                }\n            });\n        },\n        [id, deleteUser, fetchUsers]\n    );\n\n    const usersDataListModalOverlay = useMemo(\n        () => (\n            <DataListModal.Content>\n                <Grid>\n                    <Grid.Column span={12}>\n                        <Select\n                            value={sort}\n                            onChange={setSort}\n                            label={t`Sort by`}\n                            options={SORTERS.map(({ label, sorter: value }) => ({\n                                label,\n                                value\n                            }))}\n                        />\n                    </Grid.Column>\n                </Grid>\n            </DataListModal.Content>\n        ),\n        [sort]\n    );\n\n    const loading = usersLoading || deleteLoading;\n\n    return (\n        <DataList\n            title={t`Admin Users`}\n            actions={\n                <Button\n                    text={t`New`}\n                    icon={<AddIcon />}\n                    size={\"sm\"}\n                    className={\"ml-xs\"}\n                    data-testid=\"new-record-button\"\n                    onClick={() => {\n                        goToRoute(Routes.Users.List, { new: true });\n                    }}\n                />\n            }\n            data={userList}\n            loading={loading}\n            search={\n                <SearchUI\n                    value={filter}\n                    onChange={setFilter}\n                    inputPlaceholder={t`Search users...`}\n                />\n            }\n            modalOverlay={usersDataListModalOverlay}\n            modalOverlayAction={<DataListModal.Trigger data-testid={\"default-data-list.filter\"} />}\n            showOptions={{\n                refresh: false\n            }}\n        >\n            {({ data }: { data: UserItem[] }) => (\n                <List data-testid=\"default-data-list\">\n                    {data.map(item => (\n                        <List.Item\n                            key={item.id}\n                            selected={item.id === id}\n                            title={`${item.firstName} ${item.lastName}`}\n                            description={item.email}\n                            icon={\n                                <Avatar\n                                    image={\n                                        <Avatar.Image\n                                            src={item.avatar ? item.avatar.src : undefined}\n                                            alt={item.firstName}\n                                        />\n                                    }\n                                    fallback={\n                                        <Avatar.Fallback delayMs={0}>\n                                            {item.firstName ? item.firstName.charAt(0) : \"A\"}\n                                        </Avatar.Fallback>\n                                    }\n                                />\n                            }\n                            onClick={() => {\n                                goToRoute(Routes.Users.List, { id: item.id });\n                            }}\n                            actions={\n                                identity && identity.id !== item.id ? (\n                                    <DeleteIcon\n                                        onClick={() => deleteItem(item)}\n                                        data-testid={\"default-data-list.delete\"}\n                                    />\n                                ) : (\n                                    <Tooltip\n                                        content={\n                                            <span>{t`You can't delete your own user account.`}</span>\n                                        }\n                                        trigger={<DeleteIcon disabled />}\n                                    />\n                                )\n                            }\n                        />\n                    ))}\n                </List>\n            )}\n        </DataList>\n    );\n};\n\nexport default UsersDataList;\n"],"names":["t","i18n","SORTERS","UsersDataList","filter","setFilter","useState","sort","setSort","users","setUsers","usersLoading","setUsersLoading","deleteLoading","setDeleteLoading","identity","useSecurity","goToRoute","useRouter","showSnackbar","useSnackbar","showConfirmation","useConfirmationDialog","listUsers","useFeature","ListUsersFeature","deleteUser","DeleteUserFeature","fetchUsers","useCallback","data","useEffect","filterUsers","email","firstName","lastName","sortUsers","list","key","sortBy","deserializeSorters","orderBy","filteredData","userList","id","URLSearchParams","location","deleteItem","item","Routes","error","message","Error","usersDataListModalOverlay","useMemo","DataListModal","Grid","Select","label","value","loading","DataList","Button","AddIcon","SearchUI","List","Avatar","undefined","DeleteIcon","Tooltip"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAMA,IAAIC,KAAK,EAAE,CAAC;AAElB,MAAMC,UAAU;IACZ;QACI,OAAOF,CAAC,CAAC,gBAAgB,CAAC;QAC1B,QAAQ;IACZ;IACA;QACI,OAAOA,CAAC,CAAC,gBAAgB,CAAC;QAC1B,QAAQ;IACZ;IACA;QACI,OAAOA,CAAC,CAAC,SAAS,CAAC;QACnB,QAAQ;IACZ;IACA;QACI,OAAOA,CAAC,CAAC,SAAS,CAAC;QACnB,QAAQ;IACZ;CACH;AAMD,MAAMG,gBAAgB;IAClB,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAAS;IACrC,MAAM,CAACC,MAAMC,QAAQ,GAAGF,SAAiBJ,OAAO,CAAC,EAAE,CAAC,MAAM;IAC1D,MAAM,CAACO,OAAOC,SAAS,GAAGJ,SAAqB,EAAE;IACjD,MAAM,CAACK,cAAcC,gBAAgB,GAAGN,SAAS;IACjD,MAAM,CAACO,eAAeC,iBAAiB,GAAGR,SAAS;IACnD,MAAM,EAAES,QAAQ,EAAE,GAAGC;IACrB,MAAM,EAAEC,SAAS,EAAE,GAAGC;IACtB,MAAM,EAAEC,YAAY,EAAE,GAAGC;IACzB,MAAM,EAAEC,gBAAgB,EAAE,GAAGC,sBAAsB;QAC/C,YAAY;QACZ,OAAO;QACP,SAAS;IACb;IAEA,MAAM,EAAE,SAASC,SAAS,EAAE,GAAGC,WAAWC;IAC1C,MAAM,EAAE,SAASC,UAAU,EAAE,GAAGF,WAAWG;IAE3C,MAAMC,aAAaC,YAAY;QAC3BjB,gBAAgB;QAChBW,UAAU,OAAO,GAAG,IAAI,CAACO,CAAAA;YACrBpB,SAAUoB,QAAQ,EAAE;YACpBlB,gBAAgB;QACpB;IACJ,GAAG;QAACW;KAAU;IAEdQ,UAAU;QACNH;IACJ,GAAG,EAAE;IAEL,MAAMI,cAAcH,YAChB,CAAC,EAAEI,KAAK,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAEvBF,MAAM,WAAW,GAAG,QAAQ,CAAC7B,WAC7B8B,UAAU,WAAW,GAAG,QAAQ,CAAC9B,WACjC+B,SAAS,WAAW,GAAG,QAAQ,CAAC/B,SAGxC;QAACA;KAAO;IAGZ,MAAMgC,YAAYP,YACd,CAACQ;QACG,IAAI,CAAC9B,MACD,OAAO8B;QAEX,MAAM,CAACC,KAAKC,OAAO,GAAGC,mBAAmBjC;QACzC,OAAOkC,QAAQJ,MAAM;YAACC;SAAI,EAAE;YAACC;SAAO;IACxC,GACA;QAAChC;KAAK;IAGV,MAAMmC,eAAetC,AAAW,OAAXA,SAAgBK,QAAQA,MAAM,MAAM,CAACuB;IAC1D,MAAMW,WAAWP,UAAUM;IAC3B,MAAME,KAAK,IAAIC,gBAAgBC,SAAS,MAAM,EAAE,GAAG,CAAC;IAEpD,MAAMC,aAAalB,YACf,CAACmB;QACG3B,iBAAiB;YACbP,iBAAiB;YACjB,IAAI;gBACA,MAAMY,WAAW,OAAO,CAAC;oBAAE,IAAIsB,KAAK,EAAE;gBAAC;gBACvC7B,aAAanB,CAAC,CAAC,uBAAuB,CAAC,CAAC;oBAAE,OAAOgD,KAAK,KAAK;gBAAC;gBAC5DpB;gBAEA,IAAIgB,OAAOI,KAAK,EAAE,EACd/B,UAAUgC,OAAO,KAAK,CAAC,IAAI;YAEnC,EAAE,OAAOC,OAAO;gBACZ,MAAMC,UAAUD,iBAAiBE,QAAQF,MAAM,OAAO,GAAG;gBACzD/B,aAAagC;YACjB,SAAU;gBACNrC,iBAAiB;YACrB;QACJ;IACJ,GACA;QAAC8B;QAAIlB;QAAYE;KAAW;IAGhC,MAAMyB,4BAA4BC,QAC9B,kBACI,oBAACC,cAAc,OAAO,sBAClB,oBAACC,MAAIA,MAAAA,WAAAA,GACD,oBAACA,KAAK,MAAM;YAAC,MAAM;yBACf,oBAACC,QAAMA;YACH,OAAOlD;YACP,UAAUC;YACV,OAAOR,CAAC,CAAC,OAAO,CAAC;YACjB,SAASE,QAAQ,GAAG,CAAC,CAAC,EAAEwD,KAAK,EAAE,QAAQC,KAAK,EAAE,GAAM;oBAChDD;oBACAC;gBACJ;eAMpB;QAACpD;KAAK;IAGV,MAAMqD,UAAUjD,gBAAgBE;IAEhC,OAAO,WAAP,GACI,oBAACgD,UAAQA;QACL,OAAO7D,CAAC,CAAC,WAAW,CAAC;QACrB,uBACI,oBAAC8D,QAAMA;YACH,MAAM9D,CAAC,CAAC,GAAG,CAAC;YACZ,oBAAM,oBAAC+D,gBAAOA;YACd,MAAM;YACN,WAAW;YACX,eAAY;YACZ,SAAS;gBACL9C,UAAUgC,OAAO,KAAK,CAAC,IAAI,EAAE;oBAAE,KAAK;gBAAK;YAC7C;;QAGR,MAAMN;QACN,SAASiB;QACT,sBACI,oBAACI,UAAQA;YACL,OAAO5D;YACP,UAAUC;YACV,kBAAkBL,CAAC,CAAC,eAAe,CAAC;;QAG5C,cAAcqD;QACd,kCAAoB,oBAACE,cAAc,OAAO;YAAC,eAAa;;QACxD,aAAa;YACT,SAAS;QACb;OAEC,CAAC,EAAEzB,IAAI,EAAwB,iBAC5B,oBAACmC,MAAIA;YAAC,eAAY;WACbnC,KAAK,GAAG,CAACkB,CAAAA,OAAAA,WAAAA,GACN,oBAACiB,KAAK,IAAI;gBACN,KAAKjB,KAAK,EAAE;gBACZ,UAAUA,KAAK,EAAE,KAAKJ;gBACtB,OAAO,GAAGI,KAAK,SAAS,CAAC,CAAC,EAAEA,KAAK,QAAQ,EAAE;gBAC3C,aAAaA,KAAK,KAAK;gBACvB,oBACI,oBAACkB,QAAMA;oBACH,qBACI,oBAACA,OAAO,KAAK;wBACT,KAAKlB,KAAK,MAAM,GAAGA,KAAK,MAAM,CAAC,GAAG,GAAGmB;wBACrC,KAAKnB,KAAK,SAAS;;oBAG3B,wBACI,oBAACkB,OAAO,QAAQ;wBAAC,SAAS;uBACrBlB,KAAK,SAAS,GAAGA,KAAK,SAAS,CAAC,MAAM,CAAC,KAAK;;gBAK7D,SAAS;oBACL/B,UAAUgC,OAAO,KAAK,CAAC,IAAI,EAAE;wBAAE,IAAID,KAAK,EAAE;oBAAC;gBAC/C;gBACA,SACIjC,YAAYA,SAAS,EAAE,KAAKiC,KAAK,EAAE,GAAG,WAAH,GAC/B,oBAACoB,YAAUA;oBACP,SAAS,IAAMrB,WAAWC;oBAC1B,eAAa;mCAGjB,oBAACqB,SAAOA;oBACJ,uBACI,oBAAC,cAAMrE,CAAC,CAAC,uCAAuC,CAAC;oBAErD,uBAAS,oBAACoE,YAAUA;wBAAC;;;;AAU7D;AAEA,4BAAejE"}

package/presentation/adminUsers/views/Users/UsersForm.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export interface UserFormProps {
+    teams: boolean;
+}
+export declare const UserForm: ({ teams }: UserFormProps) => React.JSX.Element;

package/presentation/adminUsers/views/Users/UsersForm.js

@@ -0,0 +1,175 @@
+import react, { useMemo } from "react";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { Form } from "@webiny/form";
+import { validation as validation_validation } from "@webiny/validation";
+import { SimpleForm, SimpleFormContent, SimpleFormFooter, SimpleFormHeader } from "../../../../components/SimpleForm/index.js";
+import { EmptyView } from "../../../../components/EmptyView.js";
+import { RolesMultiAutocomplete } from "../../../../components/RolesMultiAutocomplete/index.js";
+import { TeamsMultiAutocomplete } from "../../../../components/TeamsMultiAutocomplete/index.js";
+import { useAuthentication } from "../../../security/hooks/useAuthentication.js";
+import { useFeature, useRouter } from "@webiny/app";
+import { ReactComponent } from "@webiny/icons/add.svg";
+import { ReactComponent as gpp_maybe_svg_ReactComponent } from "@webiny/icons/gpp_maybe.svg";
+import { ReactComponent as admin_panel_settings_svg_ReactComponent } from "@webiny/icons/admin_panel_settings.svg";
+import { ReactComponent as settings_svg_ReactComponent } from "@webiny/icons/settings.svg";
+import { Accordion, Alert, Button, Grid, Input, Link, OverlayLoader } from "@webiny/admin-ui";
+import { AvatarImage } from "../../components/AvatarImage/index.js";
+import { useUserForm } from "./hooks/useUserForm.js";
+import { PasswordPolicyFeature } from "../../../../features/adminUsers/passwordPolicy/index.js";
+import { Routes } from "../../routes.js";
+const t = i18n.ns("app-security-admin-users/account-form");
+const UserForm = ({ teams })=>{
+    const { identity } = useAuthentication();
+    const userForm = useUserForm();
+    const { passwordPolicy } = useFeature(PasswordPolicyFeature);
+    const { getLink } = useRouter();
+    const isExternal = userForm.user?.external === true;
+    const formTitle = userForm.isNewUser ? "New User" : userForm.fullName;
+    const isNewUser = userForm.isNewUser;
+    const emailIsDisabled = !isNewUser;
+    let emailDescription = "Email is your unique identifier used to login. It can't be changed!";
+    if (isNewUser) emailDescription = "Email is your unique identifier used to login. It can't be changed later!";
+    const groupValidators = useMemo(()=>teams ? [] : [
+            validation_validation.create("required")
+        ], [
+        teams
+    ]);
+    const accountLink = getLink(Routes.Users.Account);
+    if (userForm.showEmptyView) return /*#__PURE__*/ react.createElement(EmptyView, {
+        icon: /*#__PURE__*/ react.createElement(settings_svg_ReactComponent, null),
+        title: t`Click on the left side list to display user details or create a...`,
+        action: /*#__PURE__*/ react.createElement(Button, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            text: t`New User`,
+            "data-testid": "new-record-button",
+            onClick: userForm.createUser
+        })
+    });
+    const isSelf = userForm.user?.id === identity.id;
+    const isDisabled = isExternal || isSelf;
+    return /*#__PURE__*/ react.createElement(Form, {
+        data: userForm.user,
+        onSubmit: userForm.onSubmit
+    }, ({ data, form, Bind })=>/*#__PURE__*/ react.createElement(SimpleForm, {
+            size: "lg"
+        }, userForm.loading && /*#__PURE__*/ react.createElement(OverlayLoader, null), /*#__PURE__*/ react.createElement("div", {
+            className: "mb-xl"
+        }, /*#__PURE__*/ react.createElement(Bind, {
+            name: "avatar"
+        }, /*#__PURE__*/ react.createElement(AvatarImage, {
+            round: true,
+            disabled: isDisabled
+        }))), /*#__PURE__*/ react.createElement(SimpleFormHeader, {
+            title: formTitle
+        }), /*#__PURE__*/ react.createElement(SimpleFormContent, null, isExternal && /*#__PURE__*/ react.createElement(Grid, {
+            className: "mb-lg"
+        }, /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Alert, {
+            type: "info",
+            title: "External User"
+        }, "This user is an external user and cannot be edited."))), isSelf && /*#__PURE__*/ react.createElement(Grid, {
+            className: "mb-lg"
+        }, /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Alert, {
+            type: "info",
+            title: "Own Profile"
+        }, "You cannot edit your own profile using this form. Please use the ", /*#__PURE__*/ react.createElement(Link, {
+            to: accountLink
+        }, "account settings"), " instead."))), /*#__PURE__*/ react.createElement(Accordion, {
+            variant: "underline"
+        }, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Bio",
+            description: "Account information",
+            icon: /*#__PURE__*/ react.createElement(settings_svg_ReactComponent, null),
+            defaultOpen: true
+        }, /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Bind, {
+            name: "firstName",
+            validators: validation_validation.create("required")
+        }, /*#__PURE__*/ react.createElement(Input, {
+            label: t`First Name`,
+            disabled: isDisabled,
+            "data-testid": "account.firstname"
+        }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Bind, {
+            name: "lastName",
+            validators: validation_validation.create("required")
+        }, /*#__PURE__*/ react.createElement(Input, {
+            label: t`Last Name`,
+            disabled: isDisabled,
+            "data-testid": "account.lastname"
+        }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Bind, {
+            name: "email",
+            validators: validation_validation.create("required,email")
+        }, /*#__PURE__*/ react.createElement(Input, {
+            value: data.email,
+            label: t`Email`,
+            disabled: emailIsDisabled || isDisabled,
+            "data-testid": "account.email",
+            autoComplete: "new-password",
+            description: emailDescription
+        }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Bind, {
+            name: "password",
+            validators: (value)=>passwordPolicy.validate(value)
+        }, /*#__PURE__*/ react.createElement(Input, {
+            autoComplete: "new-password",
+            disabled: isDisabled,
+            description: data.id && "Type a new password to reset it.",
+            type: "password",
+            label: "Password",
+            "data-testid": "account.password"
+        }))))), /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Roles",
+            description: "Assign to security roles",
+            icon: /*#__PURE__*/ react.createElement(gpp_maybe_svg_ReactComponent, null)
+        }, /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Bind, {
+            name: "roles",
+            validators: groupValidators
+        }, ({ value, onChange, validation })=>/*#__PURE__*/ react.createElement(RolesMultiAutocomplete, {
+                values: value,
+                onChange: onChange,
+                validation: validation,
+                label: "Roles",
+                "data-testid": "roles-autocomplete",
+                disabled: isDisabled
+            }))))), teams ? /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Teams",
+            description: "Assign to teams",
+            icon: /*#__PURE__*/ react.createElement(admin_panel_settings_svg_ReactComponent, null)
+        }, /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Bind, {
+            name: "teams"
+        }, ({ value, onChange, validation })=>/*#__PURE__*/ react.createElement(TeamsMultiAutocomplete, {
+                values: value,
+                onChange: onChange,
+                validation: validation,
+                label: "Teams",
+                "data-testid": "teams-autocomplete",
+                disabled: isDisabled
+            }))))) : null)), /*#__PURE__*/ react.createElement(SimpleFormFooter, {
+            "data-testid": "form-footer"
+        }, /*#__PURE__*/ react.createElement(Button, {
+            variant: "secondary",
+            text: t`Cancel`,
+            onClick: userForm.cancelEditing
+        }), /*#__PURE__*/ react.createElement(Button, {
+            variant: "primary",
+            text: isNewUser ? t`Create user` : t`Update user`,
+            disabled: isDisabled,
+            onClick: form.submit
+        }))));
+};
+export { UserForm };
+
+//# sourceMappingURL=UsersForm.js.map