added google auth

src/web/package.json

@@ -29,6 +29,7 @@
     "vue-html2canvas": "0.0.4",
     "vue-meta": "^2.4.0",
     "vue-router": "^3.5.1",
+    "vue-google-oauth2": "latest",
     "vue-virtual-scroller": "^1.0.10",
     "vuex": "^3.6.2"
   },

src/web/src/components/Login.vue

@@ -20,6 +20,11 @@
       ></b-form-input>
     </b-form-group>
     <b-button type="submit" variant="primary">Submit</b-button>
+
+    <!-- New Google Login Button -->
+    <b-button @click="authenticateWithGoogle" variant="primary">
+      Login with Google
+    </b-button>
     <div>
       <b-button-group size="md">
         <button
@@ -66,6 +71,26 @@ export default {
     };
   },
   methods: {
+    // New Google authentication method
+    async authenticateWithGoogle() {
+      try {
+        const googleUser = await this.$gAuth.signIn();
+        const token = googleUser.getAuthResponse().id_token;
+        const profile = googleUser.getBasicProfile();
+
+        this.form.email = profile.getEmail();
+        // You might want to send the token to your server to verify its authenticity and then authenticate the user. 
+        // For now, I'll just run the onSubmit function to give an idea.
+        await this.onSubmit();
+      } catch (error) {
+        this.$bvToast.toast("Google authentication failed!", {
+          title: "Login failed!",
+          variant: "danger",
+          noAutoHide: true,
+        });
+      }
+    },
+  
     async onSubmit(evt) {
       evt.preventDefault();
 

src/web/src/components/SignUp.vue

@@ -57,6 +57,10 @@
       <button type="submit" class="btn-primary btn w-100">
         Finish Sign Up!
       </button>
+      <!-- Added Google Signup Button -->
+      <button @click="authenticateWithGoogle" class="btn-primary btn w-100 mt-2">
+        Sign Up with Google
+      </button>
     </b-form>
   </div>
 </template>
@@ -99,22 +103,23 @@ export default {
         this.$emit("submit");
         return;
       }
-
+    }, // <-- added closing brace for onSubmit method
+    async authenticateWithGoogle() {
       try {
-        await this.$store.dispatch(userTypes.actions.LOGIN, {
-          email: this.form["email"],
-          password: this.form["password"],
-        });
-      } catch (err) {
-        this.$bvToast.toast(err, {
-          title: "Login failed!",
+        const googleUser = await this.$gAuth.signIn();
+        const token = googleUser.getAuthResponse().id_token;
+        const profile = googleUser.getBasicProfile();
+
+        this.form.email = profile.getEmail();
+        await this.onSubmit();
+      } catch (error) {
+        this.$bvToast.toast("Google authentication failed!", {
+          title: "Signup failed!",
           variant: "danger",
           noAutoHide: true,
         });
       }
-
-      this.$emit("submit");
-    },
+    }
   },
 };
-</script>
+</script>

src/web/src/main.js

@@ -11,6 +11,7 @@ import VueRouter from "vue-router";
 import router from "./routes";
 import VueCookies from "vue-cookies";
 import Meta from "vue-meta";
+import GAuth from 'vue-google-oauth2'
 
 Vue.config.productionTip = false;
 
@@ -20,6 +21,13 @@ Vue.use(Meta);
 
 Vue.$cookies.config("7d");
 
+const gauthOption = {
+  clientId: '302186506311-fi566mm7fd80opbcj64vfn4atg9dom5g.apps.googleusercontent.com',
+  scope: 'profile email https://www.googleapis.com/auth/calendar',
+  prompt: 'select_account'
+}
+Vue.use(GAuth, gauthOption)
+
 new Vue({
   render: (h) => h(App),
   router,

src/web/src/pages/NewCourseScheduler.vue

@@ -116,7 +116,7 @@
                 >
                   Prev
                 </b-button>
-                <button @click="exportToGoogleCalendar">Export to Google Calendar</button>
+                <button @click="addToGoogleCalendar">Export to Google Calendar</button>
               </b-col>
               <b-col cols="8" class="m-2 text-center">
                 <span v-if="scheduleDisplayMessage === 2">
@@ -251,7 +251,7 @@
 
 import { mapGetters, mapState } from "vuex";
 
-import ics from 'ics';
+
 import NotificationsMixin from "@/mixins/NotificationsMixin";
 import ScheduleComponent from "@/components/Schedule";
 import SelectedCoursesComponent from "@/components/SelectedCourses";
@@ -328,40 +328,40 @@ export default {
     };
   },
   methods: {
-    exportToGoogleCalendar() {
-      // Create an array of events that represent the schedule
-      const events = [
-        {
-          title: 'Class 1',
-          start: [2022, 9, 1, 10, 0],
-          end: [2022, 9, 1, 12, 0],
-          description: 'This is class 1',
-          location: 'Room 101',
-        },
-        {
-          title: 'Class 2',
-          start: [2022, 9, 3, 10, 0],
-          end: [2022, 9, 3, 12, 0],
-          description: 'This is class 2',
-          location: 'Room 102',
-        },
-      ];
 
-      // Generate an iCalendar file using the events array
-      ics.createEvents(events, (error, value) => {
-        if (error) {
-          console.error(error);
-          return;
-        }
+    async authenticateWithGoogle() {
+    return new Promise((resolve, reject) => {
+        this.$gAuth.signIn().then(
+            googleUser => {
+                const token = googleUser.getAuthResponse().access_token;
+                resolve(token);
+            },
+            error => {
+                console.error("Failed to authenticate with Google: ", error);
+                reject(error);
+            }
+        );
+    });
+},
+
+    async addToGoogleCalendar() {
+        const token = await this.authenticateWithGoogle(); // You'll need to implement this
+        const calendarEvent = this.formatScheduleForGoogleCalendar(); // You'll need to implement this
+
+        const response = await fetch('https://www.googleapis.com/calendar/v3/calendars/primary/events', {
+            method: 'POST',
+            headers: {
+                'Authorization': `Bearer ${token}`,
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(calendarEvent),
+        });
 
-        // Create a link that the user can click to download the iCalendar file
-        const blob = new Blob([value], { type: 'text/calendar;charset=utf-8' });
-        const url = URL.createObjectURL(blob);
-        const link = document.createElement('a');
-        link.href = url;
-        link.download = 'schedule.ics';
-        link.click();
-      });
+        if(response.ok) {
+            alert("Schedule added to Google Calendar!");
+        } else {
+            alert("Failed to add to Google Calendar.");
+        }
     },
     toggleNav() {
       this.isNavOpen = !this.isNavOpen;