feat : update login page

This commit is contained in:
2025-06-26 18:26:46 +05:30
parent a86cb87da0
commit 49dae3624f

View File

@@ -1,6 +1,6 @@
"use client"
import React from "react";
import React, { useState } from "react";
import { Text, Button, Paper, TextInput, MantineProvider, Image, Box, Anchor, PasswordInput, Title, Checkbox, Card, Group, Flex, Stack } from "@mantine/core";
import myImage from '@/app/image/ebanking.jpg';
import bgImage from '@/app/image/media.jpg';
@@ -8,7 +8,13 @@ import frontPage from '@/app/image/ib_front_page.jpg'
import NextImage from 'next/image';
import { Providers } from "@/app/providers";
export default function Demo() {
export default function Login() {
const [CIF, SetCIF] = useState('');
const [psw, SetPsw] = useState('');
async function handleLogin() {
}
return (
<Providers>
<div
@@ -68,27 +74,44 @@ export default function Demo() {
/>
</div>
<div style={{ flex: 1, backgroundColor: "#c1e0f0", display: "flex", justifyContent: 'center', alignItems: 'center' }}>
<Card shadow="lg" padding="xl" radius="md" style={{ width: 480, height: 400, backgroundColor: '#f0f0f0',
borderRadius: "12px", boxShadow: "0 2px 10px rgba(0,0,0,0.1)", }}>
<Card shadow="lg" padding="xl" radius="md" style={{
width: 480, height: 400, backgroundColor: '#f0f0f0',
borderRadius: "12px", boxShadow: "0 2px 10px rgba(0,0,0,0.1)",
}}>
<Title order={5} style={{ marginLeft: 10 }}>Welcome To KCC Bank</Title>
<Title order={1} style={{ marginLeft: 10, color: "#000066" }}>Internet Banking</Title>
<br></br>
<Box style={{ width: "370px", padding: "20px", border: "1px solid #e0e0d1", marginLeft: 30 }}>
<Box style={{ width: "370px", padding: "20px", border: "1px solid #e0e0d1", marginLeft: 30 }}>
<Flex justify="center" gap="md" >
<form>
<TextInput
label="CIF Number"
label="User ID"
placeholder="Enter your CIF no"
type="numeric"
maxLength={11}
inputMode="numeric"
pattern="\d*"
value={CIF}
onInput={(e) => {
const input =e.currentTarget.value.replace(/\D/g,'');
if(input.length<=11)
{
SetCIF(input);
}
}}
style={{ flex: 1 }}
required
/>
<br></br>
<TextInput
<PasswordInput
label="Password"
placeholder="Enter your password"
style={{ flex: 1 }}
required
/>
{/* <br></br> */}
<Button fullWidth variant="filled" mt="md" style={{width:100,align:"center",marginLeft:40}}>Login</Button>
<Button fullWidth variant="filled" mt="md" style={{ width: 100, align: "center", marginLeft: 40 }}>Login</Button>
</form>
</Flex>
</Box>