diff --git a/package-lock.json b/package-lock.json index 72f9345..bef48f8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2907,6 +2907,14 @@ "resolved": "https://binrepo.target.com/artifactory/api/npm/npms/axe-core/-/axe-core-4.2.3.tgz", "integrity": "sha1-Kjr8My8AMbQvYC9KPeA8IRypj3I=" }, + "axios": { + "version": "0.21.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz", + "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==", + "requires": { + "follow-redirects": "^1.10.0" + } + }, "axobject-query": { "version": "2.2.0", "resolved": "https://binrepo.target.com/artifactory/api/npm/npms/axobject-query/-/axobject-query-2.2.0.tgz", diff --git a/package.json b/package.json index 741d668..456389e 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", + "axios": "^0.21.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-router-dom": "^5.2.0", diff --git a/public/index.html b/public/index.html index aa069f2..a260a5a 100644 --- a/public/index.html +++ b/public/index.html @@ -24,7 +24,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - React App + Support Hub diff --git a/src/App.js b/src/App.js index 8602cca..5437ac4 100644 --- a/src/App.js +++ b/src/App.js @@ -1,16 +1,12 @@ -import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; +import { BrowserRouter } from "react-router-dom"; import "./App.css"; -import SignUp from "../src/components/login/SignUp"; -import SignIn from "../src/components/login/SignIn" -function App() { - return( - - - - - - - ); +import Layout from "../src/components/layout/Layout"; -} +export const App = () => { + return ( + + + + ); +}; export default App; diff --git a/src/components/layout/TableLayout.jsx b/src/components/layout/TableLayout.jsx new file mode 100644 index 0000000..ec65ca2 --- /dev/null +++ b/src/components/layout/TableLayout.jsx @@ -0,0 +1,86 @@ +import React from "react"; +import { withStyles, makeStyles } from "@material-ui/core/styles"; +import Table from "@material-ui/core/Table"; +import TableBody from "@material-ui/core/TableBody"; +import TableCell from "@material-ui/core/TableCell"; +import TableHead from "@material-ui/core/TableHead"; +import TableRow from "@material-ui/core/TableRow"; + + +const StyledTableCell = withStyles((theme) => ({ + head: { + backgroundColor: theme.palette.primary.dark, + color: theme.palette.common.white, + }, + body: { + fontSize: 14, + }, +}))(TableCell); + +const StyledTableRow = withStyles((theme) => ({ + root: { + "&:nth-of-type(odd)": { + backgroundColor: theme.palette.action.hover, + }, + }, +}))(TableRow); + +function createData(Number, Name, State,AssignedTo,ShortDescription, DateCreated) { + return { Number, Name, State,AssignedTo, ShortDescription, DateCreated }; +} + +const rows = [ + createData("REQ0456", "JACK", "ACTIVE"," ", "TAP NOT WORKING", "6/5/2021"), + createData("REQ0678", "MICHEAL", "ACTIVE","Shane", "TAP NOT WORKING", "6/5/2021"), + createData("REQ0987", "DEPP", "COMPLETED","Richard", "FAN NOT WORKING", "6/5/2021"), +]; + +const useStyles = makeStyles({ + table: { + width: "900px", + marginTop: "75px", + marginLeft: "270px", + }, +}); + +export const TableLayout = () => { + const classes = useStyles(); + + return ( + // + + + + + Number + + Name + State + Short Description + Assigned to + Date Created + + + + {rows.map((row) => ( + + {/* + {row.name} + */} + {{row.Number}} + {row.Name} + {row.State} + + {row.ShortDescription} + + {row.AssignedTo} + {row.DateCreated} + + ))} + +
+ // + ); +}; + +export default TableLayout; diff --git a/src/components/layout/layout.jsx b/src/components/layout/layout.jsx new file mode 100644 index 0000000..83fa573 --- /dev/null +++ b/src/components/layout/layout.jsx @@ -0,0 +1,291 @@ +import React from "react"; +import clsx from "clsx"; +import { makeStyles, useTheme } from "@material-ui/core/styles"; +import { CssBaseline, AppBar } from "@material-ui/core"; +import Toolbar from "@material-ui/core/Toolbar"; +import IconButton from "@material-ui/core/IconButton"; +import HomeIcon from "@material-ui/icons/Home"; +import MenuIcon from "@material-ui/icons/Menu"; +import Typography from "@material-ui/core/Typography"; +import ChevronLeftIcon from "@material-ui/icons/ChevronLeft"; +import ChevronRightIcon from "@material-ui/icons/ChevronRight"; +import Drawer from "@material-ui/core/Drawer"; +import Divider from "@material-ui/core/Divider"; +import ListItem from "@material-ui/core/ListItem"; +import ListItemIcon from "@material-ui/core/ListItemIcon"; +import ListItemText from "@material-ui/core/ListItemText"; +import List from "@material-ui/core/List"; +import { Link, Route, Switch } from "react-router-dom"; +import Tooltip from "@material-ui/core/Tooltip"; +import SignUp from "../login/SignUp"; +import HomePage from "../utilities/HomePage"; +import SignIn from "../login/SignIn"; +import MyRequests from "../utilities/MyRequests"; +import {AllRequests } from "../utilities/AllRequests"; +import RequestForm from "../utilities/RequestForm"; +import PersonIcon from '@material-ui/icons/Person'; +import ForgotPassword from "../utilities/ForgotPassword"; +import ResetPassword from "../utilities/ResetPassword"; +import VerifyOTP from "../utilities/verifyotp"; +import GetUsers from "../utilities/getusers"; +import LibraryAddIcon from '@material-ui/icons/LibraryAdd'; +import ListAltIcon from '@material-ui/icons/ListAlt'; +import LibraryBooksIcon from '@material-ui/icons/LibraryBooks'; +import DashboardIcon from '@material-ui/icons/Dashboard'; + + +const drawerWidth = 240; + +const useStyles = makeStyles((theme) => ({ + root: { + display: "flex", + }, + appBar: { + zIndex: theme.zIndex.drawer + 1, + transition: theme.transitions.create(["width", "margin"], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + backgroundColor: "#3f51b5", + }, + appBarShift: { + marginLeft: drawerWidth, + width: `calc(100% - ${drawerWidth}px)`, + transition: theme.transitions.create(["width", "margin"], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + }, + appBarSpacer: theme.mixins.toolbar, + container: { + paddingTop: theme.spacing(4), + paddingBottom: theme.spacing(1), + }, + menuButton: { + marginRight: 36, + }, + hide: { + display: "none", + }, + drawer: { + width: drawerWidth, + flexShrink: 0, + whiteSpace: "nowrap", + }, + drawerOpen: { + width: drawerWidth, + transition: theme.transitions.create("width", { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + }, + drawerClose: { + transition: theme.transitions.create("width", { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + overflowX: "hidden", + width: theme.spacing(7) + 1, + [theme.breakpoints.up("sm")]: { + width: theme.spacing(9) + 1, + }, + }, + toolbar: { + display: "flex", + alignItems: "center", + justifyContent: "flex-end", + padding: theme.spacing(0, 1), + // necessary for content to be below app bar + ...theme.mixins.toolbar, + }, + content: { + flexGrow: 1, + height: "100vh", + overflow: "auto", + }, + logoImage: { + filter: "saturate(1)", + border: 1, + borderStyle: "solid", + borderColor: "white", + backgroundColor: "#fafafa", + borderRadius: "50%", + height: 50, + marginRight: theme.spacing(1), + }, + spacer: { + flex: 1, + }, + titleLink: { + color: "inherit", + textDecoration: "none", + }, + logoutSection: { + fontSize: 18, + fontWeight: 500, + letterSpacing: 2, + paddingLeft: "70%", + }, + logoutButton: { + paddingLeft: "2%", + }, +})); + +export const ListItemLink = ({ icon, primary, secondary, to, open }) => ( + + + {icon && {icon}} + + + +); + +export const Layout = () => { + const classes = useStyles(); + const theme = useTheme(); + const [open, setOpen] = React.useState(false); + + const handleDrawerOpen = () => { + setOpen(true); + }; + + const handleDrawerClose = () => { + setOpen(false); + }; + + return ( +
+ + + + + + + + + + Support HUB + + + + {/* { } */} + + + +
+ + {theme.direction === "rtl" ? ( + + ) : ( + + )} + +
+ + + {/* ICONS AT THE NAV BAR */} + } open={open} /> + } open={open} /> + {/* } open={open} /> */} + } open={open} /> + } open={open} /> + } open={open} /> + + + + + + +
+
+ + {} + + + + + + + + + + + + + + + + + +
+
+ ); +}; + +export default Layout; diff --git a/src/components/login/SignIn.jsx b/src/components/login/SignIn.jsx index 09990dc..8049239 100644 --- a/src/components/login/SignIn.jsx +++ b/src/components/login/SignIn.jsx @@ -1,52 +1,50 @@ -import React from 'react'; -import Avatar from '@material-ui/core/Avatar'; -import Button from '@material-ui/core/Button'; -import CssBaseline from '@material-ui/core/CssBaseline'; -import TextField from '@material-ui/core/TextField'; -import Link from '@material-ui/core/Link'; -import Grid from '@material-ui/core/Grid'; -import Box from '@material-ui/core/Box'; -import AppBar from "@material-ui/core/AppBar"; -import Toolbar from "@material-ui/core/Toolbar"; -import IconButton from "@material-ui/core/IconButton"; -import MenuIcon from "@material-ui/icons/Menu"; -import LockOutlinedIcon from '@material-ui/icons/LockOutlined'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core/styles'; -import Container from '@material-ui/core/Container'; +import React, { useState } from "react"; +import Avatar from "@material-ui/core/Avatar"; +import Button from "@material-ui/core/Button"; +import CssBaseline from "@material-ui/core/CssBaseline"; +import TextField from "@material-ui/core/TextField"; +// import Link from "@material-ui/core/Link"; +import Grid from "@material-ui/core/Grid"; +import Box from "@material-ui/core/Box"; +import LockOutlinedIcon from "@material-ui/icons/LockOutlined"; +import Typography from "@material-ui/core/Typography"; +import { makeStyles } from "@material-ui/core/styles"; +import Container from "@material-ui/core/Container"; +import axios from "axios"; +import {Link} from "react-router-dom"; function Copyright() { return ( - {'Copyright © '} + {"Copyright © "} Support Hub - {' '} + {" "} {new Date().getFullYear()} - {'.'} + {"."} ); } const useStyles = makeStyles((theme) => ({ paper: { - marginTop: theme.spacing(3), + marginTop: theme.spacing(10), backgroundColor: theme.palette.background.paper, - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - width: theme.spacing(65), - height: theme.spacing(80), + display: "flex", + flexDirection: "column", + alignItems: "center", + width: theme.spacing(55), + height: theme.spacing(60), padding: theme.spacing(2), borderRadius: theme.shape.borderRadius, - boxShadow: '1px 1px 4px 4px #115293', + boxShadow: "1px 1px 7px 7px #115293", }, avatar: { margin: theme.spacing(1), - backgroundColor: theme.palette.primary.main + backgroundColor: theme.palette.primary.main, }, form: { - width: '100%', + width: "100%", marginTop: theme.spacing(3), }, submit: { @@ -54,8 +52,6 @@ const useStyles = makeStyles((theme) => ({ }, root: { flexGrow: 1, - - }, menuButton: { marginRight: theme.spacing(2), @@ -64,121 +60,124 @@ const useStyles = makeStyles((theme) => ({ flexGrow: 1, }, mainContent: { - padding: "1%" - } + padding: "1%", + }, + + endContent: { + marginTop: theme.spacing(5), + }, })); export default function SignIn() { + const [userName, setUserName] = useState(""); + const [password, setPassword] = useState(""); const classes = useStyles(); + const UserLogin = () => { + const jsonBody = { + userName: userName, + password: password, + }; + + axios + .put("http://localhost:8080/login", jsonBody) + + .then((response) => { + if (response.status === 200) { + alert("Logged in sucessfully"); + } + }) + .catch((error) => { + console.log("Invalid Email or Password"); + }); + }; + return ( -
- - - - - - - - Support Hub - - - - - -
- - - - -
- - - - - - - Sign In - - -
- - - - - - - - - - - - - - - - - - - - - - Forgot Password - - - - - - Don't have an account? Sign Up - - - - - - - - - - - - -
+
+
+ + + +
+ + + + + + Sign In + + +
+ + + { + setUserName(event.target.value); + }} + value={userName} + /> + + + + { + setPassword(event.target.value); + }} + value={password} + /> + + + + + + + + + Forgot Password + + + + + + Don't have an account? Sign Up + + + +
+
+ + + + +
- - - - -
-
); } diff --git a/src/components/login/SignUp.jsx b/src/components/login/SignUp.jsx index 9fb0798..7d4e6f4 100644 --- a/src/components/login/SignUp.jsx +++ b/src/components/login/SignUp.jsx @@ -1,43 +1,42 @@ -import React from 'react'; -import Avatar from '@material-ui/core/Avatar'; -import Button from '@material-ui/core/Button'; -import CssBaseline from '@material-ui/core/CssBaseline'; -import TextField from '@material-ui/core/TextField'; -import Link from '@material-ui/core/Link'; -import Grid from '@material-ui/core/Grid'; -import AppBar from "@material-ui/core/AppBar"; -import Toolbar from "@material-ui/core/Toolbar"; -import IconButton from "@material-ui/core/IconButton"; -import MenuIcon from "@material-ui/icons/Menu"; -import LockOutlinedIcon from '@material-ui/icons/LockOutlined'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core/styles'; -import Container from '@material-ui/core/Container'; -import FormControl from '@material-ui/core/FormControl'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import FormLabel from '@material-ui/core/FormLabel'; -import Radio from '@material-ui/core/Radio'; -import RadioGroup from '@material-ui/core/RadioGroup'; +import React, { useState } from "react"; +import Avatar from "@material-ui/core/Avatar"; +import Button from "@material-ui/core/Button"; +import CssBaseline from "@material-ui/core/CssBaseline"; +import TextField from "@material-ui/core/TextField"; +// import Link from "@material-ui/core/Link"; +import Grid from "@material-ui/core/Grid"; +import LockOutlinedIcon from "@material-ui/icons/LockOutlined"; +import Typography from "@material-ui/core/Typography"; +import { makeStyles } from "@material-ui/core/styles"; +import Container from "@material-ui/core/Container"; +import FormControl from "@material-ui/core/FormControl"; +import FormControlLabel from "@material-ui/core/FormControlLabel"; +import FormLabel from "@material-ui/core/FormLabel"; +import Radio from "@material-ui/core/Radio"; +import RadioGroup from "@material-ui/core/RadioGroup"; +import axios from "axios"; +import {Link} from "react-router-dom"; + const useStyles = makeStyles((theme) => ({ paper: { marginTop: theme.spacing(2), backgroundColor: theme.palette.background.paper, - display: 'flex', - flexDirection: 'column', - alignItems: 'center', + display: "flex", + flexDirection: "column", + alignItems: "center", width: theme.spacing(70), height: theme.spacing(95), padding: theme.spacing(3), borderRadius: theme.shape.borderRadius, - boxShadow: '1px 1px 4px 4px #115293', + boxShadow: "1px 1px 4px 4px #115293", }, avatar: { margin: theme.spacing(1), - backgroundColor: theme.palette.primary.main + backgroundColor: theme.palette.primary.main, }, form: { - width: '100%', + width: "100%", marginTop: theme.spacing(3), }, submit: { @@ -54,177 +53,246 @@ const useStyles = makeStyles((theme) => ({ }, mainContent: { padding: "2%", - alignItems: 'center', - } + alignItems: "center", + }, })); -export default function SignUp() { +export const SignUp = () => { + const [firstName, setFirstName] = useState(""); + const [lastName, setLastName] = useState(""); + const [userName, setUserName] = useState(""); + const [errorMsg, setErrorMsg] = useState(false); + const [password, setPassword] = useState(""); + const [confirmPassword, setConfirmPassword] = useState(""); + const [emailAddress, setEmailAddress] = useState(""); + const [contact, setContact] = useState(""); + const [designation, setDesignation] = useState(""); const classes = useStyles(); + //Method to call endpoint and register + const RegisterUser = () => { + const jsonBody = { + firstName: firstName, + lastName: lastName, + userName: userName, + password: password, + emailId: emailAddress, + phoneNo: contact, + role: designation, + }; + axios + .post("http://localhost:8080/register", jsonBody) + + .then((response) => { + if (response.status === 200) { + alert("User Registered"); + } + }) + .catch((error) => { + console.log(error.message); + }); + }; + return (
- - - - - - - Support Hub + + +
+ + + + + Sign up - - - -
- - -
- - - - - Sign up - -
- - - - - - - + + + + { + setFirstName(event.target.value); + // console.log(firstName); + }} + value={firstName} + /> + + + { + setLastName(event.target.value); + }} + value={lastName} + /> + - - - + + { + setUserName(event.target.value); + }} + value={userName} + /> + + + { + setPassword(event.target.value); + if (event.target.value === "") { + setErrorMsg(false); + setConfirmPassword(""); + } + }} + value={password} + /> + - - + + { + setConfirmPassword(event.target.value); + if (password !== null) { + if (password !== event.target.value) { + setErrorMsg(true); + } else { + setErrorMsg(false); + } + } + }} + value={confirmPassword} + /> + + { + setEmailAddress(event.target.value); + }} + value={emailAddress} + /> + - - - - - - + { + setContact(event.target.value); + }} + value={contact} + /> - - - + + + Designation + { + setDesignation(event.target.value); + }} + value={designation} + > + } + label="Employee" + /> + } + label="Admin" + /> + + + + + {/* + */} - - - - - - - - - - Designation - - } label="Employee" /> - } label="Admin" /> - - - - - - - - - - - - - - - Already have an account? Sign in - + + + + Already have an account? Sign in + + - - -
- + +
+
-
); -} \ No newline at end of file +}; + +export default SignUp; diff --git a/src/components/utilities/AllRequests.jsx b/src/components/utilities/AllRequests.jsx new file mode 100644 index 0000000..a44edaf --- /dev/null +++ b/src/components/utilities/AllRequests.jsx @@ -0,0 +1,128 @@ +import React,{useState} from "react"; +import Button from "@material-ui/core/Button"; +import { makeStyles } from "@material-ui/core/styles"; +import { useHistory as UseHistory } from "react-router-dom"; +import {TableLayout} from "../layout/TableLayout"; +import Grid from "@material-ui/core/Grid"; +import axios from "axios"; + + + +const UseStyles = makeStyles((theme) => ({ + button: { + margin: theme.spacing(3), + marginTop: theme.spacing(10), + marginLeft: theme.spacing(30), + borderRadius: theme.shape.borderRadius, + boxShadow: " 7px 7px grey", + width: "200px", + height: "100px", + display: "inline-block", + }, + + root: { + flexGrow: 1, + }, +})); + +export const AllRequests = () => { + const classes = UseStyles(); + let history = UseHistory(); + + const [requests, setrequests] = useState(""); + const fetchAllRequests = () => { + + axios + .get("http://localhost:8080/allrequests") + .then((response) => { + + setrequests(response.data); + ///Print all the requests to console + console.log(response); + + + if (response.status === 200) { + alert("Values fetched sucessfully"); + } + }) + .catch((error) => { + console.log(error.message); + }); + + + + }; + + + + + + + + return ( +
+ + + + + + + + + + {/* + + */} + + + + + + + { } + +
+ ); +}; + +export default AllRequests; diff --git a/src/components/utilities/ForgotPassword.jsx b/src/components/utilities/ForgotPassword.jsx new file mode 100644 index 0000000..ea67566 --- /dev/null +++ b/src/components/utilities/ForgotPassword.jsx @@ -0,0 +1,155 @@ +import React, { useState } from "react"; +import Avatar from "@material-ui/core/Avatar"; +import Button from "@material-ui/core/Button"; +import CssBaseline from "@material-ui/core/CssBaseline"; +import TextField from "@material-ui/core/TextField"; +import { useHistory as UseHistory } from "react-router-dom"; +import Grid from "@material-ui/core/Grid"; +import LockOutlinedIcon from "@material-ui/icons/LockOutlined"; +import Typography from "@material-ui/core/Typography"; +import { makeStyles } from "@material-ui/core/styles"; +import Container from "@material-ui/core/Container"; + +import axios from "axios"; + +const useStyles = makeStyles((theme) => ({ + paper: { + marginTop: theme.spacing(15), + backgroundColor: theme.palette.background.paper, + display: "flex", + flexDirection: "column", + alignItems: "center", + width: theme.spacing(70), + height: theme.spacing(55), + padding: theme.spacing(3), + borderRadius: theme.shape.borderRadius, + boxShadow: "1px 1px 4px 4px #115293", + }, + avatar: { + margin: theme.spacing(1), + backgroundColor: theme.palette.primary.main, + }, + form: { + width: "100%", + marginTop: theme.spacing(10), + }, + submit: { + margin: theme.spacing(3, 0, 2), + }, + root: { + flexGrow: 1, + }, + menuButton: { + marginRight: theme.spacing(2), + }, + title: { + flexGrow: 1, + }, + mainContent: { + padding: "2%", + alignItems: "center", + }, +})); + +export const ForgotPassword = () => { + + const [emailAddress, setEmailAddress] = useState(""); + + const classes = useStyles(); + let history = UseHistory(); + + + const ForgotPassword = () => { + const jsonBody = { + + emailId: emailAddress, + + }; + axios + .post("http://localhost:8080/forgotpassword", jsonBody) + + .then((response) => { + if (response.status === 200) { + alert("Sucessfully sent OTP"); + } + }) + .catch((error) => { + console.log(error.message); + }); + }; + + + + + return ( +
+ + +
+ + + + + ForgotPassword + +
+ + + + {/* */} + + + { + setEmailAddress(event.target.value); + }} + value={emailAddress} + /> + + + + + + {/* */} + + + {/* + */} + + + +
+
+ +
+ ); +}; + +export default ForgotPassword; diff --git a/src/components/utilities/HomePage.jsx b/src/components/utilities/HomePage.jsx new file mode 100644 index 0000000..c0dda15 --- /dev/null +++ b/src/components/utilities/HomePage.jsx @@ -0,0 +1,94 @@ +import React from "react"; +import { useHistory as UseHistory } from "react-router-dom"; +import Button from "@material-ui/core/Button"; +import Grid from "@material-ui/core/Grid"; +import { makeStyles } from "@material-ui/core/styles"; +import AddAPhotoIcon from "@material-ui/icons/AddAPhoto"; +import AirplayIcon from "@material-ui/icons/Airplay";; + + +const UseStyles = makeStyles((theme) => ({ + button: { + margin: theme.spacing(3), + marginTop: theme.spacing(30), + marginLeft: theme.spacing(10), + borderRadius: theme.shape.borderRadius, + boxShadow: " 7px 7px grey", + width: "230px", + height: "140px", + }, +})); + +export const HomePage = () => { + const classes = UseStyles(); + let history = UseHistory(); + + return ( +
+ + + + + + + + + +
+ ); +}; + +export default HomePage; diff --git a/src/components/utilities/MyRequests.jsx b/src/components/utilities/MyRequests.jsx new file mode 100644 index 0000000..5f56f5e --- /dev/null +++ b/src/components/utilities/MyRequests.jsx @@ -0,0 +1,83 @@ +import React ,{ useState } from "react"; +import Button from "@material-ui/core/Button"; +import { makeStyles } from "@material-ui/core/styles"; +import { useHistory as UseHistory } from "react-router-dom"; + import {TableLayout} from "../layout/TableLayout"; +import Grid from "@material-ui/core/Grid"; +import axios from "axios"; + + +const UseStyles = makeStyles((theme) => ({ + button: { + margin: theme.spacing(3), + marginTop: theme.spacing(10), + marginLeft: theme.spacing(75), + borderRadius: theme.shape.borderRadius, + boxShadow: " 7px 7px grey", + width: "230px", + height: "140px", + }, +})); + +export const MyRequests = () => { + const classes = UseStyles(); + let history = UseHistory(); + + + + + const [requests, setrequests] = useState(""); + const fetchAllRequests = () => { + + axios + .get("http://localhost:8080/myrequests") + .then((response) => { + + setrequests(response.data); + ///Print all the requests to console + console.log(response); + + + if (response.status === 200) { + alert("Values fetched sucessfully"); + } + }) + .catch((error) => { + console.log(error.message); + }); + + + + }; + + + + + + + return ( +
+ + + + + + { + + } + +
+ ); +}; + +export default MyRequests; diff --git a/src/components/utilities/RequestForm.jsx b/src/components/utilities/RequestForm.jsx new file mode 100644 index 0000000..09e411c --- /dev/null +++ b/src/components/utilities/RequestForm.jsx @@ -0,0 +1,398 @@ + +import React, { useState } from "react"; +import Button from "@material-ui/core/Button"; +import CssBaseline from "@material-ui/core/CssBaseline"; +import TextField from "@material-ui/core/TextField"; +import Grid from "@material-ui/core/Grid"; +import Typography from "@material-ui/core/Typography"; +import { makeStyles } from "@material-ui/core/styles"; +import Container from "@material-ui/core/Container"; +import FormControl from "@material-ui/core/FormControl"; +import InputLabel from "@material-ui/core/InputLabel"; +import MenuItem from "@material-ui/core/MenuItem"; +import Select from "@material-ui/core/Select"; +import CloudUploadIcon from "@material-ui/icons/CloudUpload"; +import axios from "axios"; + + + +const useStyles = makeStyles((theme) => ({ + paper: { + marginTop: theme.spacing(2), + backgroundColor: theme.palette.background.paper, + display: "flex", + flexDirection: "column", + alignItems: "center", + width: theme.spacing(70), + height: theme.spacing(78), + padding: theme.spacing(3), + borderRadius: theme.shape.borderRadius, + boxShadow: "1px 1px 4px 4px #115293", + }, + + form: { + width: "100%", + marginTop: theme.spacing(3), + }, + + submit: { + margin: theme.spacing(3, 0, 2), + }, + + + root: { + flexGrow: 1, + }, + + menuButton: { + marginRight: theme.spacing(2), + }, + + title: { + flexGrow: 1, + }, + + formControl: { + width: 245, + }, + + selectEmpty: { + marginTop: theme.spacing(2), + }, + + mainContent: { + padding: "2%", + alignItems: "center", + }, + + +})); + + +export default function RequestForm() { + const classes = useStyles(); + const [name, setname] = useState("Jack"); + const [description, setdescription] = useState(""); + const [requestid, setrequestid] = useState("REQ0073"); + const [requeststate, setrequeststate] = useState("Active"); + + + const [service, setservice] = React.useState(""); + const [impacted_service, setimpacted_service] = React.useState(""); + const handleChange = (event) => { + setimpacted_service(event.target.value); + }; + + + + const [location, setlocation] = React.useState(""); + const [request_location, setrequest_location] = React.useState(""); + const handleChanges = (event) => { + setrequest_location(event.target.value); + }; + + + + + const fetchlocations= () => { + + axios + .get("http://localhost:8080/locations") + .then((response) => { + setlocation(response.data); + + console.log(response); + + if (response.status === 200) { + alert("Values fetched sucessfully"); + } + }) + .catch((error) => { + console.log(error.message); + }); + + + }; + + + + + const fetchservices= () => { + + axios + .get("http://localhost:8080/services") + .then((response) => { + setservice(response.data); + + console.log(response); + + if (response.status === 200) { + alert("Values fetched sucessfully"); + } + }) + .catch((error) => { + console.log(error.message); + }); + + + }; + + + + + + // const requestername = () => { + // const jsonBody = { + // username:username + // }; + // axios + // .get("http://localhost:8080/username") + // }; + + + + + +const NewRequest = () => { + const jsonBody = { + requestid: requestid, + name:name, + requeststate: requeststate, + impacted_service: impacted_service, + request_location: request_location, + description: description, + //photo + //document + + + }; + + axios + .post("http://localhost:8080/newrequest", jsonBody) + + .then((response) => { + if (response.status === 200) { + alert("New Request Generated"); + } + }) + .catch((error) => { + console.log(error.message); + }); +}; + + + + + + + + + return ( +
+
+ + +
+ + Request Form + +
+ + + + + + + + + + + + + + + + Impacted Service + + + + + + + + + Request Location + + + + + + + + + + + { + setdescription(event.target.value); + }} + value={description} + /> + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+ ); +} \ No newline at end of file diff --git a/src/components/utilities/ResetPassword.jsx b/src/components/utilities/ResetPassword.jsx new file mode 100644 index 0000000..168daf7 --- /dev/null +++ b/src/components/utilities/ResetPassword.jsx @@ -0,0 +1,182 @@ +import React, { useState } from "react"; +import Avatar from "@material-ui/core/Avatar"; +import Button from "@material-ui/core/Button"; +import CssBaseline from "@material-ui/core/CssBaseline"; +import TextField from "@material-ui/core/TextField"; +import { useHistory as UseHistory } from "react-router-dom"; +import Grid from "@material-ui/core/Grid"; +import LockOutlinedIcon from "@material-ui/icons/LockOutlined"; +import Typography from "@material-ui/core/Typography"; +import { makeStyles } from "@material-ui/core/styles"; +import Container from "@material-ui/core/Container"; + +import axios from "axios"; + +const useStyles = makeStyles((theme) => ({ + paper: { + marginTop: theme.spacing(20), + backgroundColor: theme.palette.background.paper, + display: "flex", + flexDirection: "column", + alignItems: "center", + width: theme.spacing(70), + height: theme.spacing(70), + padding: theme.spacing(3), + borderRadius: theme.shape.borderRadius, + boxShadow: "1px 1px 4px 4px #115293", + }, + avatar: { + margin: theme.spacing(1), + backgroundColor: theme.palette.primary.main, + }, + form: { + width: "100%", + marginTop: theme.spacing(10), + }, + submit: { + margin: theme.spacing(3, 0, 2), + }, + root: { + flexGrow: 1, + }, + menuButton: { + marginRight: theme.spacing(2), + }, + title: { + flexGrow: 1, + }, + mainContent: { + padding: "2%", + alignItems: "center", + }, +})); + +export const ResetPassword = () => { + + const [password, setPassword] = useState(""); + const [confirmPassword, setConfirmPassword] = useState(""); + const [errorMsg, setErrorMsg] = useState(false); + + + + const classes = useStyles(); + let history = UseHistory(); + //Method to call endpoint and register + const ResetPassword = () => { + const jsonBody = { + + password: password, + /*confirm email id*/ + }; + axios + .post("http://localhost:8080/ResetPassword", jsonBody) + + .then((response) => { + if (response.status === 200) { + alert("Password Updated Successfully"); + } + }) + .catch((error) => { + console.log(error.message); + }); + }; + + return ( +
+ + +
+ + + + + Reset Password + +
+ + {/* */} + + + + { + setPassword(event.target.value); + if (event.target.value === "") { + setErrorMsg(false); + setConfirmPassword(""); + } + }} + value={password} + /> + + + + { + setConfirmPassword(event.target.value); + if (password !== null) { + if (password !== event.target.value) { + setErrorMsg(true); + } else { + setErrorMsg(false); + } + } + }} + value={confirmPassword} + /> + + + + + + + {/* */} + + + + {/* + */} + + +
+
+ +
+ ); +}; + +export default ResetPassword; diff --git a/src/components/utilities/getusers.jsx b/src/components/utilities/getusers.jsx new file mode 100644 index 0000000..fcc1e96 --- /dev/null +++ b/src/components/utilities/getusers.jsx @@ -0,0 +1,107 @@ +import React, { useState } from "react"; +import Avatar from "@material-ui/core/Avatar"; + +import CssBaseline from "@material-ui/core/CssBaseline"; + +import LockOutlinedIcon from "@material-ui/icons/LockOutlined"; +import Typography from "@material-ui/core/Typography"; +import { makeStyles } from "@material-ui/core/styles"; +import Container from "@material-ui/core/Container"; + +import axios from "axios"; + +const useStyles = makeStyles((theme) => ({ + paper: { + marginTop: theme.spacing(20), + backgroundColor: theme.palette.background.paper, + display: "flex", + flexDirection: "column", + alignItems: "center", + width: theme.spacing(70), + height: theme.spacing(70), + padding: theme.spacing(3), + borderRadius: theme.shape.borderRadius, + boxShadow: "1px 1px 4px 4px #115293", + }, + avatar: { + margin: theme.spacing(1), + backgroundColor: theme.palette.primary.main, + }, + form: { + width: "100%", + marginTop: theme.spacing(10), + }, + submit: { + margin: theme.spacing(3, 0, 2), + }, + root: { + flexGrow: 1, + }, + menuButton: { + marginRight: theme.spacing(2), + }, + title: { + flexGrow: 1, + }, + mainContent: { + padding: "2%", + alignItems: "center", + }, +})); + + + + +//GET all the users from the db + + +export const GetUsers = () => { + + const [users, setusers] = useState(""); + const classes = useStyles(); + + //Method to call endpoint and register + const fetchUsers = () => { + + axios + .get("http://localhost:8080/services") + .then((response) => { + setusers(response.data); + + console.log(response); + + if (response.status === 200) { + alert("Values fetched sucessfully"); + } + }) + .catch((error) => { + console.log(error.message); + }); + + + }; + + return ( +
+ + +
+ + + + + Get All users + + +

Hello world

+ + + + +
+ +
+ ); +}; + +export default GetUsers; diff --git a/src/components/utilities/verifyotp.jsx b/src/components/utilities/verifyotp.jsx new file mode 100644 index 0000000..ced37b4 --- /dev/null +++ b/src/components/utilities/verifyotp.jsx @@ -0,0 +1,177 @@ +import React, { useState } from "react"; +import Avatar from "@material-ui/core/Avatar"; +import Button from "@material-ui/core/Button"; +import CssBaseline from "@material-ui/core/CssBaseline"; +import TextField from "@material-ui/core/TextField"; +import { useHistory as UseHistory } from "react-router-dom"; +import Grid from "@material-ui/core/Grid"; +import LockOutlinedIcon from "@material-ui/icons/LockOutlined"; +import Typography from "@material-ui/core/Typography"; +import { makeStyles } from "@material-ui/core/styles"; +import Container from "@material-ui/core/Container"; +import axios from "axios"; + + + + +const useStyles = makeStyles((theme) => ({ + paper: { + marginTop: theme.spacing(20), + backgroundColor: theme.palette.background.paper, + display: "flex", + flexDirection: "column", + alignItems: "center", + width: theme.spacing(70), + height: theme.spacing(70), + padding: theme.spacing(3), + borderRadius: theme.shape.borderRadius, + boxShadow: "1px 1px 4px 4px #115293", + }, + avatar: { + margin: theme.spacing(1), + backgroundColor: theme.palette.primary.main, + }, + form: { + width: "100%", + marginTop: theme.spacing(10), + }, + submit: { + margin: theme.spacing(3, 0, 2), + }, + root: { + flexGrow: 1, + }, + menuButton: { + marginRight: theme.spacing(2), + }, + title: { + flexGrow: 1, + }, + mainContent: { + padding: "2%", + alignItems: "center", + }, +})); + +export const VerifyOTP = () => { + + const [OTP, setOTP] = useState(""); + const [errorMsg, setErrorMsg] = useState(false); + + + + const classes = useStyles(); + let history = UseHistory(); + + //Method to call endpoint and register + const VerifyOTP = () => { + const jsonBody = { + + OTP:OTP, + + /*confirm email id*/ + }; + axios + .post("http://localhost:8080/verifyotp", jsonBody) + + .then((response) => { + if (response.status === 200) { + alert("....."); + } + }) + .catch((error) => { + console.log(error.message); + }); + }; + + return ( +
+ + +
+ + + + + Verify OTP + +
+ + {/* */} + + + { + setOTP(event.target.value); + if(event.target.value.length!=5 ) + { + setErrorMsg(true); + }else { + setErrorMsg(false); + } + + }} + value={OTP} + /> + + + + + + + + + + + + + + + + + + +
+ +
+ ); +}; + +export default VerifyOTP;