return to previous view after approval flow
This commit is contained in:
parent
886fcd9bb8
commit
a75f34865e
@ -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>
|
||||
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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();
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
try {
|
||||
await invoke('save_credentials', {credentials, passphrase});
|
||||
if ($appState.currentRequest) {
|
||||
navigate('ShowApproved');
|
||||
navigate('ShowResponse');
|
||||
}
|
||||
else {
|
||||
navigate('Home');
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
|
||||
@ -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}
|
||||
@ -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}
|
||||
-->
|
||||
@ -24,7 +24,7 @@
|
||||
let r = await invoke('unlock', {passphrase});
|
||||
$appState.credentialStatus = 'unlocked';
|
||||
if ($appState.currentRequest) {
|
||||
navigate('ShowApproved');
|
||||
navigate('ShowResponse');
|
||||
}
|
||||
else {
|
||||
navigate('Home');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user