feat: create sign in page

pages/premium/index.vue

@@ -18,6 +18,12 @@
     { title: 'Support the development', hasAdditionalInfo: false }
   ]
 
+  useSeoMeta({
+    title: 'Premium',
+
+    description: 'Enhance your experience with the Premium subscription'
+  })
+
   definePageMeta({
     middleware: 'auth',
 

pages/premium/sign-in.vue

@@ -1,6 +1,22 @@
 <script lang="ts" setup>
   const { status, data, signIn, signOut } = useAuth()
 
+  async function onSubmit(event: Event) {
+    const password = (event.target as HTMLFormElement).elements.namedItem('password')?.value
+
+    if (!password) {
+      return
+    }
+
+    await signIn('credentials', { username: '_', password })
+  }
+
+  useSeoMeta({
+    title: 'Sign in',
+
+    description: 'Sign in to the Rule 34 App.'
+  })
+
   definePageMeta({
     middleware: 'auth',
 
@@ -12,11 +28,82 @@
 </script>
 
 <template>
-  <main>
-    <p>Sign-In:</p>
-    <!-- NOTE: Here we hard-coded username and password, on your own page this should probably be connected to two inputs for username + password -->
-    <button @click="signIn('credentials', { username: '_', password: '1CBCB551-F5E3485E-A66CCA18-CE943D51' })">
-      Username and Password
-    </button>
+  <main class="container mx-auto max-w-3xl flex-1 px-4 sm:px-6 lg:px-8">
+    <!-- -->
+
+    <!-- Sign in -->
+    <section class="-mt-6 flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
+      <div class="sm:mx-auto sm:w-full sm:max-w-sm">
+        <img
+          alt="Logo"
+          class="mx-auto h-10 w-auto"
+          src="/logo.svg"
+        />
+
+        <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-base-content-highlight">
+          Sign in
+        </h2>
+      </div>
+
+      <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+        <form
+          class="space-y-6"
+          @submit.prevent="onSubmit"
+        >
+          <div>
+            <!-- License key-->
+            <div class="flex items-center justify-between">
+              <label
+                class="block text-sm font-medium leading-6 text-base-content-highlight"
+                for="license"
+              >
+                License
+              </label>
+              <div class="text-sm">
+                <NuxtLink
+                  class="hover:hover-text-util focus-visible:focus-util font-semibold"
+                  href="https://app.gumroad.com/library?query=Rule+34+App"
+                >
+                  Forgot license?
+                </NuxtLink>
+              </div>
+            </div>
+
+            <div class="mt-2">
+              <input
+                id="license"
+                autocomplete="current-password"
+                class="focus-visible:focus-util block w-full rounded-md border-0 bg-base-0/5 py-1.5 text-base-content-highlight shadow-sm ring-1 ring-inset ring-base-0/10 focus-visible:ring-inset sm:text-sm sm:leading-6"
+                name="password"
+                required
+                type="password"
+              />
+            </div>
+          </div>
+
+          <div>
+            <button
+              class="focus-visible:focus-util hover:hover-text-util flex w-full justify-center rounded-md bg-primary-500 px-3 py-1.5 text-sm font-semibold leading-6 text-base-content-highlight shadow-sm hover:bg-primary-400"
+              type="submit"
+            >
+              Sign in
+            </button>
+          </div>
+        </form>
+
+        <p class="mt-10 text-center text-sm">
+          Not a Premium member?
+
+          {{ ' ' }}
+
+          <NuxtLink
+            class="focus-visible:focus-util font-semibold leading-6 text-primary-400 hover:text-primary-300"
+            href="/premium"
+          >
+            Subscribe now
+          </NuxtLink>
+        </p>
+      </div>
+    </section>
   </main>
 </template>

tailwind.config.js

@@ -53,11 +53,5 @@ module.exports = {
     }
   },
 
-  plugins: [
-    require('@tailwindcss/forms')({
-      strategy: 'class'
-    }),
-
-    require('@headlessui/tailwindcss')
-  ]
+  plugins: [require('@tailwindcss/forms'), require('@headlessui/tailwindcss')]
 }