From af2c6d622b39289557e6cc4110050d09dd650ad6 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 21 Nov 2022 18:27:28 +0800
Subject: [PATCH] feat: basic login page

---
 layouts/none.vue         |  3 +++
 pages/login/callback.vue | 10 ++++++++--
 pages/login/index.vue    | 35 +++++++++++++++++------------------
 3 files changed, 28 insertions(+), 20 deletions(-)
 create mode 100644 layouts/none.vue

diff --git a/layouts/none.vue b/layouts/none.vue
new file mode 100644
index 00000000..ba4672f5
--- /dev/null
+++ b/layouts/none.vue
@@ -0,0 +1,3 @@
+<template>
+  <slot />
+</template>
diff --git a/pages/login/callback.vue b/pages/login/callback.vue
index e935cbee..cdcf9473 100644
--- a/pages/login/callback.vue
+++ b/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>
-    Login...
+  <div h-full flex>
+    <div ma>
+      Login...
+    </div>
   </div>
 </template>
diff --git a/pages/login/index.vue b/pages/login/index.vue
index 91e67ef5..9b6169c4 100644
--- a/pages/login/index.vue
+++ b/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>
-    <button @click="oauth()">
-      OAuth
+  <div h-full text-center justify-center flex="~ col items-center gap2">
+    <div text-4xl mb-10>
+      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>