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

return to previous view after approval flow

Browse Source
This commit is contained in:
Joseph Montanaro
2023-05-01 13:27:28 -07:00
parent 886fcd9bb8
commit a75f34865e
9 changed files with 70 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/App.svelte
View File

@@ -1,11 +1,13 @@
<script>
import { onMount } from 'svelte';
import { listen } from '@tauri-apps/api/event';
import { invoke } from '@tauri-apps/api/tauri';
import { appState } from './lib/state.js';
import { appState, acceptRequest } from './lib/state.js';
import { views, currentView, navigate } from './lib/routing.js';
$views = import.meta.glob('./views/*.svelte', {eager: true});
navigate('Home');
@@ -14,6 +16,13 @@ invoke('get_config').then(config => $appState.config = config);
listen('credentials-request', (tauriEvent) => {
$appState.pendingRequests.put(tauriEvent.payload);
});
// $appState.pendingRequests.get().then(req => {
// $appState.currentRequest = req;
// })
appState.subscribe($s => window.state = $s);
acceptRequest();
</script>

1
src/lib/routing.js
View File

@@ -3,6 +3,7 @@ import { writable, get } from 'svelte/store';
export let views = writable();
export let currentView = writable();
export let previousView = writable();
export function navigate(viewName) {
let v = get(views)[`./views/${viewName}.svelte`].default;

24
src/lib/state.js
View File

@@ -1,9 +1,31 @@
import { writable } from 'svelte/store';
import { writable, get } from 'svelte/store';
import queue from './queue.js';
import { navigate, currentView, previousView } from './routing.js';
export let appState = writable({
currentRequest: null,
pendingRequests: queue(),
credentialStatus: 'locked',
});
export async function acceptRequest() {
let req = await get(appState).pendingRequests.get();
appState.update($appState => {
$appState.currentRequest = req;
return $appState;
});
previousView.set(get(currentView));
navigate('Approve');
}
export function completeRequest() {
appState.update($appState => {
$appState.currentRequest = null;
return $appState;
});
currentView.set(get(previousView));
previousView.set(null);
acceptRequest();
}

13
src/views/Approve.svelte
View File

@@ -8,9 +8,10 @@
async function approve() {
$appState.currentRequest.approval = 'Approved';
let status = await invoke('get_session_status');
if (status === 'unlocked') {
navigate('ShowApproved');
navigate('ShowResponse');
}
else if (status === 'locked') {
navigate('Unlock');
@@ -20,9 +21,15 @@
}
}
var appName = null;
function deny() {
$appState.currentRequest.approval = 'Denied';
navigate('ShowResponse');
}
let appName = null;
if ($appState.currentRequest.clients.length === 1) {
let path = $appState.currentRequest.clients[0].exe;
// grab the filename from the path
let m = path.match(/\/([^/]+?$)|\\([^\\]+?$)/);
appName = m[1] || m[2];
}
@@ -40,7 +47,7 @@
</div>
<div class="grid grid-cols-2">
<Link target="ShowDenied" hotkey="Escape">
<Link target="{deny}" hotkey="Escape">
<button class="btn btn-error justify-self-start">
Deny
<kbd class="ml-2 normal-case px-1 py-0.5 rounded border border-neutral">Esc</kbd>

2
src/views/EnterCredentials.svelte
View File

@@ -29,7 +29,7 @@
try {
await invoke('save_credentials', {credentials, passphrase});
if ($appState.currentRequest) {
navigate('ShowApproved');
navigate('ShowResponse');
}
else {
navigate('Home');

12
src/views/Home.svelte
View File

@@ -11,12 +11,12 @@
import vaultDoorSvg from '../assets/vault_door.svg?raw';
onMount(async () => {
// will block until a request comes in
let req = await $appState.pendingRequests.get();
$appState.currentRequest = req;
navigate('Approve');
});
// onMount(async () => {
// // will block until a request comes in
// let req = await $appState.pendingRequests.get();
// $appState.currentRequest = req;
// navigate('Approve');
// });
</script>

53
src/views/ShowDenied.svelte
View File

@@ -1,53 +0,0 @@
<script>
import { onMount } from 'svelte';
import { draw, fade } from 'svelte/transition';
import { invoke } from '@tauri-apps/api/tauri';
import { appState } from '../lib/state.js';
import { navigate } from '../lib/routing.js';
import ErrorAlert from '../ui/ErrorAlert.svelte';
import Icon from '../ui/Icon.svelte';
import Link from '../ui/Link.svelte';
let error = null;
async function respond() {
let response = {
id: $appState.currentRequest.id,
approval: 'Denied',
}
try {
await invoke('respond', {response});
$appState.currentRequest = null;
window.setTimeout(() => navigate('Home'), 1000);
}
catch (e) {
error = e;
}
}
onMount(respond);
</script>
{#if error}
<div class="flex flex-col h-screen items-center justify-center m-auto max-w-lg">
<ErrorAlert>
{error}
<svelte:fragment slot="buttons">
<Link target="Home">
<button class="btn btn-sm btn-alert-error" on:click={() => navigate('Home')}>Ok</button>
</Link>
</svelte:fragment>
</ErrorAlert>
</div>
{:else}
<div class="flex flex-col items-center justify-center h-screen max-w-max m-auto">
<svg xmlns="http://www.w3.org/2000/svg" class="w-36 h-36" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
<path in:draw="{{duration: 500}}" stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div in:fade="{{delay: 200, duration: 300}}" class="text-2xl font-bold">Denied!</div>
</div>
{/if}

43
src/views/ShowApproved.svelte → src/views/ShowResponse.svelte
View File

@@ -3,10 +3,8 @@
import { draw, fade } from 'svelte/transition';
import { invoke } from '@tauri-apps/api/tauri';
import { appState } from '../lib/state.js';
import { navigate } from '../lib/routing.js';
import { appState, completeRequest } from '../lib/state.js';
import ErrorAlert from '../ui/ErrorAlert.svelte';
import Icon from '../ui/Icon.svelte';
import Link from '../ui/Link.svelte';
let success = false;
@@ -17,19 +15,17 @@
let fadeDelay = drawDuration * 0.4;
async function respond() {
let response = {
let packet = {
id: $appState.currentRequest.id,
approval: 'Approved',
approval: $appState.currentRequest.approval,
};
try {
await invoke('respond', {response});
await invoke('respond', {response: packet});
success = true;
$appState.currentRequest = null;
window.setTimeout(
() => navigate('Home'),
// Extra 50ms so the window can finish disappearing before the screen changes
completeRequest,
// Extra 50ms so the window can finish disappearing before the redraw
Math.min(5000, $appState.config.rehide_ms + 50),
);
}
@@ -55,21 +51,18 @@
</div>
{:else if success}
<div class="flex flex-col h-screen items-center justify-center max-w-max m-auto">
<svg xmlns="http://www.w3.org/2000/svg" class="w-36 h-36" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
<path in:draw="{{duration: drawDuration}}" stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
{#if $appState.currentRequest.approval === 'Approved'}
<svg xmlns="http://www.w3.org/2000/svg" class="w-36 h-36" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
<path in:draw="{{duration: drawDuration}}" stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
{:else}
<svg xmlns="http://www.w3.org/2000/svg" class="w-36 h-36" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
<path in:draw="{{duration: 500}}" stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
{/if}
<div in:fade="{{duration: fadeDuration, delay: fadeDelay}}" class="text-2xl font-bold">Approved!</div>
<div in:fade="{{duration: fadeDuration, delay: fadeDelay}}" class="text-2xl font-bold">
{$appState.currentRequest.approval}!
</div>
</div>
{/if}
<!--
{#if error}
<div class="text-red-400">{error}</div>
{:else}
<h1 class="text-4xl text-gray-300">Approved!</h1>
{/if}
-->

2
src/views/Unlock.svelte
View File

@@ -24,7 +24,7 @@
let r = await invoke('unlock', {passphrase});
$appState.credentialStatus = 'unlocked';
if ($appState.currentRequest) {
navigate('ShowApproved');
navigate('ShowResponse');
}
else {
navigate('Home');