default value instead placeholder

components/accounts/LegacySignInFlow.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="flex flex-col space-y-2">
+    <div v-if="isDesktopServiceAvailable">
+      <div v-show="!isAddingAccount" class="text-foreground-2 space-y-2">
+        <FormButton
+          text
+          size="sm"
+          full-width
+          @click="showCustomServerInput = !showCustomServerInput"
+        >
+          {{ showCustomServerInput ? 'Use default server' : 'Set custom server url' }}
+        </FormButton>
+        <div v-if="showCustomServerInput">
+          <FormTextInput
+            v-model="customServerUrl"
+            name="name"
+            :show-label="false"
+            color="foundation"
+            autocomplete="off"
+            show-clear
+            @clear="showCustomServerInput = false"
+          />
+        </div>
+        <div class="flex space-x-2">
+          <FormButton
+            color="outline"
+            class="px-1"
+            :icon-left="ArrowLeftIcon"
+            hide-text
+            @click="emit('backToSignIn')"
+          />
+
+          <FormButton full-width @click="startAccountAddFlow()">
+            Sign in (Legacy)
+          </FormButton>
+        </div>
+      </div>
+
+      <div v-show="isAddingAccount" class="text-foreground-2 mt-2 mb-4 space-y-2">
+        <div class="text-sm text-center">
+          Please check your browser: waiting for authorization to complete.
+        </div>
+        <div class="py-2"><CommonLoadingBar :loading="isAddingAccount" /></div>
+        <div v-if="showHelp" class="bg-blue-500/10 p-2 rounded-md space-y-2">
+          <div class="text-sm text-center">Having trouble?</div>
+          <FormButton size="sm" full-width @click="restartFlow()">Retry</FormButton>
+          <FormButton
+            text
+            size="sm"
+            full-width
+            @click="$openUrl('https://speckle.community')"
+          >
+            Get in touch with us
+          </FormButton>
+        </div>
+      </div>
+    </div>
+    <div v-else class="space-y-3">
+      <div class="text-foreground-2 text-sm">
+        The Speckle Desktop Service is required to add accounts as legacy way. This
+        background service handles authentication securely.
+      </div>
+      <div class="flex space-x-2">
+        <FormButton
+          color="outline"
+          class="px-1"
+          :icon-left="ArrowLeftIcon"
+          hide-text
+          @click="emit('backToSignIn')"
+        />
+        <FormButton full-width @click="$openUrl('https://releases.speckle.systems')">
+          Download Desktop Service
+        </FormButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useIntervalFn } from '@vueuse/core'
+import { useHostAppStore } from '~/store/hostApp'
+import { ToastNotificationType } from '@speckle/ui-components'
+import { useMixpanel } from '~/lib/core/composables/mixpanel'
+import { useAccountStore } from '~~/store/accounts'
+import { useDesktopService } from '~/lib/core/composables/desktopService'
+import { ArrowLeftIcon } from '@heroicons/vue/24/solid'
+
+const accountStore = useAccountStore()
+const { pingDesktopService } = useDesktopService()
+const hostApp = useHostAppStore()
+const app = useNuxtApp()
+const { trackEvent } = useMixpanel()
+
+const emit = defineEmits<{
+  (e: 'backToSignIn'): void
+}>()
+
+const showCustomServerInput = ref(false)
+const isAddingAccount = ref(false)
+const isDesktopServiceAvailable = ref(false) // this should be false default because there is a delay if /ping is not successful.
+const customServerUrl = ref<string | undefined>('https://app.speckle.systems')
+const showHelp = ref(false)
+
+const accountCheckerIntervalFn = useIntervalFn(
+  async () => {
+    const previousAccountCount = accountStore.accounts.length
+    await accountStore.refreshAccounts()
+    const currentAccountCount = accountStore.accounts.length
+    if (previousAccountCount !== currentAccountCount) {
+      isAddingAccount.value = false
+      showCustomServerInput.value = false
+      accountCheckerIntervalFn.pause()
+      trackEvent('DUI Account Added')
+    }
+  },
+  1000,
+  { immediate: false }
+)
+
+const startAccountAddFlow = () => {
+  isAddingAccount.value = true
+  accountCheckerIntervalFn.resume()
+  setTimeout(() => {
+    showHelp.value = true
+  }, 10_000)
+  const url = customServerUrl.value
+    ? `http://localhost:29364/auth/add-account?serverUrl=${
+        new URL(customServerUrl.value).origin
+      }`
+    : `http://localhost:29364/auth/add-account`
+
+  app.$openUrl(url)
+
+  // this is a annoying timeout that we cannot detect if user added same account or not.
+  setTimeout(() => {
+    if (isAddingAccount.value) {
+      isAddingAccount.value = false
+      showCustomServerInput.value = false
+      accountCheckerIntervalFn.pause()
+      // Note to Dim: not sure about toast
+      hostApp.setNotification({
+        title: 'Sign In',
+        type: ToastNotificationType.Info,
+        description:
+          'Sign in timed out. This may have happened because you tried adding an existing account.'
+      })
+      // TODO: we could log it to sentry/seq later to see how likely it happens?
+    }
+  }, 30_000)
+}
+
+const restartFlow = () => {
+  isAddingAccount.value = false
+  showHelp.value = false
+}
+
+onMounted(async () => {
+  isDesktopServiceAvailable.value = await pingDesktopService()
+})
+</script>

components/accounts/Menu.vue

@@ -39,33 +39,20 @@
             title="Add a new account"
             fullscreen="none"
           >
-            <div>
-              <div v-if="isDesktopServiceAvailable">
-                <AccountsSignInFlow />
-              </div>
-              <div v-else class="space-y-3">
-                <div class="text-foreground-2 text-sm">
-                  The Speckle Desktop Service is required to add accounts. This
-                  background service handles authentication securely.
-                </div>
-                <FormButton
-                  full-width
-                  @click="$openUrl('https://releases.speckle.systems')"
-                >
-                  Download Desktop Service
-                </FormButton>
-                <div class="text-center">
-                  <div class="text-foreground-2 text-xs mb-2">Already installed?</div>
-                  <FormButton
-                    text
-                    size="sm"
-                    full-width
-                    @click="accountStore.refreshAccounts()"
-                  >
-                    Refresh accounts
-                  </FormButton>
-                </div>
-              </div>
+            <div class="flex flex-col space-y-2">
+              <AccountsSignInFlow v-if="!showLegacy" />
+              <AccountsLegacySignInFlow v-else @back-to-sign-in="showLegacy = false" />
+
+              <FormButton
+                v-if="!showLegacy"
+                text
+                full-width
+                size="sm"
+                class="text-xs"
+                @click="showLegacy = true"
+              >
+                Legacy Sign in
+              </FormButton>
             </div>
           </CommonDialog>
         </div>
@@ -84,7 +71,6 @@ import { useDesktopService } from '~/lib/core/composables/desktopService'
 
 const { trackEvent } = useMixpanel()
 const app = useNuxtApp()
-const { $openUrl } = useNuxtApp()
 const { pingDesktopService } = useDesktopService()
 
 const props = withDefaults(
@@ -102,7 +88,7 @@ defineEmits<{
 }>()
 
 const showAddNewAccount = ref(false)
-// const showAccountsDialog = ref(false)
+const showLegacy = ref(false)
 
 const showAccountsDialog = defineModel<boolean>('open', {
   required: false,
@@ -122,6 +108,13 @@ watch(showAccountsDialog, (newVal) => {
   }
 })
 
+watch(showAddNewAccount, (newVal) => {
+  if (newVal) {
+    // reset the current/legacy state on every add account sub-dialog
+    showLegacy.value = false
+  }
+})
+
 const accountStore = useAccountStore()
 const { accounts, activeAccount, userSelectedAccount, isLoading } =
   storeToRefs(accountStore)

components/accounts/SignInFlow.vue

@@ -1,69 +1,36 @@
 <template>
-  <div>
-    <div v-show="!isAddingAccount" class="text-foreground-2 my-2 space-y-2">
-      <div v-if="showCustomServerInput">
-        <FormTextInput
-          v-model="customServerUrl"
-          name="name"
-          :show-label="false"
-          placeholder="https://app.speckle.systems"
-          color="foundation"
-          autocomplete="off"
-          show-clear
-          @clear="showCustomServerInput = false"
-        />
-      </div>
-      <FormButton v-if="canAddAccount" full-width @click="logIn()">Log in</FormButton>
-      <FormButton v-else full-width @click="startAccountAddFlow()">Sign in</FormButton>
-      <FormButton
-        text
-        size="sm"
-        full-width
-        @click="showCustomServerInput = !showCustomServerInput"
-      >
-        {{ showCustomServerInput ? 'Use default server' : 'Set custom server url' }}
-      </FormButton>
+  <div class="flex flex-col space-y-2">
+    <FormButton
+      text
+      size="sm"
+      full-width
+      @click="showCustomServerInput = !showCustomServerInput"
+    >
+      {{ showCustomServerInput ? 'Use default server' : 'Set custom server url' }}
+    </FormButton>
+    <div v-if="showCustomServerInput">
+      <FormTextInput
+        v-model="customServerUrl"
+        name="name"
+        :show-label="false"
+        placeholder="https://app.speckle.systems"
+        color="foundation"
+        autocomplete="off"
+        show-clear
+        @clear="showCustomServerInput = false"
+      />
     </div>
 
-    <div v-show="isAddingAccount" class="text-foreground-2 mt-2 mb-4 space-y-2">
-      <div class="text-sm text-center">
-        Please check your browser: waiting for authorization to complete.
-      </div>
-      <div class="py-2"><CommonLoadingBar :loading="isAddingAccount" /></div>
-      <div v-if="showHelp" class="bg-blue-500/10 p-2 rounded-md space-y-2">
-        <div class="text-sm text-center">Having trouble?</div>
-        <FormButton size="sm" full-width @click="restartFlow()">Retry</FormButton>
-        <FormButton
-          text
-          size="sm"
-          full-width
-          @click="$openUrl('https://speckle.community')"
-        >
-          Get in touch with us
-        </FormButton>
-      </div>
-    </div>
+    <FormButton v-if="canAddAccount" full-width @click="logIn()">Sign in</FormButton>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useIntervalFn } from '@vueuse/core'
-import { useAccountStore } from '~~/store/accounts'
-import { useHostAppStore } from '~/store/hostApp'
-import { ToastNotificationType } from '@speckle/ui-components'
-import { useMixpanel } from '~/lib/core/composables/mixpanel'
 import { useAuthManager } from '~/lib/authn/useAuthManager'
 import type { BaseBridge } from '~/lib/bridge/base'
 
-const accountStore = useAccountStore()
-const hostApp = useHostAppStore()
-const app = useNuxtApp()
-const { trackEvent } = useMixpanel()
-
-const customServerUrl = ref<string | undefined>(undefined)
-const isAddingAccount = ref(false)
-const showHelp = ref(false)
+const customServerUrl = ref<string | undefined>('https://app.speckle.systems')
 const showCustomServerInput = ref(false)
 
 const { $accountBinding } = useNuxtApp()
@@ -71,22 +38,6 @@ const canAddAccount = ['AddAccount', 'addAccount'].some((name) =>
   ($accountBinding as unknown as BaseBridge).availableMethodNames.includes(name)
 )
 
-const accountCheckerIntervalFn = useIntervalFn(
-  async () => {
-    const previousAccountCount = accountStore.accounts.length
-    await accountStore.refreshAccounts()
-    const currentAccountCount = accountStore.accounts.length
-    if (previousAccountCount !== currentAccountCount) {
-      isAddingAccount.value = false
-      showCustomServerInput.value = false
-      accountCheckerIntervalFn.pause()
-      trackEvent('DUI Account Added')
-    }
-  },
-  1000,
-  { immediate: false }
-)
-
 const { generateChallenge } = useAuthManager()
 
 const logIn = () => {
@@ -97,41 +48,4 @@ const logIn = () => {
   const authUrl = `${serverUrl}/authn/verify/sdui/${challenge}`
   window.location.href = authUrl
 }
-
-const startAccountAddFlow = () => {
-  isAddingAccount.value = true
-  accountCheckerIntervalFn.resume()
-  setTimeout(() => {
-    showHelp.value = true
-  }, 10_000)
-  const url = customServerUrl.value
-    ? `http://localhost:29364/auth/add-account?serverUrl=${
-        new URL(customServerUrl.value).origin
-      }`
-    : `http://localhost:29364/auth/add-account`
-
-  app.$openUrl(url)
-
-  // this is a annoying timeout that we cannot detect if user added same account or not.
-  setTimeout(() => {
-    if (isAddingAccount.value) {
-      isAddingAccount.value = false
-      showCustomServerInput.value = false
-      accountCheckerIntervalFn.pause()
-      // Note to Dim: not sure about toast
-      hostApp.setNotification({
-        title: 'Sign In',
-        type: ToastNotificationType.Info,
-        description:
-          'Sign in timed out. This may have happened because you tried adding an existing account.'
-      })
-      // TODO: we could log it to sentry/seq later to see how likely it happens?
-    }
-  }, 30_000)
-}
-
-const restartFlow = () => {
-  isAddingAccount.value = false
-  showHelp.value = false
-}
 </script>

components/home/NoAccountsPanel.vue

@@ -6,7 +6,18 @@
       Welcome to Speckle
     </h1>
     <div v-if="isDesktopServiceAvailable || canAddAccount">
-      <AccountsSignInFlow />
+      <AccountsSignInFlow v-if="!showLegacy" />
+      <AccountsLegacySignInFlow v-else @back-to-sign-in="showLegacy = false" />
+      <FormButton
+        v-if="!showLegacy"
+        text
+        full-width
+        size="sm"
+        class="text-xs"
+        @click="showLegacy = true"
+      >
+        Legacy Sign in
+      </FormButton>
     </div>
     <div v-else>
       <div class="text-foreground-2 mt-2 mb-4">
@@ -47,6 +58,8 @@ const canAddAccount = ['AddAccount', 'addAccount'].some((name) =>
   ($accountBinding as unknown as BaseBridge).availableMethodNames.includes(name)
 )
 
+const showLegacy = ref(false)
+
 const isDesktopServiceAvailable = ref(false) // this should be false default because there is a delay if /ping is not successful.
 
 onMounted(async () => {