♻️ Update the sign in web page to the latest API

web/src/components/Copyright.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="text-xs text-center opacity-80">
     <p>Copyright © {{ new Date().getFullYear() }} Solsynth</p>
-    <p>Powered by <a class="underline" href="#">Hydrogen.Identity</a></p>
+    <p>Powered by <a class="underline" href="https://git.solsynth.dev/Hydrogen/Passport">Hydrogen.Passport</a></p>
   </div>
 </template>

web/src/components/auth/Authenticate.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="flex items-center">
     <v-form class="flex-grow-1" @submit.prevent="submit">
-      <v-text-field label="Account ID" variant="solo" density="comfortable" :disabled="props.loading" v-model="probe" />
+      <v-text-field label="Username" variant="solo" density="comfortable" class="mb-3" :hide-details="true"
+                    :disabled="props.loading" v-model="probe" />
+      <v-text-field label="Password" variant="solo" density="comfortable" type="password" :disabled="props.loading"
+                    v-model="password" />
 
       <v-expand-transition>
         <v-alert v-show="error" variant="tonal" type="error" class="text-xs mb-3">
@@ -32,28 +35,29 @@ import { ref } from "vue"
 import { request } from "@/scripts/request"
 
 const probe = ref("")
+const password = ref("")
 
 const error = ref<string | null>(null)
 
 const props = defineProps<{ loading?: boolean }>()
-const emits = defineEmits(["swap", "update:loading", "update:factors", "update:challenge"])
+const emits = defineEmits(["swap", "update:loading", "update:ticket"])
 
 async function submit() {
-  if (!probe) return
+  if (!probe.value || !password.value) return
 
   emits("update:loading", true)
   const res = await request("/api/auth", {
-    method: "PUT",
+    method: "POST",
     headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ id: probe.value }),
+    body: JSON.stringify({ id: probe.value, password: password.value }),
   })
   if (res.status !== 200) {
     error.value = await res.text()
   } else {
     const data = await res.json()
-    emits("update:factors", data["factors"])
-    emits("update:challenge", data["challenge"])
-    emits("swap", "pick")
+    emits("update:ticket", data["ticket"])
+    if (data.is_finished) emits("swap", "completed")
+    else emits("swap", "mfa")
     error.value = null
   }
   emits("update:loading", false)

web/src/components/auth/AuthenticateCompleted.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <v-icon icon="mdi-lan-check" size="32" color="grey-darken-3" class="mb-3" />
+
+    <h1 class="font-bold text-xl">All Done!</h1>
+    <p>Welcome back! You just signed in right now! We're going to send you to jesus...</p>
+
+    <v-expand-transition>
+      <v-alert v-show="error" variant="tonal" type="error" class="text-xs mb-3">
+        Something went wrong... {{ error }}
+      </v-alert>
+    </v-expand-transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { request } from "@/scripts/request"
+import { useUserinfo } from "@/stores/userinfo"
+import { onMounted, ref } from "vue"
+import { useRoute, useRouter } from "vue-router"
+
+const route = useRoute()
+const router = useRouter()
+const userinfo = useUserinfo()
+
+const props = defineProps<{ loading?: boolean; currentFactor?: any; ticket?: any }>()
+const emits = defineEmits(["update:loading"])
+
+const error = ref<string | null>(null)
+
+async function load() {
+  emits("update:loading", true)
+  await getToken(props.ticket.grant_token)
+  await userinfo.readProfiles()
+  emits("update:loading", false)
+  setTimeout(() => callback(), 3000)
+}
+
+onMounted(() => load())
+
+async function getToken(tk: string) {
+  const res = await request("/api/auth/token", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      code: tk,
+      grant_type: "grant_token",
+    }),
+  })
+  if (res.status !== 200) {
+    const err = await res.text()
+    error.value = err
+    throw new Error(err)
+  } else {
+    error.value = null
+  }
+}
+
+function callback() {
+  if (route.query["close"]) {
+    window.close()
+  } else if (route.query["redirect_uri"]) {
+    window.open((route.query["redirect_uri"] as string) ?? "/", "_self")
+  } else {
+    router.push({ name: "dashboard" })
+  }
+}
+</script>

web/src/components/auth/FactorApplicator.vue

@@ -47,75 +47,37 @@
 
 <script setup lang="ts">
 import { request } from "@/scripts/request"
-import { useUserinfo } from "@/stores/userinfo"
 import { computed, ref } from "vue"
-import { useRoute, useRouter } from "vue-router"
 
 const password = ref("")
 
 const error = ref<string | null>(null)
 
-const props = defineProps<{ loading?: boolean; currentFactor?: any; challenge?: any }>()
-const emits = defineEmits(["swap", "update:challenge"])
-
-const route = useRoute()
-const router = useRouter()
-
-const { readProfiles } = useUserinfo()
+const props = defineProps<{ loading?: boolean; currentFactor?: any; ticket?: any }>()
+const emits = defineEmits(["swap", "update:ticket", "update:loading"])
 
 async function submit() {
-  const res = await request(`/api/auth`, {
+  emits("update:loading", true)
+  const res = await request(`/api/auth/mfa`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({
-      challenge_id: props.challenge?.id,
+      ticket_id: props.ticket?.id,
       factor_id: props.currentFactor?.id,
-      secret: password.value,
+      code: password.value,
     }),
   })
   if (res.status !== 200) {
     error.value = await res.text()
   } else {
     const data = await res.json()
-    if (data["is_finished"]) {
-      await getToken(data["session"]["grant_token"])
-      await readProfiles()
-      callback()
-    } else {
-      emits("swap", "pick")
-      emits("update:challenge", data["challenge"])
-      error.value = null
-      password.value = ""
-    }
-  }
-}
-
-async function getToken(tk: string) {
-  const res = await request("/api/auth/token", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({
-      code: tk,
-      grant_type: "grant_token",
-    }),
-  })
-  if (res.status !== 200) {
-    const err = await res.text()
-    error.value = err
-    throw new Error(err)
-  } else {
     error.value = null
+    password.value = ""
+    emits("update:ticket", data["ticket"])
+    if (data["is_finished"]) emits("swap", "completed")
+    else emits("swap", "mfa")
   }
-}
-
-function callback() {
-  if (route.query["closable"]) {
-    window.close()
-  } else if (route.query["redirect_uri"]) {
-    window.open((route.query["redirect_uri"] as string) ?? "/", "_self")
-  } else {
-    router.push({ name: "dashboard" })
-  }
+  emits("update:loading", false)
 }
 
 const inputType = computed(() => {
@@ -124,6 +86,8 @@ const inputType = computed(() => {
       return "text"
     case 1:
       return "one-time-password"
+    default:
+      return "unknown"
   }
 })
 </script>

web/src/components/auth/FactorPicker.vue

@@ -4,7 +4,8 @@
       <v-card class="mb-3">
         <v-list density="compact" color="primary">
           <v-list-item
-            v-for="item in props.factors ?? []"
+            v-for="(item, idx) in factors ?? []"
+            :key="idx"
             :prepend-icon="getFactorType(item)?.icon"
             :title="getFactorType(item)?.label"
             :active="focus === item.id"
@@ -30,18 +31,32 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue"
+import { onMounted, ref } from "vue"
 import { request } from "@/scripts/request"
 
 const focus = ref<number | null>(null)
+const factors = ref<any[]>([])
 
 const error = ref<string | null>(null)
 
-const props = defineProps<{ factors?: any[]; challenge?: any }>()
+const props = defineProps<{ ticket?: any }>()
 const emits = defineEmits(["swap", "update:loading", "update:currentFactor"])
 
+async function load() {
+  emits("update:loading", true)
+  const res = await request(`/api/auth/factors?ticketId=${props.ticket.ticketId}`)
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    factors.value = await res.json()
+  }
+  emits("update:loading", false)
+}
+
+onMounted(() => load())
+
 async function submit() {
-  if (!focus) return
+  if (!focus.value) return
 
   emits("update:loading", true)
   const res = await request(`/api/auth/factors/${focus.value}`, {
@@ -50,7 +65,7 @@ async function submit() {
   if (res.status !== 200 && res.status !== 204) {
     error.value = await res.text()
   } else {
-    const item = props.factors?.find((item: any) => item.id === focus.value)
+    const item = factors.value.find((item: any) => item.id === focus.value)
     emits("update:currentFactor", item)
     emits("swap", "applicator")
     error.value = null
@@ -61,15 +76,13 @@ async function submit() {
 
 function getFactorType(item: any) {
   switch (item.type) {
-    case 0:
-      return { icon: "mdi-form-textbox-password", label: "Password Validation" }
     case 1:
-      return { icon: "mdi-email-fast", label: "Email One Time Password" }
+      return { icon: "mdi-email-fast", label: "Email Validation" }
   }
 }
 
 function getFactorAvailable(factor: any) {
-  const blacklist: number[] = props.challenge?.blacklist_factors ?? []
+  const blacklist: number[] = props.ticket?.blacklist_factors ?? []
   return blacklist.includes(factor.id)
 }
 </script>