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.
+141 -138
View File
@@ -758,6 +758,7 @@ function ExportModal(
</span>
<input
bind:value={fileTransferViewModel.exportKey}
on:enter={fileTransferViewModel.downloadFile}
type="password"
></input>
</div>
@@ -776,35 +777,36 @@ function ExportModal(
bind:value={
fileTransferViewModel.exportKeyConfirmation
}
type="password"
></input>
</div>
</label>
</div>
</main>
<div class="flex-row width-100">
<button
class="flex"
on:click={
fileTransferViewModel.showExportSelectionModal
}
>
{coreViewModel.translations.general.backButton}
</button>
<button
class="primary flex"
on:click={fileTransferViewModel.downloadFile}
toggle:disabled={fileTransferViewModel.cannotExport}
>
{
coreViewModel.translations.dataTransferModal
.downloadFileButton
}
<span class="icon">download</span>
</button>
</div>
</div>
</div>
on:enter={fileTransferViewModel.downloadFile}
type="password"
></input>
</div>
</label>
</div>
</main>
<div class="flex-row width-100">
<button
class="flex"
on:click={
fileTransferViewModel.showExportSelectionModal
}
>
{coreViewModel.translations.general.backButton}
</button>
<button
class="primary flex"
on:click={fileTransferViewModel.downloadFile}
toggle:disabled={fileTransferViewModel.cannotExport}
>
{
coreViewModel.translations.dataTransferModal
.downloadFileButton
}
<span class="icon">download</span>
</button>
</div>
</div>
</div>
);
}
@@ -813,57 +815,57 @@ function ImportModal(
fileTransferViewModel: FileTransferViewModel,
) {
const isPresented = React.createProxyState(
[fileTransferViewModel.presentedModal],
() =>
fileTransferViewModel.presentedModal.value ==
FileTransferModals.ImportSelection,
[fileTransferViewModel.presentedModal],
() =>
fileTransferViewModel.presentedModal.value ==
FileTransferModals.ImportSelection,
);
return (
<div class="modal" toggle:open={isPresented}>
<div>
<main>
<h2>
{
coreViewModel.translations.dataTransferModal
.importHeadline
}
</h2>
<div class="modal" toggle:open={isPresented}>
<div>
<main>
<h2>
{
coreViewModel.translations.dataTransferModal
.importHeadline
}
</h2>
<div class="flex-column gap content-margin-bottom">
<input
id="file-transfer-input"
type="file"
on:change={
fileTransferViewModel.updateImportSelection
}
></input>
</div>
</main>
<div class="flex-column gap content-margin-bottom">
<input
id="file-transfer-input"
type="file"
on:change={
fileTransferViewModel.updateImportSelection
}
></input>
</div>
</main>
<div class="flex-row width-100">
<button
class="flex"
on:click={
fileTransferViewModel.showDirectionSelectionModal
}
>
{coreViewModel.translations.general.backButton}
</button>
<button
class="primary flex"
on:click={fileTransferViewModel.importFile}
toggle:disabled={fileTransferViewModel.cannotImport}
>
{
coreViewModel.translations.dataTransferModal
.importFileButton
}
<span class="icon">arrow_forward</span>
</button>
</div>
</div>
</div>
<div class="flex-row width-100">
<button
class="flex"
on:click={
fileTransferViewModel.showDirectionSelectionModal
}
>
{coreViewModel.translations.general.backButton}
</button>
<button
class="primary flex"
on:click={fileTransferViewModel.importFile}
toggle:disabled={fileTransferViewModel.cannotImport}
>
{
coreViewModel.translations.dataTransferModal
.importFileButton
}
<span class="icon">arrow_forward</span>
</button>
</div>
</div>
</div>
);
}
@@ -872,73 +874,74 @@ function ImportDecryptionDataModal(
fileTransferViewModel: FileTransferViewModel,
) {
const isPresented = React.createProxyState(
[fileTransferViewModel.presentedModal],
() =>
fileTransferViewModel.presentedModal.value ==
FileTransferModals.ImportDecryptData,
[fileTransferViewModel.presentedModal],
() =>
fileTransferViewModel.presentedModal.value ==
FileTransferModals.ImportDecryptData,
);
return (
<div class="modal" toggle:open={isPresented}>
<div>
<main>
<h2>
{
coreViewModel.translations.dataTransferModal
.importHeadline
}
</h2>
<div class="modal" toggle:open={isPresented}>
<div>
<main>
<h2>
{
coreViewModel.translations.dataTransferModal
.importHeadline
}
</h2>
<div class="flex-column gap content-margin-bottom">
<label class="tile">
<span class="icon">key</span>
<div>
<span class="secondary">
{
coreViewModel.translations
.dataTransferModal.exportKey
}
</span>
<input
bind:value={fileTransferViewModel.importKey}
type="password"
></input>
</div>
</label>
</div>
<div class="flex-column gap content-margin-bottom">
<label class="tile">
<span class="icon">key</span>
<div>
<span class="secondary">
{
coreViewModel.translations
.dataTransferModal.exportKey
}
</span>
<input
bind:value={fileTransferViewModel.importKey}
on:enter={fileTransferViewModel.decryptImport}
type="password"
></input>
</div>
</label>
</div>
<p
class="error"
toggle:hidden={fileTransferViewModel.isImportKeyCorrect}
>
{
coreViewModel.translations.dataTransferModal
.incorrectPassphraseError
}
</p>
</main>
<div class="flex-row width-100">
<button
class="flex"
on:click={fileTransferViewModel.showImportModal}
>
{coreViewModel.translations.general.backButton}
</button>
<button
class="primary flex"
on:click={fileTransferViewModel.decryptImport}
toggle:disabled={
fileTransferViewModel.importDecryptSuccessful
}
>
{
coreViewModel.translations.dataTransferModal
.decryptImportButton
}
<span class="icon">arrow_forward</span>
</button>
</div>
</div>
</div>
<p
class="error"
toggle:hidden={fileTransferViewModel.isImportKeyCorrect}
>
{
coreViewModel.translations.dataTransferModal
.incorrectPassphraseError
}
</p>
</main>
<div class="flex-row width-100">
<button
class="flex"
on:click={fileTransferViewModel.showImportModal}
>
{coreViewModel.translations.general.backButton}
</button>
<button
class="primary flex"
on:click={fileTransferViewModel.decryptImport}
toggle:disabled={
fileTransferViewModel.importDecryptSuccessful
}
>
{
coreViewModel.translations.dataTransferModal
.decryptImportButton
}
<span class="icon">arrow_forward</span>
</button>
</div>
</div>
</div>
);
}