eising/sshecret
1
0
Fork 0
Code Issues 28 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Implement validation

Browse Source
This commit is contained in:
Allan Eising
2025-07-16 09:22:13 +02:00
parent f8eac2b09c
commit f0c729cba7
3 changed files with 54 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
packages/sshecret-frontend/src/components/clients/ClientForm.vue
View File

@ -84,7 +84,11 @@ const sourceField = ref<HTMLSlInputElement>()
const publicKeyField = ref<HTMLSlInputElement>()
const clientCreateForm = ref<HTMLElement>()
const props = defineProps<{ client?: Client | null; errors: any[] | null }>()
interface Props {
client?: Client
errors?: any[]
}
const props = defineProps<Props>()
const emit = defineEmits<{
(e: 'submit', data: ClientCreate): void
(e: 'cancel'): void
@ -198,61 +202,3 @@ async function submitForm() {
}
}
</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>