Web: Client: added accessRights page with route and translations

This commit is contained in:
Nikita Gopienko 2019-10-24 09:28:11 +03:00
parent 2114c32710
commit ca69114365
5 changed files with 604 additions and 0 deletions

View File

@ -4,6 +4,7 @@ import { withRouter } from "react-router";
const CustomizationSettings = lazy(() => import("../../sub-components/common/customization"));
const NotImplementedSettings = lazy(() => import("../../sub-components/notImplementedSettings"));
const AccessRight = lazy(() => import("../../sub-components/accessRights"));
class SectionBodyContent extends React.PureComponent {
render() {
@ -14,6 +15,11 @@ class SectionBodyContent extends React.PureComponent {
path={[`${this.props.match.path}/common/customization`,`${this.props.match.path}/common`, this.props.match.path]}
component={CustomizationSettings}
/>
<Route
exact
path={`${this.props.match.path}/security/portal-access`}
component={AccessRight}
/>
<Route component={NotImplementedSettings} />
</Switch>

View File

@ -1,3 +1,43 @@
{
"PortalOwner": "Portal Owner",
"AccessRightsOwnerCan": "Portal owner can",
"AccessRightsOwnerOpportunities": "Do the same as module administrators|Appoint module administrators|Set modules access rights|Manage portal configuration|Manage user accounts|Change portal owner|Backup portal data|Deactivate or delete portal",
"AdminSettings": "Administrators",
"ProjectsProduct": "Projects",
"CrmProduct": "CRM",
"CommunityProduct": "Community",
"People": "People",
"Mail": "Mail",
"AccessRightsFullAccess": "Full access",
"DocumentsProduct": "Documents",
"AccessRightsAccessToProduct": "Access to {{product}} module is given to",
"AccessRightsProductUsersCan": "{{category}} users can",
"AccessRightsDisabledProduct": "{{module}} module is disabled and is not shown on the portal. To enable it, refer to the Modules &amp; Tools section of the Portal Settings",
"ViewProfilesAndGroups": "View profiles and groups",
"ProjectsUserCapabilityView": "View projects and take part in discussions",
"ProjectsUserCapabilityCreate": "Create and edit milestones, tasks, discussions, documents",
"ProjectsUserCapabilityTrack": "Track time for tasks, generate reports",
"ProjectsUserCapabilityForm": "Form a project team and set access rights",
"CRMUserCapabilityCreate": "Create a contact, task, case, opportunity with a possibility to limit access to them",
"CRMUserCapabilityEdit": "Edit a contact, task, case, opportunity with the access rights set up",
"CommunityUserCapability": "Create and edit milestones, tasks, discussions, documents",
"UsersFromTheList": "Users from the list",
"AllUsers": "All users",
"Sample": "Sample",
"ManageOwnMailAccounts": "Manage own mail accounts, receive and send letters",
"ManageOwnMailSettings": "Manage own Mail settings",
"ManageTheTagsAndAddressBook": "Manage the tags and address book"
}

View File

@ -1,3 +1,39 @@
{
"PortalOwner": "Владелец портала",
"AccessRightsOwnerCan": "Владелец портала может",
"AccessRightsOwnerOpportunities": "Делать то же самое, что и администраторы модулей|Назначать администраторов модулей|Задавать права доступа в модулях|Управлять настройками портала|Управлять учетными записями пользователей|Cменить владельца портала|Выполнять резервное копирование данных портала|Отключить или удалить портал",
"AdminSettings": "Администраторы",
"ProjectsProduct": "Проекты",
"CrmProduct": "CRM",
"CommunityProduct": "Сообщество",
"People": "Люди",
"Mail": "Почта",
"AccessRightsFullAccess": "Полный доступ",
"DocumentsProduct": "Документы",
"AccessRightsProductUsersCan": "В модуле {{category}} участники портала со статусом Пользователи могут",
"AccessRightsDisabledProduct": "Модуль {{module}} отключен и не отображается на портале. Чтобы включить его, обратитесь к разделу настроек портала Модули и инструменты",
"ViewProfilesAndGroups": "Просматривать профили и группы",
"AccessRightsAccessToProduct": "Доступ к модулю {{product}} предоставлен для",
"ProjectsUserCapabilityView": "Просматривать проекты и участвовать в обсуждениях",
"ProjectsUserCapabilityCreate": "Создавать и редактировать вехи, задачи, обсуждения, документы",
"ProjectsUserCapabilityTrack": "Учитывать время выполнения задач, генерировать отчеты",
"ProjectsUserCapabilityForm": "Формировать команду проекта и устанавливать права доступа",
"CRMUserCapability": "Создавать контакт, задачу, мероприятие, сделку с возможностью ограничения доступа к ним",
"CRMUserCapabilityEdit": "Редактировать контакт, задачу, мероприятие, сделку, к которым предоставлен доступ",
"CommunityUserCapability": "Создавать и редактировать свои записи в блогах, делиться новостями и т.д.",
"UsersFromTheList": "Участников со статусом Пользователи из списка",
"AllUsers": "Всех участников со статусом Пользователи",
"Sample": "Sample",
"ManageOwnMailAccounts": "Управлять своими учетными записями почты, получать и отправлять письма",
"ManageOwnMailSettings": "Управлять своими настройками Почты",
"ManageTheTagsAndAddressBook": "Управлять тегами и адресной книгой"
}

View File

@ -0,0 +1,505 @@
import React, { Component } from "react";
//import PropTypes from "prop-types";
import { connect } from "react-redux";
import {
Text,
Avatar,
ToggleContent,
Row,
RowContent,
RowContainer,
RadioButtonGroup,
//Icons,
Link,
Checkbox
//toastr,
} from "asc-web-components";
import i18n from "../i18n";
import { I18nextProvider, withTranslation } from "react-i18next";
import styled from "styled-components";
import axios from "axios";
const MainContainer = styled.div`
padding: 16px 16px 16px 24px;
width: 100%;
`;
const HeaderContainer = styled.div`
margin-bottom: 16px;
`;
const BodyContainer = styled.div`
display: flex;
align-items: flex-start;
flex-direction: row;
flex-wrap: wrap;
`;
const AvatarContainer = styled.div`
width: 330px;
height: 100px;
margin-right: 130px;
margin-bottom: 24px;
padding: 8px;
border: 1px solid grey;
`;
const ItemsContainer = styled.div`
.portal_owner {
/*margin-left: 20px;*/
}
`;
const ToggleContentContainer = styled.div`
.toggle_content {
margin-bottom: 24px;
}
`;
const ProjectsContainer = styled.div`
display: flex;
align-items: flex-start;
flex-direction: row;
flex-wrap: wrap;
.display-block {
display: block;
}
div label:not(:first-child) {
margin: 0;
}
`;
const RadioButtonContainer = styled.div`
margin-right: 180px;
margin-bottom: 16px;
width: 310px;
`;
const ProjectsBody = styled.div`
.projects_margin {
/*margin-left: 24px;*/
}
`;
class PureAccessRights extends Component {
constructor(props) {
super(props);
this.state = {
isChecked: this.props.isChecked,
adminUsers: [],
portalOwner: null
};
}
componentDidMount() {
axios
.get("http://localhost:8092/api/2.0/people")
.then(response => {
const res = response.data.response;
//console.log(res);
const array = [];
for (const item of res) {
if (item.isAdmin) {
array.push(item);
}
}
this.setState({
adminUsers: array,
portalOwner: res.find(x => x.isOwner === true)
});
//console.log("adminUsers", this.state.adminUsers);
console.log("portalOwner", this.state.portalOwner);
})
.catch(error => {
//console.log(error);
});
}
//componentDidUpdate(prevProps, prevState) {}
//componentWillUnmount() {}
onChange = e => {
//console.log(e.target.value);
//e.target.value = !e.target.value;
};
render() {
const fakeData2 = this.state.adminUsers;
//console.log("fakeData2", fakeData2);
const { t } = this.props;
const OwnerOpportunities = t("AccessRightsOwnerOpportunities").split("|");
return (
<MainContainer>
<HeaderContainer>
<Text.Body fontSize={18}>{t("PortalOwner")}</Text.Body>
</HeaderContainer>
<BodyContainer>
<AvatarContainer>
<Avatar size="big" role="owner" />
</AvatarContainer>
<ItemsContainer>
<Text.Body className="portal_owner" fontSize={12}>
{t("AccessRightsOwnerCan")}:
</Text.Body>
<Text.Body fontSize={12}>
{OwnerOpportunities.map((item, key) => (
<li key={key}>{item};</li>
))}
</Text.Body>
</ItemsContainer>
</BodyContainer>
<ToggleContentContainer>
<ToggleContent
className="toggle_content"
label={t("AdminSettings")}
isOpen={true}
>
<RowContainer manualHeight="200px">
{fakeData2.map(user => {
const element = (
<Avatar
size="small"
role="admin"
userName={user.userName}
source={user.avatar}
/>
);
const nameColor =
user.status === "pending" ? "#A3A9AE" : "#333333";
return (
<Row
key={user.id}
status={user.status}
checked={false}
data={user}
element={element}
//contextOptions={user.contextOptions}
>
<RowContent disableSideInfo={true}>
<Link
containerWidth="120px"
type="page"
title={user.userName}
isBold={true}
fontSize={15}
color={nameColor}
//href="/products/people/profile.aspx?user=administrator"
//href="/products/people/view/@self"
>
{user.userName}
</Link>
<div
/*containerWidth='120px'*/ style={{ maxWidth: 120 }}
></div>
<Checkbox
isChecked={false}
onChange={this.onChange}
id={`fullAccess_${user.id}`}
/>
<Checkbox
isChecked={false}
onChange={this.onChange}
id={`documents_${user.id}`}
/>
<Checkbox
isChecked={false}
onChange={this.onChange}
id={`projects_${user.id}`}
/>
<Checkbox
isChecked={false}
onChange={this.onChange}
id={`crm_${user.id}`}
/>
<Checkbox
isChecked={false}
onChange={this.onChange}
id={`community_${user.id}`}
/>
<Checkbox
isChecked={false}
onChange={this.onChange}
id={`people_${user.id}`}
/>
<Checkbox
isChecked={false}
onChange={this.onChange}
id={`sample_${user.id}`}
/>
<Checkbox
isChecked={false}
onChange={this.onChange}
id={`mail_${user.id}`}
/>
</RowContent>
</Row>
);
})}
</RowContainer>
</ToggleContent>
<ToggleContent
className="toggle_content"
label={t("ProjectsProduct")}
isOpen={true}
>
<ProjectsContainer>
<RadioButtonContainer>
<Text.Body>
{t("AccessRightsAccessToProduct", {
product: t("ProjectsProduct")
})}
:
</Text.Body>
<RadioButtonGroup
name="selectGroup"
selected="allUsers"
options={[
{ value: "allUsers", label: t("AllUsers") },
{
value: "usersFromTheList",
label: t("UsersFromTheList")
}
]}
className="display-block"
/>
</RadioButtonContainer>
<ProjectsBody>
<Text.Body className="projects_margin" fontSize={12}>
{t("AccessRightsProductUsersCan", {
category: t("ProjectsProduct")
})}
</Text.Body>
<Text.Body fontSize={12}>
<li>{t("ProjectsUserCapabilityView")}</li>
<li>{t("ProjectsUserCapabilityCreate")}</li>
<li>{t("ProjectsUserCapabilityTrack")}</li>
<li>{t("ProjectsUserCapabilityForm")}</li>
</Text.Body>
</ProjectsBody>
</ProjectsContainer>
</ToggleContent>
<ToggleContent
className="toggle_content"
label={t("CrmProduct")}
isOpen={true}
>
<ProjectsContainer>
<RadioButtonContainer>
<Text.Body>
{t("AccessRightsAccessToProduct", {
product: t("CrmProduct")
})}
:
</Text.Body>
<RadioButtonGroup
name="selectGroup"
selected="allUsers"
options={[
{ value: "allUsers", label: t("AllUsers") },
{
value: "usersFromTheList",
label: t("UsersFromTheList")
}
]}
className="display-block"
/>
</RadioButtonContainer>
<ProjectsBody>
<Text.Body className="projects_margin" fontSize={12}>
{t("AccessRightsProductUsersCan", {
category: t("CrmProduct")
})}
</Text.Body>
<Text.Body fontSize={12}>
<li>{t("CRMUserCapability")}</li>
<li>{t("CRMUserCapabilityEdit")}</li>
</Text.Body>
</ProjectsBody>
</ProjectsContainer>
</ToggleContent>
<ToggleContent
className="toggle_content"
label={t("CommunityProduct")}
isOpen={true}
>
<ProjectsContainer>
<RadioButtonContainer>
<Text.Body>
{t("AccessRightsAccessToProduct", {
product: t("CommunityProduct")
})}
:
</Text.Body>
<RadioButtonGroup
name="selectGroup"
selected="allUsers"
options={[
{ value: "allUsers", label: t("AllUsers") },
{
value: "usersFromTheList",
label: t("UsersFromTheList")
}
]}
className="display-block"
/>
</RadioButtonContainer>
<ProjectsBody>
<Text.Body className="projects_margin" fontSize={12}>
{t("AccessRightsProductUsersCan", {
category: t("CommunityProduct")
})}
</Text.Body>
<Text.Body fontSize={12}>
<li>{t("CommunityUserCapability")}</li>
</Text.Body>
</ProjectsBody>
</ProjectsContainer>
</ToggleContent>
<ToggleContent
className="toggle_content"
label={t("People")}
isOpen={true}
>
<ProjectsContainer>
<RadioButtonContainer>
<Text.Body>
{t("AccessRightsAccessToProduct", { product: t("People") })}:
</Text.Body>
<RadioButtonGroup
name="selectGroup"
selected="allUsers"
options={[
{ value: "allUsers", label: t("AllUsers") },
{
value: "usersFromTheList",
label: t("UsersFromTheList")
}
]}
className="display-block"
/>
</RadioButtonContainer>
<ProjectsBody>
<Text.Body className="projects_margin" fontSize={12}>
{t("AccessRightsProductUsersCan", { category: t("People") })}
</Text.Body>
<Text.Body fontSize={12}>
<li>{t("ViewProfilesAndGroups")}</li>
</Text.Body>
</ProjectsBody>
</ProjectsContainer>
</ToggleContent>
<ToggleContent
className="toggle_content"
label={t("Sample")}
isOpen={true}
>
<ProjectsContainer>
<Text.Body fontSize={12}>
{t("AccessRightsDisabledProduct", { module: "Sample" })}
</Text.Body>
</ProjectsContainer>
</ToggleContent>
<ToggleContent
className="toggle_content"
label={t("Mail")}
isOpen={true}
>
<ProjectsContainer>
<RadioButtonContainer>
<Text.Body>
{t("AccessRightsAccessToProduct", { product: t("Mail") })}:
</Text.Body>
<RadioButtonGroup
name="selectGroup"
selected="allUsers"
options={[
{ value: "allUsers", label: t("AllUsers") },
{
value: "usersFromTheList",
label: t("UsersFromTheList")
}
]}
className="display-block"
/>
</RadioButtonContainer>
<ProjectsBody>
<Text.Body className="projects_margin" fontSize={12}>
{t("AccessRightsProductUsersCan", { category: t("Mail") })}
</Text.Body>
<Text.Body fontSize={12}>
<li>{t("ManageOwnMailAccounts")}</li>
<li>{t("ManageOwnMailSettings")}</li>
<li>{t("ManageTheTagsAndAddressBook")}</li>
</Text.Body>
</ProjectsBody>
</ProjectsContainer>
</ToggleContent>
</ToggleContentContainer>
</MainContainer>
);
}
}
PureAccessRights.propTypes = {};
PureAccessRights.defaultProps = {
isChecked: false
};
const ProfileContainer = withTranslation()(PureAccessRights);
const AccessRights = props => {
const { language } = props;
i18n.changeLanguage(language);
return (
<I18nextProvider i18n={i18n}>
<ProfileContainer {...props} />
</I18nextProvider>
);
};
function mapStateToProps(state) {
console.log("state", state);
return {
//adminUsers: state.auth.isValidConfirmLink
};
}
export default connect(
mapStateToProps,
{}
)(AccessRights);
/*
<RowContentHeader>
<Text.Body>
{t("AccessRightsFullAccess")}
{t("DocumentsProduct")}
{t("ProjectsProduct")}
{t("CrmProduct")}
{t("CommunityProduct")}
{t("People")}
{t("Sample")}
{t("Mail")}
</Text.Body>
</RowContentHeader>
*/

View File

@ -53,6 +53,23 @@
"ChangePasswordSuccess",
"Remember"
]
},
"Settings": {
"Resource": [
"PortalOwner",
"AccessRightsOwnerCan",
"AccessRightsOwnerOpportunities",
"AdminSettings",
"People",
"Mail",
"AccessRightsFullAccess"
],
"FeedResource": [
"ProjectsProduct",
"CrmProduct",
"CommunityProduct",
"DocumentsProduct"
]
}
},
"Layout": {