diff --git a/client/package-lock.json b/client/package-lock.json index 63bfbe1..5fbaa67 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -8,6 +8,7 @@ "name": "client", "version": "0.1.0", "dependencies": { + "@auth0/auth0-react": "^2.2.3", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -55,6 +56,23 @@ "node": ">=6.0.0" } }, + "node_modules/@auth0/auth0-react": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/@auth0/auth0-react/-/auth0-react-2.2.3.tgz", + "integrity": "sha512-3B0KA/ky1yA6iQK8045N8U0ZBkmDB3ElCSwJuxNbAoKmZBc4+DjzZhWRxYsgb9PrfHC14Lr2h4950A3PEFDULA==", + "dependencies": { + "@auth0/auth0-spa-js": "^2.1.2" + }, + "peerDependencies": { + "react": "^16.11.0 || ^17 || ^18", + "react-dom": "^16.11.0 || ^17 || ^18" + } + }, + "node_modules/@auth0/auth0-spa-js": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@auth0/auth0-spa-js/-/auth0-spa-js-2.1.2.tgz", + "integrity": "sha512-xdA65Z/U7++Y7L9Uwh8Q8OVOs6qgFz+fb7GAzHFjpr1icO37B//xdzLXm7ZRgA19RWrsNe1nme3h896igJSvvw==" + }, "node_modules/@babel/code-frame": { "version": "7.22.13", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz", diff --git a/client/package.json b/client/package.json index 43f3d79..3666430 100644 --- a/client/package.json +++ b/client/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@auth0/auth0-react": "^2.2.3", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", diff --git a/client/src/components/Auth/Login.jsx b/client/src/components/Auth/Login.jsx new file mode 100644 index 0000000..805f975 --- /dev/null +++ b/client/src/components/Auth/Login.jsx @@ -0,0 +1,10 @@ +import { useAuth0 } from "@auth0/auth0-react"; +import React from "react"; + +const LoginButton = () => { + const { loginWithRedirect } = useAuth0(); + + return ; +}; + +export default LoginButton; \ No newline at end of file diff --git a/client/src/components/Auth/Logout.jsx b/client/src/components/Auth/Logout.jsx new file mode 100644 index 0000000..04ca838 --- /dev/null +++ b/client/src/components/Auth/Logout.jsx @@ -0,0 +1,14 @@ +import { useAuth0 } from "@auth0/auth0-react"; +import React from "react"; + +const LogoutButton = () => { + const { logout } = useAuth0(); + + return ( + + ); +}; + +export default LogoutButton; \ No newline at end of file diff --git a/client/src/components/Auth/Profile.jsx b/client/src/components/Auth/Profile.jsx new file mode 100644 index 0000000..94498fe --- /dev/null +++ b/client/src/components/Auth/Profile.jsx @@ -0,0 +1,59 @@ +import React, { useEffect, useState } from "react"; +import { useAuth0 } from "@auth0/auth0-react"; + +const Profile = () => { + const { user, isAuthenticated, getAccessTokenSilently } = useAuth0(); + const [userMetadata, setUserMetadata] = useState(null); + + useEffect(() => { + console.log("test",user) + const getUserMetadata = async () => { + const domain = "dev-izyyi8s1l0oh6rko.us.auth0.com"; + + try { + const accessToken = await getAccessTokenSilently({ + authorizationParams: { + audience: `https://${domain}/api/v2/`, + scope: "read:current_user", + }, + }); + + const userDetailsByIdUrl = `https://${domain}/api/v2/users/${user.sub}`; + + const metadataResponse = await fetch(userDetailsByIdUrl, { + headers: { + Authorization: `Bearer ${accessToken}`, + }, + }); + + const { user_metadata } = await metadataResponse.json(); + + setUserMetadata(user_metadata); + console.log(user_metadata) + console.log(user) + } catch (e) { + console.log(e.message); + } + }; + + getUserMetadata(); + }, [getAccessTokenSilently, user?.sub]); + + return ( + isAuthenticated && ( +
+ {user.name} +

{user.name}

+

{user.email}

+

User Metadata

+ {userMetadata ? ( + 
{JSON.stringify(userMetadata, null, 2)}
+ ) : ( + "No user metadata defined" + )} +
+ ) + ); +}; + +export default Profile; \ No newline at end of file diff --git a/client/src/components/Destroy/Destroy.jsx b/client/src/components/Destroy/Destroy.jsx index 5156ba0..d41a3ae 100644 --- a/client/src/components/Destroy/Destroy.jsx +++ b/client/src/components/Destroy/Destroy.jsx @@ -2,18 +2,41 @@ import './Destroy.css'; import { useNavigate, useParams } from 'react-router-dom'; import * as bluRayServices from '../../utilities/blu-rays/blu-services'; +import { useAuth0 } from "@auth0/auth0-react"; +import { useEffect, useState } from 'react'; export default function Destroy({setConfirm}) { const navigate = useNavigate() const { id } = useParams(); - console.log("ID",id) + const { user, getAccessTokenSilently } = useAuth0(); + const [bluRay, setBluRay] = useState(null); - async function handleDelete(){ - await bluRayServices.destroyBluRay(id).then(()=>{ - setConfirm(false) - navigate("/blu-rays") + useEffect(()=>{ + handleRequest() + console.log(bluRay) + },[user]) + + async function handleRequest(){ + const owner = user.sub; + const accessToken = await getAccessTokenSilently(); + await bluRayServices.getBluRay(accessToken,owner,id).then((res) => { + res ? setBluRay(res) : navigate("/blu-rays"); }) + .catch((err) => { + console.log(err) + navigate("/blu-rays") + }) + } + + async function handleDelete(){ + if(user && bluRay.owner === user.sub){ + const accessToken = await getAccessTokenSilently(); + await bluRayServices.destroyBluRay(accessToken,user.sub,id).then(()=>{ + setConfirm(false) + navigate("/blu-rays") + }) + } } function handleClick(){ diff --git a/client/src/components/Edit/Edit.jsx b/client/src/components/Edit/Edit.jsx index 6566ce3..37ed58c 100644 --- a/client/src/components/Edit/Edit.jsx +++ b/client/src/components/Edit/Edit.jsx @@ -4,14 +4,15 @@ import { useState, useEffect, useContext } from 'react'; import { useNavigate, useParams } from "react-router"; import { PageContext } from '../../data'; import * as bluRayServices from '../../utilities/blu-rays/blu-services'; +import { useAuth0 } from "@auth0/auth0-react"; import Loading from '../Loading/Loading'; export default function Edit({ bluRay, setEdit, handleRequest }) { - const navigate = useNavigate() const { setPage } = useContext(PageContext); const [formData, setFormData] = useState(null); + const { user, getAccessTokenSilently } = useAuth0(); useEffect(() => { setFormData(bluRay) @@ -20,7 +21,7 @@ export default function Edit({ bluRay, setEdit, handleRequest }) { function handleChange(e) { let updatedData; - if (e.target.name === "steelbook" || e.target.name === "fourK") { + if (e.target.name === "steelbook" || e.target.name === "definition") { updatedData = { ...formData, [e.target.name]: !formData[e.target.name] } } else { updatedData = { ...formData, [e.target.name]: e.target.value } @@ -32,10 +33,15 @@ export default function Edit({ bluRay, setEdit, handleRequest }) { async function handleSubmit(e) { e.preventDefault() - bluRayServices.updateBluRay(bluRay.id, formData).then(() => { - handleRequest() - setEdit(false) - }) + if (user && formData.owner === user.sub) { + const accessToken = await getAccessTokenSilently(); + + await bluRayServices.updateBluRay(accessToken, user.sub, bluRay.id, formData).then(() => { + handleRequest() + setEdit(false) + + }) + } } useEffect(() => { @@ -55,11 +61,12 @@ export default function Edit({ bluRay, setEdit, handleRequest }) { -