Arnike/hnh-map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor frontend components for improved functionality and accessibility

Browse Source 
- Consolidated global error handling in app.vue to redirect users to the login page on API authentication failure.
- Enhanced MapView component by reintroducing event listeners for selected map and marker updates, improving interactivity.
- Updated PasswordInput and various modal components to ensure proper input handling and accessibility compliance.
- Refactored MapControls and MapControlsContent to streamline prop management and enhance user experience.
- Improved error handling in local storage operations within useMapBookmarks and useRecentLocations composables.
- Standardized input elements across forms for consistency in user interaction.
This commit is contained in:
Nikolay Tatarinov
2026-03-04 14:06:27 +03:00
parent 761fbaed55
commit fd624c2357
30 changed files with 109 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend-nuxt/pages/admin/index.vue
View File

@@ -58,7 +58,7 @@
placeholder="Search users…"
class="input input-sm input-bordered w-full min-h-11 touch-manipulation"
aria-label="Search users"
/>
>
</div>
<div class="flex flex-col gap-2 max-h-[60vh] overflow-y-auto">
<div
@@ -101,7 +101,7 @@
placeholder="Search maps…"
class="input input-sm input-bordered w-full min-h-11 touch-manipulation"
aria-label="Search maps"
/>
>
</div>
<div class="overflow-x-auto max-h-[60vh] overflow-y-auto">
<table class="table table-sm table-zebra min-w-[32rem]">
@@ -121,7 +121,7 @@
</th>
<th scope="col">Hidden</th>
<th scope="col">Priority</th>
<th scope="col" class="text-right"></th>
<th scope="col" class="text-right"/>
</tr>
</thead>
<tbody>
@@ -159,7 +159,7 @@
v-model="settings.prefix"
type="text"
class="input input-sm w-full min-h-11 touch-manipulation"
/>
>
</fieldset>
<fieldset class="fieldset w-full max-w-xs">
<label class="label" for="admin-settings-title">Title</label>
@@ -168,7 +168,7 @@
v-model="settings.title"
type="text"
class="input input-sm w-full min-h-11 touch-manipulation"
/>
>
</fieldset>
<fieldset class="fieldset">
<label class="label gap-2 cursor-pointer justify-start min-h-11 touch-manipulation" for="admin-settings-default-hide">
@@ -177,7 +177,7 @@
v-model="settings.defaultHide"
type="checkbox"
class="checkbox checkbox-sm"
/>
>
Default hide new maps
</label>
</fieldset>
@@ -211,7 +211,7 @@
</div>
<div class="flex flex-col gap-2">
<div class="flex flex-wrap items-center gap-2">
<input ref="mergeFileRef" type="file" accept=".zip" class="hidden" @change="onMergeFile" />
<input ref="mergeFileRef" type="file" accept=".zip" class="hidden" @change="onMergeFile" >
<button type="button" class="btn btn-sm min-h-11 touch-manipulation" @click="mergeFileRef?.click()">
Choose merge file
</button>

8
frontend-nuxt/pages/admin/maps/[id].vue
View File

@@ -2,20 +2,20 @@
<div class="container mx-auto p-4 max-w-2xl min-w-0">
<h1 class="text-2xl font-bold mb-6">Edit map {{ id }}</h1>
<form v-if="map" @submit.prevent="submit" class="flex flex-col gap-4">
<form v-if="map" class="flex flex-col gap-4" @submit.prevent="submit">
<fieldset class="fieldset">
<label class="label" for="name">Name</label>
<input id="name" v-model="form.name" type="text" class="input min-h-11 touch-manipulation" required />
<input id="name" v-model="form.name" type="text" class="input min-h-11 touch-manipulation" required >
</fieldset>
<fieldset class="fieldset">
<label class="label cursor-pointer gap-2">
<input v-model="form.hidden" type="checkbox" class="checkbox" />
<input v-model="form.hidden" type="checkbox" class="checkbox" >
<span>Hidden</span>
</label>
</fieldset>
<fieldset class="fieldset">
<label class="label cursor-pointer gap-2">
<input v-model="form.priority" type="checkbox" class="checkbox" />
<input v-model="form.priority" type="checkbox" class="checkbox" >
<span>Priority</span>
</label>
</fieldset>

6
frontend-nuxt/pages/admin/users/[username].vue
View File

@@ -2,7 +2,7 @@
<div class="container mx-auto p-4 max-w-2xl min-w-0">
<h1 class="text-2xl font-bold mb-6">{{ isNew ? 'New user' : `Edit ${username}` }}</h1>
<form @submit.prevent="submit" class="flex flex-col gap-4">
<form class="flex flex-col gap-4" @submit.prevent="submit">
<fieldset class="fieldset">
<label class="label" for="user">Username</label>
<input
@@ -12,7 +12,7 @@
class="input min-h-11 touch-manipulation"
required
:readonly="!isNew"
/>
>
</fieldset>
<p id="admin-user-password-hint" class="text-sm text-base-content/60 mb-1">Leave blank to keep current password.</p>
<PasswordInput
@@ -25,7 +25,7 @@
<label class="label">Auths</label>
<div class="flex flex-wrap gap-2">
<label v-for="a of authOptions" :key="a" class="label cursor-pointer gap-2" :for="`auth-${a}`">
<input :id="`auth-${a}`" v-model="form.auths" type="checkbox" :value="a" class="checkbox checkbox-sm" />
<input :id="`auth-${a}`" v-model="form.auths" type="checkbox" :value="a" class="checkbox checkbox-sm" >
<span>{{ a }}</span>
</label>
</div>

6
frontend-nuxt/pages/login.vue
View File

@@ -14,18 +14,18 @@
</a>
<div class="divider text-sm">or</div>
</div>
<form @submit.prevent="submit" class="flex flex-col gap-4">
<form class="flex flex-col gap-4" @submit.prevent="submit">
<fieldset class="fieldset">
<label class="label" for="user">User</label>
<input
ref="userInputRef"
id="user"
ref="userInputRef"
v-model="user"
type="text"
class="input min-h-11 touch-manipulation"
required
autocomplete="username"
/>
>
</fieldset>
<PasswordInput
v-model="pass"

2
frontend-nuxt/pages/profile.vue
View File

@@ -115,7 +115,7 @@
<icons-icon-settings />
Change password
</h2>
<form @submit.prevent="changePass" class="flex flex-col gap-2">
<form class="flex flex-col gap-2" @submit.prevent="changePass">
<PasswordInput
v-model="newPass"
placeholder="New password"

2
frontend-nuxt/pages/setup.vue
View File

@@ -6,7 +6,7 @@
This is the first run. Create the administrator account using the bootstrap password
from the server configuration (e.g. <code class="text-xs">HNHMAP_BOOTSTRAP_PASSWORD</code>).
</p>
<form @submit.prevent="submit" class="flex flex-col gap-4">
<form class="flex flex-col gap-4" @submit.prevent="submit">
<PasswordInput
v-model="pass"
label="Bootstrap password"