From ee84081196a3cf641b82b605db4d127d215ede92 Mon Sep 17 00:00:00 2001
From: Saeed Dadkhah <saeed@zilliqa.com>
Date: Fri, 31 May 2024 16:13:33 +0330
Subject: [PATCH] Fix login

---
 src/components/NearLogin.vue | 14 ++++++++++++--
 src/components/PlayGame.vue  | 22 ++++++++++++++++++++--
 src/pages/IndexPage.vue      |  6 +-----
 src/pages/LoginPage.vue      |  4 ++--
 4 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/src/components/NearLogin.vue b/src/components/NearLogin.vue
index 7a71c2c..97ae4fa 100644
--- a/src/components/NearLogin.vue
+++ b/src/components/NearLogin.vue
@@ -1,8 +1,8 @@
 <template>
   <wallet-ctx-provider-vue network="testnet">
     <near-login-vue
-      appId="4a69641790ae9b710c29ee99edb2c8560812e7752bb392cdf001ee0002fa4647"
-      rpcBaseUrl="http://localhost:2528"
+      :appId="appId"
+      :rpcBaseUrl="rpcBaseUrl"
       :successRedirect="success"
       :navigateBack="auth"
     >
@@ -23,6 +23,16 @@ export default {
     WalletCtxProviderVue: applyPureReactInVue(WalletSelectorContextProvider),
     NearLoginVue: applyPureReactInVue(NearLogin)
   },
+  props: {
+    appId: {
+      type: String,
+      required: true
+    },
+    rpcBaseUrl: {
+      type: String,
+      required: true
+    }
+  },
   setup() {
     const router = useRouter()
     function success() {
diff --git a/src/components/PlayGame.vue b/src/components/PlayGame.vue
index 141c777..d181511 100644
--- a/src/components/PlayGame.vue
+++ b/src/components/PlayGame.vue
@@ -7,9 +7,20 @@
       v-model="applicationId"
       class="q-mr-xs bg-white"
     />
-    <div class="row q-pa-sm">
+    <div class="row q-mt-sm">
       <q-input dense outlined label="Node URL" v-model="nodeUrl" class="col q-mr-xs bg-white" />
-      <q-btn color="primary" flat no-caps class="q-mr-xs" @click="connectToNode">Connect</q-btn>
+      <q-btn
+        v-if="isAuthenticated()"
+        color="primary"
+        flat
+        no-caps
+        class="q-mr-xs"
+        @click="connectToNode"
+        >Connect</q-btn
+      >
+      <q-btn v-else color="orange" no-caps class="q-mr-xs" @click="navigateToLoginPage"
+        >Login</q-btn
+      >
     </div>
     <q-separator />
     <div class="q-ml-md row items-center justify-center">
@@ -78,6 +89,8 @@
 import { ref } from 'vue'
 import { Game } from '../game'
 import GameEventListener from '../ws'
+import { isAuthenticated } from '../auth'
+import { useRouter } from 'vue-router'
 
 const nodeUrl = ref('http://localhost:2428')
 const applicationId = ref('4a69641790ae9b710c29ee99edb2c8560812e7752bb392cdf001ee0002fa4647')
@@ -91,6 +104,7 @@ const opponentCommited = ref(false)
 const opponentRevealed = ref(false)
 const players = ref({})
 const winnerIdx = ref(null)
+const router = useRouter()
 
 const connectToNode = async () => {
   game = new Game(nodeUrl.value, applicationId.value)
@@ -155,4 +169,8 @@ const reveal = async () => {
     console.log(error)
   }
 }
+
+const navigateToLoginPage = () => {
+  router.push({ name: 'login', query: { appId: applicationId.value, rpcUrl: nodeUrl.value } })
+}
 </script>
diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
index 0e67dbc..fca8b6a 100644
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -4,10 +4,7 @@
       class="row bg-grey-1 items-center justify-center"
       style="width: 900px; border: 1px solid #ababab; border-radius: 2px"
     >
-      <play-game v-if="isAuthenticated()" />
-      <div v-else class="col row justify-center">
-        <q-btn dense no-caps to="/login" color="orange-8" size="xl">Login</q-btn>
-      </div>
+      <play-game />
       <q-separator vertical />
       <div class="col">
         <leader-board />
@@ -19,7 +16,6 @@
 <script setup>
 import LeaderBoard from '../components/LeaderBoard.vue'
 import PlayGame from '../components/PlayGame.vue'
-import { isAuthenticated } from '../auth'
 
 defineOptions({
   name: 'IndexPage'
diff --git a/src/pages/LoginPage.vue b/src/pages/LoginPage.vue
index 5707c7f..c58388f 100644
--- a/src/pages/LoginPage.vue
+++ b/src/pages/LoginPage.vue
@@ -1,9 +1,9 @@
 <script setup>
-import NearLogin from "../components/NearLogin.vue";
+import NearLogin from '../components/NearLogin.vue'
 </script>
 
 <template>
   <main>
-    <NearLogin />
+    <NearLogin :appId="$route.query.appId" :rpcBaseUrl="$route.query.rpcUrl" />
   </main>
 </template>