Skip to content

Commit 358d000

Browse files
dobby-coder[bot]dobby-coder[bot]
authored
fix(decrypt): consolidated /decrypt page UX fixes (#203)
* fix: hide upload field on /decrypt when UUID is loaded When the /decrypt page is opened from a QR code or shared link with a ?uuid= parameter (or a #hash payload), the file upload area is no longer relevant and is confusing alongside the auto-loaded message. Hide the upload area whenever hashMode is true. Closes #167 * fix: clarify QR code instructions for first-time Yivi users QR code instructions previously gave little context, leaving first-time users unsure what to do. Make the instruction text explicit about Yivi being a separate app on the user's phone, surface the existing 'What is Yivi?' help toggle on the encrypt-flow QR popups, and add a description under the fallback decrypt QR. Closes #162 * fix: open Yivi app on mobile decrypt page instead of QR The /decrypt fallback page rendered a QR code on mobile, which is useless when the user is already on their phone. Mirror the /download page's pattern: detect mobile and pass mode=deeplink to YiviQRCode so it auto-clicks the Yivi-app button and triggers the universal link. Closes #163 --------- Co-authored-by: dobby-yivi-agent[bot] <275734547+dobby-yivi-agent[bot]@users.noreply.github.com>
1 parent cd365ac commit 358d000

5 files changed

Lines changed: 50 additions & 17 deletions

File tree

‎src/lib/components/fallback/Decrypt.svelte‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
1515
import YiviQRCode from '$lib/components/filesharing/YiviQRCode.svelte'
1616
import Chip from '$lib/components/Chip.svelte'
17+
import { isMobile } from '$lib/browser-detect'
1718
1819
const STATES = {
1920
Uninit: 'Uninit',
@@ -26,6 +27,7 @@
2627
}
2728
2829
let decryptState = $state(STATES.Uninit)
30+
const isMobileDevice = isMobile()
2931
3032
let policies = $state()
3133
let keylist = $state()
@@ -295,16 +297,28 @@
295297
{:else if decryptState === STATES.Qr}
296298
<div class="decrypt-card">
297299
<h3>
298-
{$_('fallback.decrypt.scanQr', { default: 'Scan QR code' })}
300+
{$_('fallback.decrypt.scanQr', {
301+
default: 'Scan QR code with Yivi',
302+
})}
299303
</h3>
304+
<p class="card-subtitle">
305+
{$_('fallback.decrypt.scanQrDesc', {
306+
default:
307+
'Verify your identity by scanning this QR code with the free Yivi app on your phone.',
308+
})}
309+
</p>
300310
{#if showHints}
301311
<div class="hints">
302312
{#each hints as hint (hint)}
303313
<span class="hint-chip">{hint}</span>
304314
{/each}
305315
</div>
306316
{/if}
307-
<YiviQRCode id="yivi-fallback" responsive />
317+
<YiviQRCode
318+
id="yivi-fallback"
319+
responsive
320+
mode={isMobileDevice ? 'deeplink' : 'qr'}
321+
/>
308322
</div>
309323
{:else if decryptState === STATES.Decrypting}
310324
<div class="spinner-wrapper">

‎src/lib/components/filesharing/SendButton.svelte‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -449,6 +449,13 @@
449449
<div class="qr-code-wrapper">
450450
<YiviQRCode />
451451
</div>
452+
453+
<HelpToggle
454+
title={$_('filesharing.encryptPanel.yiviInfo')}
455+
content={$_('filesharing.encryptPanel.yiviInfoText')}
456+
linkText={$_('filesharing.encryptPanel.yiviInfoLink')}
457+
linkUrl="https://yivi.app"
458+
/>
452459
</div>
453460
<div class="popup-arrow"></div>
454461
</div>
@@ -476,6 +483,12 @@
476483
{$_('filesharing.sign.scanQR')}
477484
</p>
478485
<div class="qr-code-wrapper"><YiviQRCode /></div>
486+
<HelpToggle
487+
title={$_('filesharing.encryptPanel.yiviInfo')}
488+
content={$_('filesharing.encryptPanel.yiviInfoText')}
489+
linkText={$_('filesharing.encryptPanel.yiviInfoLink')}
490+
linkUrl="https://yivi.app"
491+
/>
479492
<Chip
480493
text={$_('filesharing.sign.close')}
481494
onclick={() => {

‎src/lib/locales/en.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@
139139
"tryAgain": "Try again",
140140
"cancel": "Cancel",
141141
"sign": {
142-
"scanQR": "Scan this QR code with your Yivi app.",
142+
"scanQR": "Verify your identity by scanning this QR code with the free Yivi app on your phone.",
143143
"close": "Close",
144144
"signOtherDevice": "Sign with Yivi on another device",
145145
"followSteps": "Follow the steps in the Yivi app",
@@ -149,9 +149,9 @@
149149
"header": "Download your files",
150150
"pageDescription": "To download the files, you need to decrypt them. You do this by proving who you are with Yivi.",
151151
"downloadDecrypt": "Downloading & Decrypting...",
152-
"irmaInstructionHeaderQr": "Decrypt",
152+
"irmaInstructionHeaderQr": "Decrypt with Yivi",
153153
"irmaInstructionHeaderMobile": "Prove your identity with Yivi",
154-
"irmaInstructionQr": "Scan this QR code with your Yivi app.",
154+
"irmaInstructionQr": "Decrypt the files by verifying your e-mail address. Scan the QR code below with the free Yivi app on your phone.",
155155
"irmaInstructionMobile": "Decrypt the files by verifying your e-mail address. Please click the button below to open the Yivi-app.",
156156
"noIrma": "Don't have the Yivi-app yet?",
157157
"decrypting": "Your files are being downloaded and decrypted afterwards.",

‎src/lib/locales/nl.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@
139139
"tryAgain": "Probeer opnieuw",
140140
"cancel": "Annuleer",
141141
"sign": {
142-
"scanQR": "Scan deze QR-code met je Yivi app.",
142+
"scanQR": "Bewijs wie je bent door deze QR-code te scannen met de gratis Yivi-app op je telefoon.",
143143
"close": "Sluit",
144144
"signOtherDevice": "Onderteken met Yivi op een ander apparaat",
145145
"followSteps": "Volg de stappen in de Yivi app",
@@ -149,9 +149,9 @@
149149
"header": "Download je bestanden",
150150
"pageDescription": "Om de bestanden te downloaden, moet je ze ontsleutelen. Dit doe je door te bewijzen wie je bent met Yivi.",
151151
"downloadDecrypt": "Downloading & ontsleutelen...",
152-
"irmaInstructionHeaderQr": "Ontsleutel",
152+
"irmaInstructionHeaderQr": "Ontsleutel met Yivi",
153153
"irmaInstructionHeaderMobile": "Bewijs identiteit met Yivi",
154-
"irmaInstructionQr": "Scan deze QR code met je Yivi app.",
154+
"irmaInstructionQr": "Ontsleutel de bestanden door je e-mailadres te verifiëren. Scan de onderstaande QR-code met de gratis Yivi-app op je telefoon.",
155155
"irmaInstructionMobile": "Ontsleutel het bestand door je e-mailadres te tonen. Click daarvoor op de onderstaande knop om naar de identificatie app Yivi te gaan.",
156156
"noIrma": "Nog geen Yivi-app?",
157157
"decrypting": "Jouw bestand wordt gedownload en vervolgens ontsleuteld.",

‎src/routes/(app)/decrypt/+page.svelte‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -131,15 +131,21 @@
131131
</div>
132132
<div class="fallback-container">
133133
<div class="left-panel">
134-
<label class="upload-area">
135-
<Icon icon="mdi:upload-lock" width="28px" aria-hidden="true" />
136-
<span>{$_('fallback.drop')}</span>
137-
<input
138-
type="file"
139-
onchange={onFile}
140-
aria-label={$_('fallback.drop')}
141-
/>
142-
</label>
134+
{#if !hashMode}
135+
<label class="upload-area">
136+
<Icon
137+
icon="mdi:upload-lock"
138+
width="28px"
139+
aria-hidden="true"
140+
/>
141+
<span>{$_('fallback.drop')}</span>
142+
<input
143+
type="file"
144+
onchange={onFile}
145+
aria-label={$_('fallback.drop')}
146+
/>
147+
</label>
148+
{/if}
143149
144150
<div class="search-bar">
145151
<div class="search-input-wrapper">

0 commit comments

Comments
 (0)