Merge pull request #74 from AnimalFoodBank:delano/20240228-pre-build-…

…cleanup

Fixes for magic link email and cleanup

apps/api/.env.example

@@ -31,6 +31,20 @@ EMAIL_BACKEND = "django.core.mail.backends.smtp.EmailBackend"
 EMAIL_TIMEOUT = 5
 EMAIL_HOST = "localhost"
 EMAIL_PORT = 1025
+# EMAIL_HOST_USER =
+# EMAIL_HOST_PASSWORD =
+
+# EMAIL_USE_TLS/EMAIL_USE_SSL are mutually exclusive, so only
+# set a value to one of these settings. Which one you choose
+# is related to which port the service is running on, typically:
+#
+# 25    unencrypted
+# 587   TLS
+# 465   SSL
+# 1025  Mailpit (unencrypted)
+#
+#EMAIL_USE_SSL=True
+EMAIL_USE_TLS=True
 
 # Default DB settings for Django using SQLite. In production,
 # use a more robust database like PostgreSQL or CockroachDB.

apps/api/afb/settings.py

@@ -381,12 +381,20 @@
 # SMTP backend:
 # 'django.core.mail.backends.smtp.EmailBackend'
 #
-
 EMAIL_BACKEND = os.getenv("EMAIL_BACKEND")
 EMAIL_TIMEOUT = int(os.getenv("EMAIL_TIMEOUT", 5))
+
 EMAIL_HOST = os.getenv("EMAIL_HOST")
 EMAIL_PORT = os.getenv("EMAIL_PORT")
 
+EMAIL_HOST_USER = os.getenv("EMAIL_HOST_USER")
+EMAIL_HOST_PASSWORD = os.getenv("EMAIL_HOST_PASSWORD")
+
+# EMAIL_USE_TLS/EMAIL_USE_SSL are mutually exclusive, so only
+# one of these settings should appear in your .env file.
+EMAIL_USE_TLS = os.getenv("EMAIL_USE_TLS", False)
+EMAIL_USE_SSL = os.getenv("EMAIL_USE_SSL", False)
+
 
 if DEBUG:
     INSTALLED_APPS += [

apps/api/requirements.in

@@ -92,6 +92,10 @@ django-unfold
 
 django-phonenumber-field[phonenumbers]
 
+django-cors-headers
+python-dotenv
+
+
 # DRF dependencies
 # See: https://www.django-rest-framework.org/#installation
 

apps/ui/components/Logo.vue

@@ -2,6 +2,6 @@
 <template>
   <!-- TOOO: Why wrapping with an anchor tag leads to "Hydration children mismatch" -->
   <span>
-    <nuxt-img src="/img/afb_logo_horizontal_colour.png" alt="Animal Food Bank Logo" class="max-w-32 min-16"/>
+    <img src="/img/afb_logo_horizontal_colour.png" alt="Animal Food Bank Logo" class="max-w-32 min-16"/>
   </span>
 </template>

apps/ui/components/NotificationsSlideover.vue

@@ -4,7 +4,7 @@ import type { Notification } from '~/types';
 
 const { isNotificationsSlideoverOpen } = useDashboard()
 
-const { data: notifications } = await useFetch<Notification[]>('/api/notifications')
+const { data: notifications } = await useFetch<Notification[]>('/app/notifications')
 </script>
 
 <template>

apps/ui/components/UserDropdown.vue

@@ -26,7 +26,8 @@ const items = computed(() => [
     click: () => isHelpSlideoverOpen.value = true
   }], [{
     label: 'Sign out',
-    icon: 'i-heroicons-arrow-left-on-rectangle'
+    icon: 'i-heroicons-arrow-left-on-rectangle',
+    'to': '/logout'
   }]
 ])
 </script>

apps/ui/error.vue

@@ -16,9 +16,6 @@ useHead({
   }
 })
 
-const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation(), { default: () => [] })
-provide('navigation', navigation)
-
 </script>
 
 <template>

apps/ui/layouts/dashboard.vue

@@ -13,33 +13,32 @@ const links = [{
   }
 }, {
   id: 'requests',
-  label: 'Requests',
+  label: 'Request history',
   icon: 'i-heroicons-clipboard-document',
   to: '/requests',
   badge: '',
   tooltip: {
-    text: 'Requests',
+    text: 'Your history of requests',
   }
 }, {
-  id: 'clients',
-  label: 'Clients',
-  icon: 'i-heroicons-user-group',
-  to: '/clients',
-  tooltip: {
-    text: 'Clients',
-  }
-}, {
-  id: 'settings',
-  label: 'Settings',
-  to: '/settings',
+  id: 'profile',
+  label: 'Profile',
+  to: '/profile',
   icon: 'i-heroicons-cog-8-tooth',
-  children: [{
-    label: 'General',
-    to: '/settings',
-    exact: true
-  }],
+  children: [
+    {
+      label: 'My Delivery Info',
+      to: '/profile',
+      exact: true
+    },
+    {
+      label: 'My Pets',
+      to: '/profile/pets',
+      exact: true
+    },
+  ],
   tooltip: {
-    text: 'Settings',
+    text: 'Your profile details',
   }
 }]
 
@@ -60,7 +59,9 @@ const colors = computed(() => defaultColors.value.map(color => ({ ...color, acti
     <UDashboardPanel :width="250" :resizable="{ min: 200, max: 300 }" collapsible>
       <UDashboardNavbar class="!border-transparent" :ui="{ left: 'flex-1' }">
         <template #left>
-          <Logo />
+          <NuxtLink to="/">
+            <Logo />
+          </NuxtLink>
         </template>
       </UDashboardNavbar>
 
@@ -83,9 +84,9 @@ const colors = computed(() => defaultColors.value.map(color => ({ ...color, acti
     <slot />
 
     <!-- ~/components/HelpSlideover.vue -->
-    <HelpSlideover />
+    <!-- <HelpSlideover /> -->
     <!-- ~/components/NotificationsSlideover.vue -->
-    <NotificationsSlideover />
+    <!-- <NotificationsSlideover /> -->
 
     <ClientOnly>
 

apps/ui/layouts/default.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
 
-const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation(), { default: () => [] })
-provide('navigation', navigation)
-
 </script>
 
 <template>

apps/ui/nuxt.config.ts

@@ -2,81 +2,55 @@
 export default defineNuxtConfig({
   extends: [process.env.NUXT_UI_PRO_PATH || '@nuxt/ui-pro'],
   modules: [
-    '@nuxt/content',
-    '@nuxtjs/color-mode',
-    '@nuxt/image',
     '@nuxt/ui',
-    '@nuxthq/studio',  // https://nuxt.studio/docs/projects/setup#requirements-to-use-the-studio-editor
-    '@nuxtjs/fontaine',
-    '@nuxtjs/google-fonts',
-    '@vueuse/nuxt',
-    "@pinia/nuxt",
-    // "@sidebase/nuxt-auth",
-    'nuxt-og-image',
+    '@nuxt/fonts',
     'nuxt-snackbar',
   ],
-  // ssr: false,
-  // force module initialization on dev env
-  // https://nuxt.studio/docs/developers/local-debug
-  studio: {
-    enabled: true
-  },
-  colorMode: {
-    preference: 'dark', // default value of $colorMode.preference
-    fallback: 'dark', // fallback value if not system preference found
-    classSuffix: '',
-    storageKey: 'nuxt-color-mode',
-  },
-  hooks: {
-    // Define `@nuxt/ui` components as global to use them in `.md` (feel free to add those you need)
-    'components:extend': (components) => {
-      const globals = components.filter((c) => ['UButton'].includes(c.pascalName))
 
-      globals.forEach((c) => c.global = true)
-    }
-  },
+  /*
+  *  Client-side Rendering:
+  *  Out of the box, a traditional Vue.js application is rendered in the
+  *  browser (or client). Then, Vue.js generates HTML elements after the
+  *  browser downloads and parses all the JavaScript code containing the
+  *  instructions to create the current interface. See:
+  *  https://nuxt.com/docs/guide/concepts/rendering#client-side-rendering
+  */
+  ssr: false,
+
   ui: {
     icons: ['heroicons', 'simple-icons'],  // 'phosphor', 'streamline'
   },
-  srcDir: '.', // This is the default, but it's good to be explicit
-  auth: {
-    // This value is used for the auth origin. When it's not set, it'll raise
-    // an AUTH_NO_ORIGIN error in production. In dev, it'll just log a warning.
-    // @see https://github.com/sidebase/nuxt-auth/issues/515
-    baseURL: process.env.NUXT_PUBLIC_APP_ORIGIN,
 
-    // TODO: Check if this is still the right way to enable global middleware in Nuxt3
-    // enableGlobalAppMiddleware: true,
-  },
-  // Fonts
-  fontMetrics: {
-    fonts: ['DM Sans']
-  },
-  googleFonts: {
-    display: 'swap',
-    download: true,
-    families: {
-      'DM+Sans': [300, 400, 500, 600, 700]
-    }
-  },
+  // 2024-02-02
+  //
+  // Used for success and error messages (e.g. after submitting
+  // login form).
   snackbar: {
     // bottom: true,
     // right: true,
     duration: 10000,
   },
-  routeRules: {
-    '/_api/search.json': { prerender: true },
-    '/docs': { redirect: '/docs/getting-started', prerender: false }
+
+  // 2024-02-28
+  //
+  // re: "Cannot find module ... vue/server-renderer/index.mjs" when running nuxi
+  // build and then "node .output/server/index.mjs"
+  //
+  // https://github.com/nuxt/nuxt/issues/14820#issuecomment-1890360196
+  //
+  experimental: {
+    externalVue: false,
   },
+
+  // https://devtools.nuxt.com/guide/getting-started
+  // enabled: process.env.NUXT_DEVTOOLS === 'true',
   devtools: {
-    // https://devtools.nuxt.com/guide/getting-started
-    // enabled: process.env.NUXT_DEVTOOLS === 'true',
     enabled: true,
-
     timeline: {
       enabled: true
     }
   },
+
   /*
   * runtimeConfig is a configuration option that allows you to pass
   * environment variables from the server to the client. It has two

apps/ui/package.json

@@ -4,6 +4,7 @@
   "type": "module",
   "scripts": {
     "build": "nuxt build",
+    "build_debug": "NODE_OPTIONS='--trace-deprecation' nuxt build",
     "dev": "nuxt dev --host",
     "_docs:dev": "nuxt dev --spa --tunnel --host",
     "generate": "nuxt generate",
@@ -13,35 +14,35 @@
     "typecheck": "nuxt typecheck"
   },
   "dependencies": {
-    "@iconify-json/heroicons": "^1.1.19",
+    "@iconify-json/heroicons": "^1.1.20",
     "@iconify-json/ph": "^1.1.11",
-    "@iconify-json/simple-icons": "^1.1.89",
-    "@nuxt/content": "^2.11.0",
-    "@nuxt/image": "^1.3.0",
-    "@nuxt/ui-pro": "^1.0.1",
-    "@nuxtjs/fontaine": "^0.4.1",
-    "@nuxtjs/google-fonts": "^3.1.3",
-    "@vueuse/nuxt": "^10.7.2",
+    "@iconify-json/simple-icons": "^1.1.94",
+    "@nuxt/fonts": "^0.0.1",
+    "@nuxt/image": "^1.4.0",
+    "@nuxt/ui": "^2.14.2",
+    "@nuxt/ui-pro": "^1.0.2",
+    "@vueuse/nuxt": "^10.9.0",
     "date-fns": "^3.3.1",
-    "next-auth": "^4.24.5",
-    "nitro": "^2.9.0",
+    "next-auth": "^4.24.6",
+    "nitro": "^0.0.0",
     "nuxt-og-image": "^2.2.4",
     "nuxt-snackbar": "^1.0.4",
-    "pinia": "^2.1.7"
+    "pinia": "^2.1.7",
+    "vue": "^3.4.21"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.2.0",
     "@nuxt/types": "^2.17.3",
     "@nuxt/typescript-build": "^3.0.2",
-    "@nuxthq/studio": "^1.0.10",
+    "@nuxthq/studio": "^1.0.12",
     "@nuxtjs/color-mode": "^3.3.2",
     "@pinia/nuxt": "^0.5.1",
     "@sidebase/nuxt-auth": "^0.6.7",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "nuxt": "^3.10.3",
     "vue-tsc": "^1.8.27"
   },
   "resolutions": {
-    "vue": "3.3.13"
+    "vue": "^3.4.0"
   }
 }