ℹ️ Instructions

It is time to implement your second assignment. This time, you will implement the front end for the admin application, faking the sign-in process.

Running Tests

Run your tests with 

turbo dev:test-2

🎯 Goals

• ✅ Make sure all your tests pass (both from the first and second assignment)
• ✅ Make the app look as good as you can
• ✅  You must be able to explain any code in the codebase and your reviews
• 💬 Validate, discuss and approve all pull requests in your second project

💼 Requirements

This time, you have a set of basic requirements and some BONUS requirements for those up for a challenge.

💡Idea! Create a new issue in your repository, where you can track the completion of these items. Just copy-paste them into the Github issue and mark them as complete as you go. Make sure you copy the source from README.md

ADMIN HOME SCREEN

• Shows Login screen if not logged
• Shows List screen if logged
• There must be a logout button
• Clicking the logout button logs the user out
• Authenticate the current client using a hard-coded password
• Use a httpOnly cookie and name it "auth_token" to remember the signed-in state.

ADMIN LIST SCREEN

• Shows both active and inactive posts
• The article list is only accessible to logged-in users.
• There is a filter screen that allows filtering posts by:
  • Title or content
  • Tags
  • Date
  • Visibility
• You can combine multiple filters
• Users can sort posts by name or creation date, both ascending and descending
• The post list displays a list of filtered items with the following information:
• The list post item displays the image, title of the post
• The list post items display metadata such as category, tags, and "active" status.
• The active status is a button that, on click, just displays a message
• Clicking on the title takes the user to the MODIFY SCREEN, allowing the user to modify the current post
• There is a button to create new posts
• Clicking on the "Create Post" button takes the user to the CREATE SCREEN

ADMIN CREATE and UPDATE screen

Both create and update screens display the same UI, but the update screen preloads the data into fields.

• Page is only accessible to logged in user
• There must be the following fields which must be validated for errors:
  • Title (input, string)
  • Description (textarea, string, max 200 characters)
  • Content (textarea, markdown string)
  • Tag List (input, string) shows a comma-separated list of tags.
  • Image URL (input, URL)
• Under the Description is a "Preview" button that replaces the text area with a rendered markdown string and changes the title to "Close Preview".
• When the preview is closed, the cursor must be in the same position as before opening the preview.
• Under the image input is an image preview.
• User can click on the "Save" button that displays an error ui if one of the fields is not specified or valid.