first commit, i i have no idea what i have done
This commit is contained in:
tdv
246
management-ui/src/pages/Create.vue
Normal file
246
management-ui/src/pages/Create.vue
Normal file
@@ -0,0 +1,246 @@
|
||||
<script setup lang="ts">
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import AssignDevice from '@/customcompometns/AssignDevice.vue'
|
||||
import { useColorMode } from '@vueuse/core'
|
||||
import Navbar from '@/customcompometns/Navbar.vue';
|
||||
import type { PropType } from 'vue';
|
||||
import { defineProps, defineEmits, reactive, watch, ref, computed } from 'vue';
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { api } from '@/lib/api'
|
||||
|
||||
const mode = useColorMode()
|
||||
|
||||
type CreateDevicePayload = {
|
||||
guid: string
|
||||
name: string
|
||||
userIds: number[]
|
||||
}
|
||||
|
||||
type CreateUserPayload = {
|
||||
username: string
|
||||
password: string
|
||||
role: string // 'admin' | 'user'
|
||||
}
|
||||
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean as PropType<boolean>,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
// local form state
|
||||
const device_form = reactive({
|
||||
guid: uuidv4(), // default fresh UUID
|
||||
name: '',
|
||||
})
|
||||
|
||||
const user_form = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
isAdmin: false,
|
||||
})
|
||||
|
||||
// userIds from AssignDevice (expects v-model of string[] ids)
|
||||
const selectedUserIds = ref<string[]>([])
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
if (val) {
|
||||
device_form.guid = uuidv4()
|
||||
device_form.name = ''
|
||||
selectedUserIds.value = []
|
||||
user_form.username = ''
|
||||
user_form.password = ''
|
||||
user_form.isAdmin = false
|
||||
userError.value = null
|
||||
userSubmitting.value = false
|
||||
userSuccess.value = null
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
// simple UUIDv4 check (best-effort)
|
||||
const uuidV4Re = /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i
|
||||
const submitting = ref(false)
|
||||
const errorMsg = ref<string | null>(null)
|
||||
|
||||
const userSubmitting = ref(false)
|
||||
const userError = ref<string | null>(null)
|
||||
const userSuccess = ref<string | null>(null)
|
||||
const userRole = computed<string>(() => (user_form.isAdmin ? 'admin' : 'user'))
|
||||
|
||||
const canSubmit = computed(() => {
|
||||
return (
|
||||
!!device_form.guid &&
|
||||
uuidV4Re.test(device_form.guid) &&
|
||||
!!device_form.name.trim() &&
|
||||
!submitting.value
|
||||
)
|
||||
})
|
||||
|
||||
async function submitDevice() {
|
||||
errorMsg.value = null
|
||||
if (!canSubmit.value) {
|
||||
errorMsg.value = 'Please provide a valid GUID and name.'
|
||||
return
|
||||
}
|
||||
|
||||
const userIds: number[] = selectedUserIds.value
|
||||
.map((s) => Number(s))
|
||||
.filter((n) => Number.isFinite(n) && n >= 0)
|
||||
|
||||
const payload: CreateDevicePayload = {
|
||||
guid: device_form.guid,
|
||||
name: device_form.name.trim(),
|
||||
userIds,
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
await api.post('/devices/create', payload)
|
||||
router.replace('/admin')
|
||||
} catch (e: any) {
|
||||
// keep client error generic
|
||||
errorMsg.value = e?.response?.status === 403 ? 'Access denied.' : 'Failed to create device.'
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const canSubmitUser = computed(() => {
|
||||
return (
|
||||
user_form.username.trim().length >= 3 &&
|
||||
user_form.password.length >= 8 && // basic client-side check; real policy enforced server-side
|
||||
!userSubmitting.value
|
||||
)
|
||||
})
|
||||
|
||||
async function submitUser() {
|
||||
userError.value = null
|
||||
userSuccess.value = null
|
||||
|
||||
if (!canSubmitUser.value) {
|
||||
userError.value = 'Username must be at least 3 chars; password at least 8.'
|
||||
return
|
||||
}
|
||||
|
||||
const payload: CreateUserPayload = {
|
||||
username: user_form.username.trim(),
|
||||
password: user_form.password, // do not trim passwords
|
||||
role: userRole.value,
|
||||
}
|
||||
|
||||
userSubmitting.value = true
|
||||
try {
|
||||
await api.post('/users/create', payload)
|
||||
userSuccess.value = 'User created.'
|
||||
router.replace('/admin')
|
||||
} catch (e: any) {
|
||||
userError.value = e?.response?.status === 403 ? 'Access denied.' : 'Failed to create user.'
|
||||
} finally {
|
||||
userSubmitting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Navbar>
|
||||
<div class="w-full py-8">
|
||||
<div class="mx-auto">
|
||||
<!-- Horizontal cards with gap -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-stretch">
|
||||
<!-- Create device -->
|
||||
<Card class="h-full flex flex-col">
|
||||
<CardHeader>
|
||||
<CardTitle>Create device</CardTitle>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent class="flex-1">
|
||||
<!-- add vertical spacing between rows -->
|
||||
<div class="grid gap-5">
|
||||
<div class="grid grid-cols-4 items-center gap-4">
|
||||
<Label for="guid" class="text-right">GUID</Label>
|
||||
<Input id="guid" class="col-span-3 w-full" v-model="device_form.guid" />
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-4 items-center gap-4">
|
||||
<Label for="name" class="text-right">Name</Label>
|
||||
<Input id="name" class="col-span-3 w-full" v-model="device_form.name" />
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-4 items-center gap-4">
|
||||
<Label for="users" class="text-right">Allowed users</Label>
|
||||
<!-- make the component span and fill -->
|
||||
<AssignDevice id="users" class="col-span-3 w-full" v-model="selectedUserIds" />
|
||||
</div>
|
||||
<p v-if="errorMsg" class="text-sm text-red-600" aria-live="assertive">
|
||||
{{ errorMsg }}
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
<CardFooter>
|
||||
<Button :disabled="!canSubmit" @click="submitDevice">
|
||||
{{ submitting ? 'Saving…' : 'Save' }}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
<!-- Create user -->
|
||||
<Card class="h-full flex flex-col">
|
||||
<CardHeader>
|
||||
<CardTitle>Create user</CardTitle>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent class="flex-1">
|
||||
<div class="grid gap-5">
|
||||
<div class="grid grid-cols-4 items-center gap-4">
|
||||
<Label for="username" class="text-right">Username</Label>
|
||||
<Input id="username" class="col-span-3 w-full" v-model="user_form.username" />
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-4 items-center gap-4">
|
||||
<Label for="password" class="text-right">Password</Label>
|
||||
<Input id="password" type="password" class="col-span-3 w-full"
|
||||
v-model="user_form.password" />
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-4 items-center gap-4">
|
||||
<Label for="isAdmin" class="text-right">Make admin</Label>
|
||||
<div class="col-span-3">
|
||||
<Switch id="isAdmin" v-model:checked="user_form.isAdmin"
|
||||
v-model="user_form.isAdmin"
|
||||
@update:checked="(v: any) => user_form.isAdmin = !!v"
|
||||
@update:modelValue="(v: any) => user_form.isAdmin = !!v"/>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="userError" class="text-sm text-red-600" aria-live="assertive">
|
||||
{{ userError }}
|
||||
</p>
|
||||
<p v-if="userSuccess" class="text-sm text-green-600" aria-live="polite">
|
||||
{{ userSuccess }}
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
<CardFooter>
|
||||
<Button :disabled="!canSubmitUser" @click="submitUser">
|
||||
{{ userSubmitting ? 'Saving…' : 'Save changes' }}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Navbar>
|
||||
</template>
|
||||
Reference in New Issue
Block a user