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;