forget and recover password functionalities
This commit is contained in:
@@ -0,0 +1,89 @@
|
||||
<script setup>
|
||||
const email = ref("");
|
||||
const error = ref(null);
|
||||
const message = ref("");
|
||||
const loading = ref(false);
|
||||
|
||||
const config = useRuntimeConfig();
|
||||
const api = config.public.apiBase;
|
||||
const router = useRouter();
|
||||
const notifications = useNotificationStore();
|
||||
|
||||
async function handleResetRequest() {
|
||||
error.value = null;
|
||||
message.value = "";
|
||||
|
||||
if (!email.value) {
|
||||
error.value = "Email is required.";
|
||||
return;
|
||||
}
|
||||
|
||||
if (!/^\S+@\S+\.\S+$/.test(email.value)) {
|
||||
error.value = "Please enter a valid email address.";
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
|
||||
try {
|
||||
await $fetch(`${api}/auth/recover-password`, {
|
||||
method: "POST",
|
||||
body: { email: email.value },
|
||||
onResponse({ response }) {
|
||||
if (response.status === 200) {
|
||||
notifications.success("Password reset email sent.");
|
||||
router.push("/auth/login")
|
||||
}
|
||||
},
|
||||
onResponseError() {
|
||||
error.value = "Email not found in our records.";
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
if (!error.value) error.value = "Network error: Connection to server failed.";
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="min-h-screen bg-gray-100 dark:bg-gray-950 flex flex-col items-center justify-center p-6 transition-colors duration-300">
|
||||
<Transition appear enter-active-class="transition duration-700 ease-out"
|
||||
enter-from-class="translate-y-8 opacity-0" enter-to-class="translate-y-0 opacity-100">
|
||||
|
||||
<div
|
||||
class="w-full max-w-md bg-white dark:bg-gray-900 rounded-xl shadow-lg p-8 border dark:border-gray-800 transition-colors">
|
||||
<h1 class="text-3xl font-bold text-gray-800 dark:text-gray-100! mb-8 text-center">Reset Password</h1>
|
||||
|
||||
<form class="space-y-6" @submit.prevent="handleResetRequest">
|
||||
<div>
|
||||
<label for="email"
|
||||
class="block text-sm font-semibold text-gray-600 dark:text-gray-400 mb-1.5 ml-1">
|
||||
Email Address
|
||||
</label>
|
||||
<input id="email" v-model="email" type="email" :class="[
|
||||
'w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all text-gray-900 dark:text-white',
|
||||
error ? 'border-red-500 ring-1 ring-red-500' : 'border-gray-200 dark:border-gray-700'
|
||||
]" placeholder="[email protected]">
|
||||
<p v-if="error" class="mt-1.5 text-xs text-red-500! ml-1 font-medium">{{ error }}</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center gap-4 pt-2">
|
||||
<button type="submit" :disabled="loading"
|
||||
class="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-bold py-3 rounded-lg shadow-md hover:shadow-lg transform active:scale-95 transition-all duration-200">
|
||||
{{ loading ? 'SENDING...' : 'SEND RESET LINK' }}
|
||||
</button>
|
||||
|
||||
<nuxt-link to="/auth/login"
|
||||
class="text-sm text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors">
|
||||
Back to Login
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
+39
-45
@@ -6,7 +6,7 @@
|
||||
|
||||
<div
|
||||
class="w-full max-w-md bg-white dark:bg-gray-900 rounded-xl shadow-lg p-8 border dark:border-gray-800 transition-colors">
|
||||
<h1 class="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-8 text-center capitalize">Login</h1>
|
||||
<h1 class="text-3xl font-bold text-gray-800 dark:text-white! mb-8 text-center capitalize">Login</h1>
|
||||
|
||||
<div v-if="globalError"
|
||||
class="mb-6 p-3 bg-red-100 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg text-red-700 dark:text-red-400 text-sm text-center">
|
||||
@@ -19,24 +19,29 @@
|
||||
<input v-model="loginFormData.email" type="email" :class="[
|
||||
'w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all text-gray-900 dark:text-white',
|
||||
errors.email ? 'border-red-500 ring-1 ring-red-500' : 'border-gray-200 dark:border-gray-700'
|
||||
]" placeholder="[email protected]" />
|
||||
<p v-if="errors.email" class="mt-1 text-xs text-red-500 ml-1">{{ errors.email }}</p>
|
||||
]" placeholder="[email protected]">
|
||||
<p v-if="errors.email" class="mt-1 text-xs text-red-500! ml-1">{{ errors.email }}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-600 dark:text-gray-400 mb-1.5 ml-1">Password</label>
|
||||
<input v-model="loginFormData.password" type="password" @keyup.enter="handleLogin" :class="[
|
||||
<input v-model="loginFormData.password" type="password" :class="[
|
||||
'w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all text-gray-900 dark:text-white',
|
||||
errors.password ? 'border-red-500 ring-1 ring-red-500' : 'border-gray-200 dark:border-gray-700'
|
||||
]" placeholder="••••••••" />
|
||||
<p v-if="errors.password" class="mt-1 text-xs text-red-500 ml-1">{{ errors.password }}</p>
|
||||
]" placeholder="••••••••" @keyup.enter="handleLogin">
|
||||
<p v-if="errors.password" class="mt-1 text-xs text-red-500! ml-1">{{ errors.password }}</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center pt-4">
|
||||
<button @click="handleLogin" :disabled="loading"
|
||||
class="w-1/2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-bold py-3 rounded-lg shadow-md hover:shadow-lg transform active:scale-95 transition-all duration-200">
|
||||
<div class="flex flex-col items-center gap-4 pt-2">
|
||||
<button :disabled="loading"
|
||||
class="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-bold py-3 rounded-lg shadow-md hover:shadow-lg transform active:scale-95 transition-all duration-200"
|
||||
@click="handleLogin">
|
||||
{{ loading ? 'AUTHENTICATING...' : 'LOGIN' }}
|
||||
</button>
|
||||
|
||||
<nuxt-link to="/auth/forgot-password" class="text-xs text-blue-600 hover:underline dark:text-blue-400">
|
||||
Forgot Password?
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -44,28 +49,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.delay-200 {
|
||||
animation-delay: 0.2s;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
<script setup>
|
||||
import { useAuthStore } from "~/stores/auth-store.js";
|
||||
import { storeToRefs } from "pinia";
|
||||
@@ -111,8 +94,11 @@ async function handleLogin() {
|
||||
console.log(response)
|
||||
token.value = response._data.token;
|
||||
user.value = response._data.user;
|
||||
router.push("/")
|
||||
//getUserInfo();
|
||||
if (response._data.user.mustChangePassword === true) {
|
||||
router.push("/profile/update-password");
|
||||
} else {
|
||||
router.push("/");
|
||||
}
|
||||
}
|
||||
},
|
||||
onResponseError({ response }) {
|
||||
@@ -130,18 +116,26 @@ async function handleLogin() {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
async function getUserInfo() {
|
||||
try {
|
||||
const data = await $fetch(`${api}/auth/user`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Authorization: `Bearer ${token.value}`,
|
||||
},
|
||||
});
|
||||
user.value = data;
|
||||
} catch (e) {
|
||||
console.error("User info fetch failed:", e);
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.delay-200 {
|
||||
animation-delay: 0.2s;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user