Goal post

config/dev.env.js

@@ -2,5 +2,7 @@ var merge = require('webpack-merge')
 var prodEnv = require('./prod.env')
 
 module.exports = merge(prodEnv, {
-  NODE_ENV: '"development"'
+  DEBUG_MODE: true,
+  NODE_ENV: '"development"',
+  API_URL: '"http://localhost:3000"'
 })

config/prod.env.js

@@ -1,3 +1,5 @@
 module.exports = {
-  NODE_ENV: '"production"'
+  DEBUG_MODE: false,
+  NODE_ENV: '"production"',
+  API_URL: '"https://incentifyapi.herokuapp.com"'
 }

src/components/Dashboard.vue

@@ -8,7 +8,7 @@
     <div class="card is-fullwidth goal-vertical-spacing">
         <div class="card-content">
             <div class="content">
-                <h1><strong>Treehouse</strong> comrww <img src="../assets/treehouse-logo.png" class="is-pulled-right goal-provider-icon"></h1>
+                <h1><strong>Treehouse</strong> Reggiesibley <img src="../assets/treehouse-logo.png" class="is-pulled-right goal-provider-icon"></h1>
                 <progress class="progress is-small is-success" value="45" max="100">45%</progress>
                 <h3>45% of {{55}} Points</h3> Time Remaining: 1 day, 23 hours, 21 minutes
             </div>
@@ -18,7 +18,7 @@
     <div class="card is-fullwidth goal-vertical-spacing">
         <div class="card-content">
             <div class="content">
-                <h1><strong>DuoLingo</strong> comrww <img src="../assets/duolingo-logo.png" class="is-pulled-right goal-provider-icon"></h1>
+                <h1><strong>DuoLingo</strong> Reggiesibley <img src="../assets/duolingo-logo.png" class="is-pulled-right goal-provider-icon"></h1>
                 <progress class="progress is-small is-success" value="5" max="100">5%</progress>
                 <h3>5% of {{55}} Points</h3> Time Remaining: 2 days, 3 hours, 10 minutes
             </div>
@@ -37,18 +37,17 @@ export default {
     };
   },
   ready() {
-        this.$http.get('http://localhost:3000/users').then((response) => {
-            console.log(response)
-            // success callback
-            this.dashboardData = response.body.map(function(i) {
-              return _.extend(i, { showUserInfo: false })
-            })
-          }, (response) => {
-            // error callback
-            this.failure = !this.failure;
-          });
-      }
-
+    this.$http.get(process.env.API_URL + '/users').then((response) => {
+      console.log(response)
+      // success callback
+      this.dashboardData = response.body.map(function(i) {
+        return _.extend(i, { showUserInfo: false })
+      })
+    }, (response) => {
+      // error callback
+      this.failure = !this.failure;
+    });
+  }
 };
 
 </script>

src/components/Goal.vue

@@ -18,7 +18,7 @@
 
         <div v-show="integration.showIntegration" class="animated fadeIn">
           <p>{{integration.description}}</p>
-          <add-goal></add-goal>
+          <add-goal :integration-name="integration.name" :integration-short-name="integration.short_name"></add-goal>
         </div>
       </div>
     </div>
@@ -28,15 +28,16 @@
 
 <script>
 import addGoal from './add-goal.vue';
-
 import _ from 'lodash';
 
 export default {
 
   data() {
     return {
       showIntegration: true,
-      integrations: "",
+      integrations: {
+        name: "",
+      },
     };
   },
   methods: {
@@ -48,7 +49,7 @@ export default {
     addGoal,
   },
   ready() {
-    this.$http.get('http://localhost:3000/integrations').then((response) => {
+    this.$http.get(process.env.API_URL + '/integrations').then((response) => {
       // success callback
       this.integrations = response.body.map(function(i) {
         return _.extend(i, { showIntegration: false })
@@ -63,21 +64,22 @@ export default {
 </script>
 
 <style lang="css" scoped>
-    .page-title {
+  .page-title {
     font-size: 1.8rem;
     color: #587272;
     margin-right: 2%;
     padding-bottom: 2%;
   }
-   .goal-vertical-spacing {
-      margin-top: .75rem;
-    }
 
-    .submitButton {
-      margin-left: 5%;
-    }
+  .goal-vertical-spacing {
+    margin-top: .75rem;
+  }
 
-    .integrationPanel{
-      margin-bottom: .5rem;
-    }
+  .submitButton {
+    margin-left: 5%;
+  }
+
+  .integrationPanel{
+    margin-bottom: .5rem;
+  }
 </style>

src/components/Profile.vue

@@ -42,7 +42,6 @@
 
 <script>
 
-
 export default {
   data() {
     return {
@@ -65,7 +64,7 @@ export default {
     },
     submitProfile() {
       // vue-resource POST of new user data
-      this.$http.put('http://localhost:3000/users', this.profile).then((response) => {
+      this.$http.put(process.env.API_URL + '/users', this.profile).then((response) => {
         // success callback
         this.formDisabled = !this.formDisabled;
         this.success = !this.success;
@@ -74,17 +73,22 @@ export default {
         this.failure = !this.failure;
       });
     },
+      logout() {
+        console.log("hi")
+        localStorage.removeItem('token')
+        this.$router.go('/');
+     }
   },
   created() {
-    this.$http.get('http://localhost:3000/users').then((response) => {
+    this.$http.get(process.env.API_URL + '/users').then((response) => {
       // success callback
       console.log(response);
       this.profileData.email = response.body[0].email;
     }, (response) => {
       // error callback
       this.failure = !this.failure;
     });
-  }
+  },
 };
 </script>
 

src/components/Register.vue

@@ -88,7 +88,7 @@ export default {
   methods: {
 
     registerUser() {
-      this.$http.post('http://localhost:3000/auth/register', this.login).then((response) => {
+      this.$http.post(process.env.API_URL + '/auth/register', this.register).then((response) => {
         // server sends back JWT, we put it in localStorage
         localStorage.setItem('token', response.body.token)
 
@@ -115,7 +115,7 @@ export default {
       });
     },
     loginUser() {
-        this.$http.post('http://localhost:3000/auth/login', this.login).then((response) => {
+        this.$http.post(process.env.API_URL + '/auth/login', this.login).then((response) => {
           // server sends back JWT, we put it in localStorage
 
           localStorage.setItem('token', response.body.token)

src/components/add-goal.vue

@@ -1,27 +1,30 @@
 <template>
   <div>
-    <div class="colorBlock">Type Your {{tempData.name}} Username</div>
+    <div class="colorBlock">Type Your {{integrationName}} Username:</div>
     <input class="input " type="text" v-model="goal.username">
 
     <div class="colorBlock">Choose A Goal</div>
-    <input class="input " type="number" min="{{tempData.min}}" placeholder="{{tempData.name}} requires at least {{tempData.min}} points" v-model="goal.pointGoal">
+    <input class="input " type="number" min="{{tempData.min}}" placeholder="{{integrationName}} requires at least {{tempData.min}} points" v-model="goal.pointGoal">
 
     <div class="colorBlock">Choose Incentive</div>
     <div class="animated fadeIn">
-    <p class="control has-addons has-addons-centered">
-      <input class="input" type="text" placeholder="$5 to $1000" v-model="goal.amount">
-      <a class="button is-active">
-        <strong>Amount</strong>
-      </a>
-    </p>
+      <p class="control has-addons has-addons-centered">
+        <input class="input" type="number" max="1000" placeholder="$5 to $1000" v-model="goal.amount">
+        <a class="button is-active">
+          <strong>Amount</strong>
+        </a>
+      </p>
+    </div>
+    <button class="button is-info is-fullwidth" @click="commit()">Commit</button>
   </div>
-  </div>
-
-  <button class="button is-info is-fullwidth" @click="commit()">Commit</button>
 </template>
 
 <script>
   export default {
+    props: [
+      'integration-name',
+      'integration-short-name',
+    ],
     data() {
       return {
         showIntegration$Input: true,
@@ -35,13 +38,14 @@
         goal: {
           username: '',
           pointGoal: '',
-          amount: 500,
         }
       };
     },
     methods: {
       commit() {
-        this.$http.put('http://localhost:3000/commitments', this.goal).then((response) => {
+        var shortname = this.integrationShortName.toLowerCase();
+        this.$http.post(process.env.API_URL + '/commitments/' + shortname, this.goal)
+        .then((response) => {
           // success callback
           this.success = !this.success;
         }, (response) => {

src/main.js

@@ -24,6 +24,7 @@ const router = new VueRouter();
 
 // get rid of 300ms tap delay
 FastClick.attach(document.body);
+console.log(process.env.API_URL);
 
 router.map({
   '/': {