From 7017cc595f12cc2bdb100b8ca552ce3a48977a58 Mon Sep 17 00:00:00 2001 From: vaspula ruchi Date: Thu, 22 Jul 2021 23:43:26 +0530 Subject: [PATCH 1/8] added axios --- package-lock.json | 8 +++ package.json | 1 + src/Service/UserServices.js | 20 +++++++ src/components/login/UserComponent.js | 82 +++++++++++++++++++++++++++ 4 files changed, 111 insertions(+) create mode 100644 src/Service/UserServices.js create mode 100644 src/components/login/UserComponent.js 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/src/Service/UserServices.js b/src/Service/UserServices.js new file mode 100644 index 0000000..e6737e6 --- /dev/null +++ b/src/Service/UserServices.js @@ -0,0 +1,20 @@ +/*import axios from 'axios' + +const USERS_REST_API_URL="https://localhost:8080/api/register"; + +class UserService{ + + GetUsers(){ + + return + axios.post(USERS_REST_API_URL, + { + + } + + ); + } + +} + +export default new UserService();*/ \ No newline at end of file diff --git a/src/components/login/UserComponent.js b/src/components/login/UserComponent.js new file mode 100644 index 0000000..27cc6c8 --- /dev/null +++ b/src/components/login/UserComponent.js @@ -0,0 +1,82 @@ +import React from 'react'; +import UserServices from '../service/UserServices'; + +import axios from 'axios' +class UserComponents extends React.Component{ + + constructor(props){ + super(props); + this.state=this.initialState; + this.submit=this.submit.bind(this); + + } + + initialState={ + firstName:"", + lastName:"", + userid:"", + password:"", + confirmpassword:"", + email:"", + contact:"", + role:"", + + } + + + submit= event => { + + + event.preventDefault(); + + const user={ + firstName:this.state.firstName, + lastName:this.state.lastName, + userid:this.state.userid, + password:this.state.password, + confirmpassword:this.state.confirmpassword, + email:this.state.email, + contact:this.state.contact, + role:this.state.role, + + }; + + + + axios.post("https://localhost:8080/api/register",) + .then(response => { + if(response.data!=null){ + this.setState(this.initialState); + alert("User registered sucesfully"); + } + + + }) + + } + + + + + + + + componentDidMount(){ + UserServices.getUsers().then((response)=>{ + this.setState({users:response.data}) + + }) + } + + render() + { + return( +
+ +
+ + ) + } +} + +export default UserComponents \ No newline at end of file From 83c2a6e7e1a9efb4d6c7f2389b6be5d087d2f9da Mon Sep 17 00:00:00 2001 From: vaspula ruchi Date: Fri, 23 Jul 2021 00:05:28 +0530 Subject: [PATCH 2/8] removed space --- src/components/login/UserComponent.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/login/UserComponent.js b/src/components/login/UserComponent.js index 27cc6c8..7c66cc5 100644 --- a/src/components/login/UserComponent.js +++ b/src/components/login/UserComponent.js @@ -8,7 +8,6 @@ class UserComponents extends React.Component{ super(props); this.state=this.initialState; this.submit=this.submit.bind(this); - } initialState={ From 83b7f2e67a266a3c2503ce24efc9d59692dce4f3 Mon Sep 17 00:00:00 2001 From: z0031wc Date: Fri, 23 Jul 2021 01:57:26 +0530 Subject: [PATCH 3/8] Sign Up Screen integration --- public/index.html | 2 +- src/App.js | 22 +- src/components/layout/layout.jsx | 216 ++++++++++++++++ src/components/login/SignUp.jsx | 407 +++++++++++++++++-------------- 4 files changed, 455 insertions(+), 192 deletions(-) create mode 100644 src/components/layout/layout.jsx 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..49bdc02 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/layout.jsx b/src/components/layout/layout.jsx new file mode 100644 index 0000000..9d0a52d --- /dev/null +++ b/src/components/layout/layout.jsx @@ -0,0 +1,216 @@ +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"; + +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" ? ( + + ) : ( + + )} + +
+ + + } open={open} /> + + + +
+
+ + + +
+
+ ); +}; + +export default Layout; diff --git a/src/components/login/SignUp.jsx b/src/components/login/SignUp.jsx index 9fb0798..55cbac4 100644 --- a/src/components/login/SignUp.jsx +++ b/src/components/login/SignUp.jsx @@ -1,43 +1,40 @@ -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"; 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 +51,231 @@ 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 [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 = () => { + // axios + // .post("https://localhost:8080/api/register") + axios({ + method: "post", + url: "https://localhost:8080/api/register", + data: { + firstName: firstName, + lastName: lastName, + password: password, + emailId: emailAddress, + phoneNo: contact, + role: designation, + }, + }) + .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} + /> + - - - - - - + { + setContact(event.target.value); + }} + value={contact} + /> - - - - - + + { + setEmailAddress(event.target.value); + }} + value={emailAddress} + /> + - - - - - + + { + 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} + /> + - - - Designation - - } label="Employee" /> - } label="Admin" /> - - - + + + Designation + { + setDesignation(event.target.value); + }} + value={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; From 1c7edaa47cffcca0781d485128b36b58a9b3aaf1 Mon Sep 17 00:00:00 2001 From: z0031wc Date: Fri, 23 Jul 2021 15:24:35 +0530 Subject: [PATCH 4/8] endpoint chnage --- src/components/login/SignUp.jsx | 25 +++++++++++-------------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/src/components/login/SignUp.jsx b/src/components/login/SignUp.jsx index 55cbac4..9b4bd2f 100644 --- a/src/components/login/SignUp.jsx +++ b/src/components/login/SignUp.jsx @@ -68,20 +68,17 @@ export const SignUp = () => { //Method to call endpoint and register const RegisterUser = () => { - // axios - // .post("https://localhost:8080/api/register") - axios({ - method: "post", - url: "https://localhost:8080/api/register", - data: { - firstName: firstName, - lastName: lastName, - password: password, - emailId: emailAddress, - phoneNo: contact, - role: designation, - }, - }) + const jsonBody = { + firstName: firstName, + lastName: lastName, + password: password, + emailId: emailAddress, + phoneNo: contact, + role: designation, + }; + axios + .post("http://localhost:8080/register", jsonBody) + .then((response) => { if (response.status === 200) { alert("User Registered"); From a0a508dd4cfef5d7938be157dc2bd8b7f9f7b1cf Mon Sep 17 00:00:00 2001 From: vaspula ruchi Date: Thu, 29 Jul 2021 03:04:56 +0530 Subject: [PATCH 5/8] added landing page --- src/Service/UserServices.js | 20 --- src/components/homePage.jsx | 126 ++++++++++++++ src/components/layout/layout.jsx | 6 +- src/components/login/SignIn.jsx | 233 ++++++++++++++------------ src/components/login/SignUp.jsx | 2 +- src/components/login/UserComponent.js | 81 --------- 6 files changed, 255 insertions(+), 213 deletions(-) delete mode 100644 src/Service/UserServices.js create mode 100644 src/components/homePage.jsx delete mode 100644 src/components/login/UserComponent.js diff --git a/src/Service/UserServices.js b/src/Service/UserServices.js deleted file mode 100644 index e6737e6..0000000 --- a/src/Service/UserServices.js +++ /dev/null @@ -1,20 +0,0 @@ -/*import axios from 'axios' - -const USERS_REST_API_URL="https://localhost:8080/api/register"; - -class UserService{ - - GetUsers(){ - - return - axios.post(USERS_REST_API_URL, - { - - } - - ); - } - -} - -export default new UserService();*/ \ No newline at end of file diff --git a/src/components/homePage.jsx b/src/components/homePage.jsx new file mode 100644 index 0000000..b5e5e27 --- /dev/null +++ b/src/components/homePage.jsx @@ -0,0 +1,126 @@ +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 SaveIcon from '@material-ui/icons/Save'; +import AddAPhotoIcon from '@material-ui/icons/AddAPhoto'; +import AirplayIcon from '@material-ui/icons/Airplay'; + + + +const UseStyles = makeStyles((theme) => ({ + +root:{ + +}, + + +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", + +}, + +p:{ +fontStyle:"bold", +} + + +})); + + + + + export const homePage = () => { + + const classes = UseStyles(); + + return ( +
+ + + + + + + + + + + + + + + + + + + + + +
+ + ); +}; + +export default homePage; diff --git a/src/components/layout/layout.jsx b/src/components/layout/layout.jsx index 9d0a52d..0e8f105 100644 --- a/src/components/layout/layout.jsx +++ b/src/components/layout/layout.jsx @@ -18,6 +18,8 @@ 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 "../homePage"; +import SignIn from "../login/SignIn"; const drawerWidth = 240; @@ -206,7 +208,9 @@ export const Layout = () => {
- + + +
diff --git a/src/components/login/SignIn.jsx b/src/components/login/SignIn.jsx index 09990dc..7d7f4dc 100644 --- a/src/components/login/SignIn.jsx +++ b/src/components/login/SignIn.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +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'; @@ -6,14 +6,13 @@ 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 axios from "axios"; + + function Copyright() { return ( @@ -69,116 +68,130 @@ const useStyles = makeStyles((theme) => ({ })); export default function SignIn() { + const [userName, setUserName] = useState(""); + const [password, setPassword] = useState(""); const classes = useStyles(); + const UserLogin = () => { + const jsonBody = { + userName: userName, + password: password, + + }; + + + axios + .post("http://localhost:8080/api/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 + + +
+ + + + + + + + + + + + + + + + + + + + + + + + Forgot Password + + + + + + Don't have an account? Sign Up + + + + + + + + +
+ + + + + +
); } diff --git a/src/components/login/SignUp.jsx b/src/components/login/SignUp.jsx index 9b4bd2f..2ba8189 100644 --- a/src/components/login/SignUp.jsx +++ b/src/components/login/SignUp.jsx @@ -77,7 +77,7 @@ export const SignUp = () => { role: designation, }; axios - .post("http://localhost:8080/register", jsonBody) + .post("http://localhost:8080/api/register", jsonBody) .then((response) => { if (response.status === 200) { diff --git a/src/components/login/UserComponent.js b/src/components/login/UserComponent.js deleted file mode 100644 index 7c66cc5..0000000 --- a/src/components/login/UserComponent.js +++ /dev/null @@ -1,81 +0,0 @@ -import React from 'react'; -import UserServices from '../service/UserServices'; - -import axios from 'axios' -class UserComponents extends React.Component{ - - constructor(props){ - super(props); - this.state=this.initialState; - this.submit=this.submit.bind(this); - } - - initialState={ - firstName:"", - lastName:"", - userid:"", - password:"", - confirmpassword:"", - email:"", - contact:"", - role:"", - - } - - - submit= event => { - - - event.preventDefault(); - - const user={ - firstName:this.state.firstName, - lastName:this.state.lastName, - userid:this.state.userid, - password:this.state.password, - confirmpassword:this.state.confirmpassword, - email:this.state.email, - contact:this.state.contact, - role:this.state.role, - - }; - - - - axios.post("https://localhost:8080/api/register",) - .then(response => { - if(response.data!=null){ - this.setState(this.initialState); - alert("User registered sucesfully"); - } - - - }) - - } - - - - - - - - componentDidMount(){ - UserServices.getUsers().then((response)=>{ - this.setState({users:response.data}) - - }) - } - - render() - { - return( -
- -
- - ) - } -} - -export default UserComponents \ No newline at end of file From c89a439bf731672972276ce404bfe5c0328446d5 Mon Sep 17 00:00:00 2001 From: vaspula ruchi Date: Thu, 29 Jul 2021 10:23:19 +0530 Subject: [PATCH 6/8] made changes to sigin page --- src/components/homePage.jsx | 40 +++++++++---------- src/components/login/SignIn.jsx | 68 ++++++++++++++++++--------------- 2 files changed, 55 insertions(+), 53 deletions(-) diff --git a/src/components/homePage.jsx b/src/components/homePage.jsx index b5e5e27..a488055 100644 --- a/src/components/homePage.jsx +++ b/src/components/homePage.jsx @@ -1,32 +1,17 @@ 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 SaveIcon from '@material-ui/icons/Save'; import AddAPhotoIcon from '@material-ui/icons/AddAPhoto'; import AirplayIcon from '@material-ui/icons/Airplay'; +import { useHistory as UseHistory} from "react-router-dom"; const UseStyles = makeStyles((theme) => ({ -root:{ - -}, - button:{ margin:theme.spacing(3), @@ -39,19 +24,20 @@ height:"140px", }, -p:{ -fontStyle:"bold", -} - })); + export const homePage = () => { const classes = UseStyles(); + let history = UseHistory(); + + + return (
@@ -65,7 +51,9 @@ fontStyle:"bold", color="primary" size="large" className={classes.button} - + onClick={()=>{ + history.push("/login"); + }} >

Accessing from Mobile?

@@ -82,7 +70,9 @@ fontStyle:"bold", color="primary" size="large" className={classes.button} - + onClick={()=>{ + history.push("/"); + }} >

Accessing from Desktop?

@@ -97,6 +87,9 @@ fontStyle:"bold", color="primary" size="large" className={classes.button} + onClick={()=>{ + history.push("/"); + }} >

My Requests

@@ -109,6 +102,9 @@ fontStyle:"bold", color="primary" size="large" className={classes.button} + onClick={()=>{ + history.push("/"); + }} >

Admin Dashboard

diff --git a/src/components/login/SignIn.jsx b/src/components/login/SignIn.jsx index 7d7f4dc..823c38a 100644 --- a/src/components/login/SignIn.jsx +++ b/src/components/login/SignIn.jsx @@ -119,35 +119,40 @@ export default function SignIn() { - - - - - - - - - - - + + { + setUserName(event.target.value); + }} + value={userName} + /> + + + + + { + setPassword(event.target.value); + }} + value={password} + /> + + - - - - - - - - - - - - - - - -
- - ); -}; - -export default homePage; diff --git a/src/components/layout/TableLayout.jsx b/src/components/layout/TableLayout.jsx new file mode 100644 index 0000000..0b8de34 --- /dev/null +++ b/src/components/layout/TableLayout.jsx @@ -0,0 +1,84 @@ +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, ShortDescription, DateCreated) { + return { Number, Name, State, ShortDescription, DateCreated }; +} + +const rows = [ + createData("REQ0456", "JACK", "ACTIVE", "TAP NOT WORKING", "6/5/2021"), + createData("REQ0678", "MICHEAL", "ACTIVE", "TAP NOT WORKING", "6/5/2021"), + createData("REQ0987", "DEPP", "COMPLETED", "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 + Date Created + + + + {rows.map((row) => ( + + {/* + {row.name} + */} + {{row.Number}} + {row.Name} + {row.State} + + {row.ShortDescription} + + {row.DateCreated} + + ))} + +
+ // + ); +}; + +export default TableLayout; diff --git a/src/components/layout/layout.jsx b/src/components/layout/layout.jsx index 0e8f105..9cdebe2 100644 --- a/src/components/layout/layout.jsx +++ b/src/components/layout/layout.jsx @@ -18,8 +18,11 @@ 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 "../homePage"; +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"; const drawerWidth = 240; @@ -208,9 +211,27 @@ export const Layout = () => {
- + {} + + +
diff --git a/src/components/login/SignIn.jsx b/src/components/login/SignIn.jsx index 823c38a..add68cf 100644 --- a/src/components/login/SignIn.jsx +++ b/src/components/login/SignIn.jsx @@ -1,51 +1,49 @@ -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 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"; - - 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: { @@ -53,8 +51,6 @@ const useStyles = makeStyles((theme) => ({ }, root: { flexGrow: 1, - - }, menuButton: { marginRight: theme.spacing(2), @@ -63,8 +59,12 @@ const useStyles = makeStyles((theme) => ({ flexGrow: 1, }, mainContent: { - padding: "1%" - } + padding: "1%", + }, + + endContent: { + marginTop: theme.spacing(5), + }, })); export default function SignIn() { @@ -76,10 +76,8 @@ export default function SignIn() { const jsonBody = { userName: userName, password: password, - }; - axios .post("http://localhost:8080/api/login", jsonBody) @@ -93,111 +91,92 @@ export default function SignIn() { }); }; - - - - return ( -
- +
- - - + + -
+
+ + + - - - - - - Sign In - - -
- - + + Sign In + + + - { - setUserName(event.target.value); - }} - value={userName} - /> - - + { + setUserName(event.target.value); + }} + value={userName} + /> + - { - setPassword(event.target.value); - }} - value={password} + { + setPassword(event.target.value); + }} + value={password} /> - - - + - + fullWidth + variant="contained" + color="primary" + className={classes.submit} + onClick={UserLogin} + disabled={userName === "" || password === ""} + > + Sign In + + + + + + + Forgot Password + - - - - - - Forgot Password - - - - - - Don't have an account? Sign Up - - - - - - + + + Don't have an account? Sign Up + + + +
+
- -
- - + - - -
-
+ + +
+
); } diff --git a/src/components/login/SignUp.jsx b/src/components/login/SignUp.jsx index 2ba8189..7470c8e 100644 --- a/src/components/login/SignUp.jsx +++ b/src/components/login/SignUp.jsx @@ -58,6 +58,7 @@ const useStyles = makeStyles((theme) => ({ 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(""); @@ -71,13 +72,14 @@ export const SignUp = () => { const jsonBody = { firstName: firstName, lastName: lastName, + userName: userName, password: password, emailId: emailAddress, phoneNo: contact, role: designation, }; axios - .post("http://localhost:8080/api/register", jsonBody) + .post("http://localhost:8080/register", jsonBody) .then((response) => { if (response.status === 200) { @@ -141,30 +143,14 @@ export const SignUp = () => { variant="outlined" required fullWidth - id="contact" - label="Contact" - name="contact" - autoComplete="contact" + id="userName" + label="User Name" + name="userName" + autoComplete="uname" onChange={(event) => { - setContact(event.target.value); + setUserName(event.target.value); }} - value={contact} - /> - - - - { - setEmailAddress(event.target.value); - }} - value={emailAddress} + value={userName} /> @@ -211,6 +197,38 @@ export const SignUp = () => { /> + + { + setEmailAddress(event.target.value); + }} + value={emailAddress} + /> + + + + { + setContact(event.target.value); + }} + value={contact} + /> + + Designation diff --git a/src/components/utilities/AllRequests.jsx b/src/components/utilities/AllRequests.jsx new file mode 100644 index 0000000..fb124d0 --- /dev/null +++ b/src/components/utilities/AllRequests.jsx @@ -0,0 +1,95 @@ +import React 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"; + +const UseStyles = makeStyles((theme) => ({ + button: { + margin: theme.spacing(3), + marginTop: theme.spacing(10), + marginLeft: theme.spacing(10), + 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(); + + return ( +
+ + + + + + + + + + + + + + + + + + + { } + +
+ ); +}; + +export default AllRequests; 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..36c822b --- /dev/null +++ b/src/components/utilities/MyRequests.jsx @@ -0,0 +1,49 @@ +import React 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"; + +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(); + + return ( +
+ + + + + + { + + } + +
+ ); +}; + +export default MyRequests; diff --git a/src/components/utilities/RequestForm.jsx b/src/components/utilities/RequestForm.jsx new file mode 100644 index 0000000..ebca871 --- /dev/null +++ b/src/components/utilities/RequestForm.jsx @@ -0,0 +1,273 @@ +import React 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"; + +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 [impacted_service, setimpacted_service] = React.useState(""); + const handleChange = (event) => { + setimpacted_service(event.target.value); + }; + const [request_location, setrequest_location] = React.useState(""); + const handleChanges = (event) => { + setrequest_location(event.target.value); + }; + + return ( +
+
+ + +
+ + Request Form + +
+ + + + + + + + + + + + + + + + Impacted Service + + + + + + + + + Request Location + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+ ); +} From 56f6a91ab3b3baeec532ebed9a600a3f4a300056 Mon Sep 17 00:00:00 2001 From: vaspula ruchi Date: Sun, 8 Aug 2021 21:51:59 +0530 Subject: [PATCH 8/8] added requestform,password services --- src/components/layout/TableLayout.jsx | 12 +- src/components/layout/layout.jsx | 56 +++++- src/components/login/SignIn.jsx | 9 +- src/components/login/SignUp.jsx | 6 +- src/components/utilities/AllRequests.jsx | 41 ++++- src/components/utilities/ForgotPassword.jsx | 155 +++++++++++++++++ src/components/utilities/MyRequests.jsx | 36 +++- src/components/utilities/RequestForm.jsx | 139 ++++++++++++++- src/components/utilities/ResetPassword.jsx | 182 ++++++++++++++++++++ src/components/utilities/getusers.jsx | 107 ++++++++++++ src/components/utilities/verifyotp.jsx | 177 +++++++++++++++++++ 11 files changed, 894 insertions(+), 26 deletions(-) create mode 100644 src/components/utilities/ForgotPassword.jsx create mode 100644 src/components/utilities/ResetPassword.jsx create mode 100644 src/components/utilities/getusers.jsx create mode 100644 src/components/utilities/verifyotp.jsx diff --git a/src/components/layout/TableLayout.jsx b/src/components/layout/TableLayout.jsx index 0b8de34..ec65ca2 100644 --- a/src/components/layout/TableLayout.jsx +++ b/src/components/layout/TableLayout.jsx @@ -25,14 +25,14 @@ const StyledTableRow = withStyles((theme) => ({ }, }))(TableRow); -function createData(Number, Name, State, ShortDescription, DateCreated) { - return { Number, Name, State, ShortDescription, DateCreated }; +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", "TAP NOT WORKING", "6/5/2021"), - createData("REQ0987", "DEPP", "COMPLETED", "FAN NOT WORKING", "6/5/2021"), + 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({ @@ -57,6 +57,7 @@ export const TableLayout = () => { Name State Short Description + Assigned to Date Created @@ -72,6 +73,7 @@ export const TableLayout = () => { {row.ShortDescription} + {row.AssignedTo} {row.DateCreated} ))} diff --git a/src/components/layout/layout.jsx b/src/components/layout/layout.jsx index 9cdebe2..83fa573 100644 --- a/src/components/layout/layout.jsx +++ b/src/components/layout/layout.jsx @@ -23,6 +23,16 @@ 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; @@ -171,13 +181,13 @@ export const Layout = () => { - {/* */} + } */} {
- + + {/* ICONS AT THE NAV BAR */} } open={open} /> + } open={open} /> + {/* } open={open} /> */} + } open={open} /> + } open={open} /> + } open={open} /> + + + @@ -232,6 +251,37 @@ export const Layout = () => { path="/requestform" component={RequestForm} /> + + + + + + + + + + +
diff --git a/src/components/login/SignIn.jsx b/src/components/login/SignIn.jsx index add68cf..8049239 100644 --- a/src/components/login/SignIn.jsx +++ b/src/components/login/SignIn.jsx @@ -3,7 +3,7 @@ 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 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"; @@ -11,6 +11,7 @@ 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 ( @@ -79,7 +80,7 @@ export default function SignIn() { }; axios - .post("http://localhost:8080/api/login", jsonBody) + .put("http://localhost:8080/login", jsonBody) .then((response) => { if (response.status === 200) { @@ -158,13 +159,13 @@ export default function SignIn() { className={classes.endContent} > - + Forgot Password - + Don't have an account? Sign Up diff --git a/src/components/login/SignUp.jsx b/src/components/login/SignUp.jsx index 7470c8e..7d4e6f4 100644 --- a/src/components/login/SignUp.jsx +++ b/src/components/login/SignUp.jsx @@ -3,7 +3,7 @@ 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 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"; @@ -15,6 +15,8 @@ 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: { @@ -281,7 +283,7 @@ export const SignUp = () => { - + Already have an account? Sign in diff --git a/src/components/utilities/AllRequests.jsx b/src/components/utilities/AllRequests.jsx index fb124d0..a44edaf 100644 --- a/src/components/utilities/AllRequests.jsx +++ b/src/components/utilities/AllRequests.jsx @@ -1,15 +1,18 @@ -import React from "react"; +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(10), + marginLeft: theme.spacing(30), borderRadius: theme.shape.borderRadius, boxShadow: " 7px 7px grey", width: "200px", @@ -26,6 +29,36 @@ 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 (
@@ -57,7 +90,7 @@ export const AllRequests = () => { - + {/* - + */} + {/* + */} + + + + +
+ +
+ ); +}; + +export default ForgotPassword; diff --git a/src/components/utilities/MyRequests.jsx b/src/components/utilities/MyRequests.jsx index 36c822b..5f56f5e 100644 --- a/src/components/utilities/MyRequests.jsx +++ b/src/components/utilities/MyRequests.jsx @@ -1,9 +1,11 @@ -import React from "react"; +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: { @@ -21,6 +23,38 @@ 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 (
diff --git a/src/components/utilities/RequestForm.jsx b/src/components/utilities/RequestForm.jsx index ebca871..09e411c 100644 --- a/src/components/utilities/RequestForm.jsx +++ b/src/components/utilities/RequestForm.jsx @@ -1,4 +1,5 @@ -import React from "react"; + +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"; @@ -11,6 +12,9 @@ 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: { @@ -25,45 +29,164 @@ const useStyles = makeStyles((theme) => ({ 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 (
@@ -82,7 +205,7 @@ export default function RequestForm() { fullWidth id="request_id" label="Request Id" - defaultValue="REQ0789" + defaultValue={requestid} InputProps={{ readOnly: true, }} @@ -97,7 +220,7 @@ export default function RequestForm() { fullWidth id="request_state" label="Request State" - defaultValue="Active" + defaultValue={requeststate} InputProps={{ readOnly: true, }} @@ -110,7 +233,7 @@ export default function RequestForm() { fullWidth id="name" label="Requester Name" - defaultValue="Jack" + value={name} InputProps={{ readOnly: true, }} @@ -150,7 +273,6 @@ export default function RequestForm() { Request Location
); -} +} \ 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;