refactor: remove pocketbase (#1138)

ui/src/components/user/UserForm.vue

@@ -0,0 +1,223 @@
+<script setup lang="ts">
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Button } from '@/components/ui/button'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import { Switch } from '@/components/ui/switch'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+
+import { useQuery } from '@tanstack/vue-query'
+import { defineRule, useForm } from 'vee-validate'
+import { ref, watch } from 'vue'
+
+import { useAPI } from '@/api'
+import type { UserUpdate } from '@/client/models'
+
+const api = useAPI()
+
+const submitDisabledReason = ref<string>('')
+
+const props = defineProps<{
+  user?: UserUpdate
+}>()
+
+const emit = defineEmits(['submit'])
+
+const isDemo = ref(false)
+
+const { data: config } = useQuery({
+  queryKey: ['config'],
+  queryFn: () => api.getConfig()
+})
+
+watch(
+  () => config.value,
+  () => {
+    if (!config.value) return
+    if (config.value.flags.includes('demo')) {
+      isDemo.value = true
+    }
+  },
+  { immediate: true }
+)
+
+defineRule('required', (value: string) => {
+  if (!value || !value.length) {
+    return 'This field is required'
+  }
+
+  return true
+})
+
+defineRule('username', (value: string) => {
+  const usernamePattern = /^[a-z0-9_-]{3,72}$/
+  if (!usernamePattern.test(value)) {
+    return 'Username must be 3-72 characters long and can only contain lowercase letters, numbers, underscores, and hyphens'
+  }
+
+  return true
+})
+
+defineRule('email', (value: string) => {
+  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  if (!emailPattern.test(value)) {
+    return 'Please enter a valid email address'
+  }
+
+  return true
+})
+
+const { handleSubmit, validate, values } = useForm({
+  initialValues: props.user || {
+    username: '',
+    avatar: '',
+    email: '',
+    name: '',
+    active: false
+  },
+  validationSchema: {
+    username: 'username',
+    email: 'email',
+    name: 'required'
+  }
+})
+
+const equalUser = (values: UserUpdate, user?: UserUpdate): boolean => {
+  if (!user) return false
+
+  return (
+    user.username === values.username &&
+    user.avatar === values.avatar &&
+    user.email === values.email &&
+    user.name === values.name &&
+    user.active === values.active
+  )
+}
+
+const updateSubmitDisabledReason = () => {
+  if (props.user?.username === 'system') {
+    submitDisabledReason.value = 'The system user cannot be modified'
+
+    return
+  }
+
+  if (isDemo.value) {
+    submitDisabledReason.value = 'Users cannot be created or edited in demo mode'
+
+    return
+  }
+
+  if (equalUser(values, props.user)) {
+    submitDisabledReason.value = 'Make changes to save'
+
+    return
+  }
+
+  validate({ mode: 'silent' }).then((res) => {
+    if (res.valid) {
+      submitDisabledReason.value = ''
+    } else {
+      submitDisabledReason.value = 'Please fix the errors'
+    }
+  })
+}
+
+watch(
+  () => isDemo.value,
+  () => updateSubmitDisabledReason()
+)
+
+watch(
+  () => props.user,
+  () => updateSubmitDisabledReason(),
+  { immediate: true }
+)
+
+watch(
+  () => values,
+  () => updateSubmitDisabledReason(),
+  { deep: true, immediate: true }
+)
+
+const onSubmit = handleSubmit((values) => emit('submit', values))
+</script>
+
+<template>
+  <form @submit="onSubmit" class="flex w-full flex-col items-start gap-4">
+    <FormField name="name" v-slot="{ componentField }" validate-on-input>
+      <FormItem class="w-full">
+        <FormLabel for="name" class="text-right">Name</FormLabel>
+        <Input id="name" class="col-span-3" v-bind="componentField" />
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <FormField name="username" v-slot="{ componentField }" validate-on-input>
+      <FormItem class="w-full">
+        <FormLabel for="username" class="text-right">Username</FormLabel>
+        <Input id="username" class="col-span-3" v-bind="componentField" />
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <FormField name="email" v-slot="{ componentField }" validate-on-input>
+      <FormItem class="w-full">
+        <FormLabel for="email" class="text-right">Email</FormLabel>
+        <Input id="email" type="email" class="col-span-3" v-bind="componentField" />
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <FormField name="active" v-slot="{ value, handleChange }">
+      <FormItem class="w-full items-center gap-2">
+        <FormLabel>Active</FormLabel>
+        <div class="flex flex-row items-center gap-2">
+          <FormControl>
+            <Switch :checked="value" @update:checked="handleChange" />
+          </FormControl>
+          <FormDescription> Check to allow the user to log in. </FormDescription>
+        </div>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <Alert v-if="props.user?.username === 'system'" variant="destructive">
+      <AlertTitle>Cannot save</AlertTitle>
+      <AlertDescription>The system user cannot be modified.</AlertDescription>
+    </Alert>
+    <Alert v-else-if="isDemo" variant="destructive">
+      <AlertTitle>Cannot save</AlertTitle>
+      <AlertDescription>{{ submitDisabledReason }}</AlertDescription>
+    </Alert>
+    <div class="flex gap-4">
+      <TooltipProvider :delay-duration="0">
+        <Tooltip>
+          <TooltipTrigger class="cursor-default">
+            <Button
+              type="submit"
+              :variant="submitDisabledReason !== '' ? 'secondary' : 'default'"
+              :disabled="submitDisabledReason !== ''"
+              :title="submitDisabledReason"
+            >
+              Save
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <span v-if="submitDisabledReason !== ''">
+              {{ submitDisabledReason }}
+            </span>
+            <span v-else> Save the user. </span>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+      <slot name="cancel"></slot>
+    </div>
+  </form>
+</template>