Merge branch 'feature/virtual-rooms-1.2' of github.com:ONLYOFFICE/AppServer into feature/trusted-mail
This commit is contained in:
commit
1cb67aacdb
@ -117,6 +117,7 @@
|
|||||||
"ServiceUrl": "Service Url",
|
"ServiceUrl": "Service Url",
|
||||||
"StudioTimeLanguageSettings": "Language and Time Zone Settings",
|
"StudioTimeLanguageSettings": "Language and Time Zone Settings",
|
||||||
"SuccessfullySaveGreetingSettingsMessage": "Welcome Page settings have been successfully saved",
|
"SuccessfullySaveGreetingSettingsMessage": "Welcome Page settings have been successfully saved",
|
||||||
|
"SuccessfullySavePortalNameMessage": "Portal has been renamed successfully",
|
||||||
"SuccessfullySaveSettingsMessage": "Settings have been successfully updated",
|
"SuccessfullySaveSettingsMessage": "Settings have been successfully updated",
|
||||||
"TeamTemplate": "Team template",
|
"TeamTemplate": "Team template",
|
||||||
"TeamTemplateSettingsDescription": "Team Template is a customizable way to name the organization (or group), its members and their activities. Drop down the Template list to choose one of the available presets or enter the names yourselves selecting the custom option from the list.",
|
"TeamTemplateSettingsDescription": "Team Template is a customizable way to name the organization (or group), its members and their activities. Drop down the Template list to choose one of the available presets or enter the names yourselves selecting the custom option from the list.",
|
||||||
|
@ -1,12 +1,28 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import { withTranslation } from "react-i18next";
|
import { withTranslation } from "react-i18next";
|
||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
import Loader from "@appserver/components/loader";
|
import Loader from "@appserver/components/loader";
|
||||||
|
import toastr from "@appserver/components/toast/toastr";
|
||||||
import HelpButton from "@appserver/components/help-button";
|
import HelpButton from "@appserver/components/help-button";
|
||||||
import FieldContainer from "@appserver/components/field-container";
|
import FieldContainer from "@appserver/components/field-container";
|
||||||
import TextInput from "@appserver/components/text-input";
|
import TextInput from "@appserver/components/text-input";
|
||||||
import SaveCancelButtons from "@appserver/components/save-cancel-buttons";
|
import SaveCancelButtons from "@appserver/components/save-cancel-buttons";
|
||||||
import { inject, observer } from "mobx-react";
|
import { inject, observer } from "mobx-react";
|
||||||
|
import { combineUrl } from "@appserver/common/utils";
|
||||||
|
import { AppServerConfig } from "@appserver/common/constants";
|
||||||
|
import config from "../../../../../../../package.json";
|
||||||
|
import history from "@appserver/common/history";
|
||||||
|
import { isMobileOnly } from "react-device-detect";
|
||||||
|
import Text from "@appserver/components/text";
|
||||||
|
import Link from "@appserver/components/link";
|
||||||
|
import { isSmallTablet } from "@appserver/components/utils/device";
|
||||||
|
import checkScrollSettingsBlock from "../utils";
|
||||||
|
import {
|
||||||
|
StyledSettingsComponent,
|
||||||
|
StyledScrollbar,
|
||||||
|
StyledArrowRightIcon,
|
||||||
|
} from "./StyledSettings";
|
||||||
|
import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
|
||||||
|
|
||||||
const StyledComponent = styled.div`
|
const StyledComponent = styled.div`
|
||||||
.settings-block {
|
.settings-block {
|
||||||
@ -20,51 +36,229 @@ const StyledComponent = styled.div`
|
|||||||
.combo-button-label {
|
.combo-button-label {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 14px;
|
||||||
|
color: #f21c0e;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const PortalRenaming = ({ t, theme, sectionWidth }) => {
|
const PortalRenaming = ({ t, setPortalRename, isMobileView }) => {
|
||||||
// TODO: Change false
|
// TODO: Change false
|
||||||
const [isLoadedData, setIsLoadedData] = useState(true);
|
const [isLoadedData, setIsLoadedData] = useState(true);
|
||||||
const [portalName, setPortalName] = useState();
|
const [isLoadingPortalNameSave, setIsLoadingPortalNameSave] = useState(false);
|
||||||
|
|
||||||
|
const portalNameFromSessionStorage = getFromSessionStorage("portalName");
|
||||||
|
const portalNameDefaultFromSessionStorage = getFromSessionStorage(
|
||||||
|
"portalNameDefault"
|
||||||
|
);
|
||||||
|
|
||||||
|
const errorValueFromSessionStorage = getFromSessionStorage("errorValue");
|
||||||
|
|
||||||
|
const [portalName, setPortalName] = useState(portalNameFromSessionStorage);
|
||||||
|
const [portalNameDefault, setPortalNameDefault] = useState(
|
||||||
|
portalNameDefaultFromSessionStorage || portalName
|
||||||
|
);
|
||||||
|
|
||||||
|
const [showReminder, setShowReminder] = useState(false);
|
||||||
|
const [hasScroll, setHasScroll] = useState(false);
|
||||||
|
const [errorValue, setErrorValue] = useState(errorValueFromSessionStorage);
|
||||||
|
|
||||||
|
//TODO: Add translation
|
||||||
|
const accountNameError = "Account name is empty";
|
||||||
|
const lengthNameError =
|
||||||
|
"The account name must be between 6 and 50 characters long";
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const checkScroll = checkScrollSettingsBlock();
|
||||||
|
|
||||||
|
window.addEventListener("resize", checkInnerWidth);
|
||||||
|
window.addEventListener("resize", checkScroll);
|
||||||
|
|
||||||
|
const scrollPortalName = checkScroll();
|
||||||
|
|
||||||
|
if (scrollPortalName !== hasScroll) {
|
||||||
|
setHasScroll(scrollPortalName);
|
||||||
|
}
|
||||||
|
|
||||||
|
return () =>
|
||||||
|
window.removeEventListener(
|
||||||
|
"resize",
|
||||||
|
checkInnerWidth,
|
||||||
|
checkScrollSettingsBlock
|
||||||
|
);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
//TODO: Need a method to get the portal name
|
||||||
const onSavePortalRename = () => {
|
const onSavePortalRename = () => {
|
||||||
// setPortalRename("waw");
|
setIsLoadingPortalNameSave(true);
|
||||||
|
|
||||||
|
setPortalRename(portalName)
|
||||||
|
.then(() => toastr.success(t("SuccessfullySavePortalNameMessage")))
|
||||||
|
.catch((error) => {
|
||||||
|
//TODO: Add translation
|
||||||
|
setErrorValue("Incorrect account name");
|
||||||
|
saveToSessionStorage("errorValue", "Incorrect account name");
|
||||||
|
})
|
||||||
|
.finally(() => setIsLoadingPortalNameSave(false));
|
||||||
|
|
||||||
|
setShowReminder(false);
|
||||||
|
setPortalName(portalName);
|
||||||
|
setPortalNameDefault(portalName);
|
||||||
|
|
||||||
|
saveToSessionStorage("portalName", portalName);
|
||||||
|
saveToSessionStorage("portalNameDefault", portalName);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const onCancelPortalName = () => {
|
||||||
|
const portalNameFromSessionStorage = getFromSessionStorage("portalName");
|
||||||
|
|
||||||
|
if (
|
||||||
|
portalNameFromSessionStorage &&
|
||||||
|
!settingIsEqualInitialValue("portalName", portalNameFromSessionStorage)
|
||||||
|
) {
|
||||||
|
setPortalName(portalNameDefault);
|
||||||
|
saveToSessionStorage("portalName", "");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onValidateInput = (value) => {
|
||||||
|
switch (true) {
|
||||||
|
case value === "":
|
||||||
|
setErrorValue(accountNameError);
|
||||||
|
saveToSessionStorage("errorValue", accountNameError);
|
||||||
|
break;
|
||||||
|
case value.length < 6 || value.length > 50:
|
||||||
|
setErrorValue(lengthNameError);
|
||||||
|
saveToSessionStorage("errorValue", lengthNameError);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
setErrorValue("");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const settingIsEqualInitialValue = (value) => {
|
||||||
|
const defaultValue = JSON.stringify(portalNameDefault);
|
||||||
|
const currentValue = JSON.stringify(value);
|
||||||
|
return defaultValue === currentValue;
|
||||||
|
};
|
||||||
|
|
||||||
|
const onChangePortalName = (e) => {
|
||||||
|
const value = e.target.value;
|
||||||
|
|
||||||
|
onValidateInput(value);
|
||||||
|
|
||||||
|
setPortalName(value);
|
||||||
|
|
||||||
|
if (settingIsEqualInitialValue("portalName", value)) {
|
||||||
|
saveToSessionStorage("portalName", "");
|
||||||
|
saveToSessionStorage("portalNameDefault", "");
|
||||||
|
} else {
|
||||||
|
saveToSessionStorage("portalName", value);
|
||||||
|
setShowReminder(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const checkInnerWidth = () => {
|
||||||
|
if (!isSmallTablet()) {
|
||||||
|
history.push(
|
||||||
|
combineUrl(
|
||||||
|
AppServerConfig.proxyURL,
|
||||||
|
config.homepage,
|
||||||
|
"/settings/common/customization"
|
||||||
|
)
|
||||||
|
);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// TODO: Move to a file
|
||||||
|
const onClickLink = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
history.push(e.target.pathname);
|
||||||
|
};
|
||||||
|
|
||||||
|
const isMobileViewPortalRenaming = (
|
||||||
|
<div className="category-item-wrapper">
|
||||||
|
<div className="category-item-heading">
|
||||||
|
<Link
|
||||||
|
truncate={true}
|
||||||
|
className="inherit-title-link header"
|
||||||
|
onClick={onClickLink}
|
||||||
|
href={combineUrl(
|
||||||
|
AppServerConfig.proxyURL,
|
||||||
|
"/settings/common/customization/portal-renaming"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
Portal Renaming
|
||||||
|
{/* {t("CustomTitlesWelcome")} */}
|
||||||
|
</Link>
|
||||||
|
<StyledArrowRightIcon size="small" color="#333333" />
|
||||||
|
</div>
|
||||||
|
<Text className="category-item-description">
|
||||||
|
{/* {t("CustomTitlesSettingsDescription")} */}
|
||||||
|
Here you can change your portal address.
|
||||||
|
</Text>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const hasError = errorValue === null ? false : true;
|
||||||
|
|
||||||
|
const settingsBlock = (
|
||||||
|
<div className="settings-block">
|
||||||
|
<FieldContainer
|
||||||
|
id="fieldContainerWelcomePage"
|
||||||
|
className="field-container-width"
|
||||||
|
labelText={`${t("New portal name")}:`}
|
||||||
|
isVertical={true}
|
||||||
|
>
|
||||||
|
<TextInput
|
||||||
|
scale={true}
|
||||||
|
value={portalName}
|
||||||
|
onChange={onChangePortalName}
|
||||||
|
// isDisabled={isLoadingGreetingSave || isLoadingGreetingRestore}
|
||||||
|
placeholder={`${t("room")}`}
|
||||||
|
hasError={hasError}
|
||||||
|
/>
|
||||||
|
<div className="error">{errorValue}</div>
|
||||||
|
</FieldContainer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
return !isLoadedData ? (
|
return !isLoadedData ? (
|
||||||
<Loader className="pageLoader" type="rombs" size="40px" />
|
<Loader className="pageLoader" type="rombs" size="40px" />
|
||||||
|
) : isMobileView ? (
|
||||||
|
isMobileViewPortalRenaming
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<StyledComponent>
|
<StyledComponent hasScroll={hasScroll} className="category-item-wrapper">
|
||||||
<div className="category-item-heading">
|
{checkInnerWidth() && !isMobileView && (
|
||||||
<div className="category-item-title">{t("Portal Renaming")}</div>
|
<div className="category-item-heading">
|
||||||
<HelpButton
|
<div className="category-item-title">{t("Portal Renaming")}</div>
|
||||||
iconName="static/images/combined.shape.svg"
|
<HelpButton
|
||||||
size={12}
|
iconName="static/images/combined.shape.svg"
|
||||||
// tooltipContent={tooltipCustomTitlesTooltip}
|
size={12}
|
||||||
/>
|
// tooltipContent={tooltipCustomTitlesTooltip}
|
||||||
</div>
|
|
||||||
<div className="settings-block">
|
|
||||||
<FieldContainer
|
|
||||||
id="fieldContainerWelcomePage"
|
|
||||||
className="field-container-width"
|
|
||||||
labelText={`${t("New portal name")}:`}
|
|
||||||
isVertical={true}
|
|
||||||
>
|
|
||||||
<TextInput
|
|
||||||
scale={true}
|
|
||||||
// value={greetingTitle}
|
|
||||||
// onChange={onChangePortalName}
|
|
||||||
// isDisabled={isLoadingGreetingSave || isLoadingGreetingRestore}
|
|
||||||
placeholder={`${t("room")}`}
|
|
||||||
/>
|
/>
|
||||||
</FieldContainer>
|
</div>
|
||||||
</div>
|
)}
|
||||||
|
{(isMobileOnly && isSmallTablet()) || isSmallTablet() ? (
|
||||||
|
<StyledScrollbar stype="smallBlack">{settingsBlock}</StyledScrollbar>
|
||||||
|
) : (
|
||||||
|
<> {settingsBlock}</>
|
||||||
|
)}
|
||||||
<SaveCancelButtons
|
<SaveCancelButtons
|
||||||
|
className="save-cancel-buttons"
|
||||||
onSaveClick={onSavePortalRename}
|
onSaveClick={onSavePortalRename}
|
||||||
|
onCancelClick={onCancelPortalName}
|
||||||
saveButtonLabel={t("Common:SaveButton")}
|
saveButtonLabel={t("Common:SaveButton")}
|
||||||
cancelButtonLabel={t("Common:CancelButton")}
|
cancelButtonLabel={t("Common:CancelButton")}
|
||||||
|
showReminder={showReminder}
|
||||||
|
reminderTest={t("YouHaveUnsavedChanges")}
|
||||||
displaySettings={true}
|
displaySettings={true}
|
||||||
|
// hasScroll={hasScroll}
|
||||||
/>
|
/>
|
||||||
</StyledComponent>
|
</StyledComponent>
|
||||||
</>
|
</>
|
||||||
|
@ -236,7 +236,7 @@ class WelcomePageSettings extends React.Component {
|
|||||||
const tooltipCustomTitlesTooltip = <CustomTitlesTooltip t={t} />;
|
const tooltipCustomTitlesTooltip = <CustomTitlesTooltip t={t} />;
|
||||||
|
|
||||||
// TODO: Move to a file
|
// TODO: Move to a file
|
||||||
const isMobileViewLanguageTimeSettings = (
|
const isMobileViewWelcomePageSettings = (
|
||||||
<div className="category-item-wrapper">
|
<div className="category-item-wrapper">
|
||||||
<div className="category-item-heading">
|
<div className="category-item-heading">
|
||||||
<Link
|
<Link
|
||||||
@ -281,7 +281,7 @@ class WelcomePageSettings extends React.Component {
|
|||||||
return !isLoadedData ? (
|
return !isLoadedData ? (
|
||||||
<Loader className="pageLoader" type="rombs" size="40px" />
|
<Loader className="pageLoader" type="rombs" size="40px" />
|
||||||
) : isMobileView ? (
|
) : isMobileView ? (
|
||||||
isMobileViewLanguageTimeSettings
|
isMobileViewWelcomePageSettings
|
||||||
) : (
|
) : (
|
||||||
<StyledSettingsComponent
|
<StyledSettingsComponent
|
||||||
hasScroll={hasScroll}
|
hasScroll={hasScroll}
|
||||||
|
@ -26,6 +26,9 @@ const LanguageAndTimeZoneSettings = lazy(() =>
|
|||||||
const WelcomePageSettings = lazy(() =>
|
const WelcomePageSettings = lazy(() =>
|
||||||
import("./categories/common/settingsCustomization/welcome-page-settings")
|
import("./categories/common/settingsCustomization/welcome-page-settings")
|
||||||
);
|
);
|
||||||
|
const PortalRenaming = lazy(() =>
|
||||||
|
import("./categories/common/settingsCustomization/portal-renaming")
|
||||||
|
);
|
||||||
const TeamTemplate = lazy(() => import("./categories/common/team-template"));
|
const TeamTemplate = lazy(() => import("./categories/common/team-template"));
|
||||||
const ThirdPartyServices = lazy(() =>
|
const ThirdPartyServices = lazy(() =>
|
||||||
import("./categories/integration/thirdPartyServicesSettings")
|
import("./categories/integration/thirdPartyServicesSettings")
|
||||||
@ -67,6 +70,10 @@ const WELCOME_PAGE_SETTINGS_URL = combineUrl(
|
|||||||
PROXY_BASE_URL,
|
PROXY_BASE_URL,
|
||||||
"/common/customization/welcome-page-settings"
|
"/common/customization/welcome-page-settings"
|
||||||
);
|
);
|
||||||
|
const PORTAL_RENAMING = combineUrl(
|
||||||
|
PROXY_BASE_URL,
|
||||||
|
"/common/customization/portal-renaming"
|
||||||
|
);
|
||||||
const TEAM_TEMPLATE_URL = combineUrl(
|
const TEAM_TEMPLATE_URL = combineUrl(
|
||||||
PROXY_BASE_URL,
|
PROXY_BASE_URL,
|
||||||
"/common/customization/team-template"
|
"/common/customization/team-template"
|
||||||
@ -116,6 +123,7 @@ const Settings = () => {
|
|||||||
path={WELCOME_PAGE_SETTINGS_URL}
|
path={WELCOME_PAGE_SETTINGS_URL}
|
||||||
component={WelcomePageSettings}
|
component={WelcomePageSettings}
|
||||||
/>
|
/>
|
||||||
|
<Route exact path={PORTAL_RENAMING} component={PortalRenaming} />
|
||||||
<Route exact path={WHITELABEL_URL} component={WhiteLabel} />
|
<Route exact path={WHITELABEL_URL} component={WhiteLabel} />
|
||||||
<Route exact path={TEAM_TEMPLATE_URL} component={TeamTemplate} />
|
<Route exact path={TEAM_TEMPLATE_URL} component={TeamTemplate} />
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user