add auth and fix small bug

TalLevAmi · Feb 4, 2020 · 2401780 · 2401780
1 parent f63e450
commit 2401780
Show file tree

Hide file tree

Showing 14 changed files with 308 additions and 274 deletions.
diff --git a/.gitignore b/.gitignore
@@ -83,3 +83,4 @@ dist
 
 # Service worker
 sw.*
+now.json
diff --git a/api/insert.js b/api/insert.js
@@ -27,13 +27,10 @@ module.exports = async (req, res) => {
       // invoke ZEIT build process programmatically
     } catch(error) { }
 
-    return res.json(response.data)
+    return res.json(response.data);
   } catch(error) {
-    console.error(error);
     return res.json({
-      body: {
-        error
-      }
+      error: error.message
     });
   }
 

diff --git a/pages/admin/createEvent.vue → api/login.js b/pages/admin/createEvent.vue → api/login.js
diff --git a/api/logout.js b/api/logout.js
diff --git a/api/sendEmail.js b/api/sendEmail.js
@@ -0,0 +1,30 @@
+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'
+};
+
+module.exports = (user) => {
+  const options = {
+    ...mailOptions,
+    to: user.email,
+  };
+
+  transporter.sendMail(options, (error, info) => {
+    if (error) {
+      console.log(error)
+    } else {
+      console.log('Email sent: ' + info.response);
+    }
+  });
+}
diff --git a/middleware/auth.js b/middleware/auth.js
@@ -0,0 +1,8 @@
+export default function ({ store, error }) {
+  if (!store.state.authUser) {
+    error({
+      message: 'You are not connected',
+      statusCode: 403
+    })
+  }
+}
diff --git a/nuxt.config.js b/nuxt.config.js
@@ -44,12 +44,24 @@ export default {
   ** Nuxt.js modules
   */
   modules: [
-    '@nuxtjs/axios'
+    '@nuxtjs/axios',
+    '@nuxtjs/auth',
+    '@nuxtjs/toast'
   ],
 
   axios: {
     baseURL: process.env.baseURL || 'http://localhost:3000'
   },
+  toast: {
+    position: 'bottom-center',
+    singleton: true,
+    duration: 5000,
+  },
+  auth: {
+    redirect: {
+      login: '/admin/login'
+    },
+  },
 
   /*
   ** Build configuration

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,11 +11,14 @@
     "generate": "nuxt generate"
   },
   "dependencies": {
+    "@nuxtjs/auth": "^4.8.5",
     "@nuxtjs/axios": "^5.9.0",
+    "@nuxtjs/toast": "^3.3.0",
     "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"
   },

diff --git a/pages/admin/_id.vue b/pages/admin/_id.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>Create Event</div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  middleware: 'auth',
+  computed: {
+    ...mapGetters(['loggedInUser'])
+  }
+}
+</script>
diff --git a/pages/admin/login.vue b/pages/admin/login.vue
@@ -0,0 +1,54 @@
+<template>
+  <section class="flex justify-center items-center">
+    <div class="max-w-sm flex flex-col">
+      <h1 class="my-3">
+        Welcome to CloudyBadge
+      </h1>
+      <div class="border-b-2 border-dashed w-1/6 self-center mt-3 mb-3" />
+      <form @submit.prevent="login" class="mt-5 text-center">
+        <div class="flex flex-col text-left">
+          <label for="email">Email</label>
+          <input name="email" v-model="email" type="text" required class="p-3 border-b mt-2"/>
+        </div>
+        <div class="flex flex-col text-left mt-4">
+          <label for="password">Password</label>
+          <input name="password" v-model="password" type="password" required class="p-3 border-b mt-2"/>
+        </div>
+        <button type="submit" class="button--green m-4">Login</button>
+      </form>
+    </div>
+  </section>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      email: '',
+      password: '',
+    }
+  },
+  methods: {
+    async login(e) {
+      const payload = {
+        email: this.email,
+        password: this.password,
+      };
+
+      const response = await this.$auth.loginWith('local', {
+        data: {
+          email: this.email,
+          password: this.password
+        }
+      });
+
+      if (!response.error) {
+        this.$router.push(`/admin/${response.data.id}`);
+      } else {
+        this.$toast.error('Failed to log in.', {
+          duration: 3000
+        });
+      }
+    }
+  }
+}
+</script>
diff --git a/pages/event/_event_id/register.vue b/pages/event/_event_id/register.vue
@@ -7,45 +7,45 @@
         <cld-image :public-id="event.logo" width="80" crop="scale"/>
       </div>      
     </div>
-      <div v-if="event" class="max-w-sm flex flex-col">
-        <h1 class="my-3">
-          Welcome to CloudyBadge
-        </h1>
-        <h3 class="text-grey-darker">
-          Presented at {{event.name}}
-        </h3>
-        <div class="border-b-2 border-dashed w-1/6 self-center mt-3 mb-3" />
-        <form @submit="register" class="mt-5">
-          <div class="flex flex-col text-left">
-            <label for="name">First Name</label>
-            <input name="name" v-model="fname" type="text" required class="p-3 border-b mt-2"/>
-          </div>
-          <div class="flex flex-col text-left">
-            <label for="name">Last Name</label>
-            <input name="name" v-model="lname" type="text" required class="p-3 border-b mt-2"/>
-          </div>
-          <div class="flex flex-col text-left">
-            <label for="company" class=" mt-3">Company</label>
-            <input name="company" v-model="company" type="text" required  class="p-3 border-b mt-2"/>
-          </div>
-          <div class="flex flex-col text-left">
-            <label for="title" class=" mt-3">Title</label>
-            <input name="title" v-model="title" type="text" required  class="p-3 border-b mt-2"/>
-          </div>
-          <div class="flex flex-col text-left">
-            <label for="email" class=" mt-3">Email</label>
-            <input name="email" v-model="email" type="text" required class="p-3 border-b mt-2"/>
-          </div>
-          <button type="submit" class="button--green m-4">Register me!</button>
-        </form>
-      </div>
-      <div v-else>
-        <h2 class="mt-5 mb-5">Looks like the event does not exist.</h2>
-        <h3 class="text-grey-darker">Go back to event list maybe?</h3>
-        <nuxt-link to="/">
-          <button class="button--green m-4">Yes, take me home.</button>
-        </nuxt-link>
-      </div>
+    <div v-if="event" class="max-w-sm flex flex-col">
+      <h1 class="my-3">
+        Welcome to CloudyBadge
+      </h1>
+      <h3 class="text-grey-darker">
+        Presented at {{event.name}}
+      </h3>
+      <div class="border-b-2 border-dashed w-1/6 self-center mt-3 mb-3" />
+      <form @submit.prevent="register" class="mt-5">
+        <div class="flex flex-col text-left">
+          <label for="name">First Name</label>
+          <input name="name" v-model="fname" type="text" required class="p-3 border-b mt-2"/>
+        </div>
+        <div class="flex flex-col text-left">
+          <label for="name">Last Name</label>
+          <input name="name" v-model="lname" type="text" required class="p-3 border-b mt-2"/>
+        </div>
+        <div class="flex flex-col text-left">
+          <label for="company" class=" mt-3">Company</label>
+          <input name="company" v-model="company" type="text" required  class="p-3 border-b mt-2"/>
+        </div>
+        <div class="flex flex-col text-left">
+          <label for="title" class=" mt-3">Title</label>
+          <input name="title" v-model="title" type="text" required  class="p-3 border-b mt-2"/>
+        </div>
+        <div class="flex flex-col text-left">
+          <label for="email" class=" mt-3">Email</label>
+          <input name="email" v-model="email" type="text" required class="p-3 border-b mt-2"/>
+        </div>
+        <button type="submit" class="button--green m-4">Register me!</button>
+      </form>
+    </div>
+    <div v-else>
+      <h2 class="mt-5 mb-5">Looks like the event does not exist.</h2>
+      <h3 class="text-grey-darker">Go back to event list maybe?</h3>
+      <nuxt-link to="/">
+        <button class="button--green m-4">Yes, take me home.</button>
+      </nuxt-link>
+    </div>
   </section>
 </template>
 
@@ -54,11 +54,10 @@ import axios from 'axios';
 
 //TODO - change to middleware
 export default {
-  async asyncData({ params, query, $axios}) {
+  async asyncData({ params, query, $axios }) {
     const event = await $axios.$get(`api/getEvent?id=${params.event_id}`);      
-    return !event.error ? {
-      event
-    } : {};
+
+    return !event.error ? { event } : {};
   },
   data() {
     return {
@@ -72,7 +71,7 @@ export default {
   },
   methods: {
     async register(e) {
-      e.preventDefault();
+      this.$toast.info('Registering...');
 
       const payload = {
         firstName: this.fname,
@@ -83,16 +82,17 @@ export default {
         eventId: this.event.id,
       };
 
-      try {
-        const response = await axios.post(`/api/insert`, {
-          payload
-        });
+      const response = await axios.post(`/api/insert`, {
+        payload
+      });
 
+      if (response.error) {
+        this.$toast.error('Failed to register. Please try again.');
+      } else {
+        this.$toast.success('Registered succeeded. Redirecting to your badge page');
         this.$router.push({
-          path: `/upload/${response.data.editKey}`
-      })
-      } catch(error) {
-        console.error('error', error)
+          path: `/event/${this.event.id}/${response.data.editKey}`
+        });
       }
     }
   }