Fix: Home design
This commit is contained in:
@@ -4,9 +4,11 @@
|
|||||||
|
|
||||||
aws ssm start-session --target i-0c850dcf8b85b1447 --document-name --profile kccb AWS-StartPortForwardingSession --parameters "portNumber"=["8080"],"localPortNumber"=["8080"]
|
aws ssm start-session --target i-0c850dcf8b85b1447 --document-name --profile kccb AWS-StartPortForwardingSession --parameters "portNumber"=["8080"],"localPortNumber"=["8080"]
|
||||||
|
|
||||||
- run the api in localhost
|
- run the api in localhost then port forward to Postgres
|
||||||
aws ssm start-session --target i-0c850dcf8b85b1447 --document-name --profile kccb AWS-StartPortForwardingSession --parameters "portNumber"=["5432"],"localPortNumber"=["5431"]
|
aws ssm start-session --target i-0c850dcf8b85b1447 --document-name --profile kccb AWS-StartPortForwardingSession --parameters "portNumber"=["5432"],"localPortNumber"=["5431"]
|
||||||
|
|
||||||
|
- For CBS port forward
|
||||||
|
aws ssm start-session --target i-0c850dcf8b85b1447 --document-name --profile kccb AWS-StartPortForwardingSession --parameters "portNumber"=["8686"],"localPortNumber"=["8686"]
|
||||||
______________________________________________________________________
|
______________________________________________________________________
|
||||||
|
|
||||||
For database:
|
For database:
|
||||||
|
|||||||
87
src/app/home/layout.tsx
Normal file
87
src/app/home/layout.tsx
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
"use client";
|
||||||
|
import React from 'react';
|
||||||
|
import { Box, Button, Flex, Group, Image, Text } from '@mantine/core';
|
||||||
|
import { IconBook, IconCurrencyRupee, IconHome, IconLogout, IconPhoneFilled, IconSettings } from '@tabler/icons-react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { Providers } from '../providers';
|
||||||
|
import logo from '@/app/image/logo.jpg';
|
||||||
|
import NextImage from 'next/image';
|
||||||
|
|
||||||
|
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
async function handleLogout(e: React.FormEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
localStorage.removeItem("access_token");
|
||||||
|
router.push("/login")
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<html lang="en">
|
||||||
|
<body>
|
||||||
|
<Providers>
|
||||||
|
<div style={{ backgroundColor: "#e6ffff", width: "100%", height: '100vh' }}>
|
||||||
|
{/* Image -Logo */}
|
||||||
|
<Box style={{
|
||||||
|
position: 'relative', width: '100%', height: '11%',
|
||||||
|
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%" }}
|
||||||
|
/>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: '60%',
|
||||||
|
left: '80%',
|
||||||
|
color: 'white',
|
||||||
|
textShadow: '1px 1px 2px black',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<IconPhoneFilled size={20} />
|
||||||
|
Toll Free No : 1800-180-8008
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
flex: 1,
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "left",
|
||||||
|
justifyContent: "right",
|
||||||
|
}}>
|
||||||
|
<Group mt="md" gap="sm">
|
||||||
|
<Link href="/">
|
||||||
|
<Button leftSection={<IconHome />} variant="light" color="blue">Home</Button>
|
||||||
|
</Link>
|
||||||
|
<Link href="/accounts">
|
||||||
|
<Button leftSection={<IconBook />} variant="subtle">Accounts</Button>
|
||||||
|
</Link>
|
||||||
|
<Link href="/send-money">
|
||||||
|
<Button leftSection={<IconCurrencyRupee />} variant="subtle">Send Money</Button>
|
||||||
|
</Link>
|
||||||
|
<Link href="/settings">
|
||||||
|
<Button leftSection={<IconSettings />} variant="subtle">Settings</Button>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Button leftSection={<IconLogout />} variant="subtle" onClick={handleLogout}>Logout</Button>
|
||||||
|
|
||||||
|
</Group>
|
||||||
|
</div>
|
||||||
|
<div>{children}</div>
|
||||||
|
{/* Footer */}
|
||||||
|
<Flex justify="center" align="center">
|
||||||
|
<Text c="dimmed" size="xs">© 2025 Kangra Central Co- Operative Bank</Text>
|
||||||
|
</Flex>
|
||||||
|
</div>
|
||||||
|
</Providers>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,13 +1,12 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { AppShell, Button, Input, Group, Stack, Tooltip, UnstyledButton, Text, Avatar, Title, Divider, Box, Select, Paper, Image, Switch, Flex, TextInput, Center } from '@mantine/core';
|
import { Button, Input, Group, Stack, Text, Title, Box, Select, Paper,Switch} from '@mantine/core';
|
||||||
import { IconBook, IconBuildingBank, IconCurrencyRupee, IconEye, IconHome, IconLogout, IconPhoneFilled, IconSettings } from '@tabler/icons-react';
|
import { IconBuildingBank, IconEye} from '@tabler/icons-react';
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { Providers } from "../providers";
|
import { Providers } from "../providers";
|
||||||
import logo from '@/app/image/logo.jpg';
|
|
||||||
import NextImage from 'next/image';
|
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
const [authorized, SetAuthorized] = useState<boolean | null>(null);
|
const [authorized, SetAuthorized] = useState<boolean | null>(null);
|
||||||
@@ -43,201 +42,151 @@ export default function Home() {
|
|||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
if (authorized) {
|
if (authorized) {
|
||||||
return (
|
return (
|
||||||
<Providers>
|
<Providers>
|
||||||
|
<div>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#e6ffff", width: "100%", height: '100vh',
|
flex: 1,
|
||||||
}}>
|
marginLeft: '20px',
|
||||||
<Box style={{
|
|
||||||
position: 'relative', width: '100%', height: '11%',
|
|
||||||
display: "flex",
|
display: "flex",
|
||||||
justifyContent: "flex-start",
|
flexDirection: "column",
|
||||||
background: "linear-gradient(15deg,rgba(2, 163, 85, 1) 55%, rgba(101, 101, 184, 1) 100%)",
|
justifyContent: "left",
|
||||||
}}>
|
}}
|
||||||
<Image
|
>
|
||||||
// radius="md"
|
<Title order={3} style={{ fontFamily: "inter", fontSize: '28px' }}>Welcome, Rajat Kumar Maharana</Title>
|
||||||
fit="cover"
|
{/* */}
|
||||||
src={logo}
|
<Text size="xs" c="gray" style={{ fontFamily: "inter", fontSize: '15px' }}>Last logged in at 29/06/25, 05:35 PM</Text>
|
||||||
component={NextImage}
|
|
||||||
alt="ebanking"
|
|
||||||
style={{ width: "100%", height: "100%" }}
|
|
||||||
/>
|
|
||||||
<Text
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: '60%',
|
|
||||||
left: '80%',
|
|
||||||
color: 'white',
|
|
||||||
textShadow: '1px 1px 2px black',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IconPhoneFilled size={20} />
|
|
||||||
Toll Free No : 1800-180-8008
|
|
||||||
</Text>
|
|
||||||
</Box>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
flex: 1,
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "left",
|
|
||||||
justifyContent: "right",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Group mt="md" gap="sm">
|
|
||||||
<Button leftSection={<IconHome />} variant="light" color="blue">Home</Button>
|
|
||||||
<Button leftSection={<IconBook />} variant="subtle">Accounts</Button>
|
|
||||||
<Button leftSection={<IconCurrencyRupee />} variant="subtle">Send Money</Button>
|
|
||||||
{/* <Button variant="subtle">IMPS</Button> */}
|
|
||||||
<Button leftSection={<IconSettings />} variant="subtle">Settings</Button>
|
|
||||||
<Button leftSection={<IconLogout />} variant="subtle" onClick={handleLogout}>Logout</Button>
|
|
||||||
</Group>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
flex: 1,
|
|
||||||
marginLeft: '20px',
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
justifyContent: "left",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Title order={3} style={{ fontFamily: "inter", fontSize: '28px' }}>Welcome, Rajat Kumar Maharana</Title>
|
|
||||||
{/* */}
|
|
||||||
<Text size="xs" c="gray" style={{ fontFamily: "inter", fontSize: '15px' }}>Last logged in at 29/06/25, 05:35 PM</Text>
|
|
||||||
</div>
|
|
||||||
<Group
|
|
||||||
style={{ flex: 1, padding: "10px 10px 4px 10px", marginLeft: '20px', display: "flex", alignItems: "center", justifyContent: "left", height: "5vh" }}>
|
|
||||||
<IconEye size={20} />
|
|
||||||
<Text fw={700} style={{ fontFamily: "inter", fontSize: '17px' }}>Show Balance </Text>
|
|
||||||
<Switch size="md" onLabel="ON" offLabel="OFF" checked={showBalance}
|
|
||||||
onChange={(event) => setShowBalance(event.currentTarget.checked)} />
|
|
||||||
</Group>
|
|
||||||
<div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "flex-start", marginLeft: '20px' }}>
|
|
||||||
<Group grow gap="xl">
|
|
||||||
<Paper p="md" radius="md" style={{ backgroundColor: '#c1e0f0', width: 350 }}>
|
|
||||||
|
|
||||||
<Group gap='xs'>
|
|
||||||
<IconBuildingBank size={25} />
|
|
||||||
<Text fw={700}>Deposit Account</Text>
|
|
||||||
<Select
|
|
||||||
// placeholder="Select A/C No"
|
|
||||||
data={depositAccounts.map(acc => ({
|
|
||||||
value: acc.stAccountNo,
|
|
||||||
label: acc.stAccountNo
|
|
||||||
}))}
|
|
||||||
value={selectedDA}
|
|
||||||
// @ts-ignore
|
|
||||||
onChange={setSelectedDA}
|
|
||||||
size="xs"
|
|
||||||
styles={{
|
|
||||||
input: {
|
|
||||||
backgroundColor: "white",
|
|
||||||
color: "black",
|
|
||||||
marginLeft: 20,
|
|
||||||
width: 125
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Group>
|
|
||||||
<Text c="dimmed">{Number(selectedDAData?.stAccountNo || 0)}</Text>
|
|
||||||
<Title order={2} mt="md">
|
|
||||||
{showBalance ? `₹${Number(selectedDAData?.stAvailableBalance || 0).toLocaleString('en-IN')}` : "****"}
|
|
||||||
</Title>
|
|
||||||
<Button fullWidth mt="xs">Get Statement</Button>
|
|
||||||
</Paper>
|
|
||||||
<Paper p="md" radius="md" style={{ backgroundColor: '#c1e0f0', width: 350 }}>
|
|
||||||
|
|
||||||
<Group gap='xs'>
|
|
||||||
<IconBuildingBank size={25} />
|
|
||||||
<Text fw={700}>Loan Account</Text>
|
|
||||||
<Select
|
|
||||||
placeholder="Select A/C No"
|
|
||||||
data={loanAccounts.map(acc => ({
|
|
||||||
value: acc.stAccountNo,
|
|
||||||
label: acc.stAccountNo
|
|
||||||
}))}
|
|
||||||
value={selectedLN}
|
|
||||||
// @ts-ignore
|
|
||||||
onChange={setSelectedLN}
|
|
||||||
size="xs"
|
|
||||||
styles={{
|
|
||||||
input: {
|
|
||||||
backgroundColor: "white",
|
|
||||||
color: "black",
|
|
||||||
marginLeft: 25,
|
|
||||||
width: 125
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Group>
|
|
||||||
<Text c="dimmed">{Number(selectedLNData?.stAccountNo || 0)}</Text>
|
|
||||||
<Title order={2} mt="md">
|
|
||||||
{showBalance ? `₹${Number(selectedLNData?.stAvailableBalance || 0).toLocaleString('en-IN')}` : "****"}
|
|
||||||
</Title>
|
|
||||||
<Button fullWidth mt="xs">Get Statement</Button>
|
|
||||||
</Paper>
|
|
||||||
<Paper p="md" radius="md" style={{ width: 300, backgroundColor: '#FFFFFF', marginLeft: '130px', border: '1px solid grey' }}>
|
|
||||||
<Title order={5} mb="sm">Important Links</Title>
|
|
||||||
{/* <Title order={5} mb="sm" style={{ textAlign: 'center' }}>Loan EMI Calculator</Title> */}
|
|
||||||
<Stack gap="xs">
|
|
||||||
<Button variant="light" color="blue" fullWidth>Loan EMI Calculator</Button>
|
|
||||||
<Button variant="light" color="blue" fullWidth>Branch Locator</Button>
|
|
||||||
<Button variant="light" color="blue" fullWidth>Customer Care</Button>
|
|
||||||
<Button variant="light" color="blue" fullWidth>FAQs</Button>
|
|
||||||
</Stack>
|
|
||||||
{/* <Group>
|
|
||||||
<TextInput
|
|
||||||
label="Loan Amount"
|
|
||||||
placeholder=""
|
|
||||||
/>
|
|
||||||
<TextInput
|
|
||||||
label="Interest Rate(%)"
|
|
||||||
placeholder=""
|
|
||||||
/>
|
|
||||||
<TextInput
|
|
||||||
label="Loan Tenure(Years)"
|
|
||||||
placeholder=""
|
|
||||||
/>
|
|
||||||
<Button fullWidth style={{textAlign:'center'}}>Calculate</Button>
|
|
||||||
</Group> */}
|
|
||||||
</Paper>
|
|
||||||
</Group>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
flex: 1,
|
|
||||||
marginTop: 0,
|
|
||||||
padding: "20px",
|
|
||||||
display: "flex",
|
|
||||||
// alignItems: "center",
|
|
||||||
justifyContent: "left",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box>
|
|
||||||
<Title order={4}>Send Money</Title>
|
|
||||||
<Group mt="sm">
|
|
||||||
<Select
|
|
||||||
placeholder="Own / Other Accounts"
|
|
||||||
data={[{ value: 'own', label: 'Own' }, { value: 'other', label: 'Other' }]}
|
|
||||||
style={{ width: 180 }}
|
|
||||||
/>
|
|
||||||
<Select
|
|
||||||
placeholder="Select Account"
|
|
||||||
data={[{ value: 'acc1', label: 'Account 1' }, { value: 'acc2', label: 'Account 2' }]}
|
|
||||||
style={{ width: 180 }}
|
|
||||||
/>
|
|
||||||
<Input placeholder="₹0.00" style={{ width: 100 }} />
|
|
||||||
<Button>Proceed</Button>
|
|
||||||
</Group>
|
|
||||||
</Box>
|
|
||||||
</div>
|
|
||||||
<Flex justify="center" align="center">
|
|
||||||
<Text c="dimmed" size="xs">© 2025 Kangra Central Co- Operative Bank</Text>
|
|
||||||
</Flex>
|
|
||||||
</div>
|
</div>
|
||||||
</Providers>
|
<Group
|
||||||
);
|
style={{ flex: 1, padding: "10px 10px 4px 10px", marginLeft: '20px', display: "flex", alignItems: "center", justifyContent: "left", height: "5vh" }}>
|
||||||
}
|
<IconEye size={20} />
|
||||||
|
<Text fw={700} style={{ fontFamily: "inter", fontSize: '17px' }}>Show Balance </Text>
|
||||||
|
<Switch size="md" onLabel="ON" offLabel="OFF" checked={showBalance}
|
||||||
|
onChange={(event) => setShowBalance(event.currentTarget.checked)} />
|
||||||
|
</Group>
|
||||||
|
<div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "flex-start", marginLeft: '20px' }}>
|
||||||
|
<Group grow gap="xl">
|
||||||
|
<Paper p="md" radius="md" style={{ backgroundColor: '#c1e0f0', width: 350 }}>
|
||||||
|
|
||||||
|
<Group gap='xs'>
|
||||||
|
<IconBuildingBank size={25} />
|
||||||
|
<Text fw={700}>Deposit Account</Text>
|
||||||
|
<Select
|
||||||
|
// placeholder="Select A/C No"
|
||||||
|
data={depositAccounts.map(acc => ({
|
||||||
|
value: acc.stAccountNo,
|
||||||
|
label: acc.stAccountNo
|
||||||
|
}))}
|
||||||
|
value={selectedDA}
|
||||||
|
// @ts-ignore
|
||||||
|
onChange={setSelectedDA}
|
||||||
|
size="xs"
|
||||||
|
styles={{
|
||||||
|
input: {
|
||||||
|
backgroundColor: "white",
|
||||||
|
color: "black",
|
||||||
|
marginLeft: 20,
|
||||||
|
width: 125
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Group>
|
||||||
|
<Text c="dimmed">{Number(selectedDAData?.stAccountNo || 0)}</Text>
|
||||||
|
<Title order={2} mt="md">
|
||||||
|
{showBalance ? `₹${Number(selectedDAData?.stAvailableBalance || 0).toLocaleString('en-IN')}` : "****"}
|
||||||
|
</Title>
|
||||||
|
<Button fullWidth mt="xs">Get Statement</Button>
|
||||||
|
</Paper>
|
||||||
|
<Paper p="md" radius="md" style={{ backgroundColor: '#c1e0f0', width: 350 }}>
|
||||||
|
|
||||||
|
<Group gap='xs'>
|
||||||
|
<IconBuildingBank size={25} />
|
||||||
|
<Text fw={700}>Loan Account</Text>
|
||||||
|
<Select
|
||||||
|
placeholder="Select A/C No"
|
||||||
|
data={loanAccounts.map(acc => ({
|
||||||
|
value: acc.stAccountNo,
|
||||||
|
label: acc.stAccountNo
|
||||||
|
}))}
|
||||||
|
value={selectedLN}
|
||||||
|
// @ts-ignore
|
||||||
|
onChange={setSelectedLN}
|
||||||
|
size="xs"
|
||||||
|
styles={{
|
||||||
|
input: {
|
||||||
|
backgroundColor: "white",
|
||||||
|
color: "black",
|
||||||
|
marginLeft: 25,
|
||||||
|
width: 125
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Group>
|
||||||
|
<Text c="dimmed">{Number(selectedLNData?.stAccountNo || 0)}</Text>
|
||||||
|
<Title order={2} mt="md">
|
||||||
|
{showBalance ? `₹${Number(selectedLNData?.stAvailableBalance || 0).toLocaleString('en-IN')}` : "****"}
|
||||||
|
</Title>
|
||||||
|
<Button fullWidth mt="xs">Get Statement</Button>
|
||||||
|
</Paper>
|
||||||
|
<Paper p="md" radius="md" style={{ width: 300, backgroundColor: '#FFFFFF', marginLeft: '130px', border: '1px solid grey' }}>
|
||||||
|
<Title order={5} mb="sm">Important Links</Title>
|
||||||
|
{/* <Title order={5} mb="sm" style={{ textAlign: 'center' }}>Loan EMI Calculator</Title> */}
|
||||||
|
<Stack gap="xs">
|
||||||
|
<Button variant="light" color="blue" fullWidth>Loan EMI Calculator</Button>
|
||||||
|
<Button variant="light" color="blue" fullWidth>Branch Locator</Button>
|
||||||
|
<Button variant="light" color="blue" fullWidth>Customer Care</Button>
|
||||||
|
<Button variant="light" color="blue" fullWidth>FAQs</Button>
|
||||||
|
</Stack>
|
||||||
|
{/* <Group>
|
||||||
|
<TextInput
|
||||||
|
label="Loan Amount"
|
||||||
|
placeholder=""
|
||||||
|
/>
|
||||||
|
<TextInput
|
||||||
|
label="Interest Rate(%)"
|
||||||
|
placeholder=""
|
||||||
|
/>
|
||||||
|
<TextInput
|
||||||
|
label="Loan Tenure(Years)"
|
||||||
|
placeholder=""
|
||||||
|
/>
|
||||||
|
<Button fullWidth style={{textAlign:'center'}}>Calculate</Button>
|
||||||
|
</Group> */}
|
||||||
|
</Paper>
|
||||||
|
</Group>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
flex: 1,
|
||||||
|
marginTop: 0,
|
||||||
|
padding: "20px",
|
||||||
|
display: "flex",
|
||||||
|
// alignItems: "center",
|
||||||
|
justifyContent: "left",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box>
|
||||||
|
<Title order={4}>Send Money</Title>
|
||||||
|
<Group mt="sm">
|
||||||
|
<Select
|
||||||
|
placeholder="Own / Other Accounts"
|
||||||
|
data={[{ value: 'own', label: 'Own' }, { value: 'other', label: 'Other' }]}
|
||||||
|
style={{ width: 180 }}
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
placeholder="Select Account"
|
||||||
|
data={[{ value: 'acc1', label: 'Account 1' }, { value: 'acc2', label: 'Account 2' }]}
|
||||||
|
style={{ width: 180 }}
|
||||||
|
/>
|
||||||
|
<Input placeholder="₹0.00" style={{ width: 100 }} />
|
||||||
|
<Button>Proceed</Button>
|
||||||
|
</Group>
|
||||||
|
</Box>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Providers>
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -40,13 +40,10 @@ export default function Login() {
|
|||||||
|
|
||||||
async function handleLogin(e: React.FormEvent) {
|
async function handleLogin(e: React.FormEvent) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
setIsLogging(true);
|
|
||||||
|
|
||||||
const onlyDigit = /^\d{11}$/;
|
const onlyDigit = /^\d{11}$/;
|
||||||
if (!onlyDigit.test(CIF)) {
|
if (!onlyDigit.test(CIF)) {
|
||||||
setError('Input value must be 11 digit');
|
setError('Input value must be 11 digit');
|
||||||
}
|
}
|
||||||
|
|
||||||
if (inputCaptcha !== captcha) {
|
if (inputCaptcha !== captcha) {
|
||||||
notifications.show({
|
notifications.show({
|
||||||
withBorder: true,
|
withBorder: true,
|
||||||
@@ -68,6 +65,7 @@ export default function Login() {
|
|||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
|
setIsLogging(true);
|
||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
console.log(data);
|
console.log(data);
|
||||||
const token = data.token;
|
const token = data.token;
|
||||||
@@ -81,6 +79,7 @@ export default function Login() {
|
|||||||
|
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
|
setIsLogging(false);
|
||||||
notifications.show({
|
notifications.show({
|
||||||
withBorder: true,
|
withBorder: true,
|
||||||
color: "red",
|
color: "red",
|
||||||
@@ -255,7 +254,7 @@ export default function Login() {
|
|||||||
/>
|
/>
|
||||||
<Button type="submit" disabled={isLogging} fullWidth variant="filled" mt="md">
|
<Button type="submit" disabled={isLogging} fullWidth variant="filled" mt="md">
|
||||||
{/* Login */}
|
{/* Login */}
|
||||||
{isLogging ? "Logging.." : "Login"}
|
{isLogging ? "Logging...." : "Login"}
|
||||||
</Button>
|
</Button>
|
||||||
</form>
|
</form>
|
||||||
</Flex>
|
</Flex>
|
||||||
|
|||||||
Reference in New Issue
Block a user