2025-06-28 18:31:48 +02:00
2025-06-28 18:31:48 +02:00
2025-06-28 18:31:48 +02:00
2025-06-28 18:31:48 +02:00
2025-06-28 18:31:48 +02:00
2025-06-28 18:31:48 +02:00

Exam #1: "Forum"

React Client Application Routes

  • Route /: Navigation bar at the top, list of posts and comments based on login (registered user or anonymous). Button to add a new post if logged in, several buttons to edit, delete, add comments based on the role (owner or logged OTP). If no role is matched the buttons are not displayed. If the max number of comments under a post is reached the button is disabled.
  • Route /add/post: The page described at route '/', there is a pop up form to add a new post at the beginning of the page.
  • Route /add/:postid/comment: The page described at route '/', there is a pop up form to add a new comment at the beginning of the page.
  • Route /edit/:commentid: The page described at route '/', there is a pop up form to edit the text of a comment at the beginning of the page.
  • Route /login: Login form on an a different page. If already logged in the user will see the OTP login with the code, otherwise the normal one with username and password.

API Server

  • GET /api/posts: return the list of posts and comments.
  • POST /api/posts: create a new post.
    • request body: title, text, max number of comments.
    • response body: post object succesfully created.
  • POST /api/posts/:id/comments: create a new comment under a post.
    • request parameters: id of the post that the user commented.
    • response body: comment object succesfully created.
  • POST /api/posts/:id/comments/:commentId/interest: set "interesting" a comment.
    • request parameters: id of the post and id of the related comment that the user find interesting.
  • DELTE /api/posts/:id/comments/:commentId/interest: remove "interesting" from a comment.
    • request parameters: id of the post and id of the related comment that the user does not find interesting anymore.
  • PATCH /api/posts/:id/comments/:commentId: edit the text of a comment.
    • request parameters: id of the post and id of the related comment that the user edited.
    • request body: new text of the comment
  • DELETE /api/posts/:id: delete a given post.
    • request parameters: id of the post that the user wants to delete.
  • DELETE /api/posts/:id/comments/:commentId: delete a given comment.
    • request parameters: id of the post and id of the related comment that the user wants to delete.
  • POST /api/sessions: Login via username and password.
    • response body: user informations retrieved.
  • POST /api/login-totp: TOTP authentication (only for Admin users.)
    • request body: code of TOTP.
  • GET /api/sessions/current: Retrieve info about loggedin user.
    • response body: user informations retrieved.
  • DELETE /api/sessions/current: Logout.

Database Tables

  • Table User:

    • Columns: ID, Username, Password, Salt, Secret, Type.
    • Contains the users registered to the forum. The Type field specify which one are administrators.
  • Table Post:

    • Columns: Title, ID, AuthorID, MaxComments, Publication, Text
    • Contains the posts created inside the forum, in particular the title is unique but the ID column is still used as primary key.
  • Table Comment:

    • Columns: ID, Text, Publication, AuthorID, PostID
    • Contains the comments created inside the forum, each comment is binded to a post with the PostID column and to the author with the AuthorID column.
  • Table Interesting:

    • Columns: UserID, CommentID
    • Contains which user found interesting which comment. It is a many to many relationship and the two columns UserID and CommentID are used as primary keys together in order to make unique the relationship.

Main React Components

  • ForumTable (in Forum.jsx): iterates the posts array in order to generate all the posts and comments retrieved from the API.
  • Post (in Forum.jsx): create the post element with the information contained in postData passed by ForumTable.
  • Comment (in Forum.jsx): create the comment element with the information contained in commentData passed by Post.
  • CommentForm (in CommentEdit.jsx): create the form to add a new comment or edit an existing one and handle the submit.
  • PostForm (in CommentEdit.jsx): create the form to add a new post and handle the submit.
  • TotpForm (in Auth.jsx): create the form to perform the TOTP login and handle the submit
  • LoginForm (in Auth.jsx): create the form to perform the login and handle the submit.

Screenshot

Login Page

Screenshot

Login TOTP Page

Screenshot

Anonymous

Screenshot

Admin logged in

Screenshot

User logged in

Screenshot

Admin TOTP logged in

Screenshot

Create a post

Screenshot

Create a comment

Screenshot

Edit a comment

Screenshot

Set interesting a comment

Screenshot

Users Credentials

  • AdminUno, PasswordAdmin1
  • AdminDue, PasswordAdmin2
  • UtenteUno, PasswordUtente1
  • UtenteDuo, PasswordUtente2
  • UtenteTre, PasswordUtente3
Description
No description provided
Readme 495 KiB
Languages
JavaScript 99.4%
HTML 0.6%