feat : APi integrated foe change password and change trans password
feat: Change the UI design
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Button, Input, Group, Stack, Text, Title, Box, Select, Paper, Switch } from '@mantine/core';
|
||||
import { IconBuildingBank, IconEye } from '@tabler/icons-react';
|
||||
import { IconBuildingBank, IconEye, IconLink } from '@tabler/icons-react';
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Providers } from "../../providers";
|
||||
import { notifications } from '@mantine/notifications';
|
||||
@@ -192,7 +192,7 @@ export default function Home() {
|
||||
|
||||
{/* Important Links Card */}
|
||||
<Paper p="md" radius="md" style={{ width: 300, backgroundColor: '#FFFFFF', marginLeft: '130px', border: '1px solid grey' }}>
|
||||
<Title order={5} mb="sm">Quick Links</Title>
|
||||
<Title order={5} mb="sm">Quick Links </Title>
|
||||
<Stack gap="xs">
|
||||
<Button variant="light" color="blue" fullWidth>Loan EMI Calculator</Button>
|
||||
<Button variant="light" color="blue" fullWidth>Branch Locator</Button>
|
||||
@@ -202,30 +202,11 @@ export default function Home() {
|
||||
</Paper>
|
||||
</Group>
|
||||
</div>
|
||||
|
||||
{/* Send Money Section */}
|
||||
<div style={{ padding: "20px", display: "flex", 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> */}
|
||||
<Stack>
|
||||
<Text fw={700}> ** Book Balance includes uncleared effect.</Text>
|
||||
<Text fw={700}> ** Click on the "Show Balance"to display balance for the Deposit and Loan account.</Text>
|
||||
{/* <Text fw={700}> ** Click on the "Get Statement" to display last 5 transactions.</Text> */}
|
||||
<Text fw={400} c="red"> ** Your Password will expire in 85 days.</Text>
|
||||
<Text></Text>
|
||||
</Stack>
|
||||
</div>
|
||||
|
@@ -177,7 +177,6 @@ export default function ChangePassword() {
|
||||
|
||||
return (
|
||||
<Paper shadow="sm" radius="md" p="md" withBorder h={400}>
|
||||
<Title order={3} style={{ color: "red" }}>More Updates comming soon .....</Title>
|
||||
<Title order={3} mb="sm">
|
||||
Change Login Password
|
||||
</Title>
|
||||
@@ -286,7 +285,7 @@ export default function ChangePassword() {
|
||||
</Group>
|
||||
</div>
|
||||
<Text size="sm" c="dimmed" style={{ marginTop: "40px" }}>
|
||||
Note: Your new password must be 8–15 characters long and contain at least one number and one special character.
|
||||
Note: Your new Login password must be 8–15 characters long and contain at least one number and one special character.
|
||||
</Text>
|
||||
</Paper>
|
||||
);
|
||||
|
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { TextInput, PasswordInput, Button, Title, Paper, Group, Box } from "@mantine/core";
|
||||
import { TextInput, PasswordInput, Button, Title, Paper, Group, Box, Text } from "@mantine/core";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { IconLock } from "@tabler/icons-react";
|
||||
import { generateCaptcha } from "@/app/captcha";
|
||||
@@ -183,7 +183,8 @@ export default function ChangePassword() {
|
||||
</Title>
|
||||
|
||||
{/* Scrollable form area */}
|
||||
<div style={{ overflowY: "auto", maxHeight: "280px", paddingRight: 8 }}>
|
||||
<div style={{ overflowY: "auto", maxHeight: "280px" }}>
|
||||
<Group grow>
|
||||
<PasswordInput
|
||||
label="Old Password"
|
||||
placeholder="Enter old password"
|
||||
@@ -192,7 +193,7 @@ export default function ChangePassword() {
|
||||
withAsterisk
|
||||
mb="xs"
|
||||
/>
|
||||
<Group grow>
|
||||
|
||||
<PasswordInput
|
||||
label="New Password"
|
||||
placeholder="Enter new password"
|
||||
@@ -217,9 +218,7 @@ export default function ChangePassword() {
|
||||
/>
|
||||
|
||||
</Group>
|
||||
|
||||
{/* CAPTCHA */}
|
||||
|
||||
<div style={{ marginTop: 5 }}>
|
||||
<label style={{ display: "block", marginBottom: 4, fontSize: "14px" }}>
|
||||
|
||||
@@ -274,10 +273,6 @@ export default function ChangePassword() {
|
||||
readOnly={otpValidated}
|
||||
/>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
{/* Buttons */}
|
||||
<Group mt="md" gap="sm">
|
||||
<Button onClick={handleSubmit}>
|
||||
{step === "form" && "Submit"}
|
||||
@@ -288,6 +283,12 @@ export default function ChangePassword() {
|
||||
Reset
|
||||
</Button>
|
||||
</Group>
|
||||
</div>
|
||||
|
||||
<Text size="sm" c="dimmed" style={{ marginTop: "40px" }}>
|
||||
Note: Your new Transaction password must be 8–15 characters long and contain at least one number and one special character.
|
||||
</Text>
|
||||
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
@@ -15,6 +15,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
{ label: "Change Login Password", href: "/settings/change_login_password" },
|
||||
{ label: "Change transaction Password", href: "/settings/change_txn_password" },
|
||||
{ label: "Set transaction Password", href: "/settings/set_txn_password" },
|
||||
{ label: "Set userId", href: "/settings/user_id" },
|
||||
];
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem("access_token");
|
||||
|
@@ -8,6 +8,7 @@ import {
|
||||
Title,
|
||||
Paper,
|
||||
Group,
|
||||
Text
|
||||
} from "@mantine/core";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { IconLock } from "@tabler/icons-react";
|
||||
@@ -294,6 +295,10 @@ export default function ChangePassword() {
|
||||
Reset
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
<Text size="sm" c="dimmed" style={{ marginTop: "40px" }}>
|
||||
Note: Your new Transaction password must be 8–15 characters long and contain at least one number and one special character.
|
||||
</Text>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
18
src/app/(main)/settings/user_id/page.tsx
Normal file
18
src/app/(main)/settings/user_id/page.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Group, Loader, Paper, Text } from "@mantine/core";
|
||||
|
||||
|
||||
export default function ChangePassword() {
|
||||
return (
|
||||
<Paper shadow="sm" radius="md" p="md" withBorder h={400} >
|
||||
<Group>
|
||||
<Text fw={700} size="lg">
|
||||
The feature will be available soon...
|
||||
</Text>
|
||||
<Loader color="blue" type="bars" size="sm" />
|
||||
</Group>
|
||||
</Paper>
|
||||
);
|
||||
}
|
Reference in New Issue
Block a user