From a4c2bd92d686e1eada3f04cd0012355389318e4b Mon Sep 17 00:00:00 2001
From: Pratap Mridha <pratapmridha@gmail.com>
Date: Tue, 7 Mar 2023 12:06:52 +0530
Subject: [PATCH] login with google

---
 package.json                         |   3 +-
 src/components/login/Auth.vue        |  53 +++++++++
 src/components/participant/Login.vue | 117 ++++++++++----------
 src/config.js                        |   1 +
 src/mixins/loginWithGoogle.js        |  17 +++
 src/router.js                        |   6 +-
 src/utils/auth0Connection.js         |  10 ++
 src/views/admin/AdminLogin.vue       | 160 ++++++++++++++-------------
 8 files changed, 231 insertions(+), 136 deletions(-)
 create mode 100644 src/components/login/Auth.vue
 create mode 100644 src/mixins/loginWithGoogle.js
 create mode 100644 src/utils/auth0Connection.js

diff --git a/package.json b/package.json
index 245565dc..681c4b0c 100644
--- a/package.json
+++ b/package.json
@@ -56,8 +56,8 @@
     "vue-sidebar-menu": "^4.7.4",
     "vue-stepper": "^1.4.2",
     "vue-sweetalert2": "^5.0.2",
-    "vuedraggable": "^2.24.3",
     "vue-vanilla-datetime-picker": "^1.2.0",
+    "vuedraggable": "^2.24.3",
     "vuejs-paginate": "^2.1.0",
     "vuex": "^3.0.0",
     "watchify": "^4.0.0",
@@ -69,6 +69,7 @@
     "@vue/cli-plugin-unit-mocha": "^3.0.0-rc.10",
     "@vue/cli-service": "^3.0.0-rc.10",
     "@vue/test-utils": "^1.0.0-beta.20",
+    "babel-eslint": "^10.1.0",
     "babel-preset-es2015": "^6.24.1",
     "babelify": "^7.2.0",
     "chai": "^4.1.2",
diff --git a/src/components/login/Auth.vue b/src/components/login/Auth.vue
new file mode 100644
index 00000000..3acd2a7c
--- /dev/null
+++ b/src/components/login/Auth.vue
@@ -0,0 +1,53 @@
+<template></template>
+
+<script>
+
+import config from '../../config';
+export default {
+  name: 'Auth',
+  components: {},
+
+  async mounted() {
+    const routeHash = this.$route.hash;
+    const accessToken = routeHash.split("&")[0].split("=")[1];
+    const authToken = routeHash.split("&")[5].split("=")[1];
+    const payload = {
+      provider: 'Google',
+      accessToken,
+      authToken
+    }
+
+    const resp = await fetch(config.studioServer.BASE_URL + 'api/v1/login', {
+      headers: {
+        "Content-Type": "application/json",
+        "Access-Control-Allow-Origin": "*",
+
+      }
+      , body: JSON.stringify(payload),
+      method: 'POST'
+    })
+
+    const data = await resp.json()
+    if (data.authToken) {
+      localStorage.setItem('authToken', data.authToken)
+      const path = localStorage.getItem('path')
+      if (path) {
+        return this.$router.push(path)
+      } else {
+        return this.$router.push('/admin/dashboard')
+
+      }
+
+    }
+
+
+    this.$router.push({ path: "/" })
+
+  }
+
+};
+
+
+</script>
+
+<style></style>
diff --git a/src/components/participant/Login.vue b/src/components/participant/Login.vue
index 7fe6f382..133745ac 100644
--- a/src/components/participant/Login.vue
+++ b/src/components/participant/Login.vue
@@ -9,7 +9,7 @@
                 Session expired. <a href="#" class="ml-2 alert-link" @click="reloadQR">Click to reload.</a>
               </div>
             </template>
-            <template v-else-if="value && value != ''">
+            <template >
               <b-button  class="btn-login button-theme" :style="buttonThemeCss" @click.prevent="openWalletAfterRecaptcha()">Click To Login
                 <!--<vue-recaptcha
                   ref="recaptcha"
@@ -30,6 +30,7 @@
 <script>
 import config from "../../config";
 import Messages from "../../utils/messages/participants/en";
+import loginWithGoogle from '../../mixins/loginWithGoogle'
 import url from "url";
 export default {
   components: { },
@@ -60,63 +61,65 @@ export default {
     };
   },
   async created() {
-    let baseUrl = this.$config.studioServer.BASE_URL;
-    let websocketUrl = "ws://localhost:3003";
+    localStorage.setItem('path',this.$route.fullPath)
+    // let baseUrl = this.$config.studioServer.BASE_URL;
+    // let websocketUrl = "ws://localhost:3003";
 
-    let parsedUrl = {};
-    try {
-      parsedUrl = url.parse(baseUrl);
+    // let parsedUrl = {};
+    // try {
+    //   parsedUrl = url.parse(baseUrl);
 
-      websocketUrl =
-        parsedUrl.protocol === "https:" ?
-        `wss://${parsedUrl.host}` :
-        `ws://${parsedUrl.host}`;
-    } catch (e) {
-      websocketUrl = "ws://localhost:3003";
-    }
-    if (websocketUrl[websocketUrl.length - 1] == "/") {
-      websocketUrl = websocketUrl.substring(0, websocketUrl.length - 1);
-    }
+    //   websocketUrl =
+    //     parsedUrl.protocol === "https:" ?
+    //     `wss://${parsedUrl.host}` :
+    //     `ws://${parsedUrl.host}`;
+    // } catch (e) {
+    //   websocketUrl = "ws://localhost:3003";
+    // }
+    // if (websocketUrl[websocketUrl.length - 1] == "/") {
+    //   websocketUrl = websocketUrl.substring(0, websocketUrl.length - 1);
+    // }
 
-    this.isLoading = true;
-    var _this = this;
+    // this.isLoading = true;
+    // var _this = this;
 
-    // take it in the env
-    _this.socketMessage = Messages.EVENT.LOGIN.SOCKET_INIT;
-    this.connection = new WebSocket(this.$config.websocketUrl);
-    this.connection.onopen = function() {
-      _this.socketMessage = Messages.EVENT.LOGIN.SOCKET_OPEN;
-    };
+    // // take it in the env
+    // _this.socketMessage = Messages.EVENT.LOGIN.SOCKET_INIT;
+    // this.connection = new WebSocket(this.$config.websocketUrl);
+    // this.connection.onopen = function() {
+    //   _this.socketMessage = Messages.EVENT.LOGIN.SOCKET_OPEN;
+    // };
 
-    this.connection.onmessage = ({ data }) => {
-      let messageData = JSON.parse(data);
-      if (messageData.op == "init") {
-        _this.isLoading = false;
-         messageData.data['provider'] = 'google';
-        _this.value = JSON.stringify(messageData.data);
-        _this.socketMessage = null;
-      } else if (messageData.op == "end") {
-        _this.connection.close();
-        const authorizationToken = messageData.data.hypersign ? messageData.data.hypersign.data.accessToken : messageData.data.token;
+    // this.connection.onmessage = ({ data }) => {
+    //   let messageData = JSON.parse(data);
+    //   if (messageData.op == "init") {
+    //     _this.isLoading = false;
+    //      messageData.data['provider'] = 'google';
+    //     _this.value = JSON.stringify(messageData.data);
+    //     _this.socketMessage = null;
+    //   } else if (messageData.op == "end") {
+    //     _this.connection.close();
+    //     const authorizationToken = messageData.data.hypersign ? messageData.data.hypersign.data.accessToken : messageData.data.token;
 
-        // console.log("Emitting authentoken event")
+    //     // console.log("Emitting authentoken event")
 
-        localStorage.setItem("authToken", authorizationToken);
-        this.$emit("AuthTokenUpdateEvent", authorizationToken);
+    //     localStorage.setItem("authToken", authorizationToken);
+    //     this.$emit("AuthTokenUpdateEvent", authorizationToken);
 
 
-      } else if (messageData.op == "reload") {
-        _this.QRRefresh = true;
-        _this.connection.close(4001, messageData.data.clientId);
-      }
-    };
+    //   } else if (messageData.op == "reload") {
+    //     _this.QRRefresh = true;
+    //     _this.connection.close(4001, messageData.data.clientId);
+    //   }
+    // };
 
-    this.connection.onerror = function(error) {
-      console.log(error);
-      _this.error = true;
-      _this.socketMessage = Messages.EVENT.LOGIN.SOCKET_ERROR;
-    };
+    // this.connection.onerror = function(error) {
+    //   console.log(error);
+    //   _this.error = true;
+    //   _this.socketMessage = Messages.EVENT.LOGIN.SOCKET_ERROR;
+    // };
   },
+  mixins:[loginWithGoogle],
   methods: {
     reloadQR() {
       window.location.reload();
@@ -125,15 +128,17 @@ export default {
       this.$refs.recaptcha.execute()
     },
     openWalletAfterRecaptcha(){
-      if (this.value != "") {
-        this.walletWindow = window.open(
-          `${this.$config.webWalletAddress}/deeplink?url=${this.value}`,
-          "popUpWindow",
-          `height=800,width=400,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes`
-        );
-      } else {
-        // console.log("this value is not")
-      }
+      this.loginWithGoogle()
+
+      // if (this.value != "") {
+      //   this.walletWindow = window.open(
+      //     `${this.$config.webWalletAddress}/deeplink?url=${this.value}`,
+      //     "popUpWindow",
+      //     `height=800,width=400,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes`
+      //   );
+      // } else {
+      //   // console.log("this value is not")
+      // }
     },
     onCaptchaExpired: function() {
       // console.log("Captcha expired");
diff --git a/src/config.js b/src/config.js
index d6f65c39..b1fd7064 100644
--- a/src/config.js
+++ b/src/config.js
@@ -21,6 +21,7 @@ const config = {
     mobileWalletAddress: urlSanitizer(process.env.VUE_APP_MOBILEWALLET_URL, false),
     websocketUrl: urlSanitizer(process.env.VUE_APP_SERVER_WEBSOCKET_URL, true),
     auth0Domain: urlSanitizer(process.env.VUE_APP_AUTH0_DOMAIN, false),
+    auth0LOGINCLIENTID:process.env.VUE_APP_AUTH0_LOGIN_CLIENT_ID,
     auth0ClinetId: process.env.VUE_APP_AUTH0_CLIENT_ID,
     telegramBotId: process.env.VUE_APP_TELEGRAM_BOT_ID,
     kommunicateAppId: process.env.VUE_APP_KOMMINICATE_APP_ID,
diff --git a/src/mixins/loginWithGoogle.js b/src/mixins/loginWithGoogle.js
new file mode 100644
index 00000000..ee1934ee
--- /dev/null
+++ b/src/mixins/loginWithGoogle.js
@@ -0,0 +1,17 @@
+import webAuth from '../utils/auth0Connection';
+
+export default{
+    methods: {
+        loginWithGoogle(){
+            webAuth.authorize(
+                {
+                  connection: "google-oauth2",
+                  redirectUri: window.location.origin + "/auth/google?",
+                  
+
+                });
+        }
+    },
+
+
+}
\ No newline at end of file
diff --git a/src/router.js b/src/router.js
index db6a1353..21d4ba8e 100644
--- a/src/router.js
+++ b/src/router.js
@@ -3,7 +3,7 @@ import Router from "vue-router";
 import config from "./config";
 import fetch from "node-fetch";
 import eventBus from "./eventBus";
-
+import Auth from './components/login/Auth'
 Vue.use(Router);
 
 const router = new Router({
@@ -50,6 +50,10 @@ const router = new Router({
             component: () =>
                 import ( /* webpackChunkName: "adminLogin" */ "./views/Invitation.vue"),
         },
+        {
+            path:'/auth/google',
+            component:Auth
+        },
         {
             path: "/admin/login",
             name: "AdminLogin",
diff --git a/src/utils/auth0Connection.js b/src/utils/auth0Connection.js
new file mode 100644
index 00000000..e64854a2
--- /dev/null
+++ b/src/utils/auth0Connection.js
@@ -0,0 +1,10 @@
+import auth0 from "auth0-js";
+import config from '../config'
+const newWebAuth = new auth0.WebAuth({
+    domain:  config.auth0Domain,
+    clientID:  config.auth0LOGINCLIENTID,
+    responseType: "token id_token",
+    scope: "openid profile email",
+})
+
+export default newWebAuth
\ No newline at end of file
diff --git a/src/views/admin/AdminLogin.vue b/src/views/admin/AdminLogin.vue
index 9cfd2381..0c9185b5 100644
--- a/src/views/admin/AdminLogin.vue
+++ b/src/views/admin/AdminLogin.vue
@@ -120,11 +120,12 @@ h5 span {
 </style>
 <template>
   <!-- <div class="row" style="margin-left: 35%;"> -->
-  <div style="justify-content: center; padding-top:3%">
-    <img class="align-center" style="margin-bottom: 20px" height="60px" src="../../assets/Fyre_Gold_Black.png" />
+  <div style="justify-content: center; padding-top:10%">
     <b-card no-body class="loginContent event-card ">
+      <img class="align-center" style="margin-bottom: 20px ; padding-top: 10px;" height="70px" src="../../assets/Fyre_Gold_Black.png" />
+
       <loading :active.sync="isLoading" :can-cancel="true" :is-full-page="fullPage"></loading>
-      <h4>Admin Login</h4>
+      <!-- <h4>Admin Login</h4> -->
       <div class="row" style="margin-top:3%">
         <div v-if="QRRefresh" class="QRRefresh">
           <i @click="reloadQR" class="fas fa-redo" style="font-size: xx-large; color: gray;"></i>
@@ -136,23 +137,23 @@ h5 span {
           <div class="form-group">
             <vue-qr v-if="qr_data != ''" margin="1" :text="qr_data" :size="200" :logoSrc="src2"
               logoBackgroundColor="white" logoCornerRadius="2"></vue-qr>
-            <label style="font-size:small; color:grey; margin-top:1%">Scan QR code using Hypersign Mobile App</label>
+            <!-- <label style="font-size:small; color:grey; margin-top:1%">Scan QR code using Hypersign Mobile App</label> -->
             <div>
               <!-- <p style="font-size:small;"> Don’t have the app yet? <a href="#">Get it now</a></p> -->
-              <span style="font-size: small; color:grey; padding: 10px">
+              <!-- <span style="font-size: small; color:grey; padding: 10px">
                 Get the app on
                 <a href="https://play.google.com/store/apps/details?id=com.hypersign.cordova"
                   target="__blank">Android</a>
                 or
                 <a :href="$config.webWalletAddress" target="__blank">Web</a>
-              </span>
+              </span> -->
             </div>
           </div>
 
-          <h5><span>OR</span></h5>
+          <!-- <h5><span>OR</span></h5> -->
 
           <div class="mb-2 ">
-            <a v-if="this.value != ''" class="btn btn-hypersign  button-theme" :style="buttonThemeCss"  href="#" @click.prevent="openWallet()">
+            <a class="btn btn-hypersign  button-theme" :style="buttonThemeCss"  href="#" @click.prevent="openWallet()">
               <div style="font-size: smaller; padding: 10px;">
                 Click To Login
               </div>
@@ -174,6 +175,7 @@ import url from "url";
 import notificationMixins from "../../mixins/notificationMixins";
 import localStorageMixin from "../../mixins/localStorageMixin";
 import config from "../../config"
+import loginWithGoogle from '../../mixins/loginWithGoogle'
 export default {
   name: "Login",
   components: {
@@ -215,75 +217,76 @@ export default {
   },
   created() {
     localStorage.clear();
+    localStorage.setItem('path','/admin/dashboard')
      document.title = `${config.appName} - Login`;
     // console.log("Beofer creating websoceket connection");
-    let baseUrl = this.$config.studioServer.BASE_URL;
-    let websocketUrl = "ws://localhost:3003";
+    // let baseUrl = this.$config.studioServer.BASE_URL;
+    // let websocketUrl = "ws://localhost:3003";
 
-    let parsedUrl = {};
-    try {
-      parsedUrl = url.parse(baseUrl);
-      // console.log(parsedUrl);
-      websocketUrl =
-        parsedUrl.protocol === "https:"
-          ? `wss://${parsedUrl.host}`
-          : `ws://${parsedUrl.host}`;
-      // console.log(websocketUrl);
-    } catch (e) {
-      websocketUrl = "ws://localhost:3003";
-    }
-    if (websocketUrl[websocketUrl.length - 1] == "/") {
-      websocketUrl = websocketUrl.substring(0, websocketUrl.length - 1);
-    }
-    // console.log(websocketUrl);
+    // let parsedUrl = {};
+    // try {
+    //   parsedUrl = url.parse(baseUrl);
+    //   // console.log(parsedUrl);
+    //   websocketUrl =
+    //     parsedUrl.protocol === "https:"
+    //       ? `wss://${parsedUrl.host}`
+    //       : `ws://${parsedUrl.host}`;
+    //   // console.log(websocketUrl);
+    // } catch (e) {
+    //   websocketUrl = "ws://localhost:3003";
+    // }
+    // if (websocketUrl[websocketUrl.length - 1] == "/") {
+    //   websocketUrl = websocketUrl.substring(0, websocketUrl.length - 1);
+    // }
+    // // console.log(websocketUrl);
 
-    // take it in the env
-    this.connection = new WebSocket(this.$config.websocketUrl);
-    this.connection.onopen = function() {
-      console.log("Socket connection is open");
-    };
+    // // take it in the env
+    // this.connection = new WebSocket(this.$config.websocketUrl);
+    // this.connection.onopen = function() {
+    //   console.log("Socket connection is open");
+    // };
 
-    this.isLoading = true;
-    var _this = this;
+    // this.isLoading = true;
+    // var _this = this;
 
-    this.connection.onmessage = function({ data }) {
-      // console.log("Websocket connection messag receieved ", data);
-      let messageData = JSON.parse(data);
-      // console.log(messageData);
-      if (messageData.op == "init") {
-        _this.isLoading = false;
-        /// Sending provider from here........
-        messageData.data['provider'] = 'google';
-        _this.value = JSON.stringify(messageData.data);
-        _this.qr_data=`${_this.$config.webWalletAddress}/deeplink?url=${_this.value}`
-      } else if (messageData.op == "end") {
-        _this.connection.close();
-        const authorizationToken = messageData.data.hypersign ? messageData.data.hypersign.data.accessToken : messageData.data.token;
-        // console.log(authorizationToken);
-        localStorage.setItem("authToken", authorizationToken);
+    // this.connection.onmessage = function({ data }) {
+    //   // console.log("Websocket connection messag receieved ", data);
+    //   let messageData = JSON.parse(data);
+    //   // console.log(messageData);
+    //   if (messageData.op == "init") {
+    //     _this.isLoading = false;
+    //     /// Sending provider from here........
+    //     messageData.data['provider'] = 'google';
+    //     _this.value = JSON.stringify(messageData.data);
+    //     _this.qr_data=`${_this.$config.webWalletAddress}/deeplink?url=${_this.value}`
+    //   } else if (messageData.op == "end") {
+    //     _this.connection.close();
+    //     const authorizationToken = messageData.data.hypersign ? messageData.data.hypersign.data.accessToken : messageData.data.token;
+    //     // console.log(authorizationToken);
+    //     localStorage.setItem("authToken", authorizationToken);
 
-        if (localStorage.getItem("authToken") != null) {
-          if (this.walletWindow) {
-            this.walletWindow.close();
-          }
-          if (_this.$route.params.nextUrl != null) {
-            _this.$router.push(_this.$route.params.nextUrl);
-          } else {
-            // console.log(_this.$router);
-            window.location.href =
-              window.location.origin + "/admin/dashboard";
-            // _this.$router.push("dashboard");
-          }
-        }
-      } else if (messageData.op == "reload") {
-        // console.log("Timeout for clientId: " + messageData.data.clientId)
-        _this.QRRefresh = true;
-        _this.connection.close(4001, messageData.data.clientId);
-      }
-    };
-    this.connection.onerror = function(error) {
-      console.log("Websocket connection error ", error);
-    };
+    //     if (localStorage.getItem("authToken") != null) {
+    //       if (this.walletWindow) {
+    //         this.walletWindow.close();
+    //       }
+    //       if (_this.$route.params.nextUrl != null) {
+    //         _this.$router.push(_this.$route.params.nextUrl);
+    //       } else {
+    //         // console.log(_this.$router);
+    //         window.location.href =
+    //           window.location.origin + "/admin/dashboard";
+    //         // _this.$router.push("dashboard");
+    //       }
+    //     }
+    //   } else if (messageData.op == "reload") {
+    //     // console.log("Timeout for clientId: " + messageData.data.clientId)
+    //     _this.QRRefresh = true;
+    //     _this.connection.close(4001, messageData.data.clientId);
+    //    }
+    // };
+    // this.connection.onerror = function(error) {
+    //   console.log("Websocket connection error ", error);
+    // };
   },
   mounted() {
     this.clean();
@@ -293,13 +296,14 @@ export default {
       window.location.reload()
     },
     openWallet() {
-      if (this.value != "") {
-        this.walletWindow = window.open(
-          `${this.$config.webWalletAddress}/deeplink?url=${this.value}`,
-          "popUpWindow",
-          `height=800,width=400,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes`
-        );
-      }
+      this.loginWithGoogle()
+      // if (this.value != "") {
+      //   this.walletWindow = window.open(
+      //     `${this.$config.webWalletAddress}/deeplink?url=${this.value}`,
+      //     "popUpWindow",
+      //     `height=800,width=400,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes`
+      //   );
+      // }
     },
     push(path) {
       this.$router.push(path);
@@ -309,6 +313,6 @@ export default {
       this.$router.push(`${id}`);
     },
   },
-  mixins: [notificationMixins, localStorageMixin],
+  mixins: [notificationMixins, localStorageMixin,loginWithGoogle],
 };
 </script>