Dashboard and error handling

packages/sshecret-frontend/src/components/clients/ClientForm.vue

@@ -9,7 +9,8 @@
         :disabled="isEdit"
         :value="name"
         @blur="checkName"
-        @input="name = $event.target.value"
+        @sl-input="name = $event.target.value"
+        @input="emit('clearErrors')"
         ref="nameField"
       ></sl-input>
       <br />
@@ -79,15 +80,22 @@ const name = ref('')
 const description = ref('')
 const sourcePrefix = ref('')
 const policies = ref(['0.0.0.0/0', '::/0'])
-const publicKey = ref('')
+// This key is only here during testing.
+const publicKey = ref(
+  'ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABgQC737Yj7mbuBLDNbAuNGqhFF4Cvzd/ROq/QeQX0QIcPyZOoUtpXc7R/JIrdL6DXkPYXpN/IrUFoSeJQjV9Le+ewVxYELUPVhF0/nQhpBNE1Rjx2PRtJlfmywG5VRStgPQ+DSTDtgm4L0wPpnJiH3udkq/JFMHEYrVAF40QqNmR7AqYo1ZfEFk8YcQGb/S29JxWigq0qoJyufFENmSGNmabjqPAWJEf/oshMPaxwlDfTdmjeUWkPtsm10gi98XCwtnVCAVYZdVKeLSNpQCKUYVYWlycpahNczaITY9lehcMtux79uXTk2d4difra1Q4guw8oorUp1eRn/Al0BPeRb7x9WdgRs8wVY1kPD2796CTAQMkeBrOzGxwzwWhTf1XOuHG/wB5O2QSbcC6aMW9KAFmcCF+AOMb8Mv2Y5D7l/gbp938qTyZJ8ivP1/fy/88CWr+mrv5yP4HOZmNCyC9nMlAvrS/Kkg0tFU+NHFkDsmWpT3oar+VvGzkImEF6ip6Mzk8= testkey',
+)
 
 const nameField = ref<HTMLSlInputElement>()
 const sourceField = ref<HTMLSlInputElement>()
 const publicKeyField = ref<HTMLSlInputElement>()
 const clientCreateForm = ref<HTMLElement>()
 
-const props = defineProps<{ client?: Client | null }>()
-const emit = defineEmits<{ (e: 'submit', data: ClientCreate): void; (e: 'cancel'): void }>()
+const props = defineProps<{ client?: Client | null; errors: any[] | null }>()
+const emit = defineEmits<{
+  (e: 'submit', data: ClientCreate): void
+  (e: 'cancel'): void
+  (e: 'clearErrors'): void
+}>()
 
 const isEdit = computed(() => !!props.client)
 
@@ -138,6 +146,7 @@ function removePolicy(index: number) {
 
 function checkName() {
   nameField.value.reportValidity()
+  emit('clearErrors')
 }
 
 function validatePublicKey() {
@@ -160,6 +169,19 @@ function validatePublicKey() {
   setFieldValidation(publicKeyField, '')
 }
 
+watch(
+  () => props.errors,
+  (errors) => {
+    const nameErrors = errors.filter((e) => e.loc.includes('name'))
+    if (nameErrors.length > 0) {
+      console.log(nameErrors)
+      setFieldValidation(nameField, nameErrors[0].msg)
+    } else {
+      setFieldValidation(nameField, '')
+    }
+  },
+)
+
 async function submitForm() {
   if (clientCreateForm.value?.checkValidity()) {
     let clientDescription: string | null = null