vt3e.cat
wip bsky client for the web & android
bbell.vt3e.cat
1<script lang="ts" setup>
2import { onMounted, ref } from 'vue'
3
4import { useAuthStore } from '@/stores/auth'
5import { getProviderList, type HydratedProvider } from '@/utils/pds'
6
7import Button from '../../UI/BaseButton.vue'
8import Modal from '../../UI/BaseModal.vue'
9import TextInput from '@/components/UI/TextInput.vue'
10
11const auth = useAuthStore()
12
13const providers = ref<HydratedProvider[]>([])
14const selectedProvider = ref<HydratedProvider>()
15
16const pdsError = ref('')
17const pdsInput = ref('')
18
19async function submitPds() {
20 const val =
21 pdsInput.value.trim() === '' ? selectedProvider.value?.url.toString() : pdsInput.value.trim()
22 if (!val) {
23 pdsError.value = 'Enter a PDS URL or handle'
24 return
25 }
26 await auth.login(val)
27}
28
29onMounted(async () => {
30 providers.value = await getProviderList()
31 if (providers.value.length) {
32 selectedProvider.value = providers.value[0]
33 } else {
34 pdsError.value = 'No providers available'
35 }
36})
37</script>
38
39<template>
40 <Modal title="Enter your handle" @close="$emit('close')" width="480px">
41 <div class="modal-body">
42 <label for="pds-input" class="sr-only">PDS URL or handle</label>
43
44 <TextInput
45 id="pds-input"
46 v-model="pdsInput"
47 placeholder="https://pds.example or example.cat"
48 :error="pdsError"
49 inputmode="url"
50 aria-describedby="pds-error"
51 @keydown.enter.prevent="submitPds"
52 style="margin-top: 1rem"
53 />
54
55 <div id="pds-error" role="alert" v-if="pdsError">{{ pdsError }}</div>
56 </div>
57
58 <template #footer>
59 <Button variant="ghost" type="button" @click="$emit('close')">Cancel</Button>
60 <Button variant="primary" :loading="auth.isLoading" @click="submitPds" type="button">
61 Sign in
62 </Button>
63 </template>
64 </Modal>
65</template>