Login + Authentication

ras/api/login.py

@@ -12,6 +12,7 @@ def login(request):
     password = request.POST.get('password')
 
     User = get_user_model()
+
     try:
         user = User.objects.get(username=username)
 

ras/api/urls.py

@@ -1,4 +1,5 @@
 from django.urls import path, include
+from django.views.decorators.csrf import csrf_exempt
 from .views import *
 from .login import *
 
@@ -23,6 +24,6 @@ urlpatterns = [
     path('books/authors', books_per_author),
     path('books/countries', books_per_country),
 
-    path('auth/login', login),
+    path('auth/login', csrf_exempt(login)),
     
 ]

ras/frontend/src/App.js

@@ -1,6 +1,8 @@
 import React, { Component, lazy, Suspense } from "react";
 import { Route, Routes, BrowserRouter as Router } from 'react-router-dom';
 import { ColorRing } from 'react-loader-spinner'
+import Login from "./views/login";
+import ManageBooks from "./views/manage/books";
 
 const Dashboard = lazy(() => import("./views/dashboard"));
 const Booklist = lazy(() => import("./views/booklist"));
@@ -26,6 +28,8 @@ function App() {
                 <Routes>
                     <Route exact path="/" element={<Dashboard />} />
                     <Route exact path="/booklist" element={<Booklist />} />
+                    <Route exact path="/login" element={<Login />} />
+                    <Route exact path="/manage" element={<ManageBooks />} />
                 </Routes>
             </Suspense>
         </Router>

ras/frontend/src/Functions.js

@@ -21,4 +21,15 @@ const getFlagEmoji = (countryCode) => {
       .split('')
       .map(char =>  127397 + char.charCodeAt());
     return String.fromCodePoint(...codePoints);
-  }
+  }
+
+export const readCookie = (name) => {
+    var nameEQ = name + "=";
+    var ca = document.cookie.split(';');
+    for(var i=0;i < ca.length;i++) {
+        var c = ca[i];
+        while (c.charAt(0)==' ') c = c.substring(1,c.length);
+        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+    }
+    return null;
+}

ras/frontend/src/components/Ratings.js

@@ -83,7 +83,7 @@ export default class Ratings extends Component {
 
                                 return(
                                     <tr>
-                                        <td style={{width: '120px'}} className='book_rating' dangerouslySetInnerHTML={{__html: ratingstars}}></td>
+                                        <td style={{width: '150px'}} className='book_rating' dangerouslySetInnerHTML={{__html: ratingstars}}></td>
                                         <td style={{width: '257px'}}>
                                             <div className="progress">
                                                 <div className="progress-bar progress-bar-striped" role="progressbar" style={{ width: rating_percentage + '%' }} aria-valuenow={rating_percentage} aria-valuemin="0" aria-valuemax="100">

ras/frontend/src/views/login.js

@@ -0,0 +1,70 @@
+import React from "react";
+import '../components/DataTables.css';
+import { useNavigate } from "react-router-dom";
+import * as moment from 'moment';
+import { readCookie } from "../Functions";
+const $ = require('jquery');
+$.DataTable = require('datatables.net');
+moment.locale('nl');
+
+function Login() {
+
+    var navigate = useNavigate();
+
+    const loginSubmit = (event) => {
+        event.preventDefault();
+
+        var details = {
+            'username': event.target.username.value,
+            'password': event.target.password.value
+        };
+
+        var formBody = [];
+        for (var property in details) {
+            var encodedKey = encodeURIComponent(property);
+            var encodedValue = encodeURIComponent(details[property]);
+            formBody.push(encodedKey + "=" + encodedValue);
+        }
+        formBody = formBody.join("&");
+
+        fetch('/api/auth/login', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+                "X-CSRFToken": readCookie('csrftoken')
+            },
+            body: formBody
+        })
+            .then(response => response.json())
+            .then(data => {
+                if(data.token){
+                    localStorage.setItem("token", data.token);
+
+                    
+                    navigate("/manage", { replace: true });
+                }else{
+                    console.log("No Token Inside");
+                }
+            })
+    }
+
+    return (
+        <React.Fragment>
+            <div className="content loginbg">
+                <form method="POST" onSubmit={(event) => loginSubmit(event)}>
+                    <div className="form-group">
+                        <label htmlFor="username">Gebruikersnaam</label>
+                        <input type="text" className="form-control username" name="username" id="username" />
+                    </div>
+                    <div className="form-group">
+                        <label htmlFor="password">Wachtwoord</label>
+                        <input type="password" className="form-control password" name="password" id="password" />
+                    </div>
+                    <button type="submit" className="btn btn-primary">Inloggen</button>
+                </form>
+            </div>
+        </React.Fragment>
+    )
+}
+
+export default Login;

ras/frontend/src/views/manage/books.js

@@ -0,0 +1,29 @@
+import React, { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import '../../components/DataTables.css';
+import * as moment from 'moment';
+const $ = require('jquery');
+$.DataTable = require('datatables.net');
+moment.locale('nl');
+
+function ManageBooks() {
+
+    var navigate = useNavigate();
+
+    useEffect(() => {
+        if(!localStorage.getItem("token") || localStorage.getItem("token") && localStorage.getItem("token") === ''){
+            // window.location.href = "/login";
+            navigate("/login")
+        }
+    })
+
+    return (
+        <React.Fragment>
+            <div className="content">
+                <h1>Boeken beheren</h1>
+            </div>
+        </React.Fragment>
+    )
+}
+
+export default ManageBooks;

ras/frontend/static/css/style.css

@@ -357,4 +357,36 @@ html, body{
     background: #ffffff;
     border-radius: 7px;
     font-size: 15px;
+  }
+
+  .loginbg{
+    background: #363a53;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  .loginbg form{
+    background: #fff;
+    width: 400px;
+    padding: 30px;
+    box-shadow: 0 0 25px rgba(0,0,0,.07);
+    margin: auto;
+    right: 0;
+    font-size: 14px;
+    position: absolute;
+    top: 50%;
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+    left: 0;
+  }
+
+  .loginbg .form-group{
+    margin-bottom: 15px;
+  }
+
+  .loginbg button{
+    font-size: 14px;
+    background: #363a53;
+    border: none;
   }

ras/frontend/static/js/main.js.LICENSE.txt

@@ -6,10 +6,30 @@
   !*** ./src/index.js ***!
   \**********************/
 
+/*!**************************!*\
+  !*** ./src/Functions.js ***!
+  \**************************/
+
+/*!****************************!*\
+  !*** ./src/views/login.js ***!
+  \****************************/
+
+/*!***********************************!*\
+  !*** ./src/views/manage/books.js ***!
+  \***********************************/
+
 /*!*************************************!*\
   !*** ./node_modules/react/index.js ***!
   \*************************************/
 
+/*!***************************************!*\
+  !*** ./node_modules/moment/moment.js ***!
+  \***************************************/
+
+/*!***************************************!*\
+  !*** ./src/components/DataTables.css ***!
+  \***************************************/
+
 /*!****************************************!*\
   !*** ./node_modules/react-is/index.js ***!
   \****************************************/
@@ -22,18 +42,566 @@
   !*** ./node_modules/scheduler/index.js ***!
   \*****************************************/
 
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/af.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ar.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/az.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/be.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/bg.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/bm.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/bn.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/bo.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/br.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/bs.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ca.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/cs.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/cv.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/cy.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/da.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/de.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/dv.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/el.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/eo.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/es.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/et.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/eu.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/fa.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/fi.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/fo.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/fr.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/fy.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ga.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/gd.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/gl.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/gu.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/he.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/hi.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/hr.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/hu.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/id.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/is.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/it.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ja.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/jv.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ka.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/kk.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/km.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/kn.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ko.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ku.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ky.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/lb.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/lo.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/lt.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/lv.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/me.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/mi.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/mk.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ml.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/mn.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/mr.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ms.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/mt.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/my.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/nb.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ne.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/nl.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/nn.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/pl.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/pt.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ro.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ru.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/sd.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/se.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/si.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/sk.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/sl.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/sq.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/sr.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ss.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/sv.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/sw.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ta.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/te.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/tg.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/th.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/tk.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/tr.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/uk.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ur.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/uz.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/vi.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/yo.js ***!
+  \******************************************/
+
 /*!******************************************!*\
   !*** ./node_modules/react-dom/client.js ***!
   \******************************************/
 
+/*!*******************************************!*\
+  !*** ./node_modules/moment/locale/fil.js ***!
+  \*******************************************/
+
+/*!*******************************************!*\
+  !*** ./node_modules/moment/locale/tet.js ***!
+  \*******************************************/
+
+/*!*******************************************!*\
+  !*** ./node_modules/moment/locale/tlh.js ***!
+  \*******************************************/
+
+/*!*******************************************!*\
+  !*** ./node_modules/moment/locale/tzl.js ***!
+  \*******************************************/
+
+/*!*******************************************!*\
+  !*** ./node_modules/moment/locale/tzm.js ***!
+  \*******************************************/
+
+/*!********************************************!*\
+  !*** ./node_modules/jquery/dist/jquery.js ***!
+  \********************************************/
+
 /*!********************************************!*\
   !*** ./node_modules/shallowequal/index.js ***!
   \********************************************/
 
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/ar-dz.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/ar-kw.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/ar-ly.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/ar-ma.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/ar-sa.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/ar-tn.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/bn-bd.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/de-at.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/de-ch.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/en-au.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/en-ca.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/en-gb.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/en-ie.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/en-il.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/en-in.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/en-nz.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/en-sg.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/es-do.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/es-mx.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/es-us.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/fr-ca.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/fr-ch.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/hy-am.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/it-ch.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/ms-my.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/nl-be.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/pa-in.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/pt-br.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/tl-ph.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/ug-cn.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/zh-cn.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/zh-hk.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/zh-mo.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/zh-tw.js ***!
+  \*********************************************/
+
+/*!**********************************************!*\
+  !*** ./node_modules/moment/locale/oc-lnc.js ***!
+  \**********************************************/
+
+/*!***********************************************!*\
+  !*** ./node_modules/moment/locale/sr-cyrl.js ***!
+  \***********************************************/
+
+/*!***********************************************!*\
+  !*** ./node_modules/moment/locale/uz-latn.js ***!
+  \***********************************************/
+
+/*!************************************************!*\
+  !*** ./node_modules/moment/locale/gom-deva.js ***!
+  \************************************************/
+
+/*!************************************************!*\
+  !*** ./node_modules/moment/locale/gom-latn.js ***!
+  \************************************************/
+
+/*!************************************************!*\
+  !*** ./node_modules/moment/locale/tzm-latn.js ***!
+  \************************************************/
+
+/*!************************************************!*\
+  !*** ./node_modules/moment/locale/x-pseudo.js ***!
+  \************************************************/
+
 /*!*************************************************!*\
   !*** ./node_modules/react-router/dist/index.js ***!
   \*************************************************/
 
+/*!***************************************************!*\
+  !*** ./node_modules/moment/locale/ sync ^\.\/.*$ ***!
+  \***************************************************/
+
 /*!***************************************************!*\
   !*** ./node_modules/styled-tools/dist/es/prop.js ***!
   \***************************************************/
@@ -46,6 +614,10 @@
   !*** ./node_modules/styled-tools/dist/es/theme.js ***!
   \****************************************************/
 
+/*!*****************************************************!*\
+  !*** ./node_modules/css-loader/dist/runtime/api.js ***!
+  \*****************************************************/
+
 /*!*****************************************************!*\
   !*** ./node_modules/react-router-dom/dist/index.js ***!
   \*****************************************************/
@@ -98,10 +670,22 @@
   !*** ./node_modules/scheduler/cjs/scheduler.development.js ***!
   \*************************************************************/
 
+/*!**************************************************************!*\
+  !*** ./node_modules/css-loader/dist/runtime/noSourceMaps.js ***!
+  \**************************************************************/
+
+/*!**************************************************************!*\
+  !*** ./node_modules/datatables.net/js/jquery.dataTables.mjs ***!
+  \**************************************************************/
+
 /*!***************************************************************!*\
   !*** ./node_modules/react-loader-spinner/dist/esm/helpers.js ***!
   \***************************************************************/
 
+/*!***************************************************************!*\
+  !*** ./node_modules/style-loader/dist/runtime/styleDomAPI.js ***!
+  \***************************************************************/
+
 /*!*****************************************************************!*\
   !*** ./node_modules/@emotion/stylis/dist/stylis.browser.esm.js ***!
   \*****************************************************************/
@@ -146,6 +730,10 @@
   !*** ./node_modules/react-loader-spinner/dist/esm/loader/Watch.js ***!
   \********************************************************************/
 
+/*!********************************************************************!*\
+  !*** ./node_modules/style-loader/dist/runtime/insertBySelector.js ***!
+  \********************************************************************/
+
 /*!*********************************************************************!*\
   !*** ./node_modules/react-loader-spinner/dist/esm/loader/Blocks.js ***!
   \*********************************************************************/
@@ -158,6 +746,10 @@
   !*** ./node_modules/react-loader-spinner/dist/esm/loader/Vortex.js ***!
   \*********************************************************************/
 
+/*!*********************************************************************!*\
+  !*** ./node_modules/style-loader/dist/runtime/styleTagTransform.js ***!
+  \*********************************************************************/
+
 /*!**********************************************************************!*\
   !*** ./node_modules/react-loader-spinner/dist/esm/loader/Circles.js ***!
   \**********************************************************************/
@@ -170,6 +762,10 @@
   !*** ./node_modules/react-loader-spinner/dist/esm/loader/Discuss.js ***!
   \**********************************************************************/
 
+/*!**********************************************************************!*\
+  !*** ./node_modules/style-loader/dist/runtime/insertStyleElement.js ***!
+  \**********************************************************************/
+
 /*!***********************************************************************!*\
   !*** ./node_modules/react-loader-spinner/dist/esm/loader/LineWave.js ***!
   \***********************************************************************/
@@ -226,6 +822,14 @@
   !*** ./node_modules/react-loader-spinner/dist/esm/loader/RotatingLines.js ***!
   \****************************************************************************/
 
+/*!****************************************************************************!*\
+  !*** ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js ***!
+  \****************************************************************************/
+
+/*!*****************************************************************************!*\
+  !*** ./node_modules/css-loader/dist/cjs.js!./src/components/DataTables.css ***!
+  \*****************************************************************************/
+
 /*!*****************************************************************************!*\
   !*** ./node_modules/react-loader-spinner/dist/esm/loader/CirclesWithBar.js ***!
   \*****************************************************************************/
@@ -254,6 +858,10 @@
   !*** ./node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js ***!
   \**********************************************************************************/
 
+/*!**********************************************************************************!*\
+  !*** ./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js ***!
+  \**********************************************************************************/
+
 /*!****************************************************************************************************!*\
   !*** ./node_modules/styled-components/node_modules/@emotion/unitless/dist/unitless.browser.esm.js ***!
   \****************************************************************************************************/

ras/frontend/static/js/src_views_booklist_js.js.LICENSE.txt

@@ -1,3 +1,11 @@
 /*!*******************************!*\
   !*** ./src/views/booklist.js ***!
   \*******************************/
+
+/*!***********************************!*\
+  !*** ./src/components/Filters.js ***!
+  \***********************************/
+
+/*!***********************************!*\
+  !*** ./src/components/Sidebar.js ***!
+  \***********************************/

ras/frontend/templates/index.html

@@ -34,6 +34,7 @@
   </head>
   
   <body>
+    {% csrf_token %}
     <div id="main">
       <div id="app"></div>
     </div>

ras/ras/settings.py

@@ -28,7 +28,6 @@ DEBUG = True
 
 ALLOWED_HOSTS = []
 
-
 # Application definition
 
 INSTALLED_APPS = [

ras/ras/urls.py

@@ -20,5 +20,7 @@ urlpatterns = [
     path('admin/', admin.site.urls),
     path('api/', include('api.urls')),
     path('', include('frontend.urls')),
-    path('booklist/', include('frontend.urls'))
+    path('booklist/', include('frontend.urls')),
+    path('login/', include('frontend.urls')),
+    path('manage/', include('frontend.urls'))
 ]