From 77e3ac3ea0887ac6c4969118539d3eca8197d284 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 26 Jul 2023 04:08:17 +0200
Subject: [PATCH] fix form cosmetics

---
 components/BaseForm.vue  | 2 ++
 components/FormField.vue | 5 +++--
 components/YButton.vue   | 9 +++++++--
 pages/login.vue          | 2 ++
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/components/BaseForm.vue b/components/BaseForm.vue
index 9b76086..68c0074 100644
--- a/components/BaseForm.vue
+++ b/components/BaseForm.vue
@@ -5,12 +5,14 @@ import * as yup from 'yup'
 
 const props = defineProps<{
   schema: yup.ObjectShape
+  initialValues: Record<string, any>
 }>()
 
 const emit = defineEmits(['submit'])
 
 const { handleSubmit } = useForm({
   validationSchema: toTypedSchema(yup.object(props.schema)),
+  initialValues: props.initialValues,
 })
 
 const onSubmit = handleSubmit((values) => {
diff --git a/components/FormField.vue b/components/FormField.vue
index cfb1ef7..5e6e08f 100644
--- a/components/FormField.vue
+++ b/components/FormField.vue
@@ -7,6 +7,7 @@ const props = defineProps<{
   label: string
   icon?: string
   description?: string
+  row?: boolean
 }>()
 
 const { errorMessage } = useField(() => props.name)
@@ -33,11 +34,11 @@ provide(formGroupExtras, {
     <div
       role="group"
       :aria-invalid="invalid"
-      :class="{ 'is-invalid': invalid }"
+      :class="{ 'is-invalid': invalid, 'flex-col': !row }"
       class="flex"
     >
       <slot name="label">
-        <label :id="name + '__label'" :for="name" class="block">
+        <label :id="name + '__label'" :for="name" class="block ml-1 mb-2">
           <Icon
             v-if="icon"
             :name="icon"
diff --git a/components/YButton.vue b/components/YButton.vue
index 98db470..e4d4666 100644
--- a/components/YButton.vue
+++ b/components/YButton.vue
@@ -5,6 +5,8 @@ const props = withDefaults(
     text?: string
     variant?: string
     icon?: string
+    iconSize: string
+    iconOnly: boolean
     block?: boolean
   }>(),
   {
@@ -12,6 +14,8 @@ const props = withDefaults(
     text: undefined,
     variant: 'primary',
     icon: undefined,
+    iconSize: '1.5em',
+    iconOnly: false,
     block: false,
   },
 )
@@ -21,6 +25,7 @@ const variantClass = computed(() => {
     primary: 'btn-primary',
     success: 'btn-success',
     info: 'btn-info',
+    error: 'btn-error',
   }[props.variant]
 })
 </script>
@@ -28,8 +33,8 @@ const variantClass = computed(() => {
 <template>
   <button class="btn" :class="[variantClass, { 'btn-block': block }]">
     <slot name="default">
-      <Icon v-if="icon" :name="icon" size="1.5em" aria-hidden="true" />
-      {{ text }}
+      <Icon v-if="icon" :name="icon" :size="iconSize" aria-hidden="true" />
+      <span :class="{ 'sr-only': iconOnly }">{{ text }}</span>
     </slot>
   </button>
 </template>
diff --git a/pages/login.vue b/pages/login.vue
index 1774c43..87d52a1 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -46,6 +46,7 @@ const schema = {
         :label="t('username')"
         icon="mdi:account-circle"
         class="mb-4"
+        row
       >
         <TextInput name="username" type="text" :placeholder="t('username')" />
       </FormField>
@@ -55,6 +56,7 @@ const schema = {
         :label="t('password')"
         icon="mdi:lock"
         class="mb-4"
+        row
       >
         <TextInput
           name="password"