Add multi-device MFA support

Author: zealsprince

app/components/Settings/ConnectTeamSpeak.vue

@@ -106,6 +106,7 @@ const serverSelectModel = computed<SelectOption[] | undefined>({
 const identities = computed(() => localIdentities.value)
 const hasLinkedIdentities = computed(() => identities.value.length > 0)
 const buttonLabel = computed(() => hasLinkedIdentities.value ? 'Manage TeamSpeak' : 'Connect TeamSpeak')
+const isProfileLoading = computed(() => props.profile === null)
 const stepBadge = computed(() => {
   switch (step.value) {
     case 'manage':
@@ -410,7 +411,8 @@ function safeParseJson(input: string): unknown {
       variant="fill"
       class="teamspeak-manage"
       :expand="isBelowMedium"
-      :disabled="!hasServers"
+      :loading="isProfileLoading"
+      :disabled="isProfileLoading || !hasServers"
       @click="openModal"
     >
       <template #start>

app/components/Settings/ConnectionsCard.vue

@@ -5,6 +5,7 @@ import { reactive, ref, watch } from 'vue'
 import SharedErrorToast from '@/components/Shared/ErrorToast.vue'
 import TinyBadge from '@/components/Shared/TinyBadge.vue'
 import { useBreakpoint } from '@/lib/mediaQuery'
+import { normalizeTeamSpeakIdentities } from '@/lib/teamspeak'
 
 const props = defineProps<{ profile: Tables<'profiles'> | null }>()
 const emit = defineEmits<{ (e: 'updated'): void }>()
@@ -26,6 +27,9 @@ const ConnectTeamspeak = defineAsyncComponent(() => import('@/components/Setting
 const richPresenceEnabled = ref(!(props.profile?.rich_presence_disabled ?? false))
 const richPresenceLoading = ref(false)
 
+const hasTeamSpeakConnected = computed(() => normalizeTeamSpeakIdentities(props.profile?.teamspeak_identities).length > 0)
+const isProfileLoading = computed(() => props.profile === null)
+
 watch(
   () => props.profile?.rich_presence_disabled,
   (disabled) => {
@@ -202,7 +206,17 @@ function toggleRichPresence() {
 
           <div class="account-status" :style="{ width: isBelowSmall ? '100%' : undefined }">
             <Button
-              v-if="props.profile?.patreon_id"
+              v-if="isProfileLoading"
+              :expand="isBelowSmall"
+              variant="fill"
+              :loading="true"
+              disabled
+              aria-disabled="true"
+            >
+              Loading
+            </Button>
+            <Button
+              v-else-if="props.profile?.patreon_id"
               :expand="isBelowSmall"
               variant="danger"
               :loading="disconnectLoading.patreon"
@@ -246,7 +260,17 @@ function toggleRichPresence() {
           </Flex>
 
           <div class="account-status" :style="{ width: isBelowSmall ? '100%' : undefined }">
-            <ClientOnly v-if="!props.profile?.steam_id">
+            <Button
+              v-if="isProfileLoading"
+              :expand="isBelowSmall"
+              variant="fill"
+              :loading="true"
+              disabled
+              aria-disabled="true"
+            >
+              Loading
+            </Button>
+            <ClientOnly v-else-if="!props.profile?.steam_id">
               <ConnectSteam :expand="isBelowSmall" @linked="emit('updated')" />
             </ClientOnly>
           </div>
@@ -283,7 +307,17 @@ function toggleRichPresence() {
 
           <div class="account-status" :style="{ width: isBelowSmall ? '100%' : undefined }">
             <Button
-              v-if="props.profile?.discord_id"
+              v-if="isProfileLoading"
+              :expand="isBelowSmall"
+              variant="fill"
+              :loading="true"
+              disabled
+              aria-disabled="true"
+            >
+              Loading
+            </Button>
+            <Button
+              v-else-if="props.profile?.discord_id"
               :expand="isBelowSmall"
               variant="danger"
               :loading="disconnectLoading.discord"
@@ -313,15 +347,31 @@ function toggleRichPresence() {
               <Icon name="mdi:teamspeak" size="20" />
             </div>
             <Flex column expand class="account-row">
-              <strong>TeamSpeak</strong>
+              <Flex expand gap="s" y-center wrap :x-between="isBelowSmall">
+                <strong>TeamSpeak</strong>
+                <TinyBadge v-if="hasTeamSpeakConnected" variant="success">
+                  <Icon class="text-color-accent" name="ph:check" />
+                  Connected
+                </TinyBadge>
+              </Flex>
               <p class="text-xs text-color-lighter">
                 Link your TeamSpeak identities to receive server access and roles
               </p>
             </Flex>
           </Flex>
 
           <div class="account-status teamspeak-actions" :style="{ width: isBelowSmall ? '100%' : undefined }">
-            <ClientOnly>
+            <Button
+              v-if="isProfileLoading"
+              :expand="isBelowSmall"
+              variant="fill"
+              :loading="true"
+              disabled
+              aria-disabled="true"
+            >
+              Loading
+            </Button>
+            <ClientOnly v-else>
               <ConnectTeamspeak :profile="props.profile" @linked="emit('updated')" />
             </ClientOnly>
           </div>