IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

LDAP: Applied last style changes for CertificateDialog

Browse Source
This commit is contained in:
Alexey Safronov 2024-05-31 16:40:30 +04:00
parent 0416410f88
commit 54377c71c2
7 changed files with 97 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/client/public/locales/en/Ldap.json
View File

@ -60,5 +60,12 @@
"LdapSettingsSubjectName": "Subject name",
"LdapSettingsValidFrom": "Valid from",
"LdapSettingsValidUntil": "Valid until",
"LdapSettingsUniqueHash": "Unique hash"
"LdapSettingsUniqueHash": "Unique hash",
"LdapSettingsCertExpired": "Certificate is expired",
"LdapSettingsCertCnNoMatch": "Certificate name does not match hostname",
"LdapSettingsCertIssuerChaining": "No certificate issuer chain was provided",
"LdapSettingsCertUntrustedCa": "Certificate Authority who issued the certificate is not trusted",
"LdapSettingsCertUntrustedRoot": "Root Certificate Authority who issued the certificate is not trusted",
"LdapSettingsCertMalformed": "Malformed certificate",
"LdapSettingsCertUnrecognizedError": "Unrecognized Error"
}

8
packages/client/src/pages/PortalSettings/categories/integration/LDAP/index.js
View File

@ -17,7 +17,6 @@ import LdapMobileView from "./sub-components/LdapMobileView";
import SettingsContainer from "./sub-components/SettingsContainer";
import LdapLoader from "./sub-components/LdapLoader";
import { setDocumentTitle } from "SRC_DIR/helpers/utils";
import CertificateDialog from "./sub-components/CertificateDialog";
const LDAP = ({
ldapSettingsUrl,
@ -28,7 +27,6 @@ const LDAP = ({
isMobileView,
isLdapEnabled,
isLoaded,
isCertificateDialogVisible,
}) => {
const { t } = useTranslation(["Ldap", "Settings", "Common"]);
const [isSmallWindow, setIsSmallWindow] = useState(false);
@ -85,8 +83,6 @@ const LDAP = ({
<SyncContainer />
</>
)}
{isCertificateDialogVisible && <CertificateDialog />}
</StyledLdapPage>
);
};
@ -95,8 +91,7 @@ export default inject(({ ldapStore, settingsStore, currentQuotaStore }) => {
const { isLdapAvailable } = currentQuotaStore;
const { ldapSettingsUrl, theme, currentColorScheme, currentDeviceType } =
settingsStore;
const { load, isLdapEnabled, isLoaded, isCertificateDialogVisible } =
ldapStore;
const { load, isLdapEnabled, isLoaded } = ldapStore;
const isMobileView = currentDeviceType === DeviceType.mobile;
@ -109,6 +104,5 @@ export default inject(({ ldapStore, settingsStore, currentQuotaStore }) => {
isMobileView,
isLdapEnabled,
isLoaded,
isCertificateDialogVisible,
};
})(observer(LDAP));

21
packages/client/src/pages/PortalSettings/categories/integration/LDAP/styled-components/StyledCerticateDialog.js
View File

@ -23,10 +23,13 @@
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import styled, { css } from "styled-components";
import styled from "styled-components";
import { Box } from "@docspace/shared/components/box";
import { Base } from "@docspace/shared/themes";
const StyledCertificateDialogBody = styled(Box)`
max-width: 520px;
.ldap-settings-crt-confirmation {
padding-bottom: 16px;
}
@ -35,11 +38,23 @@ const StyledCertificateDialogBody = styled(Box)`
display: flex;
flex-direction: column;
gap: 4px;
background-color: #f8f9f9;
border: 1px solid ${(props) => (props.hasError ? "#F24724" : "#eceef1")};
background-color: ${(props) =>
props.theme.isBase ? "#f8f9f9" : "#474747"};
border: 1px solid
${(props) =>
props.hasError
? "#F24724"
: props.theme.isBase
? "#eceef1"
: "#474747"};
border-radius: 3px;
padding: 4px;
margin-bottom: 8px;
}
`;
StyledCertificateDialogBody.defaultProps = {
theme: Base,
};
export default StyledCertificateDialogBody;

44
packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/CertificateDialog.js
View File

@ -35,6 +35,7 @@ import { Text } from "@docspace/shared/components/text";
import { Box } from "@docspace/shared/components/box";
import StyledCertificateDialogBody from "../styled-components/StyledCerticateDialog";
import { LDAPCertificateProblem } from "@docspace/shared/enums";
const CertificateDialog = ({
setCertificateDialogVisible,
@ -61,6 +62,40 @@ const CertificateDialog = ({
setCertificateDialogVisible(false);
}, []);
const mapError = (error) => {
switch (error) {
case LDAPCertificateProblem.CertExpired:
return t("LdapSettingsCertExpired");
case LDAPCertificateProblem.CertCnNoMatch:
return t("LdapSettingsCertCnNoMatch");
case LDAPCertificateProblem.CertIssuerChaining:
return t("LdapSettingsCertIssuerChaining");
case LDAPCertificateProblem.CertUntrustedCa:
return t("LdapSettingsCertUntrustedCa");
case LDAPCertificateProblem.CertUntrustedRoot:
return t("LdapSettingsCertUntrustedRoot");
case LDAPCertificateProblem.CertMalformed:
return t("LdapSettingsCertMalformed");
case LDAPCertificateProblem.CertUnrecognizedError:
return t("LdapSettingsCertUnrecognizedError");
case LDAPCertificateProblem.CertValidityPeriodNesting:
case LDAPCertificateProblem.CertRole:
case LDAPCertificateProblem.CertPathLenConst:
case LDAPCertificateProblem.CertCritical:
case LDAPCertificateProblem.CertPurpose:
case LDAPCertificateProblem.CertChainnig:
case LDAPCertificateProblem.CertRevoked:
case LDAPCertificateProblem.CertUntrustedTestRoot:
case LDAPCertificateProblem.CertRevocationFailure:
case LDAPCertificateProblem.CertWrongUsage:
return "";
}
return "";
};
const hasError = cerficateIssue.errors?.length > 0;
return (
<ModalDialog
autoMaxHeight
@ -71,7 +106,7 @@ const CertificateDialog = ({
>
<ModalDialog.Header>{t("LdapCertificateConfirm")}</ModalDialog.Header>
<ModalDialog.Body>
<StyledCertificateDialogBody>
<StyledCertificateDialogBody hasError={hasError}>
<Box className="ldap-settings-crt-confirmation">
<Text lineHeight="20px" fontSize="13px" fontWeight="400">
{t("LdapAddCertificateToStoreConfirmation")}
@ -102,6 +137,13 @@ const CertificateDialog = ({
{t("LdapSettingsUniqueHash")}: {cerficateIssue.uniqueHash}
</Text>
</Box>
{hasError && (
<Box>
{cerficateIssue.errors.map((err) => (
<Text color="#F24724">{mapError(err)}</Text>
))}
</Box>
)}
</StyledCertificateDialogBody>
</ModalDialog.Body>
<ModalDialog.Footer>

7
packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/SettingsContainer.js
View File

@ -14,6 +14,7 @@ import ProgressContainer from "./ProgressContainer";
import { Box } from "@docspace/shared/components/box";
import { Text } from "@docspace/shared/components/text";
import StyledLdapPage from "../styled-components/StyledLdapPage";
import CertificateDialog from "./CertificateDialog";
import { useNavigate } from "react-router-dom";
import { isMobile } from "@docspace/shared/utils/device";
@ -26,6 +27,7 @@ const SettingsContainer = ({
isSettingsShown,
isLdapAvailable,
isMobileView,
isCertificateDialogVisible,
}) => {
const { t } = useTranslation(["Ldap", "Settings", "Common"]);
const navigate = useNavigate();
@ -70,6 +72,8 @@ const SettingsContainer = ({
<ButtonsContainer />
<ProgressContainer operation={LDAPOpeation.SaveAndSync} />
{isCertificateDialogVisible && <CertificateDialog />}
</>
)}
</>
@ -92,7 +96,7 @@ const SettingsContainer = ({
export default inject(({ settingsStore, currentQuotaStore, ldapStore }) => {
const { isLdapAvailable } = currentQuotaStore;
const { currentDeviceType, theme } = settingsStore;
const { isSettingsShown } = ldapStore;
const { isSettingsShown, isCertificateDialogVisible } = ldapStore;
const isMobileView = currentDeviceType === DeviceType.mobile;
@ -101,5 +105,6 @@ export default inject(({ settingsStore, currentQuotaStore, ldapStore }) => {
isSettingsShown,
isMobileView,
theme,
isCertificateDialogVisible,
};
})(observer(SettingsContainer));

62
packages/client/src/store/LdapFormStore.js
View File

@ -18,26 +18,6 @@ const constants = {
GET_STATUS_TIMEOUT: 1000,
};
const ldapCertificateProblem = {
CertExpired: -2146762495,
CertValidityPeriodNesting: -2146762494,
CertRole: -2146762493,
CertPathLenConst: -2146762492,
CertCritical: -2146762491,
CertPurpose: -2146762490,
CertIssuerChaining: -2146762489,
CertMalformed: -2146762488,
CertUntrustedRoot: -2146762487,
CertChainnig: -2146762486,
CertRevoked: -2146762484,
CertUntrustedTestRoot: -2146762483,
CertRevocationFailure: -2146762482,
CertCnNoMatch: -2146762481,
CertWrongUsage: -2146762480,
CertUntrustedCa: -2146762478,
CertUnrecognizedError: -2146762477,
};
class LdapFormStore {
isLoaded = false;
isLdapEnabled = false;
@ -426,11 +406,6 @@ class LdapFormStore {
);
data.certificateConfirmRequest = certificateConfirmRequest;
var errors = data.certificateConfirmRequest?.CertificateErrors.map(
(err) => this.mapError(err),
);
data.certificateConfirmRequest.CertificateErrors = errors;
this.cerficateIssue = {
approved: data.certificateConfirmRequest.Approved,
requested: data.certificateConfirmRequest.Requested,
@ -440,7 +415,7 @@ class LdapFormStore {
validFrom: data.certificateConfirmRequest.ValidFrom,
validUntil: data.certificateConfirmRequest.ValidUntil,
uniqueHash: data.certificateConfirmRequest.Hash,
errors: errors,
errors: data.certificateConfirmRequest?.CertificateErrors || [],
};
this.setCertificateDialogVisible(true);
@ -526,9 +501,6 @@ class LdapFormStore {
) {
setCertificateDetails(status.certificateConfirmRequest);
currentSettings = previousSettings;
/* popupId, width, height, marginLeft, marginTop */
//StudioBlockUIManager.blockUI("#ldapSettingsCertificateValidationDialog", 500);
console.log("SHOW Certificate dialog");
return true;
}
@ -541,38 +513,6 @@ class LdapFormStore {
return true;
};
mapError = (error) => {
switch (error) {
case ldapCertificateProblem.CertExpired:
return "ASC.Resources.Master.ResourceJS.LdapSettingsCertExpired";
case ldapCertificateProblem.CertCnNoMatch:
return "ASC.Resources.Master.ResourceJS.LdapSettingsCertCnNoMatch";
case ldapCertificateProblem.CertIssuerChaining:
return "ASC.Resources.Master.ResourceJS.LdapSettingsCertIssuerChaining";
case ldapCertificateProblem.CertUntrustedCa:
return "ASC.Resources.Master.ResourceJS.LdapSettingsCertUntrustedCa";
case ldapCertificateProblem.CertUntrustedRoot:
return "ASC.Resources.Master.ResourceJS.LdapSettingsCertUntrustedRoot";
case ldapCertificateProblem.CertMalformed:
return "ASC.Resources.Master.ResourceJS.LdapSettingsCertMalformed";
case ldapCertificateProblem.CertUnrecognizedError:
return "ASC.Resources.Master.ResourceJS.LdapSettingsCertUnrecognizedError";
case ldapCertificateProblem.CertValidityPeriodNesting:
case ldapCertificateProblem.CertRole:
case ldapCertificateProblem.CertPathLenConst:
case ldapCertificateProblem.CertCritical:
case ldapCertificateProblem.CertPurpose:
case ldapCertificateProblem.CertChainnig:
case ldapCertificateProblem.CertRevoked:
case ldapCertificateProblem.CertUntrustedTestRoot:
case ldapCertificateProblem.CertRevocationFailure:
case ldapCertificateProblem.CertWrongUsage:
return "";
}
return "";
};
showError = (error) => {
var errorMessage;

20
packages/shared/enums/index.ts
View File

@ -549,3 +549,23 @@ export const enum LDAPOpeation {
SaveAndSync = "Save",
Sync = "Sync",
}
export const enum LDAPCertificateProblem {
CertExpired = -2146762495,
CertValidityPeriodNesting = -2146762494,
CertRole = -2146762493,
CertPathLenConst = -2146762492,
CertCritical = -2146762491,
CertPurpose = -2146762490,
CertIssuerChaining = -2146762489,
CertMalformed = -2146762488,
CertUntrustedRoot = -2146762487,
CertChainnig = -2146762486,
CertRevoked = -2146762484,
CertUntrustedTestRoot = -2146762483,
CertRevocationFailure = -2146762482,
CertCnNoMatch = -2146762481,
CertWrongUsage = -2146762480,
CertUntrustedCa = -2146762478,
CertUnrecognizedError = -2146762477,
}