70 lines
2.4 KiB
Vue
70 lines
2.4 KiB
Vue
<template>
|
|
<div class="container mx-auto px-8">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-8">
|
|
<div class="flex flex-col gap-4">
|
|
<n-card title="Connections">
|
|
<n-card content-style="padding: 0" class="mb-4">
|
|
<n-list size="small" hoverable>
|
|
<n-list-item v-for="connection in connections" :key="connection.id">
|
|
<n-thing>
|
|
<template #header>
|
|
<span class="capitalize">{{ connection.provider }}</span>
|
|
</template>
|
|
<template #description>
|
|
<span>{{ connection.provided_identifier }}</span>
|
|
</template>
|
|
</n-thing>
|
|
</n-list-item>
|
|
</n-list>
|
|
</n-card>
|
|
<n-card content-style="padding: 0" class="mb-4">
|
|
<n-list size="small" hoverable clickable>
|
|
<n-list-item
|
|
v-for="addable in connectionsAddable"
|
|
:key="addable"
|
|
@click="connectionAdd(addable)"
|
|
>
|
|
<n-thing>
|
|
<template #header>
|
|
<span class="capitalize">{{ addable }}</span>
|
|
</template>
|
|
<template #description>
|
|
<span>Unconnected</span>
|
|
</template>
|
|
</n-thing>
|
|
</n-list-item>
|
|
</n-list>
|
|
</n-card>
|
|
<n-alert type="info" title="More actions available">
|
|
You can open Solian and head to Account Settings to explore more actions about the
|
|
account connections.
|
|
</n-alert>
|
|
</n-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { NCard, NList, NListItem, NThing, NAlert } from 'naive-ui'
|
|
import { computed, onMounted, ref } from 'vue'
|
|
|
|
const connectionsProviders = ['apple', 'google', 'microsoft', 'discord', 'github', 'afdian']
|
|
const connections = ref<any[]>([])
|
|
|
|
const connectionsAddable = computed(() =>
|
|
connectionsProviders.filter((x) => connections.value.filter((e) => e.provider == x).length == 0),
|
|
)
|
|
|
|
function connectionAdd(provider: string) {
|
|
window.open(`/api/auth/login/${provider}`,"","width=400,height=600");
|
|
}
|
|
|
|
async function fetchConnections() {
|
|
const resp = await fetch('/api/accounts/me/connections')
|
|
connections.value = await resp.json()
|
|
}
|
|
|
|
onMounted(() => fetchConnections())
|
|
</script>
|