75 lines
2.2 KiB
Vue

<script setup>
definePageMeta({
title: "Reset Password",
layout: "empty",
middleware: ["dashboard"],
});
const email = ref("");
const changePassword = () => {
// Simulate password change request without API call
console.log("Password change requested for email:", email.value);
// Add your password change logic here
};
</script>
<template>
<div
class="flex-none md:flex justify-center text-center items-center h-screen"
>
<div class="w-full md:w-3/4 lg:w-1/2 xl:w-2/6 relative">
<rs-card class="h-screen md:h-auto px-10 md:px-16 py-12 md:py-20 mb-0">
<div class="text-center mb-8">
<div class="img-container flex justify-center items-center mb-5">
<img src="@/assets/img/logo/niise-logo.svg" class="max-w-[60px]" />
<img src="@/assets/img/logo/niise-text.svg" class="max-w-[120px]" />
</div>
<h2 class="mt-4 text-2xl font-bold text-gray-700">
Tukar kata laluan
</h2>
<p class="text-sm text-gray-500">
Kata laluan sementara akan dihantar ke emel anda.
</p>
</div>
<FormKit type="form" :actions="false" @submit="changePassword">
<FormKit
type="email"
name="email"
placeholder="Sila masukkan emel anda"
validation="required|email"
:validation-messages="{
required: 'Emel wajib diisi',
email: 'Format emel tidak sah',
}"
>
<template #prefix>
<Icon
name="ph:envelope"
class="!w-5 !h-5 ml-3 text-gray-500"
></Icon>
</template>
</FormKit>
</FormKit>
<rs-button @click="navigateTo('reset-password')" class="w-full mt-6">
<Icon name="ph:lock-fill" class="mr-2" />
Tukar kata laluan
</rs-button>
<div class="mt-4">
Kembali ke
<nuxt-link to="/login" class="text-sm text-blue-500">
log masuk
</nuxt-link>
</div>
</rs-card>
</div>
</div>
</template>
<style scoped>
/* Add any additional component-specific styles here */
</style>