Feat : Api integrate on login screen, set login password and set transaction password screen
This commit is contained in:
21
instruction.txt
Normal file
21
instruction.txt
Normal 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
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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,158 +33,203 @@ export default function Changeloginpwd() {
|
||||
setCaptchaError('');
|
||||
};
|
||||
|
||||
return (
|
||||
<Providers>
|
||||
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
|
||||
<Box style={{ position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100 }}>
|
||||
<Image
|
||||
// radius="md"
|
||||
fit="cover"
|
||||
src={myImage}
|
||||
component={NextImage}
|
||||
alt="ebanking"
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
/>
|
||||
</Box>
|
||||
<div style={{ marginTop: '10px' }}>
|
||||
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");
|
||||
}
|
||||
}
|
||||
|
||||
<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" }}>
|
||||
<Card p="xl" w="35vw">
|
||||
<Title order={3}
|
||||
// @ts-ignore
|
||||
align="center" mb="md">Set Login Password</Title>
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem("access_token");
|
||||
if (!token) {
|
||||
SetAuthorized(false);
|
||||
router.push("/login");
|
||||
}
|
||||
else {
|
||||
SetAuthorized(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
<form >
|
||||
<PasswordInput
|
||||
label="Login Password"
|
||||
placeholder="Enter your password"
|
||||
required
|
||||
id="loginPassword"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.currentTarget.value)}
|
||||
onCopy={(e) => e.preventDefault()}
|
||||
onPaste={(e) => e.preventDefault()}
|
||||
onCut={(e) => e.preventDefault()}
|
||||
/>
|
||||
if (authorized) {
|
||||
return (
|
||||
<Providers>
|
||||
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
|
||||
<Box style={{ position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100 }}>
|
||||
<Image
|
||||
// radius="md"
|
||||
fit="cover"
|
||||
src={myImage}
|
||||
component={NextImage}
|
||||
alt="ebanking"
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
/>
|
||||
</Box>
|
||||
<div style={{ marginTop: '10px' }}>
|
||||
|
||||
<PasswordInput
|
||||
label="Confirm Login Password"
|
||||
placeholder="Enter your password"
|
||||
required
|
||||
id="confirmPassword"
|
||||
onCopy={(e) => e.preventDefault()}
|
||||
onPaste={(e) => e.preventDefault()}
|
||||
onCut={(e) => e.preventDefault()}
|
||||
<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" }}>
|
||||
<Card p="xl" w="35vw">
|
||||
<Title order={3}
|
||||
// @ts-ignore
|
||||
align="center" mb="md">Set Login Password</Title>
|
||||
|
||||
/>
|
||||
|
||||
{/* CAPTCHA */}
|
||||
<div style={{ marginTop: 20 }}>
|
||||
<label style={{ fontWeight: 600 }}>Enter CAPTCHA *</label>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 5 }}>
|
||||
<CaptchaImage text={captcha} />
|
||||
<Button size="xs" variant="outline" onClick={generateCaptcha}>Refresh</Button>
|
||||
</div>
|
||||
<TextInput
|
||||
placeholder="Enter above text"
|
||||
value={captchaInput}
|
||||
onChange={(e) => setCaptchaInput(e.currentTarget.value)}
|
||||
<form onSubmit={handleSetLoginPassword}>
|
||||
<PasswordInput
|
||||
label="Login Password"
|
||||
placeholder="Enter your password"
|
||||
required
|
||||
id="loginPassword"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.currentTarget.value)}
|
||||
onCopy={(e) => e.preventDefault()}
|
||||
onPaste={(e) => e.preventDefault()}
|
||||
onCut={(e) => e.preventDefault()}
|
||||
/>
|
||||
{captchaError && <p style={{ color: 'red' }}>{captchaError}</p>}
|
||||
</div>
|
||||
|
||||
<PasswordInput
|
||||
label="Confirm Login Password"
|
||||
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()}
|
||||
|
||||
/>
|
||||
|
||||
{/* CAPTCHA */}
|
||||
<div style={{ marginTop: 20 }}>
|
||||
<label style={{ fontWeight: 600 }}>Enter CAPTCHA *</label>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 5 }}>
|
||||
<CaptchaImage text={captcha} />
|
||||
<Button size="xs" variant="outline" onClick={generateCaptcha}>Refresh</Button>
|
||||
</div>
|
||||
<TextInput
|
||||
placeholder="Enter above text"
|
||||
value={captchaInput}
|
||||
onChange={(e) => setCaptchaInput(e.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
{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"
|
||||
>
|
||||
Set
|
||||
</Button>
|
||||
</form>
|
||||
<br></br>
|
||||
<Box
|
||||
style={{
|
||||
flex: 1,
|
||||
borderLeft: '1px solid #ccc',
|
||||
paddingLeft: 16,
|
||||
minHeight: 90,
|
||||
|
||||
<Button
|
||||
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={{
|
||||
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>
|
||||
<Text size="sm">
|
||||
<strong>Note:</strong> Password will contains minimum one alphabet, one digit, one special symbol and total 8 charecters.
|
||||
</Text>
|
||||
</Box>
|
||||
</Card>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
component="footer"
|
||||
style={{
|
||||
width: "100%",
|
||||
textAlign: "center",
|
||||
padding: "10px 0",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
zIndex: 1000,
|
||||
fontSize: "14px",
|
||||
}}
|
||||
>
|
||||
<Text>
|
||||
© 2025 KCC Bank. All rights reserved. {" "}
|
||||
<Box
|
||||
component="footer"
|
||||
style={{
|
||||
width: "100%",
|
||||
textAlign: "center",
|
||||
padding: "10px 0",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
zIndex: 1000,
|
||||
fontSize: "14px",
|
||||
}}
|
||||
>
|
||||
<Text>
|
||||
© 2025 KCC Bank. All rights reserved. {" "}
|
||||
|
||||
</Text>
|
||||
</Box>
|
||||
</Text>
|
||||
</Box>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Providers >
|
||||
);
|
||||
</Providers >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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,225 +33,201 @@ 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");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Providers>
|
||||
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
|
||||
<Box style={{ position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100 }}>
|
||||
<Image
|
||||
// radius="md"
|
||||
fit="cover"
|
||||
src={myImage}
|
||||
component={NextImage}
|
||||
alt="ebanking"
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
/>
|
||||
</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>
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem("access_token");
|
||||
if (!token) {
|
||||
SetAuthorized(false);
|
||||
router.push("/login");
|
||||
}
|
||||
else {
|
||||
SetAuthorized(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
<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" }}>
|
||||
<Card p="xl" w="35vw">
|
||||
<Title order={3}
|
||||
// @ts-ignore
|
||||
align="center" mb="md">Set Transaction Password</Title>
|
||||
<form>
|
||||
<PasswordInput
|
||||
label="Transaction Password"
|
||||
placeholder="Enter your password"
|
||||
required
|
||||
id="loginPassword"
|
||||
onCopy={(e) => e.preventDefault()}
|
||||
onPaste={(e) => e.preventDefault()}
|
||||
onCut={(e) => e.preventDefault()}
|
||||
/>
|
||||
<PasswordInput
|
||||
label="Confirm Transaction Password"
|
||||
placeholder="Enter your password"
|
||||
required
|
||||
id="confirmPassword"
|
||||
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>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 5 }}>
|
||||
<CaptchaImage text={captcha} />
|
||||
<Button size="xs" variant="outline" onClick={generateCaptcha}>Refresh</Button>
|
||||
</div>
|
||||
<TextInput
|
||||
placeholder="Enter above text"
|
||||
value={captchaInput}
|
||||
onChange={(e) => setCaptchaInput(e.currentTarget.value)}
|
||||
if (authorized) {
|
||||
return (
|
||||
<Providers>
|
||||
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
|
||||
<Box style={{ position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100 }}>
|
||||
<Image
|
||||
// radius="md"
|
||||
fit="cover"
|
||||
src={myImage}
|
||||
component={NextImage}
|
||||
alt="ebanking"
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
/>
|
||||
</Box>
|
||||
<div style={{ marginTop: '10px' }}>
|
||||
<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" }}>
|
||||
<Card p="xl" w="35vw">
|
||||
<Title order={3}
|
||||
// @ts-ignore
|
||||
align="center" mb="md">Set Transaction Password</Title>
|
||||
<form onSubmit={handleSetTransactionPassword}>
|
||||
<PasswordInput
|
||||
label="Transaction 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()}
|
||||
/>
|
||||
{captchaError && <p style={{ color: 'red' }}>{captchaError}</p>}
|
||||
</div>
|
||||
<PasswordInput
|
||||
label="Confirm Transaction 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()}
|
||||
/>
|
||||
{/* CAPTCHA */}
|
||||
<div style={{ marginTop: 20 }}>
|
||||
<label style={{ fontWeight: 600 }}>Enter CAPTCHA *</label>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 5 }}>
|
||||
<CaptchaImage text={captcha} />
|
||||
<Button size="xs" variant="outline" onClick={generateCaptcha}>Refresh</Button>
|
||||
</div>
|
||||
<TextInput
|
||||
placeholder="Enter above text"
|
||||
value={captchaInput}
|
||||
onChange={(e) => setCaptchaInput(e.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
{captchaError && <p style={{ color: 'red' }}>{captchaError}</p>}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
fullWidth
|
||||
mt="sm"
|
||||
color="blue"
|
||||
>
|
||||
Set
|
||||
</Button>
|
||||
|
||||
|
||||
<Button
|
||||
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 {
|
||||
</form>
|
||||
|
||||
notifications.show({
|
||||
title: 'Password Change',
|
||||
message: 'Transaction Password has been sucessfully updated',
|
||||
color: "green",
|
||||
position: 'bottom-center',
|
||||
})
|
||||
router.push("/login");
|
||||
}
|
||||
}} >
|
||||
Set
|
||||
</Button>
|
||||
<br></br>
|
||||
<Box
|
||||
style={{
|
||||
flex: 1,
|
||||
borderLeft: '1px solid #ccc',
|
||||
paddingLeft: 16,
|
||||
minHeight: 90,
|
||||
|
||||
|
||||
</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>
|
||||
}}
|
||||
>
|
||||
<Text size="sm">
|
||||
<strong>Note:</strong> Password will contains minimum one alphabet, one digit, one special symbol and total 8 charecters.
|
||||
</Text>
|
||||
</Box>
|
||||
</Card>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
component="footer"
|
||||
style={{
|
||||
width: "100%",
|
||||
textAlign: "center",
|
||||
padding: "10px 0",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
zIndex: 1000,
|
||||
fontSize: "14px",
|
||||
}}
|
||||
>
|
||||
<Text>
|
||||
© 2025 KCC Bank. All rights reserved. {" "}
|
||||
<Box
|
||||
component="footer"
|
||||
style={{
|
||||
width: "100%",
|
||||
textAlign: "center",
|
||||
padding: "10px 0",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
zIndex: 1000,
|
||||
fontSize: "14px",
|
||||
}}
|
||||
>
|
||||
<Text>
|
||||
© 2025 KCC Bank. All rights reserved. {" "}
|
||||
|
||||
</Text>
|
||||
</Box>
|
||||
</Text>
|
||||
</Box>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Providers >
|
||||
);
|
||||
</Providers >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
4
src/app/captcha.tsx
Normal file
4
src/app/captcha.tsx
Normal 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 |
@@ -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
|
||||
router.push("/home");
|
||||
} else {
|
||||
// SetCIF('');
|
||||
// SetPsw('');
|
||||
// setCaptcha('');
|
||||
console.log("Tithi:", localStorage.getItem("password"));
|
||||
console.log("Tithi:", localStorage.getItem("Tpin_setup"));
|
||||
if (data.FirstTimeLogin === true) {
|
||||
router.push("/ChangePassword")
|
||||
}
|
||||
else {
|
||||
router.push("/home");
|
||||
}
|
||||
|
||||
}
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user