Merge remote-tracking branch 'origin/main' into ditto-auth

index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta http-equiv="content-security-policy" content="default-src 'none'; script-src 'self' 'wasm-unsafe-eval'; connect-src 'self' blob: https:; img-src 'self' data: blob: https:; media-src 'self' https:; style-src 'self' 'unsafe-inline'; frame-src 'self' https:; font-src 'self'; base-uri 'self'; manifest-src 'self';">
     <link href="/manifest.json" rel="manifest">
     <!--server-generated-meta-->
     <script type="module" src="./src/main.tsx"></script>

src/features/backups/index.tsx

@@ -1,19 +1,58 @@
 import React, { useEffect, useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import { FormattedDate, defineMessages, useIntl } from 'react-intl';
 
 import { fetchBackups, createBackup } from 'soapbox/actions/backups';
-import ScrollableList from 'soapbox/components/scrollable-list';
+import { Button, Card, Column, FormActions, HStack, Spinner, Stack, Text } from 'soapbox/components/ui';
-import { Button, Column, FormActions, Text } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
+import type { Backup as BackupEntity } from 'soapbox/reducers/backups';
+
 const messages = defineMessages({
   heading: { id: 'column.backups', defaultMessage: 'Backups' },
   create: { id: 'backups.actions.create', defaultMessage: 'Create backup' },
   emptyMessage: { id: 'backups.empty_message', defaultMessage: 'No backups found. {action}' },
   emptyMessageAction: { id: 'backups.empty_message.action', defaultMessage: 'Create one now?' },
+  download: { id: 'backups.download', defaultMessage: 'Download' },
   pending: { id: 'backups.pending', defaultMessage: 'Pending' },
 });
 
+interface IBackup {
+  backup: BackupEntity;
+}
+
+const Backup: React.FC<IBackup> = ({ backup }) => {
+  const intl = useIntl();
+
+  const button = (
+    <Button theme='primary' disabled={!backup.processed}>
+      {intl.formatMessage(backup.processed ? messages.download : messages.pending)}
+    </Button>
+  );
+
+  return (
+    <div key={backup.id} className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
+      <Stack space={2}>
+        <Stack>
+          <Text size='md'>
+            <FormattedDate
+              value={backup.inserted_at}
+              hour12
+              year='numeric'
+              month='short'
+              day='2-digit'
+              hour='numeric'
+              minute='2-digit'
+            />
+          </Text>
+        </Stack>
+        <HStack justifyContent='end'>
+          {backup.processed ? <a href={backup.url} target='_blank'>{button}</a> : button}
+        </HStack>
+      </Stack>
+    </div>
+  );
+};
+
 const Backups = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
@@ -35,34 +74,29 @@ const Backups = () => {
 
   const showLoading = isLoading && backups.count() === 0;
 
-  const emptyMessageAction = (
+  const emptyMessage = (
-    <a href='#' onClick={handleCreateBackup}>
+    <Card variant='rounded' size='lg'>
-      <Text tag='span' theme='primary' size='sm' className='hover:underline'>
+      {intl.formatMessage(messages.emptyMessage, {
-        {intl.formatMessage(messages.emptyMessageAction)}
+        action: (
-      </Text>
+          <a href='#' onClick={handleCreateBackup}>
-    </a>
+            <Text tag='span' theme='primary' size='sm' className='hover:underline'>
+              {intl.formatMessage(messages.emptyMessageAction)}
+            </Text>
+          </a>
+        ),
+      })}
+    </Card>
+  );
+
+  const body = showLoading ? <Spinner /> : backups.isEmpty() ? emptyMessage : (
+    <div className='mb-4 grid grid-cols-1 gap-4 sm:grid-cols-2'>
+      {backups.map((backup) => <Backup key={backup.id} backup={backup} />)}
+    </div>
   );
 
   return (
     <Column label={intl.formatMessage(messages.heading)}>
-      <ScrollableList
+      {body}
-        isLoading={isLoading}
-        showLoading={showLoading}
-        scrollKey='backups'
-        emptyMessage={intl.formatMessage(messages.emptyMessage, { action: emptyMessageAction })}
-      >
-        {backups.map((backup) => (
-          <div
-            className='p-4'
-            key={backup.id}
-          >
-            {backup.processed
-              ? <a href={backup.url} target='_blank'>{backup.inserted_at}</a>
-              : <Text theme='subtle'>{intl.formatMessage(messages.pending)}: {backup.inserted_at}</Text>
-            }
-          </div>
-        ))}
-      </ScrollableList>
 
       <FormActions>
         <Button theme='primary' disabled={isLoading} onClick={handleCreateBackup}>

src/features/embedded-status/index.tsx

@@ -67,7 +67,7 @@ const EmbeddedStatus: React.FC<IEmbeddedStatus> = ({ params }) => {
       onClick={e => e.stopPropagation()}
       target='_blank'
     >
-      <div className='pointer-events-none max-w-3xl p-4 sm:p-6'>
+      <div className='pointer-events-none p-4 sm:p-6'>
         {renderInner()}
       </div>
     </a>

src/locales/en.json

@@ -190,6 +190,7 @@
   "auth.logged_out": "Logged out.",
   "authorize.success": "Approved",
   "backups.actions.create": "Create backup",
+  "backups.download": "Download",
   "backups.empty_message": "No backups found. {action}",
   "backups.empty_message.action": "Create one now?",
   "backups.pending": "Pending",

src/reducers/backups.tsx

@@ -8,7 +8,7 @@ import {
 import type { AnyAction } from 'redux';
 import type { APIEntity } from 'soapbox/types/entities';
 
-const BackupRecord = ImmutableRecord({
+export const BackupRecord = ImmutableRecord({
   id: null as number | null,
   content_type: '',
   url: '',
@@ -17,7 +17,7 @@ const BackupRecord = ImmutableRecord({
   inserted_at: '',
 });
 
-type Backup = ReturnType<typeof BackupRecord>;
+export type Backup = ReturnType<typeof BackupRecord>;
 type State = ImmutableMap<string, Backup>;
 
 const initialState: State = ImmutableMap();

src/schemas/card.ts

@@ -1,5 +1,6 @@
 import punycode from 'punycode';
 
+import DOMPurify from 'isomorphic-dompurify';
 import { z } from 'zod';
 
 import { groupSchema } from './group';
@@ -54,6 +55,33 @@ const cardSchema = z.object({
     }
   }
 
+  const html = DOMPurify.sanitize(card.html, {
+    ALLOWED_TAGS: ['iframe'],
+    ALLOWED_ATTR: ['src', 'width', 'height', 'frameborder', 'allowfullscreen'],
+    RETURN_DOM: true,
+  });
+
+  html.querySelectorAll('iframe').forEach((frame) => {
+    try {
+      const src = new URL(frame.src);
+      if (src.protocol !== 'https:') {
+        throw new Error('iframe must be https');
+      }
+      if (src.origin === location.origin) {
+        throw new Error('iframe must not be same origin');
+      }
+      frame.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-presentation');
+    } catch (e) {
+      frame.remove();
+    }
+  });
+
+  card.html = html.innerHTML;
+
+  if (!card.html) {
+    card.type = 'link';
+  }
+
   return card;
 });