feat(renderer): Error pages

Display an error page when page loading fails.

Error messages should be tweaked for messaging applications (not
browsers), because people won't neccessarily expect browser errors in
a messenger.

We still need a component to property show a certificate that failed
validation so people can decide whether to trust it temporarily.

Signed-off-by: Kristóf Marussy <kristof@marussy.com>

5 files changed, 323 insertions, 14 deletions

diff --git a/locales/en/translation.json b/locales/en/translation.json
index 9764719..d04f1f3 100644
--- a/locales/en/translation.json
+++ b/locales/en/translation.json
@@ -1,4 +1,5 @@
 {
+  "appName": "Sophie",
   "banner": {
     "close": "Dismiss notification",
     "newWindow": {
@@ -57,9 +58,55 @@
     "forward": "Forward",
     "home": "Home",
     "openInBrowser": "Open in browser",
-    "reload": "Reload",
+    "reload": "Refresh",
     "stop": "Stop",
     "toggleDarkMode": "Toggle dark mode",
     "toggleLocationBar": "Toggle location bar"
+  },
+  "error": {
+    "errorCode": "Error code: {{errorCode}}",
+    "home": "Got to {{serviceName}} home",
+    "reload": "$t(toolbar.reload)",
+    "failed": {
+      "unspecific": {
+        "title": "{{serviceName}} is having a problem",
+        "description": "You should try this action later to see if the problem has resolved."
+      },
+      "-105": {
+        "title": "$t(appName) can't resolve {{serviceName}}",
+        "description": "You should check if your internet connection is working and try this action later."
+      }
+    },
+    "certificateError": {
+      "unspecific": {
+        "title": "Failed to establish secure connection",
+        "description": "$t(appName) has stopped loading {{serviceName}} to prevent any potential attackers from accessing your personal data."
+      },
+      "details": {
+        "title": "More info",
+        "warning": "You should only trust certificates that you've verified to be valid. Trusting invalid certificates allows attackers to steal your passwords and data.",
+        "acceptButton": {
+          "pending": "Trust this certificate temporarily",
+          "rejected": "You have already rejected this certificate",
+          "accepted": "You have already accepted this certificate"
+        }
+      }
+    },
+    "crashed": {
+      "unspecific": {
+        "title": "{{serviceName}} has crashed",
+        "description": "$t(errorPage.failed.unspecific.description)"
+      },
+      "killed": {
+        "description": "The renderer was terminated by an external program."
+      },
+      "oom": {
+        "description": "It looks like your computer has run out of memory."
+      }
+    },
+    "unknown": {
+      "title": "$t(appName) has encountered an unexpected error while loading {{serviceName}}",
+      "description": "If the problem doesn't resolve after trying again, you should send a bug report."
+    }
   }
 }
diff --git a/packages/renderer/src/components/App.tsx b/packages/renderer/src/components/App.tsx
index c3f83ee..26e2e01 100644
--- a/packages/renderer/src/components/App.tsx
+++ b/packages/renderer/src/components/App.tsx
@@ -19,7 +19,6 @@
  */
 
 import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
 import { observer } from 'mobx-react-lite';
 import React, { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -27,6 +26,7 @@ import { useTranslation } from 'react-i18next';
 import BrowserViewPlaceholder from './BrowserViewPlaceholder';
 import NewWindowBanner from './NewWindowBanner';
 import { useStore } from './StoreProvider';
+import ErrorPage from './errorPage/ErrorPage';
 import LocationBar from './locationBar/LocationBar';
 import Sidebar from './sidebar/Sidebar';
 
@@ -104,17 +104,7 @@ function App({ devMode }: { devMode: boolean }): JSX.Element {
         <LocationBar />
         <NewWindowBanner service={selectedService} />
         <BrowserViewPlaceholder>
-          <p>{JSON.stringify(selectedService?.state)}</p>
-          {selectedService?.state.type === 'certificateError' && (
-            <Button
-              disabled={selectedService.state.trust !== 'pending'}
-              onClick={() =>
-                selectedService?.temporarilyTrustCurrentCertificate()
-              }
-            >
-              Trust certificate
-            </Button>
-          )}
+          <ErrorPage service={selectedService} />
         </BrowserViewPlaceholder>
       </Box>
     </Box>
diff --git a/packages/renderer/src/components/BrowserViewPlaceholder.tsx b/packages/renderer/src/components/BrowserViewPlaceholder.tsx
index 1f5f9f4..9bd1176 100644
--- a/packages/renderer/src/components/BrowserViewPlaceholder.tsx
+++ b/packages/renderer/src/components/BrowserViewPlaceholder.tsx
@@ -65,7 +65,7 @@ function BrowserViewPlaceholder({
   );
 
   return (
-    <Box flex={1} ref={ref}>
+    <Box ref={ref} flex={1} overflow="auto">
       {children}
     </Box>
   );
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);
diff --git a/packages/renderer/src/components/errorPage/ErrorPage.tsx b/packages/renderer/src/components/errorPage/ErrorPage.tsx
new file mode 100644
index 0000000..571059a
--- /dev/null
+++ b/packages/renderer/src/components/errorPage/ErrorPage.tsx
@@ -0,0 +1,180 @@
+/*
+ * 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 ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import NoEncryptionIcon from '@mui/icons-material/NoEncryptionOutlined';
+import SentimentVeryDissatisfiedIcon from '@mui/icons-material/SentimentVeryDissatisfied';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import type { TFunction } from 'i18next';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type Service from '../../stores/Service';
+
+import CertificateDetails from './CertificateDetails';
+
+interface ErrorDetails {
+  icon: JSX.Element;
+  title: string;
+  description: string;
+  errorCode: string | undefined;
+}
+
+function formatError(service: Service, t: TFunction): ErrorDetails {
+  const {
+    settings: { name: serviceName },
+    state,
+  } = service;
+  const { type } = state;
+  switch (type) {
+    case 'failed': {
+      const { errorCode, errorDesc } = state;
+      const errorCodeStr = errorCode.toString(10);
+      return {
+        icon: <ErrorOutlineIcon fontSize="inherit" />,
+        title: t(
+          [
+            `error.failed.${errorCodeStr}.title`,
+            'error.failed.unspecific.title',
+          ],
+          { serviceName },
+        ),
+        description: t(
+          [
+            `error.failed.${errorCodeStr}.description`,
+            'error.failed.unspecific.description',
+          ],
+          { serviceName },
+        ),
+        errorCode:
+          errorDesc.length > 0
+            ? `${errorDesc} (${errorCodeStr})`
+            : errorCodeStr,
+      };
+    }
+    case 'certificateError': {
+      const { errorCode } = state;
+      // Avoid i18next namespace separators in the error code.
+      const errorCodeSafe = errorCode.replaceAll(':', '_');
+      return {
+        icon: <NoEncryptionIcon fontSize="inherit" />,
+        title: t(
+          [
+            `error.certificateError.${errorCodeSafe}.title`,
+            'error.certificateError.unspecific.title',
+          ],
+          { serviceName },
+        ),
+        description: t(
+          [
+            `error.certificateError.${errorCodeSafe}.description`,
+            'error.certificateError.unspecific.description',
+          ],
+          { serviceName },
+        ),
+        errorCode,
+      };
+    }
+    case 'crashed': {
+      const { reason, exitCode } = state;
+      return {
+        icon: <SentimentVeryDissatisfiedIcon fontSize="inherit" />,
+        title: t(
+          [`error.crashed.${reason}.title`, 'error.crashed.unspecific.title'],
+          { serviceName },
+        ),
+        description: t(
+          [
+            `error.crashed.${reason}.description`,
+            'error.crashed.unspecific.description',
+          ],
+          { serviceName },
+        ),
+        errorCode: `${reason} (${exitCode})`,
+      };
+    }
+    default:
+      return {
+        icon: <ErrorOutlineIcon fontSize="inherit" />,
+        title: t('error.unknown.title', { serviceName }),
+        description: t('error.unknown.description', { serviceName }),
+        errorCode: undefined,
+      };
+  }
+}
+
+function ErrorPage({
+  service,
+}: {
+  service: Service | undefined;
+}): JSX.Element | null {
+  const { t } = useTranslation(undefined);
+
+  if (service === undefined || !service.hasError) {
+    // eslint-disable-next-line unicorn/no-null -- React requires `null` to skip rendering.
+    return null;
+  }
+
+  const {
+    settings: { name: serviceName },
+    state: { type: errorType },
+  } = service;
+  const { icon, title, description, errorCode } = formatError(service, t);
+
+  return (
+    <Box p={2}>
+      <Box component="section" maxWidth={800} mx="auto" my={{ md: '10vh' }}>
+        <Typography
+          aria-hidden
+          fontSize={{ xs: 48, md: 96 }}
+          lineHeight={1}
+          mb={2}
+        >
+          {icon}
+        </Typography>
+        <Typography component="h1" variant="h3" mb={2}>
+          {title}
+        </Typography>
+        <Typography mb={4}>{description}</Typography>
+        {errorCode !== undefined && (
+          <Typography variant="body2" color="text.secondary" mb={2}>
+            {t('error.errorCode', { errorCode })}
+          </Typography>
+        )}
+        <Box display="flex" flexDirection="row" gap={1} mb={2}>
+          <Button onClick={() => service.goHome()} variant="contained">
+            {t('error.home', { serviceName })}
+          </Button>
+          {errorType !== 'certificateError' && (
+            <Button onClick={() => service.reload()} variant="outlined">
+              {t('error.reload')}
+            </Button>
+          )}
+        </Box>
+        <CertificateDetails service={service} />
+      </Box>
+    </Box>
+  );
+}
+
+export default observer(ErrorPage);