From b98c9a7bfbdace891f4577a297213c10cb5f1f71 Mon Sep 17 00:00:00 2001
From: Michael Dausmann <mdausmann@gmail.com>
Date: Sat, 22 Apr 2023 23:52:36 +1000
Subject: [PATCH] style signin and legal pages

---
 pages/index.vue   |  6 ++--
 pages/privacy.vue |  3 +-
 pages/signin.vue  | 64 +++++++++++++++++----------------------
 pages/signup.vue  | 77 +++++++++++++++++++++++------------------------
 pages/terms.vue   |  2 +-
 5 files changed, 69 insertions(+), 83 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index e2a2263..5446587 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -7,12 +7,12 @@ const user = useSupabaseUser()
   })
 </script>
 <template>
-  <div class="container mx-auto">
+  <div class="container mx-auto m-5">
     <!-- Hero section -->
     <section class="bg-gray-100 py-20">
       <div class="container mx-auto">
         <div class="grid grid-cols-1 md:grid-cols-2 gap-16">
-          <div>
+          <div class="m-5">
             <h1 class="text-5xl font-bold mb-4">
               Build Your Next SAAS Faster
             </h1>
@@ -22,7 +22,7 @@ const user = useSupabaseUser()
               industry leading features make it easy to get up and running in no time. Look! this guy is working so fast,
               his hands are just a blur.. you could be this fast.
             </p>
-            <a href="#" class="inline-block py-3 px-6 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Get Started</a>
+            <NuxtLink to="/signup" class="inline-block py-3 px-6 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Get Started</NuxtLink>
           </div>
           <div>
             <img src="~/assets/images/saas_landing_main.jpeg"
diff --git a/pages/privacy.vue b/pages/privacy.vue
index c57b313..a39e532 100644
--- a/pages/privacy.vue
+++ b/pages/privacy.vue
@@ -1,6 +1,5 @@
 <template>
-  <div>
-
+  <div class="prose lg:prose-xl m-5">
     <h1>Privacy Statement</h1>
 
     <p>Your privacy is important to us. This privacy statement explains what personal data we collect from you and how we
diff --git a/pages/signin.vue b/pages/signin.vue
index 6c2b668..19c4783 100644
--- a/pages/signin.vue
+++ b/pages/signin.vue
@@ -8,20 +8,7 @@
   const email = ref('')
   const password = ref('')
 
-  const handleOtpLogin = async () => {
-    try {
-      loading.value = true
-      const { error } = await supabase.auth.signInWithOtp({ email: email.value })
-      if (error) throw error
-      alert('Check your email for the login link!')
-    } catch (error) {
-      alert(error)
-    } finally {
-      loading.value = false
-    }
-  }
-
-  const handleStandardLogin = async () => {
+  const handleStandardSignin = async () => {
     try {
       loading.value = true
       const { error } = await supabase.auth.signInWithPassword({ email: email.value, password: password.value })
@@ -41,28 +28,31 @@
   })  
 </script>
 <template>
-  <div>
-    <h3>Sign In</h3>
-    <form @submit.prevent="handleStandardLogin">
-      <label for="email">Email:</label>
-      <input class="inputField" type="email" id="email" placeholder="Your email" v-model="email" />
-      <label for="password">Password:</label>
-      <input class="inputField" type="password" id="password" placeholder="Password" v-model="password" />
-      <p>By signing in, I agree to the <NuxtLink to="/privacy">Privacy Statement</NuxtLink> and <NuxtLink to="/terms">Terms of Service</NuxtLink>.</p>
-
-      <button type="submit" :disabled="loading">Sign In</button>
-    </form>
-
-    <form @submit.prevent="handleOtpLogin">
-      <label for="email">Email:</label>
-      <input class="inputField" type="email" id="email" placeholder="Your email" v-model="email" />
-      <p>By signing in, I agree to the <NuxtLink to="/privacy">Privacy Statement</NuxtLink> and <NuxtLink to="/terms">Terms of Service</NuxtLink>.</p>
-
-      <button type="submit" :disabled="loading">Sign In using Magic Link</button>
-    </form>
-
-    <p>or sign in with</p>
-
-    <button @click="supabase.auth.signInWithOAuth({provider: 'google'})">Google</button>
+  <div class="flex flex-col items-center justify-center h-screen bg-gray-100">
+    <div class="w-full max-w-md p-6 space-y-6 bg-white rounded-lg shadow-lg">
+      <h1 class="text-3xl font-bold text-center">Sign in</h1>
+      <form @submit.prevent="handleStandardSignin" class="space-y-4">
+        <div>
+          <label for="email" class="block mb-2 font-bold">Email</label>
+          <input v-model="email" id="email" type="email" class="w-full p-2 border border-gray-400 rounded-md"
+            placeholder="Enter your email" required>
+        </div>
+        <div>
+          <label for="password" class="block mb-2 font-bold">Password</label>
+          <input v-model="password" id="password" type="password" class="w-full p-2 border border-gray-400 rounded-md"
+            placeholder="Enter your password" required>
+        </div>
+        <button :disabled="loading || password === ''" type="submit"
+          class="w-full py-2 text-white bg-indigo-600 rounded-md hover:bg-indigo-700">Sign in</button>
+      </form>
+      <p class="text-center">or</p>
+      <button @click="supabase.auth.signInWithOAuth({ provider: 'google' })"
+        class="w-full py-2 text-white bg-red-600 rounded-md hover:bg-red-700">
+        <span class="flex items-center justify-center space-x-2">
+          <Icon name="fa-brands:google" class="w-5 h-5" />
+          <span>Sign in with Google</span>
+        </span>
+      </button>
+    </div>
   </div>
 </template>
diff --git a/pages/signup.vue b/pages/signup.vue
index cae9161..5671341 100644
--- a/pages/signup.vue
+++ b/pages/signup.vue
@@ -7,19 +7,6 @@
   const password = ref('')
   const confirmPassword = ref('')
 
-  const handleOtpLogin = async () => {
-    try {
-      loading.value = true
-      const { error } = await supabase.auth.signInWithOtp({ email: email.value })
-      if (error) throw error
-      alert('Check your email for the login link!')
-    } catch (error) {
-      alert(error)
-    } finally {
-      loading.value = false
-    }
-  }
-
   const handleStandardSignup = async () => {
     try {
       loading.value = true
@@ -34,35 +21,45 @@
 
   watchEffect(() => {
     if (user.value) {
-      navigateTo('/dashboard', {replace: true})
+      navigateTo('/dashboard', { replace: true })
     }
-  })  
+  })
 </script>
 <template>
-  <div>
-    <h3>Sign Up</h3>
-    <form @submit.prevent="handleStandardSignup">
-      <label for="email">Email:</label>
-      <input class="inputField" type="email" id="email" placeholder="Your email" v-model="email" />
-      <label for="password">Password:</label>
-      <input class="inputField" type="password" id="password" placeholder="Password" v-model="password" />
-      <label for="confirm_password">Confirm Password:</label>
-      <input class="inputField" type="password" id="convirm_password" placeholder="Confirm Password" v-model="confirmPassword" />
-      <p>By proceeding, I agree to the <NuxtLink to="/privacy">Privacy Statement</NuxtLink> and <NuxtLink to="/terms">Terms of Service</NuxtLink>.</p>
-      
-      <button type="submit" :disabled="loading || (confirmPassword !== password)">Sign Up</button>
-    </form>
-
-    <form @submit.prevent="handleOtpLogin">
-      <label for="email">Email:</label>
-      <input class="inputField" type="email" id="email" placeholder="Your email" v-model="email" />
-      <p>By proceeding, I agree to the <NuxtLink to="/privacy">Privacy Statement</NuxtLink> and <NuxtLink to="/terms">Terms of Service</NuxtLink>.</p>
-      
-      <button type="submit" :disabled="loading">Sign Up using Magic Link</button>
-    </form>
-
-    <p>or sign up with</p>
-
-    <button @click="supabase.auth.signInWithOAuth({provider: 'google'})">Google</button>
+  <div class="flex flex-col items-center justify-center h-screen bg-gray-100">
+    <div class="w-full max-w-md p-6 space-y-6 bg-white rounded-lg shadow-lg">
+      <h1 class="text-3xl font-bold text-center">Sign up</h1>
+      <form @submit.prevent="handleStandardSignup" class="space-y-4">
+        <div>
+          <label for="email" class="block mb-2 font-bold">Email</label>
+          <input v-model="email" id="email" type="email" class="w-full p-2 border border-gray-400 rounded-md"
+            placeholder="Enter your email" required>
+        </div>
+        <div>
+          <label for="password" class="block mb-2 font-bold">Password</label>
+          <input v-model="password" id="password" type="password" class="w-full p-2 border border-gray-400 rounded-md"
+            placeholder="Enter your password" required>
+        </div>
+        <div>
+          <label for="confirmPassword" class="block mb-2 font-bold">Confirm Password</label>
+          <input v-model="confirmPassword" id="confirmPassword" type="password"
+            class="w-full p-2 border border-gray-400 rounded-md" placeholder="Confirm your password" required>
+        </div>
+        <button :disabled="loading || password === '' || (confirmPassword !== password)" type="submit"
+          class="w-full py-2 text-white bg-indigo-600 rounded-md hover:bg-indigo-700">Sign up</button>
+      </form>
+      <p class="text-center">or</p>
+      <button @click="supabase.auth.signInWithOAuth({ provider: 'google' })"
+        class="w-full py-2 text-white bg-red-600 rounded-md hover:bg-red-700">
+        <span class="flex items-center justify-center space-x-2">
+          <Icon name="fa-brands:google" class="w-5 h-5" />
+          <span>Sign up with Google</span>
+        </span>
+      </button>
+      <p class="mt-4 text-xs text-center text-gray-500">
+        By proceeding, I agree to the <NuxtLink to="/privacy">Privacy Statement</NuxtLink> and <NuxtLink to="/terms">Terms
+          of Service</NuxtLink>
+      </p>
+    </div>
   </div>
 </template>
diff --git a/pages/terms.vue b/pages/terms.vue
index e305bec..4ca801a 100644
--- a/pages/terms.vue
+++ b/pages/terms.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="prose lg:prose-xl m-5">
     <h1>Terms of Service</h1>
 
     <p>These terms of service (the "Agreement") govern your use of our website and services (collectively, the