Removed unused attributes

src/components/Auth.vue

@@ -3,9 +3,9 @@
 		<div class="w-[480px] bg-ls-0 dark:bg-ds-900 p-12 rounded-lg shadow">
 			<img class="mx-auto h-16 mb-12" src="/assets/logo.svg" alt="Polaris" />
 			<form name="authForm" @submit.prevent="doLogin" class="space-y-6">
-				<InputText v-model="username" id="username" name="username" autocomplete="username" label="Username"
+				<InputText v-model="username" id="username" autocomplete="username" label="Username"
 					:error="badCredentials" required autofocus />
-				<InputText v-model="password" id="password" name="password" autocomplete="password" label="Password"
+				<InputText v-model="password" id="password" autocomplete="password" label="Password"
 					:error="badCredentials" required password />
 				<div v-if="badCredentials" class="text-red-600 dark:text-red-500 text-sm py-2">
 					Incorrect credentials, please try again.

src/components/basic/InputText.vue

@@ -1,15 +1,15 @@
 <template>
     <div>
-        <label v-if="label" :for="name" class="block text-sm font-medium leading-6 text-ls-900 dark:text-ds-0">
+        <label v-if="label" :for="id" class="block text-sm font-medium leading-6 text-ls-900 dark:text-ds-0">
             {{ props.label }}
         </label>
         <div :class="{ 'mt-2': label }" class="relative rounded-md shadow-sm">
             <div v-if="icon" class="pointer-events-none absolute inset-y-0 left-3 flex items-center">
                 <span class="material-icons-round text-ls-400" v-text="icon" />
             </div>
             <input ref="input" v-focus="autofocus" v-model="model" :id="id" :type="password ? 'password' : 'text'"
-                :placeholder="placeholder" :name="name" :autocomplete="autocomplete" :autofocus="autofocus"
-                :required="required" :class="inputClass" class="w-full rounded-md border-0 py-2 pr-8 shadow-sm text-sm leading-6
+                :placeholder="placeholder" :autocomplete="autocomplete" :autofocus="autofocus" :required="required"
+                :class="inputClass" class="w-full rounded-md border-0 py-2 pr-8 shadow-sm text-sm leading-6
                 ring-1 ring-inset focus:ring-2 focus:ring-inset 
                 dark:bg-white/5
                 text-ls-900 dark:text-ds-0
@@ -44,7 +44,6 @@ const props = defineProps<{
     label?: string,
     icon?: string,
     placeholder?: string,
-    name?: string,
     autocomplete?: string,
     autofocus?: boolean,
     password?: boolean,

src/components/initial-setup/Mount.vue

@@ -2,10 +2,10 @@
 	<Step title="Music Sources"
 		description="Please indicate which directory Polaris should scan to populate your music collection.">
 		<div class="flex items-stretch gap-6">
-			<InputText class="grow" v-model="mountDir.source" id="location" name="location" label="Location"
-				placeholder="C:\MyMusic" required />
-			<InputText class="grow" v-model="mountDir.name" id="name" name="name" label="Name"
-				placeholder="Local Drive Music" required />
+			<InputText class="grow" v-model="mountDir.source" id="location" label="Location" placeholder="C:\MyMusic"
+				required />
+			<InputText class="grow" v-model="mountDir.name" id="name" label="Name" placeholder="Local Drive Music"
+				required />
 		</div>
 		<Button label="Next" size="xl" :disabled="!validate()" @click="proceed" />
 		<p class="mt-4 text-ls-500 text-xs">

src/components/initial-setup/User.vue

@@ -1,10 +1,9 @@
 <template>
 	<Step title="User Account" description="Please choose a username and password.">
-		<InputText v-model="username" id="username" name="username" autocomplete="username" label="Username" required />
-		<InputText v-model="password" id="password" name="password" autocomplete="password" label="Password" required
-			password />
-		<InputText v-model="passwordConfirm" id="passwordConfirm" name="passwordConfirm" autocomplete="password"
-			label="Confirm password" required password />
+		<InputText v-model="username" id="username" autocomplete="username" label="Username" required />
+		<InputText v-model="password" id="password" autocomplete="password" label="Password" required password />
+		<InputText v-model="passwordConfirm" id="passwordConfirm" autocomplete="password" label="Confirm password"
+			required password />
 		<p v-if="passwordMismatch" class="text-red-600 dark:text-red-500 text-sm py-2">
 			The passwords do not match.
 		</p>

src/components/library/Albums.vue

@@ -13,8 +13,8 @@
 
         <div v-if="albums.length" class="grow min-h-0 flex flex-col">
 
-            <InputText v-if="viewMode == 'all'" class="mb-8 w-80" v-model="filter" id="filter" name="filter"
-                placeholder="Filter" icon="filter_alt" autofocus clearable />
+            <InputText v-if="viewMode == 'all'" class="mb-8 w-80" v-model="filter" id="filter" placeholder="Filter"
+                icon="filter_alt" autofocus clearable />
 
             <div v-if="!filtered.length" class="grow flex mt-40 justify-center text-center">
                 <BlankStateFiller icon="filter_alt_off">

src/components/library/Artists.vue

@@ -13,8 +13,8 @@
         <div v-if="artists.length" class="grow min-h-0 flex flex-col">
             <div class="mb-8 flex items-center justify-between">
                 <!-- TODO tooltips -->
-                <InputText class="w-80" v-model="filter" id="filter" name="filter" placeholder="Filter"
-                    icon="filter_alt" autofocus clearable />
+                <InputText class="w-80" v-model="filter" id="filter" placeholder="Filter" icon="filter_alt" autofocus
+                    clearable />
                 <!-- TODO tooltips -->
                 <Switch v-model="displayMode"
                     :items="[{ icon: 'view_list', value: 'fixed' }, { icon: 'text_fields', value: 'proportional' }]" />

src/components/library/Files.vue

@@ -3,8 +3,8 @@
 		<PageTitle label="Files" />
 
 		<div v-show="treeModel.length" class="grow min-h-0 flex flex-col">
-			<InputText class="mb-8" v-model="filterQuery" id="filter" name="filter" placeholder="Filter"
-				icon="filter_alt" clearable />
+			<InputText class="mb-8" v-model="filterQuery" id="filter" placeholder="Filter" icon="filter_alt"
+				clearable />
 			<VirtualTree ref="tree" v-model="treeModel" @node-expand="openDirectory" @keydown="onKeyDown"
 				@nodes-drag-start="onDragStart" @nodes-drag="updateDrag" @nodes-drag-end="endDrag" class="grow" />
 		</div>

src/components/library/GenreAlbums.vue

@@ -1,8 +1,8 @@
 <template>
     <div v-if="albums?.length" class="min-h-0 flex flex-col">
         <div class="min-h-0 flex flex-col">
-            <InputText class="mb-8 w-80" v-model="filter" id="filter" name="filter" placeholder="Filter"
-                icon="filter_alt" autofocus clearable />
+            <InputText class="mb-8 w-80" v-model="filter" id="filter" placeholder="Filter" icon="filter_alt" autofocus
+                clearable />
             <AlbumGrid v-if="filteredAlbums.length" ref="album-grid" class="-m-4 p-4 overflow-y-scroll"
                 :albums="filteredAlbums" :num-columns="5" :show-artists="true">
             </AlbumGrid>

src/components/library/GenreArtists.vue

@@ -3,8 +3,8 @@
         <div class="min-h-0 flex flex-col">
             <div class="mb-8 flex items-center justify-between">
                 <!-- TODO tooltips -->
-                <InputText class="w-80" v-model="filter" id="filter" name="filter" placeholder="Filter"
-                    icon="filter_alt" autofocus clearable />
+                <InputText class="w-80" v-model="filter" id="filter" placeholder="Filter" icon="filter_alt" autofocus
+                    clearable />
                 <!-- TODO tooltips -->
                 <Switch v-model="displayMode"
                     :items="[{ icon: 'view_list', value: 'fixed' }, { icon: 'text_fields', value: 'proportional' }]" />

src/components/library/Genres.vue

@@ -3,8 +3,8 @@
         <PageTitle label="Genres" />
 
         <div v-if="genres && genres.length" class="grow min-h-0 flex flex-col">
-            <InputText class="mb-8" v-model="filter" id="filter" name="filter" placeholder="Filter" icon="filter_alt"
-                autofocus clearable />
+            <InputText class="mb-8" v-model="filter" id="filter" placeholder="Filter" icon="filter_alt" autofocus
+                clearable />
             <div v-if="filtered.length" ref="viewport" class="flex flex-wrap gap-2 -mx-4 px-4 overflow-scroll">
                 <Draggable v-for="genre of filtered" :make-payload="() => new DndPayloadGenre(genre.name)"
                     class="cursor-pointer !w-fit !h-fit" :key="genre.name" @click="onGenreClicked(genre)">

src/components/library/Playlists.vue

@@ -2,8 +2,8 @@
 	<div class="flex flex-col">
 		<PageTitle label="Playlists" />
 		<div v-if="playlists.listing.length" class="grow min-h-0 flex flex-col">
-			<InputText class="mb-8" v-model="filter" id="filter" name="filter" placeholder="Filter" icon="filter_alt"
-				autofocus clearable />
+			<InputText class="mb-8" v-model="filter" id="filter" placeholder="Filter" icon="filter_alt" autofocus
+				clearable />
 			<div ref="viewport" class="-mx-4 px-4 overflow-y-scroll whitespace-nowrap">
 				<div v-if="filtered?.length" class="flex flex-col overflow-x-hidden
                 divide-y divide-ls-200 dark:divide-ds-700">

src/components/library/Search.vue

@@ -3,8 +3,8 @@
 		<PageTitle label="Search" />
 
 		<div class="mb-8 flex gap-2">
-			<InputText class="grow" v-model="query" id="search" name="search" placeholder="Search" icon=" search"
-				autofocus clearable />
+			<InputText class="grow" v-model="query" id="search" placeholder="Search" icon=" search" autofocus
+				clearable />
 			<Button icon="menu_book" label="Help" severity="tertiary" @click="showHelp = true" />
 		</div>