burdy
Version:
Open Source Headless Platform
303 lines (302 loc) • 19.5 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const react_2 = require("@fluentui/react");
const loading_bar_1 = __importDefault(require("../../../components/loading-bar"));
const yup = __importStar(require("yup"));
const react_router_1 = require("react-router");
const users_context_1 = require("../context/users.context");
const hoc_1 = require("../../../helpers/hoc");
const dialog_1 = require("../../../context/dialog");
const auth_context_1 = require("../../authentication/context/auth.context");
const back_panel_1 = __importDefault(require("../../../components/back-panel"));
const react_hook_form_1 = require("react-hook-form");
const yup_1 = require("@hookform/resolvers/yup");
const rhf_components_1 = require("../../../components/rhf-components");
const status_bar_1 = __importDefault(require("../../../components/status-bar"));
const user_groups_1 = __importDefault(require("./user-groups"));
const model_1 = require("../../../../shared/interfaces/model");
const generate_password_browser_1 = __importDefault(require("generate-password-browser"));
const copy_text_to_clipboard_1 = __importDefault(require("copy-text-to-clipboard"));
const snackbar_1 = require("../../../context/snackbar");
const useStyles = (0, react_2.makeStyles)({
content: {
paddingTop: 18,
},
mainInformation: {
marginTop: 36,
marginBottom: 24,
},
personaCoin: {
paddingRight: 20,
},
});
const schema = yup.object({
firstName: yup.string().label('First name'),
lastName: yup.string().label('Last name'),
meta: yup.object({}),
});
const resetSchema = yup.object({
currentPassword: yup.string().min(6).required().label('Current Password'),
password: yup.string().min(6).required().label('Password'),
confirmPassword: yup
.string()
.min(6)
.required()
.oneOf([yup.ref('password'), null], 'Passwords must match.')
.label('Confirm password'),
});
const userResetSchema = yup.object({
password: yup.string().min(6).required().label('Password'),
});
const ProfilePasswordReset = ({ resetOpen, setResetOpen }) => {
const history = (0, react_router_1.useHistory)();
const { updatePassword } = (0, auth_context_1.useAuth)();
const { control, handleSubmit, reset } = (0, react_hook_form_1.useForm)({
resolver: (0, yup_1.yupResolver)(resetSchema),
defaultValues: {
currentPassword: '',
password: '',
confirmPassword: '',
},
});
const submit = handleSubmit((data) => __awaiter(void 0, void 0, void 0, function* () {
try {
yield updatePassword.execute(data);
reset();
}
catch (e) {
//
}
}));
(0, react_1.useEffect)(() => () => {
updatePassword.reset();
}, []);
const renderFooterContent = (0, react_1.useCallback)(() => (react_1.default.createElement(react_2.Stack, { tokens: { childrenGap: 10 }, horizontal: true },
react_1.default.createElement(react_2.PrimaryButton, { onClick: submit, disabled: updatePassword.loading }, "Reset Password"),
react_1.default.createElement(react_2.DefaultButton, { onClick: () => setResetOpen(false) }, "Cancel"))), [submit, setResetOpen, updatePassword.loading]);
return (react_1.default.createElement(back_panel_1.default, { title: "Change Password", isOpen: resetOpen, onBack: () => setResetOpen(false), onDismiss: () => history.push('/users/'), type: react_2.PanelType.medium, isFooterAtBottom: true, onRenderFooterContent: renderFooterContent },
react_1.default.createElement(status_bar_1.default, { controller: updatePassword, successMessage: "You've successfully reset the password." }),
react_1.default.createElement("form", { onSubmit: submit },
react_1.default.createElement(react_2.Stack, { tokens: { childrenGap: 8 }, style: { marginTop: 12 } },
react_1.default.createElement(rhf_components_1.ControlledTextField, { control: control, label: "Current Password", name: "currentPassword", autoComplete: "off", type: "password", canRevealPassword: true }),
react_1.default.createElement(rhf_components_1.ControlledTextField, { control: control, label: "New Password", name: "password", autoComplete: "off", type: "password", canRevealPassword: true }),
react_1.default.createElement(rhf_components_1.ControlledTextField, { control: control, label: "Confirm New Password", name: "confirmPassword", autoComplete: "off", type: "password", canRevealPassword: true })))));
};
const UserPasswordReset = ({ resetOpen, setResetOpen }) => {
const users = (0, users_context_1.useUsers)();
const history = (0, react_router_1.useHistory)();
const currentUser = users.get.result;
const { control, handleSubmit, setValue, getValues, reset } = (0, react_hook_form_1.useForm)({
resolver: (0, yup_1.yupResolver)(userResetSchema),
defaultValues: {
id: currentUser.id,
password: '',
notify: true,
},
});
const submit = handleSubmit((data) => __awaiter(void 0, void 0, void 0, function* () {
try {
yield users.resetPassword.execute(data);
reset();
}
catch (e) {
//
}
}));
(0, react_1.useEffect)(() => () => {
users.resetPassword.reset();
}, []);
const renderFooterContent = (0, react_1.useCallback)(() => (react_1.default.createElement(react_2.Stack, { tokens: { childrenGap: 10 }, horizontal: true },
react_1.default.createElement(react_2.PrimaryButton, { onClick: submit, disabled: users.resetPassword.loading }, "Reset Password"),
react_1.default.createElement(react_2.DefaultButton, { onClick: () => setResetOpen(false) }, "Cancel"))), [submit, setResetOpen, users.resetPassword.loading]);
return (react_1.default.createElement(back_panel_1.default, { title: `Change password (${currentUser.email})`, isOpen: resetOpen, onBack: () => setResetOpen(false), onDismiss: () => history.push('/users/'), type: react_2.PanelType.medium, isFooterAtBottom: true, onRenderFooterContent: renderFooterContent },
react_1.default.createElement(status_bar_1.default, { controller: users.resetPassword, successMessage: "You've successfully reset the password." }),
react_1.default.createElement("form", { onSubmit: submit },
react_1.default.createElement(react_2.Stack, { tokens: { childrenGap: 24 }, style: { marginTop: 24 } },
react_1.default.createElement(rhf_components_1.ControlledTextField, { control: control, label: "New Password", type: "text", name: "password", autoComplete: "off", styles: {
suffix: {
padding: 0,
},
fieldGroup: {
borderRight: 'none',
},
}, onRenderSuffix: () => (react_1.default.createElement(react_2.Stack, { horizontal: true },
react_1.default.createElement(react_2.PrimaryButton, { iconProps: { iconName: 'Refresh' }, style: { minWidth: 0, padding: '0 4px' }, onClick: () => {
setValue('password', generate_password_browser_1.default.generate({
length: 12,
numbers: true,
}));
} }),
react_1.default.createElement(react_2.DefaultButton, { iconProps: { iconName: 'Copy' }, style: { minWidth: 0, padding: '0 4px' }, onClick: () => {
(0, copy_text_to_clipboard_1.default)(getValues().password);
} }))) }),
react_1.default.createElement(rhf_components_1.ControlledCheckbox, { label: "Send new password to the user", name: "notify", control: control })))));
};
const ProfileActions = ({ setResetOpen }) => (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(react_2.ActionButton, { iconProps: { iconName: 'Lock' }, onClick: () => setResetOpen(true) }, "Change Password")));
const UserActions = ({ currentUser, setOpen, id, setResetOpen }) => {
const users = (0, users_context_1.useUsers)();
const dialog = (0, dialog_1.useDialog)();
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(react_2.ActionButton, { iconProps: { iconName: 'Lock' }, onClick: () => setResetOpen(true) }, "Reset Password"),
react_1.default.createElement(react_2.Separator, { vertical: true }),
react_1.default.createElement(react_2.ActionButton, { iconProps: {
iconName: currentUser.status === 'active' ? 'BlockContact' : 'ReminderPerson',
}, onClick: () => {
(() => __awaiter(void 0, void 0, void 0, function* () {
try {
if (currentUser.status === 'active') {
yield dialog.confirm(`Deactivate ${currentUser.email}?`, 'Are you sure you would like to deactivate this account?');
yield users.update.execute(currentUser.id, {
status: model_1.UserStatus.DISABLED,
});
}
else {
yield dialog.confirm(`Activate ${currentUser.email}?`, 'Are you sure you would like to activate this account?');
yield users.update.execute(currentUser.id, {
status: model_1.UserStatus.ACTIVE,
});
}
yield users.get.execute(id);
}
catch (e) {
//
}
}))();
} }, currentUser.status === 'active' ? 'Deactivate' : 'Activate'),
react_1.default.createElement(react_2.Separator, { vertical: true }),
react_1.default.createElement(react_2.ActionButton, { iconProps: { iconName: 'Delete' }, onClick: () => {
(() => __awaiter(void 0, void 0, void 0, function* () {
try {
yield dialog.confirm(`Delete ${currentUser.email}?`, 'Are you sure you would like to proceed?');
yield users.deleteMany.execute([currentUser.id]);
setOpen(false);
}
catch (e) {
//
}
}))();
} }, "Delete")));
};
const UserEdit = () => {
var _a;
const styles = useStyles();
const users = (0, users_context_1.useUsers)();
const [groups, setGroups] = (0, react_1.useState)([]);
const auth = (0, auth_context_1.useAuth)();
const history = (0, react_router_1.useHistory)();
const { openSnackbar } = (0, snackbar_1.useSnackbar)();
const [open, setOpen] = (0, react_1.useState)(false);
const { id } = (0, react_router_1.useParams)();
const currentUser = users.get.result;
const [resetOpen, setResetOpen] = (0, react_1.useState)(false);
const isProfile = (0, react_1.useMemo)(() => { var _a; return ((_a = auth.user) === null || _a === void 0 ? void 0 : _a.id) === (currentUser === null || currentUser === void 0 ? void 0 : currentUser.id); }, [currentUser, auth.user]);
const { control, reset, handleSubmit, register, getValues, setValue } = (0, react_hook_form_1.useForm)({
resolver: (0, yup_1.yupResolver)(schema),
defaultValues: {
firstName: '',
lastName: '',
meta: {},
groups: [],
},
});
const [firstName, lastName] = getValues(['firstName', 'lastName']);
const close = (0, react_1.useCallback)(() => {
history.push('/users/');
}, []);
const submit = handleSubmit((data) => __awaiter(void 0, void 0, void 0, function* () {
try {
yield users.update.execute(id, data);
setOpen(false);
openSnackbar({
message: `User "${currentUser.email}" successfully updated.`,
messageBarType: react_2.MessageBarType.success,
});
}
catch (e) {
//
}
}));
(0, react_1.useEffect)(() => {
register('groups');
setOpen(true);
users.get.execute(id);
}, []);
(0, react_1.useEffect)(() => {
var _a, _b, _c;
setGroups((_a = currentUser === null || currentUser === void 0 ? void 0 : currentUser.groups) !== null && _a !== void 0 ? _a : []);
reset({
firstName: (_b = currentUser === null || currentUser === void 0 ? void 0 : currentUser.firstName) !== null && _b !== void 0 ? _b : '',
lastName: (_c = currentUser === null || currentUser === void 0 ? void 0 : currentUser.lastName) !== null && _c !== void 0 ? _c : '',
});
}, [currentUser]);
(0, react_1.useEffect)(() => {
setValue('groups', groups.map((g) => g.id));
}, [groups]);
const renderFooterContent = (0, react_1.useCallback)(() => (react_1.default.createElement(react_2.Stack, { horizontal: true, tokens: { childrenGap: 10 } },
react_1.default.createElement(react_2.PrimaryButton, { "data-cy": "users-edit-submit", onClick: submit }, "Update"),
react_1.default.createElement(react_2.DefaultButton, { onClick: () => setOpen(false) }, "Cancel"))), [setOpen, submit]);
return (react_1.default.createElement(react_2.Panel, { isOpen: open, headerText: isProfile ? 'Edit Profile' : 'Edit User', isFooterAtBottom: true, onRenderFooterContent: renderFooterContent, onDismiss: (e) => {
if ((e === null || e === void 0 ? void 0 : e.type) === 'click') {
setOpen(false);
}
}, onDismissed: close, type: react_2.PanelType.medium },
react_1.default.createElement(loading_bar_1.default, { loading: !currentUser },
isProfile ? (react_1.default.createElement(ProfilePasswordReset, { resetOpen: resetOpen, setResetOpen: setResetOpen })) : (react_1.default.createElement(UserPasswordReset, { resetOpen: resetOpen, setResetOpen: setResetOpen })),
react_1.default.createElement("form", { onSubmit: submit },
react_1.default.createElement(react_2.Stack, { horizontal: true, verticalAlign: "center", className: styles.mainInformation },
react_1.default.createElement(react_2.Stack.Item, null,
react_1.default.createElement(react_2.PersonaCoin, { text: `${firstName} ${lastName}`, initialsColor: react_2.PersonaInitialsColor.blue, size: react_2.PersonaSize.size100, className: styles.personaCoin })),
react_1.default.createElement(react_2.Stack.Item, null,
react_1.default.createElement(react_2.Stack, null,
react_1.default.createElement(react_2.Text, { variant: "xxLarge" },
react_1.default.createElement("b", null, `${firstName} ${lastName}`)),
react_1.default.createElement(react_2.Text, { variant: "large" }, currentUser === null || currentUser === void 0 ? void 0 : currentUser.email),
react_1.default.createElement(react_2.Text, { variant: "small" }, (_a = currentUser === null || currentUser === void 0 ? void 0 : currentUser.groups) === null || _a === void 0 ? void 0 : _a.map((group) => group === null || group === void 0 ? void 0 : group.name).join(' • '))))),
react_1.default.createElement(react_2.Stack, { horizontal: true, wrap: true, verticalAlign: "center", tokens: { childrenGap: 8 } }, isProfile ? (react_1.default.createElement(ProfileActions, { setResetOpen: setResetOpen })) : (react_1.default.createElement(UserActions, { id: id, currentUser: currentUser, setOpen: setOpen, setResetOpen: setResetOpen }))),
react_1.default.createElement(react_2.Separator, null),
react_1.default.createElement(status_bar_1.default, { controller: users.update }),
react_1.default.createElement(react_2.Pivot, { style: { marginTop: 12 }, "data-cy": "users-edit-tabs" },
react_1.default.createElement(react_2.PivotItem, { className: styles.content, headerText: "Account" },
react_1.default.createElement(react_2.Stack, { tokens: { childrenGap: 12 } },
react_1.default.createElement(react_2.Stack, { horizontal: true, tokens: { childrenGap: 12 } },
react_1.default.createElement(react_2.Stack.Item, { grow: 1 },
react_1.default.createElement(rhf_components_1.ControlledTextField, { control: control, label: "First Name", name: "firstName", autoComplete: "off", "data-cy": "users-edit-firstName" })),
react_1.default.createElement(react_2.Stack.Item, { grow: 1 },
react_1.default.createElement(rhf_components_1.ControlledTextField, { control: control, label: "Last Name", name: "lastName", autoComplete: "off", "data-cy": "users-edit-lastName" }))))),
auth.hasPermission(['users_administration']) && react_1.default.createElement(react_2.PivotItem, { headerText: "Groups", className: styles.content },
react_1.default.createElement(user_groups_1.default, { close: close, user: currentUser, groups: groups, setGroups: setGroups })))))));
};
exports.default = (0, hoc_1.withGroupsContext)(UserEdit);