refactor: use vuetify form controls

frontend/src/features/clients/views/ClientsView.vue

@@ -101,52 +101,53 @@
             </div>
 
             <div class="form-grid">
-                <label class="field field-wide">
-                    <span>{{ t('clients.fields.name') }}</span>
-                    <input
-                        v-model="form.name"
-                        type="text"
-                        :disabled="clientsStore.isCreating"
-                    />
-                </label>
+                <v-text-field
+                    v-model="form.name"
+                    class="field-wide"
+                    :label="t('clients.fields.name')"
+                    :disabled="clientsStore.isCreating"
+                    variant="outlined"
+                    hide-details
+                />
 
-                <label class="field field-wide">
-                    <span>{{ t('clients.fields.portraitUrl') }}</span>
-                    <input
-                        v-model="form.portraitUrl"
-                        type="url"
-                        placeholder="https://..."
-                        :disabled="clientsStore.isCreating"
-                    />
-                </label>
+                <v-text-field
+                    v-model="form.portraitUrl"
+                    class="field-wide"
+                    :label="t('clients.fields.portraitUrl')"
+                    :disabled="clientsStore.isCreating"
+                    placeholder="https://..."
+                    type="url"
+                    variant="outlined"
+                    hide-details
+                />
 
-                <label class="field">
-                    <span>{{ t('clients.fields.primaryContactName') }}</span>
-                    <input
-                        v-model="form.primaryContactName"
-                        type="text"
-                        :disabled="clientsStore.isCreating"
-                    />
-                </label>
+                <v-text-field
+                    v-model="form.primaryContactName"
+                    :label="t('clients.fields.primaryContactName')"
+                    :disabled="clientsStore.isCreating"
+                    variant="outlined"
+                    hide-details
+                />
 
-                <label class="field">
-                    <span>{{ t('clients.fields.primaryContactEmail') }}</span>
-                    <input
-                        v-model="form.primaryContactEmail"
-                        type="email"
-                        :disabled="clientsStore.isCreating"
-                    />
-                </label>
+                <v-text-field
+                    v-model="form.primaryContactEmail"
+                    :label="t('clients.fields.primaryContactEmail')"
+                    :disabled="clientsStore.isCreating"
+                    type="email"
+                    variant="outlined"
+                    hide-details
+                />
 
-                <label class="field field-wide">
-                    <span>{{ t('clients.fields.primaryContactPortraitUrl') }}</span>
-                    <input
-                        v-model="form.primaryContactPortraitUrl"
-                        type="url"
-                        placeholder="https://..."
-                        :disabled="clientsStore.isCreating"
-                    />
-                </label>
+                <v-text-field
+                    v-model="form.primaryContactPortraitUrl"
+                    class="field-wide"
+                    :label="t('clients.fields.primaryContactPortraitUrl')"
+                    :disabled="clientsStore.isCreating"
+                    placeholder="https://..."
+                    type="url"
+                    variant="outlined"
+                    hide-details
+                />
             </div>
 
             <div class="panel-actions">