Capital/pages/auth/sign-in.vue

<template>
  <v-container class="h-[calc(100vh-80px)] flex flex-col gap-3 items-center justify-center">
    <auth-callback-hint />

    <v-card class="w-full max-w-[720px] overflow-auto" :loading="loading">
      <v-card-text class="card-grid pa-9">
        <div>
          <v-avatar color="accent" icon="mdi-login-variant" size="large" class="card-rounded mb-2" />
          <h1 class="text-2xl">Sign in</h1>
          <p v-if="ticket">We need to verify that the person trying to access your account is you.</p>
          <p v-else>Sign in via your Solar ID to access the entire Solar Network.</p>
        </div>

        <v-window :touch="false" :model-value="panel" class="pa-2 mx-[-0.5rem]">
          <v-window-item v-for="(k, idx) in Object.keys(panels)" :key="idx" :value="k">
            <component :is="panels[k]" @swap="(val: string) => (panel = val)" v-model:loading="loading"
                       v-model:currentFactor="currentFactor" v-model:ticket="ticket" />
          </v-window-item>
        </v-window>
      </v-card-text>
    </v-card>

    <copyright service="passport" />
  </v-container>
</template>

<script setup lang="ts">
import { type Component, onMounted, ref } from "vue"
import { useRoute } from "vue-router"
import FactorPicker from "~/components/auth/FactorPicker.vue"
import FactorApplicator from "~/components/auth/FactorApplicator.vue"
import AccountAuthenticate from "~/components/auth/Authenticate.vue"
import AuthenticateCompleted from "~/components/auth/AuthenticateCompleted.vue"

definePageMeta({
  alias: ["/auth/mfa"],
})

const route = useRoute()

const loading = ref(false)

const currentFactor = ref<any>(null)
const ticket = ref<any>(null)

async function pickUpTicket() {
  if (route.query["ticketId"]) {
    loading.value = true
    const res = await fetch(`/api/auth/tickets/${route.query["ticketId"]}`)
    if (res.status == 200) {
      ticket.value = await res.json()
      if (ticket.value["available_at"] != null) panel.value = "completed"
      else panel.value = "mfa"
    }
    loading.value = false
  }
}

onMounted(() => pickUpTicket())

const panel = ref("authenticate")

const panels: { [id: string]: Component } = {
  authenticate: AccountAuthenticate,
  mfa: FactorPicker,
  applicator: FactorApplicator,
  completed: AuthenticateCompleted,
}
</script>

<style scoped>
.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

.card-rounded {
  border-radius: 8px;
}
</style>