Add user registration and book management pages with layout templates

Jgarcia-per · Dec 30, 2024 · 758e419 · 758e419
1 parent c79c291
commit 758e419
Show file tree

Hide file tree

Showing 10 changed files with 212 additions and 57 deletions.
diff --git a/routers/v1/BookRouter.py b/routers/v1/BookRouter.py
@@ -1,16 +1,37 @@
 from typing import Annotated
 from fastapi import APIRouter, Depends, HTTPException, Path
+from fastapi.templating import Jinja2Templates
 from starlette import status
 
 from models.BookModel import Book
 from models.BookRequestModel import BookRequest
 from configs.Database import db_dependency
 from services.UserService import get_current_user
+from services.BookService import redirect_to_login
 
 BookRouter = APIRouter()
 user_dependency = Annotated[dict, Depends(get_current_user)]
 
+templates = Jinja2Templates(directory="templates/books")
 
+### Pages ###
+
+@BookRouter.get("/home", status_code=status.HTTP_200_OK)
+async def render_book_psge(request: BookRequest, db:db_dependency):
+    try:
+        user = await get_current_user(request.cookies.get('access_token'))
+        if user is None:
+            return redirect_to_login()
+
+        books = db.query(Book).all()
+
+        return templates.TemplateResponse("book.html", {"request": request, "books": books, "user": user})
+
+    except:
+        return redirect_to_login()
+
+
+### End points ###
 @BookRouter.get("/", status_code=status.HTTP_200_OK)
 async def read_all(db: db_dependency):
     """

diff --git a/routers/v1/UserRouter.py b/routers/v1/UserRouter.py
@@ -20,6 +20,10 @@
 def render_login_page(request: Request):
     return templates.TemplateResponse("login.html", {"request": request})
 
+@AuthRouter.get("/register")
+def render_register_page(request: Request):
+    return templates.TemplateResponse("register.html", {"request": request})
+
 ### ENDPOINTS ###
 @AuthRouter.post("/create", status_code=status.HTTP_201_CREATED)
 async def create_user(user: User_dependency,

diff --git a/services/BookService.py b/services/BookService.py
@@ -0,0 +1,7 @@
+from starlette.responses import RedirectResponse
+from starlette import status
+
+def redirect_to_login():
+    redirect_response = RedirectResponse(url="/v1/auth/login", status_code=status.HTTP_302_FOUND)
+    redirect_response.delete_cookie(key="access_token")
+    return redirect_response
diff --git a/static/js/base.js b/static/js/base.js
@@ -76,7 +76,7 @@
             });
 
             if (response.ok) {
-                window.location.href = '/todos/todo-page'; // Redirect to the todo page
+                window.location.href = '/v1/book/home'; // Redirect to the todo page
             } else {
                 // Handle error
                 const errorData = await response.json();
@@ -107,7 +107,7 @@
 
                 if (response.ok) {
                     // Handle success
-                    window.location.href = '/todos/todo-page'; // Redirect to the todo page
+                    window.location.href = '/v1/book/home'; // Redirect to the todo page
                 } else {
                     // Handle error
                     const errorData = await response.json();
@@ -135,9 +135,10 @@
             for (const [key, value] of formData.entries()) {
                 payload.append(key, value);
             }
+            console.log('Payload:', payload.toString())
 
             try {
-                const response = await fetch('/auth/token', {
+                const response = await fetch('/v1/auth/token', {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/x-www-form-urlencoded'
@@ -148,11 +149,13 @@
                 if (response.ok) {
                     // Handle success (e.g., redirect to dashboard)
                     const data = await response.json();
+                    console.log('Token received:', data.access_token);
                     // Delete any cookies available
                     logout();
                     // Save token to cookie
                     document.cookie = `access_token=${data.access_token}; path=/`;
-                    window.location.href = '/todos/todo-page'; // Change this to your desired redirect page
+                    console.log('Cookie set:', document.cookie);
+                    window.location.href = '/v1/book/home'; // Change this to your desired redirect page
                 } else {
                     // Handle error
                     const errorData = await response.json();
@@ -175,7 +178,7 @@
             const formData = new FormData(form);
             const data = Object.fromEntries(formData.entries());
 
-            if (data.password !== data.password2) {
+            if (data.password !== data.passwordVerify) {
                 alert("Passwords do not match");
                 return;
             }
@@ -191,7 +194,7 @@
             };
 
             try {
-                const response = await fetch('/auth', {
+                const response = await fetch('/v1/auth/create', {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json'
@@ -200,7 +203,7 @@
                 });
 
                 if (response.ok) {
-                    window.location.href = '/auth/login-page';
+                    window.location.href = '/v1/auth/login';
                 } else {
                     // Handle error
                     const errorData = await response.json();
@@ -247,5 +250,5 @@
         }
 
         // Redirect to the login page
-        window.location.href = '/auth/login-page';
+        window.location.href = '/v1/auth/login';
     };
diff --git a/templates/books/book.html b/templates/books/book.html
@@ -0,0 +1,54 @@
+{% include 'layoutBooks.html' %}
+
+<div class="container">
+    <div class="card text-center">
+        <div class="card-header">
+            Books in DataBase
+        </div>
+        <div class="card-body">
+            <h5 class="card-title">
+                List Books
+            </h5>
+            <p class="card-text">
+                Information regarding stuff that needs to be complete
+            </p>
+            <table class="table table-hover">
+                <thead>
+                    <tr>
+                        <th scope="col">#</th>
+                        <th scope="col">Info</th>
+                        <th scope="col">Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for book in books %}
+                    {% if book.complete == False %}
+                    <tr class="pointer">
+                        <td>{{loop.index}}</td>
+                        <td>{{book.title}}</td>
+                        <td>
+                            <button onclick="window.location.href='edit/book/{{book.id|}}'"
+                                type="button" class="btn btn-info">
+                                Edit
+                            </button>
+                        </td>
+                    </tr>
+                    {% else %}
+                    <tr class="pointer alert alert-success">
+                        <td>{{loop.index}}</td>
+                        <td class="strike-through-td">{{book.title}}</td>
+                        <td>
+                            <button onclick="window.location.href='edit/book/{{book.id|}}'"
+                                type="button" class="btn btn-info">
+                                Edit
+                            </button>
+                        </td>
+                    </tr>
+                    {% endif %}
+                    {% endfor %}
+                </tbody>
+            </table>
+            <a href="add/book" class="btn btn-primary">Add a new book</a>
+        </div>
+    </div>
+</div>
diff --git a/templates/books/layoutBooks.html b/templates/books/layoutBooks.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <link rel="stylesheet" type="text/css" href="{{ url_for('static', path='/css/bootstrap.css') }}">
+        <link rel="stylesheet" type="text/css" href="{{ url_for('static', path='/css/base.css') }}">
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Library</title>
+    </head>
+<body>
+    {% block content %}
+
+    {% endblock %}
+    <script src="{{ url_for('static', path='/js/jquery-slim.js') }}"></script>
+    <script src="{{ url_for('static', path='/js/popper.js') }}"></script>
+    <script src="{{ url_for('static', path='/js/bootstrap.js') }}"></script>
+    <script src="{{ url_for('static', path='/js/base.js') }}" defer></script>
+</body>
+</html>
diff --git a/templates/layout.html b/templates/layout.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <link rel="stylesheet" type="text/css" href="{{ url_for('static', path='/css/bootstrap.css') }}">
+        <link rel="stylesheet" type="text/css" href="{{ url_for('static', path='/css/base.css') }}">
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Library -users</title>
+    </head>
+<body>
+    {% block content %}
+
+    {% endblock %}
+</body>
+</html>
diff --git a/templates/user/layoutUser.html b/templates/user/layoutUser.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <link rel="stylesheet" type="text/css" href="{{ url_for('static', path='/css/bootstrap.css') }}">
+        <link rel="stylesheet" type="text/css" href="{{ url_for('static', path='/css/base.css') }}">
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Library</title>
+    </head>
+<body>
+    {% block content %}
+
+    {% endblock %}
+    <script src="{{ url_for('static', path='/js/jquery-slim.js') }}"></script>
+    <script src="{{ url_for('static', path='/js/popper.js') }}"></script>
+    <script src="{{ url_for('static', path='/js/bootstrap.js') }}"></script>
+    <script src="{{ url_for('static', path='/js/base.js') }}" defer></script>
+</body>
+</html>
diff --git a/templates/user/login.html b/templates/user/login.html
@@ -1,14 +1,6 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <link rel="stylesheet" type="text/css" href="{{ url_for('static', path='/css/bootstrap.css') }}">
-    <link rel="stylesheet" type="text/css" href="{{ url_for('static', path='/css/base.css') }}">
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login-Library</title>
-</head>
-<body>
-    <div class="container">
+{% include 'layoutUser.html' %}
+
+<div class="container">
         <div class="card">
             <div class="card-header">
                 Login
@@ -27,7 +19,7 @@
                 </form>
             </div>
             <div class="card-footer text-muted">
-                <a href="/auth/register-page"> Register? </a>
+                <a href="/v1/auth/register"> Register? </a>
           </div>
         </div>
     </div>

diff --git a/templates/user/register.html b/templates/user/register.html
@@ -1,39 +1,60 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <link rel="stylesheet" type="text/css" href="{{ url_for('static', path='/css/bootstrap.css') }}">
-    <link rel="stylesheet" type="text/css" href="{{ url_for('static', path='/css/base.css') }}">
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Register-Library</title>
-</head>
-<body>
-    <div class="container">
-        <div class="card">
-            <div class="card-header">
-                Register
-            </div>
-            <div class="card-body">
-                <form id="registerForm">
-                    <div class="form-row">
-                        <div class="form-group col-md-6">
-                            <label>Email</label>
-                            <input type="text" class="form-control"  name="email" required>
-                        </div>
-                        <div class="form-group col-md-6">
-                            <label>Username</label>
-                            <input type="text" class="form-control"  name="username" required>
-                        </div>
-                    </div>
-                    <div class="form-row">
-                        <div class="form-group col-md-6">
-                            <label>First Name</label>
-                            <input type="text" class="form-control" name="firstname" required>
-                        </div>
-                    </div>
-                </form>
-            </div>
+{% include 'layoutUser.html' %}
+
+<div class="container">
+    <div class="card">
+        <div class="card-header">
+            Register
+        </div>
+        <div class="card-body">
+            <form id="registerForm">
+                <div class="form-row">
+                    <div class="form-group col-md-6">
+                        <label>Email</label>
+                        <input type="text" class="form-control"  name="email" required>
+                    </div>
+                    <div class="form-group col-md-6">
+                        <label>Username</label>
+                        <input type="text" class="form-control"  name="username" required>
+                    </div>
+                </div>
+                <div class="form-row">
+                    <div class="form-group col-md-6">
+                        <label>First Name</label>
+                        <input type="text" class="form-control" name="firstname" required>
+                    </div>
+                </div>
+                <div class="form-row">
+                    <div class="form-group col-md-6">
+                        <label>Last Name</label>
+                        <input type="text" class="form-control" name="lastname" required>
+                    </div>
+                </div>
+                <div class="form-row">
+                    <div class="form-group col-md-6">
+                        <label>Role</label>
+                        <input type="text" class="form-control" name="role" required>
+                    </div>
+                </div>
+                <div class="form-row">
+                    <div class="form-group col-md-6">
+                        <label>Phone Number</label>
+                        <input type="text" class="form-control" name="phone_number" autocomplete="phone_number" required>
+                    </div>
+                </div>
+                <div class="form-row">
+                    <div class="form-group col-md-6">
+                        <label>Password</label>
+                        <input type="password" class="form-control" name="password" autocomplete="new-password" required>
+                    </div>
+                </div>
+                <div class="form-row">
+                    <div class="form-group col-md-6">
+                        <label>Verify Password</label>
+                        <input type="password" class="form-control" name="passwordVerify" autocomplete="new-password" required>
+                    </div>
+                </div>
+                <button type="submit" class="btn btn-primary">Sign in</button>
+            </form>
         </div>
     </div>
-</body>
-</html>
+</div>