jfmonty2/creddy
2
1
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases 15 Wiki Activity

rework error alerts

Browse Source
This commit is contained in:
Joseph Montanaro
2024-06-28 20:35:18 -04:00
parent 504c0b4156
commit acc5c71bfa
13 changed files with 135 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/views/Approve.svelte
View File

@ -11,7 +11,7 @@
// Extra 50ms so the window can finish disappearing before the redraw
const rehideDelay = Math.min(5000, $appState.config.rehide_ms + 50);
let error, alert;
let alert;
let success = false;
async function sendResponse() {
try {
@ -20,14 +20,14 @@
window.setTimeout(cleanupRequest, rehideDelay);
}
catch (e) {
if (error) {
alert.shake();
}
error = e;
// reset to null so that we go back to asking for approval
$appState.currentRequest.response = null;
// setTimeout forces this to not happen until the alert has been rendered
window.setTimeout(() => alert.setError(e), 0);
}
}
async function handleResponse() {
async function handleResponseCollected() {
if (
$appState.sessionStatus === 'unlocked'
|| $appState.currentRequest.response.approval === 'Denied'
@ -41,20 +41,17 @@
{#if success}
<!-- if we have successfully sent a response, show it -->
<ShowResponse />
{:else if !$appState.currentRequest?.response || error}
<!-- if there's no response, or if there was an error sending it, ask for response -->
{:else if !$appState.currentRequest?.response}
<!-- if a response hasn't been collected, ask for it -->
<div class="flex flex-col space-y-4 p-4 m-auto max-w-xl h-screen items-center justify-center">
{#if error}
<ErrorAlert bind:this={alert}>
{error.msg}
<svelte:fragment slot="buttons">
<button class="btn btn-sm btn-alert-error" on:click={cleanupRequest}>Cancel</button>
<button class="btn btn-sm btn-alert-error" on:click={sendResponse}>Retry</button>
</svelte:fragment>
</ErrorAlert>
{/if}
<ErrorAlert bind:this={alert}>
<svelte:fragment slot="buttons">
<button class="btn btn-sm btn-alert-error" on:click={cleanupRequest}>Cancel</button>
<button class="btn btn-sm btn-alert-error" on:click={sendResponse}>Retry</button>
</svelte:fragment>
</ErrorAlert>
<CollectResponse on:response={handleResponse} />
<CollectResponse on:response={handleResponseCollected} />
</div>
{:else if $appState.sessionStatus === 'locked'}
<!-- if session is locked and we do have a response, we must be waiting for unlock -->

2
src/views/Home.svelte
View File

@ -56,7 +56,7 @@
</div>
</Link>
<Link target="">
<Link target={() => invoke('exit')}>
<div class="flex flex-col items-center gap-4 h-full max-w-56 rounded-box p-4 border border-warning hover:bg-base-200 transition-colors">
<Icon name="arrow-right-start-on-rectangle" class="size-12 stroke-1 stroke-warning" />
<h3 class="text-lg font-bold">Exit</h3>

2
src/views/ManageCredentials.svelte
View File

@ -36,7 +36,7 @@
<h1 slot="title" class="text-2xl font-bold">Credentials</h1>
</Nav>
<div class="max-w-xl mx-auto flex flex-col gap-y-4 justify-center">
<div class="max-w-xl mx-auto mb-12 flex flex-col gap-y-4 justify-center">
<div class="divider">
<h2 class="text-xl font-bold">AWS Access Keys</h2>
</div>

2
src/views/Settings.svelte
View File

@ -5,7 +5,6 @@
import { appState } from '../lib/state.js';
import Nav from '../ui/Nav.svelte';
import Link from '../ui/Link.svelte';
import ErrorAlert from '../ui/ErrorAlert.svelte';
import SettingsGroup from '../ui/settings/SettingsGroup.svelte';
import Keybind from '../ui/settings/Keybind.svelte';
import { Setting, ToggleSetting, NumericSetting, FileSetting, TextSetting, TimeSetting } from '../ui/settings';
@ -21,6 +20,7 @@
let error = null;
async function save() {
try {
throw('wtf');
await invoke('save_config', {config});
$appState.config = await invoke('get_config');
}

26
src/views/Unlock.svelte
View File

@ -17,34 +17,22 @@
const dispatch = createEventDispatcher();
let errorMsg = null;
let alert;
let passphrase = '';
let saving = false;
async function unlock() {
saving = true;
try {
saving = true;
let r = await invoke('unlock', {passphrase});
await alert.run(async () => invoke('unlock', {passphrase}));
$appState.sessionStatus = 'unlocked';
emit('unlocked');
dispatch('unlocked');
}
catch (e) {
const root = getRootCause(e);
if (e.code === 'GetSession' && root.code) {
errorMsg = `Error response from AWS (${root.code}): ${root.msg}`;
}
else {
errorMsg = e.msg;
}
// if the alert already existed, shake it
if (alert) {
alert.shake();
}
finally {
saving = false;
}
}
</script>
@ -61,9 +49,7 @@
<label class="space-y-4">
<h2 class="font-bold text-xl text-center">Please enter your passphrase</h2>
{#if errorMsg}
<ErrorAlert bind:this="{alert}">{errorMsg}</ErrorAlert>
{/if}
<ErrorAlert bind:this="{alert}" />
<!-- svelte-ignore a11y-autofocus -->
<PassphraseInput autofocus="true" bind:value={passphrase} placeholder="correct horse battery staple" />

32
src/views/credentials/AwsCredential.svelte
View File

@ -25,17 +25,11 @@
// (sadly we can't use a reactive binding because reasons I guess)
defaults.subscribe(d => local.is_default = local.id === d[local.credential.type])
let error, alert;
let alert;
async function saveCredential() {
try {
await invoke('save_credential', {record: local});
dispatch('update');
showDetails = false;
}
catch (e) {
if (error) alert.shake();
error = e;
}
await invoke('save_credential', {record: local});
dispatch('update');
showDetails = false;
}
let deleteModal;
@ -51,14 +45,14 @@
async function deleteCredential() {
try {
if (!record.isNew) {
await invoke('delete_credential', {id: record.id});
}
dispatch('update');
}
catch (e) {
if (error) alert.shake();
error = e;
showDetails = true;
// wait for showDetails to take effect and the alert to be rendered
window.setTimeout(() => alert.setError(e), 0);
}
}
</script>
@ -95,17 +89,13 @@
{#if showDetails}
{#if error}
<div class="px-6">
<ErrorAlert bind:this={alert}>{error}</ErrorAlert>
</div>
{/if}
<form
transition:slide|local={{duration: 200}}
class=" px-6 pb-4 space-y-4"
on:submit|preventDefault={saveCredential}
on:submit|preventDefault={() => alert.run(saveCredential)}
>
<ErrorAlert bind:this={alert} />
<div class="grid grid-cols-[auto_1fr] items-center gap-4">
{#if record.isNew}
<span class="justify-self-end">Name</span>
@ -131,7 +121,7 @@
<div class="flex justify-between">
<label class="label cursor-pointer justify-self-start space-x-4">
<span class="label-text">Default for type</span>
<span class="label-text">Default AWS access key</span>
<input type="checkbox" class="toggle toggle-accent" bind:checked={local.is_default}>
</label>
{#if isModified}

58
src/views/passphrase/EnterPassphrase.svelte
View File

@ -14,48 +14,68 @@
const dispatch = createEventDispatcher();
let alert, saving;
let alert;
let saving = false;
let passphrase = '';
let confirmPassphrase = '';
let error = null;
function confirm() {
// onChange only fires when an input loses focus, so always set the error if not set
function onChange() {
console.log(`onChange: passphrase=${passphrase}, confirmPassphrase=${confirmPassphrase}`)
if (passphrase !== confirmPassphrase) {
error = 'Passphrases do not match.';
alert.setError('Passphrases do not match.');
}
else {
alert.setError(null);
}
}
// onInput fires on every keystroke, so only dismiss the error, don't create it
function onInput() {
console.log(`onInput: passphrase=${passphrase}, confirmPassphrase=${confirmPassphrase}`)
if (passphrase === confirmPassphrase) {
alert.setError(null);
}
}
async function save() {
if (passphrase === '' || passphrase !== confirmPassphrase) {
alert.shake();
if (passphrase !== confirmPassphrase) {
return;
}
if (passphrase === '') {
alert.setError('Passphrase is empty.')
return;
}
saving = true;
try {
await invoke('set_passphrase', {passphrase});
$appState.sessionStatus = 'unlocked';
dispatch('save');
await alert.run(async () => {
await invoke('set_passphrase', {passphrase})
throw('something bad happened');
$appState.sessionStatus = 'unlocked';
dispatch('save');
});
}
catch (e) {
if (error) alert.shake();
error = e;
finally {
saving = false;
}
saving = false;
}
</script>
<form class="form-control gap-y-4" on:submit|preventDefault={save}>
{#if error}
<ErrorAlert bind:this={alert}>{error}</ErrorAlert>
{/if}
<ErrorAlert bind:this={alert} />
<label class="form-control w-full">
<div class="label">
<span class="label-text">Passphrase</span>
</div>
<PassphraseInput bind:value={passphrase} placeholder="correct horse battery staple" />
<PassphraseInput
bind:value={passphrase}
on:input={onInput}
placeholder="correct horse battery staple"
/>
</label>
<label class="form-control w-full">
@ -64,8 +84,8 @@
</div>
<PassphraseInput
bind:value={confirmPassphrase}
on:input={onInput} on:change={onChange}
placeholder="correct horse battery staple"
on:change={confirm}
/>
</label>
@ -78,7 +98,7 @@
</button>
{#if cancellable}
<Link target="Home" hotkey="Escape">
<Link target="Settings" hotkey="Escape">
<button type="button" class="btn btn-outline btn-sm w-full">Cancel</button>
</Link>
{/if}

29
src/views/passphrase/ResetPassphrase.svelte
View File

@ -2,31 +2,28 @@
import { invoke } from '@tauri-apps/api/core';
import { appState } from '../../lib/state.js';
import ErrorAlert from '../../ui/ErrorAlert.svelte';
let modal, error, alert;
function reset() {
try {
invoke('reset_session');
$appState.sessionStatus = 'empty';
}
catch (e) {
if (alert) alert.shake();
error = e;
}
let modal;
let alert;
async function reset() {
await invoke('reset_session');
$appState.sessionStatus = 'empty';
}
</script>
<button type="button" class="self-end text-sm text-secondary/75 hover:text-secondary hover:underline focus:ring-accent" on:click={modal.showModal()}>
<button type="button" class="self-end text-sm text-secondary/75 hover:underline focus:ring-accent" on:click={modal.showModal()}>
Reset passphrase
</button>
<dialog class="modal" bind:this={modal}>
<div class="modal-box space-y-6">
{#if error}
<ErrorAlert>{error}</ErrorAlert>
{/if}
<ErrorAlert bind:this={alert} />
<h3 class="text-lg font-bold">Delete all credentials?</h3>
<div class="space-y-2">
<p>Credentials are encrypted with your current passphrase and will be lost if the passphrase is reset.</p>
@ -35,7 +32,9 @@
<div class="modal-action">
<form method="dialog" class="flex gap-x-4">
<button autofocus class="btn btn-outline">Cancel</button>
<button class="btn btn-error" on:click={reset}>Delete</button>
<button class="btn btn-error" on:click|preventDefault={() => alert.run(reset)}>
Reset
</button>
</form>
</div>
</div>