Add email testing feature and update welcome email

This commit introduces a new feature that allows admins to test the sending of welcome emails to new users. A new 'Tests' section has been added in the admin navigation for this purpose. The code also includes error handling for failed email sends.

In addition, changes have been made to the content of the welcome email sent to new users. The invitation to join our community has been removed from the message. Also, if a username is not available, the user's email will be used in the greeting instead.

apps/shelve/app/pages/app/admin/tests.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { User } from '@shelve/types'
+
+const newUser = ref<User>({
+  email: 'hrichard206@gmail.com',
+  username: 'test',
+  avatar: 'https://i.imgur.com/6VBx3io.png',
+  role: 'user',
+})
+const loading = ref(false)
+
+async function testNewUserMail() {
+  loading.value = true
+  try {
+    await $fetch('/api/mail/welcome', {
+      method: 'POST',
+      body: {
+        email: newUser.value.email,
+        username: newUser.value.username,
+      },
+    })
+    toast.success('Email sent')
+  } catch (error) {
+    toast.error('Failed to send email')
+  }
+  loading.value = false
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <div class="flex flex-col gap-4">
+      <h2 class="text-lg font-semibold">
+        Test new user email
+      </h2>
+      <p class="text-sm text-neutral-500 dark:text-neutral-400">
+        Send a test email to a new user
+      </p>
+      <div>
+        <UButton
+          label="Send email"
+          variant="soft"
+          color="neutral"
+          icon="lucide:mail"
+          :loading
+          @click="testNewUserMail"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

apps/shelve/app/utils/navigation.ts

@@ -58,6 +58,12 @@ export function getNavigation(where: Where): Navigation[] {
           icon: 'heroicons:users',
           title: 'Users',
         },
+        {
+          name: 'Tests',
+          path: '/app/admin/tests',
+          icon: 'lucide:flask-conical',
+          title: 'Tests',
+        },
       ]
     default:
       return []

apps/shelve/server/api/mail/welcome.ts

@@ -0,0 +1,12 @@
+import type { H3Event } from 'h3'
+import { EmailService } from '~~/server/services/resend.service'
+
+export default defineEventHandler(async (event: H3Event) => {
+  const { email, username } = await readBody(event)
+  const emailService = new EmailService()
+  await emailService.sendWelcomeEmail(email, username)
+  return {
+    statusCode: 200,
+    message: 'Email sent',
+  }
+})

apps/shelve/server/emails/welcomeEmail.vue

@@ -51,11 +51,6 @@ defineProps({
               roadmap
             </Link> to see what's coming next.
           </Text>
-          <Text class="mb-4 text-left text-[#000000]">
-            3. Join our <Link :href="`${redirectUrl}/community`" class="text-[#2C3BF5]">
-              community
-            </Link> to connect with other users and share your experiences.
-          </Text>
           <Text class="mb-4 text-left text-[#000000]">
             4. Start a new project and invite your team members to collaborate.
           </Text>

apps/shelve/server/services/resend.service.ts

@@ -79,7 +79,7 @@ export class EmailService {
         redirectUrl: this.siteUrl,
       })
     } catch (error) {
-      return `<h1>Welcome to Shelve, ${username}!</h1>`
+      return `<h1>Welcome to Shelve, ${username || email}!</h1>`
     }
   }