refactor(frontend): migrate project settings to FormField component

Migrate ProjectSettingsEdit and ProjectSettingsWebhooks views
to use the new FormField component.

frontend/src/views/project/settings/ProjectSettingsEdit.vue

@@ -8,77 +8,51 @@
 		@primary="save"
 		@tertiary="$router.push({ name: 'project.settings.delete', params: { id: projectId } })"
 	>
-		<div class="field">
-			<label
-				class="label"
-				for="title"
-			>{{ $t('project.title') }}</label>
-			<div class="control">
-				<input
-					id="title"
-					v-model="project.title"
-					v-focus
-					:class="{ 'disabled': isLoading}"
-					:disabled="isLoading || undefined"
-					class="input"
-					:placeholder="$t('project.edit.titlePlaceholder')"
-					type="text"
-					@keyup.enter="save"
-				>
-			</div>
-		</div>
-		<div class="field">
-			<label class="label">{{ $t('project.parent') }}</label>
-			<div class="control">
-				<ProjectSearch v-model="parentProject" />
-			</div>
-		</div>
-		<div class="field">
-			<label
-				class="label"
-				for="projectdescription"
-			>{{ $t('project.edit.description') }}</label>
-			<div class="control">
-				<Editor
-					id="projectdescription"
-					v-model="project.description"
-					:class="{ 'disabled': isLoading}"
-					:disabled="isLoading"
-					:placeholder="$t('project.edit.descriptionPlaceholder')"
-				/>
-			</div>
-		</div>
+		<FormField
+			id="title"
+			v-model="project.title"
+			v-focus
+			:label="$t('project.title')"
+			:class="{ 'disabled': isLoading}"
+			:disabled="isLoading || undefined"
+			:placeholder="$t('project.edit.titlePlaceholder')"
+			type="text"
+			@keyup.enter="save"
+		/>
+		<FormField :label="$t('project.parent')">
+			<ProjectSearch v-model="parentProject" />
+		</FormField>
+		<FormField :label="$t('project.edit.description')">
+			<Editor
+				id="projectdescription"
+				v-model="project.description"
+				:class="{ 'disabled': isLoading}"
+				:disabled="isLoading"
+				:placeholder="$t('project.edit.descriptionPlaceholder')"
+			/>
+		</FormField>
 
 		<div class="columns">
-			<div class="column field">
-				<label
+			<div class="column">
+				<FormField
+					id="identifier"
+					v-model="project.identifier"
+					v-focus
 					v-tooltip="$t('project.edit.identifierTooltip')"
-					class="label"
-					for="identifier"
-				>
-					{{ $t('project.edit.identifier') }}
-				</label>
-				<div class="control">
-					<input
-						id="identifier"
-						v-model="project.identifier"
-						v-focus
-						:class="{ 'disabled': isLoading}"
-						:disabled="isLoading || undefined"
-						class="input"
-						:placeholder="$t('project.edit.identifierPlaceholder')"
-						type="text"
-						maxlength="10"
-						@keyup.enter="save"
-					>
-				</div>
+					:label="$t('project.edit.identifier')"
+					:class="{ 'disabled': isLoading}"
+					:disabled="isLoading || undefined"
+					:placeholder="$t('project.edit.identifierPlaceholder')"
+					type="text"
+					maxlength="10"
+					@keyup.enter="save"
+				/>
 			</div>
 
-			<div class="column field">
-				<label class="label">{{ $t('project.edit.color') }}</label>
-				<div class="control">
+			<div class="column">
+				<FormField :label="$t('project.edit.color')">
 					<ColorPicker v-model="project.hexColor" />
-				</div>
+				</FormField>
 			</div>
 		</div>
 	</CreateEdit>
@@ -92,6 +66,7 @@ import {useI18n} from 'vue-i18n'
 import Editor from '@/components/input/AsyncEditor'
 import ColorPicker from '@/components/input/ColorPicker.vue'
 import CreateEdit from '@/components/misc/CreateEdit.vue'
+import FormField from '@/components/input/FormField.vue'
 import ProjectSearch from '@/components/tasks/partials/ProjectSearch.vue'
 
 import type {IProject} from '@/modelTypes/IProject'

frontend/src/views/project/settings/ProjectSettingsWebhooks.vue

@@ -18,6 +18,7 @@ import User from '@/components/misc/User.vue'
 import WebhookModel from '@/models/webhook'
 import BaseButton from '@/components/base/BaseButton.vue'
 import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
+import FormField from '@/components/input/FormField.vue'
 import {success} from '@/message'
 import {isValidHttpUrl} from '@/helpers/isValidHttpUrl'
 
@@ -136,30 +137,15 @@ function validateSelectedEvents() {
 			v-if="webhooks?.length === 0 || showNewForm"
 			class="p-4"
 		>
-			<div class="field">
-				<label
-					class="label"
-					for="targetUrl"
-				>
-					{{ $t('project.webhooks.targetUrl') }}
-				</label>
-				<div class="control">
-					<input
-						id="targetUrl"
-						v-model="newWebhook.targetUrl"
-						required
-						class="input"
-						:placeholder="$t('project.webhooks.targetUrl')"
-						@focusout="validateTargetUrl"
-					>
-				</div>
-				<p
-					v-if="!webhookTargetUrlValid"
-					class="help is-danger"
-				>
-					{{ $t('project.webhooks.targetUrlInvalid') }}
-				</p>
-			</div>
+			<FormField
+				id="targetUrl"
+				v-model="newWebhook.targetUrl"
+				:label="$t('project.webhooks.targetUrl')"
+				required
+				:placeholder="$t('project.webhooks.targetUrl')"
+				:error="webhookTargetUrlValid ? null : $t('project.webhooks.targetUrlInvalid')"
+				@focusout="validateTargetUrl"
+			/>
 			<div class="field">
 				<label
 					class="label"