rewrite frontend with DaisyUI
This commit is contained in:
@ -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>
|
||||
|
Reference in New Issue
Block a user