Login test

app.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
     <NuxtRouteAnnouncer/>
-    <h1 class="text-3xl font-bold underline">
-      Hello world!
-    </h1>
-    <Button label="Verify"/>
+    <div>
+      <NuxtPage/>
+    </div>
+    <Toast/>
   </div>
 </template>
 

components/FloatInputTextField.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+const id = useId();
+const props = defineProps({
+  value: {
+    type: String,
+    default: undefined,
+  },
+  type: {
+    type: String,
+    default: 'text',
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  }
+});
+
+// use `toRef` to create reactive references to `name` prop which is passed to `useField`
+// this is important because vee-validte needs to know if the field name changes
+// https://vee-validate.logaretm.com/v4/guide/composition-api/caveats
+const name = toRef(props, 'name');
+
+// we don't provide any rules here because we are using form-level validation
+// https://vee-validate.logaretm.com/v4/guide/validation#form-level-validation
+const {
+  value: inputValue,
+  errorMessage,
+  handleBlur,
+  handleChange,
+} = useField(name, undefined, {
+  initialValue: props.value,
+});
+
+const invalid = computed(() => errorMessage.value ? true : undefined);
+</script>
+
+<template>
+  <div class="grid grid-cols-1 gap-2">
+    <FloatLabel variant="on">
+      <InputText
+        :id="id" v-model="inputValue" class="w-full" :invalid="invalid" @blur="handleBlur" @input="handleChange"
+      />
+      <label :for="id">
+        {{ label }}
+      </label>
+    </FloatLabel>
+    <Message v-if="errorMessage" class="text-wrap">{{ errorMessage }}</Message>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package.json

@@ -27,7 +27,8 @@
   },
   "packageManager": "pnpm@10.6.1+sha512.40ee09af407fa9fbb5fbfb8e1cb40fbb74c0af0c3e10e9224d7b53c7658528615b2c92450e74cfad91e3a2dcafe3ce4050d80bda71d757756d2ce2b66213e9a3",
   "devDependencies": {
-    "@primevue/nuxt-module": "^4.3.2"
+    "@primevue/nuxt-module": "^4.3.2",
+    "typescript": "^5.8.2"
   },
   "pnpm": {
     "onlyBuiltDependencies": [

pages/index.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>
+    <h1 class="text-3xl font-bold underline">
+      Hello world!
+    </h1>
+    <Button label="Verify"/>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

pages/login.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { toTypedSchema } from '@vee-validate/zod';
+import * as zod from 'zod';
+
+const zodSchema = zod.object({
+  username: zod.string().min(1, { message: 'This is required' }),
+  password: zod.string().min(3),
+});
+const schema = toTypedSchema(zodSchema);
+
+const toast = useToast();
+
+function onSubmit(v: unknown) {
+  const values = v as zod.infer<typeof zodSchema>;
+  toast.add({ summary: 'Success', detail: 'The form has been submitted.', severity: 'success' });
+  console.log(values);
+}
+</script>
+
+<template>
+  <div class="w-screen h-screen bg-neutral-600">
+    <div class="flex justify-center items-center h-full">
+      <Card class="w-xs">
+        <template #title>Login</template>
+        <template #content>
+          <VeeForm v-slot="{isSubmitting}" :validation-schema="schema" @submit="onSubmit">
+            <div class="grid grid-cols-1 gap-2">
+              <FloatInputTextField name="username" label="Username"/>
+              <FloatInputTextField name="password" label="Password"/>
+              <Button type="submit" :loading="isSubmitting">Submit</Button>
+            </div>
+          </VeeForm>
+        </template>
+      </Card>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

pages/user/myself.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const { data } = await useFetch('/api/public/1/auth/myself/', {
+  method: 'GET',
+  headers: {
+    'Accept': 'application/json',
+  }
+});
+</script>
+
+<template>
+  <div>
+    <h2>MYSELF</h2>
+    <div v-if="data === null">
+      No Data
+    </div>
+    <div v-else>
+      {{ data }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

pnpm-lock.yaml

@@ -54,6 +54,9 @@ importers:
       '@primevue/nuxt-module':
         specifier: ^4.3.2
         version: 4.3.2(@babel/parser@7.26.10)(magicast@0.3.5)(vue@3.5.13(typescript@5.8.2))
+      typescript:
+        specifier: ^5.8.2
+        version: 5.8.2
 
 packages: