From 5f8e41e5644443cf7f13b65701da7a691d42ba55 Mon Sep 17 00:00:00 2001
From: Zoey <zoeykaiser8@gmail.com>
Date: Tue, 6 Dec 2022 14:40:24 +0100
Subject: [PATCH] feat: Added locally unprotected route and API routes pages
 (#11)

---
 components/Navbar.vue          | 16 +++++++++
 components/api/APITableRow.vue | 26 ++++++++++++++
 pages/api-routes.vue           | 62 ++++++++++++++++++++++++++++++++++
 pages/protected/locally.vue    | 16 +++++++++
 4 files changed, 120 insertions(+)
 create mode 100644 components/api/APITableRow.vue
 create mode 100644 pages/api-routes.vue
 create mode 100644 pages/protected/locally.vue

diff --git a/components/Navbar.vue b/components/Navbar.vue
index 37bfcce..dff8a49 100644
--- a/components/Navbar.vue
+++ b/components/Navbar.vue
@@ -22,6 +22,22 @@
               Globally Protected
             </nuxt-link>
           </li>
+          <li>
+            <nuxt-link
+                href="/protected/locally"
+                class="block py-2 pr-4 pl-3 mx-2 rounded md:border-0 md:p-0 text-gray-400 md:hover:text-white hover:bg-gray-700 hover:text-white md:hover:bg-transparent"
+            >
+              Locally Unprotected
+            </nuxt-link>
+          </li>
+          <li>
+            <nuxt-link
+                href="/api-routes"
+                class="block py-2 pr-4 pl-3 mx-2 rounded md:border-0 md:p-0 text-gray-400 md:hover:text-white hover:bg-gray-700 hover:text-white md:hover:bg-transparent"
+            >
+              API Routes
+            </nuxt-link>
+          </li>
           <li class="hidden md:block border-l-2 border-gray-700" />
           <li class="flex items-center ml-2 md:space-x-4">
             <a
diff --git a/components/api/APITableRow.vue b/components/api/APITableRow.vue
new file mode 100644
index 0000000..d2d8a48
--- /dev/null
+++ b/components/api/APITableRow.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+export default {
+  props: {
+    route: String,
+    method: String,
+    link: String,
+  }
+}
+</script>
+
+<template>
+  <tr class="bg-gray-800 border-gray-700">
+    <th scope="row" class="py-4 px-6 font-medium whitespace-nowrap text-white">
+      {{ route }}
+    </th>
+    <td class="py-4 px-6 uppercase">
+      {{ method }}
+    </td>
+    <td class="py-4 px-6">
+      <nuxt-link :href="link" target="_blank">
+        View Route
+        <i class="fa fa-external-link" />
+      </nuxt-link>
+    </td>
+  </tr>
+</template>
diff --git a/pages/api-routes.vue b/pages/api-routes.vue
new file mode 100644
index 0000000..3c6f26f
--- /dev/null
+++ b/pages/api-routes.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="max-w-5xl mx-auto mt-5 px-5">
+    <div class="overflow-x-auto relative rounded">
+      <table class="w-full text-sm text-left text-gray-400">
+        <thead class="text-xs uppercase bg-gray-700 text-gray-400">
+        <tr>
+          <th scope="col" class="py-3 px-6">
+            Route
+          </th>
+          <th scope="col" class="py-3 px-6">
+            Method
+          </th>
+          <th scope="col" class="py-3 px-6">
+            Link
+          </th>
+        </tr>
+        </thead>
+        <tbody>
+          <APITableRow
+              route="/session"
+              method="get"
+              link="/api/auth/session"
+          />
+          <APITableRow
+              route="/csrf"
+              method="get"
+              link="/api/auth/csrf"
+          />
+          <APITableRow
+              route="/providers"
+              method="get"
+              link="/api/auth/providers"
+          />
+          <APITableRow
+            route="/signin"
+            method="get"
+            link="/api/auth/signin"
+          />
+          <APITableRow
+              route="/signin/:provider"
+              method="post"
+              link="/api/auth/signin/github"
+          />
+          <APITableRow
+              route="/callback/:provider"
+              method="get & post"
+              link="/api/auth/callback/github"
+          />
+          <APITableRow
+              route="/signout"
+              method="get & post"
+              link="/api/auth/signout"
+          />
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({ auth: false })
+</script>
diff --git a/pages/protected/locally.vue b/pages/protected/locally.vue
new file mode 100644
index 0000000..e56be13
--- /dev/null
+++ b/pages/protected/locally.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="text-center mt-10">
+    <h1 class="text-2xl font-bold">I am publicly available!</h1>
+    <h3>The global protecting is disabled via <a href="https://github.com/sidebase/nuxt-auth#disabling-the-global-middleware-locally" target="_blank">local middleware</a>.</h3>
+  </div>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({ auth: false })
+</script>
+
+<style scoped>
+a {
+  @apply text-green-600 underline hover:text-green-500;
+}
+</style>