.gitignore

@@ -1,4 +1,3 @@
 .env
 n39env
-.n39env
 .vscode

frontend/package.json

@@ -16,7 +16,6 @@
     "@types/react-dom": "^18.3.0",
     "bootstrap": "^5.3.3",
     "date-fns": "^3.6.0",
-    "fast-xml-parser": "^4.5.0",
     "history": "^5.3.0",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.4",

frontend/src/App.tsx

@@ -6,6 +6,7 @@ import "./App.css";
 import { Main } from "./pages";
 import { Library } from "./pages/Library";
 import { Book } from "./pages/Book";
+import { primary } from "./colors";
 import { ActiveModalProps } from "./shared/components/modals/types";
 
 export const AuthContext = createContext<{
@@ -49,6 +50,7 @@ function App() {
       style={{
         height: "100vh",
         width: "100vw",
+        backgroundColor: primary,
         fontFamily: "New Amsterdam",
         overflow: "scroll",
       }}

frontend/src/darkmodeColors.ts

@@ -1,5 +0,0 @@
-export const primary = "#5e6268";
-export const primaryRGBA = "rgba(83,86,91, 0.8)";
-export const secondary = "#5f5e68";
-export const tertiary = "#5e6768";
-export const danger = "#685e62";

frontend/src/index.css

@@ -12,219 +12,49 @@ body {
   }
 }
 
-#bootstrap-overrides {
-  background-color: #f2f3f4;
-  color: #5e6268;
-
-  .btn-primary {
-    background-color: #5e6268;
-    color: #f2f3f4;
-    border: 2px solid #5e6268;
-  }
-
-  form-control {
-    background-color: #f2f2e8 !important;
-    border-color: #5e6268 !important;
-  }
-
-  .form-select .form-control {
-    background-color: #f2f2e8 !important;
-    border-color: #f2f2e8 !important;
-  }
-
-  .dropdown-toggle::after {
-    display: none;
-  }
-
-  .form-label {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
-      "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-      "Helvetica Neue", sans-serif !important;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    letter-spacing: normal;
-  }
-
-  tbody > tr > td {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
-      "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-      "Helvetica Neue", sans-serif !important;
-  }
-  .table > :not(caption) > * > * {
-    background-color: #f2f2e8 !important;
-    color: #5e6268 !important;
-  }
-
-  table > thead {
-    letter-spacing: 0.25em;
-  }
-
-  .bg-primary {
-    background-color: #f2f3f4 !important;
-  }
-
-  .modal-content {
-    background-color: #f2f3f4 !important;
-    border-radius: 10px;
-  }
-
-  .modal-body {
-    background-color: #f2f3f4 !important;
-    border-radius: 0px 0px 10px 10px;
-  }
-
-  .modal-header {
-    background-color: #f2f3f4 !important;
-    border-radius: 10px 10px 0px 0px;
-    border-bottom: none;
-  }
-
-  .dropdown button {
-    background-color: #f2f2e8 !important;
-    color: #5e6268 !important;
-    border: 2px solid #5e6268;
-  }
-
-  .dropdown-menu {
-    background-color: #f2f2e8 !important;
-    color: #5e6268 !important;
-    border: 2px solid #f2f2e8;
-  }
-
-  .danger {
-    background-color: #f9a9ab !important;
-  }
-
-  .page-link {
-    color: #5e6268 !important;
-    border: 2px solid #5e6268 !important;
-    background-color: transparent !important;
-  }
-
-  .active > .page-link {
-    background-color: #5e6268 !important;
-    color: #f2f3f4 !important;
-  }
-
-  .pagination {
-    margin-top: 10px !important;
-
-    li {
-      min-width: 40px;
-    }
-  }
+#bootstrap-overrides .form-select .form-control {
+  background-color: #f2f2e8 !important;
+  border-color: #f2f2e8 !important;
 }
 
-@media (prefers-color-scheme: dark) {
-  #bootstrap-overrides {
-    background-color: #5e6268;
-    color: #f2f3f4;
+#bootstrap-overrides .dropdown-toggle::after {
+  display: none;
+}
 
-    .btn-primary {
-      background-color: #f2f3f4;
-      color: #5e6268;
-      border: 2px solid #5e6268;
-    }
+#bootstrap-overrides .form-label {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif !important;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  letter-spacing: normal;
+}
 
-    .form-control {
-      background-color: #f2f2e8 !important;
-      border-color: #5e6268 !important;
-      border-right: none;
-    }
+#bootstrap-overrides table {
+  letter-spacing: 0.25em;
+}
 
-    .form-select .form-control {
-      background-color: #f2f2e8 !important;
-      border-color: #f2f2e8 !important;
-    }
+#bootstrap-overrides .bg-primary {
+  background-color: #f2f3f4 !important;
+}
 
-    .dropdown-toggle::after {
-      display: none;
-    }
+#bootstrap-overrides .modal-body {
+  background-color: #f2f3f4 !important;
+}
 
-    .form-label {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
-        "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-        "Helvetica Neue", sans-serif !important;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      letter-spacing: normal;
-    }
+#bootstrap-overrides .danger {
+  background-color: #f9a9ab !important;
+}
 
-    tbody > tr > td {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
-        "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-        "Helvetica Neue", sans-serif !important;
-    }
+#bootstrap-overrides .page-link {
+  color: black !important;
+  border: 2px solid black !important;
+  background-color: transparent !important;
+}
 
-    .table > :not(caption) > * > * {
-      background-color: #5e6268 !important;
-      color: #f2f2e8 !important;
-    }
-
-    table > thead {
-      letter-spacing: 0.25em;
-    }
-
-    .bg-primary {
-      background-color: #5e6268 !important;
-    }
-
-    .dropdown button {
-      background-color: #f2f2e8 !important;
-      color: #5e6268 !important;
-    }
-
-    .dropdown-menu {
-      background-color: #5e6268 !important;
-      border: 2px solid #5e6268;
-    }
-
-    .dropdown-item {
-      color: #f2f2e8 !important;
-      svg {
-        color: #f2f2e8 !important;
-      }
-    }
-    .dropdown-item:hover {
-      color: #5e6268 !important;
-      background-color: #f2f2e8 !important;
-    }
-
-    .modal-content {
-      background-color: #5e6268 !important;
-      border-radius: 10px;
-    }
-
-    .modal-body {
-      background-color: #5e6268 !important;
-      border-radius: 0px 0px 10px 10px;
-    }
-
-    .modal-header {
-      background-color: #5e6268 !important;
-      border-radius: 10px 10px 0px 0px;
-      border-bottom: none;
-    }
-
-    .danger {
-      background-color: #c94414 !important;
-    }
-
-    .page-link {
-      color: #f2f3f4 !important;
-      border: 2px solid #f2f3f4 !important;
-      background-color: transparent !important;
-    }
-
-    .active > .page-link {
-      background-color: #f2f3f4 !important;
-      color: #5e6268 !important;
-    }
-
-    .pagination {
-      margin-top: 10px !important;
-    }
-  }
+#bootstrap-overrides .active > .page-link {
+  background-color: black !important;
+  color: #f2f3f4 !important;
 }
 
 code {

frontend/src/pages/Library/Library.tsx

@@ -1,7 +1,7 @@
-import React, { useCallback, useContext, useMemo, useState } from "react";
+import React, { useCallback, useContext, useMemo } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { Book } from "../../types/Book";
-import { Button, Form, Table } from "react-bootstrap";
+import { Pagination, Table } from "react-bootstrap";
 import {
   createColumnHelper,
   flexRender,
@@ -15,13 +15,12 @@ import {
 } from "@tanstack/react-table";
 import { Actions } from "./components/Actions";
 import { ImArrowDown, ImArrowUp } from "react-icons/im";
+import { AiOutlineLeft, AiOutlineRight } from "react-icons/ai";
 import { useLocation } from "react-router-dom";
 import { format } from "date-fns";
 import { useAuth } from "../../shared/utils/useAuthentication";
 import { ModalSelector } from "../../shared/components/modals/Modals";
 import { ModalContext } from "../../App";
-import { Pagination } from "./components/Pagination";
-import { modalTypes } from "../../shared/components/modals/types";
 
 export const Library = (): React.JSX.Element => {
   const location = useLocation();
@@ -32,21 +31,9 @@ export const Library = (): React.JSX.Element => {
     [location]
   );
 
-  const { authenticated } = useAuth();
+  const auth = useAuth();
   const modalContext = useContext(ModalContext);
 
-  const [selectedBooks, setSelectedBooks] = useState<Book["uuid"][]>([]);
-
-  const toggleBookSelection = useCallback(
-    (uuid: Book["uuid"]) =>
-      setSelectedBooks((prev) =>
-        prev.includes(uuid)
-          ? prev.filter((current) => current !== uuid)
-          : [...prev, uuid]
-      ),
-    []
-  );
-
   const { data: books, refetch } = useQuery<Book[]>({
     queryFn: async () => {
       if (
@@ -63,48 +50,10 @@ export const Library = (): React.JSX.Element => {
     queryKey: ["books"],
   });
 
-  const shelf = params.get("shelf");
-  const year = params.get("year");
-
-  const data = useMemo(
-    () =>
-      books?.filter(
-        (b) =>
-          (!shelf || b.shelf?.toLowerCase() === shelf?.toLowerCase()) &&
-          (!year || b.published.toString() === year)
-      ) ?? [],
-    [books, year, shelf]
-  );
-
   const columnHelper = createColumnHelper<Book>();
   const columns: ColumnDef<Book, any>[] = useMemo(
     () =>
       [
-        authenticated
-          ? columnHelper.display({
-              id: "selection",
-              header: () => (
-                <Form.Check
-                  type='checkbox'
-                  checked={selectedBooks.length === data?.length}
-                  id={`select-all-books`}
-                  onChange={() =>
-                    setSelectedBooks((prev) =>
-                      prev.length || !data ? [] : data.map((b) => b.uuid)
-                    )
-                  }
-                />
-              ),
-              cell: (props) => (
-                <Form.Check
-                  type='checkbox'
-                  checked={selectedBooks.includes(props.row.original.uuid)}
-                  id={`select-book-${props.row.original.uuid}`}
-                  onChange={() => toggleBookSelection(props.row.original.uuid)}
-                />
-              ),
-            })
-          : undefined,
         columnHelper.accessor((book) => book.isbn, {
           id: "isbn",
           header: "ISBN",
@@ -159,7 +108,7 @@ export const Library = (): React.JSX.Element => {
             </div>
           ),
         }),
-        authenticated
+        auth.authenticated
           ? columnHelper.accessor(
               (book) => (!book.contact ? "" : book.contact),
               {
@@ -184,21 +133,26 @@ export const Library = (): React.JSX.Element => {
             <Actions
               book={props.row.original}
               refetch={refetch}
-              authenticated={authenticated}
+              authenticated={auth.authenticated}
               setActiveModal={modalContext.setActiveModal}
             />
           ),
         }),
       ].filter((c) => typeof c !== "undefined") as ColumnDef<Book, any>[],
-    [
-      authenticated,
-      columnHelper,
-      selectedBooks,
-      data,
-      toggleBookSelection,
-      refetch,
-      modalContext.setActiveModal,
-    ]
+    [auth.authenticated, columnHelper, modalContext.setActiveModal, refetch]
+  );
+
+  const shelf = params.get("shelf");
+  const year = params.get("year");
+
+  const data = useMemo(
+    () =>
+      books?.filter(
+        (b) =>
+          (!shelf || b.shelf?.toLowerCase() === shelf?.toLowerCase()) &&
+          (!year || b.published.toString() === year)
+      ) ?? [],
+    [books, year, shelf]
   );
 
   const [pagination, setPagination] = React.useState<PaginationState>({
@@ -225,6 +179,19 @@ export const Library = (): React.JSX.Element => {
     [table.getState().pagination.pageIndex]
   );
 
+  const getPage = useCallback(
+    (n: number) => (
+      <Pagination.Item
+        key={`${n}th-page`}
+        active={n === currentPage}
+        onClick={() => table.setPageIndex(n)}
+      >
+        {n + 1}
+      </Pagination.Item>
+    ),
+    [table, currentPage]
+  );
+
   return (
     <div className='m-auto p-2' style={{ width: "100%", maxHeight: "100vh" }}>
       <ModalSelector {...modalContext} />
@@ -282,32 +249,32 @@ export const Library = (): React.JSX.Element => {
       </div>
       {table.getPageCount() ? (
         <div className='d-flex w-100'>
-          <Pagination
-            currentPage={currentPage}
-            setPageIndex={table.setPageIndex}
-            getPageCount={table.getPageCount}
-          />
-          {authenticated && (
-            <Button
-              style={{
-                marginLeft: "0px",
-                marginRight: "auto",
-              }}
-              className='my-auto'
-              onClick={() =>
-                modalContext.setActiveModal({
-                  type: modalTypes.moveShelf,
-                  books: selectedBooks,
-                  onClose: () => {
-                    refetch();
-                    modalContext.setActiveModal();
-                  },
-                })
-              }
+          <Pagination className='d-flex m-auto'>
+            <Pagination.Item
+              key='prev'
+              disabled={currentPage === 0}
+              onClick={() => table.setPageIndex(currentPage - 1)}
             >
-              Move selection
-            </Button>
-          )}
+              <AiOutlineLeft />
+            </Pagination.Item>
+            {getPage(0)}
+            {currentPage > 3 && <Pagination.Ellipsis />}
+            {currentPage === 3 && getPage(currentPage - 2)}
+            {currentPage > 1 && getPage(currentPage - 1)}
+            {currentPage > 0 && getPage(currentPage)}
+            {currentPage < table.getPageCount() - 2 && getPage(currentPage + 1)}
+            {currentPage < table.getPageCount() - 3 &&
+              table.getPageCount() > 4 && <Pagination.Ellipsis />}
+            {currentPage < table.getPageCount() - 1 &&
+              getPage(table.getPageCount() - 1)}
+            <Pagination.Item
+              key='next'
+              onClick={() => table.setPageIndex(currentPage + 1)}
+              disabled={currentPage >= table.getPageCount() - 1}
+            >
+              <AiOutlineRight />
+            </Pagination.Item>
+          </Pagination>
         </div>
       ) : null}
     </div>

frontend/src/pages/Library/components/Actions.tsx

@@ -1,10 +1,11 @@
-import { useMutation } from "@tanstack/react-query";
-import { useCallback } from "react";
 import { Badge, Dropdown } from "react-bootstrap";
+import { Book } from "../../../types/Book";
 import { ImBin, ImBook, ImBoxAdd, ImBoxRemove, ImMenu } from "react-icons/im";
+import { useMutation } from "@tanstack/react-query";
+import { secondary } from "../../../colors";
 import { ModalContextType } from "../../../App";
 import { modalTypes } from "../../../shared/components/modals/types";
-import { Book } from "../../../types/Book";
+import { useCallback } from "react";
 
 const { book: bookModal, checkout, del } = modalTypes;
 
@@ -43,7 +44,11 @@ export const Actions = ({
   return (
     <>
       <Dropdown>
-        <Dropdown.Toggle variant='success' id='dropdown-basic'>
+        <Dropdown.Toggle
+          variant='success'
+          id='dropdown-basic'
+          style={{ backgroundColor: secondary, border: "2px solid black" }}
+        >
           <ImMenu size={25} color='black' />
         </Dropdown.Toggle>
 
@@ -54,7 +59,14 @@ export const Actions = ({
               className='d-flex'
               onClick={() => setActiveModal({ type: bookModal, book, onClose })}
             >
-              <Badge pill className='ml-2 d-flex mr-2'>
+              <Badge
+                pill
+                className='ml-2 d-flex mr-2'
+                style={{
+                  border: "2px solid black",
+                  backgroundColor: "transparent",
+                }}
+              >
                 <ImBook size={25} color='black' className='m-auto' />
               </Badge>
               <p className='m-auto' style={{ paddingLeft: "10px" }}>
@@ -75,7 +87,13 @@ export const Actions = ({
                 })
               }
             >
-              <Badge pill className='ml-2 d-flex mr-2'>
+              <Badge
+                pill
+                className='ml-2 d-flex mr-2'
+                style={{
+                  border: "2px solid black",
+                }}
+              >
                 <ImBoxRemove size={25} color='black' className='m-auto' />
               </Badge>{" "}
               <p className='m-auto' style={{ paddingLeft: "10px" }}>
@@ -108,9 +126,17 @@ export const Actions = ({
             <Dropdown.Item
               id='delete'
               className='d-flex'
-              onClick={() => setActiveModal({ type: del, onClose, ...book })}
+              onClick={() =>
+                setActiveModal({ type: del, uuid: book.uuid, onClose })
+              }
             >
-              <Badge pill className='ml-2 d-flex danger mr-2'>
+              <Badge
+                pill
+                className='ml-2 d-flex danger mr-2'
+                style={{
+                  border: "2px solid black",
+                }}
+              >
                 <ImBin size={25} color='black' className='m-auto' />
               </Badge>{" "}
               <p className='m-auto' style={{ paddingLeft: "10px" }}>

frontend/src/pages/Library/components/Pagination.tsx

@@ -1,64 +0,0 @@
-import React, { useCallback } from "react";
-import { Pagination as BP } from "react-bootstrap";
-import { AiOutlineLeft, AiOutlineRight } from "react-icons/ai";
-import { useAuth } from "../../../shared/utils/useAuthentication";
-
-export const Pagination = ({
-  currentPage,
-  getPageCount,
-  setPageIndex,
-}: {
-  currentPage: number;
-  getPageCount: () => number;
-  setPageIndex: (index: number) => void;
-}): React.JSX.Element => {
-  const { authenticated } = useAuth();
-
-  const getPage = useCallback(
-    (n: number) => (
-      <BP.Item
-        key={`${n}th-page`}
-        active={n === currentPage}
-        onClick={() => setPageIndex(n)}
-      >
-        {n + 1}
-      </BP.Item>
-    ),
-    [setPageIndex, currentPage]
-  );
-
-  return (
-    <BP
-      className='d-flex'
-      style={{
-        marginLeft: "auto",
-        marginRight: authenticated ? "10px" : "auto",
-      }}
-    >
-      <BP.Item
-        key='prev'
-        disabled={currentPage === 0}
-        onClick={() => setPageIndex(currentPage - 1)}
-      >
-        <AiOutlineLeft />
-      </BP.Item>
-      {getPage(0)}
-      {currentPage > 3 && <BP.Ellipsis />}
-      {currentPage === 3 && getPage(currentPage - 2)}
-      {currentPage > 1 && getPage(currentPage - 1)}
-      {currentPage > 0 && getPage(currentPage)}
-      {currentPage < getPageCount() - 2 && getPage(currentPage + 1)}
-      {currentPage < getPageCount() - 3 && getPageCount() > 4 && (
-        <BP.Ellipsis />
-      )}
-      {currentPage < getPageCount() - 1 && getPage(getPageCount() - 1)}
-      <BP.Item
-        key='next'
-        onClick={() => setPageIndex(currentPage + 1)}
-        disabled={currentPage >= getPageCount() - 1}
-      >
-        <AiOutlineRight />
-      </BP.Item>
-    </BP>
-  );
-};

frontend/src/pages/Main/Main.tsx

@@ -13,6 +13,7 @@ import { TfiKey } from "react-icons/tfi";
 
 import { Link, useNavigate } from "react-router-dom";
 import { Book } from "../../types/Book";
+import { secondary } from "../../colors";
 import { useAuth } from "../../shared/utils/useAuthentication";
 import { ModalContext } from "../../App";
 import { modalTypes } from "../../shared/components/modals/types";
@@ -94,12 +95,16 @@ export const Main = (): React.JSX.Element => {
             onChange={(ev) => setTitle(ev.target.value)}
             style={{
               borderRadius: "20px 0px 0px 20px",
+              border: "2px solid black",
               borderRight: "none",
             }}
           />
           <Button
             style={{
               borderRadius: "0px 5px 5px 0px",
+              backgroundColor: secondary,
+              color: "black",
+              border: "2px solid black",
             }}
             className='mr-2'
             disabled={activeModal?.type === scanner || isFetching}
@@ -130,6 +135,9 @@ export const Main = (): React.JSX.Element => {
           <Button
             style={{
               borderRadius: "5px",
+              backgroundColor: secondary,
+              color: "black",
+              border: "2px solid black",
               marginLeft: "auto",
               marginRight: "10px",
             }}
@@ -143,6 +151,9 @@ export const Main = (): React.JSX.Element => {
           <Button
             style={{
               borderRadius: "5px",
+              backgroundColor: secondary,
+              color: "black",
+              border: "2px solid black",
               marginLeft: "auto",
               marginRight: "10px",
             }}
@@ -163,6 +174,9 @@ export const Main = (): React.JSX.Element => {
           <Button
             style={{
               borderRadius: "5px",
+              backgroundColor: secondary,
+              color: "black",
+              border: "2px solid black",
             }}
           >
             <ImBooks /> Browse library{" "}
@@ -172,6 +186,9 @@ export const Main = (): React.JSX.Element => {
           <Button
             style={{
               borderRadius: "5px",
+              backgroundColor: secondary,
+              color: "black",
+              border: "2px solid black",
               marginRight: "auto",
               marginLeft: "10px",
             }}

frontend/src/pages/Main/utils/tryDeutscheNationalBibliothekApi.ts

@@ -1,29 +0,0 @@
-import { XMLParser } from "fast-xml-parser";
-import { Book } from "../../../types/Book";
-
-export const tryDeutscheNationalBibliothekApi = async (
-  isbn: string
-): Promise<Pick<Book, "published" | "title"> | undefined> => {
-  const parser = new XMLParser();
-
-  const foundBooks = parser.parse(
-    await (
-      await fetch(
-        "https://services.dnb.de/sru/dnb?version=1.1&operation=searchRetrieve&query=" +
-          isbn
-      )
-    ).text()
-  );
-  const foundBook =
-    foundBooks.searchRetrieveResponse?.records?.record?.recordData?.[
-      "rdf:RDF"
-    ]?.["rdf:Description"];
-
-  if (!!foundBook) {
-    return {
-      published: foundBook["dcterms:issued"],
-      title: foundBook["dc:title"],
-    };
-  }
-  return undefined;
-};

frontend/src/pages/Main/utils/tryGoogleBooksApi.ts

@@ -1,16 +0,0 @@
-import { Book } from "../../../types/Book";
-
-export const tryGoogleBooksApi = async (
-  isbn: string
-): Promise<Pick<Book, "published" | "title"> | undefined> => {
-  const googleBooks = await (
-    await fetch("https://www.googleapis.com/books/v1/volumes?q=isbn:" + isbn)
-  ).json();
-  if ("items" in googleBooks) {
-    return {
-      published: googleBooks.items[0].volumeInfo.publishedDate.substring(0, 4),
-      title: googleBooks.items[0].volumeInfo.title,
-    };
-  }
-  return undefined;
-};

frontend/src/shared/components/modals/AuthenticationModal.tsx

@@ -2,6 +2,7 @@ import { useCallback, useContext } from "react";
 import { Button, Col, Form, Modal, Row } from "react-bootstrap";
 import { useForm, useWatch } from "react-hook-form";
 import { TfiKey } from "react-icons/tfi";
+import { primaryRGBA, primary, secondary } from "../../../colors";
 import { ModalHeader } from "./ModalHeader";
 import { AuthContext } from "../../../App";
 import { AuthModalProps } from "./types";
@@ -70,7 +71,12 @@ export const AuthenticationModal = ({
   );
 
   return (
-    <Modal show={open} onHide={onClose} centered>
+    <Modal
+      show={open}
+      onHide={onClose}
+      style={{ backgroundColor: primaryRGBA }}
+      centered
+    >
       <ModalHeader
         onClose={onClose}
         title={isUpdate ? "Set new Admin key" : "Admin Login"}
@@ -78,7 +84,9 @@ export const AuthenticationModal = ({
       />
       <Modal.Body
         style={{
+          border: "2px solid black",
           borderTop: "none",
+          backgroundColor: primary,
         }}
       >
         <Form
@@ -133,6 +141,9 @@ export const AuthenticationModal = ({
 
           {!isUpdate && (
             <Form.Group as={Row} className='mb-2'>
+              <Col sm='4'>
+                <Form.Label>Password</Form.Label>
+              </Col>
               <Col>
                 <Form.Control
                   {...register("password", {
@@ -155,6 +166,9 @@ export const AuthenticationModal = ({
             <Button
               style={{
                 borderRadius: "5px",
+                backgroundColor: secondary,
+                color: "black",
+                border: "2px solid black",
                 marginLeft: "auto",
                 marginRight: "10px",
               }}

frontend/src/shared/components/modals/BookModal.tsx

@@ -5,9 +5,8 @@ import { ModalHeader } from "./ModalHeader";
 import { useForm, useWatch } from "react-hook-form";
 import { Book, bookShelfs } from "../../../types/Book";
 import { useScanner } from "../../utils/useScanner";
+import { primary, primaryRGBA, secondary } from "../../../colors";
 import { BookModalProps } from "./types";
-import { tryGoogleBooksApi } from "../../../pages/Main/utils/tryGoogleBooksApi";
-import { tryDeutscheNationalBibliothekApi } from "../../../pages/Main/utils/tryDeutscheNationalBibliothekApi";
 
 type BookForm = Pick<Book, "isbn" | "title" | "shelf" | "published">;
 
@@ -29,33 +28,24 @@ export const BookModal = ({
     reset(book);
   }, [book, reset]);
 
-  const [processingDetection, setProcessingDetection] = useState(false);
-
-  const onDetected = useCallback(
-    async (result: string) => {
-      if (!processingDetection) {
-        setProcessingDetection(true);
-        const apiResponses = (
-          await Promise.all([
-            tryDeutscheNationalBibliothekApi(result),
-            tryGoogleBooksApi(result),
-          ])
-        ).filter((b) => !!b) as Pick<Book, "published" | "title">[];
-        if (apiResponses.length) {
-          Object.entries(apiResponses[0]).forEach(([key, value]) => {
-            setValue(key as keyof BookForm, value);
-          });
-        }
-        setValue("isbn", result);
-        setShowScanner(false);
-        setProcessingDetection(false);
-      }
-    },
-    [processingDetection, setValue]
-  );
-
   const { scannerError, setScannerRef } = useScanner({
-    onDetected,
+    onDetected: async (result) => {
+      const googleBooks = await (
+        await fetch(
+          "https://www.googleapis.com/books/v1/volumes?q=isbn:" + result
+        )
+      ).json();
+      if ("items" in googleBooks) {
+        console.log(googleBooks);
+        setValue(
+          "published",
+          googleBooks.items[0].volumeInfo.publishedDate.substring(0, 4)
+        );
+        setValue("title", googleBooks.items[0].volumeInfo.title);
+      }
+      setValue("isbn", result);
+      setShowScanner(false);
+    },
   });
 
   const values = useWatch({ control });
@@ -104,7 +94,12 @@ export const BookModal = ({
   );
 
   return (
-    <Modal show={open} onHide={onClose} centered>
+    <Modal
+      show={open}
+      onHide={onClose}
+      style={{ backgroundColor: primaryRGBA }}
+      centered
+    >
       <ModalHeader
         onClose={onClose}
         title={`${!!book ? "Edit" : "Add new"} Book`}
@@ -112,7 +107,9 @@ export const BookModal = ({
       />
       <Modal.Body
         style={{
+          border: "2px solid black",
           borderTop: "none",
+          backgroundColor: primary,
         }}
       >
         {!showScanner && (
@@ -139,6 +136,9 @@ export const BookModal = ({
                   <Button
                     style={{
                       borderRadius: "0px 5px 5px 0px",
+                      backgroundColor: secondary,
+                      color: "black",
+                      border: "2px solid black",
                     }}
                     className='mr-2 pt-0'
                     disabled={showScanner}
@@ -237,6 +237,9 @@ export const BookModal = ({
               <Button
                 style={{
                   borderRadius: "5px",
+                  backgroundColor: secondary,
+                  color: "black",
+                  border: "2px solid black",
                   marginLeft: "auto",
                   marginRight: "10px",
                 }}
@@ -257,6 +260,7 @@ export const BookModal = ({
               className='drawingBuffer w-100 position-absolute'
               style={{
                 height: "100%",
+                border: "2px solid black",
               }}
             />
           </div>

frontend/src/shared/components/modals/CheckoutModal.tsx

@@ -1,11 +1,12 @@
 import React, { useCallback, useState } from "react";
 import { Alert, Button, Col, Form, Modal, Row } from "react-bootstrap";
-import { useForm, useWatch } from "react-hook-form";
-import { AiOutlineExclamationCircle } from "react-icons/ai";
 import { ImBoxAdd, ImBoxRemove } from "react-icons/im";
+import { useForm, useWatch } from "react-hook-form";
 import { Book } from "../../../types/Book";
+import { primary, primaryRGBA, secondary } from "../../../colors";
 import { ModalHeader } from "./ModalHeader";
 import { CheckoutBookModalProps } from "./types";
+import { AiOutlineExclamationCircle } from "react-icons/ai";
 
 type BookCheckoutForm = Pick<Book, "checkoutBy" | "contact">;
 
@@ -29,9 +30,6 @@ export const CheckoutBookModal = ({
 
   const onSubmit = useCallback(
     async (data: Partial<BookCheckoutForm>) => {
-      if (!formState.isValid) {
-        return;
-      }
       if (!data.checkoutBy) {
         setError("checkoutBy", {
           message: `please enter ${
@@ -63,11 +61,16 @@ export const CheckoutBookModal = ({
         setFailed(await res.text());
       }
     },
-    [formState.isValid, isChechout, uuid, setError, onClose]
+    [uuid, onClose, setError, isChechout]
   );
 
   return (
-    <Modal show={open} onHide={onClose} centered>
+    <Modal
+      show={open}
+      onHide={onClose}
+      style={{ backgroundColor: primaryRGBA }}
+      centered
+    >
       <ModalHeader
         onClose={onClose}
         title={`${isChechout ? "Checkout" : "Return"} book '${title}'`}
@@ -81,7 +84,9 @@ export const CheckoutBookModal = ({
       />
       <Modal.Body
         style={{
+          border: "2px solid black",
           borderTop: "none",
+          backgroundColor: primary,
         }}
       >
         <Alert className='w-80 m-auto my-4' variant='warning'>
@@ -111,12 +116,6 @@ export const CheckoutBookModal = ({
                         "'null' is not a valid nickname"
                       );
                     },
-                    notUndefinedString: (value) => {
-                      return (
-                        value?.toLocaleLowerCase() !== "undefined" ||
-                        "'undefined' is not a valid nickname"
-                      );
-                    },
                   },
                 })}
                 isInvalid={!!formState.errors.checkoutBy}
@@ -179,10 +178,12 @@ export const CheckoutBookModal = ({
             <Button
               style={{
                 borderRadius: "5px",
+                backgroundColor: secondary,
+                color: "black",
+                border: "2px solid black",
                 marginLeft: "auto",
                 marginRight: "10px",
               }}
-              disabled={!formState.isValid}
               onClick={() => onSubmit(values)}
             >
               {`${isChechout ? "Checkout" : "Return"} book`}

frontend/src/shared/components/modals/DeleteBookModal.tsx

@@ -1,12 +1,12 @@
-import { useMutation } from "@tanstack/react-query";
 import { Button, Modal } from "react-bootstrap";
-import { ImBin } from "react-icons/im";
+import { primary, primaryRGBA, secondary } from "../../../colors";
 import { ModalHeader } from "./ModalHeader";
+import { ImBin } from "react-icons/im";
+import { useMutation } from "@tanstack/react-query";
 import { DeleteBookModalProps } from "./types";
 
 export const DeleteBookModal = ({
   uuid,
-  title,
   open,
   onClose,
 }: Omit<DeleteBookModalProps, "type">): React.JSX.Element => {
@@ -24,22 +24,31 @@ export const DeleteBookModal = ({
   });
 
   return (
-    <Modal show={open} onHide={onClose} centered>
+    <Modal
+      show={open}
+      onHide={onClose}
+      style={{ backgroundColor: primaryRGBA }}
+      centered
+    >
       <ModalHeader
         onClose={onClose}
-        title={`Delete Book "${title}"`}
+        title={"Move to Shelf"}
         icon={<ImBin size={50} className='ml-0 mr-auto' />}
       />
       <Modal.Body
         style={{
+          border: "2px solid black",
           borderTop: "none",
+          backgroundColor: primary,
         }}
       >
-        Do you really want to delete this book?
         <div className='d-flex mx-auto mb-auto mt-2 w-100'>
           <Button
             style={{
               borderRadius: "5px",
+              backgroundColor: secondary,
+              color: "black",
+              border: "2px solid black",
               marginLeft: "auto",
               marginRight: "10px",
             }}
@@ -50,6 +59,9 @@ export const DeleteBookModal = ({
           <Button
             style={{
               borderRadius: "5px",
+              backgroundColor: secondary,
+              color: "black",
+              border: "2px solid black",
               marginLeft: "auto",
               marginRight: "10px",
             }}

frontend/src/shared/components/modals/ModalHeader.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Button, Modal } from "react-bootstrap";
 import { AiOutlineClose } from "react-icons/ai";
+import { primary, secondary } from "../../../colors";
 
 export const ModalHeader = ({
   title,
@@ -12,7 +13,13 @@ export const ModalHeader = ({
   icon?: JSX.Element;
 }): React.JSX.Element => {
   return (
-    <Modal.Header>
+    <Modal.Header
+      style={{
+        border: "2px solid black",
+        borderBottom: "none",
+        backgroundColor: primary,
+      }}
+    >
       <Modal.Title className='w-100 d-flex' style={{ height: "fit-content" }}>
         {typeof title === "string" ? (
           <>
@@ -27,6 +34,9 @@ export const ModalHeader = ({
         <Button
           className='ml-auto mr-0'
           style={{
+            backgroundColor: secondary,
+            color: "black",
+            border: "2px solid black",
             width: "fit-content",
             height: "fit-content",
           }}

frontend/src/shared/components/modals/Modals.tsx

@@ -6,9 +6,8 @@ import { CheckoutBookModal } from "./CheckoutModal";
 import { ScannerModal } from "./ScannerModal";
 import { DeleteBookModal } from "./DeleteBookModal";
 import { ModalContextType } from "../../../App";
-import { MoveShelfModal } from "./MoveShelfModal";
 
-const { auth, book, checkout, scanner, del, moveShelf } = modalTypes;
+const { auth, book, checkout, scanner, del } = modalTypes;
 
 export const ModalSelector = ({
   activeModal,
@@ -49,15 +48,7 @@ export const ModalSelector = ({
     <DeleteBookModal
       open={activeModal?.type === del}
       onClose={activeModal?.type === del ? activeModal.onClose : setActiveModal}
-      uuid={activeModal?.type === del ? activeModal.uuid : ""}
-      title={activeModal?.type === del ? activeModal.title : ""}
-    />
-    <MoveShelfModal
-      books={activeModal?.type === moveShelf ? activeModal.books : []}
-      open={activeModal?.type === moveShelf}
-      onClose={
-        activeModal?.type === moveShelf ? activeModal.onClose : setActiveModal
-      }
+      uuid={activeModal?.type === checkout ? activeModal.uuid : ""}
     />
   </>
 );

frontend/src/shared/components/modals/MoveShelfModal.tsx

@@ -1,100 +0,0 @@
-import { useMutation } from "@tanstack/react-query";
-import { Button, Col, Form, Modal, Row } from "react-bootstrap";
-import { ImBook } from "react-icons/im";
-import { ModalHeader } from "./ModalHeader";
-import { MoveShelfAction, MoveShelfModalProps } from "./types";
-import { useForm, useWatch } from "react-hook-form";
-import { bookShelfs } from "../../../types/Book";
-
-export const MoveShelfModal = ({
-  books,
-  open,
-  onClose,
-}: Omit<MoveShelfModalProps, "type">): React.JSX.Element => {
-  const { control, register, formState, setError } = useForm<MoveShelfAction>({
-    mode: "onChange",
-  });
-
-  const values = useWatch({ control });
-
-  const { mutate: mv } = useMutation({
-    mutationFn: async () => {
-      if (!values.target) {
-        setError("target", { message: "Taget shelf is required" });
-        return;
-      }
-
-      await fetch(`/api/shelf/move`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ ...values, books }),
-      });
-      onClose();
-    },
-  });
-
-  return (
-    <Modal show={open} onHide={onClose} centered>
-      <ModalHeader
-        onClose={onClose}
-        title={"Move to Shelf"}
-        icon={<ImBook size={50} className='ml-0 mr-auto' />}
-      />
-      <Modal.Body
-        style={{
-          borderTop: "none",
-        }}
-      >
-        <Form.Group as={Row} className='mb-2'>
-          <Col sm='2'>
-            <Form.Label>Shelf</Form.Label>
-          </Col>
-          <Col>
-            <Form.Select
-              {...register("target", { required: true })}
-              isInvalid={!!formState.errors.target}
-            >
-              {Object.keys(bookShelfs).map((key) => (
-                <option
-                  key='key'
-                  value={bookShelfs[key as keyof typeof bookShelfs]}
-                >
-                  {key}
-                </option>
-              ))}
-            </Form.Select>
-            <Form.Control.Feedback type='invalid'>
-              {!values.target
-                ? "Target shelf is required"
-                : formState.errors.target?.message}
-            </Form.Control.Feedback>
-          </Col>
-        </Form.Group>
-        <div className='d-flex mx-auto mb-auto mt-2 w-100'>
-          <Button
-            style={{
-              borderRadius: "5px",
-              marginLeft: "auto",
-              marginRight: "10px",
-            }}
-            onClick={() => onClose()}
-          >
-            Cancel
-          </Button>
-          <Button
-            style={{
-              borderRadius: "5px",
-              marginLeft: "0px",
-              marginRight: "10px",
-            }}
-            onClick={() => mv()}
-          >
-            Move
-          </Button>
-        </div>
-      </Modal.Body>
-    </Modal>
-  );
-};

frontend/src/shared/components/modals/ScannerModal.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Modal } from "react-bootstrap";
 import { ImCamera } from "react-icons/im";
+import { primaryRGBA } from "../../../colors";
 import { useScanner } from "../../utils/useScanner";
 import { ModalHeader } from "./ModalHeader";
 
@@ -16,13 +17,18 @@ export const ScannerModal = ({
   const { scannerError, setScannerRef } = useScanner({ onDetected });
 
   return (
-    <Modal show={open} onHide={onClose} centered>
+    <Modal
+      show={open}
+      onHide={onClose}
+      style={{ backgroundColor: primaryRGBA }}
+      centered
+    >
       <ModalHeader
         onClose={onClose}
         title={"Scan barcode"}
         icon={<ImCamera size={50} className='ml-0 mr-auto' />}
       />
-      <Modal.Body>
+      <Modal.Body style={{ border: "2px solid black", borderTop: "none" }}>
         <div
           className='w-100 overflow-hidden'
           ref={(ref) => setScannerRef(ref)}
@@ -35,7 +41,7 @@ export const ScannerModal = ({
             className='drawingBuffer w-100 position-absolute'
             style={{
               height: "100%",
-              border: `2px solid black`,
+              border: "2px solid black",
             }}
           />
         </div>

frontend/src/shared/components/modals/types.ts

@@ -11,7 +11,6 @@ export const modalTypes = {
   checkout: "checkout",
   scanner: "scanner",
   del: "del",
-  moveShelf: "moveShelf",
 } as const;
 
 export type ModalTypes = keyof typeof modalTypes;
@@ -38,21 +37,11 @@ export type ScannnerModal = {
 } & BaseModalProps;
 
 export type DeleteBookModalProps = { type: "del" } & BaseModalProps &
-  Pick<Book, "uuid" | "title">;
-
-export type MoveShelfModalProps = { type: "moveShelf" } & BaseModalProps & {
-    books: Book["uuid"][];
-  };
-
-export interface MoveShelfAction {
-  target: Book["shelf"];
-  books: Book["uuid"][];
-}
+  Pick<Book, "uuid">;
 
 export type ActiveModalProps =
   | Omit<AuthModalProps, "open" | "onClose">
   | Omit<BookModalProps, "open">
   | Omit<CheckoutBookModalProps, "open">
   | Omit<ScannnerModal, "open" | "onClose">
-  | Omit<DeleteBookModalProps, "open">
-  | Omit<MoveShelfModalProps, "open">;
+  | Omit<DeleteBookModalProps, "open">;

frontend/src/shared/utils/useScanner.ts

@@ -103,25 +103,15 @@ export const useScanner = ({
   };
 
   const getCameraId = useCallback(async () => {
-    const stream = await navigator.mediaDevices.getUserMedia({
-      video: { facingMode: "environment" },
+    await navigator.mediaDevices.getUserMedia({
+      video: true,
     });
 
-    if (
-      stream &&
-      stream.getVideoTracks().length &&
-      stream.getVideoTracks()[0].getSettings().deviceId
-    ) {
-      return stream.getVideoTracks()[0].getSettings().deviceId;
-    }
-
     const devices = await navigator.mediaDevices
       .enumerateDevices()
       .then((ds) => ds.filter((d) => d.kind === "videoinput"));
 
-    const back = devices.filter((d) =>
-      d.label.toLowerCase().includes("back")
-    )[0];
+    const back = devices.filter((d) => d.label === "Back Camera")[0];
 
     return !back ? devices[0].deviceId : back.deviceId;
   }, []);

middleware/index.ts

@@ -2,7 +2,7 @@ import express, { Request, Response, Application } from "express";
 import dotenv from "dotenv";
 
 import { createPool } from "mariadb";
-import { Book, MoveShelfAction } from "./types/Book";
+import { Book } from "./types/Book";
 import {
   checkoutBook,
   findBook,
@@ -19,7 +19,6 @@ import session from "express-session";
 import { censorBookData } from "./utils/censorBookData";
 import * as fs from "fs";
 import { checkForThreads } from "./utils/passesSQLInjectionCheck";
-import { moveShelf } from "./queries/moveShelf";
 
 dotenv.config();
 
@@ -200,31 +199,6 @@ app.post(
   }
 );
 
-app.post(
-  "/api/shelf/move",
-  async (
-    req: Request<undefined, undefined, MoveShelfAction>,
-    res: Response
-  ) => {
-    await isAuthenticated(req, res, async () => {
-      const { target } = req.body;
-      try {
-        const containsThread = checkForThreads([target], res);
-        if (containsThread) {
-          return;
-        }
-
-        const conn = await pool.getConnection();
-        await conn.query(moveShelf(req.body));
-        await conn.end();
-        res.status(200).send(`Books moved to shelf ${target}.`);
-      } catch (error) {
-        res.status(500).send("Internal Server Error: " + error);
-      }
-    });
-  }
-);
-
 app.post(
   "/api/books/edit",
   async (
@@ -256,7 +230,7 @@ app.post(
         } else {
           await conn.query(editBook(req.body));
           await conn.end();
-          res.status(200).send("Book edited.");
+          res.status(200).send("Book moved to shelf");
         }
       } catch (error) {
         res.status(500).send("Internal Server Error: " + error);

middleware/queries/moveShelf.ts

@@ -1,6 +0,0 @@
-import { MoveShelfAction } from "../types/Book";
-
-export const moveShelf = ({ target, books }: MoveShelfAction) =>
-  `UPDATE bookData SET shelf='${target}' WHERE uuid IN ('${books.join(
-    "', '"
-  )}');`;

middleware/types/Book.ts

@@ -9,8 +9,3 @@ export type Book = {
   contact: string | null;
   shelf: "AVAILABLE" | "FNORD1" | "FNORD2" | "SHARING" | null;
 };
-
-export interface MoveShelfAction {
-  target: Book["shelf"];
-  books: Book["uuid"][];
-}