Add "use this offline" message

This commit is contained in:
Timothy Farrell 2026-05-18 02:40:26 +00:00
parent 5ade18171c
commit d792726902
2 changed files with 58 additions and 22 deletions

64
dist/index.html vendored
View File

@ -5815,9 +5815,10 @@ function autofocus(node, condition = true) {
} }
//#endregion //#endregion
//#region src/components/LockScreen.svelte //#region src/components/LockScreen.svelte
var root_1$7 = /* @__PURE__ */ from_html(`<div class="error-banner svelte-7sq1ct" role="alert"> </div>`); var root_1$7 = /* @__PURE__ */ from_html(`<div class="warning-banner svelte-7sq1ct" role="alert">This HTML file is intended for offline use.</div>`);
var root_2$6 = /* @__PURE__ */ from_html(`<div class="form-group"><label for="confirm-password">Confirm Password</label> <input id="confirm-password" type="password" placeholder="Confirm master password" autocomplete="new-password"/></div>`); var root_2$6 = /* @__PURE__ */ from_html(`<div class="error-banner svelte-7sq1ct" role="alert"> </div>`);
var root$7 = /* @__PURE__ */ from_html(`<div class="lock-screen svelte-7sq1ct"><div class="lock-card svelte-7sq1ct"><div class="lock-icon svelte-7sq1ct">🔐</div> <h1 class="svelte-7sq1ct">Password Vault</h1> <p class="subtitle svelte-7sq1ct"> </p> <!> <form class="lock-form svelte-7sq1ct"><div class="form-group"><label for="master-password">Master Password</label> <input id="master-password" type="password" placeholder="Enter master password" autocomplete="current-password"/></div> <!> <button type="submit" class="btn btn-primary w-full"> </button></form> <p class="hint svelte-7sq1ct"> </p></div></div>`); var root_3$6 = /* @__PURE__ */ from_html(`<div class="form-group"><label for="confirm-password">Confirm Password</label> <input id="confirm-password" type="password" placeholder="Confirm master password" autocomplete="new-password"/></div>`);
var root$7 = /* @__PURE__ */ from_html(`<div class="lock-screen svelte-7sq1ct"><div class="lock-card svelte-7sq1ct"><div class="lock-icon svelte-7sq1ct">🔐</div> <h1 class="svelte-7sq1ct">Password Vault</h1> <p class="subtitle svelte-7sq1ct"> </p> <!> <!> <form class="lock-form svelte-7sq1ct"><div class="form-group"><label for="master-password">Master Password</label> <input id="master-password" type="password" placeholder="Enter master password" autocomplete="current-password"/></div> <!> <button type="submit" class="btn btn-primary w-full"> </button></form> <p class="hint svelte-7sq1ct"> </p></div></div>`);
function LockScreen($$anchor, $$props) { function LockScreen($$anchor, $$props) {
push($$props, true); push($$props, true);
let masterPassword = /* @__PURE__ */ state(""); let masterPassword = /* @__PURE__ */ state("");
@ -5825,6 +5826,7 @@ function LockScreen($$anchor, $$props) {
let error = /* @__PURE__ */ state(""); let error = /* @__PURE__ */ state("");
let loading = /* @__PURE__ */ state(false); let loading = /* @__PURE__ */ state(false);
let isSetup = /* @__PURE__ */ state(false); let isSetup = /* @__PURE__ */ state(false);
let notLocal = /* @__PURE__ */ user_derived(() => typeof window !== "undefined" && window.location.protocol !== "file:");
async function checkVault() { async function checkVault() {
set(isSetup, !await isVaultInitialized()); set(isSetup, !await isVaultInitialized());
} }
@ -5886,36 +5888,43 @@ function LockScreen($$anchor, $$props) {
reset(p); reset(p);
var node = sibling(p, 2); var node = sibling(p, 2);
var consequent = ($$anchor) => { var consequent = ($$anchor) => {
var div_2 = root_1$7(); append($$anchor, root_1$7());
var text_1 = child(div_2, true);
reset(div_2);
template_effect(() => set_text(text_1, get(error)));
append($$anchor, div_2);
}; };
if_block(node, ($$render) => { if_block(node, ($$render) => {
if (get(error)) $$render(consequent); if (get(notLocal)) $$render(consequent);
}); });
var form = sibling(node, 2); var node_1 = sibling(node, 2);
var div_3 = child(form); var consequent_1 = ($$anchor) => {
var input = sibling(child(div_3), 2); var div_3 = root_2$6();
var text_1 = child(div_3, true);
reset(div_3);
template_effect(() => set_text(text_1, get(error)));
append($$anchor, div_3);
};
if_block(node_1, ($$render) => {
if (get(error)) $$render(consequent_1);
});
var form = sibling(node_1, 2);
var div_4 = child(form);
var input = sibling(child(div_4), 2);
remove_input_defaults(input); remove_input_defaults(input);
effect(() => bind_value(input, () => get(masterPassword), ($$value) => set(masterPassword, $$value))); effect(() => bind_value(input, () => get(masterPassword), ($$value) => set(masterPassword, $$value)));
action(input, ($$node) => autofocus?.($$node)); action(input, ($$node) => autofocus?.($$node));
reset(div_3); reset(div_4);
var node_1 = sibling(div_3, 2); var node_2 = sibling(div_4, 2);
var consequent_1 = ($$anchor) => { var consequent_2 = ($$anchor) => {
var div_4 = root_2$6(); var div_5 = root_3$6();
var input_1 = sibling(child(div_4), 2); var input_1 = sibling(child(div_5), 2);
remove_input_defaults(input_1); remove_input_defaults(input_1);
reset(div_4); reset(div_5);
template_effect(() => input_1.disabled = get(loading)); template_effect(() => input_1.disabled = get(loading));
bind_value(input_1, () => get(confirmPassword), ($$value) => set(confirmPassword, $$value)); bind_value(input_1, () => get(confirmPassword), ($$value) => set(confirmPassword, $$value));
append($$anchor, div_4); append($$anchor, div_5);
}; };
if_block(node_1, ($$render) => { if_block(node_2, ($$render) => {
if (get(isSetup)) $$render(consequent_1); if (get(isSetup)) $$render(consequent_2);
}); });
var button = sibling(node_1, 2); var button = sibling(node_2, 2);
var text_2 = child(button, true); var text_2 = child(button, true);
reset(button); reset(button);
reset(form); reset(form);
@ -7835,6 +7844,17 @@ label {
text-align: center; text-align: center;
} }
.warning-banner.svelte-7sq1ct {
width: 100%;
padding: 10px 14px;
background: rgba(255, 193, 7, 0.15);
border: 1px solid rgba(230, 168, 0, 0.5);
border-radius: var(--radius-md);
color: #b8860b;
font-size: 0.85rem;
text-align: center;
}
.hint.svelte-7sq1ct { .hint.svelte-7sq1ct {
font-size: 0.75rem; font-size: 0.75rem;
color: var(--color-text-muted); color: var(--color-text-muted);

View File

@ -11,6 +11,7 @@
let error = $state('') let error = $state('')
let loading = $state(false) let loading = $state(false)
let isSetup = $state(false) let isSetup = $state(false)
let notLocal = $derived(typeof window !== 'undefined' && window.location.protocol !== 'file:')
// Check if vault was already created // Check if vault was already created
async function checkVault() { async function checkVault() {
@ -87,6 +88,10 @@
<h1>Password Vault</h1> <h1>Password Vault</h1>
<p class="subtitle">{isSetup ? 'Create your vault' : 'Unlock your vault'}</p> <p class="subtitle">{isSetup ? 'Create your vault' : 'Unlock your vault'}</p>
{#if notLocal}
<div class="warning-banner" role="alert">This HTML file is intended for offline use.</div>
{/if}
{#if error} {#if error}
<div class="error-banner" role="alert">{error}</div> <div class="error-banner" role="alert">{error}</div>
{/if} {/if}
@ -189,6 +194,17 @@
text-align: center; text-align: center;
} }
.warning-banner {
width: 100%;
padding: 10px 14px;
background: rgba(255, 193, 7, 0.15);
border: 1px solid rgba(230, 168, 0, 0.5);
border-radius: var(--radius-md);
color: #b8860b;
font-size: 0.85rem;
text-align: center;
}
.hint { .hint {
font-size: 0.75rem; font-size: 0.75rem;
color: var(--color-text-muted); color: var(--color-text-muted);