This commit is contained in:
2025-09-22 12:18:00 +05:30
2 changed files with 108 additions and 2 deletions

View File

@@ -251,7 +251,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
<Popover
opened={opened}
onChange={close}
position="bottom-end"
position="bottom-end" // 👈 Logout button ke niche right align
withArrow
shadow="md"
>

View File

@@ -1,6 +1,6 @@
"use client";
import React, { useState, useEffect, memo, useRef } from "react";
import { Text, Button, TextInput, PasswordInput, Title, Card, Group, Flex, Box, Image, Anchor, Tooltip } from "@mantine/core";
import { Text, Button, TextInput, PasswordInput, Title, Card, Group, Flex, Box, Image, Anchor, Tooltip, Modal } from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { Providers } from "@/app/providers";
import { useRouter } from "next/navigation";
@@ -20,6 +20,11 @@ export default function Login() {
const [isLogging, setIsLogging] = useState(false);
const ClientCarousel = dynamic(() => import('./clientCarousel'), { ssr: false });
const headerRef = useRef<HTMLHeadingElement>(null);
const [opened, setOpened] = useState(false);
const [otpStep, setOtpStep] = useState(false);
const [otp, setOtp] = useState("");
const [isOtpSending, setIsOtpSending] = useState(false);
const [isOtpVerifying, setIsOtpVerifying] = useState(false);
useEffect(() => {
const loadCaptcha = async () => {
@@ -97,7 +102,13 @@ export default function Login() {
});
const data = await response.json();
console.log(data);
if (data.error === "MIGRATED_USER_HAS_NO_PASSWORD") {
//console.log("Migration issue detected → opening modal");
setOpened(true);
return;
}
if (!response.ok) {
//console.log("hiiiii");
notifications.show({
withBorder: true,
color: "red",
@@ -109,6 +120,7 @@ export default function Login() {
localStorage.clear();
sessionStorage.clear();
return;
}
setIsLogging(true);
if (response.ok) {
@@ -163,6 +175,100 @@ export default function Login() {
return (
<Providers>
<Modal
opened={opened}
onClose={() => {
setOpened(false);
setOtpStep(false);
setOtp("");
}}
title="User Migration Notice"
centered
>
{!otpStep ? (
// STEP 1: Migration Notice
<>
<Text>
Your account is being migrated to the new system.
You need to set a new password to continue login.
</Text>
<Group mt="md" justify="flex-end">
<Button
variant="outline"
onClick={() => setOpened(false)}
>
Cancel
</Button>
{/* ✅ Instead of calling API, just open OTP screen */}
<Button
onClick={() => {
setOtpStep(true); // directly show OTP screen
}}
>
OK
</Button>
</Group>
</>
) : (
// STEP 2: OTP Verification (Frontend-only)
<>
<Text mb="sm">
Enter the OTP (for demo, you can accept any value).
</Text>
<TextInput
label="OTP"
placeholder="Enter OTP"
value={otp}
onChange={(e) => setOtp(e.currentTarget.value)}
/>
<Group mt="md" justify="flex-end">
<Button
variant="outline"
onClick={() => {
setOtp("");
setOtpStep(false); // go back to migration notice
}}
>
Back
</Button>
<Button
onClick={() => {
if (!otp) {
notifications.show({
color: "red",
title: "Invalid Input",
message: "Please enter OTP before verifying",
});
return;
}
// ✅ Simulate OTP success
localStorage.setItem("token", "dummy-token");
notifications.show({
color: "green",
title: "OTP Verified",
message: "Redirecting to set password page...",
});
setOpened(false);
router.push("/SetPassword"); // go to set password
}}
>
Verify OTP
</Button>
</Group>
</>
)}
</Modal>
{/* */}
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
{/* Header */}
<Box