Feat : Api integrate on login screen, set login password and set transaction password screen

This commit is contained in:
2025-07-09 16:00:24 +05:30
parent 4b3e89673b
commit 09d61e556c
9 changed files with 437 additions and 637 deletions

21
instruction.txt Normal file
View File

@@ -0,0 +1,21 @@
- download Aws cli and Aws session manager
- Key generate for KCCB
- port forwarding :
aws ssm start-session --target i-0c850dcf8b85b1447 --document-name --profile kccb AWS-StartPortForwardingSession --parameters "portNumber"=["8080"],"localPortNumber"=["8080"]
- run the api in localhost
aws ssm start-session --target i-0c850dcf8b85b1447 --document-name --profile kccb AWS-StartPortForwardingSession --parameters "portNumber"=["5432"],"localPortNumber"=["5431"]
______________________________________________________________________
For database:
- aws ssm start-session --target i-0c850dcf8b85b1447 --profile kccb
- psql -U postgres
- \l
- psql -U kmobile_db_owner -d kmobile_banking
- password : kmobile
- SELECT * FROM users;
- \x
- \d users; -- see the data type of column
- \c kmobile_banking kmobile_app_rw -- alter the user

View File

@@ -3,7 +3,16 @@ const nextConfig = {
experimental: {
serverComponentsExternalPackages: ["typeorm", "knex"],
},
reactStrictMode: true
reactStrictMode: true,
// For port transfer
async rewrites() {
return[
{
source:'/api/:path*',
destination: 'http://localhost:8080/api/:path*',
},
];
},
};
export default nextConfig;

View File

@@ -1,98 +0,0 @@
'use client';
import { Box, Image, ActionIcon } from '@mantine/core';
import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
import { useRef } from 'react';
import DICGC from '@/app/image/DICGC_image.jpg';
import objective from '@/app/image/objective.jpg';
import frontPage from '@/app/image/ib_front_page.jpg';
export default function CustomCarousel() {
const scrollRef = useRef<HTMLDivElement>(null);
const scrollBy = 300; // px per click
const scrollLeft = () => {
scrollRef.current?.scrollBy({ left: -scrollBy, behavior: 'smooth' });
};
const scrollRight = () => {
scrollRef.current?.scrollBy({ left: scrollBy, behavior: 'smooth' });
};
const images = [DICGC, objective, frontPage];
return (
<Box style={{ position: 'relative', width: '100%', overflow: 'hidden' }}>
{/* Scrollable container */}
<Box
ref={scrollRef}
style={{
display: 'flex',
overflowX: 'auto',
scrollSnapType: 'x mandatory',
gap: '1rem',
padding: '1rem',
scrollBehavior: 'smooth',
}}
>
{images.map((img, i) => (
<Box
key={i}
style={{
flex: '0 0 100%',
scrollSnapAlign: 'start',
height: '250px',
minWidth: '100%',
maxWidth: '100%',
borderRadius: '8px',
backgroundColor: '#f2f2f2',
}}
>
<Image
src={img.src}
alt={`Slide ${i + 1}`}
style={{
width: '100%',
height: '100%',
objectFit: 'contain',
}}
/>
</Box>
))}
</Box>
{/* Left Scroll Button */}
<ActionIcon
variant="filled"
color="blue"
onClick={scrollLeft}
style={{
position: 'absolute',
top: '50%',
left: '10px',
transform: 'translateY(-50%)',
zIndex: 10,
}}
>
<IconChevronLeft size={24} />
</ActionIcon>
{/* Right Scroll Button */}
<ActionIcon
variant="filled"
color="blue"
onClick={scrollRight}
style={{
position: 'absolute',
top: '50%',
right: '10px',
transform: 'translateY(-50%)',
zIndex: 10,
}}
>
<IconChevronRight size={24} />
</ActionIcon>
</Box>
);
}

View File

@@ -1,55 +1,23 @@
"use client";
import React, { useState, useEffect } from "react";
import { Text, Button, TextInput, PasswordInput, Title, Card, Group, Flex, Box, Image, Anchor, Stack, Container, rem, Grid } from "@mantine/core";
import { Text, Button, TextInput, PasswordInput, Title, Card, Box, Image } from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { Providers } from "@/app/providers";
import { useRouter } from "next/navigation";
import NextImage from "next/image";
import myImage from '@/app/image/ebanking.jpg';
import changePwdImage from '@/app/image/changepw.png';
import dynamic from 'next/dynamic';
import RegistrationTimeline from '../_components/timeline/RegistrationTimeline';
import CaptchaImage from './CaptchaImage'; // adjust path if needed
import CaptchaImage from './CaptchaImage';
function generateCaptcha(length = 6) {
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
return Array.from({ length }, () => chars[Math.floor(Math.random() * chars.length)]).join("");
}
export default function Changeloginpwd() {
export default function ChangeLoginPwd() {
const router = useRouter();
// const [error, setError] = useState<string | null>(null);
//const [CIF, SetCIF] = useState("");
// const [psw, SetPsw] = useState("");
const [authorized, SetAuthorized] = useState<boolean | null>(null);
const [captcha, setCaptcha] = useState("");
const [inputCaptcha, setInputCaptcha] = useState("");
const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const [error, setError] = useState("");
const ClientCarousel = dynamic(() => import('./clientCarousel'), { ssr: false });
// const [captcha, setCaptcha] = useState('');
const [captchaInput, setCaptchaInput] = useState('');
const [captchaError, setCaptchaError] = useState('');
// useEffect(() => {
// setCaptcha(generateCaptcha());
// }, []);
// const regenerateCaptcha = () => {
// setCaptcha(generateCaptcha());
// setInputCaptcha("");
// };
useEffect(() => {
generateCaptcha();
}, []);
@@ -65,6 +33,92 @@ export default function Changeloginpwd() {
setCaptchaError('');
};
async function handleSetLoginPassword(e: React.FormEvent) {
e.preventDefault();
const pwdRegex = /^(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;
if (!password || !confirmPassword) {
notifications.show({
withBorder: true,
color: "red",
title: "Both password fields are required.",
message: "Both password fields are required.",
autoClose: 5000,
});
return;
// alert("Both password fields are required.");
} else if (password !== confirmPassword) {
// alert("Passwords do not match.");
notifications.show({
withBorder: true,
color: "red",
title: "Passwords do not match.",
message: "Passwords do not match.",
autoClose: 5000,
});
return;
}
else if (!pwdRegex.test(password)) {
// alert("Password must contain at least 1 capital letter, 1 number, 1 special character, and be at least 8 characters long.");
notifications.show({
withBorder: true,
color: "red",
title: "Password must contain at least 1 capital letter, 1 number, 1 special character, and be at least 8 characters long.",
message: "Password must contain at least 1 capital letter, 1 number, 1 special character, and be at least 8 characters long.",
autoClose: 5000,
});
return;
}
else if (captchaInput !== captcha) {
setCaptchaError("Incorrect CAPTCHA.");
return;
}
const token = localStorage.getItem("access_token");
const response = await fetch('api/auth/login_password', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
body: JSON.stringify({
login_password: password,
}),
});
const data = await response.json();
if (response.ok) {
// console.log(data);
notifications.show({
withBorder: true,
color: "green",
title: "Login Password has been set",
message: "Login Password has been set",
autoClose: 5000,
});
router.push("/ChangeTxn");
}
else {
notifications.show({
withBorder: true,
color: "red",
title: "Please try again later ",
message: "Please try again later ",
autoClose: 5000,
});
router.push("/login");
}
}
useEffect(() => {
const token = localStorage.getItem("access_token");
if (!token) {
SetAuthorized(false);
router.push("/login");
}
else {
SetAuthorized(true);
}
}, []);
if (authorized) {
return (
<Providers>
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
@@ -88,7 +142,7 @@ export default function Changeloginpwd() {
// @ts-ignore
align="center" mb="md">Set Login Password</Title>
<form >
<form onSubmit={handleSetLoginPassword}>
<PasswordInput
label="Login Password"
placeholder="Enter your password"
@@ -106,6 +160,8 @@ export default function Changeloginpwd() {
placeholder="Enter your password"
required
id="confirmPassword"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.currentTarget.value)}
onCopy={(e) => e.preventDefault()}
onPaste={(e) => e.preventDefault()}
onCut={(e) => e.preventDefault()}
@@ -128,59 +184,15 @@ export default function Changeloginpwd() {
{captchaError && <p style={{ color: 'red' }}>{captchaError}</p>}
</div>
{/* <Button fullWidth mt="sm" color="blue" onClick={() => {
router.push("/ChangeTxn")
}} >
Set
</Button> */}
<Button
type="submit"
fullWidth
mt="sm"
color="blue"
onClick={() => {
let pwd = (document.getElementById("loginPassword") as HTMLInputElement).value;
let confirmPwd = (document.getElementById("confirmPassword") as HTMLInputElement).value;
const pwdRegex = /^(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;
if (!pwd || !confirmPwd) {
alert("Both password fields are required.");
} else if (pwd !== confirmPwd) {
alert("Passwords do not match.");
}
else if (!pwdRegex.test(pwd)) {
alert("Password must contain at least 1 capital letter, 1 number, 1 special character, and be at least 8 characters long.");
}
else if (captchaInput !== captcha) {
setCaptchaError("Incorrect CAPTCHA.");
}
else {
// If all checks pass
localStorage.setItem("password", password);
localStorage.setItem("Tpin_setup", "Y");
router.push("/ChangeTxn");
notifications.show({
title: 'Password Change',
message: 'Login Password has been sucessfully updated',
color: "green",
position: 'bottom-center',
})
}
}}
>
Set
</Button>
{/* <Button onClick={() => {
notifications.show({
title: 'Default notification',
message: 'Do not forget to star Mantine on GitHub! test',
})
}} >Test</Button> */}
</form>
<br></br>
<Box
style={{
@@ -219,4 +231,5 @@ export default function Changeloginpwd() {
</div>
</Providers >
);
}
}

View File

@@ -1,98 +0,0 @@
'use client';
import { Box, Image, ActionIcon } from '@mantine/core';
import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
import { useRef } from 'react';
import DICGC from '@/app/image/DICGC_image.jpg';
import objective from '@/app/image/objective.jpg';
import frontPage from '@/app/image/ib_front_page.jpg';
export default function CustomCarousel() {
const scrollRef = useRef<HTMLDivElement>(null);
const scrollBy = 300; // px per click
const scrollLeft = () => {
scrollRef.current?.scrollBy({ left: -scrollBy, behavior: 'smooth' });
};
const scrollRight = () => {
scrollRef.current?.scrollBy({ left: scrollBy, behavior: 'smooth' });
};
const images = [DICGC, objective, frontPage];
return (
<Box style={{ position: 'relative', width: '100%', overflow: 'hidden' }}>
{/* Scrollable container */}
<Box
ref={scrollRef}
style={{
display: 'flex',
overflowX: 'auto',
scrollSnapType: 'x mandatory',
gap: '1rem',
padding: '1rem',
scrollBehavior: 'smooth',
}}
>
{images.map((img, i) => (
<Box
key={i}
style={{
flex: '0 0 100%',
scrollSnapAlign: 'start',
height: '250px',
minWidth: '100%',
maxWidth: '100%',
borderRadius: '8px',
backgroundColor: '#f2f2f2',
}}
>
<Image
src={img.src}
alt={`Slide ${i + 1}`}
style={{
width: '100%',
height: '100%',
objectFit: 'contain',
}}
/>
</Box>
))}
</Box>
{/* Left Scroll Button */}
<ActionIcon
variant="filled"
color="blue"
onClick={scrollLeft}
style={{
position: 'absolute',
top: '50%',
left: '10px',
transform: 'translateY(-50%)',
zIndex: 10,
}}
>
<IconChevronLeft size={24} />
</ActionIcon>
{/* Right Scroll Button */}
<ActionIcon
variant="filled"
color="blue"
onClick={scrollRight}
style={{
position: 'absolute',
top: '50%',
right: '10px',
transform: 'translateY(-50%)',
zIndex: 10,
}}
>
<IconChevronRight size={24} />
</ActionIcon>
</Box>
);
}

View File

@@ -1,41 +1,22 @@
"use client";
import React, { useState, useEffect } from "react";
import { Text, Button, TextInput, PasswordInput, Title, Card, Group, Flex, Box, Image, Anchor, Stack, Container, rem, Grid } from "@mantine/core";
import { Text, Button, TextInput, PasswordInput, Title, Card, Box, Image } from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { Providers } from "@/app/providers";
import { useRouter } from "next/navigation";
import NextImage from "next/image";
import myImage from '@/app/image/ebanking.jpg';
import changePwdImage from '@/app/image/changepw.png';
import dynamic from 'next/dynamic';
import CaptchaImage from './CaptchaImage';
function generateCaptcha(length = 6) {
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
return Array.from({ length }, () => chars[Math.floor(Math.random() * chars.length)]).join("");
}
export default function Changetransactionpwd() {
export default function ChangeTransactionPwd() {
const router = useRouter();
const [error, setError] = useState<string | null>(null);
const [CIF, SetCIF] = useState("");
const [psw, SetPsw] = useState("");
const [authorized, SetAuthorized] = useState<boolean | null>(null);
const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const [captcha, setCaptcha] = useState("");
const [inputCaptcha, setInputCaptcha] = useState("");
const ClientCarousel = dynamic(() => import('./clientCarousel'), { ssr: false });
//const [captcha, setCaptcha] = useState('');
const [captchaInput, setCaptchaInput] = useState('');
const [captchaError, setCaptchaError] = useState('');
// const [isClient,SetIsClient] =useState(false);
// useEffect(()=> SetIsClient(true),[]);
// useEffect(() => {
// setCaptcha(generateCaptcha());
// }, []);
// const regenerateCaptcha = () => {
// setCaptcha(generateCaptcha());
// setInputCaptcha("");
// };
useEffect(() => {
generateCaptcha();
@@ -52,44 +33,92 @@ export default function Changetransactionpwd() {
setCaptchaError('');
};
async function handleLogin(e: React.FormEvent) {
async function handleSetTransactionPassword(e: React.FormEvent) {
e.preventDefault();
const onlyDigit = /^\d{11}$/;
if (!onlyDigit.test(CIF)) {
setError('Input value must be 11 digit');
}
if (inputCaptcha !== captcha) {
const pwdRegex = /^(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;
if (!password || !confirmPassword) {
notifications.show({
withBorder: true,
color: "red",
title: "Captcha Error",
message: "Please enter the correct captcha",
title: "Both password fields are required.",
message: "Both password fields are required.",
autoClose: 5000,
});
return;
// alert("Both password fields are required.");
} else if (password !== confirmPassword) {
// alert("Passwords do not match.");
notifications.show({
withBorder: true,
color: "red",
title: "Passwords do not match.",
message: "Passwords do not match.",
autoClose: 5000,
});
return;
}
if (CIF === "30022497139" && psw === "SecurePass123!") {
const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.KMUFsIDTnFmyG3nMiGM6H9FNFUROf3wh7SmqJp-QV30";
localStorage.setItem("customerNumber", CIF);
localStorage.setItem("password", psw);
localStorage.setItem("access_token", token);
router.push("/home");
} else {
// SetCIF('');
// SetPsw('');
// setCaptcha('');
else if (!pwdRegex.test(password)) {
// alert("Password must contain at least 1 capital letter, 1 number, 1 special character, and be at least 8 characters long.");
notifications.show({
withBorder: true,
color: "red",
title: "Wrong User Id or Password",
message: "Wrong User Id or Password",
title: "Password must contain at least 1 capital letter, 1 number, 1 special character, and be at least 8 characters long.",
message: "Password must contain at least 1 capital letter, 1 number, 1 special character, and be at least 8 characters long.",
autoClose: 5000,
});
return;
}
else if (captchaInput !== captcha) {
setCaptchaError("Incorrect CAPTCHA.");
return;
}
const token = localStorage.getItem("access_token");
const response = await fetch('api/auth/transaction_password', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
body: JSON.stringify({
transaction_password: password,
}),
});
const data = await response.json();
if (response.ok) {
console.log(data);
notifications.show({
withBorder: true,
color: "green",
title: "Transaction Password has been set",
message: "Transaction Password has been set",
autoClose: 5000,
});
router.push("/login");
}
else {
notifications.show({
withBorder: true,
color: "red",
title: "Please try again later ",
message: "Please try again later ",
autoClose: 5000,
});
router.push("/login");
}
}
useEffect(() => {
const token = localStorage.getItem("access_token");
if (!token) {
SetAuthorized(false);
router.push("/login");
}
else {
SetAuthorized(true);
}
}, []);
if (authorized) {
return (
<Providers>
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
@@ -104,52 +133,6 @@ export default function Changetransactionpwd() {
/>
</Box>
<div style={{ marginTop: '10px' }}>
{/* <div style={{ display: "flex", height: "70vh", overflow: "hidden", position: "relative" }}>
<div style={{ flex: 1, backgroundColor: "#c1e0f0", position: "relative" }}>
<Image
fit="cover"
src={changePwdImage}
component={NextImage}
alt="ebanking"
style={{ width: "100%", height: "100%" }}
/>
</div>
<Card p="xl">
<Title order={3}
// @ts-ignore
align="center" mb="md">Change User Login Password</Title>
<form>
<PasswordInput
label="Login Password"
placeholder="Enter your password"
required
/>
<PasswordInput
label="Confirm Login Password"
placeholder="Enter your password"
required
/>
<Button fullWidth mt="sm" color="blue" >
Set
</Button>
</form>
<br></br>
<Box
style={{
flex: 1,
borderLeft: '1px solid #ccc',
paddingLeft: 16,
minHeight: 90,
}}
>
<Text size="sm">
<strong>Note:</strong> Password will contains minimum one alphabet, one digit, one special symbol and total 8 charecters.
</Text>
</Box>
</Card>
</div> */}
<Box style={{ display: "flex", justifyContent: "center", alignItems: "center", columnGap: "5rem" }} bg="#c1e0f0">
<Image h="85vh" fit="contain" component={NextImage} src={changePwdImage} alt="Change Password Image" />
<Box h="100%" style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
@@ -157,31 +140,29 @@ export default function Changetransactionpwd() {
<Title order={3}
// @ts-ignore
align="center" mb="md">Set Transaction Password</Title>
<form>
<form onSubmit={handleSetTransactionPassword}>
<PasswordInput
label="Transaction Password"
placeholder="Enter your password"
placeholder="Enter your Transaction password"
required
id="loginPassword"
value={password}
onChange={(e) => setPassword(e.currentTarget.value)}
onCopy={(e) => e.preventDefault()}
onPaste={(e) => e.preventDefault()}
onCut={(e) => e.preventDefault()}
/>
<PasswordInput
label="Confirm Transaction Password"
placeholder="Enter your password"
placeholder="Re-enter your Transaction password"
required
id="confirmPassword"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.currentTarget.value)}
onCopy={(e) => e.preventDefault()}
onPaste={(e) => e.preventDefault()}
onCut={(e) => e.preventDefault()}
/>
{/* <Button fullWidth mt="sm" color="blue" onClick={() => {
router.push("/login")
}} >
Set
</Button> */}
{/* CAPTCHA */}
<div style={{ marginTop: 20 }}>
<label style={{ fontWeight: 600 }}>Enter CAPTCHA *</label>
@@ -198,37 +179,12 @@ export default function Changetransactionpwd() {
{captchaError && <p style={{ color: 'red' }}>{captchaError}</p>}
</div>
<Button
type="submit"
fullWidth
mt="sm"
color="blue"
onClick={() => {
let pwd = (document.getElementById("loginPassword") as HTMLInputElement).value;
let confirmPwd = (document.getElementById("confirmPassword") as HTMLInputElement).value;
const pwdRegex = /^(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;
if (!pwd || !confirmPwd) {
alert("Both password fields are required.");
} else if (pwd !== confirmPwd) {
alert("Passwords do not match.");
}
else if (!pwdRegex.test(pwd)) {
alert("Password must contain at least 1 capital letter, 1 number, 1 special character, and be at least 8 characters long.");
}
else if (captchaInput !== captcha) {
setCaptchaError("Incorrect CAPTCHA.");
}
else {
notifications.show({
title: 'Password Change',
message: 'Transaction Password has been sucessfully updated',
color: "green",
position: 'bottom-center',
})
router.push("/login");
}
}} >
>
Set
</Button>
@@ -273,4 +229,5 @@ export default function Changetransactionpwd() {
</div>
</Providers >
);
}
}

4
src/app/captcha.tsx Normal file
View File

@@ -0,0 +1,4 @@
export async function generateCaptcha(length = 6) {
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
return Array.from({ length }, () => chars[Math.floor(Math.random() * chars.length)]).join("");
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 61 KiB

After

Width:  |  Height:  |  Size: 62 KiB

View File

@@ -8,12 +8,7 @@ import NextImage from "next/image";
import logo from '@/app/image/logo.jpg';
import frontPage from '@/app/image/ib_front_page.jpg';
import dynamic from 'next/dynamic';
function generateCaptcha(length = 6) {
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
return Array.from({ length }, () => chars[Math.floor(Math.random() * chars.length)]).join("");
}
import { generateCaptcha } from '@/app/captcha';
export default function Login() {
const router = useRouter();
@@ -24,21 +19,29 @@ export default function Login() {
const [inputCaptcha, setInputCaptcha] = useState("");
const [isLogging, setIsLogging] = useState(false);
const ClientCarousel = dynamic(() => import('./clientCarousel'), { ssr: false });
localStorage.setItem("password", "SecurePass123!");
localStorage.setItem("Tpin_setup", "F");
useEffect(() => {
setCaptcha(generateCaptcha());
const loadCaptcha = async () => {
const newCaptcha = await generateCaptcha();
setCaptcha(newCaptcha);
};
loadCaptcha();
}, []);
const regenerateCaptcha = () => {
setCaptcha(generateCaptcha());
// setCaptcha(generateCaptcha());
const loadCaptcha = async () => {
const newCaptcha = await generateCaptcha();
setCaptcha(newCaptcha);
};
loadCaptcha();
setInputCaptcha("");
};
async function handleLogin(e: React.FormEvent) {
e.preventDefault();
setIsLogging(false);
const onlyDigit = /^\d{11}$/;
if (!onlyDigit.test(CIF)) {
setError('Input value must be 11 digit');
@@ -54,25 +57,30 @@ export default function Login() {
});
return;
}
if (CIF === "30022497139" && psw === localStorage.getItem("password")) {
const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.KMUFsIDTnFmyG3nMiGM6H9FNFUROf3wh7SmqJp-QV30";
// localStorage.setItem("customerNumber", CIF);
// localStorage.setItem("password", psw);
// console.log("Tithi:", localStorage.getItem("password"));
console.log("Tithi:", localStorage.getItem("Tpin_setup"));
const response = await fetch('api/auth/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
customerNo: CIF,
password: psw,
}),
});
const data = await response.json();
if (response.ok) {
console.log(data);
const token = data.token;
localStorage.setItem("access_token", token);
setIsLogging(true);
// if (localStorage.getItem("Tpin_setup") === 'F')
// router.push("/ChangePassword");
// else
if (data.FirstTimeLogin === true) {
router.push("/ChangePassword")
}
else {
router.push("/home");
} else {
// SetCIF('');
// SetPsw('');
// setCaptcha('');
console.log("Tithi:", localStorage.getItem("password"));
console.log("Tithi:", localStorage.getItem("Tpin_setup"));
}
}
else {
notifications.show({
withBorder: true,
color: "red",
@@ -160,16 +168,6 @@ export default function Login() {
style={{ width: "100%", height: "100%" }}
/>
</div>
{/* <div
style={{
flex: 1,
backgroundColor: "#c1e0f0",
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%"
}}
> */}
<Card
shadow="lg"
padding="xl"
@@ -179,12 +177,6 @@ export default function Login() {
display: "flex",
justifyContent: "center",
alignItems: "center",
// width: "400%",
// maxWidth: 480,
// height: 400,
// marginTop: 0,
// paddingTop: 5,
backgroundColor: "#f0f0f0",
borderRadius: 0,
height: "100%",
@@ -240,7 +232,7 @@ export default function Login() {
alignItems: "center",
backgroundColor: "#fff",
fontFamily: "'UnifrakturCook',cursive",
textDecoration: "line-through",
// textDecoration: "line-through",
fontSize: "16px",
userSelect: "none",
display: "flex",
@@ -278,10 +270,10 @@ export default function Login() {
textAlign: "left",
marginTop: 10,
display: "flex",
border: "1px solid blue"
// border: "1px solid blue"
}}>
<ClientCarousel />
<Box style={{ width: "40%", border: "1px solid black", textAlign: "center" }}>
<Box style={{ width: "40%", textAlign: "center" }}>
<Title order={2}>Security Notes :</Title>
<br></br>
<Text size="lg">When you Login,Your User Id and Password travels in an encrypted and highly secured mode .</Text>