feat: forget password
This commit is contained in:
@@ -160,8 +160,10 @@ export default function Login() {
|
|||||||
</style>
|
</style>
|
||||||
</Box>
|
</Box>
|
||||||
{/* Main */}
|
{/* Main */}
|
||||||
<div style={{ display: "flex", height: "75vh", overflow: "hidden", position: "relative",
|
<div style={{
|
||||||
background:'linear-gradient(to right, #02081eff, #0a3d91)' }}>
|
display: "flex", height: "75vh", overflow: "hidden", position: "relative",
|
||||||
|
background: 'linear-gradient(to right, #02081eff, #0a3d91)'
|
||||||
|
}}>
|
||||||
<div style={{ flex: 1, backgroundColor: "#c1e0f0", position: "relative" }}>
|
<div style={{ flex: 1, backgroundColor: "#c1e0f0", position: "relative" }}>
|
||||||
<Image
|
<Image
|
||||||
fit="cover"
|
fit="cover"
|
||||||
@@ -172,7 +174,7 @@ export default function Login() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<Box w={{ base: "100%", md: "50%" }} p="lg">
|
<Box w={{ base: "100%", md: "50%" }} p="lg">
|
||||||
<Card shadow="md" padding="xl" radius="md" style={{ maxWidth: 400,margin: "0 auto",height:'68vh'}}>
|
<Card shadow="md" padding="xl" radius="md" style={{ maxWidth: 400, margin: "0 auto", height: '68vh' }}>
|
||||||
<form onSubmit={handleLogin}>
|
<form onSubmit={handleLogin}>
|
||||||
<TextInput
|
<TextInput
|
||||||
label="User ID"
|
label="User ID"
|
||||||
@@ -193,9 +195,18 @@ export default function Login() {
|
|||||||
required
|
required
|
||||||
mt="sm"
|
mt="sm"
|
||||||
/>
|
/>
|
||||||
|
<Box style={{ textAlign: "right"}}>
|
||||||
|
<Anchor
|
||||||
|
style={{ fontSize: "14px", color: "#1c7ed6", cursor: "pointer" }}
|
||||||
|
onClick={() => router.push("/validate_user")}
|
||||||
|
>
|
||||||
|
Forgot Password?
|
||||||
|
</Anchor>
|
||||||
|
</Box>
|
||||||
<Group mt="sm" align="center">
|
<Group mt="sm" align="center">
|
||||||
<Box style={{ backgroundColor: "#fff", fontSize: "18px", textDecoration: "line-through", padding: "4px 8px", fontFamily: "cursive" }}>{captcha}</Box>
|
<Box style={{ backgroundColor: "#fff", fontSize: "18px", textDecoration: "line-through", padding: "4px 8px", fontFamily: "cursive" }}>{captcha}</Box>
|
||||||
<Button size="xs" variant="light" onClick={regenerateCaptcha}>Refresh</Button>
|
<Button size="xs" variant="light" onClick={regenerateCaptcha}>Refresh</Button>
|
||||||
|
|
||||||
</Group>
|
</Group>
|
||||||
<TextInput
|
<TextInput
|
||||||
label="Enter CAPTCHA"
|
label="Enter CAPTCHA"
|
||||||
|
|||||||
101
src/app/validate_user/page.tsx
Normal file
101
src/app/validate_user/page.tsx
Normal file
@@ -0,0 +1,101 @@
|
|||||||
|
"use client";
|
||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
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 logo from '@/app/image/logo.jpg';
|
||||||
|
import changePwdImage from '@/app/image/changepw.png';
|
||||||
|
import { IconEye, IconEyeOff, IconLogout } from '@tabler/icons-react';
|
||||||
|
|
||||||
|
export default function ValidateUser() {
|
||||||
|
const [Cif, setCif] = useState("");
|
||||||
|
const [otp, setOTP] = useState("");
|
||||||
|
|
||||||
|
|
||||||
|
async function handleSetLoginPassword(e: React.FormEvent) {
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Providers>
|
||||||
|
<div style={{ backgroundColor: "#f8f9fa", width: "100%", paddingTop: "5%" }}>
|
||||||
|
<Box style={{
|
||||||
|
position: 'fixed', width: '100%', height: '10%', top: 0, left: 0, zIndex: 100,
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "flex-start",
|
||||||
|
background: "linear-gradient(15deg,rgba(2, 163, 85, 1) 55%, rgba(101, 101, 184, 1) 100%)"
|
||||||
|
}}>
|
||||||
|
<Image
|
||||||
|
// radius="md"
|
||||||
|
fit="cover"
|
||||||
|
src={logo}
|
||||||
|
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">Validate User</Title>
|
||||||
|
|
||||||
|
<form onSubmit={handleSetLoginPassword}>
|
||||||
|
<TextInput
|
||||||
|
label="Enter Your CIF Number"
|
||||||
|
placeholder="Enter your CIF"
|
||||||
|
required
|
||||||
|
id="CIFNumber"
|
||||||
|
value={Cif}
|
||||||
|
onChange={(e) => setCif(e.currentTarget.value)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<PasswordInput
|
||||||
|
label="Enter OTP"
|
||||||
|
placeholder="Enter your OTP"
|
||||||
|
required
|
||||||
|
id="confirmPassword"
|
||||||
|
value={otp}
|
||||||
|
onChange={(e) => setOTP(e.currentTarget.value)}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
fullWidth
|
||||||
|
mt="sm"
|
||||||
|
color="blue"
|
||||||
|
>
|
||||||
|
Validate
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
<br></br>
|
||||||
|
</Card>
|
||||||
|
</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. {" "}
|
||||||
|
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Providers >
|
||||||
|
);
|
||||||
|
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user