Authentication, Routing, and Forum Structure Enhancements

[TheRealLowyer]

Overview:

This pull request introduces essential features for user authentication (Login, Register, Token Validation) alongside the implementation of various components including Subforum Pages, Forum structure, Header adjustments, and Router configuration.

Changes Made

1. Authentication Wrapper (AuthWrapper):

• The AuthWrapper is a high-level component responsible for managing authentication across the application. It ensures that users are authenticated by validating their token before allowing access to specific routes or actions.
• On app load, the AuthWrapper checks if the user is logged in by retrieving the token from local storage. If the token exists, it sends it to the backend to verify its validity.
• If the token is valid, it stores the user’s profile and permissions in the global context, making it accessible throughout the app.

2. Login & Register Pages:

• These pages provide the UI for user authentication and registration.
• On successful login or registration, the received JWT token is stored in localStorage, and the AuthWrapper manages the token’s lifecycle from there.
• Both pages include form validation (email, password checks) before sending the data to the backend.

3. Subforum Pages:

• Each subforum page dynamically renders posts from the selected forum. The page fetches posts based on the forumName from the route parameters.
• Pagination and sorting options are available to display posts in a user-friendly manner.
• Filtering and sorting options such as "New" or "Hottest" posts are implemented to improve user navigation within subforums.

4. Forum Components:

• The forum structure is divided into various reusable components:
• Post Component: Renders individual posts, including details like description, like/dislike counts, comments, etc.
• Comments Component: Displays user comments for each post and provides options to add new comments.
• Sorting Component: Allows users to sort posts based on criteria (New/Hottest) and highlights the active sorting method.

5. Routing (Routers):

• React Router DOM is used to manage the navigation between pages.
• Protected routes are introduced to ensure certain pages (like Subforum, Profile) are accessible only if the user is authenticated.
• The router setup includes paths for:
• /login: For the login page.
• /register: For the registration page.
• /subforums/:forumName: For browsing subforums and displaying posts related to the forum.
• /Home: page with general navigation.

6. Implemented validate-token Endpoint:

• A new backend API endpoint /api/validate-token has been added to check the validity of the JWT token.
• When the frontend calls this endpoint (usually triggered by the AuthWrapper), the backend checks:
• If the token exists.
• If the token is still valid (i.e., not expired or tampered with).
• If the token matches a user in the database.
• On success, the backend returns user details to be stored on the client side.
• If the token is invalid, an appropriate response is returned, and the frontend logs the user out.