97 lines
5.1 KiB
Markdown
97 lines
5.1 KiB
Markdown
# 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
|
|
|
|
### Login TOTP Page
|
|
|
|
### Anonymous
|
|
|
|
### Admin logged in
|
|
|
|
### User logged in
|
|
|
|
### Admin TOTP logged in
|
|
|
|
### Create a post
|
|
|
|
### Create a comment
|
|
|
|
### Edit a comment
|
|
|
|
### Set interesting a comment
|
|
|
|
|
|
## Users Credentials
|
|
|
|
- AdminUno, PasswordAdmin1
|
|
- AdminDue, PasswordAdmin2
|
|
- UtenteUno, PasswordUtente1
|
|
- UtenteDuo, PasswordUtente2
|
|
- UtenteTre, PasswordUtente3
|
|
|
|
|