feat(web): migrate Web UI from MPA to Vue 3 SPA

[Artorias17]

Description

This PR addresses the roadmap task LizardByte/roadmap#35 by migrating the Vue Web UI from MPA to SPA using Vite.

It also:

• Reorganizes Web UI files in standard Vue 3 folder structure and replaces MPA HTML files with proper SPA vue files.
• Adds a shared layout structure with persistent navbar.
• Adds routes via vue-router and so refactors some of the redundancies in the backend server code.
• Sets up the Vite dev server with HTTPS support.
• Adds a dedicated login page with session-cookie support with the basic HTTP Basic Auth using the browser prompt as fallback. (Should be removed later.)
• Refactors and completes TODOs in Config page to make it more modular.
• Adds/updates backend unit tests.
• Fixed some bugs while refactoring.
• Introduced and reused components to reduce code redundancy.
• Introduced some fallback locale entries.

Though this roadmap task was previously addressed by @TheElixZammuto in PR #3855, it went stale for almost a year. Thus, this work was done from the ground-up.

Tested some of the Web UI functionality.

Screenshot

Issues Fixed or Closed

Roadmap Issues

• Closes Sunshine: Migrate Web UI to full SPA roadmap#35

Type of Change

• feat: New feature (non-breaking change which adds functionality)
• fix: Bug fix (non-breaking change which fixes an issue)
• docs: Documentation only changes
• style: Changes that do not affect the meaning of the code (white-space, formatting, missing semicolons, etc.)
• refactor: Code change that neither fixes a bug nor adds a feature
• perf: Code change that improves performance
• test: Adding missing tests or correcting existing tests
• build: Changes that affect the build system or external dependencies
• ci: Changes to CI configuration files and scripts
• chore: Other changes that don't modify src or test files
• revert: Reverts a previous commit
• BREAKING CHANGE: Introduces a breaking change (can be combined with any type above)

Checklist

• Code follows the style guidelines of this project
• Code has been self-reviewed
• Code has been commented, particularly in hard-to-understand areas
• Code docstring/documentation-blocks for new or existing methods/components have been added or updated
• Unit tests have been added or updated for any new or modified functionality

AI Usage

See our AI usage policy.

• None: No AI tools were used in creating this PR
• Light: AI provided minor assistance (formatting, simple suggestions)
• Moderate: AI helped with code generation or debugging specific parts
• Heavy: AI generated most or all of the code changes

[sonarqubecloud]

Quality Gate failed

Failed conditions
45 New issues
C Reliability Rating on New Code (required ≥ A)
6 Duplicated Blocks on New Code (required ≤ 0)
3 New Code Smells (required ≤ 0)
42 New Bugs (required ≤ 0)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE