3 files changed, 319 insertions, 0 deletions

diff --git a/packages/renderer/src/components/banner/InsecureConnectionBanner.tsx b/packages/renderer/src/components/banner/InsecureConnectionBanner.tsx
new file mode 100644
index 0000000..7a03fce
--- /dev/null
+++ b/packages/renderer/src/components/banner/InsecureConnectionBanner.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 CableIcon from '@mui/icons-material/Cable';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import HomeIcon from '@mui/icons-material/HomeOutlined';
+import Button from '@mui/material/Button';
+import { SecurityLabelKind } from '@sophie/shared';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type Service from '../../stores/Service';
+
+import NotificationBanner from './NotificationBanner';
+
+function InsecureConnectionBanner({
+  service,
+}: {
+  service: Service | undefined;
+}): JSX.Element | null {
+  const { t } = useTranslation(undefined, {
+    keyPrefix: 'banner.insecureConnection',
+  });
+
+  if (service === undefined) {
+    // eslint-disable-next-line unicorn/no-null -- React requires `null` to skip rendering.
+    return null;
+  }
+
+  const {
+    canReconnectSecurely,
+    hasError,
+    securityLabel,
+    settings: { name: serviceName },
+  } = service;
+
+  if (securityLabel !== SecurityLabelKind.NotSecureConnection || hasError) {
+    // eslint-disable-next-line unicorn/no-null -- React requires `null` to skip rendering.
+    return null;
+  }
+
+  return (
+    <NotificationBanner
+      severity="error"
+      icon={<ErrorOutlineIcon fontSize="inherit" />}
+      buttons={
+        <>
+          <Button
+            onClick={() => service.goHome()}
+            color="inherit"
+            size="small"
+            startIcon={<HomeIcon />}
+          >
+            {t('home', { serviceName })}
+          </Button>
+          {canReconnectSecurely && (
+            <Button
+              onClick={() => service.reconnectSecurely()}
+              color="inherit"
+              size="small"
+              startIcon={<CableIcon />}
+            >
+              {t('reconnectSecurely')}
+            </Button>
+          )}
+        </>
+      }
+    >
+      {t('message')}
+    </NotificationBanner>
+  );
+}
+
+export default observer(InsecureConnectionBanner);
diff --git a/packages/renderer/src/components/banner/NewWindowBanner.tsx b/packages/renderer/src/components/banner/NewWindowBanner.tsx
new file mode 100644
index 0000000..478de8e
--- /dev/null
+++ b/packages/renderer/src/components/banner/NewWindowBanner.tsx
@@ -0,0 +1,117 @@
+/*
+ * 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 IconOpenInBrowser from '@mui/icons-material/OpenInBrowser';
+import IconOpenInNew from '@mui/icons-material/OpenInNew';
+import Button from '@mui/material/Button';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+
+import type Service from '../../stores/Service';
+
+import NotificationBanner from './NotificationBanner';
+
+function NewWindowBanner({
+  service,
+}: {
+  service: Service | undefined;
+}): JSX.Element | null {
+  const { t } = useTranslation(undefined, {
+    keyPrefix: 'banner.newWindow',
+  });
+
+  if (service === undefined) {
+    // eslint-disable-next-line unicorn/no-null -- React requires `null` to skip rendering.
+    return null;
+  }
+
+  const {
+    popups,
+    settings: { name },
+  } = service;
+  const { length: count } = popups;
+
+  if (count === 0) {
+    // eslint-disable-next-line unicorn/no-null -- React requires `null` to skip rendering.
+    return null;
+  }
+
+  const url = popups[count - 1];
+
+  return (
+    <NotificationBanner
+      severity="warning"
+      icon={<IconOpenInNew fontSize="inherit" />}
+      onClose={() => service.dismissAllPopups()}
+      buttons={
+        <>
+          <Button
+            onClick={() => service.followPopup(url)}
+            color="inherit"
+            size="small"
+          >
+            {t('followLink')}
+          </Button>
+          <Button
+            onClick={() => service.openPopupInExternalBrowser(url)}
+            color="inherit"
+            size="small"
+            startIcon={<IconOpenInBrowser />}
+          >
+            {t('openInExternalBrowser')}
+          </Button>
+          {count > 1 && (
+            <>
+              <Button
+                onClick={() => service.openAllPopupsInExternalBrowser()}
+                color="inherit"
+                size="small"
+                startIcon={<IconOpenInBrowser />}
+              >
+                {t('openAllInExternalBrowser')}
+              </Button>
+              <Button
+                onClick={() => service.dismissPopup(url)}
+                color="inherit"
+                size="small"
+              >
+                {t('dismiss')}
+              </Button>
+            </>
+          )}
+        </>
+      }
+    >
+      {count === 1 ? (
+        <Trans i18nKey="messageSingleLink" t={t}>
+          {{ name }} wants to open <strong>{{ url }}</strong> in a new window
+        </Trans>
+      ) : (
+        <Trans i18nKey="messageMultipleLinks" count={count - 1} t={t}>
+          {{ name }} wants to open <strong>{{ url }}</strong> and{' '}
+          <strong>{{ count: count - 1 }}</strong> other links in new windows
+        </Trans>
+      )}
+    </NotificationBanner>
+  );
+}
+
+export default observer(NewWindowBanner);
diff --git a/packages/renderer/src/components/banner/NotificationBanner.tsx b/packages/renderer/src/components/banner/NotificationBanner.tsx
new file mode 100644
index 0000000..818f498
--- /dev/null
+++ b/packages/renderer/src/components/banner/NotificationBanner.tsx
@@ -0,0 +1,110 @@
+/*
+ * 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 { Typography } from '@mui/material';
+import Alert, { AlertColor } from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import React, { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const NotificationBannerRoot = styled(Alert)(({ theme }) => ({
+  padding: `7px ${theme.spacing(1)} 6px ${theme.spacing(2)}`,
+  // Match the height of the location bar.
+  minHeight: 53,
+  borderRadius: 0,
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  '.MuiAlert-message': {
+    flexGrow: 1,
+    paddingTop: 0,
+    paddingBottom: 4,
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+  },
+  '.MuiAlert-action': {
+    paddingLeft: 0,
+    paddingRight: theme.spacing(1),
+  },
+}));
+
+const NotificationBannerText = styled(Typography)(({ theme }) => ({
+  fontSize: 'inherit',
+  paddingTop: theme.spacing(1),
+  paddingRight: theme.spacing(2),
+  flexGrow: 9999,
+}));
+
+const NotificationBannerButtons = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'hasCloseButton',
+})<{ hasCloseButton: boolean }>(({ theme, hasCloseButton }) => ({
+  fontSize: 'inherit',
+  paddingTop: theme.spacing(0.5),
+  paddingRight: hasCloseButton ? theme.spacing(0.5) : 0,
+  display: 'flex',
+  flexWrap: 'wrap',
+  flexGrow: 1,
+  gap: theme.spacing(1),
+  '.MuiButton-root': {
+    flexGrow: 1,
+  },
+}));
+
+export default function NotificationBanner({
+  severity,
+  icon,
+  onClose,
+  buttons,
+  children,
+}: {
+  severity?: AlertColor;
+  icon?: ReactNode;
+  onClose?: () => void;
+  buttons?: ReactNode;
+  children?: ReactNode;
+}): JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    /* eslint-disable react/jsx-props-no-spreading -- Conditionally set the onClose prop. */
+    <NotificationBannerRoot
+      severity={severity ?? 'success'}
+      icon={icon ?? false}
+      {...(onClose === undefined ? {} : { onClose })}
+      closeText={t<string>('banner.close')}
+    >
+      {/* eslint-enable react/jsx-props-no-spreading */}
+      <NotificationBannerText>{children}</NotificationBannerText>
+      {buttons && (
+        <NotificationBannerButtons hasCloseButton={onClose !== undefined}>
+          {buttons}
+        </NotificationBannerButtons>
+      )}
+    </NotificationBannerRoot>
+  );
+}
+
+NotificationBanner.defaultProps = {
+  severity: 'success',
+  icon: false,
+  onClose: undefined,
+  buttons: undefined,
+  children: undefined,
+};