auth fixes

api/app/custom_auth/views.py

@@ -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,

api/app/snippets/serializers.py

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

react/app/package.json

@@ -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": {

react/app/src/App.js

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

react/app/src/components/Header.jsx

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

react/app/src/components/LoginForm.jsx

@@ -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='Username' id='form1' type='text' 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='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='Username' id='form1' type='text' onInput={e => setUsername(e.target.value)}/>
-          <MDBInput wrapperClass='mb-4' label='Password' id='form1' type='password'/>
+                    <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>

react/app/src/components/MainCard.jsx

@@ -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>
     );

react/app/src/components/Snippet.jsx

@@ -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>
+                    <MDBCardTitle>{snippet?.title}</MDBCardTitle>
-        <MDBCardText style={{textAlign: "left"}}>
-          {text}
-        </MDBCardText>
                 </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>
+        </>
     );
 }
 

react/app/src/context/AuthContext.jsx

@@ -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) {
+        const data = await response.json();
-      history("/login");
+        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);
         }
     };
 

react/app/src/index.css

@@ -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;
+}

react/app/src/pages/SnippetPage.jsx

@@ -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;