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

60
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 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> <div>
<h3>Sign In</h3> <label for="email" class="block mb-2 font-bold">Email</label>
<form @submit.prevent="handleStandardLogin"> <input v-model="email" id="email" type="email" class="w-full p-2 border border-gray-400 rounded-md"
<label for="email">Email:</label> placeholder="Enter your email" required>
<input class="inputField" type="email" id="email" placeholder="Your email" v-model="email" /> </div>
<label for="password">Password:</label> <div>
<input class="inputField" type="password" id="password" placeholder="Password" v-model="password" /> <label for="password" class="block mb-2 font-bold">Password</label>
<p>By signing in, I agree to the <NuxtLink to="/privacy">Privacy Statement</NuxtLink> and <NuxtLink to="/terms">Terms of Service</NuxtLink>.</p> <input v-model="password" id="password" type="password" class="w-full p-2 border border-gray-400 rounded-md"
placeholder="Enter your password" required>
<button type="submit" :disabled="loading">Sign In</button> </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> </form>
<p class="text-center">or</p>
<form @submit.prevent="handleOtpLogin"> <button @click="supabase.auth.signInWithOAuth({ provider: 'google' })"
<label for="email">Email:</label> class="w-full py-2 text-white bg-red-600 rounded-md hover:bg-red-700">
<input class="inputField" type="email" id="email" placeholder="Your email" v-model="email" /> <span class="flex items-center justify-center space-x-2">
<p>By signing in, I agree to the <NuxtLink to="/privacy">Privacy Statement</NuxtLink> and <NuxtLink to="/terms">Terms of Service</NuxtLink>.</p> <Icon name="fa-brands:google" class="w-5 h-5" />
<span>Sign in with Google</span>
<button type="submit" :disabled="loading">Sign In using Magic Link</button> </span>
</form> </button>
</div>
<p>or sign in with</p>
<button @click="supabase.auth.signInWithOAuth({provider: 'google'})">Google</button>
</div> </div>
</template> </template>

71
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 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> <div>
<h3>Sign Up</h3> <label for="email" class="block mb-2 font-bold">Email</label>
<form @submit.prevent="handleStandardSignup"> <input v-model="email" id="email" type="email" class="w-full p-2 border border-gray-400 rounded-md"
<label for="email">Email:</label> placeholder="Enter your email" required>
<input class="inputField" type="email" id="email" placeholder="Your email" v-model="email" /> </div>
<label for="password">Password:</label> <div>
<input class="inputField" type="password" id="password" placeholder="Password" v-model="password" /> <label for="password" class="block mb-2 font-bold">Password</label>
<label for="confirm_password">Confirm Password:</label> <input v-model="password" id="password" type="password" class="w-full p-2 border border-gray-400 rounded-md"
<input class="inputField" type="password" id="convirm_password" placeholder="Confirm Password" v-model="confirmPassword" /> placeholder="Enter your password" required>
<p>By proceeding, I agree to the <NuxtLink to="/privacy">Privacy Statement</NuxtLink> and <NuxtLink to="/terms">Terms of Service</NuxtLink>.</p> </div>
<div>
<button type="submit" :disabled="loading || (confirmPassword !== password)">Sign Up</button> <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> </form>
<p class="text-center">or</p>
<form @submit.prevent="handleOtpLogin"> <button @click="supabase.auth.signInWithOAuth({ provider: 'google' })"
<label for="email">Email:</label> class="w-full py-2 text-white bg-red-600 rounded-md hover:bg-red-700">
<input class="inputField" type="email" id="email" placeholder="Your email" v-model="email" /> <span class="flex items-center justify-center space-x-2">
<p>By proceeding, I agree to the <NuxtLink to="/privacy">Privacy Statement</NuxtLink> and <NuxtLink to="/terms">Terms of Service</NuxtLink>.</p> <Icon name="fa-brands:google" class="w-5 h-5" />
<span>Sign up with Google</span>
<button type="submit" :disabled="loading">Sign Up using Magic Link</button> </span>
</form> </button>
<p class="mt-4 text-xs text-center text-gray-500">
<p>or sign up with</p> By proceeding, I agree to the <NuxtLink to="/privacy">Privacy Statement</NuxtLink> and <NuxtLink to="/terms">Terms
of Service</NuxtLink>
<button @click="supabase.auth.signInWithOAuth({provider: 'google'})">Google</button> </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