feat: basic login page

layouts/none.vue

@@ -0,0 +1,3 @@
+<template>
+  <slot />
+</template>

pages/login/callback.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+definePageMeta({
+  layout: 'none',
+})
+
 const { query } = useRoute()
 
 onMounted(async () => {
@@ -11,7 +15,9 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div>
+  <div h-full flex>
+    <div ma>
       Login...
     </div>
+  </div>
 </template>

pages/login/index.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
-const { server, token } = useAppCookies()
+definePageMeta({
+  layout: 'none',
+})
+
+const server = ref(useAppCookies().server.value)
 
 async function oauth() {
   const a = document.createElement('a')
@@ -10,23 +14,18 @@ async function oauth() {
 </script>
 
 <template>
-  <div p4>
+  <div h-full text-center justify-center flex="~ col items-center gap2">
-    <button @click="oauth()">
+    <div text-4xl mb-10>
-      OAuth
+      Nuxtodon
+    </div>
+
+    <div>Mastodon Server</div>
+    <div bg-gray:10 px2 py1 rounded border="~ border" w-50 mxa flex>
+      <span op25 mr1>https://</span>
+      <input v-model="server" outline-none bg-transparent>
+    </div>
+    <button bg-teal6 px2 py1 rounded w-20 mxa mt-5 @click="oauth()">
+      Login
     </button>
-    <input
-      v-model="server"
-      placeholder="Server URL"
-      bg-transparent text-current
-      border="~ border" p="x2 y1" w-full
-      outline-none
-    >
-    <input
-      v-model="token"
-      placeholder="Token"
-      bg-transparent text-current
-      border="~ border" p="x2 y1" w-full
-      outline-none
-    >
   </div>
 </template>