start refactoring for default credentials
This commit is contained in:
@ -1,24 +1,23 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { appState, cleanupRequest } from '../lib/state.js';
|
||||
import { invoke } from '@tauri-apps/api/core';
|
||||
|
||||
import { navigate } from '../lib/routing.js';
|
||||
import { appState, cleanupRequest } from '../lib/state.js';
|
||||
import ErrorAlert from '../ui/ErrorAlert.svelte';
|
||||
import Link from '../ui/Link.svelte';
|
||||
import KeyCombo from '../ui/KeyCombo.svelte';
|
||||
import CollectResponse from './approve/CollectResponse.svelte';
|
||||
import ShowResponse from './approve/ShowResponse.svelte';
|
||||
import Unlock from './Unlock.svelte';
|
||||
|
||||
|
||||
// Send response to backend, display error if applicable
|
||||
// Extra 50ms so the window can finish disappearing before the redraw
|
||||
const rehideDelay = Math.min(5000, $appState.config.rehide_ms + 50);
|
||||
|
||||
let error, alert;
|
||||
async function respond() {
|
||||
const response = {
|
||||
id: $appState.currentRequest.id,
|
||||
...$appState.currentRequest.response,
|
||||
};
|
||||
let success = false;
|
||||
async function sendResponse() {
|
||||
try {
|
||||
await invoke('respond', {response});
|
||||
navigate('ShowResponse');
|
||||
await invoke('respond', {response: $appState.currentRequest.response});
|
||||
success = true;
|
||||
window.setTimeout(cleanupRequest, rehideDelay);
|
||||
}
|
||||
catch (e) {
|
||||
if (error) {
|
||||
@ -28,118 +27,41 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Approval has one of several outcomes depending on current credential state
|
||||
async function approve(base) {
|
||||
$appState.currentRequest.response = {approval: 'Approved', base};
|
||||
let status = await invoke('get_session_status');
|
||||
if (status === 'unlocked') {
|
||||
await respond();
|
||||
}
|
||||
else if (status === 'locked') {
|
||||
navigate('Unlock');
|
||||
}
|
||||
else {
|
||||
navigate('EnterCredentials');
|
||||
async function handleResponse() {
|
||||
if (
|
||||
$appState.sessionStatus === 'unlocked'
|
||||
|| $appState.currentRequest.response.approval === 'Denied'
|
||||
) {
|
||||
await sendResponse();
|
||||
}
|
||||
}
|
||||
|
||||
// Denial has only one
|
||||
async function deny() {
|
||||
$appState.currentRequest.response = {approval: 'Denied', base: false};
|
||||
await respond();
|
||||
}
|
||||
|
||||
// Extract executable name from full path
|
||||
const client = $appState.currentRequest.client;
|
||||
const m = client.exe?.match(/\/([^/]+?$)|\\([^\\]+?$)/);
|
||||
const appName = m[1] || m[2];
|
||||
|
||||
// Executable paths can be long, so ensure they only break on \ or /
|
||||
function breakPath(path) {
|
||||
return path.replace(/(\\|\/)/g, '$1<wbr>');
|
||||
}
|
||||
|
||||
// if the request has already been approved/denied, send response immediately
|
||||
onMount(async () => {
|
||||
if ($appState.currentRequest.response) {
|
||||
await respond();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<!-- Don't render at all if we're just going to immediately proceed to the next screen -->
|
||||
{#if error || !$appState.currentRequest?.response}
|
||||
{#if success}
|
||||
<!-- if we have successfully sent a response, show it -->
|
||||
<ShowResponse />
|
||||
{:else if !$appState.currentRequest?.response || error}
|
||||
<!-- if there's no response, or if there was an error sending it, ask for response -->
|
||||
<div class="flex flex-col space-y-4 p-4 m-auto max-w-xl h-screen items-center justify-center">
|
||||
{#if error}
|
||||
<ErrorAlert bind:this={alert}>
|
||||
{error.msg}
|
||||
<svelte:fragment slot="buttons">
|
||||
<button class="btn btn-sm btn-alert-error" on:click={cleanupRequest}>Cancel</button>
|
||||
<button class="btn btn-sm btn-alert-error" on:click={respond}>Retry</button>
|
||||
<button class="btn btn-sm btn-alert-error" on:click={sendResponse}>Retry</button>
|
||||
</svelte:fragment>
|
||||
</ErrorAlert>
|
||||
{/if}
|
||||
|
||||
{#if $appState.currentRequest?.base}
|
||||
<div class="alert alert-warning 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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
|
||||
<span>
|
||||
WARNING: This application is requesting your base AWS credentials.
|
||||
These credentials are less secure than session credentials, since they don't expire automatically.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="space-y-1 mb-4">
|
||||
<h2 class="text-xl font-bold">{appName ? `"${appName}"` : 'An appplication'} would like to access your AWS credentials.</h2>
|
||||
|
||||
<div class="grid grid-cols-[auto_1fr] gap-x-3">
|
||||
<div class="text-right">Path:</div>
|
||||
<code class="">{@html client.exe ? breakPath(client.exe) : 'Unknown'}</code>
|
||||
<div class="text-right">PID:</div>
|
||||
<code>{client.pid}</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full grid grid-cols-[1fr_auto] items-center gap-y-6">
|
||||
<!-- Don't display the option to approve with session credentials if base was specifically requested -->
|
||||
{#if !$appState.currentRequest?.base}
|
||||
<h3 class="font-semibold">
|
||||
Approve with session credentials
|
||||
</h3>
|
||||
<Link target={() => approve(false)} hotkey="Enter" shift={true}>
|
||||
<button class="w-full btn btn-success">
|
||||
<KeyCombo keys={['Shift', 'Enter']} />
|
||||
</button>
|
||||
</Link>
|
||||
{/if}
|
||||
|
||||
<h3 class="font-semibold">
|
||||
<span class="mr-2">
|
||||
{#if $appState.currentRequest?.base}
|
||||
Approve
|
||||
{:else}
|
||||
Approve with base credentials
|
||||
{/if}
|
||||
</span>
|
||||
</h3>
|
||||
<Link target={() => approve(true)} hotkey="Enter" shift={true} ctrl={true}>
|
||||
<button class="w-full btn btn-warning">
|
||||
<KeyCombo keys={['Ctrl', 'Shift', 'Enter']} />
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
<h3 class="font-semibold">
|
||||
<span class="mr-2">Deny</span>
|
||||
</h3>
|
||||
<Link target={deny} hotkey="Escape">
|
||||
<button class="w-full btn btn-error">
|
||||
<KeyCombo keys={['Esc']} />
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
<CollectResponse on:response={handleResponse} />
|
||||
</div>
|
||||
{:else if $appState.sessionStatus === 'locked'}
|
||||
<!-- if session is locked and we do have a response, we must be waiting for unlock -->
|
||||
<Unlock on:unlocked={sendResponse} />
|
||||
{:else}
|
||||
<!-- failsafe sanity check -->
|
||||
<ErrorAlert>
|
||||
Something is wrong. This message should never show up during normal operation.
|
||||
</ErrorAlert>
|
||||
{/if}
|
||||
|
||||
@ -1,94 +0,0 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { invoke } from '@tauri-apps/api/core';
|
||||
import { emit } from '@tauri-apps/api/event';
|
||||
import { getRootCause } from '../lib/errors.js';
|
||||
|
||||
import { appState } from '../lib/state.js';
|
||||
import { navigate } from '../lib/routing.js';
|
||||
import Link from '../ui/Link.svelte';
|
||||
import ErrorAlert from '../ui/ErrorAlert.svelte';
|
||||
import Spinner from '../ui/Spinner.svelte';
|
||||
|
||||
|
||||
let errorMsg = null;
|
||||
let alert;
|
||||
let AccessKeyId, SecretAccessKey, passphrase, confirmPassphrase
|
||||
|
||||
function confirm() {
|
||||
if (passphrase !== confirmPassphrase) {
|
||||
errorMsg = 'Passphrases do not match.'
|
||||
}
|
||||
}
|
||||
|
||||
let saving = false;
|
||||
async function save() {
|
||||
if (passphrase !== confirmPassphrase) {
|
||||
alert.shake();
|
||||
return;
|
||||
}
|
||||
|
||||
let credentials = {AccessKeyId, SecretAccessKey};
|
||||
try {
|
||||
saving = true;
|
||||
await invoke('save_credentials', {credentials, passphrase});
|
||||
emit('credentials-event', 'entered');
|
||||
$appState.credentialStatus = 'unlocked';
|
||||
if ($appState.currentRequest) {
|
||||
navigate('Approve');
|
||||
}
|
||||
else {
|
||||
navigate('Home');
|
||||
}
|
||||
}
|
||||
catch (e) {
|
||||
const root = getRootCause(e);
|
||||
if (e.code === 'GetSession' && root.code) {
|
||||
errorMsg = `Error response from AWS (${root.code}): ${root.msg}`;
|
||||
}
|
||||
else {
|
||||
// some of the built-in Tauri errors are plain strings,
|
||||
// so fall back to e if e.msg doesn't exist
|
||||
errorMsg = e.msg || e;
|
||||
}
|
||||
|
||||
// if the alert already existed, shake it
|
||||
if (alert) {
|
||||
alert.shake();
|
||||
}
|
||||
|
||||
saving = false;
|
||||
}
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
emit('credentials-event', 'enter-canceled');
|
||||
navigate('Home');
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
{#if errorMsg}
|
||||
<ErrorAlert bind:this="{alert}">{errorMsg}</ErrorAlert>
|
||||
{/if}
|
||||
|
||||
<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="Re-enter passphrase" bind:value={confirmPassphrase} class="input input-bordered" on:change={confirm} />
|
||||
|
||||
<button type="submit" class="btn btn-primary">
|
||||
{#if saving }
|
||||
<Spinner class="w-5 h-5" thickness="12"/>
|
||||
{:else}
|
||||
Submit
|
||||
{/if}
|
||||
</button>
|
||||
<Link target={cancel} hotkey="Escape">
|
||||
<button class="btn btn-sm btn-outline w-full">Cancel</button>
|
||||
</Link>
|
||||
</form>
|
||||
@ -8,13 +8,21 @@
|
||||
import Icon from '../ui/Icon.svelte';
|
||||
import Link from '../ui/Link.svelte';
|
||||
|
||||
import vaultDoorSvg from '../assets/vault_door.svg?raw';
|
||||
|
||||
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>
|
||||
|
||||
|
||||
@ -24,30 +32,23 @@
|
||||
|
||||
<div class="flex flex-col h-screen items-center justify-center p-4 space-y-4">
|
||||
<div class="flex flex-col items-center space-y-4">
|
||||
{@html vaultDoorSvg}
|
||||
{#if $appState.credentialStatus === 'locked'}
|
||||
|
||||
<h2 class="text-2xl font-bold">Creddy is locked</h2>
|
||||
<Link target="Unlock" hotkey="Enter" class="w-64">
|
||||
<button class="btn btn-primary w-full">Unlock</button>
|
||||
</Link>
|
||||
|
||||
{:else if $appState.credentialStatus === 'unlocked'}
|
||||
<h2 class="text-2xl font-bold">Waiting for requests</h2>
|
||||
<button class="btn btn-primary w-full" on:click={launchTerminal}>
|
||||
Launch Terminal
|
||||
</button>
|
||||
<label class="label cursor-pointer flex items-center space-x-2">
|
||||
<span class="label-text">Launch with long-lived credentials</span>
|
||||
<input type="checkbox" class="checkbox checkbox-sm" bind:checked={launchBase}>
|
||||
</label>
|
||||
|
||||
{:else if $appState.credentialStatus === 'empty'}
|
||||
<h2 class="text-2xl font-bold">No credentials found</h2>
|
||||
<Link target="EnterCredentials" hotkey="Enter" class="w-64">
|
||||
<button class="btn btn-primary w-full">Enter Credentials</button>
|
||||
</Link>
|
||||
{/if}
|
||||
<h2 class="text-2xl font-bold">Waiting for requests</h2>
|
||||
<button class="btn btn-primary w-full" on:click={launchTerminal}>
|
||||
Launch Terminal
|
||||
</button>
|
||||
<label class="label cursor-pointer flex items-center space-x-2">
|
||||
<span class="label-text">Launch with long-lived credentials</span>
|
||||
<input type="checkbox" class="checkbox checkbox-sm" bind:checked={launchBase}>
|
||||
</label>
|
||||
<button class="btn btn-primary w-full" on:click={lock}>
|
||||
Lock Creddy
|
||||
</button>
|
||||
<Link target="ChangePassphrase" class="w-full">
|
||||
<button class="btn btn-primary w-full">Change passphrase</button>
|
||||
</Link>
|
||||
<Link target="ManageCredentials" class="w-full">
|
||||
<button class="btn btn-primary w-full">Manage credentials</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -38,77 +38,78 @@
|
||||
<h1 slot="title" class="text-2xl font-bold">Settings</h1>
|
||||
</Nav>
|
||||
|
||||
<div class="max-w-lg mx-auto my-1.5 p-4 space-y-16">
|
||||
<SettingsGroup name="General">
|
||||
<ToggleSetting title="Start on login" bind:value={config.start_on_login}>
|
||||
<svelte:fragment slot="description">
|
||||
Start Creddy when you log in to your computer.
|
||||
</svelte:fragment>
|
||||
</ToggleSetting>
|
||||
|
||||
<ToggleSetting title="Start minimized" bind:value={config.start_minimized}>
|
||||
<svelte:fragment slot="description">
|
||||
Minimize to the system tray at startup.
|
||||
</svelte:fragment>
|
||||
</ToggleSetting>
|
||||
|
||||
<NumericSetting title="Re-hide delay" bind:value={config.rehide_ms} min={0} unit="Milliseconds">
|
||||
<svelte:fragment slot="description">
|
||||
How long to wait after a request is approved/denied before minimizing
|
||||
the window to tray. Only applicable if the window was minimized
|
||||
to tray before the request was received.
|
||||
</svelte:fragment>
|
||||
</NumericSetting>
|
||||
|
||||
<ToggleSetting title="Lock when idle" bind:value={config.auto_lock}>
|
||||
<svelte:fragment slot="description">
|
||||
Automatically lock Creddy after a period of inactivity.
|
||||
</svelte:fragment>
|
||||
</ToggleSetting>
|
||||
|
||||
{#if config.auto_lock}
|
||||
<TimeSetting title="Idle timeout" bind:seconds={config.lock_after.secs}>
|
||||
<form on:submit|preventDefault={save}>
|
||||
<div class="max-w-lg mx-auto my-1.5 p-4 space-y-16">
|
||||
<SettingsGroup name="General">
|
||||
<ToggleSetting title="Start on login" bind:value={config.start_on_login}>
|
||||
<svelte:fragment slot="description">
|
||||
How long to wait before automatically locking.
|
||||
Start Creddy when you log in to your computer.
|
||||
</svelte:fragment>
|
||||
</TimeSetting>
|
||||
{/if}
|
||||
</ToggleSetting>
|
||||
|
||||
<Setting title="Update credentials">
|
||||
<Link slot="input" target="EnterCredentials">
|
||||
<button class="btn btn-sm btn-primary">Update</button>
|
||||
</Link>
|
||||
<svelte:fragment slot="description">
|
||||
Update or re-enter your encrypted credentials.
|
||||
</svelte:fragment>
|
||||
</Setting>
|
||||
<ToggleSetting title="Start minimized" bind:value={config.start_minimized}>
|
||||
<svelte:fragment slot="description">
|
||||
Minimize to the system tray at startup.
|
||||
</svelte:fragment>
|
||||
</ToggleSetting>
|
||||
|
||||
<FileSetting
|
||||
title="Terminal emulator"
|
||||
bind:value={config.terminal.exec}
|
||||
|
||||
>
|
||||
<svelte:fragment slot="description">
|
||||
Choose your preferred terminal emulator (e.g. <code>gnome-terminal</code> or <code>wt.exe</code>.) May be an absolute path or an executable discoverable on <code>$PATH</code>.
|
||||
</svelte:fragment>
|
||||
</FileSetting>
|
||||
</SettingsGroup>
|
||||
<NumericSetting title="Re-hide delay" bind:value={config.rehide_ms} min={0} unit="Milliseconds">
|
||||
<svelte:fragment slot="description">
|
||||
How long to wait after a request is approved/denied before minimizing
|
||||
the window to tray. Only applicable if the window was minimized
|
||||
to tray before the request was received.
|
||||
</svelte:fragment>
|
||||
</NumericSetting>
|
||||
|
||||
<SettingsGroup name="Hotkeys">
|
||||
<div class="space-y-4">
|
||||
<p>Click on a keybinding to modify it. Use the checkbox to enable or disable a keybinding entirely.</p>
|
||||
<ToggleSetting title="Lock when idle" bind:value={config.auto_lock}>
|
||||
<svelte:fragment slot="description">
|
||||
Automatically lock Creddy after a period of inactivity.
|
||||
</svelte:fragment>
|
||||
</ToggleSetting>
|
||||
|
||||
<div class="grid grid-cols-[auto_1fr_auto] gap-y-3 items-center">
|
||||
<Keybind description="Show Creddy" bind:value={config.hotkeys.show_window} />
|
||||
<Keybind description="Launch terminal" bind:value={config.hotkeys.launch_terminal} />
|
||||
{#if config.auto_lock}
|
||||
<TimeSetting title="Idle timeout" bind:seconds={config.lock_after.secs}>
|
||||
<svelte:fragment slot="description">
|
||||
How long to wait before automatically locking.
|
||||
</svelte:fragment>
|
||||
</TimeSetting>
|
||||
{/if}
|
||||
|
||||
<Setting title="Update credentials">
|
||||
<Link slot="input" target="EnterAwsCredential">
|
||||
<button type="button" class="btn btn-sm btn-primary">Update</button>
|
||||
</Link>
|
||||
<svelte:fragment slot="description">
|
||||
Update or re-enter your encrypted credentials.
|
||||
</svelte:fragment>
|
||||
</Setting>
|
||||
|
||||
<FileSetting
|
||||
title="Terminal emulator"
|
||||
bind:value={config.terminal.exec}
|
||||
>
|
||||
<svelte:fragment slot="description">
|
||||
Choose your preferred terminal emulator (e.g. <code>gnome-terminal</code> or <code>wt.exe</code>.) May be an absolute path or an executable discoverable on <code>$PATH</code>.
|
||||
</svelte:fragment>
|
||||
</FileSetting>
|
||||
</SettingsGroup>
|
||||
|
||||
<SettingsGroup name="Hotkeys">
|
||||
<div class="space-y-4">
|
||||
<p>Click on a keybinding to modify it. Use the checkbox to enable or disable a keybinding entirely.</p>
|
||||
|
||||
<div class="grid grid-cols-[auto_1fr_auto] gap-y-3 items-center">
|
||||
<Keybind description="Show Creddy" bind:value={config.hotkeys.show_window} />
|
||||
<Keybind description="Launch terminal" bind:value={config.hotkeys.launch_terminal} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SettingsGroup>
|
||||
</SettingsGroup>
|
||||
|
||||
<p class="text-sm text-right">
|
||||
Creddy {$appState.appVersion}
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-sm text-right">
|
||||
Creddy {$appState.appVersion}
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{#if error}
|
||||
<div transition:fly={{y: 100, easing: backInOut, duration: 400}} class="toast">
|
||||
|
||||
@ -1,38 +0,0 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { draw, fade } from 'svelte/transition';
|
||||
|
||||
import { appState, cleanupRequest } from '../lib/state.js';
|
||||
|
||||
let success = false;
|
||||
let error = null;
|
||||
|
||||
let drawDuration = $appState.config.rehide_ms >= 750 ? 500 : 0;
|
||||
let fadeDuration = drawDuration * 0.6;
|
||||
let fadeDelay = drawDuration * 0.4;
|
||||
|
||||
onMount(() => {
|
||||
window.setTimeout(
|
||||
cleanupRequest,
|
||||
// Extra 50ms so the window can finish disappearing before the redraw
|
||||
Math.min(5000, $appState.config.rehide_ms + 50),
|
||||
)
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
<div class="flex flex-col h-screen items-center justify-center max-w-max m-auto">
|
||||
{#if $appState.currentRequest.response.approval === 'Approved'}
|
||||
<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: drawDuration}}" 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>
|
||||
{:else}
|
||||
<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>
|
||||
{/if}
|
||||
|
||||
<div in:fade="{{duration: fadeDuration, delay: fadeDelay}}" class="text-2xl font-bold">
|
||||
{$appState.currentRequest.response.approval}!
|
||||
</div>
|
||||
</div>
|
||||
@ -1,39 +1,32 @@
|
||||
<script>
|
||||
import { invoke } from '@tauri-apps/api/core';
|
||||
import { emit } from '@tauri-apps/api/event';
|
||||
import { onMount } from 'svelte';
|
||||
import { onMount, createEventDispatcher } from 'svelte';
|
||||
|
||||
import { appState } from '../lib/state.js';
|
||||
import { navigate } from '../lib/routing.js';
|
||||
import { getRootCause } from '../lib/errors.js';
|
||||
|
||||
import ErrorAlert from '../ui/ErrorAlert.svelte';
|
||||
import Link from '../ui/Link.svelte';
|
||||
import PassphraseInput from '../ui/PassphraseInput.svelte';
|
||||
import Spinner from '../ui/Spinner.svelte';
|
||||
import vaultDoorSvg from '../assets/vault_door.svg?raw';
|
||||
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let errorMsg = null;
|
||||
let alert;
|
||||
let passphrase = '';
|
||||
let loadTime = 0;
|
||||
let saving = false;
|
||||
async function unlock() {
|
||||
// The hotkey for navigating here from homepage is Enter, which also
|
||||
// happens to trigger the form submit event
|
||||
if (Date.now() - loadTime < 10) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
saving = true;
|
||||
let r = await invoke('unlock', {passphrase});
|
||||
$appState.credentialStatus = 'unlocked';
|
||||
emit('credentials-event', 'unlocked');
|
||||
if ($appState.currentRequest) {
|
||||
navigate('Approve');
|
||||
}
|
||||
else {
|
||||
navigate('Home');
|
||||
}
|
||||
$appState.sessionStatus = 'unlocked';
|
||||
emit('unlocked');
|
||||
dispatch('unlocked');
|
||||
}
|
||||
catch (e) {
|
||||
const root = getRootCause(e);
|
||||
@ -52,34 +45,28 @@
|
||||
saving = false;
|
||||
}
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
emit('credentials-event', 'unlock-canceled');
|
||||
if ($appState.currentRequest !== null) {
|
||||
// dirty hack to prevent spurious error when returning to approve screen
|
||||
delete $appState.currentRequest.response;
|
||||
navigate('Approve');
|
||||
}
|
||||
else {
|
||||
navigate('Home');
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
loadTime = Date.now();
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
<div class="fixed top-0 w-full p-2 text-center">
|
||||
<h1 class="text-3xl font-bold">Creddy is locked</h1>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<div class="mx-auto">
|
||||
{@html vaultDoorSvg}
|
||||
</div>
|
||||
|
||||
{#if errorMsg}
|
||||
<ErrorAlert bind:this="{alert}">{errorMsg}</ErrorAlert>
|
||||
{/if}
|
||||
<label class="space-y-4">
|
||||
<h2 class="font-bold text-xl text-center">Please enter your passphrase</h2>
|
||||
|
||||
<!-- svelte-ignore a11y-autofocus -->
|
||||
<input autofocus name="password" type="password" placeholder="correct horse battery staple" bind:value="{passphrase}" class="input input-bordered" />
|
||||
{#if errorMsg}
|
||||
<ErrorAlert bind:this="{alert}">{errorMsg}</ErrorAlert>
|
||||
{/if}
|
||||
|
||||
<!-- svelte-ignore a11y-autofocus -->
|
||||
<PassphraseInput autofocus="true" bind:value={passphrase} placeholder="correct horse battery staple" />
|
||||
</label>
|
||||
|
||||
<button type="submit" class="btn btn-primary">
|
||||
{#if saving}
|
||||
@ -88,8 +75,4 @@
|
||||
Submit
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<Link target={cancel} hotkey="Escape">
|
||||
<button class="btn btn-sm btn-outline w-full">Cancel</button>
|
||||
</Link>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user