fix cloudinary-devs#9 enable sending email

.gitignore

@@ -83,4 +83,5 @@ dist
 
 # Service worker
 sw.*
-now.json
+now.json
+.demo.js

api/insert.js

@@ -1,16 +1,20 @@
 require('dotenv').config();
 const { q, client } = require('./setup');
 const shortid = require('shortid');
+const sendEmail = require('./sendEmail');
 
 module.exports = async (req, res) => {
   const data = req.body.payload;
   const uniquePath = shortid.generate();
+  const eventName = data.eventName;
 
   data.voteID = uniquePath;
   data.editKey = shortid.generate();
   data.viewKey = shortid.generate();
   data.tranStr = '';
 
+  delete data.eventName;
+
   const badge = {
     data: data
   };
@@ -22,13 +26,11 @@ module.exports = async (req, res) => {
         badge
       )
     );
-    // TODO
-    try {
-      // invoke ZEIT build process programmatically
-    } catch(error) { }
 
+    await sendEmail(response.data, eventName);
     return res.json(response.data);
   } catch(error) {
+    console.log('error')
     return res.json({
       error: error.message
     });

api/sendEmail.js

@@ -1,30 +1,31 @@
-const nodemailer = require('nodemailer');
-
-const transporter = nodemailer.createTransport({
-  service: 'gmail',
-  auth: {
-    user: process.env.EMAIL_USER,
-    pass: process.env.EMAIL_KEY
-  }
-});
-
-const mailOptions = {
-  from: process.env.EMAIL_USER,
-  subject: 'Start editing your badge with CloudyBadge',
-  text: 'Testing'
+const sgMail = require('@sendgrid/mail')
+sgMail.setApiKey(process.env.SENDGRID_API_KEY);
+const fromEmail = process.env.SENDGRID_EMAIL;
+const templates = {
+  registerSuccess: process.env.SENDGRID_TEMPLATE_REGISTER
 };
 
-module.exports = (user) => {
-  const options = {
-    ...mailOptions,
+module.exports =  async (user, eventName) => {
+  const content = {
     to: user.email,
-  };
-
-  transporter.sendMail(options, (error, info) => {
-    if (error) {
-      console.log(error)
-    } else {
-      console.log('Email sent: ' + info.response);
+    from: {
+      email: fromEmail,
+      name: 'Cloudinary Demo'
+    },
+    templateId: templates.registerSuccess,
+    dynamic_template_data: {
+      name: user.firstName,
+      vote_id: user.voteID,
+      edit_id: user.editKey,
+      event_id: user.eventId,
+      event: eventName
     }
-  });
+  }
+
+  try {
+    await sgMail.send(content)
+    console.log('Message sent successfully.')
+  } catch (error) {
+    console.log('Message not sent.')
+  }
 }

components/Icon.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg :width="size" :height="size" aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24">
+    <path fill="#fff" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"/>
+  </svg>
+</template>

package.json

@@ -14,11 +14,11 @@
     "@nuxtjs/auth": "^4.8.5",
     "@nuxtjs/axios": "^5.9.0",
     "@nuxtjs/toast": "^3.3.0",
+    "@sendgrid/mail": "^6.5.1",
     "cloudinary-vue": "^1.0.0",
     "cross-env": "^5.2.0",
     "dotenv": "^8.2.0",
     "faunadb": "^2.10.0",
-    "nodemailer": "^6.4.2",
     "nuxt": "^2.4.0",
     "shortid": "^2.2.15"
   },

pages/event/_event_id/_user_id.vue

@@ -3,7 +3,7 @@
     <top-bar>
       <back :link="`/event/${eventId}`"/>
       <div class="uppercase">{{title}}</div>
-      <button v-if="!isView && event && event.active" class="bg-transparent text-white hover:bg-grey-darker border border-white uppercase px-3 py-2" @click="saveBadge">Save</button>
+      <button v-if="!isView && event && event.active" class="bg-transparent text-white hover:bg-grey-darker border border-white uppercase px-3 py-2" @click="saveBadge" :disabled="saveBtnLabel === 'Saving...'">{{saveBtnLabel}}</button>
     </top-bar>
     <div v-if="!user" class="bg-grey-dark mx-3 mb-3 flex items-center justify-center text-white text-3xl">
       <span>User doesn't exist!</span>
@@ -98,7 +98,6 @@ export default {
     const response = await $axios.$get(`/api/getUser?id=${params.user_id}&vid=${query.vid}`);
     const event = !response.info.error ? await $axios.$get(`api/getEvent?id=${params.event_id}`) : null;     
 
-  console.log(event);
     return {
       voteId: response.hasVoter && event && event.active ? query.vid : '',
       user: !response.info.error ? response.info.data : null,
@@ -122,6 +121,7 @@ export default {
       avatar: null,
       ref: '',
       saved: false,
+      saveBtnLabel: 'Save'
     };
   },
   computed: {
@@ -149,16 +149,21 @@ export default {
   },
   methods: {
     async saveBadge() {
+      this.saveBtnLabel = "Saving..."
       const response = await this.$axios.$post(`/api/update?ref=${this.ref}`, {
         avatar: {
           public_id: this.avatar.public_id,
           transformation: this.selectedEffect,
         }
       });
 
+      this.saveBtnLabel = "Save";
       if (!response.error) {
         this.saved = true;
       }
+      else {
+        this.$toast.error("Unable to save. Please try again.");
+      }
     },
     upload() {
       this.uploadWidget && this.uploadWidget.open();

pages/event/_event_id/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="overflow-hidden bg-grey event-container">
+  <div class="overflow-hidden bg-grey event-container" v-if="event">
     <top-bar class="bg-indigo-dark">
       <back link="/"/>
       <div class="flex items-center justify-center" v-if="event">
@@ -12,12 +12,15 @@
     <div class="my-5">
       <h2 class="text-center">{{headerTitle}}</h2>
     </div>
-    <div class="flex justify-center" v-if="users">
-      <nuxt-link :to="`/event/${event.id}/leaderboard`">
-        <button class="bg-green-dark hover:bg-green-darker text-white font-bold p-4 rounded mt-4 m-auto">
-          View board
+    <div class="flex justify-center items-center" v-if="users">
+      <nuxt-link :to="`/event/${event.id}/leaderboard`" v-if="users">
+        <button class="bg-green-dark hover:bg-green-darker text-white font-bold p-3 rounded mx-2 m-auto">
+          View leaderboard
         </button>
       </nuxt-link>
+      <nuxt-link :to="`/event/${event.id}/register`" v-if="event.active">
+        <button class="border-orange-dark border hover:bg-orange-dark text-orange-dark hover:text-white p-3 rounded mx-2">Register to event</button>
+      </nuxt-link>
     </div>
     <list :items="filteredUsers" grid v-if="users" class="m-8 overflow-auto border-2 border-grey-light p-3 justify-center flex-1">
       <Thumbnail slot-scope="item" class="mb-4 mr-4 hover:border-green-dark border-transparent border-2 p-1 rounded-full relative"
@@ -30,6 +33,16 @@
     </list>
     <div v-else>Error loading the list of badges</div>
   </div>
+  <div v-else class="bg-grey justify-center items-center h-full w-full flex flex-col">
+    <div class="text-2xl">
+      Event does not exist. Maybe try our list of events?
+    </div>
+    <nuxt-link to="/">
+      <button class="bg-green-dark hover:bg-green-darker text-white font-bold p-4 rounded mt-4 m-auto">
+        Back to events list
+      </button>
+    </nuxt-link>
+  </div>
 </template>
 <script>
 import List from '@/components/List.vue';

pages/event/_event_id/register.vue

@@ -80,6 +80,7 @@ export default {
         title: this.title,
         email: this.email,
         eventId: this.event.id,
+        eventName: this.event.name,
       };
 
       const response = await axios.post(`/api/insert`, {
@@ -89,7 +90,9 @@ export default {
       if (response.error) {
         this.$toast.error('Failed to register. Please try again.');
       } else {
-        this.$toast.success('Registered succeeded. Redirecting to your badge page');
+        this.$toast.success('Registered succeeded. Redirecting to your badge page', {
+          duration: 2000,
+        });
         this.$router.push({
           path: `/event/${this.event.id}/${response.data.editKey}`
         });

static/icons.js

@@ -0,0 +1,7 @@
+export const icons = {
+  save: "M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z",
+  load: 'M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z',
+  back: 'M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z',
+};
+
+export default icons;