add project files

back/Dockerfile

@@ -0,0 +1,11 @@
+FROM python:3.10
+
+WORKDIR /code
+
+COPY back/requirements.txt /code/requirements.txt
+
+RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+
+COPY back/ /code/
+
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000", "--proxy-headers"]

back/Pipfile

@@ -0,0 +1,17 @@
+[[source]]
+url = "https://pypi.org/simple"
+verify_ssl = true
+name = "pypi"
+
+[packages]
+fastapi = {extras = ["all"], version = "*"}
+python-jose = "*"
+passlib = {extras = ["bcrypt"], version = "*"}
+uvicorn = {extras = ["standard"], version = "*"}
+python-pam = "*"
+pymysql = "*"
+
+[dev-packages]
+
+[requires]
+python_version = "3.9"

back/crud.py

@@ -0,0 +1,188 @@
+from database import connection
+
+def get_books(page, limit=50, order="Auteur", search=""):
+    """
+    :param limit: Item limit
+    :type limit: int 
+    :param page: current page
+    :type page: int 
+    :param order: Book fields are : Auteur, Titre, Editeur, Type
+    :type order: str
+    """
+    cursor = connection.cursor()
+    connection.ping(reconnect=True)
+    if search == "":
+        t = f"""
+            SELECT * from Books order by %s asc LIMIT %s OFFSET %s;
+        """
+        nb = f"""
+            SELECT COUNT(*) as count from Books order by %s asc;
+        """
+        try:
+            cursor.execute(t, (order, limit, limit * page))
+            r = cursor.fetchall()
+            cursor.execute(nb, (order))
+            n = cursor.fetchall()
+        except Exception as e:
+            print(e)
+            return False
+    else:
+        search = search.replace(' ', ', ')
+        t = f"""
+            SELECT * FROM `Books` 
+            WHERE `Titre` LIKE %s
+            OR `Auteur` LIKE %s
+            OR `Editeur` LIKE %s
+            OR `Type` LIKE %s
+            ORDER BY %s asc LIMIT %s OFFSET %s;
+        """
+        nb = f"""
+            SELECT COUNT(*) as count from `Books` 
+            WHERE `Titre` LIKE %s
+            OR `Auteur` LIKE %s
+            OR `Editeur` LIKE %s
+            OR `Type` LIKE %s
+            ORDER BY %s asc;
+        """
+        try:
+            cursor.execute(t, (f'%{search}%', f'%{search}%', f'%{search}%', f'%{search}%', order, limit, limit * page))
+            r = cursor.fetchall()
+            cursor.execute(nb, (f'%{search}%', f'%{search}%', f'%{search}%', f'%{search}%', order))
+            n = cursor.fetchall()
+        except Exception as e:
+            print(e)
+            return False
+    return r, n
+
+def remove_book(id):
+    cursor = connection.cursor()
+    connection.ping(reconnect=True)
+    t = f"""
+        DELETE FROM Books where biblio_Index=%s;
+    """
+    try:
+        cursor.execute(t, (id))
+    except:
+        return False
+    connection.commit()
+    return True
+
+def edit_book(id, newContent):
+    """
+    :param id: item to update
+    :type id: str
+    :param newContent: New values to update
+    :type newContent: dict
+    """
+    cursor = connection.cursor()
+    connection.ping(reconnect=True)
+    t = f"""
+        UPDATE Books 
+        SET Auteur=%s, Titre=%s, Editeur=%s, Type=%s
+        WHERE biblio_Index=%s;
+    """
+    try:
+        cursor.execute(t, (newContent['author'], newContent['title'], newContent['editor'], newContent['type'], id))
+    except:
+        return False
+    connection.commit()
+    return True    
+
+def add_book(newContent):
+    """
+    :param newContent: New values to add
+    :type newContent: dict
+    """
+    connection.ping(reconnect=True)
+    cursor = connection.cursor()
+    t = f"""
+        INSERT INTO Books (Auteur, Titre, Editeur, Type)
+        VALUES (%s, %s, %s, %s);
+    """
+    try:
+        cursor.execute(t, (newContent['author'], newContent['title'], newContent['editor'], newContent['type']))
+    except:
+        return False
+    connection.commit()
+    return True
+
+def add_film(newContent):
+    connection.ping(reconnect=True)
+    cursor = connection.cursor()
+    t = f"""
+        INSERT INTO Films (Title, Director, Producer, Actors, Length, Type)
+        VALUES (%s, %s, %s, %s, %s, %s);
+    """
+    try:
+        cursor.execute(t, (newContent['title'], newContent['director'], newContent['producer'], newContent['actors'], newContent['length'], newContent['type']))
+    except:
+        return False
+    connection.commit()
+    return True
+
+def remove_film(id):
+    cursor = connection.cursor()
+    t = f"""
+        DELETE FROM Films where Number=%s;
+    """
+    try:
+        cursor.execute(t, (id))
+    except:
+        return False
+    connection.commit()
+    return True
+
+def edit_film(id, newContent):
+    connection.ping(reconnect=True)
+    cursor = connection.cursor()
+    t = f"""
+        UPDATE Films 
+        SET Title=%s, Director=%s, Producer=%s, Actors=%s, Length=%s, Type=%s
+        WHERE Number=%s;
+    """
+    try:
+        cursor.execute(t, (newContent['title'], newContent['director'], newContent['producer'], newContent['actors'], newContent['length'], newContent['type'], id))
+    except:
+        return False
+    connection.commit()
+    return True
+
+def get_films(page, limit=50, order="Director"):
+    connection.ping(reconnect=True)
+    cursor = connection.cursor()
+    t = f"""
+        SELECT * from Films order by %s asc LIMIT %s OFFSET %s;
+    """
+    try:
+        cursor.execute(t, (order, limit, limit * page))
+    except:
+        return False
+    return cursor.fetchall()
+
+def get_field_values(table, field):
+    connection.ping(reconnect=True)
+    cursor = connection.cursor()
+    t = f"""
+        SELECT DISTINCT {field} FROM {table} ORDER BY {field} asc;
+    """
+    try:
+        cursor.execute(t)
+    except Exception as e:
+        print(e)
+        return False
+    res = cursor.fetchall()
+    return [a[field] for a in res]
+
+def get_user(username):
+    connection.ping(reconnect=True)
+    cursor = connection.cursor()
+    t = f"""
+        SELECT * from Users WHERE username=%s;
+    """
+    try:
+        cursor.execute(t, (username))
+    except Exception as e:
+        print(e)
+        return False
+    res = cursor.fetchall()
+    return res

back/database.py

@@ -0,0 +1,17 @@
+from secret import host, user, password, database
+
+import pymysql.cursors
+
+connection = pymysql.connect(
+    host=host,
+    user=user,
+    password=password,
+    database=database,
+    charset='utf8mb4',
+    cursorclass=pymysql.cursors.DictCursor
+)
+
+cursor = connection.cursor()
+# cursor.execute(sql, ())
+# cursor.fetchall()
+# connection.commit()

back/main.py

@@ -0,0 +1,226 @@
+from fastapi import Depends, FastAPI, HTTPException, Response
+from fastapi.responses import JSONResponse
+from fastapi.security import OAuth2PasswordBearer, OAuth2PasswordRequestForm
+from fastapi.middleware.cors import CORSMiddleware
+
+import json
+from typing import Optional
+from crud import get_books, remove_book, edit_book, add_book, get_films, remove_film, edit_film, add_film, get_field_values, get_user
+from pydantic import BaseModel
+from passlib.context import CryptContext
+from secret import SECRET_KEY, ALGORITHM, ACCESS_TOKEN_EXPIRE_MINUTES, origins
+from datetime import datetime, timedelta
+from jose import JWTError, jwt
+
+class TokenData(BaseModel):
+    username: Optional[str] = None
+
+class Token(BaseModel):
+    access_token: str
+    token_type: str
+
+class Book(BaseModel):
+    title: str
+    author: str
+    type: str
+    editor: str
+
+class Film(BaseModel):
+    title: str
+    actors: str
+    director: str
+    type: str
+    producer: str
+    length: int
+
+app = FastAPI()
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=origins,
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+    expose_headers=['x-nbpage']
+)
+
+oauth2_scheme = OAuth2PasswordBearer(tokenUrl="token")
+
+pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")
+
+def verify_password(plain_password, hashed_password):
+    return pwd_context.verify(plain_password, hashed_password)
+
+def get_password_hash(password):
+    return pwd_context.hash(password)
+
+def authenticate_user(name, password):
+    user = get_user(name)
+    if len(user) == 0:
+        return False
+    if verify_password(password, user[0]['password']):
+        return True
+    return False
+
+async def get_current_user(token: str = Depends(oauth2_scheme)):
+    try:
+        payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM])
+        username: str = payload.get("sub")
+        if username is None:
+            raise HTTPException(
+                status_code=401,
+                detail="Could not validate credentials",
+                headers={"WWW-Authenticate": "Bearer"},
+            )
+        token_data = TokenData(username=username)
+    except JWTError:
+        raise HTTPException(
+        status_code=401,
+        detail="Could not validate credentials",
+        headers={"WWW-Authenticate": "Bearer"},
+    ) 
+    return {'username': username}
+
+def create_access_token(data: dict, expires_delta: Optional[timedelta] = None):
+    to_encode = data.copy()
+    if expires_delta:
+        expire = datetime.utcnow() + expires_delta
+    else:
+        expire = datetime.utcnow() + timedelta(minutes=15)
+    to_encode.update({"exp": expire})
+    encoded_jwt = jwt.encode(to_encode, SECRET_KEY, algorithm=ALGORITHM)
+    return encoded_jwt
+
+@app.post("/api/token", response_model=Token)
+async def login_for_access_token(form_data: OAuth2PasswordRequestForm = Depends()):
+    user = authenticate_user(form_data.username, form_data.password)
+    username = form_data.username
+    if not user:
+        raise HTTPException(
+            status_code=401,
+            detail="Incorrect username or password",
+            headers={"WWW-Authenticate": "Bearer"},
+        )
+    access_token_expires = timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES)
+    access_token = create_access_token(
+        data={"sub": username}, expires_delta=access_token_expires
+    )
+    return JSONResponse(content={"access_token": access_token, "token_type": "bearer"})
+
+@app.post('/api/books')
+async def createBook(book: Book, current_user: dict = Depends(get_current_user)):
+    if not current_user:
+        raise HTTPException(status_code=401, detail="User not allowed")
+    res = add_book({
+        'author': book.author,
+        'title': book.title,
+        'type': book.type,
+        'editor': book.editor
+    })
+    if res == None:
+        raise HTTPException(status_code=400, detail="Badly formated body")
+    return res
+
+@app.get('/api/books')
+async def readBook(page: int = 0, limit: int = 50, sort: str = "", search: str = "", current_user: dict = Depends(get_current_user)):
+    if not current_user:
+        raise HTTPException(status_code=401, detail="User not allowed")
+    res, nb = get_books(page, limit=limit, search=search)   
+    if res is False or not nb:
+        raise HTTPException(status_code=400, detail="Badly formated")
+    header = {'x-nbpage': str(int(nb[0]['count'] / limit))}
+    content = {'result': [dict(r) for r in res]}
+    return JSONResponse(content=content, headers=header)
+
+@app.put('/api/book/{id}')
+async def updateBook(id: str, book: Book, current_user: dict = Depends(get_current_user)):
+    if not current_user:
+        raise HTTPException(status_code=401, detail="User not allowed")
+    res = edit_book(id, {
+        'author': book.author,
+        'title': book.title,
+        'type': book.type,
+        'editor': book.editor
+    })
+    if res == None:
+        raise HTTPException(status_code=400, detail="Badly formated body")
+    return res
+
+@app.delete('/api/book/{id}')
+async def deleteBook(id: str, current_user: dict = Depends(get_current_user)):
+    if not current_user:
+        raise HTTPException(status_code=401, detail="User not allowed")
+    res = remove_book(id)
+    _, nb = get_books(0)
+    header = {'x-nbpage': str(int(nb[0]['count'] / 50))}
+    if res == None:
+        raise HTTPException(status_code=400, detail="Badly formated body")
+    return JSONResponse(content=res, headers=header)
+
+@app.post('/api/films')
+async def createFilm(current_user: dict = Depends(get_current_user)):
+    if not current_user:
+        raise HTTPException(status_code=401, detail="User not allowed")
+    res = add_film({
+        'title': film.title,
+        'director': film.director,
+        'producer': film.producer,
+        'actors': film.actors,
+        'length': film.length,
+        'type': film.type
+    })
+    if res == None:
+        raise HTTPException(status_code=400, detail="Badly formated body")
+    return res
+
+@app.get('/api/films')
+async def readFilm(page: int = 0, limit: int = 50, current_user: dict = Depends(get_current_user)):
+    if not current_user:
+        raise HTTPException(status_code=401, detail="User not allowed")
+    res = get_films(page, limit=limit)
+    if res == None:
+        raise HTTPException(status_code=400, detail="Badly formated body")
+    return res
+
+@app.put('/api/film/{id}')
+async def updateFilm(id: str, film: Film, current_user: dict = Depends(get_current_user)):
+    if not current_user:
+        raise HTTPException(status_code=401, detail="User not allowed")
+    res = edit_film(id, {
+        'title': film.title,
+        'director': film.director,
+        'producer': film.producer,
+        'actors': film.actors,
+        'length': film.length,
+        'type': film.type
+    })
+    if res == None:
+        raise HTTPException(status_code=400, detail="Badly formated body")
+    return res
+
+@app.delete('/api/film/{id}')
+async def deleteFilm(id: str, current_user: dict = Depends(get_current_user)):
+    if not current_user:
+        raise HTTPException(status_code=401, detail="User not allowed")
+    res = remove_film(id)
+    if res == None:
+        raise HTTPException(status_code=400, detail="Badly formated body")
+    return res
+
+@app.get('/api/books/{field}')
+async def getBookFields(field: str, current_user: dict = Depends(get_current_user)):
+    if not current_user:
+        raise HTTPException(status_code=401, detail="User not allowed")
+    if field == "":
+        raise HTTPException(status_code=400, detail="Badly formated body")
+    res = get_field_values('Books', field)
+    return res
+
+@app.get('/api/films/{field}')
+async def getFilmFields(field: str, current_user: dict = Depends(get_current_user)):
+    if not current_user:
+        raise HTTPException(status_code=401, detail="User not allowed")
+    if field == "":
+        raise HTTPException(status_code=400, detail="Badly formated body")
+    res = get_field_values('Films', field)
+    return res

back/requirements.txt

@@ -0,0 +1,37 @@
+anyio==3.6.1
+bcrypt==4.0.0
+certifi==2022.9.24
+charset-normalizer==2.1.1
+click==8.1.3
+dnspython==2.2.1
+ecdsa==0.18.0
+email-validator==1.3.0
+fastapi==0.85.0
+h11==0.14.0
+httptools==0.5.0
+idna==3.4
+itsdangerous==2.1.2
+Jinja2==3.1.2
+MarkupSafe==2.1.1
+orjson==3.8.0
+passlib==1.7.4
+pyasn1==0.4.8
+pydantic==1.10.2
+PyMySQL==1.0.2
+python-dotenv==0.21.0
+python-jose==3.3.0
+python-multipart==0.0.5
+python-pam==2.0.2
+PyYAML==6.0
+requests==2.28.1
+rsa==4.9
+six==1.16.0
+sniffio==1.3.0
+starlette==0.20.4
+typing_extensions==4.3.0
+ujson==5.5.0
+urllib3==1.26.12
+uvicorn==0.18.3
+uvloop==0.17.0
+watchfiles==0.17.0
+websockets==10.3

back/secret.py

@@ -0,0 +1,15 @@
+import os
+
+origins = [
+    os.environ['ORIGIN']
+]
+
+host = os.environ['DB_HOST']
+user = os.environ['DB_USER']
+password = os.environ['DB_PASS']
+database = os.environ['DB_NAME']
+
+# openssl rand -hex 32
+SECRET_KEY = os.environ['SECRET_KEY']
+ALGORITHM = 'HS256'
+ACCESS_TOKEN_EXPIRE_MINUTES = 30

front/Dockerfile

@@ -0,0 +1,17 @@
+FROM node:19.1-alpine AS build
+
+WORKDIR /app
+
+COPY front/package.json front/package-lock.json /app/
+RUN npm install
+
+COPY front/ .
+
+RUN npm run build
+
+FROM nginx:latest
+
+COPY --from=build /app/dist /srv/www/bookshelf
+
+RUN rm /etc/nginx/conf.d/default.conf
+COPY --from=build /app/nginx/default.conf /etc/nginx/conf.d/default.conf

front/README.md

@@ -0,0 +1,24 @@
+# front
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

front/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

front/jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

front/nginx/default.conf

@@ -0,0 +1,26 @@
+server {
+    listen 80 default_server;
+    listen [::]:80 default_server;
+
+    server_name         localhost;
+    root                /srv/www/bookshelf;
+	index				index.html;
+
+    location / {
+        try_files $uri /index.html;
+    }
+
+    location /api/ {
+        proxy_set_header Host $http_host;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+
+        proxy_redirect off;
+        proxy_buffering off;
+        proxy_pass http://backend;
+    }
+}
+
+upstream backend {
+    server back:8000;
+}

front/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "front",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "core-js": "^3.8.3",
+    "vue": "^3.2.13",
+    "vue-router": "^4.0.14",
+    "vuex": "^4.0.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
+}

front/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <script src="https://kit.fontawesome.com/08db035529.js" crossorigin="anonymous"></script>
+    <title>Aldon's Home</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but Aldon's Home doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+  </body>
+</html>

front/src/App.vue

@@ -0,0 +1,192 @@
+<template>
+<div>
+  <nav class="header">
+    <router-link class="router" to="/">Home</router-link>
+    <router-link class="router" to="/about">About</router-link>
+    <router-link class="router" to="/films">Film library</router-link>
+    <router-link class="router" to="/books">Book library</router-link>
+    <router-link v-if="!$store.state.token" class="router" to="/login">Login</router-link>
+    <a class="router" v-else @click="logout">Log out</a>
+  </nav>
+  <router-view class="view"/>
+</div>
+</template>
+
+<script>
+import { routerLink, routerView} from 'vue-router';
+
+export default {
+  name: 'App',
+  components: {
+    routerLink,
+    routerView
+  },
+  beforeMount() {
+    let token = localStorage.getItem('token')
+    if (token) {
+      this.$store.state.token = localStorage.getItem('token')
+    }
+    else {
+      this.$store.state.token = ""
+      this.$router.push('/login')
+    }
+    this.$store.dispatch('getBooks', {page: 0, search: "", order: ""})
+    this.$store.dispatch('getFilms', {page: 0, search: "", order: ""})
+  }, 
+  methods: {
+    logout() {
+      this.$store.dispatch('logout')
+      this.$router.push('/login')
+    }
+  }
+}
+</script>
+
+<style>
+.red {
+  background-color: rgba(222, 22, 86); 
+  color: #fff;
+}
+
+.red:hover {
+  background-color: rgba(150, 22, 86); 
+}
+
+.green {
+  background-color: rgba(22, 222, 86); 
+}
+
+.green:hover {
+  background-color: rgba(22, 150, 86); 
+
+}
+header {
+  width: 60.5vw;
+  display: flex;
+}
+
+.header {
+  display: flex;
+  
+  /* width: 100%; */
+}
+body {
+  margin: 0px;
+}
+
+.button {
+  border: none;
+  padding: 0.2rem;
+  margin: 0.3rem;
+}
+
+
+.view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 5rem;
+}
+
+.router {
+  flex: 1 1 auto;
+  background-color: rgba(222, 22, 86); 
+  border: none;
+  color: white;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  transition: background-color 0.5s ease-in;
+}
+
+.router:focus {
+  background-color: rgba(150, 22, 86); 
+}
+
+.router:hover {
+  background-color: rgba(150, 22, 86); 
+}
+
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+nav a {
+  padding: 1rem;
+  margin: 0px;
+}
+
+table {
+  table-layout: fixed;
+}
+
+.button-panel {
+  display: flex;
+  flex-flow: row;
+}
+
+tr:nth-child(2n+1) {
+  background-color: rgba(11, 11, 11, 0.1);
+}
+
+tr {
+  text-align: left;
+}
+
+tr:hover {
+  background-color: rgba(11, 11, 11, 0.1);
+}
+
+h1 {
+  flex: 1 1 auto;
+  text-align: left;
+}
+
+td { 
+    overflow: hidden; 
+    text-overflow: ellipsis; 
+    word-wrap: break-word;
+}
+
+.AddButton {
+  border: none;
+  height: 2rem;
+  width: 2rem;
+  margin-right: 0.2rem; 
+  justify-content: flex-end;
+  align-self: center;
+}
+
+.edit {
+  width: 2rem;
+  height: 2rem;
+}
+
+.AddForm {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation-duration: 0.3s;
+  animation-name: lineInsertedIn;
+  transition: height 0.3s;
+}
+.AddForm input {
+  margin: 1rem;
+}
+
+.AddForm .button {
+  align-self: center;
+  /* max-width: 5rem;
+  min-width: 5rem; */
+  align-self: flex-end
+}
+
+.AddForm label {
+  align-self: flex-start;
+}
+</style>

front/src/components/DropDown.vue

@@ -0,0 +1,109 @@
+<template>
+<div>
+    <input 
+        class="dropdown-input"
+        @focus="showOption"
+        @blur="hideOption"
+        v-model="inputVal" />
+    <button
+        class="dropdown button"
+        @blur="hideOption"
+        @click="toggleOption" >
+        <i class="fa-solid fa-angle-down" ></i>
+    </button>
+    <div class="dropdown-content" v-show="showOptions">
+        <div 
+            class="dropdown-item"
+            v-for="val in vals"
+            @mousedown="selectValue(val)"
+            :key="val">{{ val }}
+        </div>
+    </div>
+</div>
+</template>
+<script>
+export default {
+    props: {
+        field: String,
+        values: Array,
+        inputValue: String,
+    },
+    data() {
+        return {
+            inputVal: "",
+            showOptions: false,
+            selected: "",
+            vals: [],
+        }
+    },
+    mounted() {
+        this.inputVal = this.inputValue;
+    },
+    watch: {
+        inputVal: function() {
+            if (!this.inputVal)
+                return
+            this.vals = this.values.filter(word => word.toLowerCase().includes(this.inputVal.toLowerCase(), 0))
+        }
+    },
+    methods: {
+        selectValue(value) {
+            this.selected = value;
+            this.inputVal = value;
+            this.$emit('selected', this.selected);
+        },
+        toggleOption() {
+            this.showOptions = !this.showOptions
+        },
+        showOption() {
+            this.showOptions = true;
+        },
+        hideOption() {
+            this.showOptions = false;
+            this.selected = this.inputVal;
+            this.$emit('selected', this.selected);
+        }
+    }
+}
+</script>
+<style scoped>
+select {
+    max-width: 14.5rem;
+}
+
+.dropdown {
+    background-color: rgba(0, 0, 0, 0);
+}
+
+i:hover {
+    color: rgba(222, 22, 86, 1);
+}
+
+.dropdown-content {
+    position: absolute;
+    background-color: #f8f8F8;
+    min-width: 14em;
+    max-width: 15rem;
+    max-height: 15rem;
+    margin-top: .5rem;
+    border: 1px solid rgba(222, 22, 86, 1);
+    /* border-top-color: rgba(0,0,0,0); */
+    box-shadow: 0px -8px 34px 0px rgba(0,0,0,0.05);
+    overflow: auto;
+    z-index: 1;
+}
+
+.dropdown-input {
+    width: 14em;
+    margin-right: 1em;
+}
+
+.dropdown-item {
+    color: black;
+    line-height: 1em;
+    text-decoration: none;
+    padding: 0.5em;
+    display: block;
+    cursor: pointer;
+}
+</style>

front/src/components/PaginationFooter.vue

@@ -0,0 +1,40 @@
+<template>
+<div>
+    <footer v-if="$store.getters.getBookPageNb <= 5">
+        <button class="page" v-for="index in $store.getters.getBookCurrentPage + 1" :key="index">{{ index }}</button>
+    </footer>
+    <footer v-else>
+        <button @click="$store.dispatch('fetchPageBooks', {page: 0, nooption: false})" class="page"> {{ '<<' }} </button>
+        <button
+            class="page"
+            :class="{ 'red': $store.getters.getBookCurrentPage - Math.max(0, Math.min($store.getters.getBookCurrentPage - 2, $store.getters.getBookPageNb - 5)) === index}" 
+            v-for="(n, index) in (Math.max(5, Math.min($store.getters.getBookCurrentPage + 2, $store.getters.getBookPageNb)) - Math.max(0, Math.min($store.getters.getBookCurrentPage - 2, $store.getters.getBookPageNb - 5)))"
+            :key="index"
+            @click="$store.dispatch('fetchPageBooks', {page: Math.max(0, Math.min($store.getters.getBookCurrentPage - 2, $store.getters.getBookPageNb - 5)) + index, nooption: false})">
+            {{ Math.max(0, Math.min($store.getters.getBookCurrentPage - 2, $store.getters.getBookPageNb - 5)) + index }}
+        </button>
+        <p v-if="$store.getters.getBookCurrentPage !== $store.getters.getBookPageNb" class="elipsis">...</p>
+        <button v-if="$store.getters.getBookCurrentPage !== $store.getters.getBookPageNb" class="page" @click="$store.dispatch('fetchPageBooks', {page: $store.getters.getBookPageNb, nooption: false})">{{ $store.getters.getBookPageNb }}</button>
+        <button @click="$store.dispatch('fetchPageBooks', {page: $store.getters.getBookPageNb, nooption: false})" class="page"> >> </button>
+    </footer>
+</div>
+</template>
+<style scoped>
+.elipsis {
+  font-size: 3rem
+}
+
+.page {
+  border: none;
+  padding: 1rem;
+  margin: 0.2rem;
+}
+
+footer {
+  display: flex;
+  padding: 0.2rem;
+  align-items: center;
+}
+
+
+</style>

front/src/components/SearchHeader.vue

@@ -0,0 +1,54 @@
+<template>
+    <div class="searchBox">
+        <input class="search" type="text" v-model="search"/>
+        <button class="searchButton" @click="clearSearch" >x</button>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        page: String,
+    },
+    watch: {
+        search: function() {
+            this.$emit('changeSearch', this.search);
+            this.$store.dispatch('fetchPage'+this.page, {page: 0, nooption: false, search: this.search, order: this.order})
+        }
+    },
+    methods: {
+        clearSearch() {
+            this.$store.dispatch('fetchPage'+this.page, {page: 0, nooption: true})
+            this.search = ""
+        },
+    },
+    data() {
+        return {
+            search: "",
+        }
+    }
+}
+</script>
+<style scoped>
+.searchBox {
+  display: flex;
+}
+
+.search {
+  display: flex;
+  min-width: 95%;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.searchButton {
+  color: rgba(11, 11, 11, 0.8);
+  margin-left: -1.1rem;
+  width: 1rem;
+  height: 1rem;
+  align-self: center;
+  align-items: center;
+  font-size: 0.6rem;
+  border: none;
+}
+
+</style>

front/src/components/TableView.vue

@@ -0,0 +1,23 @@
+<template>
+<table>
+  <tr>
+    <th v-bind:style="{ 'min-width': this.width }" v-for="head in headings" :key="head">{{ head }}</th>
+  </tr>
+  <slot></slot>
+</table>
+</template>
+
+<script>
+export default {
+  name: "TableView",
+  props: {
+    headings: Array,
+    width: String
+  },
+};
+</script>
+<style scoped>
+th {
+  text-align: left;
+}
+</style>

front/src/config.js

@@ -0,0 +1,6 @@
+const ROOT_FQDN = 'https://bookshelf.aldon.fr/api';
+// const ROOT_FQDN = 'http://localhost:8000/api';
+
+export {
+    ROOT_FQDN
+};

front/src/main.js

@@ -0,0 +1,19 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+import store from './store';
+
+const app = createApp(App)
+app.use(router)
+app.use(store)
+app.mount('#app')
+
+
+// new Vue({
+//     router,
+//     store,
+//     el: '#app',
+//     components: { App },
+//     render: h => h(App)
+
+// })

front/src/router/index.js

@@ -0,0 +1,30 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import TheBooks from '../views/TheBooks.vue';
+import TheAbout from '../views/TheAbout.vue';
+import TheHome from '../views/TheHome.vue';
+import TheFilms from '../views/TheFilms.vue';
+import TheLogin from '../views/TheLogin.vue';
+import store from '../store';
+// import ABook from '@/views/ABook.vue';
+
+const routes = [
+    { name: 'TheHome', path: '/', component: TheHome },
+    { name: 'TheFilms', path: '/films', component: TheFilms },
+    { name: 'TheBooks', path: '/books', component: TheBooks },
+    { name: 'TheAbout', path: '/about', component: TheAbout },
+    { name: 'Login', path: '/login', component: TheLogin },
+    // { name: 'ABook', path: '/book/:bookId', component: ABook }
+]
+
+const router = new createRouter({
+    history: createWebHistory(process.env.BASE_URL),
+    routes,
+});
+
+router.beforeEach(async (to) => {
+    if (!store.state.token && to.name !== 'Login') {
+      return { name: 'Login', query: {redirect: to.path} }
+    }
+})
+
+export default router;

front/src/store/index.js

@@ -0,0 +1,389 @@
+import { createStore } from 'vuex';
+import { ROOT_FQDN } from '@/config';
+
+const store = createStore({
+    state() {
+        return {
+            books: [
+            ],
+            films: [
+            ],
+            token: "",
+            bookPageNb: 0,
+            bookCurrentPage: 0,
+            filmPageNb: 0,
+            filmCurrentPage: 0,
+        }
+    },
+    mutations: {
+        setBooks(state, books) {
+            state.books = books.result
+        },
+        setFilms(state, films) {
+            state.films = films
+        },
+        logout(state) {
+            state.token = ""
+        },
+        addToken(state, token) {
+            state.token = token
+        },
+        removeBook(state, id) {
+            let index = state.books.findIndex(book => book.biblio_Index === id)
+            state.books.splice(index, 1)
+        },
+        editBook(state, payload) {
+            let index = state.books.findIndex(book => book.biblio_Index === payload.id)
+            state.books.splice(index, 1, payload.newBook)
+        },
+        addBook(state, book) {
+            state.books.push(book);
+        },
+        removeFilm(state, id) {
+            let index = state.films.findIndex(film => film.Number === id)
+            state.films.splice(index, 1)
+        },
+        editFilm(state, payload) {
+            let index = state.films.findIndex(film => film.Number === payload.id)
+            state.films.splice(index, 1, payload.newfilm)
+        },
+        addFilm(state, film) {
+            state.films.push(film);
+        },
+        setBookPageNb(state, nb) {
+            state.bookPageNb = nb
+        },
+        setBookCurrentPage(state, page) {
+            state.bookCurrentPage = page
+        },
+        setFilmCurrentPage(state, page) {
+            state.filmCurrentPage = page
+        }
+    },
+    getters: {
+        getBooks(state) {
+            return state.books;
+        },
+        getBookCurrentPage(state) {
+            return state.bookCurrentPage
+        },
+        getBookPageNb(state) {
+            return state.bookPageNb
+        },
+        getFilms(state) {
+            return state.films;
+        },
+        getFilmCurrentPage(state) {
+            return state.filmCurrentPage
+        },
+        getFilmPageNb(state) {
+            return state.filmPageNb
+        },
+    },
+    actions: {
+        logout(ctx) {
+            ctx.commit('logout')
+            localStorage.setItem('token', '')
+        },
+        async login(ctx, info) {
+            let username = info.username
+            let password = info.password
+            const data = new FormData()
+            data.append('username', username)
+            data.append('password', password)
+            return await fetch(ROOT_FQDN + '/token', {
+                method: 'POST',
+                body: data
+            }).then((response) => {
+                if (response.ok) {
+                    return response.json()
+                } else {
+                    return null
+                }
+            }).then(res => {
+                if (res !== null) {
+                    ctx.commit('addToken', res.access_token)
+                    localStorage.setItem('token', res.access_token)
+                    ctx.dispatch('getBooks', {page: 0, search: "", order:""})
+                    ctx.dispatch('getFilms', {page: 0, search: "", order:""})
+                }
+            })
+        },
+        async removeBook({dispatch, commit, state}, id) {
+            await fetch(ROOT_FQDN+'/book/'+id, {
+                method: 'DELETE',
+                headers: {
+                    "Authorization": 'Bearer ' + state.token,
+                    "Content-Type": "application/json"
+                },
+            }).then((response) => {
+                if (response.ok) {
+                    commit('setBookPageNb', response.headers.get('x-nbpage'))
+                    return response.json()
+                } else
+                    return null
+            }).then(res => {
+                if (res === null)
+                {
+                    dispatch('logout')
+                    return null
+                }
+                return res
+            })            
+            commit('removeBook', id)
+        },
+        async editBook({dispatch, commit, state}, payload) {
+            let data = {
+                title: payload.newBook.title,
+                author: payload.newBook.author,
+                type: payload.newBook.type,
+                editor: payload.newBook.editor
+            }
+            await fetch(ROOT_FQDN+'/book/'+payload.id, {
+                method: 'PUT',
+                headers: {
+                    "Authorization": 'Bearer ' + state.token,
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify(data)
+            }).then(res => {
+                if (res.ok) {
+                    return res.json()
+                } else 
+                    return null
+            }).then((res) => {
+                if (res === null)
+                    dispatch('logout')
+                dispatch('getBooks', {page: 0, search: payload.search, order:""})
+            })
+            commit('editBook', payload)
+        },
+        async addBook({dispatch, commit, state}, book) {
+            let data = {
+                title: book.Titre,
+                author: book.Auteur,
+                type: book.Type,
+                editor: book.Editeur
+            }
+            await fetch(ROOT_FQDN+'/books', {
+                method: 'POST',
+                headers: {
+                    "Authorization": 'Bearer ' + state.token,
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify(data)
+            }).then((response) => {
+                commit('setBookPageNb', response.headers.get('x-nbpage'))
+                if (response.ok)
+                    return response.json()
+                else
+                    return null
+            }).then(res => {
+                if (res === null)
+                {
+                    dispatch('logout')
+                    return null
+                }
+                return res
+            })            
+            commit('addBook', book)
+        },
+        async getBooks({dispatch, commit, state}, payload) {
+            let test =  payload.page ? "?page=" + payload.page : ""
+            if (payload.page)
+                test += '&'
+            else
+                test += '?'
+            test += payload.search ? "search="+payload.search : ""
+            await fetch(ROOT_FQDN+'/books'+test, {
+                method: 'GET',
+                headers: {
+                    "Authorization": 'Bearer ' + state.token,
+                    "Content-Type": "application/json"
+                }
+            }).then((response) => {
+                commit('setBookPageNb', response.headers.get('x-nbpage'))
+                if (response.ok)
+                    return response.json()
+                else
+                    return null
+            }).then(res => {
+                if (res === null)
+                {
+                    dispatch('logout')
+                    return null
+                }
+                commit('setBooks', res)
+                return res
+            })
+        },
+        async removeFilm({dispatch, commit, state}, id) {
+            await fetch(ROOT_FQDN+'/film/'+id, {
+                method: 'DELETE',
+                headers: {
+                    "Authorization": 'Bearer ' + state.token,
+                    "Content-Type": "application/json"
+                },
+            }).then((response) => {
+                if (response.ok) {
+                    commit('setFilmPageNb', response.headers.get('x-nbpage'))
+                    return response.json()
+                } else
+                    return null
+            }).then(res => {
+                if (res === null)
+                {
+                    dispatch('logout')
+                    return null
+                }
+                return res
+            })            
+            commit('removeFilm', id)
+        },
+        async editFilm({dispatch, commit, state}, payload) {
+            let data = {
+                title: payload.newfilm.Title,
+                actors: payload.newfilm.Actors,
+                director: payload.newfilm.Director,
+                type: payload.newfilm.Type,
+                producer: payload.newfilm.Producer,
+                length: payload.newfilm.Length
+            }
+            await fetch(ROOT_FQDN+'/film/'+payload.id, {
+                method: 'PUT',
+                headers: {
+                    "Authorization": 'Bearer ' + state.token,
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify(data)
+            }).then(res => {
+                if (res.ok) {
+                    return res.json()
+                } else 
+                    return null
+            }).then((res) => {
+                if (res === null)
+                    dispatch('logout')
+                dispatch('getFilms', {page: 0, search:"", order:""})
+            })
+            commit('editFilm', payload)
+        },
+        async addFilm({dispatch, commit, state}, film) {
+            let data = {
+                title: film.Title,
+                actors: film.Actors,
+                director: film.Director,
+                type: film.Type,
+                producer: film.Producer,
+                length: film.Length
+            }
+            await fetch(ROOT_FQDN+'/films', {
+                method: 'POST',
+                headers: {
+                    "Authorization": 'Bearer ' + state.token,
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify(data)
+            }).then((response) => {
+                commit('setFilmPageNb', response.headers.get('x-nbpage'))
+                if (response.ok)
+                    return response.json()
+                else
+                    return null
+            }).then(res => {
+                if (res === null)
+                {
+                    dispatch('logout')
+                    return null
+                }
+                return res
+            })            
+            commit('addFilm', film)
+        },
+        async getFilms({dispatch, commit, state}, payload) {
+            let test =  payload.page ? "?page=" + payload.page : ""
+            if (payload.page)
+                test += '&'
+            else
+                test += '?'
+            test += payload.search ? "search="+payload.search : ""
+            await fetch(ROOT_FQDN+'/films'+test, {
+                method: 'GET',
+                headers: {
+                    "Authorization": 'Bearer ' + state.token,
+                    "Content-Type": "application/json"
+                }
+            }).then((response) => {
+                if (response.ok)
+                    return response.json()
+                else
+                    return null
+            }).then(res => {
+                commit('setFilms', res)
+                if (res === null) {
+                    dispatch('logout');
+                    return null
+                }
+                return res
+            })
+        },
+        async fetchPageBooks({dispatch, commit}, payload) {
+            commit('setBookCurrentPage', payload.page)
+            if (payload.nooption) {
+                dispatch('getBooks', {page: payload.page, search: "", order: ""})
+            } else {
+                dispatch('getBooks', {page: payload.page, search: payload.search, order: payload.sort})
+            }
+        },
+        async fetchPageFilms({dispatch, commit}, payload) {
+            commit('setFilmCurrentPage', payload.page)
+            if (payload.nooption) {
+                dispatch('getFilms', {page: payload.page, search: "", order: ""})
+            } else {
+                dispatch('getFilms', {page: payload.page, search: payload.search, order: payload.sort})
+            }
+        },
+        async getBookField({dispatch, state}, field) {
+            return await fetch(ROOT_FQDN+'/books/' + field, {
+                method: 'GET',
+                headers: {
+                    "Authorization": 'Bearer ' + state.token,
+                    "Content-Type": "application/json"
+                }
+            }).then((response) => {
+                if (response.ok)
+                    return response.json()
+                else
+                    return null
+            }).then(res => {
+                if (res === null) {
+                    dispatch('logout');
+                    return null
+                }
+                return res
+            })
+        },
+        async getFilmField({dispatch, state}, field) {
+            return await fetch(ROOT_FQDN+'/films/' + field, {
+                method: 'GET',
+                headers: {
+                    "Authorization": 'Bearer ' + state.token,
+                    "Content-Type": "application/json"
+                }
+            }).then((response) => {
+                if (response.ok)
+                    return response.json()
+                else
+                    return null
+            }).then(res => {
+                if (res === null) {
+                    dispatch('logout');
+                    return null
+                }
+                return res
+            })
+        }
+    }
+})
+
+export default store;

front/src/views/ABook.vue

@@ -0,0 +1,15 @@
+<template>
+    <!-- <header>{{ book.title }}</header> -->
+</template>
+<script>
+export default {
+    components: {
+
+    },
+    data() {
+        return {
+            title: "qwe"
+        }
+    }
+}
+</script>

front/src/views/TheAbout.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="about">
+      <header>
+        <h1>About</h1>
+      </header>
+      <main>
+        <h2>Home Library</h2>
+        <p>
+          
+        </p>
+        <p>
+          Made with <a href="https://vuejs.org/"><b>VueJS</b></a> and <a href="https://fastapi.tiangolo.com/"><b>FastAPI</b></a> by <a href="https://julien.aldon.fr/"><b><em>Julien Aldon</em></b></a>
+        </p>
+      </main>
+      <footer>
+      </footer>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  }
+}
+</script>
+<style scoped>
+a {
+  text-decoration: none;
+}
+
+p {
+  text-align: left;
+}
+
+h2 {
+  text-align: left;
+}
+</style>

front/src/views/TheBooks.vue

@@ -0,0 +1,206 @@
+<template>
+  <div>
+      <header>
+          <h1>Books</h1>
+          <button v-if="!addMode" class="AddButton" v-show="!addMode" @click="toggleEditMode"><i class="fas fa-plus"></i></button>
+          <button v-else class="AddButton red" @click="addMode=!addMode">X</button>
+      </header>
+      <main>
+          <form ref="form" class="AddForm collapsed" v-on:submit.prevent="addElem" v-if="addMode">
+            <label for="author">Author</label>
+            <input id="author" v-model="formAdd.author" placeholder="Author"/>
+            <label for="title">Title</label>
+            <input id="title" v-model="formAdd.title" placeholder="Title"/>
+            <label for="editor">Editor</label>
+            <input id="editor" v-model="formAdd.editor" placeholder="Editor"/>
+            <label for="type">Type</label>
+            <input id="type" v-model="formAdd.type" placeholder="Type"/>
+            <button class="button edit">
+              <i class="fa-solid fa-arrow-right"></i>
+            </button>
+          </form>
+          <SearchHeader page="Books" @changeSearch="(s) => {editSearch(s)}"/>
+          <TableView ref="table" :headings="headings" width="15rem">
+            <tr v-for="book in this.$store.getters.getBooks" :key="book">
+              <td v-if="editRow === book.biblio_Index">
+                <DropDown
+                  :values="this.bookFields.authors"
+                  field="Auteur"
+                  :inputValue="book.Auteur"
+                  @selected="(n) => {formEdit.author = n}"
+                  />
+              </td>
+              <td v-else>{{ book.Auteur }}</td>
+              <td v-if="editRow === book.biblio_Index">
+                <DropDown
+                  :values="this.bookFields.titles"
+                  field="Titre"
+                  :inputValue="book.Titre"
+                  @selected="(n) => {formEdit.title = n}"
+                  />
+              </td>
+              <td v-else>{{ book.Titre }}</td>
+              <td v-if="editRow === book.biblio_Index">
+                <DropDown
+                  :values="this.bookFields.editors"
+                  field="Editeur"
+                  :inputValue="book.Editeur"
+                  @selected="(n) => {formEdit.editor = n}"
+                  />
+              </td>
+              <td v-else>{{ book.Editeur }}</td>
+              <td v-if="editRow === book.biblio_Index">
+                <DropDown
+                  :values="this.bookFields.types"
+                  field="Type"
+                  :inputValue="book.Type"
+                  @selected="(n) => {formEdit.type = n}"
+                  />
+              </td>
+              <td v-else>{{ book.Type }}</td>
+              <div class="button-panel">
+                <button class="button edit" @click="editElem(book.biblio_Index)">
+                  <i v-if="editRow === book.biblio_Index" class="fa fa-check" aria-hidden="true"></i>
+                  <i v-else class="fa fa-pencil-square-o" aria-hidden="true"></i>
+                </button>
+                <button class="button edit" @click="removeElem(book.biblio_Index)"><i class="fa fa-trash-o" aria-hidden="true"></i></button>
+              </div>
+            </tr>
+          </TableView>
+      </main>
+      <PaginationFooter/>
+  </div>
+</template>
+
+<script>
+import TableView from '../components/TableView.vue';
+import PaginationFooter from '../components/PaginationFooter.vue';
+import SearchHeader from '../components/SearchHeader.vue';
+import DropDown from '../components/DropDown.vue';
+
+export default {
+  components: {
+      TableView,
+      PaginationFooter,
+      SearchHeader,
+      DropDown
+  },
+  data() {
+    return {
+      headings: ['Author', 'Title', 'Editor', 'Type'],
+      editMode: false,
+      editRow: undefined,
+      addMode: false,
+      formEdit: {},
+      formAdd: {},
+      search: "",
+      sort: "",
+      bookFields: {},
+    }
+  },
+  mounted() {
+    this.$store.dispatch('getBookField', 'Auteur').then((res) => {
+      if (res === null) {
+        this.$store.dispatch('logout');
+        return;
+      }
+      this.bookFields.authors = [...res];
+
+    })
+    this.$store.dispatch('getBookField', 'Titre').then((res) => {
+      if (res === null) {
+        this.$store.dispatch('logout');
+        return;
+      }
+      this.bookFields.titles = [...res];
+    })
+    this.$store.dispatch('getBookField', 'Editeur').then((res) => {
+      if (res === null) {
+        this.$store.dispatch('logout');
+        return;
+      }
+      this.bookFields.editors = [...res];
+    })
+    this.$store.dispatch('getBookField', 'Type').then((res) => {
+      if (res === null) {
+        this.$store.dispatch('logout');
+        return;
+      }
+      this.bookFields.types = [...res];
+    })
+  },
+  methods: {
+    removeElem(id) {
+      this.$store.dispatch('removeBook', id)
+    },
+    toggleEditMode() {
+      this.addMode =! this.addMode
+    },
+    editSearch(search) {
+      this.search = search;
+    },
+    addElem() {
+      if (!this.formAdd.title || !this.formAdd.author)
+        return
+      this.$store.dispatch('addBook', {
+        'Titre': this.formAdd.title, 
+        'Auteur': this.formAdd.author,
+        'Editeur': this.formAdd.editor,
+        'Type': this.formAdd.type,
+        'biblio_Index': new Date().valueOf()
+      })
+      this.addMode = true
+      this.formAdd = {}
+    },
+    editElem(id) {
+      this.editMode =! this.editMode
+      if (this.editMode || this.editRow !== id) {
+        let currentBook = this.$store.getters.getBooks.filter(b => b.biblio_Index === id)
+        this.formEdit.author = currentBook[0].Auteur
+        this.formEdit.title = currentBook[0].Titre
+        this.formEdit.editor = currentBook[0].Editeur
+        this.formEdit.type = currentBook[0].Type
+        this.editRow = id
+      }
+      else {
+        this.editRow = undefined
+        let book = this.$store.getters.getBooks.filter(b => b.biblio_Index === id)[0]
+        let newObj = {author: '', title: '', type: '', editor: ''}
+        if (book) {
+          newObj.author = this.formEdit.author ? this.formEdit.author : book.Auteur
+          newObj.title = this.formEdit.title ? this.formEdit.title : book.Titre
+          newObj.type = this.formEdit.type ? this.formEdit.type : book.Type
+          newObj.editor = this.formEdit.editor ? this.formEdit.editor : book.Editeur
+          newObj.id = id
+        } else {
+          newObj.author = this.formEdit.author ? this.formEdit.author : ""
+          newObj.title = this.formEdit.title  ? this.formEdit.title : ""
+          newObj.type = this.formEdit.type  ? this.formEdit.type : ""
+          newObj.editor = this.formEdit.editor ? this.formEdit.editor : ""
+          newObj.id = id;
+        }
+        this.$store.dispatch('editBook', {id: id, newBook: newObj, search: this.search})
+        this.formEdit = {}
+      }
+    },
+  }
+}
+</script>
+<style scoped>
+main {
+  max-width: 60.5vw;
+}
+
+td input {
+  width: 14.5rem;
+}
+
+@keyframes lineInsertedIn {
+  0% {
+    height: 0rem;
+  }
+  100% {
+    height: 23rem;
+  }
+}
+</style>

front/src/views/TheFilms.vue

@@ -0,0 +1,243 @@
+<template>
+  <div>
+     <header>
+          <h1>Films</h1>
+          <button v-if="!addMode" class="AddButton" v-show="!addMode" @click="toggleEditMode"><i class="fas fa-plus"></i></button>
+          <button v-else class="AddButton red" @click="addMode=!addMode">X</button>
+      </header>
+      <main>
+          <form ref="form" class="AddForm collapsed" v-on:submit.prevent="addElem" v-if="addMode">
+            <label for="Director">Director</label>
+            <input id="Director" v-model="formAdd.director" placeholder="director"/>
+            <label for="Title">Title</label>
+            <input id="Title" v-model="formAdd.title" placeholder="title"/>
+            <label for="Actors">Actors</label>
+            <input id="Actors" v-model="formAdd.actors" placeholder="Actors"/>
+            <label for="Length">Length</label>
+            <input id="Length" type="number" v-model="formAdd.length" placeholder="Lenght (in min)"/>
+            <label for="Producer">Producer</label>
+            <input id="Producer" v-model="formAdd.producer" placeholder="Producer"/>
+            <label for="Type">Type</label>
+            <input id="Type" v-model="formAdd.type" placeholder="type"/>
+            <button class="button edit">
+              <i class="fa-solid fa-arrow-right"></i>
+            </button>
+          </form>
+          <SearchHeader page="Films"/>
+          <TableView ref="table" :headings="headings" width="10rem">
+            <tr :key="film" v-for="film in this.$store.getters.getFilms">
+              <td v-if="editRow === film.Number">
+                <DropDown 
+                  :values="this.filmFields.directors"
+                  field="Director"
+                  :inputValue="film.Director"
+                  @selected="(n) => {formEdit.director = n}"
+                />
+              </td>
+              <td v-else>{{ film.Director }}</td>
+              <td v-if="editRow === film.Number">
+                <DropDown 
+                  :values="this.filmFields.titles"
+                  field="Title"
+                  :inputValue="film.Title"
+                  @selected="(n) => {formEdit.title = n}"
+                />
+              </td>
+              <td v-else>{{ film.Title }}</td>
+              <td v-if="editRow === film.Number">
+                <DropDown 
+                  :values="this.filmFields.actors"
+                  field="Actors"
+                  :inputValue="film.Actors"
+                  @selected="(n) => {formEdit.actors = n}"
+                />
+              </td>
+              <td v-else>{{ film.Actors }}</td>
+              <td v-if="editRow === film.Number">
+                <input :placeholder="film.Length" v-model="formEdit.length"/>
+              </td>
+              <td v-else>{{ film.Length }}</td>
+              <td v-if="editRow === film.Number">
+                <DropDown 
+                  :values="this.filmFields.producers"
+                  field="Producer"
+                  :inputValue="film.Producer"
+                  @selected="(n) => {formEdit.producer = n}"
+                />
+              </td>
+              <td v-else>{{ film.Producer }}</td>
+              <td v-if="editRow === film.Number">
+                <DropDown 
+                  :values="this.filmFields.types"
+                  field="Type"
+                  :inputValue="film.Type"
+                  @selected="(n) => {formEdit.type = n}"
+                />
+              </td>
+              <td v-else>{{ film.Type }}</td>
+              <div class="button-panel">
+                <button class="button edit" @click="editElem(film.Number)">
+                  <i v-if="editRow === film.Number" class="fa fa-check" aria-hidden="true"></i>
+                  <i v-else class="fa fa-pencil-square-o" aria-hidden="true"></i>
+                </button>
+                <button class="button edit" @click="removeElem(film.Number)"><i class="fa fa-trash-o" aria-hidden="true"></i></button>
+              </div>
+            </tr>
+          </TableView>
+      </main>
+     <footer v-if="$store.getters.getFilmPageNb <= 5">
+        <button class="page" v-for="index in $store.getters.getFilmCurrentPage + 1" :key="index">{{ index }}</button>
+      </footer>
+      <footer v-else>
+        <button @click="fetchPage(0)" class="page"> {{ '<<' }} </button>
+        <button
+          class="page"
+          :class="{ 'red': $store.getters.getFilmCurrentPage - Math.max(0, Math.min($store.getters.getFilmCurrentPage - 2, $store.getters.getFilmPageNb - 5)) === index}" 
+          v-for="(n, index) in (Math.max(5, Math.min($store.getters.getFilmCurrentPage + 2, $store.getters.getFilmPageNb)) - Math.max(0, Math.min($store.getters.getFilmCurrentPage - 2, $store.getters.getFilmPageNb - 5)))"
+          :key="index"
+          @click="fetchPage(Math.max(0, Math.min($store.getters.getFilmCurrentPage - 2, $store.getters.getFilmPageNb - 5)) + index)">
+          {{ Math.max(0, Math.min($store.getters.getFilmCurrentPage - 2, $store.getters.getFilmPageNb - 5)) + index }}
+        </button>
+        <p v-if="$store.getters.getFilmCurrentPage !== $store.getters.getFilmPageNb" class="elipsis">...</p>
+        <button v-if="$store.getters.getFilmCurrentPage !== $store.getters.getFilmPageNb" class="page" @click="fetchPage($store.getters.getFilmPageNb)">{{ $store.getters.getFilmPageNb }}</button>
+        <button @click="fetchPage($store.getters.getFilmPageNb)" class="page"> >> </button>
+      </footer>
+  </div>
+</template>
+
+<script>
+import TableView from '../components/TableView.vue';
+import DropDown from '../components/DropDown.vue';
+import SearchHeader from '../components/SearchHeader.vue';
+
+export default {
+  components: {
+      TableView,
+      DropDown,
+      SearchHeader
+  },
+  data() {
+    return {
+      headings: ['Director', 'Title', 'Actors', 'Length', 'Producer', 'Type'],
+      editMode: false,
+      editRow: undefined,
+      addMode: false,
+      formEdit: {},
+      formAdd: {},
+      search: "",
+      sort: "",
+      filmFields: {},
+    }
+  },
+  mounted() {
+    this.$store.dispatch('getFilmField', 'Director').then((res) => {
+      this.filmFields.directors = [...res];
+    })
+    this.$store.dispatch('getFilmField', 'Title').then((res) => {
+      this.filmFields.titles = [...res];
+    })
+    this.$store.dispatch('getFilmField', 'Actors').then((res) => {
+      this.filmFields.actors = [...res];
+    })
+    this.$store.dispatch('getFilmField', 'Producer').then((res) => {
+      this.filmFields.producers = [...res];
+    })
+    this.$store.dispatch('getFilmField', 'Type').then((res) => {
+      this.filmFields.types = [...res];
+    })
+  },
+  methods: {
+    removeElem(id) {
+      this.$store.dispatch('removeFilm', id)
+    },
+    toggleEditMode() {
+      this.addMode =! this.addMode
+    },
+    addElem() {
+      if (!this.formAdd.title || !this.formAdd.director 
+          || !this.formAdd.producer || !this.formAdd.type
+          || !this.formAdd.actors || !this.formAdd.length) {
+            //TODO: error handling
+            return
+          }
+      this.$store.dispatch('addFilm', {
+        'Title': this.formAdd.title, 
+        'Director': this.formAdd.director,
+        'Producer': this.formAdd.producer,
+        'Type': this.formAdd.type,
+        'Actors': this.formAdd.actors,
+        'Length': this.formAdd.length,
+        'Number': new Date().valueOf()
+      })
+      this.addMode = true
+      this.formAdd = {}
+    },
+    editElem(id) {
+      this.editMode =! this.editMode
+      if (this.editMode || this.editRow !== id) {
+        this.editRow = id
+      }
+      else {
+        this.editRow = undefined;
+        let ele = this.$store.getters.getFilms.filter(test => test.Number === id)[0]
+        let newObj = {Director: '', Title: '', Producer: '', Type: '', Length: '', Actors: ''}
+        if (ele) {
+          newObj.Director = this.formEdit.director ? this.formEdit.director : ele.Director
+          newObj.Producer = this.formEdit.producer ? this.formEdit.producer : ele.Producer
+          newObj.Title = this.formEdit.title ? this.formEdit.title : ele.Title
+          newObj.Type = this.formEdit.type ? this.formEdit.type : ele.Type
+          newObj.Length = this.formEdit.length ? this.formEdit.length : ele.Length
+          newObj.Actors = this.formEdit.actors ? this.formEdit.actors : ele.Actors
+          newObj.Number = id
+        } else {
+          newObj.Director = this.formEdit.director ? this.formEdit.director : ""
+          newObj.Producer = this.formEdit.producer ? this.formEdit.producer : ""
+          newObj.Title = this.formEdit.title ? this.formEdit.title : ""
+          newObj.Type = this.formEdit.type ? this.formEdit.type : ""
+          newObj.Length = this.formEdit.length ? this.formEdit.length : ""
+          newObj.Actors = this.formEdit.actors ? this.formEdit.actors : ""
+          newObj.Number = id
+        }
+        this.$store.dispatch('editFilm', {id: id, newfilm: newObj})
+        this.formEdit = {}
+      }
+    },
+    fetchPage(page, nooption=false) {
+      this.$store.commit('setFilmCurrentPage', page)
+      if (nooption) {
+        this.$store.dispatch('getFilms', {page: page, search: "", order: ""})
+      } else {
+        this.$store.dispatch('getFilms', {page: page, search: this.search, order: this.sort})
+      }
+    },
+  }
+}
+</script>
+<style scoped>
+main {
+  width: 80vw;
+}
+
+table {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.elipsis {
+  font-size: 3rem
+}
+
+.page {
+  border: none;
+  padding: 1rem;
+  margin: 0.2rem;
+}
+
+footer {
+  display: flex;
+  padding: 0.2rem;
+  align-items: center;
+}
+
+
+</style>

front/src/views/TheHome.vue

@@ -0,0 +1,33 @@
+<template>
+<div>
+  <header>
+    <h1>Home</h1>
+  </header>
+  <main>
+    <h2>Welcome to the Library</h2>
+    <p>You can manage, edit, delete book references from the home library</p>
+  </main>
+</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  }
+}
+</script>
+<style scoped>
+a {
+  text-decoration: none;
+}
+
+p {
+  text-align: left;
+}
+
+h2 {
+  text-align: left;
+}
+</style>

front/src/views/TheLogin.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+      <header>
+        <h1>Login</h1>
+      </header>
+      <main @keydown.enter="login()">
+        <label for="username">Username</label>
+        <input id="username" type="text" v-model="username"/>
+        <label for="password">Password</label>
+        <input id="password" type="password" v-model="password"/>
+        <button @click="login">Login</button>
+      </main>
+      <footer>
+      </footer>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+        username: "",
+        password: ""
+    }
+  },
+  methods: {
+      login() {
+        if (this.username !== "" && this.password !== "")
+            this.$store.dispatch('login', {'username': this.username, 'password': this.password}).then(() => {
+              this.username = ""
+              this.password = ""
+              this.$router.push(this.$route.query.redirect || '/books')
+            })
+      }
+  }
+}
+</script>
+<style scoped>
+button {
+    margin-top: 0.5rem
+}
+label {
+    margin: 0.2rem;
+    text-align: left;
+}
+input {
+    background-color: rgba(0.1, 0.1, 0.1, 0.1);
+    border: none
+}
+input:hover {
+    background-color: rgba(0.1, 0.1, 0.1, 0.1);
+}
+main {
+    width : 20rem;
+    align-self: center;
+    display: flex;
+    align-content: center;
+    flex-direction: column;
+}
+div { 
+    flex-direction: column;
+    display: flex;
+}
+</style>

front/vue.config.js

@@ -0,0 +1,4 @@
+const { defineConfig } = require('@vue/cli-service')
+module.exports = defineConfig({
+  transpileDependencies: true
+})