burdy
Version:
Open Source Headless Platform
166 lines (165 loc) • 10.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 generate_password_browser_1 = __importDefault(require("generate-password-browser"));
const copy_text_to_clipboard_1 = __importDefault(require("copy-text-to-clipboard"));
const hoc_1 = require("../../../helpers/hoc");
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 user_groups_1 = __importDefault(require("./user-groups"));
const snackbar_1 = require("../../../context/snackbar");
const status_bar_1 = __importDefault(require("../../../components/status-bar"));
const useStyles = (0, react_2.makeStyles)({
content: {
paddingTop: 24,
},
mainInformation: {
marginTop: 36,
marginBottom: 24,
},
personaCoin: {
paddingRight: 20,
},
});
const schema = yup.object({
password: yup.string().min(6).required().label('Password'),
email: yup.string().email().required().label('Email'),
firstName: yup.string().label('First name'),
lastName: yup.string().label('Last name'),
});
const UserAdd = () => {
const styles = useStyles();
const [groups, setGroups] = (0, react_1.useState)([]);
const { create } = (0, users_context_1.useUsers)();
const history = (0, react_router_1.useHistory)();
const [open, setOpen] = (0, react_1.useState)(false);
const { openSnackbar } = (0, snackbar_1.useSnackbar)();
const { control, handleSubmit, setValue, getValues, watch, register } = (0, react_hook_form_1.useForm)({
resolver: (0, yup_1.yupResolver)(schema),
defaultValues: {
email: '',
firstName: '',
lastName: '',
password: '',
notify: true,
groups: [],
},
});
const [firstName, lastName, email] = watch([
'firstName',
'lastName',
'email',
]);
const close = (0, react_1.useCallback)(() => {
history.push('/users/');
}, []);
(0, react_1.useEffect)(() => {
register('groups');
setOpen(true);
}, []);
(0, react_1.useEffect)(() => {
setValue('groups', groups.map((g) => g.id));
}, [groups]);
const submit = handleSubmit((data) => __awaiter(void 0, void 0, void 0, function* () {
try {
yield create.execute(data);
setOpen(false);
openSnackbar({
message: `User "${data.email}" successfully created.`,
messageBarType: react_2.MessageBarType.success,
});
}
catch (e) {
//
}
}));
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-add-submit", onClick: submit }, "Create"),
react_1.default.createElement(react_2.DefaultButton, { onClick: () => setOpen(false) }, "Cancel"))), []);
return (react_1.default.createElement(react_2.Panel, { isOpen: open, headerText: "Profile", isFooterAtBottom: true, onRenderFooterContent: renderFooterContent, onDismiss: () => setOpen(false), onDismissed: close, type: react_2.PanelType.medium },
react_1.default.createElement(loading_bar_1.default, { loading: false },
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" }, email),
react_1.default.createElement(react_2.Text, { variant: "small" }, groups.map((group) => group === null || group === void 0 ? void 0 : group.name).join(' • '))))),
react_1.default.createElement(react_2.Pivot, { "data-cy": "users-add-tabs" },
react_1.default.createElement(react_2.PivotItem, { className: styles.content, headerText: "Account" },
react_1.default.createElement(react_2.Stack, { tokens: { childrenGap: 24 }, style: { width: '100%' } },
react_1.default.createElement(status_bar_1.default, { controller: create }),
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-add-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-add-lastName" }))),
react_1.default.createElement(rhf_components_1.ControlledTextField, { control: control, label: "Email", name: "email", autoComplete: "off", "data-cy": "users-add-email" }),
react_1.default.createElement(react_2.Stack, null,
react_1.default.createElement(rhf_components_1.ControlledTextField, { control: control, label: "Password", type: "text", name: "password", autoComplete: "off", "data-cy": "users-add-password", 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, { control: control, label: "Send email to user", name: "notify", styles: {
root: {
marginTop: 12,
},
} })))),
react_1.default.createElement(react_2.PivotItem, { headerText: "Groups", className: styles.content },
react_1.default.createElement(user_groups_1.default, { setGroups: setGroups, groups: groups, close: close })))))));
};
exports.default = (0, hoc_1.withGroupsContext)(UserAdd);