Settings

The settings component manages user preferences, provides functionality for updating the app's theme (dark/light mode), changing the user's password, and logging out and clearing authentication data.

The React component handles both UI and backend logic for user perferences and password management.

Key Features

1. Password Management

• Allows users to change their current password.
• Validates password inputs i.e. matching confirmation, non-empty fields
• Sends a POST resquest to /changePassword

2. Theme Management

• Toggles between dark and light themes.
• Sends a POST request to /changeLightingMode to sync preference with the backend

3. Logout

• Provides a logout button
• Calls logout() to clear tokens and reset the app state.

4. Following Management

• Allows users to see and unfollow the other users they are following.

Default Settings

const defaultSettings = {
    theme: "dark",
    allowExplicit: true,
    autoplayPreview: true,
};

Dependencies

• React-Hooks: useState, useEffect, and useMemo
• React-Bootstrap - for layout and UI components
• Custom Components:
  • ThemeSwitch - handles dark/light mode toggling
  • FollowingPopup - manages the user's following list
• Backend API endpoints:
  • POST /changePassword
  • POST /changeLightingMode
  • POST /logout

Functions

• readSettings() - Reads and parses stored settings from localStorage.
  • If no settings exists or parsing fail, it goes back to default.
• writeSettings(data) - Writes user settings to localStorage
• logout()
  • sends a POST request to the backend (/logout)
  • clearing localStorage and user data
  • redirects to login page

Event Handlers

handleSubmit(event)

• Prevents form default submission
• Validates user input for the password fields.
• Sends POST request to htttp://localhost:3001/changePassword
• Handles response codes (200, 403, 404, 500)

onChange(event)

• Updates the formData variable as user types in the input fields.

handleThemeChange(event)

• Updates the app theme based on user selection

useEffect

• Updates user's lighting mode in the backend whenever the theme changes.

onSave(event)

• Writes updated settings to localStorage and provides confirmation feeback.

onReset()

• Restores all settings to their default values.

---

Variables	Description
settings	Stores the current data for settings
saved	Boolean to show save confirmation feedback
formData	Holds input data for the password change form
msg	Displays messages for password change results
theme	Tracks the theme mode (dark/light

---

FollowingPopup.jsx

The FollowingPopup component displays a modal-style popup that shows the list of users the current user is following. It allows the user to view, manage, and unfollow accounts directly within the interface. This component retrieves the current user's identity from a cookie-based token and communicates with the backend endpoints to load and update following data.

Key Features

1. Following list

• Retrieves the current user's following list from the backend via POST /getFollowing
• Displays the list in a scrollable popup window.

2. Unfollow Functionality

• Allows the user to remove accounts they follow.
• Sends a POST /removeFollowing request to update the backend
• Updates the frontend list immediately after a successful response

3. Token-Based User Identification

• Extracts a JWT token from browser cookies
• Decodes the token to obtain the logged-in username for authentication backend requests.

Functions

getCookie(name) Purpose: Retrieve the value of a specific cookie from document.cookie

getCurrentUser() Purpose: Extracts and decodes the JWT token stored as a cookie named token Returns: The username encoded in the token payload or null if no token is found.

unfollowServer(followingUsername) Purpose: Removes a user from the current user's following list both on the frontend and backend.

Render Logic

• When isOpen is false, the component returns null
• When isOpen is true, it renders:
  • A popup card containing:
    • Header with "Following" title and a close ("x") button.
    • Loading or error messages from status
    • A scrollable list of usernames with "Unfollow" buttons.