Add new vue-based frontend
This commit is contained in:
236
packages/sshecret-frontend/src/components/clients/ClientForm.vue
Normal file
236
packages/sshecret-frontend/src/components/clients/ClientForm.vue
Normal file
@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<form @submit.prevent="submitForm" class="client-form" ref="clientCreateForm">
|
||||
<sl-input
|
||||
label="Name"
|
||||
required
|
||||
autocomplete="off"
|
||||
help-text="Name of the client, usually the hostname"
|
||||
:disabled="isEdit"
|
||||
:value="name"
|
||||
@blur="checkName"
|
||||
@input="name = $event.target.value"
|
||||
ref="nameField"
|
||||
></sl-input>
|
||||
<br />
|
||||
<sl-input
|
||||
label="Description"
|
||||
autocomplete="off"
|
||||
help-text="Optional description of the client"
|
||||
:value="description"
|
||||
@input="description = $event.target.value"
|
||||
></sl-input>
|
||||
<br />
|
||||
<sl-input
|
||||
label="Permitted Sources"
|
||||
:value="sourcePrefix"
|
||||
@input="sourcePrefix = $event.target.value"
|
||||
@blur="addPolicy"
|
||||
@keydown.enter.prevent="addPolicy"
|
||||
autocomplete="off"
|
||||
help-text="Enter the source IP addresses or IP prefixes that the client may connect from. Press enter or go to next field to add"
|
||||
ref="sourceField"
|
||||
>
|
||||
<sl-icon-button name="plus-circle" slot="suffix" @click="addPolicy"></sl-icon-button>
|
||||
</sl-input>
|
||||
<div class="my-2 border-b border-gray-100">
|
||||
<p>Added sources</p>
|
||||
<sl-tag
|
||||
class="mr-1 mb-1"
|
||||
v-for="(prefix, index) in policies"
|
||||
size="small"
|
||||
pill
|
||||
removable
|
||||
@sl-remove="removePolicy(index)"
|
||||
>
|
||||
{{ prefix }}
|
||||
</sl-tag>
|
||||
</div>
|
||||
<sl-textarea
|
||||
label="Public Key"
|
||||
autocomplete="off"
|
||||
required
|
||||
help-text="Enter the RSA public key of the client."
|
||||
ref="publicKeyField"
|
||||
:value="publicKey"
|
||||
@sl-input="publicKey = $event.target.value"
|
||||
@blur="validatePublicKey"
|
||||
></sl-textarea>
|
||||
<br />
|
||||
<sl-button type="submit" variant="primary" v-if="isEdit">Update Client</sl-button>
|
||||
<sl-button type="submit" variant="primary" v-else>Create Client</sl-button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import type { Ref } from 'vue'
|
||||
import { isIP } from 'is-ip'
|
||||
import isCidr from 'is-cidr'
|
||||
|
||||
import '@shoelace-style/shoelace/dist/components/button/button.js'
|
||||
import '@shoelace-style/shoelace/dist/components/input/input.js'
|
||||
import '@shoelace-style/shoelace/dist/components/icon-button/icon-button.js'
|
||||
import '@shoelace-style/shoelace/dist/components/tag/tag.js'
|
||||
import '@shoelace-style/shoelace/dist/components/textarea/textarea.js'
|
||||
import type { ClientCreate } from '@/client/types.gen'
|
||||
|
||||
const name = ref('')
|
||||
const description = ref('')
|
||||
const sourcePrefix = ref('')
|
||||
const policies = ref(['0.0.0.0/0', '::/0'])
|
||||
const publicKey = ref('')
|
||||
|
||||
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 isEdit = computed(() => !!props.client)
|
||||
|
||||
watch(
|
||||
() => props.client,
|
||||
(client) => {
|
||||
if (client) {
|
||||
name.value = client.name
|
||||
if (client.description) {
|
||||
description.value = client.description
|
||||
}
|
||||
publicKey.value = client.public_key
|
||||
policies.value = client.policies
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
function setFieldValidation(field: Ref<HTMLSlInputElement>, errorMessage: string = '') {
|
||||
// Set validation on a field
|
||||
field.value?.setCustomValidity(errorMessage)
|
||||
field.value?.reportValidity()
|
||||
}
|
||||
|
||||
function addPolicy() {
|
||||
if (!sourcePrefix.value) {
|
||||
setFieldValidation(sourceField)
|
||||
return
|
||||
}
|
||||
if (!isIP(sourcePrefix.value) && !isCidr(sourcePrefix.value)) {
|
||||
setFieldValidation(sourceField, 'Invalid IP address or prefix')
|
||||
return
|
||||
}
|
||||
|
||||
setFieldValidation(sourceField)
|
||||
if (!policies.value.includes(sourcePrefix.value)) {
|
||||
policies.value.push(sourcePrefix.value)
|
||||
}
|
||||
sourcePrefix.value = ''
|
||||
}
|
||||
|
||||
function removePolicy(index: number) {
|
||||
policies.value.splice(index, 1)
|
||||
if (policies.value.length == 0) {
|
||||
setFieldValidation(sourceField, 'Must have at least one source defined')
|
||||
}
|
||||
}
|
||||
|
||||
function checkName() {
|
||||
nameField.value.reportValidity()
|
||||
}
|
||||
|
||||
function validatePublicKey() {
|
||||
const pubkey = publicKey.value
|
||||
const defaultError = 'Invalid public key. Must be a valid ssh-rsa key.'
|
||||
if (!pubkey.startsWith('ssh-rsa ')) {
|
||||
setFieldValidation(publicKeyField, defaultError)
|
||||
return
|
||||
}
|
||||
const parts = publicKey.value.split(' ')
|
||||
if (parts.length < 2) {
|
||||
setFieldValidation(publicKeyField, defaultError)
|
||||
return
|
||||
}
|
||||
if (parts[1].length < 10) {
|
||||
setFieldValidation(publicKeyField, 'SSH Key looks too short to be valid.')
|
||||
return
|
||||
}
|
||||
|
||||
setFieldValidation(publicKeyField, '')
|
||||
}
|
||||
|
||||
async function submitForm() {
|
||||
if (clientCreateForm.value?.checkValidity()) {
|
||||
let clientDescription: string | null = null
|
||||
if (description.value) {
|
||||
clientDescription = description.value
|
||||
}
|
||||
const clientCreate: ClientCreate = {
|
||||
name: name.value,
|
||||
description: clientDescription,
|
||||
public_key: publicKey.value.trim(),
|
||||
sources: [...policies.value],
|
||||
}
|
||||
emit('submit', clientCreate)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.client-form sl-input,
|
||||
.client-form sl-select,
|
||||
.client-form sl-checkbox {
|
||||
display: block;
|
||||
margin-bottom: var(--sl-spacing-medium);
|
||||
}
|
||||
|
||||
/* user invalid styles */
|
||||
.client-form sl-input[data-user-invalid]::part(base),
|
||||
.client-form sl-select[data-user-invalid]::part(combobox),
|
||||
.client-form sl-checkbox[data-user-invalid]::part(control) {
|
||||
border-color: var(--sl-color-danger-600);
|
||||
}
|
||||
|
||||
.client-form [data-user-invalid]::part(form-control-label),
|
||||
.client-form [data-user-invalid]::part(form-control-help-text),
|
||||
.client-form sl-checkbox[data-user-invalid]::part(label) {
|
||||
color: var(--sl-color-danger-700);
|
||||
}
|
||||
|
||||
.client-form sl-checkbox[data-user-invalid]::part(control) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.client-form sl-input:focus-within[data-user-invalid]::part(base),
|
||||
.client-form sl-select:focus-within[data-user-invalid]::part(combobox),
|
||||
.client-form sl-checkbox:focus-within[data-user-invalid]::part(control) {
|
||||
border-color: var(--sl-color-danger-600);
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-danger-300);
|
||||
}
|
||||
|
||||
/* User valid styles */
|
||||
.client-form sl-input[data-user-valid]::part(base),
|
||||
.client-form sl-select[data-user-valid]::part(combobox),
|
||||
.client-form sl-checkbox[data-user-valid]::part(control) {
|
||||
border-color: var(--sl-color-success-600);
|
||||
}
|
||||
|
||||
.client-form [data-user-valid]::part(form-control-label),
|
||||
.client-form [data-user-valid]::part(form-control-help-text),
|
||||
.client-form sl-checkbox[data-user-valid]::part(label) {
|
||||
color: var(--sl-color-success-700);
|
||||
}
|
||||
|
||||
.client-form sl-checkbox[data-user-valid]::part(control) {
|
||||
background-color: var(--sl-color-success-600);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.client-form sl-input:focus-within[data-user-valid]::part(base),
|
||||
.client-form sl-select:focus-within[data-user-valid]::part(combobox),
|
||||
.client-form sl-checkbox:focus-within[data-user-valid]::part(control) {
|
||||
border-color: var(--sl-color-success-600);
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-success-300);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user