creddy/src/views/Home.svelte

80 lines
3.0 KiB
Svelte

<script>
import { onMount } from 'svelte';
import { invoke } from '@tauri-apps/api/core';
import { appState } from '../lib/state.js';
import { navigate } from '../lib/routing.js';
import Nav from '../ui/Nav.svelte';
import Icon from '../ui/Icon.svelte';
import Link from '../ui/Link.svelte';
let launchBase = false;
function launchTerminal() {
invoke('launch_terminal', {base: launchBase});
launchBase = false;
}
async function lock() {
try {
await invoke('lock');
}
catch (e) {
console.log(e);
}
}
</script>
<Nav position="fixed">
<h2 slot="title" class="text-3xl font-bold">Creddy</h2>
</Nav>
<div class="flex flex-col h-screen items-center justify-center p-4 space-y-4">
<div class="grid grid-cols-2 gap-6">
<Link target="ManageCredentials">
<div class="flex flex-col items-center gap-4 h-full max-w-56 rounded-box p-4 border border-primary hover:bg-base-200 transition-colors">
<Icon name="key" class="size-12 stroke-1 stroke-primary" />
<h3 class="text-lg font-bold">Credentials</h3>
<p class="text-sm">Add, remove, and change defaults credentials.</p>
</div>
</Link>
<Link target={launchTerminal}>
<div class="flex flex-col items-center gap-4 h-full max-w-56 rounded-box p-4 border border-secondary hover:bg-base-200 transition-colors">
<Icon name="command-line" class="size-12 stroke-1 stroke-secondary" />
<h3 class="text-lg font-bold">Terminal</h3>
<p class="text-sm">Launch a terminal pre-configured with AWS credentials.</p>
</div>
</Link>
<Link target={lock}>
<div class="flex flex-col items-center gap-4 h-full max-w-56 rounded-box p-4 border border-accent hover:bg-base-200 transition-colors">
<Icon name="shield-check" class="size-12 stroke-1 stroke-accent" />
<h3 class="text-lg font-bold">Lock</h3>
<p class="text-sm">Lock Creddy.</p>
</div>
</Link>
<Link target="">
<div class="flex flex-col items-center gap-4 h-full max-w-56 rounded-box p-4 border border-warning hover:bg-base-200 transition-colors">
<Icon name="arrow-right-start-on-rectangle" class="size-12 stroke-1 stroke-warning" />
<h3 class="text-lg font-bold">Exit</h3>
<p class="text-sm">Close Creddy.</p>
</div>
</Link>
</div>
</div>
{#if $appState.setupErrors.some(e => e.show)}
<div class="toast">
{#each $appState.setupErrors as error}
{#if error.show}
<div class="alert alert-error shadow-lg">
{error.msg}
<button class="btn btn-sm btn-alert-error" on:click={() => error.show = false}>Ok</button>
</div>
{/if}
{/each}
</div>
{/if}