From 3465a8307b30228f99ebc7f684f9a866d79d2ddf Mon Sep 17 00:00:00 2001
From: Maya Shavin <maya@cloudinary.com>
Date: Wed, 18 Dec 2019 11:24:21 +0200
Subject: [PATCH] add upload widget

---
 .gitignore           |  1 +
 nuxt.config.js       |  3 +++
 pages/index.vue      | 45 +++++++++++++++++++++++---------------------
 pages/upload/_id.vue | 23 ++++++++++++++++++++++
 pages/vote/_id.vue   |  0
 5 files changed, 51 insertions(+), 21 deletions(-)
 create mode 100644 pages/upload/_id.vue
 create mode 100644 pages/vote/_id.vue

diff --git a/.gitignore b/.gitignore
index f935a37..7d8f574 100644
--- a/.gitignore
+++ b/.gitignore
@@ -58,6 +58,7 @@ typings/
 
 # dotenv environment variables file
 .env
+.env.*
 
 # parcel-bundler cache (https://parceljs.org/)
 .cache
diff --git a/nuxt.config.js b/nuxt.config.js
index 018dcf4..ecf0ac5 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -15,6 +15,9 @@ export default {
     ],
     link: [
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
+    ],
+    script: [
+      { src: 'https://widget.cloudinary.com/v2.0/global/all.js' }
     ]
   },
 
diff --git a/pages/index.vue b/pages/index.vue
index 12c0922..12dc55f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,35 +1,38 @@
 <template>
   <section class="container">
     <div>
-      <logo />
-      <h1 class="title">
-        thbc-cloudybadge
+      <h1>
+        Welcome to CloudyBadge
       </h1>
-      <h2 class="subtitle">
-        CloudyBadge
-      </h2>
-      <div class="links">
-        <a
-          href="https://nuxtjs.org/"
-          target="_blank"
-          class="button--green"
-        >Documentation</a>
-        <a
-          href="https://github.com/nuxt/nuxt.js"
-          target="_blank"
-          class="button--grey"
-        >GitHub</a>
-      </div>
+      <form @submit="register" class="flex flex-col text-left mt-5">
+        <label for="name">Name</label>
+        <input name="name" v-model="name" type="text" required class="p-3 border-b mt-2"/>
+        <label for="company" class=" mt-3">Company</label>
+        <input name="company" v-model="company" type="text" required  class="p-3 border-b mt-2"/>
+        <label for="title" class=" mt-3">Title</label>
+        <input name="title" v-model="title" type="text" required  class="p-3 border-b mt-2"/>
+        <label for="email" class=" mt-3">Email</label>
+        <input name="email" v-model="email" type="text" required class="p-3 border-b mt-2"/>
+        <button type="submit" class="button--green m-4">Register me!</button>
+      </form>
     </div>
   </section>
 </template>
 
 <script>
-import Logo from '~/components/Logo.vue'
 
 export default {
-  components: {
-    Logo
+  data() {
+    return {
+      name: '',
+      company: '',
+      email: ''
+    }
+  },
+  methods: {
+    register() {
+      console.log('register');
+    }
   }
 }
 </script>
diff --git a/pages/upload/_id.vue b/pages/upload/_id.vue
new file mode 100644
index 0000000..3b49923
--- /dev/null
+++ b/pages/upload/_id.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <button id="upload_widget" class="cloudinary-button">Upload files</button>
+  </div>
+</template>
+<script>
+export default {
+  mounted() {
+    var myWidget = cloudinary.createUploadWidget({
+    cloudName: 'cdemo', 
+    }, (error, result) => { 
+      if (!error && result && result.event === "success") { 
+        console.log('Done! Here is the image info: ', result.info); 
+      }
+    }
+  )
+
+  document.getElementById("upload_widget").addEventListener("click", function(){
+      myWidget.open();
+    }, false);
+  }
+}
+</script>
\ No newline at end of file
diff --git a/pages/vote/_id.vue b/pages/vote/_id.vue
new file mode 100644
index 0000000..e69de29