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

links, navs, and more

Browse Source
This commit is contained in:
Joseph Montanaro 2023-04-24 22:16:25 -07:00
parent 53580d7919
commit f35352eedd
9 changed files with 109 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/ui/ErrorAlert.svelte
View File

@ -49,11 +49,11 @@
</style>
<div transition:slide="{{duration: slideDuration}}" class="alert alert-error shadow-lg {animationClass}">
<div in: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>
<slot></slot>
</span>
</div>

41
src/ui/Link.svelte Normal file
View File

@ -0,0 +1,41 @@
<script>
import { onMount } from 'svelte';
import { currentView } from '../lib/routing.js';
export let target = $currentView;
export let hotkey = null;
export let ctrl = false
export let alt = false;
export let shift = false;
function click() {
if (typeof target === 'string') {
$currentView = target;
}
else if (typeof target === 'function') {
target();
}
else {
throw(`Link target is not a string or a function: ${target}`)
}
}
function handleHotkey(event) {
if (!hotkey) return;
if (ctrl && !event.ctrlKey) return;
if (alt && !event.altKey) return;
if (shift && !event.shiftKey) return;
if (event.code === hotkey) click();
if (hotkey === 'Enter' && event.code === 'NumpadEnter') click();
}
</script>
<svelte:window on:keydown={handleHotkey} />
<a href="#" on:click="{click}">
<slot></slot>
</a>

23
src/ui/Nav.svelte Normal file
View File

@ -0,0 +1,23 @@
<script>
import Link from './Link.svelte';
import Icon from './Icon.svelte';
</script>
<nav class="fixed top-0 grid grid-cols-2 w-full p-2">
<div>
<Link target="Home">
<button class="btn btn-squre btn-ghost align-middle">
<Icon name="home" class="w-8 h-8 stroke-2" />
</button>
</Link>
</div>
<div class="justify-self-end">
<Link target="Settings">
<button class="align-middle btn btn-square btn-ghost">
<Icon name="cog-8-tooth" class="w-8 h-8 stroke-2" />
</button>
</Link>
</div>
</nav>

52
src/views/Approve.svelte
View File

@ -1,9 +1,8 @@
<script>
import { invoke } from '@tauri-apps/api/tauri';
import { fly } from 'svelte/transition';
import { expoIn } from 'svelte/easing';
import { navigate } from '../lib/routing.js';
import Link from '../ui/Link.svelte';
import Icon from '../ui/Icon.svelte';
export let appState;
@ -22,21 +21,7 @@
}
}
function deny() {
navigate('ShowDenied');
}
function handleHotkey(event) {
if (event.shiftKey && (event.code === 'Enter' || event.code === 'NumpadEnter')) {
approve();
}
else if (event.code === 'Escape') {
deny();
}
}
var appName = null;
console.log(appName);
if (appState.currentRequest.clients.length === 1) {
let path = appState.currentRequest.clients[0].exe;
let m = path.match(/\/([^/]+?$)|\\([^\\]+?$)/);
@ -45,12 +30,6 @@
</script>
<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">
@ -62,19 +41,20 @@
</div>
<div class="grid grid-cols-2">
<button class="btn btn-error justify-self-start" on:click={deny}>
Deny
&nbsp;
<!-- <kbd class="kbd kbd-xs bg-error border-base-100">Esc</kbd> -->
<kbd class="normal-case px-1 py-0.5 rounded border border-neutral">Esc</kbd>
</button>
<button class="btn btn-success justify-self-end" on:click={approve}>
Approve
&nbsp;
<kbd class="normal-case px-1 py-0.5 rounded border border-neutral">Shift</kbd>
<span class="mx-0.5">+</span>
<kbd class="normal-case px-1 py-0.5 rounded border border-neutral">Enter</kbd>
</button>
<Link target="ShowDenied" 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>
</button>
</Link>
<Link target="{approve}" hotkey="Enter" shift="{true}">
<button class="btn btn-success justify-self-end">
Approve
<kbd class="ml-2 normal-case px-1 py-0.5 rounded border border-neutral">Shift</kbd>
<span class="mx-0.5">+</span>
<kbd class="normal-case px-1 py-0.5 rounded border border-neutral">Enter</kbd>
</button>
</Link>
</div>
<!-- </div> -->
</div>

21
src/views/EnterCredentials.svelte
View File

@ -4,6 +4,7 @@
import { getRootCause } from '../lib/errors.js';
import { navigate } from '../lib/routing.js';
import Link from '../ui/Link.svelte';
import ErrorAlert from '../ui/ErrorAlert.svelte';
export let appState;
@ -42,18 +43,20 @@
</script>
{#if errorMsg}
<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">
<h2 class="text-2xl font-bold text-center">Enter your credentials</h2>
<h2 class="text-2xl font-bold text-center">Enter your credentials</h2>
<input type="text" placeholder="AWS Access Key ID" bind:value="{AccessKeyId}" class="input input-bordered" />
{#if errorMsg}
<ErrorAlert bind:this="{alert}">{errorMsg}</ErrorAlert>
{/if}
<input type="password" placeholder="AWS Secret Access Key" bind:value="{SecretAccessKey}" class="input input-bordered" />
<input type="text" placeholder="AWS Access Key ID" bind:value="{AccessKeyId}" class="input input-bordered" />
<input type="password" placeholder="AWS Secret Access Key" bind:value="{SecretAccessKey}" class="input input-bordered" />
<input type="password" placeholder="Passphrase" bind:value="{passphrase}" class="input input-bordered" />
<input type="password" placeholder="Passphrase" bind:value="{passphrase}" class="input input-bordered" />
<input type="submit" class="btn btn-primary" />
<input type="submit" class="btn btn-primary" />
<Link target="Home" hotkey="Escape">
<button class="btn btn-sm btn-outline w-full">Cancel</button>
</Link>
</form>

26
src/views/Home.svelte
View File

@ -3,6 +3,7 @@
import { invoke } from '@tauri-apps/api/tauri';
import { navigate } from '../lib/routing.js';
import Nav from '../ui/Nav.svelte';
import Icon from '../ui/Icon.svelte';
export let appState;
@ -22,34 +23,25 @@
</script>
<nav class="fixed top-0 grid grid-cols-2 w-full p-2">
<div id="nav-left flex">
<button class="btn btn-squre btn-ghost align-middle">
<Icon name="home" class="w-8 h-8 stroke-2" />
</button>
</div>
<div id="nav-right" class="justify-self-end">
<button class="align-middle btn btn-square btn-ghost">
<Icon name="cog-8-tooth" class="w-8 h-8 stroke-2" />
</button>
</div>
</nav>
<Nav />
{#if status === 'locked'}
<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={() => navigate('Unlock')}>Unlock</button>
<Link target="Unlock">
<button class="btn btn-primary">Unlock</button>
</Link>
</div>
{:else if status === 'unlocked'}
<div class="flex flex-col h-screen justify-center items-center space-y-4">
<img src="/static/padlock-open.svg" alt="An unlocked padlock" class="w-24" />
<h2 class="text-2xl font-bold">Creddy is ready</h2>
<h2 class="text-2xl font-bold">Waiting for requests</h2>
</div>
{:else if status === 'empty'}
<button class="btn btn-primary" on:click={() => navigate('EnterCredentials')}>
Enter Credentials
</button>
<Link target="EnterCredentials">
<button class="btn btn-primary">Enter Credentials</button>
</Link>
{/if}

2
src/views/ShowApproved.svelte
View File

@ -43,7 +43,7 @@
{#if error}
<div class="flex flex-col h-screen items-center justify-center m-auto max-w-lg">
<ErrorAlert>
<svelte:fragment slot="message">{error}</svelte:fragment>
{error}
<button
slot="buttons"
class="btn btn-sm bg-transparent hover:bg-[#cd5a5a] border border-error-content text-error-content"

2
src/views/ShowDenied.svelte
View File

@ -35,7 +35,7 @@
{#if error}
<div class="flex flex-col h-screen items-center justify-center m-auto max-w-lg">
<ErrorAlert>
<svelte:fragment slot="message">{error}</svelte:fragment>
{error}
<button
slot="buttons"
class="btn btn-sm bg-transparent hover:bg-[#cd5a5a] border border-error-content text-error-content"

4
src/views/Unlock.svelte
View File

@ -4,6 +4,7 @@
import { navigate } from '../lib/routing.js';
import { getRootCause } from '../lib/errors.js';
import ErrorAlert from '../ui/ErrorAlert.svelte';
import Link from '../ui/Link.svelte';
export let appState;
@ -50,4 +51,7 @@
<input autofocus name="password" type="password" placeholder="correct horse battery staple" bind:value="{passphrase}" class="input input-bordered" />
<input type="submit" class="btn btn-primary" />
<Link target="Home" hotkey="Escape">
<button class="btn btn-outline btn-sm w-full">Cancel</button>
</Link>
</form>