rework routing
This commit is contained in:
parent
049b81610d
commit
53580d7919
@ -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
8
src/lib/routing.js
Normal file
@ -0,0 +1,8 @@
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
|
||||
export const currentView = writable('Home');
|
||||
|
||||
export function navigate(viewName) {
|
||||
currentView.set(viewName);
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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}
|
||||
@ -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}
|
||||
|
||||
|
||||
@ -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}
|
||||
@ -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" />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user