home page content; featured toggled login / profile pages; adjusted s…

…tyles
jameshschuler · May 30, 2023 · e9236cc · e9236cc
1 parent 90eb9de
commit e9236cc
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 32 deletions.
diff --git a/api/index.ts b/api/index.ts
@@ -17,8 +17,7 @@ const store = new CookieStore(Deno.env.get("COOKIE_STORE_SECRET")!);
 app.use(Session.initMiddleware(store, {
   cookieSetOptions: {
     httpOnly: true,
-    sameSite: "none",
-    secure: true,
+    sameSite: "lax",
   },
 }));
 

diff --git a/frontend/index.html b/frontend/index.html
@@ -19,7 +19,7 @@
       rel="stylesheet"
     />
   </head>
-  <body class="bg-gray-200 dark:bg-dark-800 dark:text-gray-100">
+  <body class="bg-red-200 dark:bg-dark-800 dark:text-gray-100">
     <div id="app" class="container mx-auto px-6 relative max-w-screen-xl"></div>
     <script
       src="https://kit.fontawesome.com/e568baa144.js"

diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
@@ -4,12 +4,26 @@
       <div class="flex justify-between items-center mt-4">
         <router-link to="/" class="text-2xl font-medium pb-2">PoGo Trainer Hub</router-link>
         <div>
-          <router-link to="/search" class="text-lg font-semibold mr-5 pb-2">Find Trainers</router-link>
-          <router-link v-if="authStore.isLoggedIn" to="/profile" class="text-lg font-semibold mr-5 pb-2"
+          <router-link to="/search" class="text-lg font-semibold mr-5 pb-2"
+            >Find Trainers</router-link
+          >
+          <router-link
+            v-if="authStore.isLoggedIn && commonStore.featureToggles.accounts"
+            to="/profile"
+            class="text-lg font-semibold mr-5 pb-2"
             >Profile</router-link
           >
-          <router-link v-if="!authStore.isLoggedIn" to="/login" class="text-lg font-semibold pb-2">Log In</router-link>
-          <button v-if="authStore.isLoggedIn" @click="authStore.logout" class="text-lg font-semibold pb-2">
+          <router-link
+            v-if="!authStore.isLoggedIn && commonStore.featureToggles.accounts"
+            to="/login"
+            class="text-lg font-semibold pb-2"
+            >Log In</router-link
+          >
+          <button
+            v-if="authStore.isLoggedIn && commonStore.featureToggles.accounts"
+            @click="authStore.logout"
+            class="text-lg font-semibold pb-2"
+          >
             Log Out
           </button>
         </div>
@@ -19,7 +33,9 @@
 </template>
 <script setup lang="ts">
 import { useAuthStore } from "@/stores/authStore";
+import { useCommonStore } from "@/stores/commonStore";
 const authStore = useAuthStore();
+const commonStore = useCommonStore();
 </script>
 <style lang="scss" scoped>
 .router-link-active {

diff --git a/frontend/src/pages/HomePage.vue b/frontend/src/pages/HomePage.vue
@@ -1,10 +1,16 @@
 <template>
   <div
-    class="card border-2 border-black bg-white p-12 rounded-xl flex flex-col h-sm justify-between max-w-screen-xl <xl:mx-auto"
+    class="card border-2 border-black bg-white p-12 rounded-xl flex flex-col h-sm justify-between max-w-screen-xl <xl:mx-auto dark:bg-dark-200"
   >
     <div>
       <h1 class="font-bold text-4xl mb-4">Welcome to the PoGo Trainer Hub!</h1>
-      <h3 class="text-xl">Blah blah blah something about the app Blah blah blah something about the app</h3>
+      <h3 class="text-xl">The simplest way to search for new friends from your PoGo community!</h3>
+
+      <h2 class="font-semibold text-2xl mb-4 mt-8">Coming Soon!</h2>
+      <ul class="list-circle ml-4 text-lg">
+        <li>Discord Integration</li>
+        <li>Custom profiles including ability to update trainer name and trainer code</li>
+      </ul>
     </div>
     <div class="flex justify-end items-center">
       <router-link

diff --git a/frontend/src/pages/NotFoundPage.vue b/frontend/src/pages/NotFoundPage.vue
@@ -0,0 +1,7 @@
+<template>
+  <div class="bg-white border-2 border-black rounded-xl p-12 dark:bg-dark-200">
+    <h1 class="text-3xl">Not Found!</h1>
+  </div>
+</template>
+<script setup lang="ts"></script>
+<style lang="scss" scoped></style>
diff --git a/frontend/src/router.ts b/frontend/src/router.ts
@@ -1,13 +1,15 @@
 import HomePage from "@/pages/HomePage.vue";
 import LoginPage from "@/pages/LoginPage.vue";
+import NotFoundPage from "@/pages/NotFoundPage.vue";
 import ProfilePage from "@/pages/ProfilePage.vue";
 import SearchTrainersPage from "@/pages/SearchTrainersPage.vue";
 import { useAuthStore } from "@/stores/authStore";
 import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
 
-const routes: Array<RouteRecordRaw> = [
+let routes: Array<RouteRecordRaw> = [
   {
     path: "/",
+    name: "Home",
     component: HomePage,
   },
   {
@@ -16,38 +18,42 @@ const routes: Array<RouteRecordRaw> = [
     component: SearchTrainersPage,
   },
   {
-    path: "/login",
-    name: "Login",
-    component: LoginPage,
+    path: "/:pathMatch(.*)*",
+    name: "NotFound",
+    component: NotFoundPage,
   },
-  {
-    path: "/profile",
-    name: "Profile",
-    component: ProfilePage,
-    meta: {
-      requiresAuth: true,
-    },
-  },
-  // {
-  //     path: '/error',
-  //     name: 'Error',
-  //     component: Error
-  // },
-  // {
-  //     path: '/:pathMatch(.*)*',
-  //     name: 'NotFound',
-  //     component: NotFound
-  // },
 ];
 
+if (import.meta.env.VITE_APP_ACCOUNTS_FEATURE_TOGGLE === "true") {
+  routes = [
+    ...routes,
+    {
+      path: "/login",
+      name: "Login",
+      component: LoginPage,
+      meta: {
+        featureToggle: "accounts",
+      },
+    },
+    {
+      path: "/profile",
+      name: "Profile",
+      component: ProfilePage,
+      meta: {
+        requiresAuth: true,
+        featureToggle: "accounts",
+      },
+    },
+  ];
+}
+
 const router = createRouter({
   history: createWebHistory(),
   routes,
 });
 
 router.beforeEach((to, _from, next) => {
   const authStore = useAuthStore();
-
   const requiresAuth = to.matched.some((record) => record.meta.requiresAuth);
 
   if (requiresAuth && !authStore.isLoggedIn) {

diff --git a/frontend/src/stores/commonStore.ts b/frontend/src/stores/commonStore.ts
@@ -4,7 +4,12 @@ import { ref } from "vue";
 export const useCommonStore = defineStore("common", () => {
   const showOverlay = ref<boolean>(false);
 
+  const featureToggles = ref({
+    accounts: import.meta.env.VITE_APP_ACCOUNTS_FEATURE_TOGGLE === "true",
+  });
+
   return {
+    featureToggles,
     showOverlay,
   };
 });