feat: add files

pages/dashboard.vue

@@ -0,0 +1,77 @@
+<template>
+  <v-app full-height>
+    <v-navigation-drawer>
+      <v-img src="/logo.jpg" height="75" class="my-6" />
+
+      <v-list color="primary" lines="two">
+        <v-list-item
+          to="/dashboard/site"
+          title="Site Analytics"
+          prepend-icon="mdi-view-dashboard"
+        />
+        <v-list-item
+          to="/dashboard/data"
+          title="Data Analytics"
+          prepend-icon="mdi-finance"
+        />
+      </v-list>
+
+      <template #append>
+        <v-list lines="two">
+          <v-list-item
+            @click="logOut"
+            title="Log out"
+            prepend-icon="mdi-logout"
+            base-color="error"
+          />
+        </v-list>
+      </template>
+    </v-navigation-drawer>
+
+    <v-app-bar v-if="mdAndDown" elevation="2">
+      <template #prepend>
+        <v-img src="/logo.jpg" width="75" class="ml-3" />
+      </template>
+
+      <template #append>
+        <v-btn
+          @click="logOut"
+          class="mr-3"
+          variant="tonal"
+          color="error"
+          icon="mdi-logout"
+        />
+      </template>
+    </v-app-bar>
+
+    <v-main>
+      <router-view />
+
+      <v-bottom-navigation :active="mdAndDown" color="primary" elevation="2">
+        <v-btn to="/dashboard/site">
+          <v-icon icon="mdi-view-dashboard" />
+          <span>Site Analytics</span>
+        </v-btn>
+        <v-btn to="/dashboard/data">
+          <v-icon icon="mdi-finance" />
+          <span>Data Analytics</span>
+        </v-btn>
+      </v-bottom-navigation>
+    </v-main>
+  </v-app>
+</template>
+
+<script setup>
+definePageMeta({
+  middleware: ["authentication"],
+  layout: false,
+});
+
+const { mdAndDown } = useDisplay();
+const { logout } = useDirectusAuth();
+
+const logOut = async () => {
+  await logout();
+  return navigateTo("/login");
+};
+</script>

pages/dashboard/data.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="embed">
+    <iframe
+      src="https://flows.portnimara.com/public/dashboards/ugQabIMShSld7pXWYLwpsV1kpbSILPiui5eIOfhd?org_slug=default"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+useHead({
+  title: "Data Analytics",
+});
+</script>
+
+<style scoped>
+.embed {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100vh;
+}
+
+.embed iframe {
+  position: absolute;
+  width: 100%;
+  height: calc(100% + 180px);
+  border: 0;
+  top: 0;
+  left: 0;
+}
+</style>

pages/dashboard/index.vue

@@ -0,0 +1,5 @@
+<script lang="ts" setup>
+definePageMeta({
+  redirect: "/dashboard/site",
+});
+</script>

pages/dashboard/site.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="embed">
+    <iframe
+      src="https://analytics.portnimara.com/share/56Dc1w6yYGAOjyoj/portnimara.com"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+useHead({
+  title: "Site Analytics",
+});
+</script>
+
+<style scoped>
+.embed {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100vh;
+}
+
+.embed iframe {
+  width: 100%;
+  height: calc(100% + 120px);
+  border: 0;
+  position: absolute;
+  top: -120px;
+}
+</style>

pages/index.vue

@@ -0,0 +1,5 @@
+<script setup>
+definePageMeta({
+  redirect: "/dashboard",
+});
+</script>

pages/login.vue

@@ -0,0 +1,113 @@
+<template>
+  <v-app full-height>
+    <v-main class="container">
+      <v-container class="fill-height" fluid>
+        <v-row align="center" justify="center" class="fill-height">
+          <v-card class="pa-6" rounded="xl" max-width="350" elevation="2">
+            <v-form @submit.prevent="submit" v-model="valid">
+              <v-row no-gutters>
+                <v-col cols="12">
+                  <v-img src="/logo.jpg" width="200" class="mb-3 mx-auto" />
+                </v-col>
+                <v-scroll-y-transition>
+                  <v-col v-if="errorThrown" cols="12" class="my-3">
+                    <v-alert
+                      text="Invalid email address or password"
+                      color="error"
+                      variant="tonal"
+                    />
+                  </v-col>
+                </v-scroll-y-transition>
+                <v-col cols="12">
+                  <v-row dense>
+                    <v-col cols="12" class="mt-4">
+                      <v-text-field
+                        v-model="emailAddress"
+                        placeholder="Email address"
+                        :disabled="loading"
+                        :rules="[
+                          (value) => !!value || 'Must not be empty',
+                          (value) =>
+                            /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) ||
+                            'Invalid email address',
+                        ]"
+                        variant="outlined"
+                        type="email"
+                        autofocus
+                      />
+                    </v-col>
+                    <v-col cols="12">
+                      <v-text-field
+                        @click:append-inner="passwordVisible = !passwordVisible"
+                        v-model="password"
+                        placeholder="Password"
+                        :disabled="loading"
+                        :type="passwordVisible ? 'text' : 'password'"
+                        :append-inner-icon="
+                          passwordVisible ? 'mdi-eye' : 'mdi-eye-off'
+                        "
+                        :rules="[(value) => !!value || 'Must not be empty']"
+                        autocomplete="current-password"
+                        variant="outlined"
+                      />
+                    </v-col>
+                    <v-col cols="12">
+                      <v-btn
+                        text="Log in"
+                        :disabled="!valid"
+                        :loading="loading"
+                        type="submit"
+                        variant="tonal"
+                        color="primary"
+                        size="large"
+                        block
+                      />
+                    </v-col>
+                  </v-row>
+                </v-col>
+              </v-row>
+            </v-form>
+          </v-card>
+        </v-row>
+      </v-container>
+    </v-main>
+  </v-app>
+</template>
+
+<script lang="ts" setup>
+const { login } = useDirectusAuth();
+
+const loading = ref(false);
+const errorThrown = ref(false);
+
+const emailAddress = ref();
+
+const password = ref();
+const passwordVisible = ref(false);
+
+const valid = ref(false);
+
+const submit = async () => {
+  try {
+    loading.value = true;
+    await login({ email: emailAddress.value, password: password.value });
+    return navigateTo("/dashboard");
+  } catch (error) {
+    errorThrown.value = true;
+  } finally {
+    loading.value = false;
+  }
+};
+
+useHead({
+  title: "Login",
+});
+</script>
+
+<style>
+.container {
+  background: url(/background.jpg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+</style>