Issue #49: Adicionar segurança nas rotas

Signed-off-by: Gabriel Silva Hermida <gash18@inf.ufpr.br>

src/App.js

 import React from "react";
-import { HashRouter, Route, Redirect } from "react-router-dom";
 import "./global.css";
-import CreateForm from "./pages/CreateForm";
-import AnswerForm from "./pages/AnswerForm";
-import Header from "./components/header/header";
-import Footer from "./components/footer/footer";
-import SignUp from "./pages/SignUp";
-import SignIn from "./pages/SignIn";
-import ListForms from "./pages/ListForms";
-import EditForm from "./pages/EditForm";
-import GetForm from "./pages/GetForm";
-import VisualizeForm from "./pages/VisualizeForm";
+import Routes from "./routes";
+import { BrowserRouter as Router } from "react-router-dom";
 function App() {
   return (
-    <HashRouter>
-      <Header />
-      <Route exact path="/">
-        <Redirect to="/SignIn" />
-      </Route>
-      <Route path="/SignUp" component={SignUp} />
-      <Route path="/SignIn" component={SignIn} />
-      <Route path="/visualize/:id" component={VisualizeForm} />
-      <Route path="/create" component={CreateForm} />
-      <Route path="/answer/:id" component={AnswerForm} />
-      <Route path="/edit/:id" component={EditForm} />
-      <Route path="/list/:id" component={ListForms} />
-      <Route path="/form/:id" component={GetForm} />
-      <Footer />
-    </HashRouter>
+    <Router>
+      <Routes />
+    </Router>
   );
 }
 

src/components/fieldsGetForm/JornalFolder/FormFieldSelect.js

@@ -8,21 +8,21 @@ import Typography from "@material-ui/core/Typography";
 
 import FieldFooterOptions from "./FieldFooterOptions";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   paper: {
     padding: theme.spacing(3),
     width: theme.spacing(100),
     marginBottom: "2%",
     ["@media (max-width: 896px)"]: {
-      width: "300px"
-    }
+      width: "300px",
+    },
   },
   questionsGrid: {
-    marginBottom: "20px"
+    marginBottom: "20px",
   },
   text: {
-    color: "black"
-  }
+    color: "black",
+  },
 }));
 
 function FormFieldSelect(props) {
@@ -32,9 +32,8 @@ function FormFieldSelect(props) {
    * Function to handle the selected answer.
    */
   function handleProps() {
-    console.log(props.answer);
     if (props.answer) {
-      return props.answer.filter(each => {
+      return props.answer.filter((each) => {
         return each.value === "true";
       })[0].placement;
     } else {

src/components/header/header.jsx

@@ -70,7 +70,6 @@ export default function Header() {
     return false;
   }
   useEffect(() => {
-    console.log("O TOKEN MUDOU");
     setIsLoged(!isLoged);
   }, [window.sessionStorage.getItem("token")]);
 

src/pages/ListForms.js

@@ -79,7 +79,6 @@ export default function ListForms() {
    * @param string - the string value to be searched.
    */
   function searching(string) {
-    console.log(string);
     setAuxForms(
       [...forms].filter(value => {
         return value.title.toLowerCase().includes(string.toLowerCase());

src/pages/SignUp.js

@@ -262,7 +262,6 @@ export default function SignUp() {
           </Grid>
           <Grid>
             <IconButton
-              type="submit"
               size="medium"
               className={classes.button}
               id="whiteTextedButton"

src/routes.js

+import React, { useEffect } from "react";
+import CreateForm from "./pages/CreateForm";
+import AnswerForm from "./pages/AnswerForm";
+import Header from "./components/header/header";
+import Footer from "./components/footer/footer";
+import SignUp from "./pages/SignUp";
+import SignIn from "./pages/SignIn";
+import ListForms from "./pages/ListForms";
+import EditForm from "./pages/EditForm";
+import GetForm from "./pages/GetForm";
+import VisualizeForm from "./pages/VisualizeForm";
+import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
+
+const PrivateRoute = ({ component: Component, ...rest }) => {
+  let usr;
+  rest.path === "/list/:id" &&
+    rest.computedMatch.params.id === window.sessionStorage.getItem("userId") &&
+    (usr = true);
+
+  return (
+    <Route
+      {...rest}
+      render={(props) =>
+        usr && window.sessionStorage.getItem("token") !== null ? (
+          <Component {...props} />
+        ) : (
+          <Redirect to={{ pathname: "/" }} />
+        )
+      }
+    />
+  );
+};
+
+const Routes = () => (
+  <BrowserRouter>
+    <Header />
+    <Switch>
+      <Route exact path="/">
+        <Redirect to="/SignIn" />
+      </Route>
+      <Route exact path="/SignUp" component={SignUp} />
+      <Route exact path="/SignIn" component={SignIn} />
+      <PrivateRoute
+        exact
+        path="/visualize/:id"
+        component={() => <VisualizeForm />}
+      />
+      <PrivateRoute exact path="/create" component={() => <CreateForm />} />
+      <PrivateRoute exact path="/answer/:id" component={() => <AnswerForm />} />
+      <PrivateRoute exact path="/edit/:id" component={() => <EditForm />} />
+      <PrivateRoute exact path="/list/:id" component={() => <ListForms />} />
+      <PrivateRoute exact path="/form/:id" component={() => <GetForm />} />
+    </Switch>
+    <Footer />
+  </BrowserRouter>
+);
+
+export default Routes;