handshakes

pages/auth/failed.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="min-h-full w-full flex items-center justify-center">
+    <div class="flex flex-col items-center">
+      <XCircleIcon class="h-12 w-12 text-red-600" aria-hidden="true" />
+      <div class="mt-3 text-center sm:mt-5">
+        <h1 class="text-3xl font-semibold font-display leading-6 text-zinc-100">
+          Connection failed
+        </h1>
+        <div class="mt-4">
+          <p class="text-sm text-zinc-400 max-w-sm">
+            Drop encountered an error while connecting to your instance.
+          </p>
+        </div>
+        <div class="mt-10 flex items-center justify-center gap-x-6">
+          <NuxtLink href="/auth" class="text-sm font-semibold text-zinc-100"
+            ><span aria-hidden="true">&larr;</span> Back to authentication
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { XCircleIcon } from "@heroicons/vue/16/solid";
+
+definePageMeta({
+  layout: "mini",
+});
+</script>