121 lines
3.4 KiB
Vue
121 lines
3.4 KiB
Vue
<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'
|
|
import { setFieldValidation } from '@/api/validation'
|
|
|
|
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 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
|
|
let secretClients = []
|
|
if (Array.isArray(selectedClients.value)) {
|
|
secretClients = [...selectedClients.value]
|
|
}
|
|
const secretCreate: SecretCreate = {
|
|
value: secretValue.value,
|
|
name: secretName.value,
|
|
clients: secretClients,
|
|
client_distinguisher: 'id',
|
|
group: secretGroup,
|
|
}
|
|
emit('submit', secretCreate)
|
|
}
|
|
}
|
|
</script>
|