From fc3a107788423bc2ecc017e3c96a3266d1ef2396 Mon Sep 17 00:00:00 2001
From: Xeovalyte <gitea@xeovalyte.com>
Date: Mon, 19 Sep 2022 17:10:22 +0200
Subject: [PATCH] added login page layout

---
 frontend/assets/css/tailwind.css      |   8 +
 frontend/components/layout/Navbar.vue |   2 +-
 frontend/components/layout/Topbar.vue |   2 +-
 frontend/package-lock.json            | 448 +++++++++++++++++++-------
 frontend/package.json                 |   3 +
 frontend/pages/login.vue              |  45 +++
 frontend/tailwind.config.js           |   4 +-
 7 files changed, 398 insertions(+), 114 deletions(-)
 create mode 100644 frontend/pages/login.vue

diff --git a/frontend/assets/css/tailwind.css b/frontend/assets/css/tailwind.css
index eae4050..72bd553 100644
--- a/frontend/assets/css/tailwind.css
+++ b/frontend/assets/css/tailwind.css
@@ -26,4 +26,12 @@
     .divider {
         @apply w-full h-1 bg-neutral-250 dark:bg-neutral-850;
     }
+
+    .checkbox {
+        @apply h-4 w-4 text-primary rounded dark:bg-neutral-700 bg-neutral-300 hover:cursor-pointer focus:ring-transparent focus:ring-offset-0 border-none
+    }
+
+    .input {
+        @apply bg-neutral-200 dark:bg-neutral-800 dark:text-gray-300 text-gray-900 shadow rounded border-none focus:ring-primary
+    }
   }
\ No newline at end of file
diff --git a/frontend/components/layout/Navbar.vue b/frontend/components/layout/Navbar.vue
index c543a77..2d50c64 100644
--- a/frontend/components/layout/Navbar.vue
+++ b/frontend/components/layout/Navbar.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="w-full h-16 py-3 bg-neutral-200 dark:bg-neutral-800 flex justify-center items-center shadow">
+    <div v-if="route.meta.key !== 'disable'" class="w-full h-16 py-3 bg-neutral-200 dark:bg-neutral-800 flex justify-center items-center shadow">
         <div class="flex justify-evenly items-center gap-1 w-full max-w-lg dark:text-gray-300 text-gray-900">
             <NuxtLink to="/" class="flex flex-col items-center hover:cursor-pointer drop-shadow" :class="route.path === '/' ? 'text-primary' : ''">
                 <Icon size="1.5em" name="ion:home-outline" />
diff --git a/frontend/components/layout/Topbar.vue b/frontend/components/layout/Topbar.vue
index ac17491..b9230fe 100644
--- a/frontend/components/layout/Topbar.vue
+++ b/frontend/components/layout/Topbar.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="w-full py-3 h-10 bg-neutral-200 dark:bg-neutral-800 flex justify-center items-center shadow px-5 gap-2">
+    <div v-if="route.meta.key !== 'disable'" class="w-full py-3 h-10 bg-neutral-200 dark:bg-neutral-800 flex justify-center items-center shadow px-5 gap-2">
         <div class="flex justify-evenly items-center gap-3 w-full max-w-xl dark:text-gray-300 text-gray-900">
             <Icon v-if="route.meta.key === 'back'" size="1.75em" @click="router.back()" class="hover:cursor-pointer" name="ion:arrow-back"/>
             <h1 class="capitalize font-bold text-xl mr-auto">{{ route.meta.title }}</h1>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 543454e..ab135e1 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -6,12 +6,14 @@
     "": {
       "hasInstallScript": true,
       "dependencies": {
-        "@pinia/nuxt": "^0.4.2",
+        "@formkit/nuxt": "^1.0.0-beta.11-c95e605",
+        "@vueuse/firebase": "^9.2.0",
         "firebase": "^9.10.0",
         "vue-toastification": "^2.0.0-rc.5"
       },
       "devDependencies": {
         "@nuxtjs/tailwindcss": "^5.3.3",
+        "@tailwindcss/forms": "^0.5.3",
         "@vueuse/core": "^9.2.0",
         "@vueuse/nuxt": "^9.2.0",
         "nuxt": "3.0.0-rc.10",
@@ -1135,6 +1137,126 @@
       "integrity": "sha512-4ACd/c6ushrLuhn0+yjB9hznhnsc2IML6pf0Ulb1Q7w8SvR1jNGPu/Y7i4kvOm6R+WJkMHwyy5z3i3gN+Tawug==",
       "license": "Apache-2.0"
     },
+    "node_modules/@formkit/core": {
+      "version": "1.0.0-beta.11-c95e605",
+      "resolved": "https://registry.npmjs.org/@formkit/core/-/core-1.0.0-beta.11-c95e605.tgz",
+      "integrity": "sha512-JUm+cObk8Uiu3x7RiaAjgkwaIMCUjipKxHU1ph4uM5rxFcEuF4LduUrFoww15LU15qjaxxyUWrJ5kSz16EnCrQ==",
+      "dependencies": {
+        "@formkit/utils": "1.0.0-beta.11-c95e605"
+      }
+    },
+    "node_modules/@formkit/dev": {
+      "version": "1.0.0-beta.11-c95e605",
+      "resolved": "https://registry.npmjs.org/@formkit/dev/-/dev-1.0.0-beta.11-c95e605.tgz",
+      "integrity": "sha512-MvMZE6N05cAetcdO5EQi+qoqG+lTxnjY19PzwFtN+H5Lly2qSQozECA+wjsPPjJ0dC8zoPn4Vyxr6r7G4TWFNQ==",
+      "dependencies": {
+        "@formkit/core": "1.0.0-beta.11-c95e605",
+        "@formkit/utils": "1.0.0-beta.11-c95e605"
+      }
+    },
+    "node_modules/@formkit/i18n": {
+      "version": "1.0.0-beta.11-c95e605",
+      "resolved": "https://registry.npmjs.org/@formkit/i18n/-/i18n-1.0.0-beta.11-c95e605.tgz",
+      "integrity": "sha512-oDNgwpZmbCcNAmnt47O1Nj+6ErJeDTdKYQE26PSRJqt0KR3jlVX9Xw36meuSf1AIP1QAXEipW7gru55MPJ4Ijw==",
+      "dependencies": {
+        "@formkit/core": "1.0.0-beta.11-c95e605",
+        "@formkit/utils": "1.0.0-beta.11-c95e605",
+        "@formkit/validation": "1.0.0-beta.11-c95e605"
+      }
+    },
+    "node_modules/@formkit/inputs": {
+      "version": "1.0.0-beta.11-c95e605",
+      "resolved": "https://registry.npmjs.org/@formkit/inputs/-/inputs-1.0.0-beta.11-c95e605.tgz",
+      "integrity": "sha512-y9m/iY+aZYY8/YmQPzk8IpnDxa91VnX9UO2jkz5DhcGZSgQU/hilomkAfGvguHEc+GJjEAilGOJZ1sLl6H7bmQ==",
+      "dependencies": {
+        "@formkit/core": "1.0.0-beta.11-c95e605"
+      }
+    },
+    "node_modules/@formkit/nuxt": {
+      "version": "1.0.0-beta.11-c95e605",
+      "resolved": "https://registry.npmjs.org/@formkit/nuxt/-/nuxt-1.0.0-beta.11-c95e605.tgz",
+      "integrity": "sha512-09XWddWAan8EJnA2AGtnN2Oy600zwV9MLrKPrBW3T0FdTiT3wOOenk6C3Q7yjO3zFGMiYD4YGjyjBhJk8AmDZg==",
+      "dependencies": {
+        "@formkit/vue": "1.0.0-beta.11-c95e605",
+        "@nuxt/kit": "npm:@nuxt/kit-edge@latest"
+      }
+    },
+    "node_modules/@formkit/observer": {
+      "version": "1.0.0-beta.11-c95e605",
+      "resolved": "https://registry.npmjs.org/@formkit/observer/-/observer-1.0.0-beta.11-c95e605.tgz",
+      "integrity": "sha512-jxJVs8LCm3eOt1BYgfdBa9l+Hh1/Vj4xU0vDdsF/tMMdMHD3ML4O1e9ug7AK7F7i7el6nkUMWmSVg3upx7zoGA==",
+      "dependencies": {
+        "@formkit/core": "1.0.0-beta.11-c95e605",
+        "@formkit/utils": "1.0.0-beta.11-c95e605"
+      }
+    },
+    "node_modules/@formkit/rules": {
+      "version": "1.0.0-beta.11-c95e605",
+      "resolved": "https://registry.npmjs.org/@formkit/rules/-/rules-1.0.0-beta.11-c95e605.tgz",
+      "integrity": "sha512-ZYC1LvpCWkYaLLepLJxgHPApVIjMYMvZ3XboKjD4kt/BfUUGGxfbqYFgFoQkhh8QSvaT0Dauh4ZN2AmZJLbsQw==",
+      "dependencies": {
+        "@formkit/core": "1.0.0-beta.11-c95e605",
+        "@formkit/utils": "1.0.0-beta.11-c95e605",
+        "@formkit/validation": "1.0.0-beta.11-c95e605"
+      }
+    },
+    "node_modules/@formkit/themes": {
+      "version": "1.0.0-beta.11-c95e605",
+      "resolved": "https://registry.npmjs.org/@formkit/themes/-/themes-1.0.0-beta.11-c95e605.tgz",
+      "integrity": "sha512-ZewRmg0g7QMevt2oHkOFDoCWlHyIJ3w1XJ6XpohqZD/AZ5YFdIc/48fo8Mgz+AtRBnaUiMjk8RKynFN6x0eVgw==",
+      "dependencies": {
+        "@formkit/core": "1.0.0-beta.11-c95e605"
+      },
+      "peerDependencies": {
+        "tailwindcss": "^3.0.0",
+        "unocss": "^0.31.0",
+        "windicss": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "tailwindcss": {
+          "optional": true
+        },
+        "unocss": {
+          "optional": true
+        },
+        "windicss": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@formkit/utils": {
+      "version": "1.0.0-beta.11-c95e605",
+      "resolved": "https://registry.npmjs.org/@formkit/utils/-/utils-1.0.0-beta.11-c95e605.tgz",
+      "integrity": "sha512-J5PZvRPooauUGcIkkwiN7osWH8Ym8a9cyf9OTOm2i4JDwouFrapu6vaw/gBqmiLILsqVdyOOrKM69hQghbLQRA=="
+    },
+    "node_modules/@formkit/validation": {
+      "version": "1.0.0-beta.11-c95e605",
+      "resolved": "https://registry.npmjs.org/@formkit/validation/-/validation-1.0.0-beta.11-c95e605.tgz",
+      "integrity": "sha512-srtc5ZUzMDe8KN32mGWLp8Zgb2Zldb9afTq3wOqLpmBfodfNtPUQ+m/HmWbCIP2iDGXq+7f1/69/RcEzgXVvDw==",
+      "dependencies": {
+        "@formkit/core": "1.0.0-beta.11-c95e605",
+        "@formkit/observer": "1.0.0-beta.11-c95e605"
+      }
+    },
+    "node_modules/@formkit/vue": {
+      "version": "1.0.0-beta.11-c95e605",
+      "resolved": "https://registry.npmjs.org/@formkit/vue/-/vue-1.0.0-beta.11-c95e605.tgz",
+      "integrity": "sha512-GdZvmLa4xFj3c+FcSLXay9/k4EaA6xkJuCSh2RJIqfEbIAgRMSLobCprQaRaMoOUimSPfT0gjwRSZi0Exud+Tw==",
+      "dependencies": {
+        "@formkit/core": "1.0.0-beta.11-c95e605",
+        "@formkit/dev": "1.0.0-beta.11-c95e605",
+        "@formkit/i18n": "1.0.0-beta.11-c95e605",
+        "@formkit/inputs": "1.0.0-beta.11-c95e605",
+        "@formkit/observer": "1.0.0-beta.11-c95e605",
+        "@formkit/rules": "1.0.0-beta.11-c95e605",
+        "@formkit/themes": "1.0.0-beta.11-c95e605",
+        "@formkit/utils": "1.0.0-beta.11-c95e605",
+        "@formkit/validation": "1.0.0-beta.11-c95e605"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.1"
+      }
+    },
     "node_modules/@grpc/grpc-js": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.7.0.tgz",
@@ -1739,19 +1861,6 @@
         "ufo": "^0.8.5"
       }
     },
-    "node_modules/@pinia/nuxt": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/@pinia/nuxt/-/nuxt-0.4.2.tgz",
-      "integrity": "sha512-yPrJVFOTVDsCcwzVvElLmSFB6IKWo+0WpVmVPCZyj/LD2uNYBK8I3lTPHdZ4q/VS2Sj8LkA7aq6S8PFpwguQ0A==",
-      "license": "MIT",
-      "dependencies": {
-        "@nuxt/kit": "^3.0.0-rc.9",
-        "pinia": ">=2.0.22"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/posva"
-      }
-    },
     "node_modules/@protobufjs/aspromise": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
@@ -1965,6 +2074,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@tailwindcss/forms": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.3.tgz",
+      "integrity": "sha512-y5mb86JUoiUgBjY/o6FJSFZSEttfb3Q5gllE4xoKjAAD+vBrnIhE4dViwUuow3va8mpH4s9jyUbUbrRGoRdc2Q==",
+      "dev": true,
+      "dependencies": {
+        "mini-svg-data-uri": "^1.2.3"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
+      }
+    },
     "node_modules/@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -2183,6 +2304,7 @@
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.2.1.tgz",
       "integrity": "sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@vue/reactivity": {
@@ -2263,6 +2385,21 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/@vueuse/firebase": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/firebase/-/firebase-9.2.0.tgz",
+      "integrity": "sha512-pRVg+WUm8hV4CzkkgRPFnM4MXQQL4qe5tMflJxia1KKGHYlD5FTnqSKT1Q/lj4CtcWouyDr3cuFiqWVY27dwWA==",
+      "dependencies": {
+        "@vueuse/shared": "9.2.0",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "firebase": ">=9.0.0"
+      }
+    },
     "node_modules/@vueuse/head": {
       "version": "0.7.12",
       "resolved": "https://registry.npmjs.org/@vueuse/head/-/head-0.7.12.tgz",
@@ -2310,7 +2447,6 @@
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.2.0.tgz",
       "integrity": "sha512-NnRp/noSWuXW0dKhZK5D0YLrDi0nmZ18UeEgwXQq7Ul5TTP93lcNnKjrHtd68j2xFB/l59yPGFlCryL692bnrA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "vue-demi": "*"
@@ -2568,7 +2704,7 @@
       "version": "1.8.2",
       "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
       "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "dependencies": {
         "acorn": "^7.0.0",
@@ -2580,7 +2716,7 @@
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
       "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -2593,7 +2729,7 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
       "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.4.0"
@@ -2832,7 +2968,7 @@
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
       "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/async": {
@@ -3133,7 +3269,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -3668,7 +3804,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "bin": {
         "cssesc": "bin/cssesc"
@@ -3856,7 +3992,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
       "integrity": "sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/defu": {
@@ -3923,7 +4059,7 @@
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
       "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "acorn-node": "^1.8.2",
@@ -3941,7 +4077,7 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0"
     },
     "node_modules/dir-glob": {
@@ -3960,7 +4096,7 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/dom-serializer": {
@@ -5910,7 +6046,7 @@
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz",
       "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -6299,6 +6435,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+      "dev": true,
+      "bin": {
+        "mini-svg-data-uri": "cli.js"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -6779,7 +6924,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -7125,38 +7270,12 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/pinia": {
-      "version": "2.0.22",
-      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.22.tgz",
-      "integrity": "sha512-u+b8/BC+tmvo3ACbYO2w5NfxHWFOjvvw9DQnyT0dW8aUMCPRQT5QnfZ5R5W2MzZBMTeZRMQI7V/QFbafmM9QHw==",
-      "license": "MIT",
-      "dependencies": {
-        "@vue/devtools-api": "^6.2.1",
-        "vue-demi": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/posva"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.4.0",
-        "typescript": ">=4.4.4",
-        "vue": "^2.6.14 || ^3.2.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        },
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/pkg-types": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-0.3.5.tgz",
@@ -7370,7 +7489,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
       "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "camelcase-css": "^2.0.1"
@@ -7390,7 +7509,7 @@
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
       "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "lilconfig": "^2.0.5",
@@ -7612,7 +7731,7 @@
       "version": "5.0.6",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
       "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "postcss-selector-parser": "^6.0.6"
@@ -7846,7 +7965,7 @@
       "version": "6.0.10",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
       "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "cssesc": "^3.0.0",
@@ -7938,7 +8057,7 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/pretty-bytes": {
@@ -8033,7 +8152,7 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
       "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -8084,7 +8203,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "pify": "^2.3.0"
@@ -9078,7 +9197,7 @@
       "version": "3.1.8",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.8.tgz",
       "integrity": "sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "arg": "^5.0.2",
@@ -9119,7 +9238,7 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
+      "devOptional": true,
       "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.3"
@@ -9132,7 +9251,7 @@
       "version": "14.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
       "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
@@ -10185,7 +10304,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
       "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.4"
@@ -10220,7 +10339,7 @@
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
       "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-      "dev": true,
+      "devOptional": true,
       "license": "ISC",
       "engines": {
         "node": ">= 6"
@@ -11086,6 +11205,107 @@
       "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.7.0.tgz",
       "integrity": "sha512-4ACd/c6ushrLuhn0+yjB9hznhnsc2IML6pf0Ulb1Q7w8SvR1jNGPu/Y7i4kvOm6R+WJkMHwyy5z3i3gN+Tawug=="
     },
+    "@formkit/core": {
+      "version": "1.0.0-beta.11-c95e605",
+      "resolved": "https://registry.npmjs.org/@formkit/core/-/core-1.0.0-beta.11-c95e605.tgz",
+      "integrity": "sha512-JUm+cObk8Uiu3x7RiaAjgkwaIMCUjipKxHU1ph4uM5rxFcEuF4LduUrFoww15LU15qjaxxyUWrJ5kSz16EnCrQ==",
+      "requires": {
+        "@formkit/utils": "1.0.0-beta.11-c95e605"
+      }
+    },
+    "@formkit/dev": {
+      "version": "1.0.0-beta.11-c95e605",
+      "resolved": "https://registry.npmjs.org/@formkit/dev/-/dev-1.0.0-beta.11-c95e605.tgz",
+      "integrity": "sha512-MvMZE6N05cAetcdO5EQi+qoqG+lTxnjY19PzwFtN+H5Lly2qSQozECA+wjsPPjJ0dC8zoPn4Vyxr6r7G4TWFNQ==",
+      "requires": {
+        "@formkit/core": "1.0.0-beta.11-c95e605",
+        "@formkit/utils": "1.0.0-beta.11-c95e605"
+      }
+    },
+    "@formkit/i18n": {
+      "version": "1.0.0-beta.11-c95e605",
+      "resolved": "https://registry.npmjs.org/@formkit/i18n/-/i18n-1.0.0-beta.11-c95e605.tgz",
+      "integrity": "sha512-oDNgwpZmbCcNAmnt47O1Nj+6ErJeDTdKYQE26PSRJqt0KR3jlVX9Xw36meuSf1AIP1QAXEipW7gru55MPJ4Ijw==",
+      "requires": {
+        "@formkit/core": "1.0.0-beta.11-c95e605",
+        "@formkit/utils": "1.0.0-beta.11-c95e605",
+        "@formkit/validation": "1.0.0-beta.11-c95e605"
+      }
+    },
+    "@formkit/inputs": {
+      "version": "1.0.0-beta.11-c95e605",
+      "resolved": "https://registry.npmjs.org/@formkit/inputs/-/inputs-1.0.0-beta.11-c95e605.tgz",
+      "integrity": "sha512-y9m/iY+aZYY8/YmQPzk8IpnDxa91VnX9UO2jkz5DhcGZSgQU/hilomkAfGvguHEc+GJjEAilGOJZ1sLl6H7bmQ==",
+      "requires": {
+        "@formkit/core": "1.0.0-beta.11-c95e605"
+      }
+    },
+    "@formkit/nuxt": {
+      "version": "1.0.0-beta.11-c95e605",
+      "resolved": "https://registry.npmjs.org/@formkit/nuxt/-/nuxt-1.0.0-beta.11-c95e605.tgz",
+      "integrity": "sha512-09XWddWAan8EJnA2AGtnN2Oy600zwV9MLrKPrBW3T0FdTiT3wOOenk6C3Q7yjO3zFGMiYD4YGjyjBhJk8AmDZg==",
+      "requires": {
+        "@formkit/vue": "1.0.0-beta.11-c95e605",
+        "@nuxt/kit": "npm:@nuxt/kit-edge@latest"
+      }
+    },
+    "@formkit/observer": {
+      "version": "1.0.0-beta.11-c95e605",
+      "resolved": "https://registry.npmjs.org/@formkit/observer/-/observer-1.0.0-beta.11-c95e605.tgz",
+      "integrity": "sha512-jxJVs8LCm3eOt1BYgfdBa9l+Hh1/Vj4xU0vDdsF/tMMdMHD3ML4O1e9ug7AK7F7i7el6nkUMWmSVg3upx7zoGA==",
+      "requires": {
+        "@formkit/core": "1.0.0-beta.11-c95e605",
+        "@formkit/utils": "1.0.0-beta.11-c95e605"
+      }
+    },
+    "@formkit/rules": {
+      "version": "1.0.0-beta.11-c95e605",
+      "resolved": "https://registry.npmjs.org/@formkit/rules/-/rules-1.0.0-beta.11-c95e605.tgz",
+      "integrity": "sha512-ZYC1LvpCWkYaLLepLJxgHPApVIjMYMvZ3XboKjD4kt/BfUUGGxfbqYFgFoQkhh8QSvaT0Dauh4ZN2AmZJLbsQw==",
+      "requires": {
+        "@formkit/core": "1.0.0-beta.11-c95e605",
+        "@formkit/utils": "1.0.0-beta.11-c95e605",
+        "@formkit/validation": "1.0.0-beta.11-c95e605"
+      }
+    },
+    "@formkit/themes": {
+      "version": "1.0.0-beta.11-c95e605",
+      "resolved": "https://registry.npmjs.org/@formkit/themes/-/themes-1.0.0-beta.11-c95e605.tgz",
+      "integrity": "sha512-ZewRmg0g7QMevt2oHkOFDoCWlHyIJ3w1XJ6XpohqZD/AZ5YFdIc/48fo8Mgz+AtRBnaUiMjk8RKynFN6x0eVgw==",
+      "requires": {
+        "@formkit/core": "1.0.0-beta.11-c95e605"
+      }
+    },
+    "@formkit/utils": {
+      "version": "1.0.0-beta.11-c95e605",
+      "resolved": "https://registry.npmjs.org/@formkit/utils/-/utils-1.0.0-beta.11-c95e605.tgz",
+      "integrity": "sha512-J5PZvRPooauUGcIkkwiN7osWH8Ym8a9cyf9OTOm2i4JDwouFrapu6vaw/gBqmiLILsqVdyOOrKM69hQghbLQRA=="
+    },
+    "@formkit/validation": {
+      "version": "1.0.0-beta.11-c95e605",
+      "resolved": "https://registry.npmjs.org/@formkit/validation/-/validation-1.0.0-beta.11-c95e605.tgz",
+      "integrity": "sha512-srtc5ZUzMDe8KN32mGWLp8Zgb2Zldb9afTq3wOqLpmBfodfNtPUQ+m/HmWbCIP2iDGXq+7f1/69/RcEzgXVvDw==",
+      "requires": {
+        "@formkit/core": "1.0.0-beta.11-c95e605",
+        "@formkit/observer": "1.0.0-beta.11-c95e605"
+      }
+    },
+    "@formkit/vue": {
+      "version": "1.0.0-beta.11-c95e605",
+      "resolved": "https://registry.npmjs.org/@formkit/vue/-/vue-1.0.0-beta.11-c95e605.tgz",
+      "integrity": "sha512-GdZvmLa4xFj3c+FcSLXay9/k4EaA6xkJuCSh2RJIqfEbIAgRMSLobCprQaRaMoOUimSPfT0gjwRSZi0Exud+Tw==",
+      "requires": {
+        "@formkit/core": "1.0.0-beta.11-c95e605",
+        "@formkit/dev": "1.0.0-beta.11-c95e605",
+        "@formkit/i18n": "1.0.0-beta.11-c95e605",
+        "@formkit/inputs": "1.0.0-beta.11-c95e605",
+        "@formkit/observer": "1.0.0-beta.11-c95e605",
+        "@formkit/rules": "1.0.0-beta.11-c95e605",
+        "@formkit/themes": "1.0.0-beta.11-c95e605",
+        "@formkit/utils": "1.0.0-beta.11-c95e605",
+        "@formkit/validation": "1.0.0-beta.11-c95e605"
+      }
+    },
     "@grpc/grpc-js": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.7.0.tgz",
@@ -11544,15 +11764,6 @@
         "ufo": "^0.8.5"
       }
     },
-    "@pinia/nuxt": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/@pinia/nuxt/-/nuxt-0.4.2.tgz",
-      "integrity": "sha512-yPrJVFOTVDsCcwzVvElLmSFB6IKWo+0WpVmVPCZyj/LD2uNYBK8I3lTPHdZ4q/VS2Sj8LkA7aq6S8PFpwguQ0A==",
-      "requires": {
-        "@nuxt/kit": "^3.0.0-rc.9",
-        "pinia": ">=2.0.22"
-      }
-    },
     "@protobufjs/aspromise": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
@@ -11709,6 +11920,15 @@
         }
       }
     },
+    "@tailwindcss/forms": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.3.tgz",
+      "integrity": "sha512-y5mb86JUoiUgBjY/o6FJSFZSEttfb3Q5gllE4xoKjAAD+vBrnIhE4dViwUuow3va8mpH4s9jyUbUbrRGoRdc2Q==",
+      "dev": true,
+      "requires": {
+        "mini-svg-data-uri": "^1.2.3"
+      }
+    },
     "@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -11890,7 +12110,8 @@
     "@vue/devtools-api": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.2.1.tgz",
-      "integrity": "sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ=="
+      "integrity": "sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ==",
+      "dev": true
     },
     "@vue/reactivity": {
       "version": "3.2.39",
@@ -11957,6 +12178,15 @@
         "vue-demi": "*"
       }
     },
+    "@vueuse/firebase": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/firebase/-/firebase-9.2.0.tgz",
+      "integrity": "sha512-pRVg+WUm8hV4CzkkgRPFnM4MXQQL4qe5tMflJxia1KKGHYlD5FTnqSKT1Q/lj4CtcWouyDr3cuFiqWVY27dwWA==",
+      "requires": {
+        "@vueuse/shared": "9.2.0",
+        "vue-demi": "*"
+      }
+    },
     "@vueuse/head": {
       "version": "0.7.12",
       "resolved": "https://registry.npmjs.org/@vueuse/head/-/head-0.7.12.tgz",
@@ -11989,7 +12219,6 @@
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.2.0.tgz",
       "integrity": "sha512-NnRp/noSWuXW0dKhZK5D0YLrDi0nmZ18UeEgwXQq7Ul5TTP93lcNnKjrHtd68j2xFB/l59yPGFlCryL692bnrA==",
-      "dev": true,
       "requires": {
         "vue-demi": "*"
       }
@@ -12218,7 +12447,7 @@
       "version": "1.8.2",
       "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
       "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "acorn": "^7.0.0",
         "acorn-walk": "^7.0.0",
@@ -12229,7 +12458,7 @@
           "version": "7.4.1",
           "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
           "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-          "dev": true
+          "devOptional": true
         }
       }
     },
@@ -12237,7 +12466,7 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
       "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
-      "dev": true
+      "devOptional": true
     },
     "agent-base": {
       "version": "6.0.2",
@@ -12405,7 +12634,7 @@
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
       "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true
+      "devOptional": true
     },
     "async": {
       "version": "2.6.4",
@@ -12587,7 +12816,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true
+      "devOptional": true
     },
     "caniuse-api": {
       "version": "3.0.0",
@@ -12946,7 +13175,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true
+      "devOptional": true
     },
     "cssnano": {
       "version": "5.1.13",
@@ -13075,7 +13304,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
       "integrity": "sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==",
-      "dev": true
+      "devOptional": true
     },
     "defu": {
       "version": "6.1.0",
@@ -13121,7 +13350,7 @@
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
       "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "acorn-node": "^1.8.2",
         "defined": "^1.0.0",
@@ -13132,7 +13361,7 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true
+      "devOptional": true
     },
     "dir-glob": {
       "version": "3.0.1",
@@ -13146,7 +13375,7 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
+      "devOptional": true
     },
     "dom-serializer": {
       "version": "1.4.1",
@@ -14512,7 +14741,7 @@
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz",
       "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==",
-      "dev": true
+      "devOptional": true
     },
     "lines-and-columns": {
       "version": "1.2.4",
@@ -14802,6 +15031,12 @@
       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
       "dev": true
     },
+    "mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+      "dev": true
+    },
     "minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -15153,7 +15388,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true
+      "devOptional": true
     },
     "ohash": {
       "version": "0.1.5",
@@ -15389,16 +15624,7 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true
-    },
-    "pinia": {
-      "version": "2.0.22",
-      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.22.tgz",
-      "integrity": "sha512-u+b8/BC+tmvo3ACbYO2w5NfxHWFOjvvw9DQnyT0dW8aUMCPRQT5QnfZ5R5W2MzZBMTeZRMQI7V/QFbafmM9QHw==",
-      "requires": {
-        "@vue/devtools-api": "^6.2.1",
-        "vue-demi": "*"
-      }
+      "devOptional": true
     },
     "pkg-types": {
       "version": "0.3.5",
@@ -15534,7 +15760,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
       "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "camelcase-css": "^2.0.1"
       }
@@ -15543,7 +15769,7 @@
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
       "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "lilconfig": "^2.0.5",
         "yaml": "^1.10.2"
@@ -15664,7 +15890,7 @@
       "version": "5.0.6",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
       "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "postcss-selector-parser": "^6.0.6"
       }
@@ -15793,7 +16019,7 @@
       "version": "6.0.10",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
       "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -15851,7 +16077,7 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
+      "devOptional": true
     },
     "pretty-bytes": {
       "version": "6.0.0",
@@ -15910,7 +16136,7 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
       "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
-      "dev": true
+      "devOptional": true
     },
     "radix3": {
       "version": "0.1.2",
@@ -15947,7 +16173,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "pify": "^2.3.0"
       }
@@ -16634,7 +16860,7 @@
       "version": "3.1.8",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.8.tgz",
       "integrity": "sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "arg": "^5.0.2",
         "chokidar": "^3.5.3",
@@ -16664,7 +16890,7 @@
           "version": "6.0.2",
           "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
           "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-          "dev": true,
+          "devOptional": true,
           "requires": {
             "is-glob": "^4.0.3"
           }
@@ -16673,7 +16899,7 @@
           "version": "14.1.0",
           "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
           "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
-          "dev": true,
+          "devOptional": true,
           "requires": {
             "postcss-value-parser": "^4.0.0",
             "read-cache": "^1.0.0",
@@ -17375,7 +17601,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
       "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "dev": true
+      "devOptional": true
     },
     "xxhashjs": {
       "version": "0.2.2",
@@ -17400,7 +17626,7 @@
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
       "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-      "dev": true
+      "devOptional": true
     },
     "yargs": {
       "version": "16.2.0",
diff --git a/frontend/package.json b/frontend/package.json
index ccf9dc7..ed7db24 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,12 +9,15 @@
   },
   "devDependencies": {
     "@nuxtjs/tailwindcss": "^5.3.3",
+    "@tailwindcss/forms": "^0.5.3",
     "@vueuse/core": "^9.2.0",
     "@vueuse/nuxt": "^9.2.0",
     "nuxt": "3.0.0-rc.10",
     "nuxt-icon": "^0.1.5"
   },
   "dependencies": {
+    "@formkit/nuxt": "^1.0.0-beta.11-c95e605",
+    "@vueuse/firebase": "^9.2.0",
     "firebase": "^9.10.0",
     "vue-toastification": "^2.0.0-rc.5"
   }
diff --git a/frontend/pages/login.vue b/frontend/pages/login.vue
new file mode 100644
index 0000000..18557b3
--- /dev/null
+++ b/frontend/pages/login.vue
@@ -0,0 +1,45 @@
+<template>
+    <div class="flex flex-col justify-center items-center px-2">
+        <h1 class="font-bold text-3xl text-center m-10">Reddingsbrigade Waddinxveen</h1>
+        <div class="max-w-xs w-full">
+            <form @submit.prevent="submitLoginForm" class="flex flex-col">
+                <label class="font-bold">Email</label>
+                <input v-model="form.email" required="true" placeholder="user@example.com" class="input mb-5" type="email">
+
+                <label class="font-bold">Password</label>
+                <input v-model="form.password.password" required="true" class="input" :type="showPassword ? 'text' : 'password'">
+                <div class="mb-5 mt-1 flex items-center">
+                    <input v-model="showPassword" type="checkbox" class="mr-1 checkbox ">
+                    <span>Show Password</span>
+                </div>
+
+                <div class="w-full flex">
+                    <input type="submit" value="Login" class="btn w-24 ">
+                    <button class="ml-auto hover:underline font-bold">Forgot Password?</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script setup>
+definePageMeta({
+    title: 'Login',
+    key: 'disable'
+})
+
+const showPassword = ref(false)
+
+const form = ref({
+    email: '',
+    password: {
+        password: '',
+        confirm: '',
+    }
+})
+
+const submitLoginForm = () => {
+
+}
+
+</script>
\ No newline at end of file
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 07a115b..784cb55 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -12,5 +12,7 @@ module.exports = {
       }
     },
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/forms'),
+  ],
 }