1 files changed, 92 insertions, 0 deletions

diff --git a/packages/renderer/src/components/errorPage/CertificateDetails.tsx b/packages/renderer/src/components/errorPage/CertificateDetails.tsx
new file mode 100644
index 0000000..044cb5c
--- /dev/null
+++ b/packages/renderer/src/components/errorPage/CertificateDetails.tsx
@@ -0,0 +1,92 @@
+/*
+ * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
+import Accordion from '@mui/material/Accordion';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type Service from '../../stores/Service';
+
+const SUMMARY_ID = 'Sophie-CertificateDetails-header';
+const DETAILS_ID = 'Sophie-CertificateDetails-content';
+
+function CertificateDetails({
+  service,
+}: {
+  service: Service;
+}): JSX.Element | null {
+  const { t } = useTranslation(undefined, {
+    keyPrefix: 'error.certificateError.details',
+  });
+
+  const { state } = service;
+  const { type: errorType } = state;
+
+  if (errorType !== 'certificateError') {
+    // eslint-disable-next-line unicorn/no-null -- React requires `null` to skip rendering.
+    return null;
+  }
+
+  const { certificate, trust } = state;
+
+  return (
+    <Accordion
+      disableGutters
+      variant="outlined"
+      sx={{ '&::before': { display: 'none' }, borderRadius: 1 }}
+    >
+      <AccordionSummary
+        id={SUMMARY_ID}
+        aria-controls={DETAILS_ID}
+        expandIcon={<ExpandMoreIcon />}
+      >
+        <Typography>{t('title')}</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Typography sx={{ wordWrap: 'break-word' }}>
+          {JSON.stringify(certificate)}
+        </Typography>
+        <Typography mt={2}>
+          <WarningAmberIcon fontSize="small" /> <strong>{t('warning')}</strong>
+        </Typography>
+        <Box mt={1}>
+          <Button
+            disabled={trust !== 'pending'}
+            onClick={() => service.temporarilyTrustCurrentCertificate()}
+            color="error"
+            variant="outlined"
+          >
+            {t(`acceptButton.${trust}`)}
+          </Button>
+        </Box>
+      </AccordionDetails>
+    </Accordion>
+  );
+}
+
+export default observer(CertificateDetails);