feat(fe2): sign up notification for non-logged in users

packages/frontend-2/components/auth/LoginPanel.vue

@@ -1,14 +1,19 @@
 <template>
-  <LayoutPanel fancy-glow no-shadow class="max-w-lg mx-auto w-full">
+  <Component
+    :is="concreteComponent"
+    fancy-glow
+    no-shadow
+    class="max-w-lg mx-auto w-full"
+  >
     <div class="space-y-4">
       <div class="flex flex-col items-center space-y-2">
         <h1
           class="text-center h3 font-bold bg-gradient-to-r from-blue-500 via-blue-400 to-blue-600 inline-block py-1 text-transparent bg-clip-text"
         >
-          Speckle Login
+          {{ title }}
         </h1>
         <h2 class="text-center text-foreground-2">
-          Interoperability, Collaboration and Automation for 3D
+          {{ subtitle }}
         </h2>
       </div>
       <AuthThirdPartyLoginBlock
@@ -28,13 +33,31 @@
         <AuthLoginWithEmailBlock v-if="hasLocalStrategy" :challenge="challenge" />
       </div>
     </div>
-  </LayoutPanel>
+  </Component>
 </template>
 <script setup lang="ts">
 import { useQuery } from '@vue/apollo-composable'
 import { AuthStrategy } from '~~/lib/auth/helpers/strategies'
 import { useLoginOrRegisterUtils } from '~~/lib/auth/composables/auth'
 import { loginServerInfoQuery } from '~~/lib/auth/graphql/queries'
+import { LayoutDialog, LayoutPanel } from '@speckle/ui-components'
+
+const props = withDefaults(
+  defineProps<{
+    dialogMode?: boolean
+    title?: string
+    subtitle?: string
+  }>(),
+  {
+    dialogMode: false,
+    title: 'Speckle Login',
+    subtitle: 'Interoperability, Collaboration and Automation for 3D'
+  }
+)
+
+const concreteComponent = computed(() => {
+  return props.dialogMode ? LayoutDialog : LayoutPanel
+})
 
 const { result } = useQuery(loginServerInfoQuery)
 const { appId, challenge } = useLoginOrRegisterUtils()

packages/frontend-2/components/header/NavBar.vue

@@ -30,6 +30,10 @@
         </div>
       </div>
     </div>
+    <PopupsSignIn v-if="!activeUser" />
   </nav>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useActiveUser } from '~~/lib/auth/composables/activeUser'
+const { activeUser } = useActiveUser()
+</script>

packages/frontend-2/components/popups/SignIn.vue

@@ -0,0 +1,57 @@
+<template>
+  <AuthLoginPanel
+    v-model:open="showDialog"
+    dialog-mode
+    max-width="sm"
+    subtitle="Create a free account to keep using Speckle!"
+    :hide-closer="dialogOpenCount >= 3"
+    :prevent-close-on-click-outside="dialogOpenCount >= 3"
+  />
+</template>
+<script setup lang="ts">
+import { useActiveUser } from '~~/lib/auth/composables/activeUser'
+import { debounce } from 'lodash-es'
+const { activeUser } = useActiveUser()
+
+const showDialog = ref(false)
+const clickyCounts = ref(0)
+let clicksToOpenDialog = 6
+
+watch(clickyCounts, (newVal) => {
+  if (activeUser.value) return
+  if (newVal < clicksToOpenDialog) return
+  clickyCounts.value = 0
+  showDialog.value = true
+  clicksToOpenDialog *= 2
+})
+
+const countClicks = () => {
+  console.log(clickyCounts.value, clicksToOpenDialog, dialogOpenCount.value)
+  clickyCounts.value++
+}
+
+const debouncedCounter = debounce(countClicks, 100)
+
+// After three dialog opens, we disallow its closing
+const dialogOpenCount = ref(0)
+watch(showDialog, (newVal) => {
+  if (!newVal) return
+  dialogOpenCount.value++
+})
+
+onMounted(() => {
+  if (activeUser.value) return
+  // Note: not using the vue use equivalent as it does not detect viewer clicks
+  // Note: viewer eevnt handlers seem to prevent default on right clicks
+  document.addEventListener('click', countClicks)
+  document.addEventListener('touchstart', countClicks)
+  document.addEventListener('scroll', debouncedCounter)
+})
+
+onUnmounted(() => {
+  if (activeUser.value) return
+  document.removeEventListener('click', countClicks)
+  document.removeEventListener('touchstart', countClicks)
+  document.removeEventListener('scroll', debouncedCounter)
+})
+</script>