JimmyGonzalezG · Rickran09 · Sep 18, 2021 · Sep 18, 2021 · Sep 19, 2021 · Sep 19, 2021
diff --git a/Aplicacion/public/favicon.ico b/Aplicacion/public/favicon.ico
diff --git a/Aplicacion/public/images/background.jpg b/Aplicacion/public/images/background.jpg
diff --git a/Aplicacion/public/images/ventas.jpg b/Aplicacion/public/images/ventas.jpg
diff --git a/Aplicacion/public/images/webtic.png b/Aplicacion/public/images/webtic.png
diff --git a/Aplicacion/public/index.html b/Aplicacion/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description"    content="Applicación para registro de ventas"  />
+    <title>WebTicKers</title>
+
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+  </body>
+</html>
diff --git a/Aplicacion/src/App.css b/Aplicacion/src/App.css
@@ -0,0 +1,124 @@
+
+.App {
+    margin: 0;
+    padding: 0;
+    background-color: rgba(224, 224, 224, 0.755);
+    position: absolute;
+    height: 100%;
+    width: 100%; 
+
+}
+
+h1{
+    text-align: center;
+    color: grey;
+    padding: 0%;
+
+}
+h2{
+    text-align: center;
+    color: rgb(37, 37, 37);
+    margin: 100px auto;
+}
+
+.login{
+    margin: 90px auto 0 auto;
+    width: 300px;
+    height: 400px;
+    background-color: rgb(145, 145, 145);
+    padding: 0;
+    border-radius: 10px;   
+
+}
+
+.login .Login{
+
+    size: auto;
+    border-radius: 5px;
+    background-color: rgb(54, 41, 150);
+    color: aliceblue;
+    box-shadow: 2px;   
+    margin: 50px auto auto 120px;
+
+}
+
+.div-log{
+    margin: 90px auto 0 auto;
+    width: 300px;
+    height: 400px;
+    background-color: rgb(123, 121, 121);
+    padding: 0;
+    border-radius: 10px;
+}
+
+
+.logout{
+    border-radius: 5px;
+    background-color: rgb(106, 32, 32);
+    color: aliceblue;
+    box-shadow: 2px;
+}
+
+
+
+.logo{
+    align-items: center;
+    border-radius: 20px;
+    margin: 20px auto 0 75px; 
+
+}
+
+img{
+    box-shadow: 100px;
+}
+
+.NavbarItems{
+    background: linear-gradient(90deg, rgb(110,94,254) 50%, rgba(73,63,252,70%) 100%);
+    height: 80px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.2rem;
+}
+.nav-menu{
+    display: grid;
+    grid-template-columns: repeat(5, auto);
+    grid-gap: 10px;
+    list-style: none;
+    text-align: center;
+    width: 70vw;
+    justify-content: end;
+    margin-right: 2rem ;
+}
+
+.nav-links{
+    color:white;
+    text-decoration: none;
+    padding: 0.5 rem 1 rem;
+    }
+.nav-links:hover{
+    background-color: #6d76f7;
+    border-radius: 4px;
+    transition: all 0.2s ease-out;
+}
+
+.fa-bars{
+    color:#fff;
+    }
+.nav-links-mobile{
+    display: none;
+}
+.menu-icon{
+    display: none;
+}
+
+.cName{
+    font-size: 1.1rem;
+    border: solid;
+    border-color: white;
+    background-color:whitesmoke;
+    color:darkblue;
+    text-align: center;
+
+}
+
diff --git a/Aplicacion/src/App.js b/Aplicacion/src/App.js
@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import './App.css';
+import './Components/Productos/RegistroProductos.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import Rutas from './Components/Rutas/Rutas';
+import { BrowserRouter as Router } from 'react-router-dom'
+
+
+
+
+
+class App extends Component {
+  constructor() {
+    super();
+    this.state = {
+      name: 'React'
+    };
+  }
+
+
+render() {
+
+  return (
+
+    <Router>
+    <div className="App">
+
+      <h1>Aplicación Registro de Ventas</h1>
+      <Rutas />
+
+    </div>
+    </Router>
+  );
+}
+}
+export default App;
diff --git a/Aplicacion/src/Components/Login/Login.js b/Aplicacion/src/Components/Login/Login.js
@@ -0,0 +1,22 @@
+import React  from "react";
+import { useAuth0 } from "@auth0/auth0-react";
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+
+export const LoginButton = () => {
+    const { loginWithRedirect } = useAuth0();
+
+    return (
+        <div className="login">
+            <h2>Autenticación de Usuarios</h2>
+            <br />
+
+
+                <img className="logo" src="images/webtic.png" alt="Webtickrs"/>
+            <br />
+            <button className="Login" onClick={() => loginWithRedirect()}>Login</button>
+
+
+        </div>
+    )
+};
diff --git a/Aplicacion/src/Components/Login/Logout.js b/Aplicacion/src/Components/Login/Logout.js
@@ -0,0 +1,9 @@
+import React from "react";
+import { useAuth0 } from "@auth0/auth0-react";
+
+export const LogoutButton = () =>{
+    const {logout}=useAuth0();
+    return (
+        <button className="logout" onClick={() => logout({returnTo:window.location.origin})}>Logout</button>
+    );
+}
diff --git a/Aplicacion/src/Components/Login/Privateroute.js b/Aplicacion/src/Components/Login/Privateroute.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Route, Redirect } from 'react-router-dom'
+
+//const user =null;
+const user ={id:1, usuario: "j76gonzalez@gmail.com"};
+
+export default function Privateroute({component:Component, ...rest}) {
+    return (
+        <Route {...rest} >{user ? <Component /> : <Redirect to="/"/>} </Route>
+    );
+}
diff --git a/Aplicacion/src/Components/Login/Profile.js b/Aplicacion/src/Components/Login/Profile.js
@@ -0,0 +1,30 @@
+import React from "react";
+import { useAuth0 } from "@auth0/auth0-react";
+import JSONPretty from 'react-json-pretty';
+import "react-json-pretty/themes/monikai.css"
+
+export const Profile = () => {
+    const { user, isAuthenticated, isLoading } = useAuth0();
+    if (isLoading) {
+        return <div> Cargando...</div>;
+    }
+    else
+        return (
+            isAuthenticated && (
+                <div>
+                    <div>
+                        <img src={user.picture} alt={user.name} />
+                        <p>{user.name}</p>
+                        <p>Email:{user.email}</p>
+                        <p>{user.profile}</p>
+
+
+                    </div>
+                    <div>
+                        <JSONPretty data={user} />;
+                    </div>
+                </div>
+            )
+        );
+
+}
diff --git a/Aplicacion/src/Components/Navbar.js b/Aplicacion/src/Components/Navbar.js
@@ -0,0 +1,35 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom' 
+import '../App.css';
+
+//export default function Navbar() {
+
+class Navbar extends Component{
+    state={clicked: false}
+
+    handleClick=() =>{        this.setStated({clicked: !this.state.clicked})
+    }
+render(){
+    return (
+        <nav className="NavbarItems">
+            <div className="menu-icon" onClick={this.handleClick}>
+                <i className={this.state.clicked ? 'fas fa-times' : 'fas fa-bars'}></i>
+            </div>
+            <ul className={this.state.clicked ? 'nav-menu active' : 'nav-menu'}>
+                <li>
+                    <Link to="/" className="cName">Login</Link>
+                </li>
+                <li>
+                    <Link to="/Logout" className="cName">Logout</Link>
+                </li>
+                <li>
+                    <Link to="/Productos" className="cName">Productos</Link>
+                </li>
+            </ul>
+
+
+        </nav>
+    )
+}
+}
+export default Navbar;
diff --git a/Aplicacion/src/Components/Productos/RegistroProductos.css b/Aplicacion/src/Components/Productos/RegistroProductos.css
@@ -0,0 +1,26 @@
+
+.CProductos{
+
+    margin: 50px auto;
+}
+
+.Lfind{
+    left: 0%;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    color: darkcyan;
+}
+
+.find{
+    border-radius: 5px;
+    display: block;
+}
+
+.insertar{
+
+    margin: 0% 10% auto auto;
+
+}
+
+.thead-dark{
+    background-color:  thead-dark;
+}