main function given

app/pages/login.vue

@@ -5,12 +5,6 @@ import type { FormSubmitEvent, AuthFormField } from '@nuxt/ui'
 
 const toast = useToast()
 
-// create data model for the form
-const credentials = reactive({
-  email: '',
-  password: '',
-})
-
 const providers = [{
   label: 'Google',
   icon: 'i-simple-icons-google',
@@ -44,40 +38,54 @@ const fields: AuthFormField[] = [{
   type: 'checkbox'
 }]
 
-type Schema = z.output<typeof credentials>
+// actual login logic
 
-function formSubmit(payload: FormSubmitEvent<Schema>) {
-  console.log(payload);
-}
+const error_popup = ref(false)
 
-async function sendLogin() {
+async function sendLogin(u:string,p:string) {
   try {
-    await $fetch("/api/login", {
+    const r = await $fetch("/api/login", {
       method: "POST",
-      body: credentials
+      body: {"email": u, "password": p}
     })
-
     await refreshSession()
     await navigateTo('/dashboard') // user home page
-
   } catch {
-    alert("Login failed.")
+    error_popup.value = true // show popup
+    }
   }
+
+const schema = z.object({
+  email: z.email('Invalid email'),
+  password: z.string('Password is required').min(8, 'Must be at least 8 characters')
+})
+
+
+function onSubmit(payload: FormSubmitEvent<schema>) {
+  const data = payload.data.email
+  console.log('Submitted', data)
+  sendLogin(payload.data.email, payload.data.password)
 }
+
 </script>
 
 <template>
     <div class="flex flex-col items-center justify-center gap-4 p-4">
       <UPageCard class="w-full max-w-md">
         <UAuthForm
-            :schema="credentials"
+            :schema="schema"
             title="Login"
             description="Enter your credentials to access your account."
             icon="i-lucide-user"
             :fields="fields"
             :providers="providers"
             @submit="onSubmit"
-        />
+        >
+          <template #validation>
+            <UAlert v-if="error_popup" color="error" variant="subtle" icon="i-lucide-info" title="Error signing in" />
+          </template>
+
+        </UAuthForm>
       </UPageCard>
     </div>
 </template>

package.json

@@ -16,7 +16,7 @@
     "@nuxt/ui": "^4.2.0",
     "@nuxtjs/mdc": "0.19.1",
     "@tailwindcss/vite": "^4.1.17",
-    "@vueuse/core": "^14.0.0",
+    "@vueuse/core": "^10.0.0",
     "@vueuse/head": "github:vueuse/head",
     "nuxt": "^4.2.1",
     "nuxt-auth-utils": "0.5.25",
@@ -24,7 +24,8 @@
     "tailwindcss": "^4.1.17",
     "typescript": "^5.9.3",
     "vue": "^3.5.24",
-    "vue-router": "^4.6.3"
+    "vue-router": "^4.6.3",
+    "zod": "^4.1.13"
   },
   "devDependencies": {
     "@iconify-json/lucide": "^1.2.77",

pnpm-lock.yaml

@@ -16,7 +16,7 @@ importers:
         version: 3.20.1(magicast@0.5.1)(typescript@5.9.3)
       '@nuxt/ui':
         specifier: ^4.2.0
-        version: 4.2.0(@babel/parser@7.28.5)(db0@0.3.4)(embla-carousel@8.6.0)(ioredis@5.8.2)(magicast@0.5.1)(typescript@5.9.3)(vite@7.2.4(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.1))(vue-router@4.6.3(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
+        version: 4.2.0(@babel/parser@7.28.5)(db0@0.3.4)(embla-carousel@8.6.0)(ioredis@5.8.2)(magicast@0.5.1)(typescript@5.9.3)(vite@7.2.4(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.1))(vue-router@4.6.3(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))(zod@4.1.13)
       '@nuxtjs/mdc':
         specifier: 0.19.1
         version: 0.19.1(magicast@0.5.1)
@@ -24,8 +24,8 @@ importers:
         specifier: ^4.1.17
         version: 4.1.17(vite@7.2.4(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.1))
       '@vueuse/core':
-        specifier: ^14.0.0
-        version: 14.0.0(vue@3.5.24(typescript@5.9.3))
+        specifier: ^10.0.0
+        version: 10.11.1(vue@3.5.24(typescript@5.9.3))
       '@vueuse/head':
         specifier: github:vueuse/head
         version: https://codeload.github.com/vueuse/head/tar.gz/7dde2cbc097f2c8878977826f257a233289165c0(vue@3.5.24(typescript@5.9.3))
@@ -50,6 +50,9 @@ importers:
       vue-router:
         specifier: ^4.6.3
         version: 4.6.3(vue@3.5.24(typescript@5.9.3))
+      zod:
+        specifier: ^4.1.13
+        version: 4.1.13
     devDependencies:
       '@iconify-json/lucide':
         specifier: ^1.2.77
@@ -1700,11 +1703,6 @@ packages:
     peerDependencies:
       vue: ^3.5.0
 
-  '@vueuse/core@14.0.0':
-    resolution: {integrity: sha512-d6tKRWkZE8IQElX2aHBxXOMD478fHIYV+Dzm2y9Ag122ICBpNKtGICiXKOhWU3L1kKdttDD9dCMS4bGP3jhCTQ==}
-    peerDependencies:
-      vue: ^3.5.0
-
   '@vueuse/head@https://codeload.github.com/vueuse/head/tar.gz/7dde2cbc097f2c8878977826f257a233289165c0':
     resolution: {tarball: https://codeload.github.com/vueuse/head/tar.gz/7dde2cbc097f2c8878977826f257a233289165c0}
     version: 2.0.0
@@ -1762,9 +1760,6 @@ packages:
   '@vueuse/metadata@13.9.0':
     resolution: {integrity: sha512-1AFRvuiGphfF7yWixZa0KwjYH8ulyjDCC0aFgrGRz8+P4kvDFSdXLVfTk5xAN9wEuD1J6z4/myMoYbnHoX07zg==}
 
-  '@vueuse/metadata@14.0.0':
-    resolution: {integrity: sha512-6yoGqbJcMldVCevkFiHDBTB1V5Hq+G/haPlGIuaFZHpXC0HADB0EN1ryQAAceiW+ryS3niUwvdFbGiqHqBrfVA==}
-
   '@vueuse/shared@10.11.1':
     resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
 
@@ -1776,11 +1771,6 @@ packages:
     peerDependencies:
       vue: ^3.5.0
 
-  '@vueuse/shared@14.0.0':
-    resolution: {integrity: sha512-mTCA0uczBgurRlwVaQHfG0Ja7UdGe4g9mwffiJmvLiTtp1G4AQyIjej6si/k8c8pUwTfVpNufck+23gXptPAkw==}
-    peerDependencies:
-      vue: ^3.5.0
-
   abbrev@3.0.1:
     resolution: {integrity: sha512-AO2ac6pjRB3SJmGJo+v5/aK6Omggp6fsLrs6wN9bd35ulu4cCwaAU9+7ZhXjeqHVkaHThLuzH0nZr0YpCDhygg==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -4950,6 +4940,9 @@ packages:
     resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==}
     engines: {node: '>= 14'}
 
+  zod@4.1.13:
+    resolution: {integrity: sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==}
+
   zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
 
@@ -5878,7 +5871,7 @@ snapshots:
       - magicast
       - typescript
 
-  '@nuxt/ui@4.2.0(@babel/parser@7.28.5)(db0@0.3.4)(embla-carousel@8.6.0)(ioredis@5.8.2)(magicast@0.5.1)(typescript@5.9.3)(vite@7.2.4(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.1))(vue-router@4.6.3(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))':
+  '@nuxt/ui@4.2.0(@babel/parser@7.28.5)(db0@0.3.4)(embla-carousel@8.6.0)(ioredis@5.8.2)(magicast@0.5.1)(typescript@5.9.3)(vite@7.2.4(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.1))(vue-router@4.6.3(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))(zod@4.1.13)':
     dependencies:
       '@iconify/vue': 5.0.0(vue@3.5.24(typescript@5.9.3))
       '@internationalized/date': 3.10.0
@@ -5928,6 +5921,7 @@ snapshots:
       vue-component-type-helpers: 3.1.4
     optionalDependencies:
       vue-router: 4.6.3(vue@3.5.24(typescript@5.9.3))
+      zod: 4.1.13
     transitivePeerDependencies:
       - '@azure/app-configuration'
       - '@azure/cosmos'
@@ -6921,13 +6915,6 @@ snapshots:
       '@vueuse/shared': 13.9.0(vue@3.5.24(typescript@5.9.3))
       vue: 3.5.24(typescript@5.9.3)
 
-  '@vueuse/core@14.0.0(vue@3.5.24(typescript@5.9.3))':
-    dependencies:
-      '@types/web-bluetooth': 0.0.21
-      '@vueuse/metadata': 14.0.0
-      '@vueuse/shared': 14.0.0(vue@3.5.24(typescript@5.9.3))
-      vue: 3.5.24(typescript@5.9.3)
-
   '@vueuse/head@https://codeload.github.com/vueuse/head/tar.gz/7dde2cbc097f2c8878977826f257a233289165c0(vue@3.5.24(typescript@5.9.3))':
     dependencies:
       '@unhead/dom': 1.11.20
@@ -6950,8 +6937,6 @@ snapshots:
 
   '@vueuse/metadata@13.9.0': {}
 
-  '@vueuse/metadata@14.0.0': {}
-
   '@vueuse/shared@10.11.1(vue@3.5.24(typescript@5.9.3))':
     dependencies:
       vue-demi: 0.14.10(vue@3.5.24(typescript@5.9.3))
@@ -6969,10 +6954,6 @@ snapshots:
     dependencies:
       vue: 3.5.24(typescript@5.9.3)
 
-  '@vueuse/shared@14.0.0(vue@3.5.24(typescript@5.9.3))':
-    dependencies:
-      vue: 3.5.24(typescript@5.9.3)
-
   abbrev@3.0.1: {}
 
   abort-controller@3.0.0:
@@ -10778,4 +10759,6 @@ snapshots:
       compress-commons: 6.0.2
       readable-stream: 4.7.0
 
+  zod@4.1.13: {}
+
   zwitch@2.0.4: {}

server/api/login.post.ts

@@ -5,21 +5,34 @@ const bodySchema = z.object({
     password: z.string(),
 })
 
+function check_login(user: string,pwd: string): number {
+    /*const r = $fetch("http://localhost:5000/login", {
+        method: "POST",
+        body: JSON.stringify({user: user, pwd: pwd}),
+    })*/
+    if (user === "tomas@suricatingss.xyz" && pwd === "tomas190905")
+        return 0; // 0 = no errror = success
+    else return 1;
+}
+
 export default defineEventHandler(async (event) => {
     const { email, password } = await readValidatedBody(event, bodySchema.parse)
 
-    if (email === 'admin@admin.com' && password === 'iamtheadmin') {
-        // set the user session in the cookie
-        // this server util is auto-imported by the auth-utils module
-        await setUserSession(event, {
-            user: {
-                name: 'John Doe',
-            },
-        })
-        return {}
+    const response = (check_login(email, password));
+    switch (response) {
+        case 0:
+            // set the user session in the cookie
+            // this server util is auto-imported by the auth-utils module
+            await setUserSession(event, {
+                user: {
+                    name: 'John Doe',
+                },
+            })
+            return "";
+        case 1:
+            setResponseStatus(event, 403);
+            return "Incorrect login";
+
+
     }
-    throw createError({
-        statusCode: 401,
-        message: 'Bad credentials',
-    })
 })

server/api/register.post.ts

@@ -7,3 +7,7 @@ const bodyPost = z.object({
     pwd: z.string()
 })
 
+export default defineEventHandler(async (event) => {
+
+})
+