Beds 538/validation notification settings

frontend/components/bc/input/BcInputCheckbox.vue

@@ -1,10 +1,9 @@
 <script lang="ts" setup>
 import { faInfoCircle } from '@fortawesome/pro-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import type { BcInputError } from '~/components/bc/input/BcInputError.vue'
 
 const props = defineProps<{
-  error?: BcInputError,
+  error?: string,
   infoText?: string,
   label?: string,
 }>()

frontend/components/bc/input/BcInputError.vue

@@ -1,13 +1,11 @@
 <script lang="ts" setup>
 const idError = useId()
-/**
- * Spacing of error message will be removed by explicitly passing `false`.
- * This should encourage to always think about the error message.
- */
-export type BcInputError = false | string
-defineProps<{
-  error?: BcInputError,
-}>()
+
+withDefaults(defineProps<{
+  error?: string,
+}>(), {
+  error: '',
+})
 </script>
 
 <template>
@@ -17,7 +15,6 @@ defineProps<{
     :aria-describedby="idError"
   />
   <div
-    v-if="error !== false"
     :id="idError"
     class="bc-input-error"
   >

frontend/components/bc/input/BcInputText.vue

@@ -1,11 +1,9 @@
 <script lang="ts" setup>
-import type { BcInputError } from '~/components/bc/input/BcInputError.vue'
-
 const idInput = useId()
 const input = defineModel<string>()
 
 const props = withDefaults(defineProps<{
-  error?: BcInputError,
+  error?: string,
   inputWidth?: `${number}px`,
   label: string,
   labelPosition?: 'left' | 'right',

frontend/components/notifications/management/NotificationsManagementNetwork.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import type { NotificationSettingsNetwork } from '~/types/api/notifications'
+
 const { t: $t } = useTranslation()
 
 const notificationsManagementStore = useNotificationsManagementStore()
@@ -13,12 +15,28 @@ const currentNetworkSettings = computed(() => currentNetwork.value?.settings)
 
 const thresholdGasAbove = ref(formatWeiTo(currentNetworkSettings.value?.gas_above_threshold ?? '0', { unit: 'gwei' }))
 const thresholdGasBelow = ref(formatWeiTo(currentNetworkSettings.value?.gas_below_threshold ?? '0', { unit: 'gwei' }))
-const thresholdParticipationRate = ref(formatFraction(currentNetworkSettings.value?.participation_rate_threshold ?? 0))
+// const thresholdParticipationRate = ref(formatFraction(currentNetworkSettings.value?.participation_rate_threshold ?? 0))
 const hasGasAbove = ref(currentNetworkSettings.value?.is_gas_above_subscribed ?? false)
 const hasGasBelow = ref(currentNetworkSettings.value?.is_gas_below_subscribed ?? false)
 const hasParticipationRate = ref(currentNetworkSettings.value?.is_participation_rate_subscribed ?? false)
 const hasNewRewardRound = ref(currentNetworkSettings.value?.is_new_reward_round_subscribed ?? false)
 
+// const validationSchema = createSchemaObject({
+//   is_webhook_discord_enabled: validation.boolean(),
+//   webhook_url: validation.url($t('validation.url.invalid')),
+// })
+
+const {
+  errorMessage,
+  value: thresholdParticipationRate,
+} = useField<NotificationSettingsNetwork['participation_rate_threshold']>(
+  'thresholdParticipationRate',
+  validation.numberRange({
+    max: 100,
+    min: 0,
+  }),
+)
+
 watchDebounced([
   hasGasAbove,
   hasGasBelow,
@@ -49,6 +67,9 @@ watchDebounced([
 
 <template>
   <div>
+    <pre>
+      {{ errorMessage }}
+    </pre>
     <div v-if="!networks.length" class="error-container">
       Upps something went wrong. Please try again.
     </div>
@@ -75,29 +96,28 @@ watchDebounced([
           <span>
             {{ $t('notifications.network.settings.alert_if_gas_below') }}
           </span>
-          <span class="">
-            <BcInputUnit
-              v-model="thresholdGasBelow"
-              :unit="$t('common.units.GWEI')"
-            />
-          </span>
+          <BcInputUnit
+            v-model="thresholdGasBelow"
+            :unit="$t('common.units.GWEI')"
+          />
           <BcToggle
             v-model="hasGasBelow"
             class="toggle"
           />
           <span>
             {{ $t('notifications.network.settings.alert_if_gas_above') }}
           </span>
-          <span class="">
-            <BcInputUnit
-              v-model="thresholdGasAbove"
-              :unit="$t('common.units.GWEI')"
-            />
-          </span>
+          <BcInputUnit
+            v-model="thresholdGasAbove"
+            :unit="$t('common.units.GWEI')"
+          />
           <BcToggle
             v-model="hasGasAbove"
             class="toggle"
           />
+          <BcInputError
+            error="Invalid input"
+          />
         </BcListSection>
         <BcListSection
           class="grid-overwrite"
@@ -116,6 +136,9 @@ watchDebounced([
             v-model="hasParticipationRate"
             class="toggle"
           />
+          <BcInputError
+            :error="``"
+          />
         </BcListSection>
       </div>
     </BcTabPanel>

frontend/components/notifications/management/modal/NotificationsManagementModalWebhook.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faPaperPlane } from '@fortawesome/pro-solid-svg-icons'
-import { useForm } from 'vee-validate'
 import { warn } from 'vue'
 import { API_PATH } from '~/types/customFetch'
 import type { NotificationSettingsValidatorDashboard } from '~/types/api/notifications'

frontend/components/user/settings/UserSettingsEmail.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { object as yupObject } from 'yup'
-import { useForm } from 'vee-validate'
 import { API_PATH } from '~/types/customFetch'
 
 const { t: $t } = useTranslation()

frontend/components/user/settings/UserSettingsPassword.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { object as yupObject } from 'yup'
-import { useForm } from 'vee-validate'
 import { API_PATH } from '~/types/customFetch'
 
 const { t: $t } = useTranslation()

frontend/nuxt.config.ts

@@ -56,14 +56,17 @@ export default defineNuxtConfig({
   eslint: { config: { stylistic: true } },
   i18n: { vueI18n: './i18n.config.ts' },
   modules: [
-    '@nuxtjs/i18n',
+    '@nuxt/eslint',
     '@nuxtjs/color-mode',
+    '@nuxtjs/i18n',
     [
       '@pinia/nuxt',
-      { storesDirs: [ './stores/**' ] },
+      {
+        storesDirs: [ './stores/**' ],
+      },
     ],
     '@primevue/nuxt-module',
-    '@nuxt/eslint',
+    '@vee-validate/nuxt',
     '@vueuse/nuxt',
   ],
   nitro: {