Sessão 10

config/_development.json

@@ -44,5 +44,12 @@
             "enabled": true,
             "origins": [ "http://eduardo-velasques.dev.netuno.org:10030", "http://localhost:3000", "http://127.0.0.1:3000" ]
         }
-    ]
+    ],
+    "jwt": {
+        "enabled": true,
+        "secret": "@X{DC5#9cuM#qG?d",
+        "access_expires": 60,
+        "refresh_expires": 1440,
+        "algorithm": "HS512"
+    }
 }

website/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@netuno/auth-client": "^1.0.3",
     "@netuno/service-client": "^1.0.7",
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.6",

website/src/App.js

@@ -12,6 +12,7 @@ import {
 import Home from './pages/Home';
 import Login from './pages/Login';
 import Register from './pages/Register';
+import Main from './pages/Main';
 
 import logo from './logo.svg';
 import './App.less';
@@ -60,6 +61,9 @@ function App() {
             <Route path="/register">
               <Register />
             </Route>
+            <Route path="/main">
+              <Main />
+            </Route>
             <Route path="/">
               <Home />
             </Route>

website/src/pages/Login/index.js

@@ -2,6 +2,10 @@ import React, { useEffect, useState} from 'react';
 
 import { Form, Input, Button, Checkbox } from 'antd';
 
+import _auth from '@netuno/auth-client';
+
+import { Redirect } from "react-router-dom";
+
 import './index.less';
 
 const layout = {
@@ -13,14 +17,41 @@ const tailLayout = {
 };
 
 export default ()=> {
+    const [loading, setLoading] = useState(false);
+
     const onFinish = (values) => {
-        console.log('Success:', values);
+        setLoading(true);
+        _auth.login({
+            username: values.username,
+            password: values.password,
+            success: ()=> {
+                setLoading(false);
+                if (values.remember) {
+                    localStorage.setItem("login", JSON.stringify(values));
+                } else {
+                    localStorage.removeItem("login");
+                }
+            },
+            fail: ()=> {
+                setLoading(false);
+                alert("Fail.");
+            }
+        });
     };
 
     const onFinishFailed = (errorInfo) => {
         console.log('Failed:', errorInfo);
     };
     
+    let initialValues = {
+        remember: true,
+    };
+    if (localStorage.getItem("login")) {
+        initialValues = JSON.parse(localStorage.getItem("login"));
+    }
+    if (_auth.isLogged()) {
+        return <Redirect to="/main" />;
+    }
     return (
         <div className="login">
             <h1>Login</h1>
@@ -28,9 +59,7 @@ export default ()=> {
                 <Form
                     {...layout}
                     name="basic"
-                    initialValues={{
-                        remember: true,
-                    }}
+                    initialValues={initialValues}
                     onFinish={onFinish}
                     onFinishFailed={onFinishFailed}
                     >
@@ -65,7 +94,7 @@ export default ()=> {
                     </Form.Item>
 
                     <Form.Item {...tailLayout}>
-                        <Button type="primary" htmlType="submit">
+                        <Button type="primary" htmlType="submit" loading={loading}>
                         Entrar
                         </Button>
                     </Form.Item>

website/src/pages/Main/index.js

@@ -0,0 +1,24 @@
+import React, { useEffect, useState} from 'react';
+
+import { Redirect } from "react-router-dom";
+
+import _auth from '@netuno/auth-client';
+
+import { Button } from 'antd';
+
+export default ()=> {
+    const [loading, setLoading] = useState(false);
+    if (!_auth.isLogged()) {
+        return <Redirect to="/login" />;
+    }
+    const onLogout = ()=> {
+        _auth.logout();
+        setLoading(true);
+    }
+    return (
+        <div>
+            <h1>Olá! Logado...</h1>
+            <Button onClick={onLogout} loading={loading}>Sair</Button>
+        </div>
+    );
+};