feat : update login page
This commit is contained in:
@@ -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>
|
||||
|
Reference in New Issue
Block a user