install dependences, adjust components/css

Author: Any-Sun

reactapp/package-lock.json

@@ -6,9 +6,13 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "axios": "^0.19.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-icons": "^3.10.0",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "3.4.1",
+    "react-toastify": "^6.0.8"
   },
   "scripts": {
     "start": "react-scripts start",

reactapp/package.json

@@ -8,6 +8,7 @@ import "react-toastify/dist/ReactToastify.css";
 
 class App extends Component {
   state = {
+
     isAuthenticated: true,
   };
 
@@ -24,6 +25,19 @@ class App extends Component {
     let routes = (
       <Switch>
         <Layout>
+        <Route
+            path="/login/"
+            render={() => (
+              <Redirect to={`/onepage/`} />
+            )}
+          />
+           <Route
+            exact
+            path="/"
+            render={() => (
+              <Redirect to={`/onepage/`} />
+            )}
+          />
           <Route path="/*" component={Routes} />
         </Layout>
       </Switch>

reactapp/src/App.js

@@ -7,7 +7,7 @@ export default class Routes extends Component {
         return (
             <div>
                 <Switch>
-                     <Route path="/*" component={Onepage} />
+                     <Route path="/onepage/" component={Onepage} />
                 </Switch>                
             </div>
         )

reactapp/src/Routes.js

@@ -1,4 +1,5 @@
 
 export default {
-	API_URL: "http://127.0.0.1:8000",
+	API_URL: "http://127.0.0.1:8000/api/v1",
+	CRU_URL : "http://127.0.0.1:8000"
 };

reactapp/src/configs/config.js

@@ -7,7 +7,6 @@ import myConfig from "../../configs/config";
 import { ToastContainer, toast } from "react-toastify";
 
 const Login = () => {
-
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
 
@@ -17,16 +16,19 @@ const Login = () => {
     form_data.append("username", email);
     form_data.append("password", password);
     form_data.append("grant_type", "password");
-    form_data.append("client_id", "YOUR_CLIENT_ID");
-    form_data.append("client_secret","YOUR_CLIENT_SECRET");
-    
+    form_data.append("client_id", "api");
+    form_data.append(
+      "client_secret",
+      "H4s2b6ATJHBnmYcah9vxnpwuKJxQgEjbRo0TlmvDgVVgB02MYugfNGLpGU1w3Pz9CbRwoR9caGOw3zXOCv0GUS13udR8GAgMIYzLKBcBh5ErnFg7r8EW6gPw2jKVQnsm"
+    );
+
     return form_data;
   }
 
   function handleSave(e) {
     e.preventDefault();
 
-    const LOGIN_URL = `${myConfig.API_URL}/o/token/`;
+    const LOGIN_URL = `${myConfig.CRU_URL}/o/token/`;
 
     axios({
       baseURL: LOGIN_URL,
@@ -38,20 +40,20 @@ const Login = () => {
           console.log(res.data);
           localStorage.setItem("user-token", res.data.access_token);
           toast("Login realizado com sucesso.");
+          window.location.href = "/";
         }
       })
       .catch((error) => {
-        // console.log("ERROR", error);
+        console.log("ERROR", error);
         toast("Email ou senha inválidos.");
       });
-    // setTimeout(() => {}, 3500);
   }
 
   return (
     <div className="login_content">
       <section className="form">
         <form onSubmit={handleSave}>
-          <h1>Faça o seu Login</h1>
+          <h1>Login</h1>
 
           <input
             value={email}
@@ -60,25 +62,26 @@ const Login = () => {
             placeholder="Email"
             type="email"
           />
+          <br />
           <input
             value={password}
             name="password"
             type="password"
             onChange={(e) => setPassword(e.target.value)}
             placeholder="Senha"
           />
+          <br />
           <button className="button" type="submit">
             Entrar
           </button>
-
+          <br />
           <Link to="/signup" className="back-link">
-            <FiLogIn size={16} color="007bff" />
+            <FiLogIn size={16} color="b366ff" />
             Não tenho cadastro
           </Link>
         </form>
         <ToastContainer />
       </section>
-
     </div>
   );
 };

reactapp/src/containers/Accounts/Login.js

@@ -37,12 +37,13 @@ export default function Register() {
           history.push("/login/");
         }, 5000);
       })
-      .catch((error) => {        
+      .catch((error) => {
+        console.log(error);
         let error_msg = "";
         Object.keys(error.response.data).forEach(function (e) {
           error_msg += e + ": " + error.response.data[e][0] + " - ";
         });
-        toast(error_msg);
+        toast(error);
       });
   }
 
@@ -51,18 +52,14 @@ export default function Register() {
       <div className="content">
         <section className="">
           <h1>Cadastro</h1>
-          <Link to="/" className="back-link">
-            <FiArrowLeft size={16} color="007bff" />
-            Não tenho cadastro
-          </Link>
         </section>
         <form onSubmit={handleRegister}>
           <input
             value={name_establishment}
             onChange={(e) => setEst(e.target.value)}
             placeholder="Nome"
           />
-
+          <br />
           <input
             value={username}
             onChange={(e) => setName(e.target.value)}
@@ -85,12 +82,16 @@ export default function Register() {
             placeholder="Confirmar senha"
             type="password"
           />
-
+        <br/>
           <button className="button" type="submit">
             Cadastrar
           </button>
         </form>
       </div>
+      <Link to="/" className="back-link">
+            <FiArrowLeft size={16} color="b366ff" />
+            Já tenho cadastro
+          </Link>
       <ToastContainer />
     </div>
   );

reactapp/src/containers/Accounts/Signup.js

@@ -1,10 +1,12 @@
 import React, { Component } from 'react'
+import TopMenu from './Navbar'
 
 export default class Layout extends Component {
     render() {
         return (
             <div>
-                
+                <TopMenu />
+                {this.props.children}
             </div>
         )
     }

reactapp/src/containers/Base/Layout.js

@@ -1,5 +1,5 @@
 .header {
-  background-color: #007bff;
+  background-color: #b366ff;
   width: 100%;
   height: 9vh;
   line-height: 9vh;

reactapp/src/containers/Base/index.css

@@ -0,0 +1,14 @@
+@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap");
+
+* {
+  margin: 0;
+  padding: 0;
+  outline: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font: 400 14px Roboto, sans-serif;
+  background: #f0f0f5;
+  -webkit-font-smoothing: antialiased;
+}