directus workgit add .!

2023-07-27 21:44:21 -04:00 · 2023-07-27 21:44:21 -04:00 · 0dea6bccdb
parent 954a526671
commit 0dea6bccdb
6 changed files with 152 additions and 75 deletions
--- a/components/Header.vue
+++ b/components/Header.vue
@ -1,5 +1,10 @@
 <script setup>
  const { isDesktopOrTablet } = useDevice();
+
+  const user = useDirectusUser();
+  const { logout } = useDirectusAuth()
+
+  console.log(user)
 </script>

 <template>
@ -11,9 +16,15 @@
      <NuxtLink to="/#events" ><h2>Events</h2></NuxtLink>
      <NuxtLink to="/members" v-if="isDesktopOrTablet" ><h2>Members</h2></NuxtLink>
    </div>
-    <div class="auth" v-if="isDesktopOrTablet" >
-      <NuxtLink to="/register"><h2>Register</h2></NuxtLink>
-      <NuxtLink to="/login"><h2>Sign in</h2></NuxtLink>
+    <div class="auth" v-if="isDesktopOrTablet">
+      <div class="links" v-if="!user">
+        <NuxtLink to="/register"><h2>Register</h2></NuxtLink>
+        <NuxtLink to="/login"><h2>Sign in</h2></NuxtLink>
+      </div>
+      <div class="user" v-if="user">
+        <p >{{user.first_name}}</p>
+        <p @click="logout" >Logout</p>
+      </div>
    </div>
  </header>
 </template>
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@ -5,8 +5,14 @@ export default defineNuxtConfig({
  modules: [
    '@nuxt/content',
    '@nuxtjs/device',
+    'nuxt-directus',
    'nuxt-time',
  ],
+
+  directus: {
+    url: 'https://cms.crbtc.org',
+    autoFetch: true,
+  },
  
  css: [
    "~/assets/style/main.scss",
--- a/package-lock.json
+++ b/package-lock.json
@ -8,7 +8,8 @@
      "hasInstallScript": true,
      "dependencies": {
        "date-fns": "^2.30.0",
-        "sass": "^1.63.6"
+        "sass": "^1.63.6",
+        "vee-validate": "^4.10.8"
      },
      "devDependencies": {
        "@nuxt/content": "^2.7.0",
@ -16,6 +17,7 @@
        "@nuxtjs/device": "^3.1.0",
        "@types/node": "^18.16.19",
        "nuxt": "^3.6.2",
+        "nuxt-directus": "^5.5.0",
        "nuxt-time": "^0.1.0"
      }
    },
@ -418,7 +420,6 @@
      "version": "7.22.7",
      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.7.tgz",
      "integrity": "sha512-7NF8pOkHP5o2vpmGgNGcfAeCvOYhGLyA3Z4eBQkT1RJlWu47n63bCs93QfJ2hIAFCil7L5P2IWhs1oToVgrL0Q==",
-      "dev": true,
      "bin": {
        "parser": "bin/babel-parser.js"
      },
@ -1445,8 +1446,7 @@
    "node_modules/@jridgewell/sourcemap-codec": {
      "version": "1.4.15",
      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-      "dev": true
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
    },
    "node_modules/@jridgewell/trace-mapping": {
      "version": "0.3.18",
@ -3116,7 +3116,6 @@
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.4.tgz",
      "integrity": "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==",
-      "dev": true,
      "dependencies": {
        "@babel/parser": "^7.21.3",
        "@vue/shared": "3.3.4",
@ -3127,14 +3126,12 @@
    "node_modules/@vue/compiler-core/node_modules/estree-walker": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-      "dev": true
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
    },
    "node_modules/@vue/compiler-dom": {
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz",
      "integrity": "sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==",
-      "dev": true,
      "dependencies": {
        "@vue/compiler-core": "3.3.4",
        "@vue/shared": "3.3.4"
@ -3144,7 +3141,6 @@
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz",
      "integrity": "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==",
-      "dev": true,
      "dependencies": {
        "@babel/parser": "^7.20.15",
        "@vue/compiler-core": "3.3.4",
@ -3161,14 +3157,12 @@
    "node_modules/@vue/compiler-sfc/node_modules/estree-walker": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-      "dev": true
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
    },
    "node_modules/@vue/compiler-ssr": {
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz",
      "integrity": "sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==",
-      "dev": true,
      "dependencies": {
        "@vue/compiler-dom": "3.3.4",
        "@vue/shared": "3.3.4"
@ -3177,14 +3171,12 @@
    "node_modules/@vue/devtools-api": {
      "version": "6.5.0",
      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
-      "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==",
-      "dev": true
+      "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
    },
    "node_modules/@vue/reactivity": {
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz",
      "integrity": "sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==",
-      "dev": true,
      "dependencies": {
        "@vue/shared": "3.3.4"
      }
@ -3193,7 +3185,6 @@
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz",
      "integrity": "sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==",
-      "dev": true,
      "dependencies": {
        "@babel/parser": "^7.20.15",
        "@vue/compiler-core": "3.3.4",
@ -3205,14 +3196,12 @@
    "node_modules/@vue/reactivity-transform/node_modules/estree-walker": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-      "dev": true
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
    },
    "node_modules/@vue/runtime-core": {
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.4.tgz",
      "integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==",
-      "dev": true,
      "dependencies": {
        "@vue/reactivity": "3.3.4",
        "@vue/shared": "3.3.4"
@ -3222,7 +3211,6 @@
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz",
      "integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==",
-      "dev": true,
      "dependencies": {
        "@vue/runtime-core": "3.3.4",
        "@vue/shared": "3.3.4",
@ -3233,7 +3221,6 @@
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.4.tgz",
      "integrity": "sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==",
-      "dev": true,
      "dependencies": {
        "@vue/compiler-ssr": "3.3.4",
        "@vue/shared": "3.3.4"
@ -3245,8 +3232,7 @@
    "node_modules/@vue/shared": {
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz",
-      "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==",
-      "dev": true
+      "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
    },
    "node_modules/abbrev": {
      "version": "1.1.1",
@ -4886,8 +4872,7 @@
    "node_modules/csstype": {
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
-      "dev": true
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
    },
    "node_modules/cuint": {
      "version": "0.2.2",
@ -7537,7 +7522,6 @@
      "version": "0.30.1",
      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.1.tgz",
      "integrity": "sha512-mbVKXPmS0z0G4XqFDCTllmDQ6coZzn94aMlb0o/A4HEHJCKcanlDZwYJgwnkmgD3jyWhUgj9VsPrfd972yPffA==",
-      "dev": true,
      "dependencies": {
        "@jridgewell/sourcemap-codec": "^1.4.15"
      },
@ -9484,6 +9468,15 @@
        }
      }
    },
+    "node_modules/nuxt-directus": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/nuxt-directus/-/nuxt-directus-5.5.0.tgz",
+      "integrity": "sha512-OsKuWsf6t+8i4YCWTI2Nh0ssoZbC606s43Zt1v6iUwdlxp3LnS4+EU9E72rssGZ7boVfQ1v5crponZAqZ26zLQ==",
+      "dev": true,
+      "dependencies": {
+        "@nuxt/kit": "^3.0.0"
+      }
+    },
    "node_modules/nuxt-time": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/nuxt-time/-/nuxt-time-0.1.0.tgz",
@ -9841,8 +9834,7 @@
    "node_modules/picocolors": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
    },
    "node_modules/picomatch": {
      "version": "2.3.1",
@ -9900,7 +9892,6 @@
      "version": "8.4.25",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.25.tgz",
      "integrity": "sha512-7taJ/8t2av0Z+sQEvNzCkpDynl0tX3uJMCODi6nT3PfASC7dYCWV9aQ+uiCf+KBD4SEFcu+GvJdGdwzQ6OSjCw==",
-      "dev": true,
      "funding": [
        {
          "type": "opencollective",
@ -10479,7 +10470,6 @@
      "version": "3.3.6",
      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
-      "dev": true,
      "funding": [
        {
          "type": "github",
@ -12744,6 +12734,29 @@
        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
      }
    },
+    "node_modules/vee-validate": {
+      "version": "4.10.8",
+      "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-4.10.8.tgz",
+      "integrity": "sha512-4VWziid3tdlIMGWr0D24YG/e+Q+M6TMK2DQg8dMvufgNyHFIpKxkMKwWoSMuQS0Pi0wKJEo5F5Kok8pXlei4vA==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0",
+        "type-fest": "^4.0.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.3.4"
+      }
+    },
+    "node_modules/vee-validate/node_modules/type-fest": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.0.0.tgz",
+      "integrity": "sha512-d/oYtUnPM9zar2fqqGLYPzgcY0qUlYK0evgNVti93xpzfjGkMgZHu9Lvgrkn0rqGXTgsFRxFamzjGoD9Uo+dgw==",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/vfile": {
      "version": "5.3.7",
      "resolved": "https://registry.npmjs.org/vfile/-/vfile-5.3.7.tgz",
@ -13185,7 +13198,6 @@
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz",
      "integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==",
-      "dev": true,
      "dependencies": {
        "@vue/compiler-dom": "3.3.4",
        "@vue/compiler-sfc": "3.3.4",
@ -13957,8 +13969,7 @@
    "@babel/parser": {
      "version": "7.22.7",
      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.7.tgz",
-      "integrity": "sha512-7NF8pOkHP5o2vpmGgNGcfAeCvOYhGLyA3Z4eBQkT1RJlWu47n63bCs93QfJ2hIAFCil7L5P2IWhs1oToVgrL0Q==",
-      "dev": true
+      "integrity": "sha512-7NF8pOkHP5o2vpmGgNGcfAeCvOYhGLyA3Z4eBQkT1RJlWu47n63bCs93QfJ2hIAFCil7L5P2IWhs1oToVgrL0Q=="
    },
    "@babel/plugin-syntax-import-meta": {
      "version": "7.10.4",
@ -14520,8 +14531,7 @@
    "@jridgewell/sourcemap-codec": {
      "version": "1.4.15",
      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-      "dev": true
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
    },
    "@jridgewell/trace-mapping": {
      "version": "0.3.18",
@ -15678,7 +15688,6 @@
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.4.tgz",
      "integrity": "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==",
-      "dev": true,
      "requires": {
        "@babel/parser": "^7.21.3",
        "@vue/shared": "3.3.4",
@ -15689,8 +15698,7 @@
        "estree-walker": {
          "version": "2.0.2",
          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-          "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-          "dev": true
+          "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
        }
      }
    },
@ -15698,7 +15706,6 @@
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz",
      "integrity": "sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==",
-      "dev": true,
      "requires": {
        "@vue/compiler-core": "3.3.4",
        "@vue/shared": "3.3.4"
@ -15708,7 +15715,6 @@
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz",
      "integrity": "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==",
-      "dev": true,
      "requires": {
        "@babel/parser": "^7.20.15",
        "@vue/compiler-core": "3.3.4",
@ -15725,8 +15731,7 @@
        "estree-walker": {
          "version": "2.0.2",
          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-          "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-          "dev": true
+          "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
        }
      }
    },
@ -15734,7 +15739,6 @@
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz",
      "integrity": "sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==",
-      "dev": true,
      "requires": {
        "@vue/compiler-dom": "3.3.4",
        "@vue/shared": "3.3.4"
@ -15743,14 +15747,12 @@
    "@vue/devtools-api": {
      "version": "6.5.0",
      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
-      "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==",
-      "dev": true
+      "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
    },
    "@vue/reactivity": {
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz",
      "integrity": "sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==",
-      "dev": true,
      "requires": {
        "@vue/shared": "3.3.4"
      }
@ -15759,7 +15761,6 @@
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz",
      "integrity": "sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==",
-      "dev": true,
      "requires": {
        "@babel/parser": "^7.20.15",
        "@vue/compiler-core": "3.3.4",
@ -15771,8 +15772,7 @@
        "estree-walker": {
          "version": "2.0.2",
          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-          "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-          "dev": true
+          "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
        }
      }
    },
@ -15780,7 +15780,6 @@
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.4.tgz",
      "integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==",
-      "dev": true,
      "requires": {
        "@vue/reactivity": "3.3.4",
        "@vue/shared": "3.3.4"
@ -15790,7 +15789,6 @@
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz",
      "integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==",
-      "dev": true,
      "requires": {
        "@vue/runtime-core": "3.3.4",
        "@vue/shared": "3.3.4",
@ -15801,7 +15799,6 @@
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.4.tgz",
      "integrity": "sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==",
-      "dev": true,
      "requires": {
        "@vue/compiler-ssr": "3.3.4",
        "@vue/shared": "3.3.4"
@ -15810,8 +15807,7 @@
    "@vue/shared": {
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz",
-      "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==",
-      "dev": true
+      "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
    },
    "abbrev": {
      "version": "1.1.1",
@ -17012,8 +17008,7 @@
    "csstype": {
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
-      "dev": true
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
    },
    "cuint": {
      "version": "0.2.2",
@ -18960,7 +18955,6 @@
      "version": "0.30.1",
      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.1.tgz",
      "integrity": "sha512-mbVKXPmS0z0G4XqFDCTllmDQ6coZzn94aMlb0o/A4HEHJCKcanlDZwYJgwnkmgD3jyWhUgj9VsPrfd972yPffA==",
-      "dev": true,
      "requires": {
        "@jridgewell/sourcemap-codec": "^1.4.15"
      }
@ -20359,6 +20353,15 @@
        "vue-router": "^4.2.3"
      }
    },
+    "nuxt-directus": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/nuxt-directus/-/nuxt-directus-5.5.0.tgz",
+      "integrity": "sha512-OsKuWsf6t+8i4YCWTI2Nh0ssoZbC606s43Zt1v6iUwdlxp3LnS4+EU9E72rssGZ7boVfQ1v5crponZAqZ26zLQ==",
+      "dev": true,
+      "requires": {
+        "@nuxt/kit": "^3.0.0"
+      }
+    },
    "nuxt-time": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/nuxt-time/-/nuxt-time-0.1.0.tgz",
@ -20640,8 +20643,7 @@
    "picocolors": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
    },
    "picomatch": {
      "version": "2.3.1",
@ -20684,7 +20686,6 @@
      "version": "8.4.25",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.25.tgz",
      "integrity": "sha512-7taJ/8t2av0Z+sQEvNzCkpDynl0tX3uJMCODi6nT3PfASC7dYCWV9aQ+uiCf+KBD4SEFcu+GvJdGdwzQ6OSjCw==",
-      "dev": true,
      "requires": {
        "nanoid": "^3.3.6",
        "picocolors": "^1.0.0",
@ -20694,8 +20695,7 @@
        "nanoid": {
          "version": "3.3.6",
          "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-          "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
-          "dev": true
+          "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA=="
        }
      }
    },
@ -22735,6 +22735,22 @@
        "builtins": "^5.0.0"
      }
    },
+    "vee-validate": {
+      "version": "4.10.8",
+      "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-4.10.8.tgz",
+      "integrity": "sha512-4VWziid3tdlIMGWr0D24YG/e+Q+M6TMK2DQg8dMvufgNyHFIpKxkMKwWoSMuQS0Pi0wKJEo5F5Kok8pXlei4vA==",
+      "requires": {
+        "@vue/devtools-api": "^6.5.0",
+        "type-fest": "^4.0.0"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.0.0.tgz",
+          "integrity": "sha512-d/oYtUnPM9zar2fqqGLYPzgcY0qUlYK0evgNVti93xpzfjGkMgZHu9Lvgrkn0rqGXTgsFRxFamzjGoD9Uo+dgw=="
+        }
+      }
+    },
    "vfile": {
      "version": "5.3.7",
      "resolved": "https://registry.npmjs.org/vfile/-/vfile-5.3.7.tgz",
@ -23015,7 +23031,6 @@
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz",
      "integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==",
-      "dev": true,
      "requires": {
        "@vue/compiler-dom": "3.3.4",
        "@vue/compiler-sfc": "3.3.4",
--- a/package.json
+++ b/package.json
@ -14,10 +14,12 @@
    "@nuxtjs/device": "^3.1.0",
    "@types/node": "^18.16.19",
    "nuxt": "^3.6.2",
+    "nuxt-directus": "^5.5.0",
    "nuxt-time": "^0.1.0"
  },
  "dependencies": {
    "date-fns": "^2.30.0",
-    "sass": "^1.63.6"
+    "sass": "^1.63.6",
+    "vee-validate": "^4.10.8"
  }
 }
--- a/pages/login.vue
+++ b/pages/login.vue
@ -8,6 +8,28 @@
      },      
    ],
  })
+
+  import { Field, Form } from 'vee-validate';
+
+  function required(value) {
+    return value ? true : 'This field is required';
+  }
+
+
+  const { login } = useDirectusAuth();
+  const router = useRouter();
+
+  const onSubmit = async (values) => {
+
+    console.log(values.email);
+    try {
+      await login({ 
+        email: values.email,
+        password: values.password
+      });
+    } catch (e) {}
+  };
+
 </script>

 <template>
@ -16,19 +38,22 @@
    <h4 class="policy">By continuing, you agree to our <NuxtLink href="terms">Terms of 
      use</NuxtLink> and <NuxtLink href="privacy">Privacy policy</NuxtLink>.</h4>

-    <form>
+    <Form v-slot="{ errors }" @submit="onSubmit" >
      <div class="input">
        <label>Email</label>
-        <input placeholder="Enter your email" />
+        <Field name="email" :rules="required" placeholder="Enter your email" />
+
+        <span>{{ errors.field }}</span>
+
      </div>

      <div class="input">
        <label>Password</label>
-        <input placeholder="********" type="password" />
+        <Field name="password" :rules="required" placeholder="********" type="password" />
      </div>

      <button>Sign in</button>
-    </form>
+    </Form>

    <p class="newbie">Don't have an account? <NuxtLink href="/register">Create account</NuxtLink></p>
    <p class="reset">Forgot password? <NuxtLink href="/reset">Reset password</NuxtLink></p>
--- a/pages/register.vue
+++ b/pages/register.vue
@ -8,6 +8,24 @@
      },      
    ],
  })
+
+  import { Field, Form } from 'vee-validate';
+
+  function required(value) {
+    return value ? true : 'This field is required';
+  }
+
+  const { createUser } = useDirectusAuth();
+
+  const onSubmit = async (values) => {
+    try {
+      const newUser = await createUser({
+        email: values.email,
+        password: values.password
+      });
+    } catch (e) {}
+  };
+
 </script>

 <template>
@ -16,20 +34,20 @@
    <h4 class="policy">By continuing, you agree to our <NuxtLink href="terms">Terms of 
      use</NuxtLink> and <NuxtLink href="privacy">Privacy policy</NuxtLink>.</h4>

-    <form>
+    <Form v-slot="{ errors }" @submit="onSubmit" >
      <div class="input">
        <label>Username</label>
-        <input placeholder="Choose a username" />
+        <Field name="username" placeholder="Choose a username" />
      </div>

      <div class="input">
        <label>Email</label>
-        <input placeholder="Enter your email" />
+        <Field name="email" placeholder="Enter your email" />
      </div>

      <div class="input">
        <label>Password</label>
-        <input placeholder="********" type="password" />
+        <Field name="password" placeholder="********" type="password" />
      </div>

      <button>Create account</button>