rewrite frontend with DaisyUI

This commit is contained in:
2023-04-23 22:29:12 -07:00
parent fd60899f16
commit 049b81610d
18 changed files with 1982 additions and 561 deletions

View File

@ -1,20 +1,20 @@
<script>
import { invoke } from '@tauri-apps/api/tauri';
import { createEventDispatcher } from 'svelte';
import { getRootCause } from '../lib/errors.js';
import Button from '../ui/Button.svelte';
import ErrorAlert from '../ui/ErrorAlert.svelte';
export let appState;
const dispatch = createEventDispatcher();
let errorMsg = null;
let alert = null;
let passphrase = '';
async function unlock() {
console.log('invoking unlock command.')
try {
await invoke('unlock', {passphrase});
let r = await invoke('unlock', {passphrase});
appState.credentialStatus = 'unlocked';
if (appState.currentRequest) {
dispatch('navigate', {target: 'ShowApproved'});
@ -32,16 +32,57 @@
else {
errorMsg = e.msg;
}
if (alert) {
alert.shake();
}
}
}
</script>
{#if errorMsg}
<div class="text-red-400">{errorMsg}</div>
{/if}
<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}">
<div class="text-gray-200">Enter your passphrase:</div>
<input autofocus class="text-gray-200 bg-zinc-800" type="password" placeholder="correct horse battery staple" bind:value="{passphrase}" />
<Button on:click={unlock}>Submit</Button>
<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}" />
{/if}
<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" />
</form>