save

fix: fix mailer settings for gmail
jurassicjs · Dec 17, 2023 · ce7a971 · ce7a971
1 parent dc19311
commit ce7a971
Show file tree

Hide file tree

Showing 12 changed files with 4,241 additions and 2,621 deletions.
diff --git a/app.vue b/app.vue
@@ -8,13 +8,13 @@ nuxtApp.hook("page:finish", () => {
 })
 
 useHead({
-      meta: [
-        { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' }
-      ],
-      bodyAttrs: {
-        class: 'dark:bg-black'
-      }
-    })
+  meta: [
+    { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' }
+  ],
+  bodyAttrs: {
+    class: 'dark:bg-black'
+  }
+})
 
 
 await useUser()
@@ -28,21 +28,24 @@ await useUser()
 </template>
 
 <style>
-.page{
-  overflow:hidden;
+.page {
+  overflow: hidden;
+}
+
+div#goog-gt-tt {
+  display: none;
 }
-div#goog-gt-tt{
-  display:none;
-  }
 
 body {
   background-color: #fff;
-  color: rgba(0,0,0,0.8);
+  color: rgba(0, 0, 0, 0.8);
 }
+
 .dark-mode body {
   background-color: #091a28 !important;
   color: #ebf4f1;
 }
+
 .sepia-mode body {
   background-color: #f1e7d0;
   color: #433422;
@@ -70,4 +73,4 @@ body {
   opacity: 0;
   transform: rotate3d(1, 1, 1, 15deg);
 }
-</style>
+</style>
diff --git a/components/content/Alert.vue b/components/content/Alert.vue
@@ -1,25 +1,22 @@
-<template>
- <div class="p-4 mt-4 mb-4 rounded-lg alert text-sm leading-relaxed" :class="[type]">
-   <div class="flex items-start">
-     <div
-       v-if="icon"
-       :component="icon"
-       class="inline-flex mr-2 w-5 h-5 justify-center items-center text-1.2rem"
-     >
-       <!-- {{ icon }}  -->
-       <!-- <Icon class="w-5 h-5 text-yellow-400" aria-hidden="true" :name="icon" /> -->
-       <Icon class="w-5 h-5 text-yellow-400" aria-hidden="true" name="carbon:ai-status-complete" />
-     </div>
-     <slot/>
-     <div class="flex-grow alert-content">
-       <ContentSlot unwrap="p">
-         <template #between>
-           <br> <slot/>
-         </template>
-       </ContentSlot>
-     </div>
-   </div>
- </div>
+<template >
+  <div class="p-4 mt-4 mb-4 rounded-lg alert text-sm leading-relaxed" :class="[type]">
+    <div class="flex items-start">
+      <div v-if="icon" :component="icon" class="inline-flex mr-2 w-5 h-5 justify-center items-center text-1.2rem">
+        <!-- {{ icon }}  -->
+        <!-- <Icon class="w-5 h-5 text-yellow-400" aria-hidden="true" :name="icon" /> -->
+        <Icon class="w-5 h-5 text-yellow-400" aria-hidden="true" name="carbon:ai-status-complete" />
+      </div>
+      <!-- <slot /> -->
+      <div class="flex-grow alert-content">
+        <div unwrap="p">
+          <template>
+            <br>
+            <slot />
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
 defineProps({
@@ -28,81 +25,94 @@ defineProps({
     default: 'heroicons-outline:exclamation'
   },
   type: {
-     type: String,
-     default: 'info',
-     validator (value: string) {
-       return ['info', 'success', 'warning', 'danger'].includes(value)
-     }
-   }
+    type: String,
+    default: 'info',
+    validator(value: string) {
+      return ['info', 'success', 'warning', 'danger'].includes(value)
+    }
+  }
 })
 </script>
 
 <style lang="postcss" scoped>
 .alert {
- &.success {
-   @apply bg-green-50 dark:bg-green-800 dark:bg-opacity-25 text-green-600 dark:text-green-200;
-   :deep(code) {
-       @apply bg-green-100 dark:bg-green-900 dark:bg-opacity-50 shadow-none text-current;
-     }
-     a:hover {
-       code {
-         @apply border-green-400 dark:border-green-700;
-       }
-   }
- }
- &.info {
-   @apply bg-blue-50 dark:bg-blue-800 dark:bg-opacity-25 text-blue-600 dark:text-blue-200;
-   :deep(code) {
-       @apply bg-blue-100 dark:bg-blue-900 dark:bg-opacity-50 shadow-none text-current;
-     }
-     a:hover {
-       code {
-         @apply border-blue-400 dark:border-blue-700;
-       }
-   }
- }
- &.warning {
-   @apply bg-yellow-50 dark:bg-yellow-800 dark:bg-opacity-25 text-yellow-600 dark:text-yellow-100;
-   :deep(code) {
-       @apply bg-yellow-100 dark:bg-yellow-900 dark:bg-opacity-50 shadow-none text-current;
-     }
-     a:hover {
-       code {
-         @apply border-yellow-400 dark:border-yellow-700;
-       }
-     }
-  
- }
- &.danger {
-   @apply bg-red-50 dark:bg-red-800 dark:bg-opacity-25 text-red-600 dark:text-red-100;
-   :deep(code) {
-       @apply bg-red-100 dark:bg-red-900 dark:bg-opacity-50 shadow-none text-current;
-     }
-     a:hover {
-       code {
-         @apply border-red-400 dark:border-red-700;
-       }
-     }
- }
-
- :deep(strong) {
-     @apply font-semibold text-current;
-   }
-   a {
-     @apply underline border-none font-semibold text-current;
-     code {
-       @apply border border-transparent border-dashed;
-     }
- }
+  &.success {
+    @apply bg-green-50 dark:bg-green-800 dark:bg-opacity-25 text-green-600 dark:text-green-200;
+
+    :deep(code) {
+      @apply bg-green-100 dark:bg-green-900 dark:bg-opacity-50 shadow-none text-current;
+    }
+
+    a:hover {
+      code {
+        @apply border-green-400 dark:border-green-700;
+      }
+    }
+  }
+
+  &.info {
+    @apply bg-blue-50 dark:bg-blue-800 dark:bg-opacity-25 text-blue-600 dark:text-blue-200;
+
+    :deep(code) {
+      @apply bg-blue-100 dark:bg-blue-900 dark:bg-opacity-50 shadow-none text-current;
+    }
+
+    a:hover {
+      code {
+        @apply border-blue-400 dark:border-blue-700;
+      }
+    }
+  }
+
+  &.warning {
+    @apply bg-yellow-50 dark:bg-yellow-800 dark:bg-opacity-25 text-yellow-600 dark:text-yellow-100;
+
+    :deep(code) {
+      @apply bg-yellow-100 dark:bg-yellow-900 dark:bg-opacity-50 shadow-none text-current;
+    }
+
+    a:hover {
+      code {
+        @apply border-yellow-400 dark:border-yellow-700;
+      }
+    }
+
+  }
+
+  &.danger {
+    @apply bg-red-50 dark:bg-red-800 dark:bg-opacity-25 text-red-600 dark:text-red-100;
+
+    :deep(code) {
+      @apply bg-red-100 dark:bg-red-900 dark:bg-opacity-50 shadow-none text-current;
+    }
+
+    a:hover {
+      code {
+        @apply border-red-400 dark:border-red-700;
+      }
+    }
+  }
+
+  :deep(strong) {
+    @apply font-semibold text-current;
+  }
+
+  a {
+    @apply underline border-none font-semibold text-current;
+
+    code {
+      @apply border border-transparent border-dashed;
+    }
+  }
 }
 
 .alert :deep(p) {
- @apply m-0 !important;
+  @apply m-0 !important;
 }
 
 .dark .alert {
- :deep(a) {
-     @apply text-current;
-   }
+  :deep(a) {
+    @apply text-current;
+  }
 }
-</style>
+</style>
diff --git a/package.json b/package.json
@@ -13,35 +13,35 @@
     "prisma:migrate": "dotenv -e .env -- npx prisma migrate deploy --name prod"
   },
   "devDependencies": {
-    "@nuxt/content": "^2.6.0",
+    "@nuxt/content": "^2.9.0",
     "@nuxt/postcss8": "^1.1.3",
-    "@nuxt/test-utils-edge": "3.5.0-28049047.2c55bb6f",
-    "@nuxtjs/color-mode": "^3.2.0",
-    "@nuxtjs/tailwindcss": "^6.6.7",
-    "@types/bcrypt": "^5.0.0",
-    "@types/uuid": "^9.0.1",
-    "autoprefixer": "^10.4.13",
-    "jsdom": "^21.1.0",
-    "nuxt": "^3.4.3",
-    "nuxt-icon": "^0.4.0",
-    "postcss": "^8.4.21",
-    "tailwindcss": "^3.3.2",
-    "vitest": "^0.30.1"
+    "@nuxt/test-utils-edge": "3.8.0-28284309.b3d3d7f4",
+    "@nuxtjs/color-mode": "^3.3.0",
+    "@nuxtjs/tailwindcss": "^6.9.4",
+    "@types/bcrypt": "^5.0.2",
+    "@types/uuid": "^9.0.7",
+    "autoprefixer": "^10.4.16",
+    "jsdom": "^22.1.0",
+    "nuxt": "^3.8.1",
+    "nuxt-icon": "^0.6.5",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.5",
+    "vitest": "^0.34.6"
   },
   "dependencies": {
-    "@formkit/auto-animate": "^1.0.0-beta.5",
-    "@prisma/client": "^4.11.0",
+    "@formkit/auto-animate": "^0.8.1",
+    "@prisma/client": "^5.5.2",
     "@sidebase/nuxt-parse": "^0.3.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/typography": "^0.5.8",
-    "@vueuse/core": "^9.13.0",
-    "bcrypt": "^5.1.0",
-    "dotenv-cli": "^7.0.0",
+    "@tailwindcss/typography": "^0.5.10",
+    "@vueuse/core": "^10.6.0",
+    "bcrypt": "^5.1.1",
+    "dotenv-cli": "^7.3.0",
     "nuxt-mailer": "^0.11.0",
-    "nuxt-scheduler": "^0.0.15",
-    "prisma": "^4.11.0",
-    "stripe": "^11.13.0",
-    "uuid": "^9.0.0",
+    "nuxt-scheduler": "^0.1.9",
+    "prisma": "^5.5.2",
+    "stripe": "^14.4.0",
+    "uuid": "^9.0.1",
     "zod": "^3.21.0"
   },
   "prisma": {

diff --git a/server/api/auth/register.ts b/server/api/auth/register.ts
@@ -1,6 +1,6 @@
 import { H3Event, sendError } from 'h3'
 import bcrypt from 'bcrypt'
-import { IUser } from '~/types/IUser';
+import type { IUser } from '~/types/IUser';
 import { createUser } from '~~/server/database/repositories/userRepository'
 import { ZodError } from "zod"
 import sendDefaultErrorResponse from '~~/server/app/errors/responses/DefaultErrorsResponse';
@@ -32,7 +32,13 @@ export default eventHandler(async (event: H3Event) => {
 
     const user = await createUser(userData)
 
-    sendVerificationEmail(user.email as string, user.id)
+    console.log('Created user: ', user)
+
+    if (!user.id) {
+      throw Error('Error Creating User')
+    }
+
+    await sendVerificationEmail(user.email, user.id)
 
     return await makeSession(user, event)
   } catch (error: any) {

diff --git a/server/app/email/emailSender.ts b/server/app/email/emailSender.ts
@@ -1,13 +1,13 @@
-import { EmailTemplate } from './types/emailTypes'
+import type { EmailTemplate } from './types/emailTypes'
 import { useMailer } from '#mailer'
 
-export type SendMail = {template: EmailTemplate, to: string, from: string, subject: string}
+type SendMail = {template: EmailTemplate, to: string, from: string, subject: string}
 
 export async function sendGmail (request: SendMail) {
   const mailService = useMailer()
   const gmailTransporter = mailService.gmailTransporter()
 
-  return await gmailTransporter.sendMail({
+  return await mailService.sendMail({
     requestId: 'test-key',
     options: {
       to: request.to,

diff --git a/server/app/email/verifyEmail.ts b/server/app/email/verifyEmail.ts
@@ -6,7 +6,14 @@ import { createOtp } from '../services/otp'
 export default async function sendVerificationEmail(email: string, userId: number) {
   const otp = await createOtp(userId)
   const template = verifyEmailTemplate(otp, '[email protected]', 'Avantage Support', 'Avantage')
-  sendGmail({ template, to: email, from: 'Rick', subject: 'Nuxt Mailer email verification' })
+
+  console.log('sendMail +++: ', email)
+  sendGmail({
+    template,
+    to: email,
+    from: 'Rick',
+    subject: 'Nuxt Mailer email verification'
+  })
 }
 
 export async function sendReminderVerificationEmail(email: string, userId: number) {