73 lines
2.5 KiB
Vue
73 lines
2.5 KiB
Vue
<template>
|
|
<LayoutPanel fancy-glow class="transition pointer-events-auto w-full">
|
|
<h1
|
|
class="h4 w-full bg-red-400 text-center font-bold bg-gradient-to-r from-blue-500 via-blue-400 to-blue-600 inline-block py-1 text-transparent bg-clip-text"
|
|
>
|
|
Welcome to Speckle
|
|
</h1>
|
|
<div v-if="isDesktopServiceAvailable || canAddAccount">
|
|
<div class="flex flex-col space-y-4 p-2">
|
|
<FormTextInput
|
|
v-model="customServerUrl"
|
|
name="Server to sign in"
|
|
:show-label="false"
|
|
placeholder="https://app.speckle.systems"
|
|
color="foundation"
|
|
autocomplete="off"
|
|
show-clear
|
|
/>
|
|
<div class="space-y-2">
|
|
<AccountsSignInFlow :server-url="customServerUrl" />
|
|
<AccountsExchangeTokenSignInFlow :server-url="customServerUrl" />
|
|
<AccountsLegacySignInFlow :server-url="customServerUrl" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<div class="text-foreground-2 mt-2 mb-4">
|
|
To sign in and start using Speckle, you'll need the Desktop Service running.
|
|
This lightweight background service handles secure authentication.
|
|
</div>
|
|
<div class="space-y-3">
|
|
<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
|
|
size="sm"
|
|
full-width
|
|
text
|
|
link
|
|
@click="accountStore.refreshAccounts()"
|
|
>
|
|
Refresh to check again
|
|
</FormButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</LayoutPanel>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useAccountStore } from '~~/store/accounts'
|
|
import { useDesktopService } from '~/lib/core/composables/desktopService'
|
|
import type { BaseBridge } from '~/lib/bridge/base'
|
|
|
|
const accountStore = useAccountStore()
|
|
const { pingDesktopService } = useDesktopService()
|
|
|
|
const customServerUrl = ref<string>('https://app.speckle.systems')
|
|
|
|
const { $accountBinding } = useNuxtApp()
|
|
const canAddAccount = ['AddAccount', 'addAccount'].some((name) =>
|
|
($accountBinding as unknown as BaseBridge).availableMethodNames.includes(name)
|
|
)
|
|
|
|
const isDesktopServiceAvailable = ref(false) // this should be false default because there is a delay if /ping is not successful.
|
|
|
|
onMounted(async () => {
|
|
isDesktopServiceAvailable.value = await pingDesktopService()
|
|
})
|
|
</script>
|