ae/qnote
ae/qnote
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: ae:8f9f5c76cb81f8d5bf19c5dad76611d5f9f7c17c
Branches Tags
ae:master
..
compare: ae:2b1ce51d319857239727977244c002d1dc9cb68a
Branches Tags
ae:master

No commits in common. "8f9f5c76cb81f8d5bf19c5dad76611d5f9f7c17c" and "2b1ce51d319857239727977244c002d1dc9cb68a" have entirely different histories.
8f9f5c76cb ... 2b1ce51d31

11 changed files with 155 additions and 269 deletions
Show Stats Expand all files Collapse all files

4
.env.template
View File

@ -15,7 +15,3 @@ APP_ENV="production"
DOMAIN=""
FRONTEND_URL=""
# Frontend
VITE_VIEW_COOKIE_PATH="/"
VITE_VIEW_COOKIE_DOMAIN=$DOMAIN
VITE_COKOIE_SAME_SITE="strict"

113
web/src/app.css
View File

@ -5,19 +5,11 @@
--light-foreground: #e0e0e0;
--light-accent: #303052;
--light-text: rgb(34, 40, 49);
--light-error-text: #4b0000;
--light-error-background: #fcaaaae1;
--light-success-text: #004b0a;
--light-success-background: #adfcaae1;
--dark-background: #181818;
--dark-foreground: #222222;
--dark-accent: #bebff7;
--dark-text: rgb(238, 238, 238);
--dark-error-text: #fcadaa;
--dark-error-background: #4b0000e0;
--dark-success-text: #adfcaa;
--dark-success-background: #004b0ae0;
}
/* Scrollbar width */
@ -87,7 +79,7 @@
}
button {
@apply cursor-pointer rounded-md bg-[var(--light-accent)] px-4 py-2 text-[var(--light-background)] transition-all duration-200;
@apply rounded-md bg-[var(--light-accent)] px-4 py-2 text-[var(--light-background)] transition-all duration-200;
}
button:hover {
@ -139,20 +131,20 @@
/* Error messages */
.error {
@apply flex items-center justify-between rounded-lg bg-[var(--light-error-background)] p-3 text-sm text-[var(--light-error-text)];
@apply rounded-lg bg-red-100 p-3 text-sm text-red-500;
}
.dark .error {
@apply bg-[var(--dark-error-background)] text-[var(--dark-error-text)];
@apply bg-red-900/30 text-red-300;
}
/* Success messages */
.success {
@apply flex items-center justify-between rounded-lg bg-[var(--light-success-background)] p-3 text-sm text-[var(--light-success-text)];
@apply rounded-lg bg-green-100 p-3 text-sm text-green-500;
}
.dark .success {
@apply bg-[var(--dark-success-background)] text-[var(--dark-success-text)];
@apply bg-green-900/30 text-green-300;
}
.btn-primary {
@ -193,18 +185,13 @@
}
.sidebar {
@apply fixed z-10 flex h-full flex-col overflow-hidden border-r border-[var(--light-foreground)] bg-[var(--light-foreground)] transition-all duration-300;
@apply fixed flex h-full flex-col overflow-hidden border-r border-[var(--light-foreground)] bg-[var(--light-foreground)] transition-all duration-300;
}
.dark .sidebar {
@apply border-[var(--dark-foreground)] bg-[var(--dark-foreground)];
}
.sidebar-header {
/* Should align with the navbar height for visual consistency */
@apply h-20;
}
.sidebar-header,
.sidebar-footer {
@apply border-[var(--light-text)]/20 p-4;
@ -256,11 +243,27 @@
}
.sidebar-item-delete {
@apply flex h-6.5 w-6.5 items-center justify-center rounded-lg border-1 border-[var(--light-accent)]/20 bg-transparent p-1 text-[var(--light-accent)]/50 hover:text-[var(--light-accent)];
@apply flex h-6.5 w-6.5 items-center justify-center rounded-lg border-1 border-[var(--light-accent)]/20 bg-transparent p-1;
}
.dark .sidebar-item-delete {
@apply border-[var(--dark-accent)]/20 text-[var(--dark-accent)]/50 hover:text-[var(--dark-accent)];
@apply border-[var(--dark-accent)]/20;
}
.sidebar-item-delete > svg {
@apply text-[var(--light-accent)]/50;
}
.dark .sidebar-item-delete > svg {
@apply text-[var(--dark-accent)]/50;
}
.sidebar-item-delete:hover > svg {
@apply text-[var(--light-accent)] transition-colors delay-100;
}
.dark .sidebar-item-delete:hover > svg {
@apply text-[var(--dark-accent)];
}
.sidebar-divider {
@ -301,7 +304,7 @@
}
.versions-dropdown-item {
@apply w-full bg-[var(--light-foreground)] p-3 transition-colors hover:bg-[var(--light-background)];
@apply w-full cursor-pointer bg-[var(--light-foreground)] p-3 transition-colors hover:bg-[var(--light-background)];
}
.dark .versions-dropdown-item {
@ -333,10 +336,6 @@
}
/* Note editor */
.note-title-container {
@apply mb-4;
}
.note-title-input {
@apply w-full rounded-2xl border-b border-[var(--light-text)]/20 bg-transparent pb-2 text-2xl font-bold focus:border-[var(--light-accent)];
}
@ -353,28 +352,16 @@
@apply text-[var(--dark-text)]/60;
}
.note-editor-container {
@apply flex min-h-0 flex-1 flex-col overflow-auto;
}
.note-editor-wrapper {
@apply flex h-full flex-col;
}
.note-editor-content {
@apply flex h-full flex-col;
}
.note-textarea {
@apply h-full max-h-full min-h-1/2 w-full resize-none rounded-2xl bg-transparent p-3.5 font-mono outline-none focus:border-4 focus:border-[var(--light-accent)]/60;
}
.dark .note-textarea {
@apply focus:border-[var(--dark-accent)]/60;
.note-save-button {
@apply absolute right-10 bottom-10;
}
.note-save-button {
@apply fixed right-10 bottom-10 z-10;
.dark .note-textarea {
@apply focus:border-[var(--dark-accent)]/60;
}
/* Markdown preview */
@ -518,15 +505,15 @@
/* Settings modal */
.modal-backdrop {
@apply fixed inset-0 z-40 flex items-center justify-center backdrop-blur-xs;
@apply fixed inset-0 z-50 flex items-center justify-center backdrop-blur-xs;
}
.modal-content {
@apply mx-4 max-h-[90vh] w-full max-w-md overflow-y-auto rounded-lg border-2 border-[var(--light-accent)]/10 bg-[var(--light-background)] shadow-lg;
@apply mx-4 max-h-[90vh] w-full max-w-md overflow-y-auto rounded-lg bg-[var(--light-background)] shadow-lg;
}
.dark .modal-content {
@apply border-[var(--dark-accent)]/10 bg-[var(--dark-background)];
@apply bg-[var(--dark-background)];
}
.modal-section {
@ -538,11 +525,11 @@
}
.modal-close-button {
@apply h-8 w-8 items-center justify-center rounded-md border-1 border-[var(--light-accent)]/20 bg-transparent p-1 text-[var(--light-accent)]/50 hover:text-[var(--light-accent)];
@apply text-[var(--light-background)]/60 hover:text-[var(--light-background)];
}
.dark .modal-close-button {
@apply border-[var(--dark-accent)]/20 text-[var(--dark-accent)]/50 hover:text-[var(--dark-accent)];
@apply text-[var(--dark-background)]/60 hover:text-[var(--dark-background)];
}
/* Loading spinner */
@ -590,43 +577,19 @@
/* Main layout */
.main-layout-container {
@apply flex h-screen w-full bg-[var(--light-background)];
@apply flex h-screen bg-[var(--light-background)];
}
.dark .main-layout-container {
@apply bg-[var(--dark-background)];
}
.content-wrapper {
@apply flex h-screen flex-1 flex-col overflow-hidden;
}
.note-content-fixed-width {
@apply mx-auto flex w-full max-w-[800px] flex-col px-8 py-0;
height: calc(100% - 5rem);
}
@media (max-width: 768px) {
.note-content-fixed-width {
@apply max-w-full px-4 py-0;
}
}
.main-info-popup {
/* Z-value should be set so that this is on top of the modal's background blur */
.main-error-popup {
@apply fixed top-4 right-4 z-50 max-w-md;
}
.main-info-popup-button {
@apply ml-2 h-4 w-4 items-center justify-center rounded-md bg-transparent p-0 text-inherit;
}
.main-header {
/*
Should have higher z-value than the contents, but still less than the sidebar
(otherwise the navbar and the sidebar shadows will seem uneven).
*/
@apply z-5 flex h-20 items-center justify-between bg-[var(--light-foreground)] p-4 shadow-sm;
@apply flex items-center justify-between bg-[var(--light-foreground)] p-4 shadow-sm;
}
.dark .main-header {
@ -634,7 +597,7 @@
}
.main-content {
@apply flex min-h-0 flex-1 flex-col overflow-auto bg-[var(--light-background)] p-6;
@apply flex-1 overflow-auto bg-[var(--light-background)] p-6;
}
.dark .main-content {

85
web/src/lib/client.ts
View File

@ -103,7 +103,6 @@ export const accessToken: Writable<string | null> = writable(null)
export const csrfToken: Writable<string | null> = writable(null)
export const isPending: Writable<boolean> = writable(false)
export const cError: Writable<string | null> = writable(null)
export const cSuccess: Writable<string | null> = writable(null)
class ApiClient {
private viewCookieName: string
@ -123,11 +122,10 @@ class ApiClient {
private async handleRequest<T>(
fn: () => Promise<T>,
options: { useBearerAuth: boolean; suspendGlobalErr: boolean }
options: { useBearerAuth: boolean }
): Promise<T | null> {
isPending.set(true)
cError.set(null)
cSuccess.set(null)
// NOTE: If `handleResponse` is used, errors thrown from it will be caught here
@ -147,17 +145,8 @@ class ApiClient {
return await fn()
} catch (err) {
const errMsg = err instanceof Error ? err.message : "Unknown error"
// The suspension option is handy when we want to display the error inside a modal instead of in a global notification
if (options.suspendGlobalErr) {
// Throw the same error to the next handler (should be handled inside the caller component)
throw new Error(errMsg)
} else {
cError.set(errMsg)
}
console.log(`[ERR] ${errMsg}`)
cError.set(err instanceof Error ? err.message : "Unknown error")
console.log(`[ERR] ${get(cError)}`)
} finally {
isPending.set(false)
}
@ -235,7 +224,7 @@ class ApiClient {
accessToken.set(newToken)
this.lastAtUpdate = new Date()
},
{ useBearerAuth: false, suspendGlobalErr: false }
{ useBearerAuth: false }
)
}
@ -269,7 +258,7 @@ class ApiClient {
csrfToken.set(newToken)
this.lastCsrfUpdate = new Date()
},
{ useBearerAuth: false, suspendGlobalErr: false }
{ useBearerAuth: false }
)
}
@ -425,7 +414,7 @@ class ApiClient {
await goto("/login")
},
{ useBearerAuth: false, suspendGlobalErr: false }
{ useBearerAuth: false }
)
}
@ -448,7 +437,7 @@ class ApiClient {
goto("/")
},
{ useBearerAuth: false, suspendGlobalErr: false }
{ useBearerAuth: false }
)
}
@ -469,10 +458,10 @@ class ApiClient {
return
}
await this.handleResponse<void>(response, { useBearerAuth: true })
await this.handleResponse<void>(response, { useBearerAuth: false })
await this.handleLocalLogout()
},
{ useBearerAuth: true, suspendGlobalErr: false }
{ useBearerAuth: true }
)
}
@ -484,12 +473,12 @@ class ApiClient {
...this.getAuthHeader()
}
})
const data = await this.handleResponse<ApiUserResponse>(response, { useBearerAuth: true })
const data = await this.handleResponse<ApiUserResponse>(response, { useBearerAuth: false })
const user = this.deserializeUser(data)
currentUser.set(user)
},
{ useBearerAuth: true, suspendGlobalErr: false }
{ useBearerAuth: true }
)
}
@ -509,20 +498,19 @@ class ApiClient {
...this.getAuthHeader(),
"Content-Type": "application/json"
},
credentials: "include",
body: JSON.stringify(data)
})
const { access_token: token, user } = await this.handleResponse<{
access_token: string
const { accessToken: token, user } = await this.handleResponse<{
accessToken: string
user: User
}>(response, { useBearerAuth: true })
}>(response, { useBearerAuth: false })
accessToken.set(token)
currentUser.set(user || null)
this.lastAtUpdate = new Date()
},
{ useBearerAuth: true, suspendGlobalErr: true } // Error displayed inside the settings modal
{ useBearerAuth: true }
)
}
@ -544,10 +532,10 @@ class ApiClient {
return
}
await this.handleResponse<void>(response, { useBearerAuth: true })
await this.handleResponse<void>(response, { useBearerAuth: false })
await this.handleLocalLogout()
},
{ useBearerAuth: true, suspendGlobalErr: true } // Error displayed inside the settings modal
{ useBearerAuth: true }
)
}
@ -568,12 +556,12 @@ class ApiClient {
}
})
const users = await this.handleResponse<User[]>(response, { useBearerAuth: true })
const users = await this.handleResponse<User[]>(response, { useBearerAuth: false })
console.log(`[ADMIN] Got ${users.length} user results`)
return users
},
{ useBearerAuth: true, suspendGlobalErr: true } // Error displayed inside the settings modal
{ useBearerAuth: true }
)
}
@ -601,9 +589,9 @@ class ApiClient {
return
}
await this.handleResponse<void>(response, { useBearerAuth: true })
await this.handleResponse<void>(response, { useBearerAuth: false })
},
{ useBearerAuth: true, suspendGlobalErr: true } // Error displayed inside the settings modal
{ useBearerAuth: true }
)
}
@ -621,7 +609,7 @@ class ApiClient {
let notes: NoteMetadata[] = []
let data = await this.handleResponse<ApiNoteMetadataResponse[]>(response, {
useBearerAuth: true
useBearerAuth: false
})
if (data) {
@ -632,7 +620,7 @@ class ApiClient {
return notes
},
{ useBearerAuth: true, suspendGlobalErr: false }
{ useBearerAuth: true }
)
}
@ -648,9 +636,9 @@ class ApiClient {
...this.getAuthHeader()
}
})
return await this.handleResponse<NewNoteResponse>(response, { useBearerAuth: true })
return await this.handleResponse<NewNoteResponse>(response, { useBearerAuth: false })
},
{ useBearerAuth: true, suspendGlobalErr: false }
{ useBearerAuth: true }
)
}
@ -677,7 +665,7 @@ class ApiClient {
})
const data = await this.handleResponse<ApiFullNoteResponse>(response, {
useBearerAuth: true
useBearerAuth: false
})
const note = this.deserializeFullNote(data)
@ -687,7 +675,7 @@ class ApiClient {
return note
},
{ useBearerAuth: true, suspendGlobalErr: false }
{ useBearerAuth: true }
)
}
@ -710,9 +698,9 @@ class ApiClient {
return
}
await this.handleResponse<void>(response, { useBearerAuth: true })
await this.handleResponse<void>(response, { useBearerAuth: false })
},
{ useBearerAuth: true, suspendGlobalErr: false }
{ useBearerAuth: true }
)
}
@ -740,7 +728,7 @@ class ApiClient {
})
const data = await this.handleResponse<ApiVersionMetadataResponse[]>(response, {
useBearerAuth: true
useBearerAuth: false
})
const versions = this.deserializeVersionMetadatas(data)
@ -749,7 +737,7 @@ class ApiClient {
return versions
},
{ useBearerAuth: true, suspendGlobalErr: false }
{ useBearerAuth: true }
)
}
@ -776,9 +764,9 @@ class ApiClient {
return
}
await this.handleResponse<void>(response, { useBearerAuth: true })
await this.handleResponse<void>(response, { useBearerAuth: false })
},
{ useBearerAuth: true, suspendGlobalErr: false }
{ useBearerAuth: true }
)
}
@ -793,9 +781,6 @@ class ApiClient {
// NOTE: No need to explicitly prevent attempting a cache hit as versions aren't editable
// TODO: If accessing the active version, don't attempt to hit the cache,
// but instead load the contents from the currently active full note
const cachedVersion = this.loadedVersionsCache.get(noteID + versionID)
if (cachedVersion != null) {
return cachedVersion
@ -810,7 +795,7 @@ class ApiClient {
})
const data = await this.handleResponse<ApiFullVersionResponse>(response, {
useBearerAuth: true
useBearerAuth: false
})
const version = this.joinDeserializedVersion(noteID, data)
@ -823,7 +808,7 @@ class ApiClient {
return version
},
{ useBearerAuth: true, suspendGlobalErr: false }
{ useBearerAuth: true }
)
}
}

6
web/src/lib/components/AuthForm.svelte
View File

@ -41,7 +41,11 @@
return
}
await handler(username, password)
try {
await handler(username, password)
} catch (err) {
cError.set(err instanceof Error ? err.message : "Authentication failed")
}
}
</script>

10
web/src/lib/components/NoteEditor.svelte
View File

@ -122,9 +122,9 @@
}
</script>
<div class="note-editor-content">
<div class="flex h-full flex-col">
<!-- Note title -->
<div class="note-title-container">
<div class="mb-4">
{#if isEditing}
<input
type="text"
@ -158,10 +158,10 @@
{/if}
</div>
<!-- Note content (takes up remaining vertical space) -->
<div class="note-editor-container">
<!-- Note content -->
<div class="flex-1 overflow-auto">
{#if isEditing}
<div class="note-editor-wrapper">
<div class="relative h-full">
<textarea
bind:this={textarea}
bind:value={editableContent}

138
web/src/lib/components/NoteView.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import { onDestroy, onMount } from "svelte"
import { onMount } from "svelte"
import { goto } from "$app/navigation"
import ThemeToggle from "./ThemeToggle.svelte"
import Sidebar from "./Sidebar.svelte"
@ -12,13 +12,10 @@
availableNotes,
versionHistory,
cError,
type FullNote,
cSuccess
type FullNote
} from "$lib/client"
import ToggleSidebar from "$lib/icons/ToggleSidebar.svelte"
import VersionArrow from "$lib/icons/VersionArrow.svelte"
import Close from "$lib/icons/Close.svelte"
import { ERR_NOTIFICATION_DUR, SUC_NOTIFICATION_DUR } from "$lib/const"
// State
let isComponentReady = false
@ -26,22 +23,25 @@
let showSettings = false
let showVersionsDropdown = false
let isEditing = false
let errorTimeout: ReturnType<typeof setTimeout> | null = null
let successTimeout: ReturnType<typeof setTimeout> | null = null
onMount(async (): Promise<any> => {
// The following fetch attempts to refresh any expired tokens automatically
await apiClient.getCurrentUser()
try {
// The following fetch attempts to refresh any expired tokens automatically
await apiClient.getCurrentUser()
// If still no current user after the fetch attempt, redirect to login
if (!$currentUser) {
console.log("[VIEW] No user data found, routing to login page")
// If still no current user after the fetch attempt, redirect to login
if (!$currentUser) {
console.log("no user data found, routing to auth page")
goto("/login")
return
}
await loadNotes()
} catch (error) {
console.error(`error during auth: ${error}`)
goto("/login")
return
}
await loadNotes()
// Default to sidebar closed on mobile
const handleResize = () => {
if (window.innerWidth < 768 && sidebarOpen) {
@ -165,88 +165,34 @@
}
const deleteNote = async (noteID: string) => {
await apiClient.deleteNote(noteID)
try {
await apiClient.deleteNote(noteID)
// If we're deleting the currently active note, clear the current note
if ($currentFullNote && $currentFullNote.id === noteID) {
currentFullNote.set(null)
// If we're deleting the currently active note, clear the current note
if ($currentFullNote && $currentFullNote.id === noteID) {
currentFullNote.set(null)
}
// Refresh the notes list due to updates being pushed to server
await loadNotes()
} catch (err) {
cError.set(`Failed to delete note: ${err instanceof Error ? err.message : "Unknown error"}`)
}
// Refresh the notes list due to updates being pushed to server
await loadNotes()
cSuccess.set("Note deleted successfully.")
}
const logout = async () => {
await apiClient.logout()
}
const errorUnsubscribe = cError.subscribe((value) => {
// Clear any existing timeout to avoid multiple timeouts
if (errorTimeout) {
clearTimeout(errorTimeout)
errorTimeout = null
}
if (value) {
errorTimeout = setTimeout(() => {
cError.set(null)
}, ERR_NOTIFICATION_DUR)
}
})
const successUnsubscribe = cSuccess.subscribe((value) => {
// Clear any existing timeout to avoid multiple timeouts
if (successTimeout) {
clearTimeout(successTimeout)
successTimeout = null
}
if (value) {
successTimeout = setTimeout(() => {
cSuccess.set(null)
}, SUC_NOTIFICATION_DUR)
}
})
onDestroy(() => {
errorUnsubscribe()
successUnsubscribe()
// Clear any pending timeouts
if (errorTimeout) {
clearTimeout(errorTimeout)
}
if (successTimeout) {
clearTimeout(successTimeout)
}
})
</script>
{#if isComponentReady}
<div class="main-layout-container">
<!-- Error notification -->
{#if $cError}
<div class="main-info-popup">
<div class="main-error-popup">
<div class="error">
{$cError}
<button class="main-info-popup-button" on:click={() => cError.set(null)}>
<Close />
</button>
</div>
</div>
{/if}
<!-- Success notification -->
{#if $cSuccess}
<div class="main-info-popup">
<div class="success">
{$cSuccess}
<button class="main-info-popup-button" on:click={() => cSuccess.set(null)}>
<Close />
</button>
<button class="ml-2 text-red-700" on:click={() => cError.set(null)}> × </button>
</div>
</div>
{/if}
@ -264,9 +210,9 @@
on:close={closeSidebar}
/>
<!-- Main content area -->
<!-- Main content -->
<div
class="content-wrapper transition-all duration-300"
class="flex flex-1 flex-col overflow-hidden transition-all duration-300"
class:md:-ml-64={!sidebarOpen}
class:md:ml-0={sidebarOpen}
>
@ -333,19 +279,17 @@
</div>
</header>
<!-- Note content area with fixed width -->
<div class="note-content-fixed-width">
<main class="main-content">
{#if $currentFullNote}
<NoteEditor note={$currentFullNote} bind:isEditing {saveNote} />
{:else}
<div class="flex h-full flex-col items-center justify-center">
<p class="mb-4 text-lg">None selected</p>
<button on:click={createNewNote} class="btn-primary">Create note</button>
</div>
{/if}
</main>
</div>
<!-- Note content area -->
<main class="main-content">
{#if $currentFullNote}
<NoteEditor note={$currentFullNote} bind:isEditing {saveNote} />
{:else}
<div class="flex h-full flex-col items-center justify-center">
<p class="mb-4 text-lg">None selected</p>
<button on:click={createNewNote} class="btn-primary">Create note</button>
</div>
{/if}
</main>
</div>
<!-- Settings Modal -->

52
web/src/lib/components/SettingsModal.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import { apiClient, cSuccess } from "$lib/client"
import { apiClient, cError } from "$lib/client"
import Close from "$lib/icons/Close.svelte"
import { isPasswordValid } from "$lib/utils"
import { onMount } from "svelte"
@ -10,12 +10,11 @@
let currentPassword = ""
let newPassword = ""
let confirmPassword = ""
let changePasswordModalError = ""
let passwordError = ""
let isNewPasswordValid = true
let deleteConfirmPassword = ""
let deleteConfirmText = ""
let deleteUserModalError = ""
let modalContent: HTMLDivElement | null = null
let previouslyFocusedElement: HTMLElement | null = null
@ -46,24 +45,24 @@
const changePassword = async () => {
if (!currentPassword) {
changePasswordModalError = "Current password is required."
passwordError = "Current password is required"
return
}
if (!newPassword) {
changePasswordModalError = "New password is required."
passwordError = "New password is required"
return
}
if (newPassword !== confirmPassword) {
changePasswordModalError = "New passwords do not match."
passwordError = "New passwords do not match"
return
}
;[isNewPasswordValid, changePasswordModalError] = isPasswordValid(newPassword)
;[isNewPasswordValid, passwordError] = isPasswordValid(newPassword)
if (!isNewPasswordValid) {
// Error will be automatically displayed inside corresponding modal section
// Error will be automatically displayed
return
}
@ -73,32 +72,33 @@
newPassword = ""
confirmPassword = ""
cSuccess.set("Password updated successfully.")
cError.set("Password updated successfully")
setTimeout(() => {
cError.set(null)
onClose()
}, 100)
} catch (err) {
changePasswordModalError = err instanceof Error ? err.message : "Unknown error."
}, 2000)
} catch (error) {
// Error handling is done by the API client
}
}
const deleteAccount = async () => {
if (!deleteConfirmPassword) {
deleteUserModalError = "Password is required to delete your account."
passwordError = "Password is required to delete your account"
return
}
if (deleteConfirmText !== "DELETE") {
deleteUserModalError = "Please type DELETE to confirm account deletion."
passwordError = "Please type DELETE to confirm account deletion"
return
}
try {
await apiClient.deleteCurrentUser(deleteConfirmPassword)
// The API client will handle the redirect to login page after successful deletion
} catch (err) {
deleteUserModalError = err instanceof Error ? err.message : "Unknown error."
} catch (error) {
// Error handling is done by the API client
}
}
@ -142,7 +142,7 @@
role="document"
tabindex="-1"
>
<!-- Header (title + close button) -->
<!-- Header -->
<div class="modal-section flex items-center justify-between" role="heading" aria-level="1">
<h2 class="text-xl font-bold">Settings</h2>
<button on:click={onClose} class="modal-close-button" aria-label="Close settings">
@ -154,9 +154,9 @@
<div class="modal-section">
<h3 class="mb-4 text-lg font-bold">Account Settings</h3>
{#if changePasswordModalError}
{#if passwordError}
<div class="error mb-4" role="alert">
{changePasswordModalError}
{passwordError}
</div>
{/if}
@ -181,22 +181,14 @@
<input type="password" id="confirmPassword" bind:value={confirmPassword} class="w-full" />
</div>
<button on:click={changePassword} class="btn-primary w-full rounded-full">
Change Password
</button>
<button on:click={changePassword} class="btn-primary w-full"> Change Password </button>
</div>
</div>
<!-- Danger zone -->
<div class="modal-section">
<div class="p-4">
<h3 class="mb-4 text-lg font-bold text-red-500">Danger Zone</h3>
{#if deleteUserModalError}
<div class="error mb-4" role="alert">
{deleteUserModalError}
</div>
{/if}
<div class="space-y-4">
<p class="text-sm">
Deleting your account will permanently remove all your notes and account information. This
@ -228,7 +220,7 @@
<button
on:click={deleteAccount}
class="w-full rounded-full bg-red-500 font-bold text-white hover:bg-red-600 disabled:cursor-not-allowed disabled:opacity-50"
class="w-full rounded bg-red-500 px-4 py-2 font-bold text-white hover:bg-red-600 disabled:cursor-not-allowed disabled:opacity-50"
disabled={deleteConfirmText !== "DELETE" || !deleteConfirmPassword}
>
Delete My Account

2
web/src/lib/components/Sidebar.svelte
View File

@ -90,7 +90,7 @@
<div class="relative pl-4">
<button
on:click={closeSidebar}
class="btn-secondary h-9 w-9 rounded-full p-2 md:hidden"
class="btn-secondary rounded-full p-2 md:hidden"
aria-label="Close sidebar"
>
<Close />

4
web/src/lib/const.ts
View File

@ -30,7 +30,3 @@ export const VIEW_COOKIE_PATH = import.meta.env.VITE_VIEW_COOKIE_PATH || "/"
export const VIEW_COOKIE_DOMAIN = import.meta.env.VITE_VIEW_COOKIE_DOMAIN || "localhost"
export const COOKIE_SAME_SITE = import.meta.env.VITE_COOKIE_SAME_SITE || "strict"
export const COOKIE_SECURE = import.meta.env.PROD ? true : false
// Error/success notification display durations
export const ERR_NOTIFICATION_DUR = 8 * 1000 // 8 s.
export const SUC_NOTIFICATION_DUR = 8 * 1000 // 8 s.

8
web/src/lib/icons/Close.svelte
View File

@ -1,3 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 201 B

After

Width:  |  Height:  |  Size: 223 B

2
web/src/routes/login/+page.svelte
View File

@ -3,7 +3,7 @@
import { apiClient } from "$lib/client"
const loginHandler = (username: string, password: string) => {
return apiClient.login(username, password) as Promise<void>
return apiClient.login(username, password)
}
</script>