Merge pull request #14 from encryption4all/download-flow

Implement download/decrypt flow

Author: rubenhensen

src/lib/components/filesharing/Done.svelte

@@ -3,6 +3,7 @@
     import type { EncryptState } from '$lib/types/filesharing/attributes'
     import HelpToggle from '$lib/components/HelpToggle.svelte'
     import Chip from '$lib/components/Chip.svelte'
+    import FileList from '$lib/components/filesharing/FileList.svelte'
     import airplane from '$lib/assets/images/airplane.svg'
 
     interface props {
@@ -16,15 +17,7 @@
     <h2>{$_('filesharing.encryptPanel.succes')}</h2>
 
     <!-- Files box -->
-    <div class="info-box">
-        <h3>{$_('filesharing.encryptPanel.filesHeader')}</h3>
-        <div class="divider"></div>
-        <div class="files-list">
-            {#each EncryptState.files as file}
-                <div class="file-item">{file.name}</div>
-            {/each}
-        </div>
-    </div>
+    <FileList files={EncryptState.files.map(f => f.name)} />
 
     <!-- Recipients box -->
     <div class="info-box">
@@ -36,8 +29,8 @@
                     <div class="recipient-email">{recipient.email}</div>
                     {#if recipient.extra.length > 0}
                         <div class="recipient-attributes">
-                            {#each recipient.extra as attr}
-                                <Chip text={attr.v} size="sm" variant="default" />
+                            {#each recipient.extra.filter(a => a.v) as attr}
+                                <Chip text={attr.v!} size="sm" variant="default" />
                             {/each}
                         </div>
                     {/if}
@@ -106,28 +99,18 @@
         margin: 0rem 0rem;
     }
 
-    .files-list,
     .recipients-list {
         display: flex;
         flex-direction: column;
     }
 
-    .file-item,
     .recipient-item {
         padding: 0.3rem 0 0.4rem 1rem;
         margin: 0 0rem;
         font-family: var(--pg-font-family);
         font-size: 1rem;
         color: var(--pg-text);
         border-bottom: 1px solid var(--pg-strong-background);
-    }
-
-    .file-item:last-child,
-    .recipient-item:last-child {
-        border-bottom: none;
-    }
-
-    .recipient-item {
         display: flex;
         flex-direction: column;
         gap: 0.25rem;

src/lib/components/filesharing/FileList.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    import { _ } from 'svelte-i18n'
+
+    interface props {
+        files: string[]
+    }
+
+    let { files }: props = $props()
+</script>
+
+{#if files.length > 0}
+    <div class="file-list">
+        <div class="file-list-header">{$_('filesharing.encryptPanel.filesHeader')}</div>
+        {#each files as filename}
+            <div class="file-list-item">{filename}</div>
+        {/each}
+    </div>
+{/if}
+
+<style>
+    .file-list {
+        width: 100%;
+        background: var(--pg-soft-background);
+        border: 1px solid var(--pg-strong-background);
+        border-radius: var(--pg-border-radius-lg);
+        overflow: hidden;
+    }
+
+    .file-list-header {
+        font-weight: 700;
+        font-size: 0.95rem;
+        padding: 0.5rem 1rem;
+        color: var(--pg-text);
+        border-bottom: 1px solid var(--pg-strong-background);
+        font-family: var(--pg-font-family);
+    }
+
+    .file-list-item {
+        padding: 0.4rem 1rem;
+        font-size: 0.95rem;
+        color: var(--pg-text);
+        font-family: var(--pg-font-family);
+
+        &:not(:last-child) {
+            border-bottom: 1px solid var(--pg-strong-background);
+        }
+    }
+</style>

src/lib/components/filesharing/YiviQRCode.svelte

@@ -4,9 +4,11 @@
 
     interface props {
         mode?: 'qr' | 'deeplink'
+        id?: string
+        responsive?: boolean
     }
 
-    let { mode = 'qr' }: props = $props()
+    let { mode = 'qr', id = 'crypt-irma-qr', responsive = false }: props = $props()
 
     let qrLoaded = $state(false)
     let containerEl: HTMLDivElement
@@ -47,7 +49,7 @@
     })
 </script>
 
-<div id="crypt-irma-qr" class="yivi-qr-container" bind:this={containerEl}>
+<div {id} class="yivi-qr-container" class:responsive bind:this={containerEl}>
     {#if !qrLoaded}
         <svg class="spinner" viewBox="0 0 24 24" width="32" height="32">
             <circle class="spinner-circle" cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="3"></circle>
@@ -83,6 +85,18 @@
         padding: 10px;
     }
 
+    .yivi-qr-container.responsive {
+        /* width: 100%; */
+        height: auto;
+        min-height: 200px;
+    }
+
+    .yivi-qr-container.responsive :global(canvas),
+    .yivi-qr-container.responsive :global(svg) {
+        width: 100% !important;
+        height: auto !important;
+    }
+
     /* Hide everything except the QR canvas/svg */
     .yivi-qr-container :global(:not(canvas, svg, div:has(canvas), div:has(svg))) {
         display: none !important;

src/lib/locales/en.json

@@ -88,19 +88,24 @@
             "cancel": "Cancel"
         },
         "decryptpanel": {
-            "header": "Decrypt your files",
+            "header": "Download your files",
+            "pageDescription": "To download the files, you need to decrypt them. You do this by proving who you are with Yivi.",
             "downloadDecrypt": "Downloading & Decrypting...",
-            "irmaInstructionHeaderQr": "Scan QR-code with Yivi",
+            "irmaInstructionHeaderQr": "Decrypt",
             "irmaInstructionHeaderMobile": "Prove your identity with Yivi",
-            "irmaInstructionQr": "Decrypt the files by verifying your e-mail address. Please scan the QR-code below with the identification app Yivi.",
+            "irmaInstructionQr": "Scan this QR code with your Yivi app.",
             "irmaInstructionMobile": "Decrypt the files by verifying your e-mail address. Please click the button below to open the Yivi-app.",
             "noIrma": "Don't have the Yivi-app yet?",
             "decrypting": "Your files are being downloaded and decrypted afterwards.",
             "succes": "Successfully downloaded and decrypted",
             "askDownload": "Download",
             "askDownloadText": "Press the button below to start decrypting and downloading your files",
+            "doneMessage": "Your files are being downloaded and decrypted",
             "verifiedEmail": "The files are from",
-            "verifiedExtra": "The files were signed using"
+            "verifiedExtra": "The files were signed using",
+            "notFoundTitle": "These files no longer exist",
+            "notFoundSubtitle": "The link may have expired, or there may be an error in it.",
+            "notFoundMessage": "Ask the sender to send the files <strong>once more</strong>."
         },
         "encryptPanel": {
             "fileBox": {

src/lib/locales/nl.json

@@ -88,22 +88,27 @@
             "cancel": "Annuleren"
         },
         "decryptpanel": {
-            "header": "DOWNLOAD & ONTSLEUTEL",
+            "header": "Download je bestanden",
+            "pageDescription": "Om de bestanden te downloaden, moet je ze ontsleutelen. Dit doe je door te bewijzen wie je bent met Yivi.",
             "downloadDecrypt": "Downloading & ontsleutelen...",
-            "irmaInstructionHeaderQr": "Scan QR-code met Yivi",
+            "irmaInstructionHeaderQr": "Ontsleutel",
             "irmaInstructionHeaderMobile": "Bewijs identiteit met Yivi",
-            "irmaInstructionQr": "Ontsleutel het bestand door je e-mailadres te tonen. Scan daarvoor de onderstaande QR-code met de identificatie app Yivi.",
+            "irmaInstructionQr": "Scan deze QR code met je Yivi app.",
             "irmaInstructionMobile": "Ontsleutel het bestand door je e-mailadres te tonen. Click daarvoor op de onderstaande knop om naar de identificatie app Yivi te gaan.",
             "noIrma": "Nog geen Yivi-app?",
             "decrypting": "Jouw bestand wordt gedownload en vervolgens ontsleuteld.",
             "succes": "Succesvol gedownload en ontsleuteld",
             "askDownload": "Download",
             "askDownloadText": "Druk op onderstaande knop om de bestanden te ontsleutelen en downloaden.",
-            "verifiedEmail": "De bestanden zijn afkomstig van",
-            "verifiedExtra": "De bestanden zijn ondertekend met"
+            "doneMessage": "Je bestanden worden gedownload en ontsleuteld",
+            "verifiedEmail": "De bestanden komen van",
+            "verifiedExtra": "De bestanden zijn ondertekend met",
+            "notFoundTitle": "Deze bestanden bestaan niet (meer)",
+            "notFoundSubtitle": "Het kan zijn dat de link is verlopen, of dat er een fout in zit.",
+            "notFoundMessage": "Vraag de verzender de bestanden <strong>nog een keer te versturen</strong>."
         },
         "encryptPanel": {
-            "fileBox": {
+            "fileBox": { 
                 "tagline": "Verstuur je bestanden veilig",
                 "upperTextDropZone": "Sleep bestanden hierheen <br/> of",
                 "lowerTextDropZone": "klik om te uploaden <br/> (max. 2GB)",