streaper2/maaw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style signin and legal pages

Browse Source
This commit is contained in:
Michael Dausmann
2023-04-22 23:52:36 +10:00
parent a5f894d59a
commit b98c9a7bfb
5 changed files with 69 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
pages/index.vue
View File

@@ -7,12 +7,12 @@ const user = useSupabaseUser()
}) })
</script> </script>
<template> <template>
<div class="container mx-auto"> <div class="container mx-auto m-5">
<!-- Hero section --> <!-- Hero section -->
<section class="bg-gray-100 py-20"> <section class="bg-gray-100 py-20">
<div class="container mx-auto"> <div class="container mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-16"> <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"> <h1 class="text-5xl font-bold mb-4">
Build Your Next SAAS Faster Build Your Next SAAS Faster
</h1> </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, 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. his hands are just a blur.. you could be this fast.
</p> </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>
<div> <div>
<img src="~/assets/images/saas_landing_main.jpeg" <img src="~/assets/images/saas_landing_main.jpeg"

3
pages/privacy.vue
View File

@@ -1,6 +1,5 @@
<template> <template>
<div> <div class="prose lg:prose-xl m-5">
<h1>Privacy Statement</h1> <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 <p>Your privacy is important to us. This privacy statement explains what personal data we collect from you and how we

64
pages/signin.vue
View File

@@ -8,20 +8,7 @@
const email = ref('') const email = ref('')
const password = ref('') const password = ref('')
const handleOtpLogin = async () => { const handleStandardSignin = 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 () => {
try { try {
loading.value = true loading.value = true
const { error } = await supabase.auth.signInWithPassword({ email: email.value, password: password.value }) const { error } = await supabase.auth.signInWithPassword({ email: email.value, password: password.value })
@@ -41,28 +28,31 @@
}) })
</script> </script>
<template> <template>
<div> <div class="flex flex-col items-center justify-center h-screen bg-gray-100">
<h3>Sign In</h3> <div class="w-full max-w-md p-6 space-y-6 bg-white rounded-lg shadow-lg">
<form @submit.prevent="handleStandardLogin"> <h1 class="text-3xl font-bold text-center">Sign in</h1>
<label for="email">Email:</label> <form @submit.prevent="handleStandardSignin" class="space-y-4">
<input class="inputField" type="email" id="email" placeholder="Your email" v-model="email" /> <div>
<label for="password">Password:</label> <label for="email" class="block mb-2 font-bold">Email</label>
<input class="inputField" type="password" id="password" placeholder="Password" v-model="password" /> <input v-model="email" id="email" type="email" class="w-full p-2 border border-gray-400 rounded-md"
<p>By signing in, I agree to the <NuxtLink to="/privacy">Privacy Statement</NuxtLink> and <NuxtLink to="/terms">Terms of Service</NuxtLink>.</p> placeholder="Enter your email" required>
</div>
<button type="submit" :disabled="loading">Sign In</button> <div>
</form> <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"
<form @submit.prevent="handleOtpLogin"> placeholder="Enter your password" required>
<label for="email">Email:</label> </div>
<input class="inputField" type="email" id="email" placeholder="Your email" v-model="email" /> <button :disabled="loading || password === ''" type="submit"
<p>By signing in, I agree to the <NuxtLink to="/privacy">Privacy Statement</NuxtLink> and <NuxtLink to="/terms">Terms of Service</NuxtLink>.</p> class="w-full py-2 text-white bg-indigo-600 rounded-md hover:bg-indigo-700">Sign in</button>
</form>
<button type="submit" :disabled="loading">Sign In using Magic Link</button> <p class="text-center">or</p>
</form> <button @click="supabase.auth.signInWithOAuth({ provider: 'google' })"
class="w-full py-2 text-white bg-red-600 rounded-md hover:bg-red-700">
<p>or sign in with</p> <span class="flex items-center justify-center space-x-2">
<Icon name="fa-brands:google" class="w-5 h-5" />
<button @click="supabase.auth.signInWithOAuth({provider: 'google'})">Google</button> <span>Sign in with Google</span>
</span>
</button>
</div>
</div> </div>
</template> </template>

77
pages/signup.vue
View File

@@ -7,19 +7,6 @@
const password = ref('') const password = ref('')
const confirmPassword = 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 () => { const handleStandardSignup = async () => {
try { try {
loading.value = true loading.value = true
@@ -34,35 +21,45 @@
watchEffect(() => { watchEffect(() => {
if (user.value) { if (user.value) {
navigateTo('/dashboard', {replace: true}) navigateTo('/dashboard', { replace: true })
} }
}) })
</script> </script>
<template> <template>
<div> <div class="flex flex-col items-center justify-center h-screen bg-gray-100">
<h3>Sign Up</h3> <div class="w-full max-w-md p-6 space-y-6 bg-white rounded-lg shadow-lg">
<form @submit.prevent="handleStandardSignup"> <h1 class="text-3xl font-bold text-center">Sign up</h1>
<label for="email">Email:</label> <form @submit.prevent="handleStandardSignup" class="space-y-4">
<input class="inputField" type="email" id="email" placeholder="Your email" v-model="email" /> <div>
<label for="password">Password:</label> <label for="email" class="block mb-2 font-bold">Email</label>
<input class="inputField" type="password" id="password" placeholder="Password" v-model="password" /> <input v-model="email" id="email" type="email" class="w-full p-2 border border-gray-400 rounded-md"
<label for="confirm_password">Confirm Password:</label> placeholder="Enter your email" required>
<input class="inputField" type="password" id="convirm_password" placeholder="Confirm Password" v-model="confirmPassword" /> </div>
<p>By proceeding, I agree to the <NuxtLink to="/privacy">Privacy Statement</NuxtLink> and <NuxtLink to="/terms">Terms of Service</NuxtLink>.</p> <div>
<label for="password" class="block mb-2 font-bold">Password</label>
<button type="submit" :disabled="loading || (confirmPassword !== password)">Sign Up</button> <input v-model="password" id="password" type="password" class="w-full p-2 border border-gray-400 rounded-md"
</form> placeholder="Enter your password" required>
</div>
<form @submit.prevent="handleOtpLogin"> <div>
<label for="email">Email:</label> <label for="confirmPassword" class="block mb-2 font-bold">Confirm Password</label>
<input class="inputField" type="email" id="email" placeholder="Your email" v-model="email" /> <input v-model="confirmPassword" id="confirmPassword" type="password"
<p>By proceeding, I agree to the <NuxtLink to="/privacy">Privacy Statement</NuxtLink> and <NuxtLink to="/terms">Terms of Service</NuxtLink>.</p> class="w-full p-2 border border-gray-400 rounded-md" placeholder="Confirm your password" required>
</div>
<button type="submit" :disabled="loading">Sign Up using Magic Link</button> <button :disabled="loading || password === '' || (confirmPassword !== password)" type="submit"
</form> class="w-full py-2 text-white bg-indigo-600 rounded-md hover:bg-indigo-700">Sign up</button>
</form>
<p>or sign up with</p> <p class="text-center">or</p>
<button @click="supabase.auth.signInWithOAuth({ provider: 'google' })"
<button @click="supabase.auth.signInWithOAuth({provider: 'google'})">Google</button> 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> </div>
</template> </template>

2
pages/terms.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div> <div class="prose lg:prose-xl m-5">
<h1>Terms of Service</h1> <h1>Terms of Service</h1>
<p>These terms of service (the "Agreement") govern your use of our website and services (collectively, the <p>These terms of service (the "Agreement") govern your use of our website and services (collectively, the