Merge pull request #285 from DecentralCardGame/283-signup-cannot-be-c…

…licked-when-authenticating-a-new-account 283 signup cannot be clicked when authenticating a new account
DecentralCardGame · Mar 18, 2024 · d806cf1 · d806cf1
2 parents 0ff352a + 8b28757
commit d806cf1
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 66 deletions.
diff --git a/.env.development b/.env.development
@@ -16,6 +16,6 @@ NODE_VERSION=v18.17.1
 #VITE_WS_TENDERMINT_FALLBACK=https://cardchain2.crowdcontrol.network/tendermint/
 #VITE_APP_FAUCET_FALLBACK=https://cardchain2.crowdcontrol.network/faucet/claimTokens
 
-VITE_API_COSMOS="http://lxgr.xyz:1317"
-VITE_WS_TENDERMINT="http://lxgr.xyz:26657"
-VITE_APP_FAUCET="http://lxgr.xyz:4500/claimTokens"
+#VITE_API_COSMOS="http://lxgr.xyz:1317"
+#VITE_WS_TENDERMINT="http://lxgr.xyz:26657"
+#VITE_APP_FAUCET="http://lxgr.xyz:4500/claimTokens"
diff --git a/src/components/elements/LoginComponent.vue → ...ponents/elements/Login/LoginComponent.vue b/src/components/elements/LoginComponent.vue → ...ponents/elements/Login/LoginComponent.vue
diff --git a/src/components/elements/Login/SignupComponent.vue b/src/components/elements/Login/SignupComponent.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <BaseCCButton v-if="!isSignUpRequired" @click="login">
+      Login with keplr
+    </BaseCCButton>
+    <div v-else>
+      <div v-if="isKeplrAvailable" class="flex flex-col justify-center">
+        <p class="p-7">You have to sign up first</p>
+        <vue-hcaptcha
+          :sitekey="state.siteKey"
+          class="mx-auto"
+          @verify="onVerify"
+        />
+      </div>
+      <div v-else>
+        <p class="p-7">
+          To log in you first need download and install the
+          <a href="https://www.keplr.app" class="underline">keplr wallet</a>
+          browser extension
+        </p>
+        <a href="https://www.keplr.app/download" class="mx-auto">
+          <BaseCCButton :type="ButtonType.TEAL"> Download Keplr</BaseCCButton>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
+import VueHcaptcha from "@hcaptcha/vue3-hcaptcha";
+import useKeplr from "@/def-composables/useKeplr";
+import { ButtonType } from "@/components/elements/CCButton/ButtonType";
+import { useLogin } from "@/def-composables/useLogin";
+import { onMounted, reactive } from "vue";
+import { env } from "@/env";
+import SignupComponent from "@/components/elements/Login/SignupComponent.vue";
+
+const { isKeplrAvailable } = useKeplr();
+const { checkSignUpRequired, login, isSignUpRequired, onVerify } = useLogin();
+
+const initialState: {
+  siteKey: string;
+} = {
+  siteKey: env.faucetSiteKey,
+};
+
+const state = reactive(initialState);
+
+onMounted(checkSignUpRequired);
+</script>
diff --git a/src/components/partials/PageMenu.vue b/src/components/partials/PageMenu.vue
@@ -62,7 +62,7 @@ import Menu from "@/assets/figma/Menu.svg";
 import { ButtonType } from "@/components/elements/CCButton/ButtonType";
 import { reactive } from "vue";
 import RouterCCButton from "@/components/elements/CCButton/RouterCCButton.vue";
-import LoginComponent from "@/components/elements/LoginComponent.vue";
+import LoginComponent from "@/components/elements/Login/LoginComponent.vue";
 
 type NavigationElement = {
   routeName: string;

diff --git a/src/def-composables/useLogin.ts b/src/def-composables/useLogin.ts
@@ -27,7 +27,8 @@ const useLoginInstance = () => {
       if (!required) {
         login()
       } else {
-        router.push("Login")}
+        router.push({name:"Login"})
+      }
     })
   }
 

diff --git a/src/views/GameClientAuthzPage.vue b/src/views/GameClientAuthzPage.vue
@@ -38,6 +38,7 @@
         </div>
         <div v-else>
           <p>Please log in to authenticate</p>
+          <SignupComponent />
         </div>
       </template>
     </HeadingContentComponent>
@@ -46,7 +47,6 @@
 <script setup lang="ts">
 import { useLoggedIn } from "@/def-composables/useLoggedIn";
 import { useTx } from "@/def-composables/useTx";
-import { useAddress } from "@/def-composables/useAddress";
 import { useRoute, useRouter } from "vue-router";
 import { onMounted, reactive } from "vue";
 import { validAddress } from "@/utils/validation";
@@ -55,6 +55,7 @@ import FadeTeaserSmall from "@/components/elements/Teaser/FadeTeaserSmall.vue";
 import spinner from "@/assets/spinner.svg";
 import { ButtonType } from "@/components/elements/CCButton/ButtonType";
 import HeadingContentComponent from "@/components/elements/Teaser/TeaserHeader.vue";
+import SignupComponent from "@/components/elements/Login/SignupComponent.vue";
 
 enum CurrentState {
   NONE,
@@ -63,7 +64,6 @@ enum CurrentState {
 }
 
 const { loggedIn } = useLoggedIn();
-const { address } = useAddress();
 const { authzGameclient } = useTx();
 const route = useRoute();
 const router = useRouter();

diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue
@@ -1,72 +1,18 @@
 <template>
   <div class="bg-black flex flex-col h-[80vh] sm:h-[85vh]">
     <div class="text-center my-auto">
-      <div class="-mt-40">
-        <h2 class="text-white text-5xl font-bold p-7">
+      <div class="-mt-40 text-white">
+        <h2 class="text-5xl font-bold p-7">
           {{ isSignUpRequired ? "Sign up" : "Log in" }}
         </h2>
-        <BaseCCButton
-          v-if="!isSignUpRequired"
-          @click="login"
-        >
-          Login with keplr
-        </BaseCCButton>
-        <div v-else>
-          <div
-            v-if="isKeplrAvailable"
-            class="flex flex-col justify-center"
-          >
-            <p class="text-white p-7">
-              You have to sign up first
-            </p>
-            <vue-hcaptcha
-              :sitekey="state.siteKey"
-              class="mx-auto"
-              @verify="onVerify"
-            />
-          </div>
-          <div v-else>
-            <p class="text-white p-7">
-              To log in you first need download and install the
-              <a
-                href="https://www.keplr.app"
-                class="underline"
-              >keplr wallet</a>
-              browser extension
-            </p>
-            <a
-              href="https://www.keplr.app/download"
-              class="mx-auto"
-            >
-              <BaseCCButton :type="ButtonType.TEAL">
-                Download Keplr
-              </BaseCCButton>
-            </a>
-          </div>
-        </div>
+        <SignupComponent />
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
-import VueHcaptcha from "@hcaptcha/vue3-hcaptcha";
-import useKeplr from "@/def-composables/useKeplr";
-import { ButtonType } from "@/components/elements/CCButton/ButtonType";
+import SignupComponent from "@/components/elements/Login/SignupComponent.vue";
 import { useLogin } from "@/def-composables/useLogin";
-import { onMounted, reactive } from "vue";
-import { env } from "@/env";
 
-const { isKeplrAvailable } = useKeplr();
-const { checkSignUpRequired, login, isSignUpRequired, onVerify } = useLogin();
-
-const initialState: {
-  siteKey: string;
-} = {
-  siteKey: env.faucetSiteKey,
-};
-
-const state = reactive(initialState);
-
-onMounted(checkSignUpRequired);
+const { isSignUpRequired } = useLogin();
 </script>