diff --git a/src/web/package.json b/src/web/package.json
index 6dfb7c6d3..85ce4b5d9 100644
--- a/src/web/package.json
+++ b/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"
},
diff --git a/src/web/src/components/Login.vue b/src/web/src/components/Login.vue
index 51b2db7cf..b7e908bda 100644
--- a/src/web/src/components/Login.vue
+++ b/src/web/src/components/Login.vue
@@ -20,6 +20,11 @@
>
Submit
+
+
+
+ Login with Google
+
+
+
@@ -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");
- },
+ }
},
};
-
+
\ No newline at end of file
diff --git a/src/web/src/main.js b/src/web/src/main.js
index be3625bbd..536aaf26b 100644
--- a/src/web/src/main.js
+++ b/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,
diff --git a/src/web/src/pages/NewCourseScheduler.vue b/src/web/src/pages/NewCourseScheduler.vue
index bfeed2e73..e20d7b330 100644
--- a/src/web/src/pages/NewCourseScheduler.vue
+++ b/src/web/src/pages/NewCourseScheduler.vue
@@ -116,7 +116,7 @@
>
Prev
-
+
@@ -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;