Banner ui (#231)

* Bright colors to stand out

* Cookie opt-out and explicit/implicit opt-in

* Cookies WIP

* Don't dismiss cookie banner when you alter road

* Cookie banner stay away

* Add allowCookies again

* Remove settingauthcookies

* !==

Author: georgiashay

package-lock.json

@@ -36,6 +36,7 @@
     "vue-cookies": "^1.5.12",
     "vue-router": "^3.0.4",
     "vue-scrolling-table": "^0.2.2",
+    "vue-timers": "^2.0.2",
     "vuetify": "^1.5.12"
   },
   "devDependencies": {

package.json

@@ -226,9 +226,9 @@
       @click.native="$event.stopPropagation()"
     />
 
-    <v-footer v-if="!dismissedOld || (!cookiesAllowed && !dismissedCookies)" fixed class="py-1 px-2" style="height: unset;">
+    <v-footer v-if="!dismissedOld || !dismissedCookies" fixed style="height: unset;">
       <v-layout column>
-        <v-flex v-if="!dismissedOld">
+        <v-flex v-if="!dismissedOld" class = "lime accent-1 py-1 px-2">
           <v-layout row align-center>
             <v-flex>
               Looking for the old courseroad?  Visit the old website <a target="_blank" href="https://courseroad.mit.edu/old">here</a> and export your roads!
@@ -240,20 +240,22 @@
             </v-flex>
           </v-layout>
         </v-flex>
-        <v-divider v-if="!dismissedOld && !cookiesAllowed && !dismissedCookies" class="ma-1" />
-        <v-flex v-if="!cookiesAllowed && !dismissedCookies">
+        <v-divider v-if="!dismissedOld && !dismissedCookies" />
+        <v-flex v-if="!dismissedCookies" class = "lime accent-3 py-1 px-2">
           <v-layout row align-center>
             <v-flex>
-              This site uses cookies and session storage to store your data and login token.  Click OK to consent to the use of cookies.
+              This website uses cookies and session storage to store your data and login token, and important features like saving roads will not work without them.
+              <span v-if = "cookiesAllowed === undefined">By continuing to use this website or clicking "I accept", you consent to the use of cookies.</span>
+              <span v-if = "cookiesAllowed !== undefined">By continuing to use this website, you have consented to the use of cookies, but may opt out by clicking the button to the right.</span>
             </v-flex>
             <v-flex shrink>
-              <v-btn small depressed color="primary" class="ma-1" @click="allowCookies">
-                OK
+              <v-btn small depressed color="primary" class="ma-1" @click="allowCookies();  dismissCookies();">
+                I accept
               </v-btn>
             </v-flex>
             <v-flex shrink>
-              <v-btn small icon flat class="ma-1" @click="dismissedCookies = true;">
-                <v-icon>close</v-icon>
+              <v-btn small depressed class = "ma-1" @click="disallowCookies">
+                Opt out
               </v-btn>
             </v-flex>
           </v-layout>
@@ -314,7 +316,7 @@ export default {
       saveWarnings: [],
       conflictDialog: false,
       conflictInfo: undefined,
-      cookiesAllowed: false,
+      cookiesAllowed: undefined,
       searchInput: '',
       showSearch: false,
       classInfoStack: [],
@@ -373,6 +375,8 @@ export default {
     roads: {
       handler: function (newRoads, oldRoads) {
         this.justLoaded = false;
+        this.cookiesAllowed = true;
+        this.$refs.authcomponent.allowCookies();
         if (this.activeRoad !== '') {
           this.updateFulfillment();
         }
@@ -433,6 +437,10 @@ export default {
       this.dismissedOld = JSON.parse(this.$cookies.get('dismissedOld'));
       this.cookiesAllowed = true;
     }
+    if(this.$cookies.isKey('dismissedCookies')) {
+      this.dismissedCookies = JSON.parse(this.$cookies.get('dismissedCookies'));
+      this.cookiesAllowed = true;
+    }
 
     // developer.mit.edu version commented out because I couldn't get it to work. filed an issue to resolve it.
     // axios.get('https://mit-course-catalog-v2.cloudhub.io/coursecatalog/v2/terms/2018FA/subjects', {headers:{client_id:'01fce9ed7f9d4d26939a68a4126add9b', client_secret:'D4ce51aA6A32421DA9AddF4188b93255'}})
@@ -566,6 +574,14 @@ export default {
       this.cookiesAllowed = true;
       this.$cookies.set('dismissedOld', this.dismissedOld);
     },
+    disallowCookies: function() {
+      this.cookiesAllowed = false;
+      this.dismissCookies();
+      var cookieKeys = this.$cookies.keys();
+      for(var k = 0; k < cookieKeys.length; k++) {
+      	this.$cookies.remove(cookieKeys[k]);
+      }
+    },
     updateLocal: function (id) {
       this.$refs.authcomponent.updateLocal(id);
     },
@@ -697,6 +713,12 @@ export default {
         this.$cookies.set('dismissedOld', true);
       }
     },
+    dismissCookies: function() {
+      this.dismissedCookies = true;
+      if(this.cookiesAllowed) {
+        this.$cookies.set('dismissedCookies', true);
+      }
+    },
     clickSearch: function(event) {
       this.searchOpen = !this.searchOpen;
     },