Files
afrobiz/pages/forgotpassword.vue
2023-05-06 18:31:00 +10:00

39 lines
1.4 KiB
Vue

<script setup lang="ts">
const supabase = useSupabaseAuthClient();
const config = useRuntimeConfig();
const loading = ref(false)
const email = ref('')
const sendResetPasswordLink = async () => {
try {
loading.value = true
const { data, error } = await supabase.auth.resetPasswordForEmail(email.value, {
redirectTo: `${config.public.siteRootUrl}/resetpassword`,
})
if (error) throw error
else alert('Password Reset link sent, check your email.');
} catch (error) {
alert(error)
} finally {
loading.value = false
}
}
</script>
<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">Forgot Pasword</h1>
<form @submit.prevent="sendResetPasswordLink" 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>
<button :disabled="loading || email === ''" type="submit"
class="w-full py-2 text-white bg-indigo-600 rounded-md hover:bg-indigo-700">Send Reset Password Link</button>
</form>
</div>
</div>
</template>