feat: add asterisk on required fields

sapphiredev · Jul 23, 2024 · a2d131e · a2d131e
1 parent fea28a5
commit a2d131e
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 20 deletions.
diff --git a/components/forms/input.vue b/components/forms/input.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="form-control w-full">
 		<label class="label">
-			<span class="label-text">{{ label }}</span>
+			<span class="label-text">{{ label }}<FormsRequiredStar :required="required" /></span>
 		</label>
 		<input v-model="value" type="text" class="input input-bordered w-full shadow-md" :class="{ 'input-error': !!errorMessage }" />
 		<label class="label">
@@ -11,7 +11,7 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{ name: string; label: string }>();
+const props = defineProps<{ name: string; label: string; required?: boolean }>();
 
 const { value, errorMessage } = useField<string>(toRef(props, 'name'));
 </script>
diff --git a/components/forms/required-star.vue b/components/forms/required-star.vue
@@ -0,0 +1,7 @@
+<template>
+	<span v-if="required" class="ml-1 font-bold text-red-600">*</span>
+</template>
+
+<script lang="ts" setup>
+defineProps<{ required?: boolean }>();
+</script>
diff --git a/components/forms/select.vue b/components/forms/select.vue
@@ -2,7 +2,7 @@
 	<div class="form-control mb-4 w-full">
 		<label class="label">
 			<span class="label-text">
-				{{ label }}
+				{{ label }}<FormsRequiredStar :required="required" />
 				<span v-if="options.length === 0">
 					<span class="font-bold text-error">
 						<NuxtLink :aria-label="`Go to configuration page for ${label}`" class="link link-secondary" :to="addNewOptionHref"

diff --git a/components/forms/textarea.vue b/components/forms/textarea.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="form-control h-1/2">
 		<label class="label">
-			<span class="label-text">{{ label }}</span>
+			<span class="label-text">{{ label }}<FormsRequiredStar :required="required" /></span>
 			<span v-if="lengthCount.length" class="label-text text-slate-600 dark:text-gray-400">Length per part: {{ lengthCount.join(', ') }}</span>
 		</label>
 		<textarea
@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{ name: string; label: string }>();
+const props = defineProps<{ name: string; label: string; required?: boolean }>();
 
 const { value, errorMessage } = useField<string>(toRef(props, 'name'));
 

diff --git a/components/modals/role.vue b/components/modals/role.vue
@@ -1,12 +1,12 @@
 <template>
 	<div class="modal">
-		<form class="modal-box relative" @submit="onSubmit">
+		<form class="modal-box relative max-w-[40rem]" @submit="onSubmit">
 			<button aria-label="Close popup" class="btn btn-circle btn-sm absolute right-2 top-2" @click="handleClose(resetForm)">
 				<XCircleIcon />
 			</button>
 			<h3 class="text-lg font-bold">{{ action === 'add' ? 'Add a new role' : 'Update role' }}</h3>
-			<FormsInput name="label" label="Role name" />
-			<FormsInput name="value" label="Role Snowflake" />
+			<FormsInput name="label" label="Role name" :required="true" />
+			<FormsInput name="value" label="Role Snowflake" :required="true" />
 			<div class="mt-5 grid w-full grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-4">
 				<button aria-label="Reset inputs" type="button" class="btn btn-accent" @click="resetForm()">Reset form</button>
 				<button aria-label="Add role" type="submit" class="btn btn-primary" :disabled="isSubmitting || !meta.valid">

diff --git a/components/modals/webhook.vue b/components/modals/webhook.vue
@@ -1,12 +1,12 @@
 <template>
 	<div class="modal">
-		<form class="modal-box relative" @submit="onSubmit">
+		<form class="modal-box relative max-w-[40rem]" @submit="onSubmit">
 			<button aria-label="Close popup" class="btn btn-circle btn-sm absolute right-2 top-2" @click="handleClose(resetForm)">
 				<XCircleIcon />
 			</button>
 			<h3 class="text-lg font-bold">{{ action === 'add' ? 'Add a new Webhook URL' : 'Update Webhook URL' }}</h3>
-			<FormsInput name="label" label="Label" />
-			<FormsInput name="value" label="Webhook URL" />
+			<FormsInput name="label" label="Label" :required="true" />
+			<FormsInput name="value" label="Webhook URL" :required="true" />
 			<div class="mt-5 grid w-full grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-4">
 				<button aria-label="Reset inputs" type="button" class="btn btn-accent" @click="resetForm()">Reset form</button>
 				<button aria-label="Add webhook" type="submit" class="btn btn-primary" :disabled="isSubmitting || !meta.valid">

diff --git a/pages/post.vue b/pages/post.vue
@@ -1,23 +1,23 @@
 <template>
 	<div class="mt-5 grid h-full w-full grid-cols-1 px-5">
 		<form class="flex flex-col" @submit="onSubmit">
-			<modals-review
+			<ModalsReview
 				v-if="modalStorage.identifier === ''"
 				:values="values"
 				:is-editing="false"
 				@close-modal="modalStorage.resetModal()"
 				@reset-form="resetForm()"
 			/>
-			<forms-textarea name="text" label="Message Text" />
-			<forms-select
+			<FormsTextarea name="text" label="Message Text" :required="true" />
+			<FormsSelect
 				name="webhookUrl"
 				label="Choose the webhook URL to post to"
 				add-new-option-href="/configure/webhooks"
 				class="py-2 lg:py-6"
 				:options="webhookStorage.webhooks"
 				:required="true"
 			/>
-			<forms-select
+			<FormsSelect
 				name="role"
 				label="Optionally choose a role to mention"
 				add-new-option-href="/configure/roles"

diff --git a/pages/update.vue b/pages/update.vue
@@ -1,23 +1,23 @@
 <template>
 	<div class="mt-5 grid h-full w-full grid-cols-1 px-5">
 		<form class="flex flex-col" @submit="onSubmit">
-			<modals-review
+			<ModalsReview
 				v-if="modalStorage.identifier === ''"
 				:values="values"
 				:is-editing="true"
 				@close-modal="modalStorage.resetModal()"
 				@reset-form="resetForm()"
 			/>
-			<forms-textarea name="text" label="Message Text" />
-			<forms-select
+			<FormsTextarea name="text" label="Message Text" :required="true" />
+			<FormsSelect
 				name="webhookUrl"
 				label="Choose the webhook URL to post to"
 				add-new-option-href="/configure/webhooks"
 				class="pt-2 lg:pt-3"
 				:options="webhookStorage.webhooks"
 				:required="true"
 			/>
-			<forms-input name="messageId" label="Message id to update" />
+			<FormsInput name="messageId" label="Message id to update" :required="true" />
 			<button
 				type="button"
 				class="btn-shadow btn btn-primary w-full"
@@ -26,7 +26,7 @@
 			>
 				Fetch webhook message content from Discord
 			</button>
-			<forms-select
+			<FormsSelect
 				name="role"
 				label="Optionally choose a role to mention"
 				add-new-option-href="/configure/roles"