Merge pull request #96 from flowerpowerdao/feature/open-login-modal

✨ added login modal popup when user trying to vote and not logged in
flowerpowerdao · May 5, 2022 · a919ece · a919ece
2 parents 7a5daa9 + 3a5d082
commit a919ece
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 8 deletions.
diff --git a/src/frontend/components/CastVote.svelte b/src/frontend/components/CastVote.svelte
@@ -7,8 +7,10 @@
 
   import CastVoteModal from "./CastVoteModal.svelte";
   import Card from "./Card.svelte";
+  import LoginModal from "./LoginModal.svelte";
 
   let openModal = false;
+  let openLogin = false;
   let confetti = false;
   let selected;
 
@@ -22,6 +24,11 @@
   function toggleModal() {
     openModal = !openModal;
   }
+
+  function toggleLogin() {
+    openLogin = !openLogin;
+  }
+
   function handleEscape({ key }) {
     if (key === "Escape") {
       openModal = false;
@@ -74,10 +81,8 @@
       <div class="flex justify-center flex-col items-center mt-12">
         <button
           class="max-w-md disabled:cursor-not-allowed bg-white dark:bg-black border-2 border-black dark:border-white dark:text-white rounded-3xl h-12 w-full font-mono"
-          disabled={selected === undefined ||
-            alreadyVoted ||
-            $store.votingPower < 1}
-          on:click={toggleModal}
+          disabled={selected === undefined || alreadyVoted}
+          on:click={$store.isAuthed ? toggleModal : toggleLogin}
         >
           submit vote →
         </button>
@@ -96,4 +101,7 @@
       bind:confetti
     />
   {/if}
+  {#if openLogin}
+    <LoginModal toggleModal={toggleLogin} />
+  {/if}
 {/if}
diff --git a/src/frontend/components/CastVoteModal.svelte b/src/frontend/components/CastVoteModal.svelte
@@ -44,8 +44,8 @@
   <div class="flex gap-3 flex-col flex-1 justify-center items-center">
     <Button
       on:click={castVote}
-      disabled={loading}
-      style={"lg:h-16 2xl:h-20 lg:rounded-[55px]"}
+      disabled={loading || $store.votingPower < 1}
+      style={"lg:h-16 2xl:h-20 lg:rounded-[55px] disabled:cursor-not-allowed"}
     >
       {#if loading}
         <img class="h-6" src={spinner} alt="loading animation" />

diff --git a/src/frontend/components/LoginModal.svelte b/src/frontend/components/LoginModal.svelte
@@ -10,7 +10,7 @@
 
 <Modal title={"login with …"} {toggleModal}>
   <div class="flex gap-3 flex-col flex-1 justify-center items-center">
-    <PlugButton bind:loading />
-    <StoicButton bind:loading />
+    <PlugButton bind:loading {toggleModal}/>
+    <StoicButton bind:loading {toggleModal}/>
   </div>
 </Modal>
diff --git a/src/frontend/components/PlugButton.svelte b/src/frontend/components/PlugButton.svelte
@@ -6,6 +6,7 @@
   import Button from "./Button.svelte";
 
   export let loading;
+  export let toggleModal;
 
   onMount(async () => {
     const connected = await window.ic?.plug?.isConnected();
@@ -19,6 +20,7 @@
     loading = "plug";
     await store.plugConnect();
     loading = "";
+    toggleModal();
   }
 </script>
 

diff --git a/src/frontend/components/StoicButton.svelte b/src/frontend/components/StoicButton.svelte
@@ -7,6 +7,7 @@
   import spinner from "../assets/loading.gif";
 
   export let loading;
+  export let toggleModal;
 
   onMount(async () => {
     StoicIdentity.load().then(async (identity) => {
@@ -21,6 +22,7 @@
     loading = "stoic";
     await store.stoicConnect();
     loading = "";
+    toggleModal();
   }
 </script>