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

4
api/app/custom_auth/views.py
View File

@ -54,10 +54,10 @@ class RegisterView(APIView):
password=password
)
refresh = RefreshToken.for_user(user)
return {
return Response({
'refresh': str(refresh),
'access': str(refresh.access_token),
}
}, status=200)
# token, created = Token.objects.get_or_create(user=user)
# return Response({
# 'token': token.key,

2
api/app/snippets/serializers.py
View File

@ -23,7 +23,7 @@ class SnippetSerializer(serializers.ModelSerializer):
"id",
"created",
"title",
"contetns",
"content",
"linenos",
"language",
"style",

7451
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>

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

@ -22,7 +22,11 @@ import AuthContext from "../context/AuthContext";
export default function App() {
const [showBasic, setShowBasic] = useState(false);
const { user } = useContext(AuthContext);
const { user, logoutUser } = useContext(AuthContext);
const handleLogout = () => {
confirm("You are about to logout") && logoutUser();
};
return (
<MDBNavbar expand='lg' light bgColor='light'>
@ -73,7 +77,7 @@ export default function App() {
<MDBNavbarNav right>
{ user && (
<MDBNavbarItem>
<MDBNavbarLink href='#' aria-disabled='true' background='#3b71ca'>
<MDBNavbarLink href='#' aria-disabled='true' background='#3b71ca' onClick={handleLogout}>
{user?.username}
</MDBNavbarLink>
</MDBNavbarItem>

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

@ -31,11 +31,17 @@ const LoginForm = () => {
const [username, setUsername] = useState("")
const [password, setPassword] = useState("")
const [password2, setPassword2] = useState("")
const { loginUser } = useContext(AuthContext);
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">
@ -57,8 +63,8 @@ const LoginForm = () => {
<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' />
@ -76,10 +82,11 @@ const LoginForm = () => {
<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>
<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>

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

@ -1,4 +1,4 @@
import React from 'react';
import React, { useContext } from 'react';
import {
MDBCard,
MDBCardBody,
@ -11,8 +11,10 @@ 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";
const MainCard = () => {
const { user } = useContext(AuthContext);
return (
<MDBCard>
<MDBCardBody>
@ -20,9 +22,9 @@ const MainCard = () => {
<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>
);

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

@ -1,23 +1,96 @@
import React from 'react';
import React, { useContext, useEffect, useState } from 'react';
import {
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 = ({ 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,
};
const Snippet = ({title, text}) => {
return (
<>
<MDBCard>
<MDBCardBody>
<MDBCardTitle>{title}</MDBCardTitle>
<MDBCardText style={{textAlign: "left"}}>
{text}
</MDBCardText>
<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>
</>
);
}

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

@ -35,12 +35,13 @@ export const AuthProvider = ({ children }) => {
const data = await response.json();
if (response.status === 200) {
console.log(data);
setAuthTokens(data);
setUser(jwt_decode(data.access));
localStorage.setItem("authTokens", JSON.stringify(data));
history("/");
} else {
alert("Something went wrong!");
alert(response.data?.message);
}
};
@ -56,10 +57,14 @@ export const AuthProvider = ({ children }) => {
password2
})
});
if (response.status === 201) {
history("/login");
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("Something went wrong!");
alert(data?.message);
}
};

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;