aalug / blog_vue Goto Github PK

Add an option to change the color theme by adding a color picker to the navbar. Users can then choose two colors which will be sent to the App.vue component. Appropriate styles should be changed to the ones chosen by the user.

The chosen color values should be stored in the local storage for persistence.

Add navigation guards so the:

• not logged-in users cannot enter the profile page
• logged-in user cannot enter the sign-up and login page
• user that is not a staff member (user.isStaff == false) cannot enter the create-post page

Handle displaying post images on the post details page.
It should be a carousel and display all post images (sent in response JSON as images).
Add a feature so that on image hover, the image title is shown.

Add an all-posts page. There should be an option to sort posts and filter them by tags - both of these are already set up in the backend.
There should also be pagination present.

Handle password reset. Add a 'forgot password?' link to the login page. Then take the given email and send it to the server. The server will send an email with a link that will take the user to the new reset password page where they will enter a new password and if the encoded pk and token are valid, a new password will be set.

Create a page where users can create an account.
Use Pinia's store to handle user registration.

Create a 'create a new post' page where staff members can add new posts. (endpoint /api/post/posts/)
There should be an option to add as many post images as the user wants - send them one by one to a different endpoint than the post itself (/api/post/postimages/)

Create a post details page. There should be a post details section and comments section. The comments section should be divided into add a comment and already written comments.

Add a user profile page where the user should be able to update their password and user profile information.

Handle editing post comments. There should be an edit button on a comment if the comment author is a logged-in user.
After clicking on this button, a dialog should pop up where old text is displayed and the user is able to edit the comment's text.

Create the home page that will display the first page of api/post/posts/.

Add an option to log out by creating a function in the users store. This function should just remove the token from the local storage and refresh the page to reflect the changes.

An option should be provided on the post detail page to navigate to the edit post page. On this page, all fields should be pre-filled with the initial post data. If at least one field is modified by the user, a function should be triggered to send a patch request to the server with the updated data.

Furthermore, on the edit post page, the post images should be editable by the user by allowing them to set a new title or delete the image.

Handle deleting post comments. There should be a delete button on a comment if the comment author is a logged-in user.

Create a page where users can login.
Use Pinia's store to handle it.

Handle voting on comments. Create a function that will send appropriate POST request.

Handle adding a new comment to the post.