YACS-RCOS · Kagiri2 · Oct 3, 2023 · Oct 10, 2023 · Oct 13, 2023 · Oct 14, 2023
diff --git a/package.json b/package.json
@@ -13,5 +13,9 @@
   "devDependencies": {
     "cross-env": "^7.0.2",
     "npm-run-all": "^4.1.5"
+  },
+  "dependencies": {
+    "date-fns": "^2.30.0",
+    "googleapis": "^127.0.0"
   }
 }
diff --git a/src/web/public/index.html b/src/web/public/index.html
@@ -4,6 +4,8 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="favicon.ico">
     <script src="./ics.min.js" type="application/javascript"></script>
+    <script src="https://apis.google.com/js/api.js" type="text/javascript"></script>
+    <script src="https://accounts.google.com/gsi/client" type="text/javascript"></script>
     <title>YACS</title>
   <link rel="apple-touch-icon" href="img/apple-icon-180.png">
 
@@ -36,6 +38,8 @@
 <link rel="apple-touch-startup-image" href="img/apple-splash-640-1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
 <link rel="apple-touch-startup-image" href="img/apple-splash-1136-640.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
 
+
+
 </head>
   <body>
     <noscript>

diff --git a/src/web/src/components/Header.vue b/src/web/src/components/Header.vue
@@ -277,4 +277,4 @@ export default {
 .drop-down-item {
   background: hsl(211, 100%, 60%) !important;
 }
-</style>
+</style>
diff --git a/src/web/src/components/Login.vue b/src/web/src/components/Login.vue
@@ -20,6 +20,7 @@
       ></b-form-input>
     </b-form-group>
     <b-button type="submit" variant="primary">Submit</b-button>
+    <b-button @click="initiateGoogleOneTap" variant="primary" style="margin-left: 10px;">Login with Google</b-button>
     <div>
       <b-button-group size="md">
         <button
@@ -67,8 +68,9 @@ export default {
   },
   methods: {
     async onSubmit(evt) {
-      evt.preventDefault();
-
+      if (evt) {
+        evt.preventDefault();
+      }
       try {
         await this.$store.dispatch(userTypes.actions.LOGIN, this.form);
 
@@ -88,6 +90,37 @@ export default {
     onSignUp() {
       this.$refs["signup-modal"].hide();
     },
+    initiateGoogleOneTap() {
+        window.google.accounts.id.initialize({
+            client_id: "833663758121-ff8hq6a8ibujhv969laf6h9edc000ad2.apps.googleusercontent.com",
+            callback: this.handleGoogleResponse
+        });
+
+        window.google.accounts.id.prompt(); // This triggers the One Tap UI
+    },
+
+    async handleGoogleResponse(response) {
+      // Extract user information from the ID token
+      const idToken = response.credential;
+      const decodedData = this.decodeIdToken(idToken);
+
+      // Set the required form field values
+
+      this.form.email = decodedData.email;
+      this.form.password = decodedData.name+decodedData.email;
+
+      // Automatically create the account
+      await this.onSubmit();
+    },
+
+    decodeIdToken(token) {
+      const base64Url = token.split('.')[1];
+      const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+      const jsonData = decodeURIComponent(atob(base64).split('').map(function(c) {
+          return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+      }).join(''));
+      return JSON.parse(jsonData);
+    },
     onReset(evt) {
       evt.preventDefault();
       // Reset our form values
@@ -109,4 +142,4 @@ export default {
 };
 </script>
 
-<style></style>
+<style></style>
diff --git a/src/web/src/components/SignUp.vue b/src/web/src/components/SignUp.vue
@@ -57,13 +57,17 @@
       <button type="submit" class="btn-primary btn w-100">
         Finish Sign Up!
       </button>
+      <button @click="initiateGoogleOneTap" class="btn-primary btn w-100 mt-2">
+        Sign Up with Google
+      </button>
     </b-form>
   </div>
 </template>
 
 <script>
 import { signup } from "@/services/UserService";
 import { userTypes } from "../store/modules/user";
+
 export default {
   name: "SignUp",
   data() {
@@ -115,6 +119,41 @@ export default {
 
       this.$emit("submit");
     },
+    initiateGoogleOneTap() {
+        window.google.accounts.id.initialize({
+            client_id: "833663758121-ff8hq6a8ibujhv969laf6h9edc000ad2.apps.googleusercontent.com",
+            callback: this.handleGoogleResponse
+        });
+
+        window.google.accounts.id.prompt(); // This triggers the One Tap UI
+    },
+
+    async handleGoogleResponse(response) {
+      // Extract user information from the ID token
+      const idToken = response.credential;
+      const decodedData = this.decodeIdToken(idToken);
+
+      // Set the required form field values
+      this.form.name = decodedData.name;
+      this.form.email = decodedData.email;
+      // Note: Ideally, you shouldn't set a password for users signing in with Google.
+      // For this demonstration, I'm using the ID token, but consider changing this approach.
+      this.form.password = (decodedData.name+decodedData.email).replace(/\s+/g, '');
+      this.form.degree = "Undergraduate";
+      this.form.major = "CSCI";
+
+      // Automatically create the account
+      await this.onSubmit();
+    },
+
+    decodeIdToken(token) {
+      const base64Url = token.split('.')[1];
+      const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+      const jsonData = decodeURIComponent(atob(base64).split('').map(function(c) {
+          return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+      }).join(''));
+      return JSON.parse(jsonData);
+    }
   },
 };
 </script>
diff --git a/src/web/src/main.js b/src/web/src/main.js
@@ -12,6 +12,7 @@ import router from "./routes";
 import VueCookies from "vue-cookies";
 import Meta from "vue-meta";
 
+
 Vue.config.productionTip = false;
 
 Vue.use(VueRouter);
@@ -20,6 +21,8 @@ Vue.use(Meta);
 
 Vue.$cookies.config("7d");
 
+
+
 new Vue({
   render: (h) => h(App),
   router,