olly/codebox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

auth works now

Browse Source
This commit is contained in:
Olly Hearn
2023-05-24 11:46:10 +03:00
parent bb225e5fb5
commit 4609ca23fa
8 changed files with 84 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
react/app/src/components/Header.jsx
View File

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState, useContext } from 'react';
import {
MDBContainer,
MDBNavbar,
@ -18,9 +18,11 @@ import {
import 'mdb-react-ui-kit/dist/css/mdb.min.css';
import "@fortawesome/fontawesome-free/css/all.min.css";
import { Link } from 'react-router-dom';
import AuthContext from "../context/AuthContext";
export default function App() {
const [showBasic, setShowBasic] = useState(false);
const { user } = useContext(AuthContext);
return (
<MDBNavbar expand='lg' light bgColor='light'>
@ -46,7 +48,7 @@ export default function App() {
</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem>
<MDBNavbarLink href='#'>Link</MDBNavbarLink>
<MDBNavbarLink href='#'>News</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem>
@ -57,22 +59,26 @@ export default function App() {
<MDBDropdownMenu>
<MDBDropdownItem link>Public snippets</MDBDropdownItem>
<MDBDropdownItem link>My snippets</MDBDropdownItem>
<MDBDropdownItem link>Something else here</MDBDropdownItem>
<MDBDropdownItem link>Shared to me snippets</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
</MDBNavbarItem>
<MDBNavbarItem>
<MDBNavbarLink disabled href='#' tabIndex={-1} aria-disabled='true' background='#3b71ca'>
<MDBNavbarLink disabled={user && false} href='#' tabIndex={-1} aria-disabled='true' background='#3b71ca'>
New snippet
</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem>
<MDBNavbarLink href='#' tabIndex={-2} aria-disabled='true' color='#3b71ca'>
admin
</MDBNavbarLink>
</MDBNavbarItem>
</MDBNavbarNav>
<MDBNavbarNav right>
{ user && (
<MDBNavbarItem>
<MDBNavbarLink href='#' aria-disabled='true' background='#3b71ca'>
{user?.username}
</MDBNavbarLink>
</MDBNavbarItem>
)}
</MDBNavbarNav>
</MDBCollapse>
</MDBContainer>
</MDBNavbar>

20
react/app/src/context/AuthContext.jsx
View File

@ -2,7 +2,7 @@ import { createContext, useState, useEffect } from "react";
import jwt_decode from "jwt-decode";
import { useNavigate } from "react-router-dom";
const AuthContext = createContext("");
const AuthContext = createContext();
export default AuthContext;
@ -25,8 +25,7 @@ export const AuthProvider = ({ children }) => {
const response = await fetch("http://127.0.0.1/api/auth/token/", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
"Content-Type": "application/json"
},
body: JSON.stringify({
username,
@ -36,30 +35,29 @@ export const AuthProvider = ({ children }) => {
const data = await response.json();
if (response.status === 200) {
console.log(response, data)
setAuthTokens(data);
setUser(jwt_decode(data.access));
localStorage.setItem("authTokens", JSON.stringify(data));
history.push("/");
history("/");
} else {
alert("Something went wrong!");
}
};
const registerUser = async (username, password) => {
const registerUser = async (username, password, password2) => {
const response = await fetch("http://127.0.0.1/api/auth/register/", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
"Content-Type": "application/json"
},
body: JSON.stringify({
username,
password
password,
password2
})
});
if (response.status === 201) {
history.push("/login");
history("/login");
} else {
alert("Something went wrong!");
}
@ -69,7 +67,7 @@ export const AuthProvider = ({ children }) => {
setAuthTokens(null);
setUser(null);
localStorage.removeItem("authTokens");
history.push("/");
history("/");
};
const contextData = {