Continue frontend building

2025-07-13 12:03:43 +02:00
parent 6faed0dbd4
commit 746f809d28
44 changed files with 2057 additions and 632 deletions
--- a/packages/sshecret-frontend/src/components/secrets/SecretForm.vue
+++ b/packages/sshecret-frontend/src/components/secrets/SecretForm.vue
@ -0,0 +1,121 @@
+<template>
+  <form @submit.prevent="submitCreateSecret" ref="createSecretForm">
+    <sl-input
+      label="Name"
+      required
+      autocomplete="off"
+      help-text="Name of the secret"
+      :value="secretName"
+      @input="secretName = $event.target.value"
+      ref="nameField"
+    ></sl-input>
+    <template v-if="group">
+      <sl-input
+        disabled
+        :value="group"
+        label="Group"
+        help-text="Path of the group the secret will be created in."
+      ></sl-input>
+      <br />
+    </template>
+    <div class="flex justify-between w-full">
+      <div class="grow w-full mr-2">
+        <sl-range
+          min="8"
+          max="64"
+          @sl-change="secretLength = $event.target.value"
+          :value="secretLength"
+          label="Length"
+        ></sl-range>
+      </div>
+      <div class="flex-none">
+        <sl-button outline @click="generatePassword">Auto-generate</sl-button>
+      </div>
+    </div>
+    <sl-input
+      label="Secret"
+      type="password"
+      required
+      autocomplete="off"
+      help-text="Secret value"
+      @input="secretValue = $event.target.value"
+      :value="secretValue"
+      ref="secretField"
+      password-toggle
+    ></sl-input>
+    <label for="clients" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+      >Clients</label
+    >
+    <ClientSelectDropdown v-model="selectedClients" />
+    <div slot="footer">
+      <sl-button size="medium" variant="success" outline @click="submitCreateSecret" class="mr-2">
+        <sl-icon slot="prefix" name="person-plus"></sl-icon>
+        Submit
+      </sl-button>
+      <sl-button size="medium" outline @click="cancelCreateSecret">Cancel</sl-button>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import type { SecretCreate } from '@/client'
+import { ref } from 'vue'
+import { generateRandomPassword } from '@/api/password'
+import AddSecretsToClients from '@/components/secrets/AddSecretToClients.vue'
+import ClientSelectDropdown from '@/components/clients/ClientSelectDropdown.vue'
+
+const props = defineProps<{ group?: string }>()
+
+const emit = defineEmits<{ (e: 'submit', data: SecretCreate): void; (e: 'cancel'): void }>()
+
+const secretName = ref<string>()
+const createSecretForm = ref<HTMLFormElement>()
+const nameField = ref<HTMLSlInputElement>()
+const secretField = ref<HTMLSlInputElement>()
+const secretValue = ref()
+const secretLength = ref(8)
+const autoGenerate = ref(false)
+const selectedClients = ref<string[]>()
+
+function setFieldValidation(field: Ref<HTMLSlInputElement>, errorMessage: string = '') {
+  // Set validation on a field
+  field.value?.setCustomValidity(errorMessage)
+  field.value?.reportValidity()
+}
+
+function generatePassword() {
+  const password = generateRandomPassword(secretLength.value)
+  secretValue.value = password
+}
+
+function validateName() {
+  nameField.value.reportValidity()
+}
+
+function validateSecret() {
+  secretField.value.reportValidity()
+}
+
+function cancelCreateSecret() {
+  createSecretForm.value.reset()
+  emit('cancel')
+}
+
+function submitCreateSecret() {
+  validateName()
+  validateSecret()
+
+  if (createSecretForm.value?.checkValidity()) {
+    console.log('SelectedClients: ', selectedClients.value)
+    const secretGroup = props.group ?? null
+    const secretCreate: SecretCreate = {
+      value: secretValue.value,
+      name: secretName.value,
+      clients: [...selectedClients.value],
+      client_distinguisher: 'id',
+      group: secretGroup,
+    }
+    emit('submit', secretCreate)
+  }
+}
+</script>