feat: pref team invite & email content

OsmanthusBeer · Nov 15, 2023 · 44341e3 · 44341e3
1 parent 1b32d74
commit 44341e3
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 25 deletions.
diff --git a/emails/teamInvite.vue b/emails/teamInvite.vue
@@ -1,19 +1,20 @@
 <script lang="ts" setup>
-defineProps<{ id: string; confirmUrl: string }>()
+defineProps<{ confirmUrl: string; username: string; teamname: string }>()
 </script>
 
 <template>
-  <div class="card w-96 bg-base-100 shadow-xl">
-    <figure><img src="https://cdn-icons-png.flaticon.com/512/5234/5234972.png" alt="invite"></figure>
-    <div class="card-body">
-      <h2 class="card-title">
-        Hi!
-      </h2>
-      <p>Do you confirm to join team?</p>
-      <div class="card-actions justify-end">
-        <a :href="confirmUrl" target="_blank" class="btn btn-primary">
-          Confirm
-        </a>
+  <div style="font-family: Arial, sans-serif; background-color: #f4f4f4; color: #333; padding: 20px;">
+    <div style="max-width: 600px; margin: auto; background: #fff; padding: 20px; text-align: center; box-shadow: 0 0 10px rgba(0,0,0,0.1);">
+      <h2>Welcome to {{ teamname }}!</h2>
+      <p>Dear {{ username }},</p>
+      <p>We are excited to invite you to join our team! As a valued member, your skills in [Skill or Role] will be instrumental to our success.</p>
+      <p>Your account is ready and waiting for you to begin your journey with us. To confirm your acceptance and create your team member profile, please click the button below.</p>
+      <a :href="confirmUrl" style="display: inline-block; padding: 10px 20px; margin-top: 20px; background-color: #007bff; color: #fff; text-decoration: none; border-radius: 5px;">Join the Team</a>
+      <div style="font-size: 0.8em; text-align: center; padding-top: 20px;">
+        <p>
+          OsmanthusBeer Labs<br>
+        </p>
+        <p>&copy; 2023 OsmanthusBeer Labs. All rights reserved.</p>
       </div>
     </div>
   </div>

diff --git a/pages/dashboard/t/[id]/invitations.vue b/pages/dashboard/t/[id]/invitations.vue
@@ -10,6 +10,7 @@ const sending = ref(false)
 const selectedRole = ref('')
 
 const route = useRoute()
+const router = useRouter()
 const id = ref(route.params.id)
 const users = ref(JSON.parse(route.query.users))
 
@@ -79,7 +80,7 @@ async function sendInvitation() {
         <div class="modal-action">
           <form method="dialog">
             <!-- if there is a button in form, it will close the modal -->
-            <button class="btn" @click="router.go(-1)">
+            <button class="btn" @click="router.back();">
               Close
             </button>
           </form>

diff --git a/pages/dashboard/t/confirm.vue b/pages/dashboard/t/confirm.vue
@@ -4,6 +4,7 @@ definePageMeta({
 })
 
 const route = useRoute()
+const router = useRouter()
 const id = ref(route.query.id)
 
 const { $client } = useNuxtApp()
@@ -16,6 +17,9 @@ async function confirm() {
   await $client.protected.teamInviteConfirm.useQuery({
     id: id.value,
   })
+  router.push({
+    path: '/dashboard',
+  })
 }
 </script>
 

diff --git a/server/trpc/routers/team.ts b/server/trpc/routers/team.ts
@@ -140,13 +140,6 @@ export const teamRouter = router({
 
       // send email
       data.forEach(async (item) => {
-        const template = await useCompiler('teamInvite.vue', {
-          props: {
-            id: '',
-            confirmUrl: `http://localhost:3000/dashboard/t/confirm?id=${item.id}`,
-          },
-        })
-
         const transporter = nodemailer.createTransport({
           host: 'smtp.exmail.qq.com',
           port: 465,
@@ -157,12 +150,31 @@ export const teamRouter = router({
           },
         })
 
-        await transporter.sendMail({
-          from: '"OsmanthusBeer Labs🌹" <[email protected]>', // sender address
-          to: '[email protected]', // list of receivers
-          subject: 'OsmanthusBeer Labs: Team invite', // Subject line
-          html: template, // html body
+        const team = await ctx.prisma.team.findFirst({ where: {
+          id: item.teamId,
+        } })
+
+        const user = await ctx.prisma.user.findFirst({ where: {
+          id: item.userId,
+        } })
+
+        const template = await useCompiler('teamInvite.vue', {
+          props: {
+            teamname: team?.name || '',
+            username: user?.username || '',
+            confirmUrl: `http://apibeer.com/dashboard/t/confirm?id=${item.id}`,
+          },
         })
+
+        if (user) {
+          await transporter.sendMail({
+            from: '"OsmanthusBeer Labs🌹" <[email protected]>', // sender address
+            // to: '[email protected]', // list of receivers
+            to: user.email, // list of receivers
+            subject: 'OsmanthusBeer Labs: Team invite', // Subject line
+            html: template, // html body
+          })
+        }
       })
 
       return res