📱 Add sign in button for mobile (#245)

* 📱 Add sign in button for mobile * 🚸 Disable sales link copy for non-affiliates * ♻️ Refactor user sign in logic into composables * 🎨 Rename props
likecoin · Dec 12, 2024 · b76d25b · b76d25b
1 parent 8f126a1
commit b76d25b
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 46 deletions.
diff --git a/components/AuthRequiredView.vue b/components/AuthRequiredView.vue
@@ -1,7 +1,7 @@
 <template>
   <PageBody
     v-if="!bookStoreApiStore.isAuthenticated"
-    :ui="{ base: 'flex justify-center items-center grow' }"
+    :ui="{ base: 'flex flex-col justify-center items-center grow w-auto' }"
   >
     <UAlert
       icon="i-heroicons-light-bulb"
@@ -11,12 +11,27 @@
       description="Please sign in to continue."
       :ui="{ wrapper: 'w-auto', inner: 'w-auto', title: 'font-bold' }"
     />
+    <UButton
+      class="block lg:hidden"
+      label="Sign in"
+      icon="i-heroicons-arrow-right-on-rectangle"
+      color="primary"
+      :loading="isAuthenticating"
+      :disabled="isRestoringSession"
+      block
+      @click="onAuthenticate"
+    />
   </PageBody>
   <slot v-else />
 </template>
 
 <script setup lang="ts">
+import { storeToRefs } from 'pinia'
 import { useBookStoreApiStore } from '~/stores/book-store-api'
+import { useAuth } from '~/composables/useAuth'
 
 const bookStoreApiStore = useBookStoreApiStore()
+const { isRestoringSession } = storeToRefs(bookStoreApiStore)
+const { isAuthenticating, onAuthenticate } = useAuth()
+
 </script>
diff --git a/components/AuthStateView.vue b/components/AuthStateView.vue
@@ -39,69 +39,32 @@
       icon="i-heroicons-arrow-right-on-rectangle"
       color="primary"
       size="lg"
-      :loading="isLoading"
+      :loading="isAuthenticating"
       :disabled="isRestoringSession"
       block
-      @click="onClickAuth"
+      @click="onAuthenticate"
     />
   </div>
 </template>
 
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import { useWalletStore } from '~/stores/wallet'
-import { getPortfolioURL, copyToClipboard } from '~/utils'
+import { getPortfolioURL, copyToClipboard } from '~/utils/index'
 import { shortenWalletAddress } from '~/utils/cosmos'
 import { useBookStoreApiStore } from '~/stores/book-store-api'
+import { useAuth } from '~/composables/useAuth'
 
 const store = useWalletStore()
-const { wallet, signer } = storeToRefs(store)
-const { connect, disconnect, signMessageMemo } = store
+const { wallet } = storeToRefs(store)
+const { disconnect } = store
 const bookStoreApiStore = useBookStoreApiStore()
-const { authenticate, clearSession } = bookStoreApiStore
+const { clearSession } = bookStoreApiStore
 const { isRestoringSession } = storeToRefs(bookStoreApiStore)
-
-const toast = useToast()
+const { isAuthenticating, onAuthenticate } = useAuth()
 
 const portfolioURL = computed(() => getPortfolioURL(wallet.value))
 
-const isLoading = ref(false)
-
-async function onClickAuth () {
-  try {
-    isLoading.value = true
-    setupPostAuthRedirect()
-
-    if (!wallet.value || !signer.value) {
-      await connect()
-    }
-    if (!wallet.value || !signer.value) { return }
-    const signature = await signMessageMemo(
-      'authorize',
-      ['read:nftbook', 'write:nftbook', 'read:nftcollection', 'write:nftcollection']
-    )
-    if (!signature) { return }
-    await authenticate(wallet.value, signature)
-  } catch (err) {
-    disconnect()
-    clearSession()
-    // eslint-disable-next-line no-console
-    console.error(err)
-    toast.add({
-      icon: 'i-heroicons-exclamation-circle',
-      title: (err as Error).toString(),
-      timeout: 0,
-      color: 'red',
-      ui: {
-        title: 'text-red-400 dark:text-red-400'
-      }
-    })
-  } finally {
-    isLoading.value = false
-    clearPostAuthRedirect()
-  }
-}
-
 function onClickDisconnect () {
   disconnect()
   clearSession()

diff --git a/composables/useAuth.ts b/composables/useAuth.ts
@@ -0,0 +1,62 @@
+import { ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useWalletStore } from '~/stores/wallet'
+import { useBookStoreApiStore } from '~/stores/book-store-api'
+
+export function useAuth () {
+  const bookStoreApiStore = useBookStoreApiStore()
+  const store = useWalletStore()
+  const { wallet, signer } = storeToRefs(store)
+  const { connect, disconnect, signMessageMemo } = store
+  const { authenticate, clearSession } = bookStoreApiStore
+  const toast = useToast()
+
+  const isAuthenticating = ref(false)
+
+  async function onAuthenticate () {
+    try {
+      isAuthenticating.value = true
+      setupPostAuthRedirect()
+
+      if (!wallet.value || !signer.value) {
+        await connect()
+      }
+      if (!wallet.value || !signer.value) {
+        return
+      }
+
+      const signature = await signMessageMemo(
+        'authorize',
+        ['read:nftbook', 'write:nftbook', 'read:nftcollection', 'write:nftcollection']
+      )
+
+      if (!signature) {
+        return
+      }
+
+      await authenticate(wallet.value, signature)
+    } catch (err) {
+      disconnect()
+      clearSession()
+      // eslint-disable-next-line no-console
+      console.error(err)
+      toast.add({
+        icon: 'i-heroicons-exclamation-circle',
+        title: (err as Error).toString(),
+        timeout: 0,
+        color: 'red',
+        ui: {
+          title: 'text-red-400 dark:text-red-400'
+        }
+      })
+    } finally {
+      isAuthenticating.value = false
+      clearPostAuthRedirect()
+    }
+  }
+
+  return {
+    isAuthenticating,
+    onAuthenticate
+  }
+}
diff --git a/pages/latest-books.vue b/pages/latest-books.vue
@@ -55,6 +55,7 @@
         <template #url-data="{ row }">
           <UButton
             label="Copy"
+            :disabled="!isAffiliationReady"
             @click="handleCopyButtonClick($event, row.url)"
           />
         </template>