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

rework routing

Browse Source
This commit is contained in:
Joseph Montanaro 2023-04-24 12:05:11 -07:00
parent 049b81610d
commit 53580d7919
9 changed files with 119 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/App.svelte
View File

@ -1,38 +1,26 @@
<script>
import { emit, listen } from '@tauri-apps/api/event';
import queue from './lib/queue.js';
import { invoke } from '@tauri-apps/api/tauri';
import { currentView } from './lib/routing.js';
import queue from './lib/queue.js';
const VIEWS = import.meta.glob('./views/*.svelte', {eager: true});
window.emit = emit;
window.queue = queue;
var appState = {
currentRequest: null,
pendingRequests: queue(),
credentialStatus: 'locked',
}
window.appState = appState;
import { invoke } from '@tauri-apps/api/tauri';
window.invoke = invoke;
var currentView = VIEWS['./views/Home.svelte'].default;
window.currentView = currentView;
window.VIEWS = VIEWS;
function navigate(svelteEvent) {
const moduleName = `./views/${svelteEvent.detail.target}.svelte`;
currentView = VIEWS[moduleName].default;
}
window.navigate = navigate;
listen('credentials-request', (tauriEvent) => {
appState.pendingRequests.put(tauriEvent.payload);
console.log('Received request.');
});
</script>
<svelte:component this={currentView} on:navigate={navigate} bind:appState={appState} />
<!-- <svelte:component this="{VIEWS['./views/EnterCredentials.svelte'].default}" bind:appState="{appState}" /> -->
<svelte:component
this={VIEWS[`./views/${$currentView}.svelte`].default}
bind:appState={appState}
/>
<!-- <svelte:component this="{VIEWS['./views/ShowApproved.svelte'].default}" bind:appState="{appState}" /> -->

8
src/lib/routing.js Normal file
View File

@ -0,0 +1,8 @@
import { writable } from 'svelte/store';
export const currentView = writable('Home');
export function navigate(viewName) {
currentView.set(viewName);
}

23
src/ui/ErrorAlert.svelte
View File

@ -2,7 +2,7 @@
import { onMount } from 'svelte';
import { slide } from 'svelte/transition';
export let message;
export let slideDuration = 150;
let animationClass = "";
export function shake() {
@ -10,9 +10,6 @@
window.setTimeout(() => animationClass = "", 400);
}
// onMount(() => {
// shake();
// });
</script>
@ -52,9 +49,17 @@
</style>
<div transition:slide="{{duration: 150}}" class="alert alert-error shadow-lg {animationClass}">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
<span>{message}</span>
</div>
<div transition:slide="{{duration: slideDuration}}" class="alert alert-error shadow-lg {animationClass}">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
<span>
<slot name="message"></slot>
</span>
</div>
{#if $$slots.buttons}
<div>
<slot name="buttons"></slot>
</div>
{/if}
</div>

17
src/views/Approve.svelte
View File

@ -1,28 +1,29 @@
<script>
import { createEventDispatcher } from 'svelte';
import { invoke } from '@tauri-apps/api/tauri';
import { fly } from 'svelte/transition';
import { expoIn } from 'svelte/easing';
import { navigate } from '../lib/routing.js';
import Icon from '../ui/Icon.svelte';
export let appState;
const dispatch = createEventDispatcher();
async function approve() {
let status = await invoke('get_session_status');
if (status === 'unlocked') {
dispatch('navigate', {target: 'ShowApproved'});
navigate('ShowApproved');
}
else if (status === 'locked') {
dispatch('navigate', {target: 'Unlock'})
navigate('Unlock');
}
else {
dispatch('navigate', {target: 'EnterCredentials'});
navigate('EnterCredentials');
}
}
function deny() {
dispatch('navigate', {target: 'ShowDenied'});
navigate('ShowDenied');
}
function handleHotkey(event) {
@ -46,6 +47,10 @@
<svelte:window on:keydown={handleHotkey} />
<!-- <div
out:fly="{{x: '-100vw', duration: 200, easing: expoIn}}"
class="flex flex-col space-y-4 p-4 m-auto max-w-max h-screen justify-center"
> -->
<div class="flex flex-col space-y-4 p-4 m-auto max-w-max h-screen justify-center">
<!-- <div class="p-4 rounded-box border-2 border-neutral-content"> -->
<div class="space-y-1 mb-4">

23
src/views/EnterCredentials.svelte
View File

@ -1,12 +1,15 @@
<script>
import { onMount, createEventDispatcher } from 'svelte';
import { onMount } from 'svelte';
import { invoke } from '@tauri-apps/api/tauri';
import { getRootCause } from '../lib/errors.js';
import { navigate } from '../lib/routing.js';
import ErrorAlert from '../ui/ErrorAlert.svelte';
export let appState;
const dispatch = createEventDispatcher();
let errorMsg = null;
let alert;
let AccessKeyId, SecretAccessKey, passphrase
async function save() {
@ -16,14 +19,13 @@
try {
await invoke('save_credentials', {credentials, passphrase});
if (appState.currentRequest) {
dispatch('navigate', {target: 'ShowApproved'})
navigate('ShowApproved');
}
else {
dispatch('navigate', {target: 'Home'})
navigate('Home');
}
}
catch (e) {
window.error = e;
if (e.code === "GetSession") {
let root = getRootCause(e);
errorMsg = `Error response from AWS (${root.code}): ${root.msg}`;
@ -31,18 +33,17 @@
else {
errorMsg = e.msg;
}
if (alert) {
alert.shake();
}
}
}
</script>
{#if errorMsg}
<div class="alert alert-error shadow-lg">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
<span>{errorMsg}</span>
</div>
</div>
<ErrorAlert>{errorMsg}</ErrorAlert>
{/if}
<form action="#" on:submit|preventDefault="{save}" class="form-control space-y-4 max-w-sm m-auto p-4 h-screen justify-center">

9
src/views/Home.svelte
View File

@ -2,6 +2,7 @@
import { onMount, createEventDispatcher } from 'svelte';
import { invoke } from '@tauri-apps/api/tauri';
import { navigate } from '../lib/routing.js';
import Icon from '../ui/Icon.svelte';
export let appState;
@ -11,9 +12,7 @@
// will block until a request comes in
let req = await appState.pendingRequests.get();
appState.currentRequest = req;
console.log('Got credentials request from queue:');
console.log(req);
dispatch('navigate', {target: 'Approve'});
navigate('Approve');
});
let status = 'unknown';
@ -40,7 +39,7 @@
<div class="flex flex-col h-screen justify-center items-center space-y-4">
<img src="/static/padlock-closed.svg" alt="An unlocked padlock" class="w-32" />
<h2 class="text-2xl font-bold">Creddy is locked</h2>
<button class="btn btn-primary" on:click={() => dispatch('navigate', {target: 'Unlock'})}>Unlock</button>
<button class="btn btn-primary" on:click={() => navigate('Unlock')}>Unlock</button>
</div>
{:else if status === 'unlocked'}
@ -50,7 +49,7 @@
</div>
{:else if status === 'empty'}
<button class="btn btn-primary" on:click={() => dispatch('navigate', {target: 'EnterCredentials'})}>
<button class="btn btn-primary" on:click={() => navigate('EnterCredentials')}>
Enter Credentials
</button>
{/if}

40
src/views/ShowApproved.svelte
View File

@ -1,17 +1,18 @@
<script>
import { onMount, createEventDispatcher } from 'svelte';
import { fly } from 'svelte/transition';
import { expoOut } from 'svelte/easing';
import { onMount } from 'svelte';
import { fly, draw, fade } from 'svelte/transition';
import { expoIn, expoOut, expoInOut, linear } from 'svelte/easing';
import { emit } from '@tauri-apps/api/event';
import { invoke } from '@tauri-apps/api/tauri';
import { navigate } from '../lib/routing.js';
import ErrorAlert from '../ui/ErrorAlert.svelte';
import Icon from '../ui/Icon.svelte';
export let appState;
let success = false;
let error = null;
const dispatch = createEventDispatcher();
async function respond() {
let response = {
id: appState.currentRequest.id,
@ -20,13 +21,14 @@
try {
await invoke('respond', {response});
success = true;
appState.currentRequest = null;
window.setTimeout(() => navigate('Home'), 1000);
}
catch (e) {
error = e;
}
window.setTimeout(() => dispatch('navigate', {target: 'Home'}), 1000);
}
onMount(respond);
@ -39,11 +41,29 @@
</style>
{#if error}
<ErrorAlert message="{error}" />
{:else}
<div in:fly="{{x: '60vw', duration: 400, easing: expoOut}}" class="flex flex-col h-screen items-center justify-center max-w-max m-auto">
<Icon name="check-circle" class="w-36 h-36" />
<div class="text-2xl font-bold">Approved!</div>
<div class="flex flex-col h-screen items-center justify-center m-auto max-w-lg">
<ErrorAlert>
<svelte:fragment slot="message">{error}</svelte:fragment>
<button
slot="buttons"
class="btn btn-sm bg-transparent hover:bg-[#cd5a5a] border border-error-content text-error-content"
on:click="{() => navigate('Home')}"
>
Ok
</button>
</ErrorAlert>
</div>
{:else if success}
<!-- <div on:click="{() => {console.log('redraw'); k += 1}}" in:fly="{{x: '60vw', duration: 400, easing: expoOut}}" class="flex flex-col h-screen items-center justify-center max-w-max m-auto"> -->
<div class="flex flex-col h-screen items-center justify-center max-w-max m-auto">
<!-- <Icon name="check-circle" class="w-36 h-36" /> -->
<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 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div in:fade="{{delay: 200, duration: 300}}" class="text-2xl font-bold">Approved!</div>
</div>
{/if}

38
src/views/ShowDenied.svelte
View File

@ -1,17 +1,17 @@
<script>
import { onMount, createEventDispatcher } from 'svelte';
import { fly, fade } from 'svelte/transition';
import { onMount } from 'svelte';
import { fade, draw } from 'svelte/transition';
import { expoOut } from 'svelte/easing';
import { emit } from '@tauri-apps/api/event';
import { invoke } from '@tauri-apps/api/tauri';
import { navigate } from '../lib/routing.js';
import ErrorAlert from '../ui/ErrorAlert.svelte';
import Icon from '../ui/Icon.svelte';
export let appState;
let error = null;
const dispatch = createEventDispatcher();
async function respond() {
let response = {
id: appState.currentRequest.id,
@ -21,25 +21,39 @@
try {
await invoke('respond', {response});
appState.currentRequest = null;
window.setTimeout(() => navigate('Home'), 1000);
}
catch (e) {
error = e;
}
window.setTimeout(() => dispatch('navigate', {target: 'Home'}), 1000);
}
onMount(respond);
let k = 0;
</script>
{#if error}
<ErrorAlert message="{error}" />
{:else}
{#key k}
<div in:fly="{{x: '60vw', duration: 400, easing: expoOut}}" class="flex flex-col items-center justify-center h-screen max-w-max m-auto" on:click="{() => k += 1}">
<Icon name="x-circle" class="w-36 h-36" />
<div class="text-2xl font-bold">Denied!</div>
<div class="flex flex-col h-screen items-center justify-center m-auto max-w-lg">
<ErrorAlert>
<svelte:fragment slot="message">{error}</svelte:fragment>
<button
slot="buttons"
class="btn btn-sm bg-transparent hover:bg-[#cd5a5a] border border-error-content text-error-content"
on:click="{() => dispatch('navigate', {target: 'Home'})}"
>
Ok
</button>
</ErrorAlert>
</div>
{:else}
<!-- <div in:fly="{{x: '60vw', duration: 400, easing: expoOut}}" class="flex flex-col items-center justify-center h-screen max-w-max m-auto"> -->
<div class="flex flex-col items-center justify-center h-screen max-w-max m-auto">
<!-- <Icon name="x-circle" class="w-36 h-36" /> -->
<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>
{/key}
{/if}

45
src/views/Unlock.svelte
View File

@ -1,26 +1,25 @@
<script>
import { invoke } from '@tauri-apps/api/tauri';
import { createEventDispatcher } from 'svelte';
import { navigate } from '../lib/routing.js';
import { getRootCause } from '../lib/errors.js';
import ErrorAlert from '../ui/ErrorAlert.svelte';
export let appState;
const dispatch = createEventDispatcher();
let errorMsg = null;
let alert = null;
let alert;
let passphrase = '';
async function unlock() {
try {
let r = await invoke('unlock', {passphrase});
appState.credentialStatus = 'unlocked';
if (appState.currentRequest) {
dispatch('navigate', {target: 'ShowApproved'});
navigate('ShowApproved');
}
else {
dispatch('navigate', {target: 'Home'});
navigate('Home');
}
}
catch (e) {
@ -40,46 +39,12 @@
}
</script>
<style>
@keyframes shake {
0% {
transform: translateX(0px);
}
20% {
transform: translateX(10px);
}
40% {
transform: translateX(-10px);
}
60% {
transform: translateX(5px);
}
80% {
transform: translateX(-5px);
}
90% {
transform: translateX(2px);
}
95% {
transform: translateX(-2px);
}
100% {
transform: translateX(0px);
}
}
.shake {
animation-name: shake;
animation-play-state: running;
animation-duration: 0.4s;
}
</style>
<form action="#" on:submit|preventDefault="{unlock}" class="form-control space-y-4 max-w-sm m-auto p-4 h-screen justify-center">
<h2 class="font-bold text-2xl text-center">Enter your passphrase</h2>
{#if errorMsg}
<ErrorAlert message="{errorMsg}" bind:this="{alert}" />
<ErrorAlert bind:this="{alert}">{errorMsg}</ErrorAlert>
{/if}
<input autofocus name="password" type="password" placeholder="correct horse battery staple" bind:value="{passphrase}" class="input input-bordered" />