react
This commit is contained in:
parent
509d01a4e7
commit
703f1256ff
7617
package-lock.json
generated
7617
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
16
package.json
16
package.json
@ -2,11 +2,15 @@
|
||||
"name": "log",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.11.3",
|
||||
"@emotion/styled": "^11.11.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.5.2",
|
||||
"@fortawesome/react-fontawesome": "^0.2.2",
|
||||
"@mui/icons-material": "^5.15.20",
|
||||
"@mui/material": "^5.15.20",
|
||||
"@mui/styles": "^5.16.4",
|
||||
@ -17,23 +21,19 @@
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"axios": "^1.6.7",
|
||||
"lucide-react": "^0.511.0",
|
||||
"mdb-react-ui-kit": "^7.1.0",
|
||||
"react": "^18.2.0",
|
||||
"react-barcode": "^1.5.3",
|
||||
"react-data-grid": "^7.0.0-beta.44",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-google-recaptcha": "^3.1.0",
|
||||
"react-icons": "^5.2.1",
|
||||
"react-qr-code": "^2.0.14",
|
||||
"react-router-dom": "^6.21.3",
|
||||
"react-scripts": "^5.0.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
|
||||
@ -46,3 +46,4 @@
|
||||
/* .login-container input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
} */
|
||||
|
||||
|
||||
22
src/App.js
22
src/App.js
@ -1,7 +1,6 @@
|
||||
|
||||
|
||||
import React from "react";
|
||||
import { Routes, Route } from "react-router-dom";
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
import Login from "./components/Login/Login";
|
||||
import Dashboard from "./components/Dashboard/dashboard";
|
||||
import UserMaintance from "./components/Dashboard/UserMaintance";
|
||||
@ -12,34 +11,27 @@ import DynamicTable from "./components/Dashboard/Dynamictable";
|
||||
import Form from "./components/Dashboard/Form";
|
||||
import ForgotPassword from "./components/Login/ForgotPassword";
|
||||
import CreateAccount from "./components/Login/CreateAccount";
|
||||
import Apitest from "./components/Dashboard/Test/Apitest";
|
||||
import DashboardBuilder from "./components/Dashboard/DashboardBuilder";
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<div>
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/" element={<Login />} />
|
||||
<Route path="/Dashboard" element={<Dashboard />} />
|
||||
<Route path="/UserGroupMaintance" element={<UserGroupMaintance />} />
|
||||
<Route path="/Dashboard/UserMaintance" element={<UserMaintance />} />
|
||||
<Route path="/CodeExtension" element={<CodeExtension />} />
|
||||
<Route
|
||||
path="/Dashboard/DashboardBuilder"
|
||||
element={<dashboardBuilder />}
|
||||
/>
|
||||
<Route path="/Dashboard/DashboardBuilder" element={<DashboardBuilder />} />
|
||||
<Route path="/Extension" element={<Extension />} />
|
||||
<Route path="/Dynamictable" element={<DynamicTable />} />
|
||||
<Route path="/Form" element={<Form />} />
|
||||
<Route path="/ForgotPassword" element={<ForgotPassword />} />
|
||||
<Route path="/CreateAccount" element={<CreateAccount />} />
|
||||
<Route path="/Test" element={<Apitest />} />
|
||||
|
||||
{/* buildercomponents */}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</Routes>
|
||||
</Router>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,197 +0,0 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Button, Checkbox, Container, FormControlLabel, Modal, Table, TextField, Typography } from "@mui/material";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faEdit, faTrashAlt, faPlus } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
|
||||
const api = process.env.REACT_APP_API_BASE_URL;
|
||||
function AccessTypeManagement() {
|
||||
const [accessTypes, setAccessTypes] = useState([]);
|
||||
const [showAddEditModal, setShowAddEditModal] = useState(false);
|
||||
const [currentAccessType, setCurrentAccessType] = useState({
|
||||
typeId: "",
|
||||
typeName: "",
|
||||
description: "",
|
||||
isActive: false
|
||||
});
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [recordsPerPage, setRecordsPerPage] = useState(10);
|
||||
const [visibleColumns, setVisibleColumns] = useState({
|
||||
typeId: true,
|
||||
typeName: true,
|
||||
description: true,
|
||||
isActive: true,
|
||||
actions: true
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem("token")
|
||||
const apiUrl = `${api}/api/getAllAccessTypes`;
|
||||
const fetchAccessTypes = async () => {
|
||||
try {
|
||||
const response = await fetch(apiUrl, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
setAccessTypes(data);
|
||||
} catch (error) {
|
||||
console.error("Error fetching access types:", error);
|
||||
}
|
||||
};
|
||||
fetchAccessTypes();
|
||||
}, []);
|
||||
|
||||
const toggleColumn = (column) => {
|
||||
setVisibleColumns((prev) => ({
|
||||
...prev,
|
||||
[column]: !prev[column],
|
||||
}));
|
||||
};
|
||||
|
||||
const handleInputChange = (event) => {
|
||||
const { name, value, checked } = event.target;
|
||||
setCurrentAccessType(prev => ({
|
||||
...prev,
|
||||
[name]: name === "isActive" ? checked : value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
if (isEditing) {
|
||||
setAccessTypes(accessTypes.map(type =>
|
||||
type.typeId === currentAccessType.typeId ? currentAccessType : type
|
||||
));
|
||||
} else {
|
||||
const newTypeId = `ID${accessTypes.length + 1}`;
|
||||
setAccessTypes([...accessTypes, { ...currentAccessType, typeId: newTypeId }]);
|
||||
}
|
||||
setShowAddEditModal(false);
|
||||
};
|
||||
|
||||
const openModal = (type = { typeId: "", typeName: "", description: "", isActive: false }) => {
|
||||
setIsEditing(!!type.typeId);
|
||||
setCurrentAccessType(type);
|
||||
setShowAddEditModal(true);
|
||||
};
|
||||
|
||||
const handleDelete = (typeId) => {
|
||||
setAccessTypes(accessTypes.filter(type => type.typeId !== typeId));
|
||||
};
|
||||
|
||||
return (
|
||||
<Container className="mt-5">
|
||||
<div style={{ display: "flex", justifyContent: "flex-end", marginBottom: "1rem" }}>
|
||||
<Button onClick={() => openModal()} variant="contained" startIcon={<FontAwesomeIcon icon={faPlus} />}>
|
||||
ADD
|
||||
</Button>
|
||||
</div>
|
||||
<div className="table-responsive">
|
||||
<Table striped bordered hover>
|
||||
<thead>
|
||||
<tr>
|
||||
{Object.entries(visibleColumns).map(([key, visible]) =>
|
||||
visible ? <th key={key}>{key.charAt(0).toUpperCase() + key.slice(1)}</th> : null
|
||||
)}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{accessTypes.slice(0, recordsPerPage).map((type, index) => (
|
||||
<tr key={index}>
|
||||
{Object.entries(visibleColumns).map(([key, visible]) =>
|
||||
visible ? (
|
||||
<td key={key}>
|
||||
{key === "actions" ? (
|
||||
<>
|
||||
<Button variant="light" size="small" onClick={() => openModal(type)}>
|
||||
<FontAwesomeIcon icon={faEdit} />
|
||||
</Button>
|
||||
<Button variant="light" size="small" onClick={() => handleDelete(type.typeId)}>
|
||||
<FontAwesomeIcon icon={faTrashAlt} />
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
key === "isActive" ? (
|
||||
<FormControlLabel
|
||||
control={<Checkbox checked={type[key]} onChange={handleInputChange} name={key} />}
|
||||
label=""
|
||||
/>
|
||||
) : (
|
||||
type[key]
|
||||
)
|
||||
)}
|
||||
</td>
|
||||
) : null
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<div style={{ display: "flex", justifyContent: "space-between", marginTop: "1rem" }}>
|
||||
<div>
|
||||
<Typography variant="body1">Manage Columns</Typography>
|
||||
{Object.keys(visibleColumns).map((key) => (
|
||||
<FormControlLabel
|
||||
key={key}
|
||||
control={<Checkbox checked={visibleColumns[key]} onChange={() => toggleColumn(key)} />}
|
||||
label={key.charAt(0).toUpperCase() + key.slice(1)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div>
|
||||
<Typography variant="body1">Records Per Page</Typography>
|
||||
{[10, 20, 30, 50].map((number) => (
|
||||
<Button key={number} onClick={() => setRecordsPerPage(number)} variant="outlined">
|
||||
{number}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal open={showAddEditModal} onClose={() => setShowAddEditModal(false)}>
|
||||
<div style={{ padding: "1rem", backgroundColor: "white", borderRadius: "8px", maxWidth: "400px", margin: "auto" }}>
|
||||
<Typography variant="h6" gutterBottom>{isEditing ? "Edit Access Type" : "Add Access Type"}</Typography>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Type Name"
|
||||
name="typeName"
|
||||
value={currentAccessType.typeName}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
style={{ marginBottom: "1rem" }}
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Description"
|
||||
name="description"
|
||||
value={currentAccessType.description}
|
||||
onChange={handleInputChange}
|
||||
style={{ marginBottom: "1rem" }}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox checked={currentAccessType.isActive} onChange={handleInputChange} name="isActive" />}
|
||||
label="Active?"
|
||||
style={{ marginBottom: "1rem" }}
|
||||
/>
|
||||
<div style={{ display: "flex", justifyContent: "flex-end" }}>
|
||||
<Button variant="outlined" onClick={() => setShowAddEditModal(false)} style={{ marginRight: "1rem" }}>Close</Button>
|
||||
<Button variant="contained" type="submit">{isEditing ? "Update" : "Add"}</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Modal>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default AccessTypeManagement;
|
||||
@ -1,8 +1,8 @@
|
||||
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import { Box, Button } from "@mui/material";
|
||||
import { DataGrid, GridToolbarContainer } from "@mui/x-data-grid";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faEllipsisV } from "@fortawesome/free-solid-svg-icons";
|
||||
import { BsThreeDotsVertical } from "react-icons/bs"; // Importing react-icons
|
||||
|
||||
const api = process.env.REACT_APP_API_BASE_URL;
|
||||
|
||||
@ -34,6 +34,7 @@ function CustomToolbar({ apiRef, handleModal }) {
|
||||
function ApiRegistery() {
|
||||
const [menuItems, setMenuItems] = useState([]);
|
||||
const [selectedMenuItem, setSelectedMenuItem] = useState(null);
|
||||
// eslint-disable-next-line
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const apiRef = useRef(null);
|
||||
|
||||
@ -88,7 +89,7 @@ function ApiRegistery() {
|
||||
className="cursor-pointer"
|
||||
onClick={() => handleThreeDotsClick(row.id)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faEllipsisV} />
|
||||
<BsThreeDotsVertical /> {/* Using react-icons */}
|
||||
</div>
|
||||
{selectedMenuItem === row.id && (
|
||||
<div className="absolute right-0 mt-2 py-2 w-48 bg-white rounded-lg shadow-xl">
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
@ -13,8 +13,7 @@ import {
|
||||
Autocomplete,
|
||||
} from "@mui/material";
|
||||
import { DataGrid, GridToolbarContainer } from "@mui/x-data-grid";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faEllipsisV } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FaEllipsisV } from "react-icons/fa"; // Importing react-icons instead of Font Awesome
|
||||
import AirplanemodeActiveIcon from "@mui/icons-material/AirplanemodeActive";
|
||||
import { Link } from "react-router-dom";
|
||||
import Extension from "./Extension";
|
||||
@ -45,7 +44,7 @@ function CodeExtension() {
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
const token = localStorage.getItem("token"); // Get token from local storage
|
||||
const token = localStorage.getItem("authToken"); // Get token from local storage
|
||||
try {
|
||||
const response = await fetch(`${process.env.REACT_APP_API_BASE_URL}/api/extension`, {
|
||||
headers: {
|
||||
@ -105,7 +104,7 @@ function CodeExtension() {
|
||||
className="cursor-pointer"
|
||||
onClick={() => handleThreeDotsClick(row.id)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faEllipsisV} />
|
||||
<FaEllipsisV /> {/* Using react-icons instead of Font Awesome */}
|
||||
</div>
|
||||
{selectedMenuItem === row.id && (
|
||||
<div className="absolute right-0 mt-2 py-2 w-48 bg-white rounded-lg shadow-xl">
|
||||
|
||||
@ -35,7 +35,7 @@ const DynamicTable = () => {
|
||||
}, [location.state]);
|
||||
|
||||
const fetchForms = async () => {
|
||||
const token = localStorage.getItem("token"); // Get token from local storage
|
||||
const token = localStorage.getItem("authToken"); // Get token from local storage
|
||||
try {
|
||||
const response = await axios.get(`${api}/api/form_setup`, {
|
||||
headers: {
|
||||
@ -55,7 +55,7 @@ const DynamicTable = () => {
|
||||
};
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
const token = localStorage.getItem("token"); // Get token from local storage
|
||||
const token = localStorage.getItem("authToken"); // Get token from local storage
|
||||
try {
|
||||
await axios.delete(`${api}/api/form_setup/${id}`, {
|
||||
headers: {
|
||||
@ -69,7 +69,7 @@ const DynamicTable = () => {
|
||||
};
|
||||
|
||||
const handleBuild = async (id) => {
|
||||
const token = localStorage.getItem("token"); // Get token from local storage
|
||||
const token = localStorage.getItem("authToken"); // Get token from local storage
|
||||
try {
|
||||
await axios.post(
|
||||
`${api}/api/dynamic_form_build`,
|
||||
|
||||
@ -23,7 +23,7 @@ const Extension = ({ onSubmit }) => {
|
||||
onSubmit(formData.dataType);
|
||||
}
|
||||
// Navigate to CodeExtension page with the form data
|
||||
navigate('/Codeextension', { state: { formData } });
|
||||
navigate('/CodeExtension', { state: { formData } });
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@ -2,7 +2,7 @@ import React, { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
|
||||
function DynamicForm() {
|
||||
function Form() {
|
||||
const [components, setComponents] = useState([
|
||||
{
|
||||
id: uuidv4(),
|
||||
@ -214,4 +214,4 @@ function DynamicForm() {
|
||||
);
|
||||
}
|
||||
|
||||
export default DynamicForm;
|
||||
export default Form;
|
||||
|
||||
@ -1,34 +1,110 @@
|
||||
// HomePage.js
|
||||
|
||||
import React from 'react';
|
||||
import { BarChart } from '@mui/x-charts/BarChart'; // Import BarChart component
|
||||
import { FaUsers, FaCog, FaChartBar, FaShieldAlt } from 'react-icons/fa';
|
||||
|
||||
const Card = ({ index }) => {
|
||||
return (
|
||||
<div className="bg-white border border-gray-300 rounded-lg shadow-md p-6 m-4 cursor-pointer transition-transform transform hover:scale-105 hover:shadow-lg flex flex-col items-center justify-center text-center">
|
||||
<h3 className="text-lg font-semibold mb-2">INDEX {index}</h3>
|
||||
<p className="text-gray-600">{index}.</p>
|
||||
const StatCard = ({ icon: Icon, title, value, color }) => (
|
||||
<div className="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-all duration-200">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className={`p-3 rounded-lg ${color}`}>
|
||||
<Icon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
<div>
|
||||
<h3 className="text-gray-500 text-sm font-medium">{title}</h3>
|
||||
<p className="text-2xl font-bold text-gray-800">{value}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const HomePage = () => {
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col items-center justify-center bg-gray-100 p-4">
|
||||
<h2 className="text-3xl font-semibold text-gray-700 mb-6">Welcome to the Dashboard!</h2>
|
||||
<div className="flex flex-wrap justify-center">
|
||||
<Card index={1} />
|
||||
<Card index={2} />
|
||||
<Card index={3} />
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-3xl font-bold text-gray-800">Welcome Back!</h1>
|
||||
<div className="text-sm text-gray-500">Last updated: {new Date().toLocaleDateString()}</div>
|
||||
</div>
|
||||
<div className="w-full mt-8 flex justify-center">
|
||||
{/* Add BarChart component */}
|
||||
<BarChart
|
||||
xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]}
|
||||
series={[{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }]}
|
||||
width={700}
|
||||
height={400}
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<StatCard
|
||||
icon={FaUsers}
|
||||
title="Total Users"
|
||||
value="1,234"
|
||||
color="bg-gradient-to-r from-purple-500 to-indigo-500"
|
||||
/>
|
||||
<StatCard
|
||||
icon={FaCog}
|
||||
title="Active Systems"
|
||||
value="12"
|
||||
color="bg-gradient-to-r from-blue-500 to-cyan-500"
|
||||
/>
|
||||
<StatCard
|
||||
icon={FaChartBar}
|
||||
title="Reports Generated"
|
||||
value="456"
|
||||
color="bg-gradient-to-r from-indigo-500 to-purple-500"
|
||||
/>
|
||||
<StatCard
|
||||
icon={FaShieldAlt}
|
||||
title="Security Score"
|
||||
value="98%"
|
||||
color="bg-gradient-to-r from-green-500 to-emerald-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Recent Activity */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-6">
|
||||
<h2 className="text-xl font-semibold text-gray-800 mb-4">Recent Activity</h2>
|
||||
<div className="space-y-4">
|
||||
{[1, 2, 3].map((item) => (
|
||||
<div key={item} className="flex items-center space-x-4 p-4 rounded-lg hover:bg-gray-50 transition-colors">
|
||||
<div className="w-2 h-2 rounded-full bg-purple-500"></div>
|
||||
<div className="flex-1">
|
||||
<p className="text-gray-800">System update completed</p>
|
||||
<p className="text-sm text-gray-500">2 hours ago</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="bg-gradient-to-br from-purple-500 to-indigo-600 rounded-xl shadow-lg p-6 text-white">
|
||||
<h2 className="text-xl font-semibold mb-4">Quick Actions</h2>
|
||||
<div className="space-y-3">
|
||||
<button className="w-full bg-white/10 hover:bg-white/20 text-white font-medium py-2 px-4 rounded-lg transition-colors">
|
||||
Generate Report
|
||||
</button>
|
||||
<button className="w-full bg-white/10 hover:bg-white/20 text-white font-medium py-2 px-4 rounded-lg transition-colors">
|
||||
Add New User
|
||||
</button>
|
||||
<button className="w-full bg-white/10 hover:bg-white/20 text-white font-medium py-2 px-4 rounded-lg transition-colors">
|
||||
System Settings
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-blue-500 to-cyan-600 rounded-xl shadow-lg p-6 text-white">
|
||||
<h2 className="text-xl font-semibold mb-4">System Status</h2>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span>CPU Usage</span>
|
||||
<span className="font-medium">45%</span>
|
||||
</div>
|
||||
<div className="w-full bg-white/20 rounded-full h-2">
|
||||
<div className="bg-white h-2 rounded-full" style={{ width: '45%' }}></div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span>Memory Usage</span>
|
||||
<span className="font-medium">62%</span>
|
||||
</div>
|
||||
<div className="w-full bg-white/20 rounded-full h-2">
|
||||
<div className="bg-white h-2 rounded-full" style={{ width: '62%' }}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
// eslint-disable-next-line
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Box, Button } from '@mui/material';
|
||||
import { DataGrid, GridToolbarContainer } from '@mui/x-data-grid';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faEllipsisV } from '@fortawesome/free-solid-svg-icons';
|
||||
import { BsThreeDotsVertical } from 'react-icons/bs'; // Importing react-icons
|
||||
|
||||
function CustomToolbar({ apiRef, handleThreeDotsClick, handleModal }) {
|
||||
const handleGoToPage1 = () => {
|
||||
@ -24,17 +24,16 @@ function MenuAccessControl() {
|
||||
const [selectedMenuItem, setSelectedMenuItem] = useState(null);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [isUpdateModalOpen, setIsUpdateModalOpen] = useState(false);
|
||||
const [newMenuItem, setNewMenuItem] = useState({
|
||||
// Define initial values for the new menu item in the modal
|
||||
No: '',
|
||||
menuItemname: '',
|
||||
view: '',
|
||||
create: '',
|
||||
edit: '',
|
||||
delete: '',
|
||||
query: '',
|
||||
export: [],
|
||||
});
|
||||
// const [newMenuItem, setNewMenuItem] = useState({
|
||||
// No: '',
|
||||
// menuItemname: '',
|
||||
// view: '',
|
||||
// create: '',
|
||||
// edit: '',
|
||||
// delete: '',
|
||||
// query: '',
|
||||
// export: [],
|
||||
// });
|
||||
const apiRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
@ -72,15 +71,15 @@ function MenuAccessControl() {
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const handleModalSave = () => {
|
||||
// Implement save logic for adding a new menu item here
|
||||
setIsModalOpen(false);
|
||||
};
|
||||
// const handleModalSave = () => {
|
||||
// // Implement save logic for adding a new menu item here
|
||||
// setIsModalOpen(false);
|
||||
// };
|
||||
|
||||
const handleUpdateSave = () => {
|
||||
// Implement save logic for updating a menu item here
|
||||
setIsUpdateModalOpen(false);
|
||||
};
|
||||
// const handleUpdateSave = () => {
|
||||
// // Implement save logic for updating a menu item here
|
||||
// setIsUpdateModalOpen(false);
|
||||
// };
|
||||
|
||||
const columns = [
|
||||
{ field: 'No', headerName: 'No', width: 100,headerClassName: 'custom-header', cellClassName: 'custom-cell' },
|
||||
@ -98,7 +97,7 @@ function MenuAccessControl() {
|
||||
renderCell: ({ row }) => (
|
||||
<div>
|
||||
<div className="three-dots" onClick={() => handleThreeDotsClick(row.menuItemId)}>
|
||||
<FontAwesomeIcon icon={faEllipsisV} />
|
||||
<BsThreeDotsVertical /> {/* Using react-icons */}
|
||||
</div>
|
||||
{selectedMenuItem === row.menuItemId && (
|
||||
<div className="popover">
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import { Box, Button } from "@mui/material";
|
||||
import { DataGrid, GridToolbarContainer } from "@mui/x-data-grid";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faEllipsisV } from "@fortawesome/free-solid-svg-icons";
|
||||
import { BsThreeDotsVertical } from "react-icons/bs"; // Importing react-icons
|
||||
import "./MenuMaintance.css";
|
||||
|
||||
const api = process.env.REACT_APP_API_BASE_URL;
|
||||
@ -30,7 +29,7 @@ function MenuMaintenance() {
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
const token = localStorage.getItem("token");
|
||||
const token = localStorage.getItem("authToken");
|
||||
try {
|
||||
const response = await fetch(`${api}/api1/submenu1`, {
|
||||
headers: {
|
||||
@ -112,8 +111,7 @@ function MenuMaintenance() {
|
||||
className="three-dots"
|
||||
onClick={() => handleThreeDotsClick(row.menuItemId)}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faEllipsisV}
|
||||
<BsThreeDotsVertical
|
||||
className="cursor-pointer text-gray-800 hover:text-gray-600"
|
||||
/>
|
||||
</div>
|
||||
@ -160,7 +158,7 @@ function MenuMaintenance() {
|
||||
fontWeight: "bold",
|
||||
},
|
||||
}}
|
||||
className=" border border-gray-200 shadow-lg rounded-lg bg-gray-400"
|
||||
className="border border-gray-200 shadow-lg rounded-lg bg-gray-400"
|
||||
/>
|
||||
</Box>
|
||||
{/* Your modals and other components */}
|
||||
|
||||
@ -37,6 +37,12 @@ const Report = () => {
|
||||
},
|
||||
});
|
||||
|
||||
if (response.status === 401) {
|
||||
console.error("Unauthorized. Redirecting to login.");
|
||||
// Redirect to the login page here if needed
|
||||
return;
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch data");
|
||||
}
|
||||
|
||||
@ -1,20 +1,18 @@
|
||||
import React, { useState } from 'react';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faUser, faUsers, faUtensils, faLock, faCogs, faKey } from '@fortawesome/free-solid-svg-icons';
|
||||
import { FaUser, FaUsers, FaUtensils, FaLock, FaCogs, FaKey } from 'react-icons/fa';
|
||||
import UserMaintance from './UserMaintance';
|
||||
import UserGroupMaintance from './UserGroupMaintance/UserGroupMaintance';
|
||||
import MenuMaintance from './MenuMaintance/MenuMaintance';
|
||||
import MenuAccessControl from './MenuAccessControl/MenuAccessControl';
|
||||
import SystemParameters from './SystemParameters/SystemParameters';
|
||||
import AccessType from './AccessType/AccessType';
|
||||
import ApiRegistery from './ApiRegistery/ApiRegistery';
|
||||
import TokenRegistery from './TokenRegistery/TokenRegistery';
|
||||
import Codeextension from './Codeextension.js';
|
||||
import DynamicTable from './Dynamictable.js';
|
||||
|
||||
const Card = ({ title, content, icon, onClick }) => (
|
||||
const Card = ({ title, content, icon: Icon, onClick }) => (
|
||||
<div onClick={onClick} className="bg-white border border-gray-300 rounded-lg shadow-md p-6 m-4 cursor-pointer transition-transform transform hover:scale-105 hover:shadow-lg flex flex-col items-center justify-center text-center">
|
||||
<FontAwesomeIcon icon={icon} className="text-4xl text-gray-800 mb-4" />
|
||||
<Icon className="text-4xl text-gray-800 mb-4" />
|
||||
<h3 className="text-lg font-semibold">{title}</h3>
|
||||
<p className="text-gray-600">{content}</p>
|
||||
</div>
|
||||
@ -26,7 +24,7 @@ const CardList = () => {
|
||||
const [showMenuMaintance, setShowMenuMaintance] = useState(false);
|
||||
const [showMenuAccessControl, setShowMenuAccessControl] = useState(false);
|
||||
const [showSystemParameters, setShowSystemParameters] = useState(false);
|
||||
const [showAccessType, setShowAccessType] = useState(false);
|
||||
// const [showAccessType, setShowAccessType] = useState(false);
|
||||
const [showApiRegistery, setShowApiRegistery] = useState(false);
|
||||
const [showTokenRegistery, setShowTokenRegistery] = useState(false);
|
||||
const [showCodeExtension, setShowCodeExtension] = useState(false);
|
||||
@ -38,7 +36,7 @@ const CardList = () => {
|
||||
setShowMenuMaintance(menuItemDesc === 'Menu Maintance');
|
||||
setShowMenuAccessControl(menuItemDesc === 'Menu Access Control');
|
||||
setShowSystemParameters(menuItemDesc === 'System Parameters');
|
||||
setShowAccessType(menuItemDesc === 'Access Type');
|
||||
// setShowAccessType(menuItemDesc === 'Access Type');
|
||||
setShowApiRegistery(menuItemDesc === 'Api Registery');
|
||||
setShowTokenRegistery(menuItemDesc === 'Token Registery');
|
||||
setShowCodeExtension(menuItemDesc === 'Code Extension');
|
||||
@ -47,19 +45,19 @@ const CardList = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
{!showUserMaintance && !showUserGroupMaintance && !showMenuMaintance && !showMenuAccessControl && !showSystemParameters && !showAccessType && !showApiRegistery && !showTokenRegistery && !showCodeExtension && !showDynamicTable && (
|
||||
{!showUserMaintance && !showUserGroupMaintance && !showMenuMaintance && !showMenuAccessControl && !showSystemParameters && !showApiRegistery && !showTokenRegistery && !showCodeExtension && !showDynamicTable && (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-100 p-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||
<Card title="User Maintance" content="Manage users" icon={faUser} onClick={() => handleCardClick('User Maintance')} />
|
||||
<Card title="User Group Maintance" content="Manage user groups" icon={faUsers} onClick={() => handleCardClick('User Group Maintance')} />
|
||||
<Card title="Menu Maintance" content="Manage menus" icon={faUtensils} onClick={() => handleCardClick('Menu Maintance')} />
|
||||
<Card title="Menu Access Control" content="Control menu access" icon={faLock} onClick={() => handleCardClick('Menu Access Control')} />
|
||||
<Card title="System Parameters" content="Configure system parameters" icon={faCogs} onClick={() => handleCardClick('System Parameters')} />
|
||||
<Card title="Access Type" content="Manage access types" icon={faKey} onClick={() => handleCardClick('Access Type')} />
|
||||
<Card title="Api Registery" content="Manage APIs" icon={faUser} onClick={() => handleCardClick('Api Registery')} />
|
||||
<Card title="Token Registery" content="Manage tokens" icon={faKey} onClick={() => handleCardClick('Token Registery')} />
|
||||
<Card title="Code Extension" content="Extend code functionalities" icon={faLock} onClick={() => handleCardClick('Code Extension')} />
|
||||
<Card title="Dynamic Table" content="Dynamic data tables" icon={faKey} onClick={() => handleCardClick('Dynamic Table')} />
|
||||
<Card title="User Maintance" content="Manage users" icon={FaUser} onClick={() => handleCardClick('User Maintance')} />
|
||||
<Card title="User Group Maintance" content="Manage user groups" icon={FaUsers} onClick={() => handleCardClick('User Group Maintance')} />
|
||||
<Card title="Menu Maintance" content="Manage menus" icon={FaUtensils} onClick={() => handleCardClick('Menu Maintance')} />
|
||||
<Card title="Menu Access Control" content="Control menu access" icon={FaLock} onClick={() => handleCardClick('Menu Access Control')} />
|
||||
<Card title="System Parameters" content="Configure system parameters" icon={FaCogs} onClick={() => handleCardClick('System Parameters')} />
|
||||
{/* <Card title="Access Type" content="Manage access types" icon={FaKey} onClick={() => handleCardClick('Access Type')} /> */}
|
||||
<Card title="Api Registery" content="Manage APIs" icon={FaUser} onClick={() => handleCardClick('Api Registery')} />
|
||||
<Card title="Token Registery" content="Manage tokens" icon={FaKey} onClick={() => handleCardClick('Token Registery')} />
|
||||
<Card title="Code Extension" content="Extend code functionalities" icon={FaLock} onClick={() => handleCardClick('Code Extension')} />
|
||||
<Card title="Dynamic Table" content="Dynamic data tables" icon={FaKey} onClick={() => handleCardClick('Dynamic Table')} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@ -68,7 +66,7 @@ const CardList = () => {
|
||||
{showMenuMaintance && <MenuMaintance />}
|
||||
{showMenuAccessControl && <MenuAccessControl />}
|
||||
{showSystemParameters && <SystemParameters />}
|
||||
{showAccessType && <AccessType />}
|
||||
{/* {showAccessType && <AccessType />} */}
|
||||
{showApiRegistery && <ApiRegistery />}
|
||||
{showTokenRegistery && <TokenRegistery />}
|
||||
{showCodeExtension && <Codeextension />}
|
||||
|
||||
@ -1,427 +0,0 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import axios from "axios";
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
Snackbar,
|
||||
Alert,
|
||||
Typography,
|
||||
TextField,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TablePagination,
|
||||
Paper,
|
||||
IconButton,
|
||||
InputAdornment
|
||||
} from "@mui/material";
|
||||
import { makeStyles } from '@mui/styles';
|
||||
import SearchIcon from '@mui/icons-material/Search';
|
||||
|
||||
const API_URL = "http://34.198.218.30:30179/entityBuilder/Gaurav_testing";
|
||||
const token = localStorage.getItem("authToken");
|
||||
// Custom styles using makeStyles
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
tableHeader: {
|
||||
backgroundColor: "#000000",
|
||||
color: "#ffffff",
|
||||
},
|
||||
searchContainer: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
marginBottom: theme.spacing(2),
|
||||
},
|
||||
searchInput: {
|
||||
marginRight: theme.spacing(2),
|
||||
flex: 1,
|
||||
},
|
||||
tableContainer: {
|
||||
marginTop: theme.spacing(2),
|
||||
},
|
||||
dialogContent: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: theme.spacing(2),
|
||||
},
|
||||
formControl: {
|
||||
marginBottom: theme.spacing(2),
|
||||
},
|
||||
button: {
|
||||
margin: theme.spacing(1),
|
||||
},
|
||||
}));
|
||||
|
||||
const EntityTable = () => {
|
||||
const classes = useStyles();
|
||||
const [data, setData] = useState([]);
|
||||
const [filteredData, setFilteredData] = useState([]);
|
||||
const [newEntity, setNewEntity] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
mobno: "",
|
||||
address: "",
|
||||
pincode: "",
|
||||
});
|
||||
const [editEntity, setEditEntity] = useState(null);
|
||||
const [showEditModal, setShowEditModal] = useState(false);
|
||||
const [showAddModal, setShowAddModal] = useState(false);
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
const [deleteEntityId, setDeleteEntityId] = useState(null);
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
const [itemsPerPage] = useState(5); // Adjust this value as needed
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [openSnackbar, setOpenSnackbar] = useState(false);
|
||||
const [snackbarMessage, setSnackbarMessage] = useState("");
|
||||
const [snackbarSeverity, setSnackbarSeverity] = useState("success");
|
||||
|
||||
const handlePageChange = (event, newPage) => {
|
||||
setCurrentPage(newPage);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
handleSearch();
|
||||
}, [searchQuery, data]);
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const response = await axios.get(API_URL, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
setData(response.data);
|
||||
} catch (error) {
|
||||
console.error("Error fetching data:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
try {
|
||||
await axios.delete(`${API_URL}/${deleteEntityId}`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
fetchData();
|
||||
setSnackbarMessage("Successfully deleted!");
|
||||
setSnackbarSeverity("success");
|
||||
setOpenSnackbar(true);
|
||||
setShowDeleteModal(false);
|
||||
} catch (error) {
|
||||
console.error("Error deleting data:", error);
|
||||
setSnackbarMessage("Failed to delete!");
|
||||
setSnackbarSeverity("error");
|
||||
setOpenSnackbar(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAdd = async () => {
|
||||
try {
|
||||
await axios.post(API_URL, newEntity, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
fetchData();
|
||||
setNewEntity({
|
||||
name: "",
|
||||
email: "",
|
||||
mobno: "",
|
||||
address: "",
|
||||
pincode: "",
|
||||
});
|
||||
setShowAddModal(false);
|
||||
setSnackbarMessage("Successfully added!");
|
||||
setSnackbarSeverity("success");
|
||||
setOpenSnackbar(true);
|
||||
} catch (error) {
|
||||
console.error("Error adding data:", error);
|
||||
setSnackbarMessage("Failed to add!");
|
||||
setSnackbarSeverity("error");
|
||||
setOpenSnackbar(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setNewEntity({ ...newEntity, [name]: value });
|
||||
};
|
||||
|
||||
const handleEditChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setEditEntity({ ...editEntity, [name]: value });
|
||||
};
|
||||
|
||||
const handleEdit = (entity) => {
|
||||
setEditEntity(entity);
|
||||
setShowEditModal(true);
|
||||
};
|
||||
|
||||
const handleUpdate = async () => {
|
||||
try {
|
||||
await axios.put(`${API_URL}/${editEntity.id}`, editEntity, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
fetchData();
|
||||
setShowEditModal(false);
|
||||
setSnackbarMessage("Successfully updated!");
|
||||
setSnackbarSeverity("success");
|
||||
setOpenSnackbar(true);
|
||||
} catch (error) {
|
||||
console.error("Error updating data:", error);
|
||||
setSnackbarMessage("Failed to update!");
|
||||
setSnackbarSeverity("error");
|
||||
setOpenSnackbar(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
const filtered = data.filter(
|
||||
(entity) =>
|
||||
entity.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
entity.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
entity.mobno.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
entity.address.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
entity.pincode.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
);
|
||||
setFilteredData(filtered);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container mt-5">
|
||||
<Typography variant="h4" gutterBottom>
|
||||
Entity Table
|
||||
</Typography>
|
||||
<div className={classes.searchContainer}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() => setShowAddModal(true)}
|
||||
className={classes.button}
|
||||
>
|
||||
Add Entity
|
||||
</Button>
|
||||
<TextField
|
||||
className={classes.searchInput}
|
||||
label="Search"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton>
|
||||
<SearchIcon />
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<TableContainer component={Paper} className={classes.tableContainer}>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow className={classes.tableHeader}>
|
||||
<TableCell>ID</TableCell>
|
||||
<TableCell>Name</TableCell>
|
||||
<TableCell>Email</TableCell>
|
||||
<TableCell>Mobile No</TableCell>
|
||||
<TableCell>Address</TableCell>
|
||||
<TableCell>Pincode</TableCell>
|
||||
<TableCell>Actions</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{filteredData.slice(currentPage * itemsPerPage, (currentPage + 1) * itemsPerPage).map((entity) => (
|
||||
<TableRow key={entity.id}>
|
||||
<TableCell>{entity.id}</TableCell>
|
||||
<TableCell>{entity.name}</TableCell>
|
||||
<TableCell>{entity.email}</TableCell>
|
||||
<TableCell>{entity.mobno}</TableCell>
|
||||
<TableCell>{entity.address}</TableCell>
|
||||
<TableCell>{entity.pincode}</TableCell>
|
||||
<TableCell>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="warning"
|
||||
size="small"
|
||||
className={classes.button}
|
||||
onClick={() => handleEdit(entity)}
|
||||
>
|
||||
Update
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="error"
|
||||
size="small"
|
||||
className={classes.button}
|
||||
onClick={() => {
|
||||
setDeleteEntityId(entity.id);
|
||||
setShowDeleteModal(true);
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25]}
|
||||
component="div"
|
||||
count={filteredData.length}
|
||||
rowsPerPage={itemsPerPage}
|
||||
page={currentPage}
|
||||
onPageChange={handlePageChange}
|
||||
/>
|
||||
<Dialog open={showEditModal} onClose={() => setShowEditModal(false)}>
|
||||
<DialogTitle>Edit Entity</DialogTitle>
|
||||
<DialogContent className={classes.dialogContent}>
|
||||
<TextField
|
||||
label="Name"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
name="name"
|
||||
value={editEntity?.name || ""}
|
||||
onChange={handleEditChange}
|
||||
className={classes.formControl}
|
||||
/>
|
||||
<TextField
|
||||
label="Email"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
name="email"
|
||||
value={editEntity?.email || ""}
|
||||
onChange={handleEditChange}
|
||||
className={classes.formControl}
|
||||
/>
|
||||
<TextField
|
||||
label="Mobile No"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
name="mobno"
|
||||
value={editEntity?.mobno || ""}
|
||||
onChange={handleEditChange}
|
||||
className={classes.formControl}
|
||||
/>
|
||||
<TextField
|
||||
label="Address"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
name="address"
|
||||
value={editEntity?.address || ""}
|
||||
onChange={handleEditChange}
|
||||
className={classes.formControl}
|
||||
/>
|
||||
<TextField
|
||||
label="Pincode"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
name="pincode"
|
||||
value={editEntity?.pincode || ""}
|
||||
onChange={handleEditChange}
|
||||
className={classes.formControl}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setShowEditModal(false)} color="primary">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleUpdate} color="primary">
|
||||
Update
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
<Dialog open={showAddModal} onClose={() => setShowAddModal(false)}>
|
||||
<DialogTitle>Add Entity</DialogTitle>
|
||||
<DialogContent className={classes.dialogContent}>
|
||||
<TextField
|
||||
label="Name"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
name="name"
|
||||
value={newEntity.name}
|
||||
onChange={handleChange}
|
||||
className={classes.formControl}
|
||||
/>
|
||||
<TextField
|
||||
label="Email"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
name="email"
|
||||
value={newEntity.email}
|
||||
onChange={handleChange}
|
||||
className={classes.formControl}
|
||||
/>
|
||||
<TextField
|
||||
label="Mobile No"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
name="mobno"
|
||||
value={newEntity.mobno}
|
||||
onChange={handleChange}
|
||||
className={classes.formControl}
|
||||
/>
|
||||
<TextField
|
||||
label="Address"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
name="address"
|
||||
value={newEntity.address}
|
||||
onChange={handleChange}
|
||||
className={classes.formControl}
|
||||
/>
|
||||
<TextField
|
||||
label="Pincode"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
name="pincode"
|
||||
value={newEntity.pincode}
|
||||
onChange={handleChange}
|
||||
className={classes.formControl}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setShowAddModal(false)} color="primary">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleAdd} color="primary">
|
||||
Add
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
<Dialog open={showDeleteModal} onClose={() => setShowDeleteModal(false)}>
|
||||
<DialogTitle>Confirm Delete</DialogTitle>
|
||||
<DialogContent>
|
||||
<Typography>Are you sure you want to delete this entity?</Typography>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setShowDeleteModal(false)} color="primary">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleDelete} color="primary">
|
||||
Delete
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
<Snackbar
|
||||
open={openSnackbar}
|
||||
autoHideDuration={6000}
|
||||
onClose={() => setOpenSnackbar(false)}
|
||||
>
|
||||
<Alert onClose={() => setOpenSnackbar(false)} severity={snackbarSeverity}>
|
||||
{snackbarMessage}
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EntityTable;
|
||||
@ -1,8 +1,7 @@
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import { Box, Button } from "@mui/material";
|
||||
import { DataGrid, GridToolbarContainer } from "@mui/x-data-grid";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faEllipsisV } from "@fortawesome/free-solid-svg-icons";
|
||||
import { BsThreeDotsVertical } from "react-icons/bs"; // Importing react-icons
|
||||
|
||||
const api = process.env.REACT_APP_API_BASE_URL;
|
||||
|
||||
@ -31,10 +30,10 @@ function CustomToolbar({ apiRef, handleModal }) {
|
||||
);
|
||||
}
|
||||
|
||||
function TokenRegistery() {
|
||||
function TokenRegistry() {
|
||||
const [menuItems, setMenuItems] = useState([]);
|
||||
const [selectedMenuItem, setSelectedMenuItem] = useState(null);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [, setIsModalOpen] = useState(false);
|
||||
const apiRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
@ -95,7 +94,7 @@ function TokenRegistery() {
|
||||
className="cursor-pointer"
|
||||
onClick={() => handleThreeDotsClick(row.id)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faEllipsisV} />
|
||||
<BsThreeDotsVertical /> {/* Updated icon from react-icons */}
|
||||
</div>
|
||||
{selectedMenuItem === row.id && (
|
||||
<div className="absolute right-0 mt-2 py-2 w-48 bg-white rounded-lg shadow-xl">
|
||||
@ -143,4 +142,4 @@ function TokenRegistery() {
|
||||
);
|
||||
}
|
||||
|
||||
export default TokenRegistery;
|
||||
export default TokenRegistry;
|
||||
|
||||
@ -16,26 +16,26 @@ const UpdateModal = ({ user, onUpdate, onClose }) => {
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleUpdate = () => {
|
||||
console.log('Before update:', updatedUser);
|
||||
onUpdate(updatedUser);
|
||||
// const handleUpdate = () => {
|
||||
// console.log('Before update:', updatedUser);
|
||||
// onUpdate(updatedUser);
|
||||
|
||||
onClose();
|
||||
// onClose();
|
||||
|
||||
|
||||
// Use a callback function with setUpdatedUser to ensure the state is updated
|
||||
setUpdatedUser((prev) => {
|
||||
const updatedData = { ...prev };
|
||||
console.log('Updated data:', updatedData);
|
||||
// // Use a callback function with setUpdatedUser to ensure the state is updated
|
||||
// setUpdatedUser((prev) => {
|
||||
// const updatedData = { ...prev };
|
||||
// console.log('Updated data:', updatedData);
|
||||
|
||||
onUpdate(updatedData); // Pass the updatedData to onUpdate
|
||||
onClose();
|
||||
return updatedData; // Return the updatedData to setUpdatedUser
|
||||
});
|
||||
// onUpdate(updatedData); // Pass the updatedData to onUpdate
|
||||
// onClose();
|
||||
// return updatedData; // Return the updatedData to setUpdatedUser
|
||||
// });
|
||||
|
||||
// Set the updatedUser state directly to ensure the UI reflects the changes
|
||||
setUpdatedUser(updatedUser);
|
||||
};
|
||||
// // Set the updatedUser state directly to ensure the UI reflects the changes
|
||||
// setUpdatedUser(updatedUser);
|
||||
// };
|
||||
|
||||
return (
|
||||
<div className="modalWrapper">
|
||||
|
||||
@ -1,14 +1,12 @@
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import { Box, Button } from "@mui/material";
|
||||
import { DataGrid, GridToolbarContainer } from "@mui/x-data-grid";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faEllipsisV } from "@fortawesome/free-solid-svg-icons";
|
||||
import { BsThreeDotsVertical } from "react-icons/bs";
|
||||
import "./UserGroupMaintance.css";
|
||||
import { Token } from "@mui/icons-material";
|
||||
|
||||
// eslint-disable-next-line
|
||||
const api = process.env.REACT_APP_API_BASE_URL;
|
||||
|
||||
function CustomToolbar({ apiRef, handleThreeDotsClick, handleModal }) {
|
||||
function CustomToolbar({ apiRef, handleModal }) {
|
||||
const handleGoToPage1 = () => {
|
||||
if (apiRef.current) {
|
||||
apiRef.current.setPage(1);
|
||||
@ -27,9 +25,8 @@ function UserMaintance() {
|
||||
const [userGroups, setUserGroups] = useState([]);
|
||||
const [selectedUserGroup, setSelectedUserGroup] = useState(null);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [isUpdateModalOpen, setIsUpdateModalOpen] = useState(false);
|
||||
const apiRef = useRef(null);
|
||||
|
||||
// eslint-disable-next-line
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
const token = localStorage.getItem("token");
|
||||
@ -165,7 +162,7 @@ function UserMaintance() {
|
||||
className="three-dots"
|
||||
onClick={() => handleThreeDotsClick(row.usrGrp)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faEllipsisV} />
|
||||
<BsThreeDotsVertical />
|
||||
</div>
|
||||
{selectedUserGroup === row.usrGrp && (
|
||||
<div className="popover">
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import { Box, Button } from "@mui/material";
|
||||
import { DataGrid, GridToolbarContainer } from "@mui/x-data-grid";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faEllipsisV } from "@fortawesome/free-solid-svg-icons";
|
||||
import { BsThreeDotsVertical } from "react-icons/bs";
|
||||
import Modal from "./Modal"; // Import your Modal component
|
||||
import UpdateModal from "./UpdateModal"; // Import your UpdateModal component
|
||||
import "./UserMaintance.css";
|
||||
@ -109,7 +108,7 @@ function UserMaintance() {
|
||||
className="three-dots"
|
||||
onClick={() => handleThreeDotsClick(row.userId)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faEllipsisV} />
|
||||
<BsThreeDotsVertical />
|
||||
</div>
|
||||
{selectedUser === row.userId && (
|
||||
<div className="popover">
|
||||
|
||||
@ -121,3 +121,6 @@ button:hover {
|
||||
.main-content h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Sidebar from "./sidebar";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
@ -6,19 +7,13 @@ import UserGroupMaintanceComponent from "./UserGroupMaintance/UserGroupMaintance
|
||||
import MenuMaintanceComponent from "./MenuMaintance/MenuMaintance";
|
||||
import MenuAccessControlComponent from "./MenuAccessControl/MenuAccessControl";
|
||||
import SystemParametersComponent from "./SystemParameters/SystemParameters";
|
||||
import AccessTypeComponent from "./AccessType/AccessType";
|
||||
// import AccessTypeComponent from "./AccessType/AccessType";
|
||||
import ApiRegistery from "./ApiRegistery/ApiRegistery";
|
||||
import TokenRegistery from "./TokenRegistery/TokenRegistery";
|
||||
import HomePage from "./HomePage";
|
||||
import Setup from "./Setup.js";
|
||||
import Report from "./Report";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import {
|
||||
faCog,
|
||||
faUsers,
|
||||
faSignOutAlt,
|
||||
faHome,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { FaCog, FaUsers, FaSignOutAlt, FaHome, FaChartBar } from "react-icons/fa";
|
||||
|
||||
const Dashboard = () => {
|
||||
const navigate = useNavigate();
|
||||
@ -29,14 +24,16 @@ const Dashboard = () => {
|
||||
|
||||
useEffect(() => {
|
||||
const fetchMenusData = async () => {
|
||||
const token = localStorage.getItem("token");
|
||||
const token = localStorage.getItem("authtoken");
|
||||
|
||||
const apiUrl = `${process.env.REACT_APP_API_BASE_URL}/fndMenu/menuloadbyuser`;
|
||||
console.log("Fetching menus from API:", apiUrl);
|
||||
|
||||
try {
|
||||
const response = await fetch(apiUrl, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
@ -92,36 +89,57 @@ const Dashboard = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-screen">
|
||||
<div className="flex justify-between items-center bg-gray-800 text-white p-4">
|
||||
<h3 className="text-2xl">Dashboard</h3>
|
||||
<nav className="flex space-x-4">
|
||||
<a className="text-white" href="#" onClick={handleHomeClick}>
|
||||
<FontAwesomeIcon icon={faHome} />
|
||||
</a>
|
||||
<a className="text-white" href="#" onClick={handleSetupClick}>
|
||||
<FontAwesomeIcon icon={faCog} />
|
||||
</a>
|
||||
<a className="text-white" href="#" onClick={handleReportClick}>
|
||||
<FontAwesomeIcon icon={faUsers} />
|
||||
</a>
|
||||
</nav>
|
||||
<div className="flex flex-col h-screen bg-gradient-to-br from-purple-50 via-white to-blue-50">
|
||||
{/* Top Navigation Bar */}
|
||||
<div className="flex justify-between items-center bg-gradient-to-r from-purple-600 to-indigo-600 text-white p-4 shadow-lg">
|
||||
<div className="flex items-center space-x-4">
|
||||
<h3 className="text-2xl font-bold">Dashboard</h3>
|
||||
<div className="h-6 w-px bg-white/30"></div>
|
||||
<nav className="flex space-x-6">
|
||||
<button
|
||||
className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
|
||||
onClick={handleHomeClick}
|
||||
className="flex items-center space-x-2 hover:text-purple-200 transition-colors"
|
||||
>
|
||||
<FaHome className="w-5 h-5" />
|
||||
<span>Home</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSetupClick}
|
||||
className="flex items-center space-x-2 hover:text-purple-200 transition-colors"
|
||||
>
|
||||
<FaCog className="w-5 h-5" />
|
||||
<span>Setup</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={handleReportClick}
|
||||
className="flex items-center space-x-2 hover:text-purple-200 transition-colors"
|
||||
>
|
||||
<FaChartBar className="w-5 h-5" />
|
||||
<span>Reports</span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
<button
|
||||
className="flex items-center space-x-2 bg-white/10 hover:bg-white/20 text-white font-semibold py-2 px-4 rounded-lg transition-all duration-200"
|
||||
onClick={handleLogout}
|
||||
>
|
||||
<FontAwesomeIcon icon={faSignOutAlt} /> Logout
|
||||
<FaSignOutAlt className="w-5 h-5" />
|
||||
<span>Logout</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
{/* Sidebar */}
|
||||
<div
|
||||
className={`bg-gray-700 text-white transition-all duration-300 ${
|
||||
className={`bg-gradient-to-b from-purple-700 to-indigo-800 text-white transition-all duration-300 ${
|
||||
sidebarCollapsed ? "w-16" : "w-64"
|
||||
} min-w-16`}
|
||||
} min-w-16 shadow-xl`}
|
||||
>
|
||||
<div className="flex justify-end p-2">
|
||||
<button
|
||||
onClick={handleSidebarToggle}
|
||||
className="text-white/80 hover:text-white bg-white/10 hover:bg-white/20 p-2 rounded-lg transition-all duration-200"
|
||||
>
|
||||
<div className="flex justify-center p-2">
|
||||
<button onClick={handleSidebarToggle} className="text-white">
|
||||
{sidebarCollapsed ? ">>" : "<<"}
|
||||
</button>
|
||||
</div>
|
||||
@ -133,32 +151,36 @@ const Dashboard = () => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 p-6 overflow-auto bg-gray-100">
|
||||
{/* Main Content Area */}
|
||||
<div className="flex-1 p-6 overflow-auto bg-gradient-to-br from-purple-50 via-white to-blue-50">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{content === "Setup" ? (
|
||||
<div className="bg-white rounded-xl shadow-lg p-6">
|
||||
<Setup />
|
||||
</div>
|
||||
) : content === "Home" ? (
|
||||
<div className="bg-white rounded-xl shadow-lg p-6">
|
||||
<HomePage />
|
||||
</div>
|
||||
) : content === "Report" ? (
|
||||
<div className="bg-white rounded-xl shadow-lg p-6">
|
||||
<Report />
|
||||
</div>
|
||||
) : selectedUserMaintance ? (
|
||||
<div>
|
||||
<h3 className="text-2xl mb-4">
|
||||
<div className="bg-white rounded-xl shadow-lg p-6">
|
||||
<h3 className="text-2xl font-bold text-gray-800 mb-6 pb-2 border-b border-purple-100">
|
||||
{selectedUserMaintance.menuItemDesc}
|
||||
</h3>
|
||||
{selectedUserMaintance.menuItemDesc === "User Maintance" ? (
|
||||
<UserMaintanceComponent />
|
||||
) : selectedUserMaintance.menuItemDesc ===
|
||||
"User Group Maintance" ? (
|
||||
) : selectedUserMaintance.menuItemDesc === "User Group Maintance" ? (
|
||||
<UserGroupMaintanceComponent />
|
||||
) : selectedUserMaintance.menuItemDesc === "Menu Maintance" ? (
|
||||
<MenuMaintanceComponent />
|
||||
) : selectedUserMaintance.menuItemDesc ===
|
||||
"Menu Access Control" ? (
|
||||
) : selectedUserMaintance.menuItemDesc === "Menu Access Control" ? (
|
||||
<MenuAccessControlComponent />
|
||||
) : selectedUserMaintance.menuItemDesc === "System Parameters" ? (
|
||||
<SystemParametersComponent />
|
||||
) : selectedUserMaintance.menuItemDesc === "Access Type" ? (
|
||||
<AccessTypeComponent />
|
||||
) : selectedUserMaintance.menuItemDesc === "Api Registery" ? (
|
||||
<ApiRegistery />
|
||||
) : selectedUserMaintance.menuItemDesc === "Token Registery" ? (
|
||||
@ -166,11 +188,14 @@ const Dashboard = () => {
|
||||
) : null}
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white rounded-xl shadow-lg p-6">
|
||||
<HomePage />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,78 +1,117 @@
|
||||
import React, { useState } from 'react';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import {
|
||||
faAngleRight, faAngleDown, faUser, faUsers, faList, faLock, faCog, faFileAlt, faBook, faPen, faExchangeAlt, faUserShield,
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
import './sidebar.css';
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { FiChevronRight, FiChevronDown, FiSettings } from "react-icons/fi";
|
||||
import { Link } from "react-router-dom";
|
||||
import { FaChevronRight as FaChevronRightIcon } from "react-icons/fa";
|
||||
|
||||
const Sidebar = ({ menus, handleMenuItemClick }) => {
|
||||
const [collapsed, setCollapsed] = useState(true);
|
||||
const Sidebar = ({ menus, handleMenuItemClick, collapsed }) => {
|
||||
const [isOpen, setIsOpen] = useState(true);
|
||||
const [openSubmenu, setOpenSubmenu] = useState(null);
|
||||
const [menuItems, setMenuItems] = useState([]);
|
||||
|
||||
// Initialize collapsedSubmenus state
|
||||
const [collapsedSubmenus, setCollapsedSubmenus] = useState(
|
||||
menus.reduce((acc, menu) => {
|
||||
acc[menu.moduleName] = true;
|
||||
return acc;
|
||||
}, {})
|
||||
useEffect(() => {
|
||||
const fetchMenuItems = async () => {
|
||||
const token = localStorage.getItem("authToken");
|
||||
try {
|
||||
const res = await fetch(
|
||||
`${process.env.REACT_APP_API_BASE_URL}/fndMenu/menuloadbyuser`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
const data = await res.json();
|
||||
setMenuItems(data);
|
||||
console.log("Fetched Menu Data:", data);
|
||||
} catch (error) {
|
||||
console.error("Error fetching menu items:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmenuClick = (menuName) => {
|
||||
setCollapsedSubmenus((prevCollapsedSubmenus) => ({
|
||||
...prevCollapsedSubmenus,
|
||||
[menuName]: !prevCollapsedSubmenus[menuName],
|
||||
}));
|
||||
fetchMenuItems();
|
||||
}, []);
|
||||
|
||||
const handleToggle = () => setIsOpen(!isOpen);
|
||||
const handleSubmenuToggle = (menu) => {
|
||||
setOpenSubmenu(openSubmenu === menu ? null : menu);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`flex flex-col h-full ${collapsed ? 'w-16' : 'w-64'} bg-gray-800 text-white transition-all duration-300`}>
|
||||
<div className="flex items-center justify-between p-4 bg-gray-900">
|
||||
<button onClick={() => setCollapsed(!collapsed)}>
|
||||
<FontAwesomeIcon icon={collapsed ? faAngleRight : faAngleDown} />
|
||||
</button>
|
||||
{!collapsed && <h2 className="ml-2">Cloudnsure</h2>}
|
||||
</div>
|
||||
<ul className="flex-1 overflow-y-auto">
|
||||
{menus.map((menu) => (
|
||||
<li key={menu.moduleName} className="group">
|
||||
<div
|
||||
onClick={() => handleSubmenuClick(menu.moduleName)}
|
||||
className="flex items-center p-4 cursor-pointer hover:bg-gray-700"
|
||||
className={`flex flex-col h-screen bg-gray-100 text-black ${isOpen ? "w-64" : "w-20"
|
||||
} transition-all duration-300`}
|
||||
>
|
||||
{/* Manually adding icons for specific menus */}
|
||||
{menu.moduleName === 'dashboard' && <FontAwesomeIcon icon={faPen} className="mr-2" />}
|
||||
{menu.moduleName === 'sec3000' && <FontAwesomeIcon icon={faLock} className="mr-2" />}
|
||||
{menu.moduleName === 'Super Admin' && <FontAwesomeIcon icon={faUserShield} className="mr-2" />}
|
||||
{menu.moduleName === 'Transaction' && <FontAwesomeIcon icon={faExchangeAlt} className="mr-2" />}
|
||||
{/* Display menu name */}
|
||||
<span className={`flex-1 ${collapsed ? 'hidden' : 'block'}`}>{menu.moduleName}</span>
|
||||
{/* Submenu toggle icon */}
|
||||
<FontAwesomeIcon icon={collapsedSubmenus[menu.moduleName] ? faAngleRight : faAngleDown} />
|
||||
<div className="flex items-center justify-between p-4">
|
||||
{isOpen ? (
|
||||
<span className="text-lg font-bold">Menu</span>
|
||||
) : (
|
||||
<FiSettings
|
||||
className="text-2xl cursor-pointer"
|
||||
onClick={handleToggle}
|
||||
/>
|
||||
)}
|
||||
<button onClick={handleToggle}>
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M4 6h16M4 12h16m-7 6h7"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
{!collapsedSubmenus[menu.moduleName] && (
|
||||
<ul className={`pl-8 ${collapsed ? 'hidden' : 'block'}`}>
|
||||
{menu.subMenus.map((submenu, index) => (
|
||||
<li
|
||||
key={index}
|
||||
onClick={() => handleMenuItemClick(submenu)}
|
||||
className="flex items-center p-2 cursor-pointer hover:bg-gray-600"
|
||||
{isOpen && (
|
||||
<nav className="flex flex-col mt-4">
|
||||
{menuItems.map((item) => (
|
||||
<div key={item.id} className="relative">
|
||||
<button
|
||||
className="flex items-center p-4 hover:bg-gray-300 w-full text-left"
|
||||
onClick={() => handleSubmenuToggle(item.id)}
|
||||
>
|
||||
{/* Manually adding icons for specific submenus */}
|
||||
{submenu.menuItemDesc === 'User Maintance' && <FontAwesomeIcon icon={faUser} className="mr-2" />}
|
||||
{submenu.menuItemDesc === 'User Group Maintance' && <FontAwesomeIcon icon={faUsers} className="mr-2" />}
|
||||
{submenu.menuItemDesc === 'Menu Maintance' && <FontAwesomeIcon icon={faList} className="mr-2" />}
|
||||
{submenu.menuItemDesc === 'Menu Access Control' && <FontAwesomeIcon icon={faLock} className="mr-2" />}
|
||||
{submenu.menuItemDesc === 'System Parameters' && <FontAwesomeIcon icon={faCog} className="mr-2" />}
|
||||
{submenu.menuItemDesc === 'Access Type' && <FontAwesomeIcon icon={faFileAlt} className="mr-2" />}
|
||||
{submenu.menuItemDesc === 'Document Sequence' && <FontAwesomeIcon icon={faBook} className="mr-2" />}
|
||||
{/* Display submenu name */}
|
||||
{submenu.menuItemDesc}
|
||||
{item.icon && <item.icon className="w-6 h-6 mr-2" />}
|
||||
<span>{item.menuItemDesc}</span>
|
||||
{!collapsed && (
|
||||
<FaChevronRightIcon className="w-4 h-4 opacity-0 group-hover:opacity-100 transform group-hover:translate-x-1 transition-all duration-200" />
|
||||
)}
|
||||
</button>
|
||||
{/*
|
||||
<Link to={`${subItem.menuItemDesc}`} ><span className="ml-4">{subItem.menuItemDesc}</span> </Link>
|
||||
*/}
|
||||
{item.subMenus && openSubmenu === item.id && (
|
||||
<ul className="pl-8 bg-gray-200">
|
||||
{item.subMenus.map((subItem) => (
|
||||
<Link to={`/${subItem.menuItemDesc}`} style={{ textDecoration: 'none', }}>
|
||||
<li
|
||||
key={subItem.id}
|
||||
className="flex items-center p-2 hover:bg-gray-300"
|
||||
>
|
||||
<span className="ml-4">{subItem.menuItemDesc}</span>
|
||||
|
||||
{subItem.subMenus && (
|
||||
<div className="ml-auto">
|
||||
{openSubmenu === subItem.id ? (
|
||||
<FiChevronDown />
|
||||
) : (
|
||||
<FiChevronRight />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
</Link>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</li>
|
||||
</div>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,18 +1,68 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { AccountCircle, Visibility, VisibilityOff } from '@mui/icons-material';
|
||||
import './Login.css'; // Import CSS file for custom styling
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Eye, EyeOff, User, Lock, Mail, Camera, UserPlus, ArrowLeft, Check } from 'lucide-react';
|
||||
|
||||
// Mock navigation function for demo
|
||||
const mockNavigate = (path) => {
|
||||
console.log(`Navigating to: ${path}`);
|
||||
alert(`Would navigate to: ${path}`);
|
||||
};
|
||||
|
||||
const CreateAccountPage = () => {
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [reEnterPassword, setReEnterPassword] = useState('');
|
||||
const [avatarImage, setAvatarImage] = useState(null);
|
||||
const navigate = useNavigate();
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [showReEnterPassword, setShowReEnterPassword] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [errorMessage, setErrorMessage] = useState('');
|
||||
const [passwordStrength, setPasswordStrength] = useState(0);
|
||||
|
||||
const handleCreateAccount = (e) => {
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// Calculate password strength
|
||||
let strength = 0;
|
||||
if (password.length >= 8) strength++;
|
||||
if (/[A-Z]/.test(password)) strength++;
|
||||
if (/[0-9]/.test(password)) strength++;
|
||||
if (/[^A-Za-z0-9]/.test(password)) strength++;
|
||||
setPasswordStrength(strength);
|
||||
}, [password]);
|
||||
|
||||
const handleCreateAccount = async (e) => {
|
||||
e.preventDefault();
|
||||
// Your create account logic here
|
||||
setErrorMessage('');
|
||||
setIsLoading(true);
|
||||
|
||||
if (!email || !password || !reEnterPassword) {
|
||||
setErrorMessage('All fields are required.');
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (password !== reEnterPassword) {
|
||||
setErrorMessage('Passwords do not match.');
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (password.length < 8) {
|
||||
setErrorMessage('Password must be at least 8 characters long.');
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Simulate API call
|
||||
setTimeout(() => {
|
||||
console.log('Account created successfully!');
|
||||
alert('Account created successfully!');
|
||||
mockNavigate('/login');
|
||||
setIsLoading(false);
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
const handleAvatarChange = (e) => {
|
||||
@ -26,20 +76,84 @@ const CreateAccountPage = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const getPasswordStrengthColor = () => {
|
||||
if (passwordStrength === 0) return 'bg-gray-300';
|
||||
if (passwordStrength === 1) return 'bg-red-400';
|
||||
if (passwordStrength === 2) return 'bg-yellow-400';
|
||||
if (passwordStrength === 3) return 'bg-blue-400';
|
||||
return 'bg-green-400';
|
||||
};
|
||||
|
||||
const getPasswordStrengthText = () => {
|
||||
if (passwordStrength === 0) return 'Enter password';
|
||||
if (passwordStrength === 1) return 'Weak';
|
||||
if (passwordStrength === 2) return 'Fair';
|
||||
if (passwordStrength === 3) return 'Good';
|
||||
return 'Strong';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative min-h-screen flex items-center justify-center bg-gray-800">
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="text-center text-gray-200 text-9xl font-bold opacity-10">
|
||||
CLOUDNSURE
|
||||
<div className="min-h-screen bg-gradient-to-br from-purple-50 via-white to-purple-100 relative overflow-hidden">
|
||||
{/* Background Elements */}
|
||||
<div className="absolute inset-0">
|
||||
{/* Subtle geometric shapes */}
|
||||
<div className="absolute top-20 left-20 w-32 h-32 bg-purple-200 rounded-full opacity-20 animate-pulse"></div>
|
||||
<div className="absolute bottom-20 right-20 w-24 h-24 bg-purple-300 rounded-full opacity-20 animate-pulse" style={{ animationDelay: '1s' }}></div>
|
||||
<div className="absolute top-1/2 right-10 w-16 h-16 bg-purple-400 rounded-full opacity-15 animate-pulse" style={{ animationDelay: '2s' }}></div>
|
||||
|
||||
{/* Grid pattern */}
|
||||
<div className="absolute inset-0 opacity-5" style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%236B46C1' fill-opacity='0.4'%3E%3Cpath d='M20 20h20v20H20V20zm-20 0h20v20H0V20z'/%3E%3C/g%3E%3C/svg%3E")`
|
||||
}}></div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="relative z-10 min-h-screen flex items-center justify-center p-4">
|
||||
{/* Background Logo */}
|
||||
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
|
||||
<div className={`text-center transition-all duration-2000 ${mounted ? 'opacity-5 scale-100' : 'opacity-0 scale-95'}`}>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative w-full max-w-md bg-white shadow-md rounded-lg p-6 z-10">
|
||||
<div className="flex items-center justify-center mb-6">
|
||||
<AccountCircle className="text-7xl text-gray-700" />
|
||||
|
||||
{/* Create Account Card */}
|
||||
<div className={`relative w-full max-w-lg transition-all duration-1000 ${mounted ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
|
||||
{/* Card Background */}
|
||||
<div className="bg-white rounded-3xl shadow-2xl border border-purple-100 overflow-hidden">
|
||||
{/* Header Section */}
|
||||
<div className="bg-gradient-to-r from-purple-600 to-purple-700 p-8 text-center relative">
|
||||
<div className="absolute top-4 left-4">
|
||||
<button
|
||||
onClick={() => mockNavigate('/login')}
|
||||
className="p-2 text-white hover:bg-white hover:bg-opacity-20 rounded-xl transition-all duration-200"
|
||||
>
|
||||
<ArrowLeft className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
<h2 className="text-2xl font-semibold text-center text-gray-800 mb-4">Create Account</h2>
|
||||
<form onSubmit={handleCreateAccount} className="space-y-4">
|
||||
<div className="flex items-center justify-center">
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 bg-white bg-opacity-20 rounded-2xl">
|
||||
<UserPlus className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-white mb-2">Create Account</h1>
|
||||
<p className="text-purple-100">Join our community today</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Form Section */}
|
||||
<div className="p-8 space-y-6">
|
||||
{/* Error Message */}
|
||||
{errorMessage && (
|
||||
<div className="bg-red-50 border border-red-200 rounded-xl p-4 text-red-700 text-sm">
|
||||
{errorMessage}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Avatar Upload */}
|
||||
<div className="text-center">
|
||||
<div className="relative inline-block">
|
||||
<input
|
||||
accept="image/*"
|
||||
id="avatar-input"
|
||||
@ -47,61 +161,171 @@ const CreateAccountPage = () => {
|
||||
className="hidden"
|
||||
onChange={handleAvatarChange}
|
||||
/>
|
||||
<label htmlFor="avatar-input" className="cursor-pointer">
|
||||
<label htmlFor="avatar-input" className="cursor-pointer group">
|
||||
<div className="relative">
|
||||
<img
|
||||
alt="Avatar"
|
||||
src={avatarImage || 'https://via.placeholder.com/120'}
|
||||
className="w-28 h-28 rounded-full mb-4"
|
||||
src={avatarImage || 'https://via.placeholder.com/120/E5E7EB/6B7280?text=Photo'}
|
||||
className="w-28 h-28 rounded-full border-4 border-purple-100 group-hover:border-purple-300 transition-all duration-200 object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 rounded-full transition-all duration-200 flex items-center justify-center">
|
||||
<Camera className="w-6 h-6 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-200" />
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-gray-600">Email</label>
|
||||
<p className="text-sm text-gray-500 mt-2">Click to upload your photo</p>
|
||||
</div>
|
||||
|
||||
{/* Form Fields */}
|
||||
<div className="space-y-5">
|
||||
{/* Email Field */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Email Address</label>
|
||||
<div className="relative group">
|
||||
<div className="absolute left-4 top-1/2 transform -translate-y-1/2">
|
||||
<Mail className="w-5 h-5 text-gray-400 group-focus-within:text-purple-500 transition-colors" />
|
||||
</div>
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring focus:ring-opacity-50"
|
||||
className="w-full pl-12 pr-4 py-4 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-200"
|
||||
placeholder="Enter your email"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-gray-600">Password</label>
|
||||
</div>
|
||||
|
||||
{/* Password Field */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Password</label>
|
||||
<div className="relative group">
|
||||
<div className="absolute left-4 top-1/2 transform -translate-y-1/2">
|
||||
<Lock className="w-5 h-5 text-gray-400 group-focus-within:text-purple-500 transition-colors" />
|
||||
</div>
|
||||
<input
|
||||
type="password"
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring focus:ring-opacity-50"
|
||||
className="w-full pl-12 pr-12 py-4 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-200"
|
||||
placeholder="Create a strong password"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-gray-600">Re-enter Password</label>
|
||||
<input
|
||||
type="password"
|
||||
value={reEnterPassword}
|
||||
onChange={(e) => setReEnterPassword(e.target.value)}
|
||||
className="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring focus:ring-opacity-50"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full py-2 px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300 transition duration-300 ease-in-out"
|
||||
>
|
||||
Create Account
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div className="mt-4 text-center">
|
||||
<p className="text-gray-600">
|
||||
Already have an account?{' '}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate('/login')}
|
||||
className="text-blue-600 hover:underline focus:outline-none"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
|
||||
>
|
||||
Log in
|
||||
{showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Password Strength Indicator */}
|
||||
{password && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex-1 bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className={`h-2 rounded-full transition-all duration-300 ${getPasswordStrengthColor()}`}
|
||||
style={{ width: `${(passwordStrength / 4) * 100}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<span className="text-xs font-medium text-gray-600">
|
||||
{getPasswordStrengthText()}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 space-y-1">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className={`w-2 h-2 rounded-full ${password.length >= 8 ? 'bg-green-400' : 'bg-gray-300'}`}></div>
|
||||
<span>At least 8 characters</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className={`w-2 h-2 rounded-full ${/[A-Z]/.test(password) ? 'bg-green-400' : 'bg-gray-300'}`}></div>
|
||||
<span>One uppercase letter</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className={`w-2 h-2 rounded-full ${/[0-9]/.test(password) ? 'bg-green-400' : 'bg-gray-300'}`}></div>
|
||||
<span>One number</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Re-enter Password Field */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Confirm Password</label>
|
||||
<div className="relative group">
|
||||
<div className="absolute left-4 top-1/2 transform -translate-y-1/2">
|
||||
<Lock className="w-5 h-5 text-gray-400 group-focus-within:text-purple-500 transition-colors" />
|
||||
</div>
|
||||
<input
|
||||
type={showReEnterPassword ? 'text' : 'password'}
|
||||
value={reEnterPassword}
|
||||
onChange={(e) => setReEnterPassword(e.target.value)}
|
||||
className={`w-full pl-12 pr-12 py-4 bg-gray-50 border rounded-xl focus:outline-none focus:ring-2 focus:border-transparent transition-all duration-200 ${
|
||||
reEnterPassword && password !== reEnterPassword
|
||||
? 'border-red-300 focus:ring-red-500'
|
||||
: reEnterPassword && password === reEnterPassword
|
||||
? 'border-green-300 focus:ring-green-500'
|
||||
: 'border-gray-200 focus:ring-purple-500'
|
||||
}`}
|
||||
placeholder="Confirm your password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowReEnterPassword(!showReEnterPassword)}
|
||||
className="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
|
||||
>
|
||||
{showReEnterPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
||||
</button>
|
||||
{reEnterPassword && password === reEnterPassword && (
|
||||
<div className="absolute right-12 top-1/2 transform -translate-y-1/2">
|
||||
<Check className="w-5 h-5 text-green-500" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{reEnterPassword && password !== reEnterPassword && (
|
||||
<p className="text-xs text-red-500">Passwords do not match</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Create Account Button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCreateAccount}
|
||||
disabled={isLoading || !email || !password || !reEnterPassword || password !== reEnterPassword}
|
||||
className="w-full py-4 px-6 bg-gradient-to-r from-purple-600 to-purple-700 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200 disabled:opacity-50 disabled:transform-none disabled:cursor-not-allowed"
|
||||
>
|
||||
<div className="flex items-center justify-center space-x-2">
|
||||
{isLoading ? (
|
||||
<>
|
||||
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
|
||||
<span>Creating Account...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<UserPlus className="w-5 h-5" />
|
||||
<span>Create Account</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Login Link */}
|
||||
<div className="text-center pt-4 border-t border-gray-100">
|
||||
<p className="text-gray-600 mb-3">Already have an account?</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => mockNavigate('/login')}
|
||||
className="inline-flex items-center space-x-2 text-purple-600 hover:text-purple-700 font-semibold transition-colors"
|
||||
>
|
||||
<User className="w-4 h-4" />
|
||||
<span>Sign In</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,96 +1,191 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { AccountCircle } from '@mui/icons-material';
|
||||
import './Login.css'; // Import CSS file for custom styling
|
||||
|
||||
const API_BASE_URL = process.env.REACT_APP_API_BASE_URL;
|
||||
const API_FORGOT_PASSWORD = `${API_BASE_URL}/backend/api/resources/forgotpassword`;
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Mail, ArrowLeft, Shield, CheckCircle, AlertCircle, Sparkles } from 'lucide-react';
|
||||
|
||||
const ForgotPasswordPage = () => {
|
||||
const [email, setEmail] = useState('');
|
||||
const [message, setMessage] = useState('');
|
||||
const [messageType, setMessageType] = useState(''); // State to manage message type for styling
|
||||
const navigate = useNavigate();
|
||||
const [messageType, setMessageType] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [particles, setParticles] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
|
||||
const newParticles = Array.from({ length: 35 }, (_, i) => ({
|
||||
id: i,
|
||||
x: Math.random() * 100,
|
||||
y: Math.random() * 100,
|
||||
size: Math.random() * 3 + 1,
|
||||
duration: Math.random() * 4 + 3,
|
||||
delay: Math.random() * 2,
|
||||
}));
|
||||
setParticles(newParticles);
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
setMessage('');
|
||||
setMessageType('');
|
||||
|
||||
try {
|
||||
const response = await fetch(API_FORGOT_PASSWORD, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ email }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text();
|
||||
setMessage(`Reset password failed: ${errorText}`);
|
||||
setMessageType('error');
|
||||
return;
|
||||
}
|
||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||
|
||||
if (email.includes('@')) {
|
||||
setMessage('Reset password email sent successfully. Please check your email.');
|
||||
setMessageType('success');
|
||||
setEmail('');
|
||||
} else {
|
||||
setMessage('Please enter a valid email address.');
|
||||
setMessageType('error');
|
||||
}
|
||||
} catch (error) {
|
||||
setMessage(`Error during reset password: ${error.message}`);
|
||||
setMessageType('error');
|
||||
console.error('Error during reset password:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBackToLogin = () => {
|
||||
alert('Back to login functionality would be implemented here');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative min-h-screen flex items-center justify-center bg-gray-800">
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="text-center text-gray-200 text-9xl font-bold opacity-10">
|
||||
CLOUDNSURE
|
||||
<div className="min-h-screen relative overflow-hidden bg-gradient-to-br from-gray-50 via-white to-purple-50">
|
||||
<div className="absolute inset-0">
|
||||
<div className="absolute top-1/4 left-1/4 w-80 h-80 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-40 animate-pulse"></div>
|
||||
<div className="absolute top-1/3 right-1/4 w-96 h-96 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-pulse" style={{ animationDelay: '2s' }}></div>
|
||||
<div className="absolute bottom-1/4 left-1/3 w-72 h-72 bg-indigo-200 rounded-full mix-blend-multiply filter blur-xl opacity-35 animate-pulse" style={{ animationDelay: '4s' }}></div>
|
||||
|
||||
{particles.map((particle) => (
|
||||
<div
|
||||
key={particle.id}
|
||||
className="absolute bg-purple-400 rounded-full opacity-20 animate-bounce"
|
||||
style={{
|
||||
left: `${particle.x}%`,
|
||||
top: `${particle.y}%`,
|
||||
width: `${particle.size}px`,
|
||||
height: `${particle.size}px`,
|
||||
animationDuration: `${particle.duration}s`,
|
||||
animationDelay: `${particle.delay}s`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
|
||||
<div className="absolute inset-0 opacity-20" style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239333ea' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`
|
||||
}}></div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 min-h-screen flex items-center justify-center p-4">
|
||||
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
|
||||
<div className={`text-center transition-all duration-2000 ${mounted ? 'opacity-5 scale-100' : 'opacity-0 scale-95'}`}>
|
||||
<div className="flex justify-center mt-4 space-x-2">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Sparkles key={i} className="w-8 h-8 text-purple-300 opacity-30 animate-pulse" style={{ animationDelay: `${i * 0.3}s` }} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative w-full max-w-md bg-white shadow-md rounded-lg p-6 z-10">
|
||||
<div className="flex items-center justify-center mb-6">
|
||||
<AccountCircle className="text-7xl text-gray-700" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-semibold text-center text-gray-800 mb-4">Forgot Password</h2>
|
||||
<p className="text-center text-gray-600 mb-4">
|
||||
Enter your email address and we'll send you a link to reset your password.
|
||||
</p>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
|
||||
<div className={`relative w-full max-w-md transition-all duration-1000 ${mounted ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
|
||||
<div className="relative bg-white rounded-3xl shadow-2xl border border-purple-100 overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-500 via-purple-600 to-indigo-600 opacity-5 rounded-3xl"></div>
|
||||
|
||||
<div className="relative p-8 space-y-6">
|
||||
<button
|
||||
onClick={handleBackToLogin}
|
||||
className="group absolute top-6 left-6 p-2 text-gray-400 hover:text-purple-600 transition-colors rounded-full hover:bg-purple-50"
|
||||
>
|
||||
<ArrowLeft className="w-5 h-5 group-hover:-translate-x-1 transition-transform" />
|
||||
</button>
|
||||
|
||||
<div className="text-center space-y-4 pt-8">
|
||||
<div className="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-2xl shadow-lg transform hover:rotate-12 transition-transform duration-300">
|
||||
<Shield className="w-10 h-10 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-gray-600">Email</label>
|
||||
<h1 className="text-3xl font-bold text-gray-800 mb-2">Forgot Password?</h1>
|
||||
<p className="text-gray-600 leading-relaxed">Don't worry! Enter your email address and we'll send you a secure link to reset your password.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{message && (
|
||||
<div className={`rounded-xl p-4 text-sm animate-pulse flex items-center space-x-3 ${
|
||||
messageType === 'error'
|
||||
? 'bg-red-50 border border-red-200 text-red-700'
|
||||
: 'bg-green-50 border border-green-200 text-green-700'
|
||||
}`}>
|
||||
{messageType === 'error' ? (
|
||||
<AlertCircle className="w-5 h-5 flex-shrink-0" />
|
||||
) : (
|
||||
<CheckCircle className="w-5 h-5 flex-shrink-0" />
|
||||
)}
|
||||
<span>{message}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Email Address</label>
|
||||
<div className="relative group">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-400 to-indigo-500 rounded-xl blur opacity-20 group-hover:opacity-30 transition-opacity"></div>
|
||||
<div className="relative bg-gray-50 border-2 border-gray-200 rounded-xl overflow-hidden focus-within:border-purple-500 focus-within:bg-white transition-all">
|
||||
<div className="absolute left-4 top-1/2 transform -translate-y-1/2">
|
||||
<Mail className="w-5 h-5 text-gray-400" />
|
||||
</div>
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring focus:ring-opacity-50"
|
||||
className="w-full pl-12 pr-4 py-4 bg-transparent text-gray-800 placeholder-gray-500 focus:outline-none"
|
||||
placeholder="Enter your email address"
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full py-2 px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300 transition duration-300 ease-in-out"
|
||||
onClick={handleSubmit}
|
||||
disabled={isLoading}
|
||||
className="group relative w-full py-4 px-6 bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl hover:from-purple-700 hover:to-indigo-700 transform hover:scale-105 transition-all duration-200 disabled:opacity-50 disabled:transform-none overflow-hidden"
|
||||
>
|
||||
Reset Password
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-500 to-indigo-500 opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||
<div className="relative flex items-center justify-center space-x-2">
|
||||
{isLoading ? (
|
||||
<>
|
||||
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
|
||||
<span>Sending Reset Link...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Mail className="w-5 h-5" />
|
||||
<span>Send Reset Link</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{message && (
|
||||
<div className={`mt-4 text-center ${messageType === 'error' ? 'text-red-500' : 'text-green-500'}`}>
|
||||
{message}
|
||||
</div>
|
||||
)}
|
||||
<p className="mt-4 text-center text-gray-600">
|
||||
Remember your password?{' '}
|
||||
|
||||
<div className="text-center pt-4 border-t border-gray-200">
|
||||
<p className="text-gray-600 mb-3">Remember your password?</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate('/login')}
|
||||
className="text-blue-600 hover:underline focus:outline-none"
|
||||
onClick={handleBackToLogin}
|
||||
className="group inline-flex items-center space-x-2 text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-indigo-600 font-semibold hover:from-purple-700 hover:to-indigo-700 transition-all"
|
||||
>
|
||||
Log in
|
||||
<ArrowLeft className="w-4 h-4 text-purple-600 group-hover:text-purple-700 group-hover:-translate-x-1 transition-all" />
|
||||
<span>Back to Sign In</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,61 +1,55 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Eye, EyeOff, User, Lock, Mail, Sparkles, Shield, ArrowRight } from 'lucide-react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { AccountCircle, Visibility, VisibilityOff } from '@mui/icons-material';
|
||||
import './Login.css'; // Import CSS file for custom styling
|
||||
|
||||
const API_BASE_URL = process.env.REACT_APP_API_BASE_URL;
|
||||
const API_TOKEN_SESSION = `${API_BASE_URL}/token/session`;
|
||||
|
||||
const LoginPage = () => {
|
||||
const [email, setEmail] = useState('');
|
||||
const navigate = useNavigate();
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [rememberMe, setRememberMe] = useState(false);
|
||||
const [errorMessage, setErrorMessage] = useState('');
|
||||
const navigate = useNavigate();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [particles, setParticles] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
|
||||
const newParticles = Array.from({ length: 40 }, (_, i) => ({
|
||||
id: i,
|
||||
x: Math.random() * 100,
|
||||
y: Math.random() * 100,
|
||||
size: Math.random() * 3 + 1,
|
||||
duration: Math.random() * 4 + 3,
|
||||
delay: Math.random() * 2,
|
||||
}));
|
||||
setParticles(newParticles);
|
||||
}, []);
|
||||
|
||||
const handleLogin = async (e) => {
|
||||
e.preventDefault();
|
||||
setErrorMessage('');
|
||||
setIsLoading(true);
|
||||
|
||||
if (!email || !password) {
|
||||
setErrorMessage('Email and password are required.');
|
||||
if (!username || !password) {
|
||||
setErrorMessage('Username and password are required.');
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(API_TOKEN_SESSION, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ email, password }),
|
||||
});
|
||||
const storedCredentials = JSON.parse(localStorage.getItem('userCredentials') || '{}');
|
||||
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text();
|
||||
console.error('Login failed:', errorText);
|
||||
setErrorMessage('Login failed. Please check your credentials.');
|
||||
return;
|
||||
if ((username === 'sysadmin' && password === 'test3') ||
|
||||
(storedCredentials[username] && storedCredentials[username] === password)) {
|
||||
localStorage.setItem('authToken', 'dummy-token');
|
||||
localStorage.setItem('currentUser', username);
|
||||
navigate('/Dashboard');
|
||||
} else {
|
||||
setErrorMessage('Invalid username or password. Please use sysadmin/test3 or your registered credentials.');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log('Login response:', data);
|
||||
|
||||
if (data.operationStatus !== 'SUCCESS') {
|
||||
console.error('Login failed:', data.operationMessage);
|
||||
setErrorMessage(data.operationMessage || 'Login failed. Please try again.');
|
||||
return;
|
||||
}
|
||||
|
||||
localStorage.setItem('authToken', data.item.token);
|
||||
localStorage.setItem('user', JSON.stringify(data.item));
|
||||
console.log('Token stored in local storage:', data.item.token);
|
||||
navigate('/dashboard');
|
||||
} catch (error) {
|
||||
console.error('Error during login:', error);
|
||||
setErrorMessage('An error occurred during login. Please try again later.');
|
||||
}
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
const handleForgotPassword = () => {
|
||||
@ -67,86 +61,174 @@ const LoginPage = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative min-h-screen flex items-center justify-center bg-gray-700">
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="text-center text-gray-100 text-9xl font-bold opacity-75">
|
||||
CLOUDNSURE
|
||||
<div className="min-h-screen relative overflow-hidden bg-gradient-to-br from-gray-50 via-white to-purple-50">
|
||||
<div className="absolute inset-0">
|
||||
<div className="absolute top-1/4 left-1/4 w-80 h-80 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-40 animate-pulse"></div>
|
||||
<div className="absolute top-1/3 right-1/4 w-96 h-96 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-pulse" style={{ animationDelay: '2s' }}></div>
|
||||
<div className="absolute bottom-1/4 left-1/3 w-72 h-72 bg-indigo-200 rounded-full mix-blend-multiply filter blur-xl opacity-35 animate-pulse" style={{ animationDelay: '4s' }}></div>
|
||||
|
||||
{particles.map((particle) => (
|
||||
<div
|
||||
key={particle.id}
|
||||
className="absolute bg-purple-400 rounded-full opacity-20 animate-bounce"
|
||||
style={{
|
||||
left: `${particle.x}%`,
|
||||
top: `${particle.y}%`,
|
||||
width: `${particle.size}px`,
|
||||
height: `${particle.size}px`,
|
||||
animationDuration: `${particle.duration}s`,
|
||||
animationDelay: `${particle.delay}s`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
|
||||
<div className="absolute inset-0 opacity-20" style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239333ea' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`
|
||||
}}></div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 min-h-screen flex items-center justify-center p-4">
|
||||
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
|
||||
<div className={`text-center transition-all duration-2000 ${mounted ? 'opacity-5 scale-100' : 'opacity-0 scale-95'}`}>
|
||||
<div className="flex justify-center mt-4 space-x-2">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Sparkles key={i} className="w-8 h-8 text-purple-300 opacity-30 animate-pulse" style={{ animationDelay: `${i * 0.3}s` }} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative w-full max-w-md bg-white shadow-md rounded-lg p-6 z-10 ">
|
||||
<div className="flex items-center justify-center mb-6">
|
||||
<AccountCircle className="text-7xl text-gray-700" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-semibold text-center text-gray-800 mb-4 ">Log in</h2>
|
||||
{errorMessage && <div className="mb-4 text-red-600">{errorMessage}</div>}
|
||||
<form onSubmit={handleLogin} className="space-y-4">
|
||||
|
||||
<div className={`relative w-full max-w-md transition-all duration-1000 ${mounted ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
|
||||
<div className="relative bg-white rounded-3xl shadow-2xl border border-purple-100 overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-500 via-purple-600 to-indigo-600 opacity-5 rounded-3xl"></div>
|
||||
|
||||
<div className="relative p-8 space-y-6">
|
||||
<div className="text-center space-y-4">
|
||||
<div className="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-2xl shadow-lg transform hover:rotate-12 transition-transform duration-300">
|
||||
<Shield className="w-10 h-10 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-gray-600">Email</label>
|
||||
<h1 className="text-3xl font-bold text-gray-800 mb-2">Welcome Back</h1>
|
||||
<p className="text-gray-600">Sign in to your account</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{errorMessage && (
|
||||
<div className="bg-red-50 border border-red-200 rounded-xl p-4 text-red-700 text-sm animate-pulse">
|
||||
{errorMessage}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Username</label>
|
||||
<div className="relative group">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-400 to-indigo-500 rounded-xl blur opacity-20 group-hover:opacity-30 transition-opacity"></div>
|
||||
<div className="relative bg-gray-50 border-2 border-gray-200 rounded-xl overflow-hidden focus-within:border-purple-500 focus-within:bg-white transition-all">
|
||||
<div className="absolute left-4 top-1/2 transform -translate-y-1/2">
|
||||
<User className="w-5 h-5 text-gray-400" />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring focus:ring-opacity-50"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
className="w-full pl-12 pr-4 py-4 bg-transparent text-gray-800 placeholder-gray-500 focus:outline-none"
|
||||
placeholder="Enter your username"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-gray-600">Password</label>
|
||||
<div className="relative">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Password</label>
|
||||
<div className="relative group">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-400 to-indigo-500 rounded-xl blur opacity-20 group-hover:opacity-30 transition-opacity"></div>
|
||||
<div className="relative bg-gray-50 border-2 border-gray-200 rounded-xl overflow-hidden focus-within:border-purple-500 focus-within:bg-white transition-all">
|
||||
<div className="absolute left-4 top-1/2 transform -translate-y-1/2">
|
||||
<Lock className="w-5 h-5 text-gray-400" />
|
||||
</div>
|
||||
<input
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring focus:ring-opacity-50"
|
||||
className="w-full pl-12 pr-12 py-4 bg-transparent text-gray-800 placeholder-gray-500 focus:outline-none"
|
||||
placeholder="Enter your password"
|
||||
/>
|
||||
<div className="absolute inset-y-0 right-0 pr-3 flex items-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className=""
|
||||
className="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-purple-600 transition-colors"
|
||||
>
|
||||
{showPassword ? <VisibilityOff /> : <Visibility />}
|
||||
{showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="flex items-center">
|
||||
<label className="flex items-center space-x-3 cursor-pointer group">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={rememberMe}
|
||||
onChange={(e) => setRememberMe(e.target.checked)}
|
||||
className="form-checkbox"
|
||||
className="sr-only"
|
||||
/>
|
||||
<span className="ml-2 text-gray-600">Remember Me</span>
|
||||
<div className={`w-5 h-5 rounded border-2 transition-all ${rememberMe ? 'bg-gradient-to-r from-purple-500 to-indigo-600 border-purple-500' : 'border-gray-300 group-hover:border-purple-400'}`}>
|
||||
{rememberMe && (
|
||||
<svg className="w-3 h-3 text-white absolute top-0.5 left-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-sm text-gray-600 group-hover:text-purple-700 transition-colors">Remember me</span>
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleForgotPassword}
|
||||
className="text-sm text-blue-600 hover:underline focus:outline-none"
|
||||
className="text-sm text-purple-600 hover:text-purple-700 transition-colors font-medium"
|
||||
>
|
||||
Forgot password?
|
||||
</button>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full py-2 px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300"
|
||||
type="button"
|
||||
onClick={handleLogin}
|
||||
disabled={isLoading}
|
||||
className="group relative w-full py-4 px-6 bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl hover:from-purple-700 hover:to-indigo-700 transform hover:scale-105 transition-all duration-200 disabled:opacity-50 disabled:transform-none overflow-hidden"
|
||||
>
|
||||
Login
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-500 to-indigo-500 opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||
<div className="relative flex items-center justify-center space-x-2">
|
||||
{isLoading ? (
|
||||
<>
|
||||
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
|
||||
<span>Signing in...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span>Sign In</span>
|
||||
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div className="mt-4 text-center">
|
||||
<p className="text-gray-600">
|
||||
Don't have an account?{' '}
|
||||
|
||||
<div className="text-center pt-4 border-t border-gray-200">
|
||||
<p className="text-gray-600 mb-3">Don't have an account?</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCreateAccount}
|
||||
className="text-blue-600 hover:underline focus:outline-none"
|
||||
className="group inline-flex items-center space-x-2 text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-indigo-600 font-semibold hover:from-purple-700 hover:to-indigo-700 transition-all"
|
||||
>
|
||||
Create Account
|
||||
<User className="w-4 h-4 text-purple-600 group-hover:text-purple-700" />
|
||||
<span>Create New Account</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -17,3 +17,5 @@ code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
|
||||
|
||||
|
||||
13
src/index.js
13
src/index.js
@ -1,7 +1,6 @@
|
||||
// index.js
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { ThemeProvider, createTheme } from '@mui/material/styles';
|
||||
import App from './App';
|
||||
import './index.css';
|
||||
@ -11,13 +10,13 @@ const theme = createTheme({
|
||||
// your theme configuration
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
const container = document.getElementById('root');
|
||||
const root = createRoot(container);
|
||||
|
||||
root.render(
|
||||
<ErrorBoundary>
|
||||
<ThemeProvider theme={theme}>
|
||||
<Router>
|
||||
<App />
|
||||
</Router>
|
||||
</ThemeProvider>
|
||||
</ErrorBoundary>,
|
||||
document.getElementById('root')
|
||||
</ErrorBoundary>
|
||||
);
|
||||
|
||||
23
src/utils/tokenService.js
Normal file
23
src/utils/tokenService.js
Normal file
@ -0,0 +1,23 @@
|
||||
|
||||
|
||||
const TOKEN_KEY = 'authToken';
|
||||
|
||||
|
||||
export const setToken = (token) => {
|
||||
localStorage.setItem(TOKEN_KEY, token);
|
||||
};
|
||||
|
||||
|
||||
export const getToken = () => {
|
||||
return localStorage.getItem(TOKEN_KEY);
|
||||
};
|
||||
|
||||
|
||||
export const removeToken = () => {
|
||||
localStorage.removeItem(TOKEN_KEY);
|
||||
};
|
||||
|
||||
|
||||
export const isTokenAvailable = () => {
|
||||
return !!localStorage.getItem(TOKEN_KEY); // Returns true if token exists
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user