add on:enter to export inputs

This commit is contained in:
marlon-erler
2026-09-05 02:36:10 +02:00
parent b7d85510d5
commit b1da972d09
5 changed files with 142 additions and 138 deletions
Binary file not shown.
Binary file not shown.
+141 -138
View File
@@ -758,6 +758,7 @@ function ExportModal(
</span> </span>
<input <input
bind:value={fileTransferViewModel.exportKey} bind:value={fileTransferViewModel.exportKey}
on:enter={fileTransferViewModel.downloadFile}
type="password" type="password"
></input> ></input>
</div> </div>
@@ -776,35 +777,36 @@ function ExportModal(
bind:value={ bind:value={
fileTransferViewModel.exportKeyConfirmation fileTransferViewModel.exportKeyConfirmation
} }
type="password" on:enter={fileTransferViewModel.downloadFile}
></input> type="password"
</div> ></input>
</label> </div>
</div> </label>
</main> </div>
<div class="flex-row width-100"> </main>
<button <div class="flex-row width-100">
class="flex" <button
on:click={ class="flex"
fileTransferViewModel.showExportSelectionModal on:click={
} fileTransferViewModel.showExportSelectionModal
> }
{coreViewModel.translations.general.backButton} >
</button> {coreViewModel.translations.general.backButton}
<button </button>
class="primary flex" <button
on:click={fileTransferViewModel.downloadFile} class="primary flex"
toggle:disabled={fileTransferViewModel.cannotExport} on:click={fileTransferViewModel.downloadFile}
> toggle:disabled={fileTransferViewModel.cannotExport}
{ >
coreViewModel.translations.dataTransferModal {
.downloadFileButton coreViewModel.translations.dataTransferModal
} .downloadFileButton
<span class="icon">download</span> }
</button> <span class="icon">download</span>
</div> </button>
</div> </div>
</div> </div>
</div>
); );
} }
@@ -813,57 +815,57 @@ function ImportModal(
fileTransferViewModel: FileTransferViewModel, fileTransferViewModel: FileTransferViewModel,
) { ) {
const isPresented = React.createProxyState( const isPresented = React.createProxyState(
[fileTransferViewModel.presentedModal], [fileTransferViewModel.presentedModal],
() => () =>
fileTransferViewModel.presentedModal.value == fileTransferViewModel.presentedModal.value ==
FileTransferModals.ImportSelection, FileTransferModals.ImportSelection,
); );
return ( return (
<div class="modal" toggle:open={isPresented}> <div class="modal" toggle:open={isPresented}>
<div> <div>
<main> <main>
<h2> <h2>
{ {
coreViewModel.translations.dataTransferModal coreViewModel.translations.dataTransferModal
.importHeadline .importHeadline
} }
</h2> </h2>
<div class="flex-column gap content-margin-bottom"> <div class="flex-column gap content-margin-bottom">
<input <input
id="file-transfer-input" id="file-transfer-input"
type="file" type="file"
on:change={ on:change={
fileTransferViewModel.updateImportSelection fileTransferViewModel.updateImportSelection
} }
></input> ></input>
</div> </div>
</main> </main>
<div class="flex-row width-100"> <div class="flex-row width-100">
<button <button
class="flex" class="flex"
on:click={ on:click={
fileTransferViewModel.showDirectionSelectionModal fileTransferViewModel.showDirectionSelectionModal
} }
> >
{coreViewModel.translations.general.backButton} {coreViewModel.translations.general.backButton}
</button> </button>
<button <button
class="primary flex" class="primary flex"
on:click={fileTransferViewModel.importFile} on:click={fileTransferViewModel.importFile}
toggle:disabled={fileTransferViewModel.cannotImport} toggle:disabled={fileTransferViewModel.cannotImport}
> >
{ {
coreViewModel.translations.dataTransferModal coreViewModel.translations.dataTransferModal
.importFileButton .importFileButton
} }
<span class="icon">arrow_forward</span> <span class="icon">arrow_forward</span>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
); );
} }
@@ -872,73 +874,74 @@ function ImportDecryptionDataModal(
fileTransferViewModel: FileTransferViewModel, fileTransferViewModel: FileTransferViewModel,
) { ) {
const isPresented = React.createProxyState( const isPresented = React.createProxyState(
[fileTransferViewModel.presentedModal], [fileTransferViewModel.presentedModal],
() => () =>
fileTransferViewModel.presentedModal.value == fileTransferViewModel.presentedModal.value ==
FileTransferModals.ImportDecryptData, FileTransferModals.ImportDecryptData,
); );
return ( return (
<div class="modal" toggle:open={isPresented}> <div class="modal" toggle:open={isPresented}>
<div> <div>
<main> <main>
<h2> <h2>
{ {
coreViewModel.translations.dataTransferModal coreViewModel.translations.dataTransferModal
.importHeadline .importHeadline
} }
</h2> </h2>
<div class="flex-column gap content-margin-bottom"> <div class="flex-column gap content-margin-bottom">
<label class="tile"> <label class="tile">
<span class="icon">key</span> <span class="icon">key</span>
<div> <div>
<span class="secondary"> <span class="secondary">
{ {
coreViewModel.translations coreViewModel.translations
.dataTransferModal.exportKey .dataTransferModal.exportKey
} }
</span> </span>
<input <input
bind:value={fileTransferViewModel.importKey} bind:value={fileTransferViewModel.importKey}
type="password" on:enter={fileTransferViewModel.decryptImport}
></input> type="password"
</div> ></input>
</label> </div>
</div> </label>
</div>
<p <p
class="error" class="error"
toggle:hidden={fileTransferViewModel.isImportKeyCorrect} toggle:hidden={fileTransferViewModel.isImportKeyCorrect}
> >
{ {
coreViewModel.translations.dataTransferModal coreViewModel.translations.dataTransferModal
.incorrectPassphraseError .incorrectPassphraseError
} }
</p> </p>
</main> </main>
<div class="flex-row width-100"> <div class="flex-row width-100">
<button <button
class="flex" class="flex"
on:click={fileTransferViewModel.showImportModal} on:click={fileTransferViewModel.showImportModal}
> >
{coreViewModel.translations.general.backButton} {coreViewModel.translations.general.backButton}
</button> </button>
<button <button
class="primary flex" class="primary flex"
on:click={fileTransferViewModel.decryptImport} on:click={fileTransferViewModel.decryptImport}
toggle:disabled={ toggle:disabled={
fileTransferViewModel.importDecryptSuccessful fileTransferViewModel.importDecryptSuccessful
} }
> >
{ {
coreViewModel.translations.dataTransferModal coreViewModel.translations.dataTransferModal
.decryptImportButton .decryptImportButton
} }
<span class="icon">arrow_forward</span> <span class="icon">arrow_forward</span>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
); );
} }
Binary file not shown.
@@ -139,6 +139,7 @@ export default class FileTransferViewModel extends Context {
}; };
downloadFile = async (): Promise<void> => { downloadFile = async (): Promise<void> => {
if (this.cannotExport.value == true) return;
const date = new Date().toISOString().split("T")[0]; const date = new Date().toISOString().split("T")[0];
const backup: Blob = const backup: Blob =