@gpa-gemstone/common-pages 0.0.14

package/lib/user/User.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { Application, SystemCenter } from '@gpa-gemstone/application-typings';
+import { IAdditionalFieldSlice, IGenericSlice, ISecurityRoleSlice, IUserAccountSlice } from '../SliceInterfaces';
+interface IProps {
+    UserID: string;
+    OnDelete: () => void;
+    SecurityRoleSlice: ISecurityRoleSlice;
+    UserSlice: IUserAccountSlice;
+    AdditionalFieldSlice: IAdditionalFieldSlice<Application.Types.iAdditionalUserField, Application.Types.iAdditionalUserFieldValue>;
+    ValueListItemSlice: IGenericSlice<SystemCenter.Types.ValueListItem>;
+    ValueListGroupSlice: IGenericSlice<SystemCenter.Types.ValueListGroup>;
+}
+declare function User(props: IProps): JSX.Element;
+export default User;

package/lib/user/User.js

@@ -0,0 +1,71 @@
+"use strict";
+// ******************************************************************************************************
+//  User.tsx - Gbtc
+//
+//  Copyright © 2020, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  07/14/2021 - C. Lackner
+//       Generated original version of source code.
+// ******************************************************************************************************
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var react_interactive_1 = require("@gpa-gemstone/react-interactive");
+var UserInfo_1 = require("./UserInfo");
+var UserPermissions_1 = require("./UserPermissions");
+var AdditionalField_1 = require("./AdditionalField");
+var react_redux_1 = require("react-redux");
+var react_forms_1 = require("@gpa-gemstone/react-forms");
+function User(props) {
+    var dispatch = react_redux_1.useDispatch();
+    var user = react_redux_1.useSelector(props.UserSlice.CurrentUser);
+    var status = react_redux_1.useSelector(props.UserSlice.Status);
+    var _a = React.useState('userInfo'), tab = _a[0], setTab = _a[1];
+    var _b = React.useState(false), showWarning = _b[0], setShowWarning = _b[1];
+    React.useEffect(function () {
+        dispatch(props.UserSlice.LoadExistingUser(props.UserID));
+    }, [dispatch, props.UserID]);
+    if (status === 'error')
+        return React.createElement("div", { style: { width: '100%', height: '100%' } },
+            React.createElement(react_interactive_1.ServerErrorIcon, { Show: true, Label: 'A Server Error Occured. Please Reload the Application' }));
+    var Tabs = [
+        { Id: "userInfo", Label: "User Info" },
+        { Id: "permissions", Label: "Permissions" },
+        { Id: "additionalFields", Label: "Additional Fields" }
+    ];
+    return (React.createElement("div", { style: { width: '100%', height: window.innerHeight - 63, maxHeight: window.innerHeight - 63, overflow: 'hidden', padding: 15 } },
+        React.createElement("div", { className: "row" },
+            React.createElement("div", { className: "col" },
+                React.createElement("h2", null, user != null ? user.FirstName + " " + user.LastName : '')),
+            React.createElement("div", { className: "col" },
+                React.createElement("button", { className: "btn btn-danger pull-right", hidden: user == null, onClick: function () { return setShowWarning(true); } }, "Delete User"))),
+        React.createElement(react_interactive_1.LoadingScreen, { Show: status === 'loading' }),
+        React.createElement("hr", null),
+        React.createElement(react_interactive_1.TabSelector, { CurrentTab: tab, SetTab: function (t) { return setTab(t); }, Tabs: Tabs }),
+        React.createElement("div", { className: "tab-content", style: { maxHeight: window.innerHeight - 235, overflow: 'hidden' } },
+            React.createElement("div", { className: "tab-pane " + (tab === "userInfo" ? " active" : "fade") },
+                React.createElement(UserInfo_1.default, { UserSlice: props.UserSlice })),
+            React.createElement("div", { className: "tab-pane " + (tab === "permissions" ? " active" : "fade") }, user == null ? null : React.createElement(UserPermissions_1.default, { UserID: user.ID, RoleSlice: props.SecurityRoleSlice })),
+            React.createElement("div", { className: "tab-pane " + (tab === "additionalFields" ? " active" : "fade"), style: { maxHeight: window.innerHeight - 215 } },
+                React.createElement(AdditionalField_1.default, { Id: props.UserID, AdditionalFieldSlice: props.AdditionalFieldSlice, ValueListItemSlice: props.ValueListItemSlice, ValueListGroupSlice: props.ValueListGroupSlice, EmptyField: { ID: -1, IsSecure: false, FieldName: '', Type: 'string' }, GetFieldValueIndex: function (field, values) { return values.findIndex(function (v) { return v.AdditionalUserFieldID === field.ID; }); }, GetFieldIndex: function (value, fields) { return fields.findIndex(function (f) { return f.ID === value.AdditionalUserFieldID; }); }, FieldKeySelector: function (field) { return (field.ID === -1 ? 'new' : field.ID.toString()); }, ValidateField: function () { return []; }, FieldUI: function (fld, setter) { return React.createElement(react_forms_1.CheckBox, { Record: fld, Field: 'IsSecure', Label: "Secure Data", Setter: setter }); }, CreateValue: function (fld) { return ({ Value: '', ID: -1, UserAccountID: props.UserID, AdditionalUserFieldID: fld.ID }); } }))),
+        React.createElement(react_interactive_1.Warning, { Message: 'This will permanently remove the User. Are you sure you want to continue?', Title: 'Warning', Show: showWarning, CallBack: function (c) {
+                setShowWarning(false);
+                if (c) {
+                    dispatch(props.UserSlice.DBAction({ verb: 'DELETE', record: user }));
+                    props.OnDelete();
+                }
+            } })));
+}
+exports.default = User;

package/lib/user/UserForm.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { Application } from '@gpa-gemstone/application-typings';
+import { IUserAccountSlice } from '../SliceInterfaces';
+interface IProps {
+    UserAccount: Application.Types.iUserAccount;
+    Setter: (record: Application.Types.iUserAccount) => void;
+    Edit: boolean;
+    SetErrors?: (e: string[]) => void;
+    UserSlice: IUserAccountSlice;
+}
+declare function UserForm(props: IProps): JSX.Element | null;
+export default UserForm;

package/lib/user/UserForm.js

@@ -0,0 +1,141 @@
+"use strict";
+// ******************************************************************************************************
+//  UserForm.tsx - Gbtc
+//
+//  Copyright © 2020, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  07/14/2021 - C. Lackner
+//       Generated original version of source code.
+// ******************************************************************************************************
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var react_forms_1 = require("@gpa-gemstone/react-forms");
+var _ = require("lodash");
+var react_redux_1 = require("react-redux");
+function UserForm(props) {
+    var dispatch = react_redux_1.useDispatch();
+    var _a = React.useState(false), updatedAD = _a[0], setUpdatedAD = _a[1];
+    var userValidation = react_redux_1.useSelector(props.UserSlice.ADValidation);
+    var _b = React.useState([]), userError = _b[0], setUserError = _b[1];
+    React.useEffect(function () {
+        if (userValidation === 'Valid' && !props.Edit && updatedAD === false)
+            dispatch(props.UserSlice.ADUpdate());
+    }, [userValidation, updatedAD]);
+    React.useEffect(function () {
+        if (props.SetErrors !== undefined)
+            props.SetErrors(userError);
+    }, [userError, props.SetErrors]);
+    React.useEffect(function () {
+        if (props.UserAccount == null)
+            return;
+        var e = [];
+        if (props.UserAccount.Name == null || props.UserAccount.Name.length === 0)
+            e.push('An AccountName is required.');
+        if (props.UserAccount.UseADAuthentication && userValidation !== 'Valid')
+            e.push('The user could not be validated by the AD.');
+        setUserError(e);
+    }, [props.UserAccount, userValidation]);
+    function validUserAccountField(user, field) {
+        if (field === 'Name')
+            return user.Name != null && user.Name.length > 0 && user.Name.length <= 200;
+        else if (field === 'Password')
+            return user.Password == null || user.Password.length <= 200;
+        else if (field === 'FirstName')
+            return user.FirstName == null || user.FirstName.length <= 200;
+        else if (field === 'LastName')
+            return user.LastName == null || user.LastName.length <= 200;
+        else if (field === 'Phone')
+            return user.Phone == null || user.Phone.length <= 200;
+        else if (field === 'Email')
+            return user.Email == null || user.Email.length <= 200;
+        return false;
+    }
+    if (props.UserAccount == null)
+        return null;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("form", null,
+            React.createElement("div", { className: "row" },
+                React.createElement("div", { className: "col" },
+                    React.createElement(react_forms_1.Input, { Record: props.UserAccount, Disabled: props.Edit, Field: 'Name', Feedback: 'A Name of less than 200 characters is required.', Valid: function (field) { return validUserAccountField(props.UserAccount, field); }, Setter: function (record) {
+                            setUpdatedAD(false);
+                            props.Setter(record);
+                        } }),
+                    React.createElement("div", { className: "row", style: { position: 'absolute', top: 0, left: 100 }, hidden: !props.UserAccount.UseADAuthentication },
+                        React.createElement("span", { id: "resolvingAccount", hidden: userValidation !== 'Resolving' },
+                            React.createElement("i", { style: { height: 10, width: 10, color: 'grey' }, className: "fa fa fa-spin fa-refresh" }),
+                            "\u00A0",
+                            React.createElement("em", { className: "small" }, "Resolving account details...")),
+                        React.createElement("span", { id: "accountValid", hidden: userValidation !== 'Valid' },
+                            React.createElement("i", { style: { height: 20, width: 20, color: 'green' }, className: "fa fa-check-circle" }),
+                            "\u00A0",
+                            React.createElement("em", { className: "small" }, "Resolved account name ")),
+                        React.createElement("span", { id: "accountInvalid", hidden: userValidation !== 'Invalid' },
+                            React.createElement("i", { style: { height: 20, width: 20, color: 'red' }, className: "fa fa-times-circle" }),
+                            "\u00A0",
+                            React.createElement("em", { className: "small" }, "Cannot resolve account name")),
+                        React.createElement("span", { id: "accountUnknown", hidden: userValidation !== 'Unknown' },
+                            React.createElement("i", { style: { height: 20, width: 20, color: 'orange' }, className: "fa fa-exclamation-circle" }),
+                            "\u00A0",
+                            React.createElement("em", { className: "small" }, "Valid account name is not a user or Active Directory access is limited"))),
+                    React.createElement("button", { style: { marginBottom: 10 }, type: "button", className: "btn btn-primary btn-sm", onClick: function (evt) { evt.preventDefault(); dispatch(props.UserSlice.ADUpdate()); }, hidden: userValidation !== 'Valid' || !props.Edit }, "Load Information from AD"),
+                    React.createElement("div", { className: "card" },
+                        React.createElement("div", { className: "card-header" },
+                            React.createElement("div", { className: "row" },
+                                React.createElement("div", { className: "col-xs-4" },
+                                    React.createElement("div", { className: "form-check-inline" },
+                                        React.createElement("label", { className: "form-check-label" },
+                                            React.createElement("input", { disabled: props.Edit, className: 'form-check-input', type: 'radio', checked: props.UserAccount.UseADAuthentication, onChange: function (e) {
+                                                    var record = _.clone(props.UserAccount);
+                                                    record.UseADAuthentication = e.target.checked;
+                                                    props.Setter(record);
+                                                } }),
+                                            "Active Directory User"))),
+                                React.createElement("div", { className: "col-xs-4" },
+                                    React.createElement("div", { className: "form-check-inline" },
+                                        React.createElement("label", { className: "form-check-label" },
+                                            React.createElement("input", { disabled: props.Edit, className: 'form-check-input', type: 'radio', checked: !props.UserAccount.UseADAuthentication, onChange: function (e) {
+                                                    var record = _.clone(props.UserAccount);
+                                                    record.UseADAuthentication = !e.target.checked;
+                                                    props.Setter(record);
+                                                } }),
+                                            "Database User"))))),
+                        React.createElement("div", { className: "card-body", hidden: !props.UserAccount.UseADAuthentication },
+                            React.createElement("div", { className: "row" },
+                                React.createElement("div", { className: "col" },
+                                    React.createElement(react_forms_1.Input, { Record: props.UserAccount, Field: 'FirstName', Label: 'First Name', Feedback: 'First Name must be less than 200 characters.', Valid: function (field) { return validUserAccountField(props.UserAccount, field); }, Setter: props.Setter }),
+                                    React.createElement(react_forms_1.Input, { Record: props.UserAccount, Field: 'LastName', Label: 'Last Name', Feedback: 'Last Name must be less than 200 characters.', Valid: function (field) { return validUserAccountField(props.UserAccount, field); }, Setter: props.Setter })),
+                                React.createElement("div", { className: "col" },
+                                    React.createElement(react_forms_1.Input, { Record: props.UserAccount, Field: 'Phone', Feedback: 'Phone must be less than 200 characters.', Valid: function (field) { return validUserAccountField(props.UserAccount, field); }, Setter: props.Setter }),
+                                    React.createElement(react_forms_1.Input, { Record: props.UserAccount, Field: 'Email', Feedback: 'Email must be less than 200 characters.', Valid: function (field) { return validUserAccountField(props.UserAccount, field); }, Setter: props.Setter })))),
+                        React.createElement("div", { className: "card-body", hidden: props.UserAccount.UseADAuthentication },
+                            React.createElement("div", { className: "row" },
+                                React.createElement("div", { className: "col" },
+                                    React.createElement(react_forms_1.Input, { Record: props.UserAccount, Field: 'Password', Feedback: 'Password must be less than 200 characters.', Type: 'password', Valid: function (field) { return validUserAccountField(props.UserAccount, field); }, Setter: props.Setter }),
+                                    React.createElement(react_forms_1.Input, { Record: props.UserAccount, Field: 'FirstName', Label: 'First Name', Feedback: 'First Name must be less than 200 characters.', Valid: function (field) { return validUserAccountField(props.UserAccount, field); }, Setter: props.Setter }),
+                                    React.createElement(react_forms_1.Input, { Record: props.UserAccount, Field: 'LastName', Label: 'Last Name', Feedback: 'Last Name must be less than 200 characters.', Valid: function (field) { return validUserAccountField(props.UserAccount, field); }, Setter: props.Setter })),
+                                React.createElement("div", { className: "col" },
+                                    React.createElement(react_forms_1.Input, { Record: props.UserAccount, Field: 'Phone', Feedback: 'Password must be less than 200 characters.', Valid: function (field) { return validUserAccountField(props.UserAccount, field); }, Setter: props.Setter }),
+                                    React.createElement(react_forms_1.Input, { Record: props.UserAccount, Field: 'Email', Feedback: 'Password must be less than 200 characters.', Valid: function (field) { return validUserAccountField(props.UserAccount, field); }, Setter: props.Setter }),
+                                    React.createElement(react_forms_1.DatePicker, { Record: props.UserAccount, Field: 'ChangePasswordOn', Label: 'Change Password On', Setter: props.Setter })))),
+                        React.createElement("div", { className: "row" },
+                            React.createElement("div", { className: "col", style: { margin: 10 } },
+                                React.createElement(react_forms_1.CheckBox, { Record: props.UserAccount, Label: 'Locked Out', Field: 'LockedOut', Setter: props.Setter }),
+                                React.createElement(react_forms_1.CheckBox, { Record: props.UserAccount, Field: 'Approved', Setter: props.Setter })),
+                            React.createElement("div", { className: "col-lg-6" },
+                                React.createElement(react_forms_1.CheckBox, { Record: props.UserAccount, Label: 'Phone Confirmed', Field: 'PhoneConfirmed', Setter: props.Setter }),
+                                React.createElement(react_forms_1.CheckBox, { Record: props.UserAccount, Label: 'Email Confirmed', Field: 'EmailConfirmed', Setter: props.Setter })))))))));
+}
+exports.default = UserForm;

package/lib/user/UserInfo.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { IUserAccountSlice } from '../SliceInterfaces';
+interface IProps {
+    UserSlice: IUserAccountSlice;
+}
+declare function UserInfo(props: IProps): JSX.Element;
+export default UserInfo;

package/lib/user/UserInfo.js

@@ -0,0 +1,97 @@
+"use strict";
+// ******************************************************************************************************
+//  UserInfo.tsx - Gbtc
+//
+//  Copyright © 2020, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  07/14/2021 - C. Lackner
+//       Generated original version of source code.
+// ******************************************************************************************************
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var CryptoJS = require("crypto-js");
+var UserForm_1 = require("./UserForm");
+var react_interactive_1 = require("@gpa-gemstone/react-interactive");
+var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
+var react_redux_1 = require("react-redux");
+function UserInfo(props) {
+    var dispatch = react_redux_1.useDispatch();
+    var currentUser = react_redux_1.useSelector(props.UserSlice.CurrentUser);
+    var _a = React.useState(currentUser), user = _a[0], setUser = _a[1];
+    var _b = React.useState([]), warnings = _b[0], setWarning = _b[1];
+    var _c = React.useState('None'), hover = _c[0], setHover = _c[1];
+    React.useEffect(function () {
+        if (currentUser == null || user == null)
+            return;
+        var encryptedPwd = (user.Password !== currentUser.Password ? CryptoJS.SHA256(user.Password + "0").toString(CryptoJS.enc.Base64) : user.Password);
+        var w = [];
+        if (currentUser.FirstName !== user.FirstName)
+            w.push('Changes to First Name will be lost.');
+        if (currentUser.LastName !== user.LastName)
+            w.push('Changes to Last Name will be lost.');
+        if (currentUser.Phone !== user.Phone)
+            w.push('Changes to Phone will be lost.');
+        if (currentUser.Email !== user.Email)
+            w.push('Changes to Email will be lost.');
+        if (currentUser.ChangePasswordOn !== user.ChangePasswordOn)
+            w.push('Changes to Change Password Date will be lost.');
+        if (currentUser.LockedOut !== user.LockedOut)
+            w.push('Changes to Account Locked Status will be lost.');
+        if (currentUser.Approved !== user.Approved)
+            w.push('Changes Account Approved Status will be lost.');
+        if (currentUser.PhoneConfirmed !== user.PhoneConfirmed)
+            w.push('Changes to Phone Confirmed Status will be lost.');
+        if (currentUser.EmailConfirmed !== user.EmailConfirmed)
+            w.push('Changes to Email confirmed Status will be lost.');
+        if (!currentUser.UseADAuthentication && currentUser.Password !== encryptedPwd)
+            w.push('Changes to Password will be lost.');
+        setWarning(w);
+    }, [currentUser, user]);
+    React.useEffect(function () { setUser(currentUser); }, [currentUser]);
+    function updateUser() {
+        var encryptedPwd = (user.Password !== currentUser.Password ? CryptoJS.SHA256(user.Password + "0").toString(CryptoJS.enc.Base64) : user.Password);
+        dispatch(props.UserSlice.SetCurrentUser(__assign(__assign({}, user), { Name: currentUser.Name, Password: encryptedPwd })));
+        dispatch(props.UserSlice.DBAction({ verb: 'PATCH', record: __assign(__assign({}, user), { Name: currentUser.Name, Password: encryptedPwd }) }));
+    }
+    return (React.createElement("div", { className: "card", style: { marginBottom: 10 } },
+        React.createElement("div", { className: "card-header" },
+            React.createElement("div", { className: "row" },
+                React.createElement("div", { className: "col" },
+                    React.createElement("h4", null, "User Information:")))),
+        React.createElement("div", { className: "card-body", style: { height: window.innerHeight - 440, maxHeight: window.innerHeight - 440, overflowY: 'auto' } },
+            React.createElement(UserForm_1.default, { UserAccount: user, Setter: function (u) { return setUser(u); }, Edit: true, UserSlice: props.UserSlice })),
+        React.createElement("div", { className: "card-footer" },
+            React.createElement("div", { className: "btn-group mr-2" },
+                React.createElement("button", { className: "btn btn-primary", onClick: function () { return updateUser(); }, disabled: warnings.length === 0 }, "Update")),
+            React.createElement("div", { className: "btn-group mr-2" },
+                React.createElement("button", { className: "btn btn-default", onClick: function () { return setUser(currentUser); }, disabled: warnings.length === 0, "data-tooltip": 'Clr', onMouseEnter: function () { return setHover('Clear'); }, onMouseLeave: function () { return setHover('None'); } }, "Reset")),
+            React.createElement(react_interactive_1.ToolTip, { Show: hover === 'Clear' && (warnings.length > 0), Position: 'top', Theme: 'dark', Target: "Clr" }, warnings.map(function (t, i) { return React.createElement("p", { key: i },
+                gpa_symbols_1.Warning,
+                " ",
+                t); })))));
+}
+exports.default = UserInfo;

package/lib/user/UserPermissions.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ISecurityRoleSlice } from '../SliceInterfaces';
+interface IProps {
+    UserID: string;
+    RoleSlice: ISecurityRoleSlice;
+}
+declare function UserPermission(props: IProps): JSX.Element;
+export default UserPermission;

package/lib/user/UserPermissions.js

@@ -0,0 +1,83 @@
+"use strict";
+// ******************************************************************************************************
+//  UserPermission.tsx - Gbtc
+//
+//  Copyright © 2020, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  07/14/2021 - C. Lackner
+//       Generated original version of source code.
+// ******************************************************************************************************
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var _ = require("lodash");
+var react_forms_1 = require("@gpa-gemstone/react-forms");
+var react_redux_1 = require("react-redux");
+function UserPermission(props) {
+    var dispatch = react_redux_1.useDispatch();
+    var currentRoles = react_redux_1.useSelector(props.RoleSlice.Roles);
+    var allRoleStatus = react_redux_1.useSelector(props.RoleSlice.Status);
+    var availableRoles = react_redux_1.useSelector(props.RoleSlice.AvailableRoles);
+    var currentRoleStatus = react_redux_1.useSelector(props.RoleSlice.CurrentRoleStatus);
+    var _a = React.useState([]), workingRoles = _a[0], setWorkingRoles = _a[1];
+    var _b = React.useState(false), changed = _b[0], setChanged = _b[1];
+    React.useEffect(function () {
+        if (allRoleStatus === 'unintiated' || allRoleStatus === 'changed')
+            dispatch(props.RoleSlice.FetchRoles());
+    }, [dispatch, allRoleStatus]);
+    React.useEffect(function () {
+        if (currentRoleStatus === 'unintiated' || currentRoleStatus === 'changed')
+            dispatch(props.RoleSlice.FetchUserRoles(props.UserID));
+    }, [dispatch, currentRoleStatus, props.UserID]);
+    React.useEffect(function () {
+        resetCurrentRoles(availableRoles, currentRoles);
+    }, [currentRoles, availableRoles]);
+    function resetCurrentRoles(avRoles, currRoles) {
+        setChanged(false);
+        setWorkingRoles(avRoles.map(function (src) {
+            var upd = _.cloneDeep(src);
+            upd.Assigned = currRoles.find(function (usrc) { return usrc.ApplicationRoleID === upd.ID; }) !== undefined;
+            return upd;
+        }));
+    }
+    return (React.createElement("div", { className: "card", style: { marginBottom: 10 } },
+        React.createElement("div", { className: "card-header" },
+            React.createElement("div", { className: "row" },
+                React.createElement("div", { className: "col" },
+                    React.createElement("h4", null, "User Permissions:")))),
+        React.createElement("div", { className: "card-body" },
+            React.createElement("div", { className: "row" },
+                React.createElement("div", { className: "col" },
+                    React.createElement("fieldset", { className: "border", style: { padding: '10px', height: '100%' } },
+                        React.createElement("legend", { className: "w-auto", style: { fontSize: 'large' } }, "System Center:"),
+                        React.createElement("form", null, workingRoles.map(function (scr, i, array) { return React.createElement(react_forms_1.CheckBox, { key: scr.ID, Record: scr, Field: 'Assigned', Label: scr.Name, Setter: function (record) {
+                                scr.Assigned = record.Assigned;
+                                var newArray = _.clone(array);
+                                setWorkingRoles(newArray);
+                                setChanged(true);
+                            } }); })))),
+                React.createElement("div", { className: "col" }))),
+        React.createElement("div", { className: "card-footer" },
+            React.createElement("div", { className: "btn-group mr-2" },
+                React.createElement("button", { className: "btn btn-primary", onClick: function () {
+                        return dispatch(props.RoleSlice.SetUserRoles({
+                            UserId: props.UserID,
+                            Roles: workingRoles.filter(function (scr) { return scr.Assigned; }).map(function (scr) { return ({ ID: '00000000-0000-0000-0000-000000000000', ApplicationRoleID: scr.ID, UserAccountID: props.UserID }); })
+                        }));
+                    }, disabled: !changed }, "Update")),
+            React.createElement("div", { className: "btn-group mr-2" },
+                React.createElement("button", { className: "btn btn-default", onClick: function () { return resetCurrentRoles(availableRoles, currentRoles); }, disabled: !changed }, "Reset")))));
+}
+exports.default = UserPermission;

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@gpa-gemstone/common-pages",
+  "version": "0.0.14",
+  "description": "Common UI pages for GPA products",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib/**/*"
+  ],
+  "scripts": {
+    "test": "jest --config jestconfig.json",
+    "build": "tsc",
+    "format": "prettier --write \"src/**/*.tsx\"",
+    "lint": "tslint -p tsconfig.json",
+    "prepare": "npm run build",
+    "prepublishOnly": "npm test && npm run lint",
+    "preversion": "npm run lint",
+    "version": "npm run format && git add -A src",
+    "postversion": "git push && git push --tags"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GridProtectionAlliance/gpa-gemstone.git"
+  },
+  "keywords": [
+    "React",
+    "Interactive",
+    "GSF",
+    "Gemstone",
+    "GridProtectionAlliance"
+  ],
+  "author": "GridProtectionAlliance",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/GridProtectionAlliance/gpa-gemstone/issues"
+  },
+  "homepage": "https://github.com/GridProtectionAlliance/gpa-gemstone#readme",
+  "devDependencies": {
+    "@types/jest": "^26.0.4",
+    "jest": "^27.0.6",
+    "prettier": "^2.3.2",
+    "ts-jest": "^27.0.3",
+    "tslint": "^6.1.3",
+    "tslint-config-prettier": "^1.18.0",
+    "typescript": "4.3.4",
+    "@types/jquery": "3.5.6",
+    "@types/crypto-js": "4.0.2"
+  },
+  "dependencies": {
+    "@gpa-gemstone/application-typings": "0.0.26",
+    "@gpa-gemstone/gpa-symbols": "0.0.13",
+    "@gpa-gemstone/react-forms": "1.1.12",
+    "@gpa-gemstone/react-interactive": "1.0.17",
+    "@gpa-gemstone/react-table": "1.2.4",
+    "@gpa-gemstone/helper-functions": "0.0.8",
+    "moment": "^2.29.1",
+    "react": "^17.0.2",
+    "styled-components": "^5.3.0",
+    "crypto-js": "4.0.0",
+    "react-redux": "7.2.4",
+    "@reduxjs/toolkit": "1.6.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}