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

auth fixes

Browse Source
This commit is contained in:
Olly Hearn
2023-05-24 14:45:56 +03:00
parent 4609ca23fa
commit ca289d2fa2
12 changed files with 3876 additions and 4199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7463
react/app/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
react/app/package.json
View File

@ -11,10 +11,14 @@
"dayjs": "^1.11.7",
"jwt-decode": "^3.1.2",
"mdb-react-ui-kit": "^6.0.0",
"monaco-editor": "^0.36.1",
"monaco-editor-core": "^0.38.0",
"monaco-languageclient": "^6.0.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-monaco-editor": "^0.52.0",
"react-router-dom": "^6.11.1",
"react-scripts": "5.0.1",
"react-scripts": "^5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {

2
react/app/src/App.js
View File

@ -16,7 +16,7 @@ function App() {
<Route path="/" element={<div className="App">
<HomePage />
</div>} />
<Route path="/snippet/3" element={<div className="App">
<Route path="/snippet/:id" element={<div className="App">
<SnippetPage />
</div>} />
</Routes>

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

@ -1,19 +1,19 @@
import React, { useState, useContext } from 'react';
import {
MDBContainer,
MDBNavbar,
MDBNavbarBrand,
MDBNavbarToggler,
MDBIcon,
MDBNavbarNav,
MDBNavbarItem,
MDBNavbarLink,
MDBBtn,
MDBDropdown,
MDBDropdownToggle,
MDBDropdownMenu,
MDBDropdownItem,
MDBCollapse,
MDBContainer,
MDBNavbar,
MDBNavbarBrand,
MDBNavbarToggler,
MDBIcon,
MDBNavbarNav,
MDBNavbarItem,
MDBNavbarLink,
MDBBtn,
MDBDropdown,
MDBDropdownToggle,
MDBDropdownMenu,
MDBDropdownItem,
MDBCollapse,
} from 'mdb-react-ui-kit';
import 'mdb-react-ui-kit/dist/css/mdb.min.css';
import "@fortawesome/fontawesome-free/css/all.min.css";
@ -21,66 +21,70 @@ import { Link } from 'react-router-dom';
import AuthContext from "../context/AuthContext";
export default function App() {
const [showBasic, setShowBasic] = useState(false);
const { user } = useContext(AuthContext);
const [showBasic, setShowBasic] = useState(false);
const { user, logoutUser } = useContext(AuthContext);
return (
<MDBNavbar expand='lg' light bgColor='light'>
<MDBContainer fluid>
<Link to="/">
<MDBNavbarBrand>CodeBox</MDBNavbarBrand>
</Link>
const handleLogout = () => {
confirm("You are about to logout") && logoutUser();
};
<MDBNavbarToggler
aria-controls='navbarSupportedContent'
aria-expanded='false'
aria-label='Toggle navigation'
onClick={() => setShowBasic(!showBasic)}
>
<MDBIcon icon='bars' fas />
</MDBNavbarToggler>
return (
<MDBNavbar expand='lg' light bgColor='light'>
<MDBContainer fluid>
<Link to="/">
<MDBNavbarBrand>CodeBox</MDBNavbarBrand>
</Link>
<MDBCollapse navbar show={showBasic}>
<MDBNavbarNav className='mr-auto mb-2 mb-lg-0'>
<MDBNavbarItem>
<MDBNavbarLink active aria-current='page' href='#'>
Home
</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem>
<MDBNavbarLink href='#'>News</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarToggler
aria-controls='navbarSupportedContent'
aria-expanded='false'
aria-label='Toggle navigation'
onClick={() => setShowBasic(!showBasic)}
>
<MDBIcon icon='bars' fas />
</MDBNavbarToggler>
<MDBNavbarItem>
<MDBDropdown>
<MDBDropdownToggle tag='a' className='nav-link' role='button'>
Snippets
</MDBDropdownToggle>
<MDBDropdownMenu>
<MDBDropdownItem link>Public snippets</MDBDropdownItem>
<MDBDropdownItem link>My snippets</MDBDropdownItem>
<MDBDropdownItem link>Shared to me snippets</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
</MDBNavbarItem>
<MDBCollapse navbar show={showBasic}>
<MDBNavbarNav className='mr-auto mb-2 mb-lg-0'>
<MDBNavbarItem>
<MDBNavbarLink active aria-current='page' href='#'>
Home
</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem>
<MDBNavbarLink href='#'>News</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem>
<MDBNavbarLink disabled={user && false} href='#' tabIndex={-1} aria-disabled='true' background='#3b71ca'>
New snippet
</MDBNavbarLink>
</MDBNavbarItem>
</MDBNavbarNav>
<MDBNavbarNav right>
{ user && (
<MDBNavbarItem>
<MDBNavbarLink href='#' aria-disabled='true' background='#3b71ca'>
{user?.username}
</MDBNavbarLink>
</MDBNavbarItem>
)}
</MDBNavbarNav>
</MDBCollapse>
</MDBContainer>
</MDBNavbar>
);
<MDBNavbarItem>
<MDBDropdown>
<MDBDropdownToggle tag='a' className='nav-link' role='button'>
Snippets
</MDBDropdownToggle>
<MDBDropdownMenu>
<MDBDropdownItem link>Public snippets</MDBDropdownItem>
<MDBDropdownItem link>My snippets</MDBDropdownItem>
<MDBDropdownItem link>Shared to me snippets</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
</MDBNavbarItem>
<MDBNavbarItem>
<MDBNavbarLink disabled={user && false} href='#' tabIndex={-1} aria-disabled='true' background='#3b71ca'>
New snippet
</MDBNavbarLink>
</MDBNavbarItem>
</MDBNavbarNav>
<MDBNavbarNav right>
{ user && (
<MDBNavbarItem>
<MDBNavbarLink href='#' aria-disabled='true' background='#3b71ca' onClick={handleLogout}>
{user?.username}
</MDBNavbarLink>
</MDBNavbarItem>
)}
</MDBNavbarNav>
</MDBCollapse>
</MDBContainer>
</MDBNavbar>
);
}

129
react/app/src/components/LoginForm.jsx
View File

@ -1,15 +1,15 @@
import React, { useState } from 'react';
import {
MDBContainer,
MDBTabs,
MDBTabsItem,
MDBTabsLink,
MDBTabsContent,
MDBTabsPane,
MDBBtn,
MDBIcon,
MDBInput,
MDBCheckbox
MDBContainer,
MDBTabs,
MDBTabsItem,
MDBTabsLink,
MDBTabsContent,
MDBTabsPane,
MDBBtn,
MDBIcon,
MDBInput,
MDBCheckbox
}
from 'mdb-react-ui-kit';
import 'mdb-react-ui-kit/dist/css/mdb.min.css';
@ -19,75 +19,82 @@ import AuthContext from "../context/AuthContext";
const LoginForm = () => {
const [justifyActive, setJustifyActive] = useState('tab1');
const [justifyActive, setJustifyActive] = useState('tab1');
const handleJustifyClick = (value) => {
if (value === justifyActive) {
return;
}
const handleJustifyClick = (value) => {
if (value === justifyActive) {
return;
}
setJustifyActive(value);
};
setJustifyActive(value);
};
const [username, setUsername] = useState("")
const [password, setPassword] = useState("")
const [username, setUsername] = useState("")
const [password, setPassword] = useState("")
const [password2, setPassword2] = useState("")
const { loginUser } = useContext(AuthContext);
const handleLoginSubmit = () => {
username.length > 0 && loginUser(username, password);
};
const { loginUser, registerUser } = useContext(AuthContext);
const handleLoginSubmit = () => {
username.length > 0 && loginUser(username, password);
};
const handleRegisterSubmit = () => {
password === password2 && password.length > 0 ?
username.length > 0 && registerUser(username, password, password2)
: alert("Passwords empty or do not match!")
};
return (
<MDBContainer className="p-3 my-5 d-flex flex-column w-50">
return (
<MDBContainer className="p-3 my-5 d-flex flex-column w-50">
<MDBTabs pills justify className='mb-3 d-flex flex-row justify-content-between'>
<MDBTabsItem>
<MDBTabsLink onClick={() => handleJustifyClick('tab1')} active={justifyActive === 'tab1'}>
Login
</MDBTabsLink>
</MDBTabsItem>
<MDBTabsItem>
<MDBTabsLink onClick={() => handleJustifyClick('tab2')} active={justifyActive === 'tab2'}>
Register
</MDBTabsLink>
</MDBTabsItem>
</MDBTabs>
<MDBTabs pills justify className='mb-3 d-flex flex-row justify-content-between'>
<MDBTabsItem>
<MDBTabsLink onClick={() => handleJustifyClick('tab1')} active={justifyActive === 'tab1'}>
Login
</MDBTabsLink>
</MDBTabsItem>
<MDBTabsItem>
<MDBTabsLink onClick={() => handleJustifyClick('tab2')} active={justifyActive === 'tab2'}>
Register
</MDBTabsLink>
</MDBTabsItem>
</MDBTabs>
<MDBTabsContent>
<MDBTabsContent>
<MDBTabsPane show={justifyActive === 'tab1'}>
<MDBTabsPane show={justifyActive === 'tab1'}>
<MDBInput wrapperClass='mb-4' label='Username' id='form1' type='username' value={username} onInput={e => setUsername(e.target.value)}/>
<MDBInput wrapperClass='mb-4' label='Password' id='form2' type='password'value={password} onInput={e => setPassword(e.target.value)}/>
<MDBInput wrapperClass='mb-4' label='Username' id='form1' type='text' onInput={e => setUsername(e.target.value)}/>
<MDBInput wrapperClass='mb-4' label='Password' id='form2' type='password' onInput={e => setPassword(e.target.value)}/>
<div className="d-flex justify-content-between mx-4 mb-4">
<MDBCheckbox name='flexCheck' value='' id='flexCheckDefault' label='Remember me' />
</div>
<div className="d-flex justify-content-between mx-4 mb-4">
<MDBCheckbox name='flexCheck' value='' id='flexCheckDefault' label='Remember me' />
</div>
<MDBBtn
className="mb-4 w-100"
onClick={handleLoginSubmit}
>
Sign in
</MDBBtn>
<p className="text-center">Not a member? <a href="#!" onClick={() => handleJustifyClick('tab2')} active={justifyActive === 'tab2'}>Register</a></p>
<MDBBtn
className="mb-4 w-100"
onClick={handleLoginSubmit}
>
Sign in
</MDBBtn>
<p className="text-center">Not a member? <a href="#!" onClick={() => handleJustifyClick('tab2')} active={justifyActive === 'tab2'}>Register</a></p>
</MDBTabsPane>
</MDBTabsPane>
<MDBTabsPane show={justifyActive === 'tab2'}>
<MDBTabsPane show={justifyActive === 'tab2'}>
<MDBInput wrapperClass='mb-4' label='Username' id='form1' type='text'/>
<MDBInput wrapperClass='mb-4' label='Password' id='form1' type='password'/>
<MDBInput wrapperClass='mb-4' label='Username' id='form1' type='text' onInput={e => setUsername(e.target.value)}/>
<MDBInput wrapperClass='mb-4' label='Password' id='form1' type='password' onInput={e => setPassword(e.target.value)}/>
<MDBInput wrapperClass='mb-4' label='Repeat password' id='form1' type='password' onInput={e => setPassword2(e.target.value)}/>
<MDBBtn className="mb-4 w-100">Sign up</MDBBtn>
<p className="text-center">Already have an account? <a href="#!" onClick={() => handleJustifyClick('tab1')} active={justifyActive === 'tab1'}>Login</a></p>
<MDBBtn className="mb-4 w-100" onClick={handleRegisterSubmit}>Sign up</MDBBtn>
<p className="text-center">Already have an account? <a href="#!" onClick={() => handleJustifyClick('tab1')} active={justifyActive === 'tab1'}>Login</a></p>
</MDBTabsPane>
</MDBTabsPane>
</MDBTabsContent>
</MDBTabsContent>
</MDBContainer>
);
</MDBContainer>
);
}
export default LoginForm;

44
react/app/src/components/MainCard.jsx
View File

@ -1,31 +1,33 @@
import React from 'react';
import React, { useContext } from 'react';
import {
MDBCard,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBCardImage,
MDBBtn,
MDBRipple
MDBCard,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBCardImage,
MDBBtn,
MDBRipple
} from 'mdb-react-ui-kit';
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";
const MainCard = () => {
return (
<MDBCard>
<MDBCardBody>
<MDBCardTitle>Welcome to CodeBox!</MDBCardTitle>
<MDBCardText>
CodeBox is a snippet service to let you securely store your code snippets and share them with your friends, colleagues and others! Register and start sharing your code for free!
</MDBCardText>
<Link to='/auth'>Register</Link>
</MDBCardBody>
</MDBCard>
);
const { user } = useContext(AuthContext);
return (
<MDBCard>
<MDBCardBody>
<MDBCardTitle>Welcome to CodeBox!</MDBCardTitle>
<MDBCardText>
CodeBox is a snippet service to let you securely store your code snippets and share them with your friends, colleagues and others! Register and start sharing your code for free!
</MDBCardText>
{ !user && (
<Link to='/auth'>Register</Link>
)}
</MDBCardBody>
</MDBCard>
);
}

105
react/app/src/components/Snippet.jsx
View File

@ -1,24 +1,97 @@
import React from 'react';
import React, { useContext, useEffect, useState } from 'react';
import {
MDBCard,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBCard,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBBtn,
} from 'mdb-react-ui-kit';
import 'mdb-react-ui-kit/dist/css/mdb.min.css';
import "@fortawesome/fontawesome-free/css/all.min.css";
import AuthContext from "../context/AuthContext";
import MonacoEditor from 'react-monaco-editor';
const Snippet = ({title, text}) => {
return (
<MDBCard>
<MDBCardBody>
<MDBCardTitle>{title}</MDBCardTitle>
<MDBCardText style={{textAlign: "left"}}>
{text}
</MDBCardText>
</MDBCardBody>
</MDBCard>
);
const Snippet = ({ id }) => {
const { authTokens } = useContext(AuthContext);
const [ snippet, setSnippet ] = useState("");
const getSnippet = async (id) => {
const response = await fetch(`http://127.0.0.1/api/snippets/${id}`, {
method: "GET",
headers: {
"Authorization": `Bearer ${authTokens.access}`,
}
});
const data = await response.json();
if (response.status === 200) {
console.log(data)
setSnippet(data)
} else {
console.log(data, authTokens)
}
};
const updateSnippet = async (id, snippet) => {
const response = await fetch(`http://127.0.0.1/api/snippets/${id}`, {
method: "POST",
headers: {
"Authorization": `Bearer ${authTokens.access}`,
"Content-Type": "application/json"
},
body: snippet
});
const data = await response.json();
if (response.status === 200) {
alert("Snippet updated!")
} else {
alert(`Error updating snippet: ${data}`)
}
};
useEffect(() => {
getSnippet(id);
}, []);
const options = {
autoIndent: 'full',
contextmenu: true,
fontFamily: 'monospace',
fontSize: 13,
lineHeight: 24,
hideCursorInOverviewRuler: true,
matchBrackets: 'always',
minimap: {
enabled: true,
},
scrollbar: {
horizontalSliderSize: 4,
verticalSliderSize: 18,
},
selectOnLineNumbers: true,
roundedSelection: false,
readOnly: false,
cursorStyle: 'line',
automaticLayout: true,
};
return (
<>
<MDBCard>
<MDBCardBody>
<MDBCardTitle>{snippet?.title}</MDBCardTitle>
</MDBCardBody>
</MDBCard>
<div style={{textAlign: "left", height: "80vh"}}>
<MonacoEditor
height="80vh"
options={options}
value={snippet.content}
/>
<MDBBtn className="mb-4 w-100" onClick={updateSnippet}>Save</MDBBtn>
</div>
</>
);
}

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

@ -7,89 +7,94 @@ const AuthContext = createContext();
export default AuthContext;
export const AuthProvider = ({ children }) => {
const [authTokens, setAuthTokens] = useState(() =>
localStorage.getItem("authTokens")
? JSON.parse(localStorage.getItem("authTokens"))
: null
);
const [user, setUser] = useState(() =>
localStorage.getItem("authTokens")
? jwt_decode(localStorage.getItem("authTokens"))
: null
);
const [loading, setLoading] = useState(true);
const [authTokens, setAuthTokens] = useState(() =>
localStorage.getItem("authTokens")
? JSON.parse(localStorage.getItem("authTokens"))
: null
);
const [user, setUser] = useState(() =>
localStorage.getItem("authTokens")
? jwt_decode(localStorage.getItem("authTokens"))
: null
);
const [loading, setLoading] = useState(true);
const history = useNavigate();
const history = useNavigate();
const loginUser = async (username, password) => {
const response = await fetch("http://127.0.0.1/api/auth/token/", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
username,
password
})
});
const data = await response.json();
const loginUser = async (username, password) => {
const response = await fetch("http://127.0.0.1/api/auth/token/", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
username,
password
})
});
const data = await response.json();
if (response.status === 200) {
setAuthTokens(data);
setUser(jwt_decode(data.access));
localStorage.setItem("authTokens", JSON.stringify(data));
history("/");
} else {
alert("Something went wrong!");
}
};
if (response.status === 200) {
console.log(data);
setAuthTokens(data);
setUser(jwt_decode(data.access));
localStorage.setItem("authTokens", JSON.stringify(data));
history("/");
} else {
alert(response.data?.message);
}
};
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"
},
body: JSON.stringify({
username,
password,
password2
})
});
if (response.status === 201) {
history("/login");
} else {
alert("Something went wrong!");
}
};
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"
},
body: JSON.stringify({
username,
password,
password2
})
});
const data = await response.json();
if (response.status === 200) {
setAuthTokens(data);
setUser(jwt_decode(data.access));
localStorage.setItem("authTokens", JSON.stringify(data));
history("/auth");
} else {
alert(data?.message);
}
};
const logoutUser = () => {
setAuthTokens(null);
setUser(null);
localStorage.removeItem("authTokens");
history("/");
};
const logoutUser = () => {
setAuthTokens(null);
setUser(null);
localStorage.removeItem("authTokens");
history("/");
};
const contextData = {
user,
setUser,
authTokens,
setAuthTokens,
registerUser,
loginUser,
logoutUser
};
const contextData = {
user,
setUser,
authTokens,
setAuthTokens,
registerUser,
loginUser,
logoutUser
};
useEffect(() => {
if (authTokens) {
setUser(jwt_decode(authTokens.access));
}
setLoading(false);
}, [authTokens, loading]);
useEffect(() => {
if (authTokens) {
setUser(jwt_decode(authTokens.access));
}
setLoading(false);
}, [authTokens, loading]);
return (
<AuthContext.Provider value={contextData}>
{loading ? null : children}
</AuthContext.Provider>
);
return (
<AuthContext.Provider value={contextData}>
{loading ? null : children}
</AuthContext.Provider>
);
};

7
react/app/src/index.css
View File

@ -12,3 +12,10 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
.me {
position:absolute; left:0; top:0;
width:100%; height:100%; max-height:100% !important;
margin:0; padding:0;
overflow:hidden;
}

8
react/app/src/pages/SnippetPage.jsx
View File

@ -1,12 +1,14 @@
import { useParams } from 'react-router-dom'
import BasicPage from './BasicPage'
import Snippet from '../components/Snippet'
const Page = () => {
const SnippetPage = () => {
const { id } = useParams();
return (
<BasicPage style={{margin: "20%"}}>
<Snippet title="Тестовая заметка" text="Тестовый тест" />
<Snippet id={id} />
</BasicPage>
);
}
export default Page;
export default SnippetPage;