viniciusdacal · luiz-claudio-rj · Jan 22, 2021 · Jan 22, 2021
diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="pt-BR">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
@@ -25,11 +25,17 @@
       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`.
     -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
+
     <title>React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script src="https://kit.fontawesome.com/d90f7daef4.js" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
+
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/src/components/Routes/Private/Private.jsx b/src/components/Routes/Private/Private.jsx
@@ -0,0 +1,17 @@
+import React, { useContext } from 'react';
+import {Route, Redirect} from 'react-router-dom';
+import StoreContext from 'components/Store/Context';
+
+const RoutesPrivate = ({component: Component, ...rest}) => {
+    const {token} = useContext(StoreContext);
+    return(
+        <Route
+            {...rest}
+            render={()=>token
+            ? <Component {...rest} />
+            : <Redirect to="/login" />
+            }
+        />
+    )
+}
+export default RoutesPrivate;
diff --git a/src/components/Store/Context.js b/src/components/Store/Context.js
@@ -0,0 +1,6 @@
+import {createContext} from 'react';
+const StoreContext = createContext({
+    token: null,
+    setToken: ()=>{}
+})
+export default StoreContext;
diff --git a/src/components/Store/Provider.jsx b/src/components/Store/Provider.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+import Context from "./Context";
+import useStorage from "utils/useStorage";
+
+const StoreProvider = ({ children }) => {
+  const [token, setToken] = useStorage("token");
+
+  return (
+    <Context.Provider
+      value={{
+        token,
+        setToken,
+      }}
+    >
+        {children}
+    </Context.Provider>
+  );
+};
+export default StoreProvider;
diff --git a/src/components/User/Login/Login.jsx b/src/components/User/Login/Login.jsx
@@ -1,20 +1,88 @@
-import React from 'react';
-import UIButton from 'components/UI/Button/Button';
+import React, { useState, useContext} from "react";
+import {useHistory} from 'react-router-dom';
+import StoreContext from 'components/Store/Context';
+import UIButton from "components/UI/Button/Button";
 
-import './Login.css';
+import "./Login.css";
 
+function initalState() {
+  return {
+    user: '',
+    password: ''
+  };
+}
+
+function login({user, password}){
+  if(user === 'admin' && password === 'admin'){
+    return { token: '1234'}
+  }else{
+    return {error: 'Usuario ou senha invalidos!'}
+  }
+}
 const UserLogin = () => {
+
+  const [values, setValues] = useState(initalState);
+  const {setToken} = useContext(StoreContext);
+  const history = useHistory();
+
+  function onChange(event) {
+    const { value, name } = event.target;
+
+    setValues({
+      ...values,
+      [name]: value,
+    });
+  }
+
+  function onSubmit(event){
+    event.preventDefault();
+
+    const {token} = login(values);
+
+    if(token){
+      setToken(token);
+      return history.push('/');
+    }
+
+    setValues(initalState);
+  }
+
   return (
-    <div className="user-login">
-      <h1 className="user-login__title">Acessar o Sistema</h1>
-      <form autoComplete="nope">
-        <div className="user-login__form-control">
-          <label htmlFor="email">E-mail</label>
-          <input id="email" type="text" name="email" autoComplete="off" />
+    <form autoComplete="nope" onSubmit={onSubmit}>
+      <div className="user-login">
+        <h1 className="user-login__title">Acessar o Sistema</h1>
+        <div className="form-group">
+          <div className="row">
+            <div className="col-md-12">
+              <div className="user-login__form-control">
+                <label htmlFor="user">Usuario</label>
+                <input
+                  id="user"
+                  type="text"
+                  name="user"
+                  autoComplete="off"
+                  onChange={onChange}
+                  value={values.user}
+                />
+              </div>
+            </div>
+          </div>
         </div>
-        <div className="user-login__form-control">
-          <label htmlFor="password">Senha</label>
-          <input id="password" type="password" name="password" />
+        <div className="form-group">
+          <div className="row">
+            <div className="col-md-12">
+              <div className="user-login__form-control">
+                <label htmlFor="password">Senha</label>
+                <input
+                  id="password"
+                  type="password"
+                  name="password"
+                  onChange={onChange}
+                  value={values.password}
+                />
+              </div>
+            </div>
+          </div>
         </div>
         <UIButton
           type="submit"
@@ -24,8 +92,8 @@ const UserLogin = () => {
         >
           Entrar
         </UIButton>
-      </form>
-    </div>
+      </div>
+    </form>
   );
 };
 

diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx
@@ -1,12 +1,27 @@
-import React from 'react';
-import './Home.css';
+import React, { useContext } from "react";
+import { useHistory } from "react-router-dom";
+import StoreContext from "components/Store/Context";
+import "./Home.css";
 
-const PagesHome = () => (
-  <div className="pages-home">
-    Parabéns, você conseguiu
-    <br />
-    <button type="button">Sair</button>
-  </div>
-);
+const PagesHome = () => {
+  const { setToken } = useContext(StoreContext);
+  const history = useHistory();
 
+  function sair(event) {
+    event.preventDefault();
+    setToken("");
+    console.log('sair');
+    return history.push('/login');
+  }
+
+  return (
+    <div className="pages-home">
+      Parabéns, você conseguiu!
+      <br />
+      <button type="button" onClick={sair}>
+        Sair
+      </button>
+    </div>
+  );
+};
 export default PagesHome;
diff --git a/src/pages/Login/Login.jsx b/src/pages/Login/Login.jsx
@@ -2,7 +2,9 @@ import React from 'react';
 import UserLogin from 'components/User/Login/Login';
 
 const PagesLogin = () => (
-  <UserLogin />
+  <div className="container">
+    <UserLogin />
+  </div>
 );
 
 export default PagesLogin;
diff --git a/src/pages/Root.jsx b/src/pages/Root.jsx
@@ -1,20 +1,19 @@
-import React from 'react';
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route,
-} from 'react-router-dom';
-import Home from './Home/Home';
-import Login from './Login/Login';
+import React from "react";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import StoreProvider from "components/Store/Provider";
+import RoutesPrivate from 'components/Routes/Private/Private';
+import Home from "./Home/Home";
+import Login from "./Login/Login";
 
 const PagesRoot = () => (
   <Router>
-    <Switch>
-      <Route path="/login" component={Login} />
-      <Route path="/" component={Home} />
-    </Switch>
+    <StoreProvider>
+      <Switch>
+        <Route path="/login" component={Login} />
+        <RoutesPrivate path="/" component={Home} />
+      </Switch>
+    </StoreProvider>
   </Router>
-)
-
+);
 
 export default PagesRoot;