diff --git a/.gitignore b/.gitignore index 9ae8980..5722c2b 100644 --- a/.gitignore +++ b/.gitignore @@ -39,7 +39,6 @@ dist/ downloads/ eggs/ .eggs/ -lib/ lib64/ parts/ sdist/ diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx new file mode 100644 index 0000000..cbc81fe --- /dev/null +++ b/src/components/NavBar.tsx @@ -0,0 +1,34 @@ +import React from "react"; +import { useAuth } from "../useAuth"; +import { LogoutOptions, RedirectLoginOptions } from "@auth0/auth0-react"; + +const NavBar: React.FC = () => { + const { loginWithRedirect, logout, user, isAuthenticated } = useAuth(); + + const handleLogout = () => { + const logoutOptions: LogoutOptions = {}; + logout(logoutOptions); + }; + + const handleLogin = () => { + const loginOptions: RedirectLoginOptions = { + authorizationParams: { redirect_uri: "http://localhost" }, + }; + loginWithRedirect(loginOptions); + }; + + return ( + + ); +}; + +export default NavBar; diff --git a/src/lib/auth0.ts b/src/lib/auth0.ts new file mode 100644 index 0000000..1788672 --- /dev/null +++ b/src/lib/auth0.ts @@ -0,0 +1,19 @@ +import { initAuth0 } from "@auth0/nextjs-auth0"; + +const secret = process.env.AUTH0_SECRET; + +if (!secret) { + throw new Error("Secret not found"); +} + +export default initAuth0({ + secret: process.env.AUTH0_SECRET as string, + baseURL: process.env.AUTH0_BASE_URL as string, + issuerBaseURL: process.env.AUTH0_ISSUER_BASE_URL as string, + clientID: process.env.AUTH0_CLIENT_ID as string, + clientSecret: process.env.AUTH0_CLIENT_SECRET as string, + routes: { + callback: "/auth/callback", + postLogoutRedirect: "/", + }, +}); diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 8cf2c9c..36700c7 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -4,6 +4,12 @@ import "../styles/globals.css"; import React from "react"; import type { AppProps } from "next/app"; import Head from "next/head"; +import { Auth0Provider } from "@auth0/auth0-react"; + +const domain = process.env.NEXT_PUBLIC_AUTH0_ISSUER_BASE_URL || ""; +const clientId = process.env.NEXT_PUBLIC_AUTH0_CLIENT_ID || ""; + +console.log(domain); const App: React.FC = ({ Component, pageProps }) => { return ( @@ -11,7 +17,17 @@ const App: React.FC = ({ Component, pageProps }) => { Webapp Template - + + + ); }; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 0bbf056..60dc6f6 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,9 +1,127 @@ -import React from "react"; +import React, { useState } from "react"; +import NavBar from "../components/NavBar"; +import { + Typography, + TextField, + Button, + Table, + TableBody, + TableCell, + TableHead, + TableRow, + Container, + IconButton, + Box, +} from "@mui/material"; +import AddIcon from "@mui/icons-material/Add"; + +interface Element { + name: string; + xpath: string; + url: string; +} + +interface ScrapeResult { + xpath: string; + text: string; + name: string; +} + +type Result = { + [key: string]: ScrapeResult[]; +}; const Home = () => { + const [url, setUrl] = useState(""); + const [rows, setRows] = useState([]); + const [results, setResults] = useState(null); + const [newRow, setNewRow] = useState({ + name: "", + xpath: "", + url: "", + }); + + const handleAddRow = () => { + newRow.url = url; + setRows([...rows, newRow]); + setNewRow({ name: "", xpath: "", url: "" }); + }; + + const handleSubmit = () => { + fetch("/api/submit-scrape-job", { + method: "POST", + headers: { "content-type": "application/json" }, + body: JSON.stringify({ url: url, elements: rows }), + }) + .then((response) => response.json()) + .then((data) => setResults(data)); + }; + return ( <> -

Webapp

+ + + + Web Scraper + +
+ setUrl(e.target.value)} + style={{ marginBottom: "10px" }} + /> + +
+ + setNewRow({ ...newRow, name: e.target.value })} + /> + setNewRow({ ...newRow, xpath: e.target.value })} + /> + + + + + + Name + XPath + + + + {rows.map((row, index) => ( + + + + + + + + + ))} + +
+ ); }; diff --git a/src/useAuth.ts b/src/useAuth.ts new file mode 100644 index 0000000..7053bda --- /dev/null +++ b/src/useAuth.ts @@ -0,0 +1,13 @@ +import { useAuth0 } from "@auth0/auth0-react"; + +export const useAuth = () => { + const { loginWithRedirect, logout, user, isAuthenticated, isLoading } = + useAuth0(); + return { + loginWithRedirect, + logout, + user, + isAuthenticated, + isLoading, + }; +};