ADG-10295 add encryption settings page

client_v2/src/components/Encryption/Status/CertificateStatus.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import format from 'date-fns/format';
+
+import { EMPTY_DATE } from 'panel/helpers/constants';
+import intl from 'panel/common/intl';
+import { StatusBlock } from './StatusBlock';
+import s from './styles.module.pcss';
+
+type Props = {
+    validChain: boolean;
+    validCert: boolean;
+    subject?: string;
+    issuer?: string;
+    notAfter?: string;
+    dnsNames?: string[];
+};
+
+export const CertificateStatus = ({ validChain, validCert, subject, issuer, notAfter, dnsNames }: Props) => (
+    <StatusBlock
+        variant={validChain ? 'success' : 'error'}
+        title={validChain ? intl.getMessage('encryption_chain_valid') : intl.getMessage('encryption_chain_invalid')}
+    >
+        {validCert && (subject || issuer || notAfter || dnsNames) && (
+            <ul className={s.statusList}>
+                {subject && <li>{intl.getMessage('encryption_subject', { value: subject })}</li>}
+                {issuer && <li>{intl.getMessage('encryption_issuer', { value: issuer })}</li>}
+                {notAfter && notAfter !== EMPTY_DATE && (
+                    <li>{intl.getMessage('encryption_expire', { value: format(notAfter, 'YYYY-MM-DD HH:mm:ss') })}</li>
+                )}
+                {dnsNames && <li>{intl.getMessage('encryption_hostnames', { value: dnsNames.join(', ') })}</li>}
+            </ul>
+        )}
+    </StatusBlock>
+);

client_v2/src/components/Encryption/Status/KeyStatus.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import intl from 'panel/common/intl';
+import { StatusBlock } from './StatusBlock';
+
+type Props = {
+    validKey: boolean;
+};
+
+export const KeyStatus = ({ validKey }: Props) => (
+    <StatusBlock
+        variant={validKey ? 'success' : 'error'}
+        title={validKey ? intl.getMessage('encryption_key_valid') : intl.getMessage('encryption_key_invalid')}
+    />
+);

client_v2/src/components/Encryption/Status/StatusBlock.tsx

@@ -0,0 +1,28 @@
+import React, { ReactNode } from 'react';
+import cn from 'clsx';
+
+import theme from 'panel/lib/theme';
+
+import s from './styles.module.pcss';
+
+export type StatusVariant = 'success' | 'error' | 'warning';
+
+type Props = {
+    variant: StatusVariant;
+    title: ReactNode;
+    children?: ReactNode;
+};
+
+export const StatusBlock = ({ variant, title, children }: Props) => (
+    <div className={cn(s.status, theme.text.t3)}>
+        <div
+            className={cn(s.statusTitle, {
+                [s.statusTitle_success]: variant === 'success',
+                [s.statusTitle_error]: variant === 'error',
+                [s.statusTitle_warning]: variant === 'warning',
+            })}>
+            {title}
+        </div>
+        {children}
+    </div>
+);

client_v2/src/components/Encryption/Status/ValidationStatus.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import intl from 'panel/common/intl';
+import { StatusBlock } from './StatusBlock';
+
+import s from './styles.module.pcss';
+
+type Props = {
+    type: 'warning' | 'error';
+    message: string;
+};
+
+export const ValidationStatus = ({ type, message }: Props) => (
+    <StatusBlock variant={type} title={intl.getMessage('encryption_certificate_has_issues')}>
+        <div className={s.statusText}>{message}</div>
+    </StatusBlock>
+);

client_v2/src/components/Encryption/Status/index.ts

@@ -0,0 +1,3 @@
+export { CertificateStatus } from './CertificateStatus';
+export { KeyStatus } from './KeyStatus';
+export { ValidationStatus } from './ValidationStatus';

client_v2/src/components/Encryption/Status/styles.module.pcss

@@ -0,0 +1,47 @@
+.status {
+    display: flex;
+    flex-direction: column;
+    padding: 8px 16px;
+    color: var(--default-main-text);
+    border-radius: 8px;
+    box-shadow: var(--main-box-shadow);
+    background-color: var(--fills-backgrounds-page-background-additional);
+    cursor: default;
+
+    @media (min-width: 1024px) {
+        position: absolute;
+        bottom: 8px;
+        left: calc(100% + 56px);
+        width: 340px;
+    }
+}
+
+.statusTitle {
+    padding: 8px 0;
+    font-weight: var(--weight-semi-bold);
+
+    &_success {
+        color: var(--default-link);
+    }
+
+    &_warning {
+        color: var(--default-attention-link);
+    }
+
+    &_error {
+        color: var(--default-error-link);
+    }
+}
+
+.statusList {
+    margin: 0;
+    padding: 8px 0;
+
+    li {
+        display: block;
+    }
+}
+
+.statusText {
+    padding: 8px 0;
+}