feat: Migrate lablup-terms-of-service to React TermsOfServiceModal

[inureyes]

⚠️ Before implementing, read and follow the Implementation Rules in the epic issue #5364. These rules cover mandatory patterns for React component structure, BAI component usage, reactToWebComponent bridge, state management, i18n, error handling, styling, and code quality. The reference implementation is react/src/components/SignupModal.tsx.

Goal: Complete Lit file removal. Each migration must fully replace the Lit source file with React — not just the dialog parts. The migrated Lit .ts file and its type declarations must be deleted. This epic is a critical step toward removing all Lit/MWC/Vaadin dependencies from the codebase.

Description

Migrate lablup-terms-of-service.ts (Lit-Element) to a React component. This component displays Terms of Service and Privacy Policy documents with language selection, loaded dynamically from HTML files.

Part of epic #5364 — Phase 2 (Auth-adjacent components)

Current Implementation

File: src/components/lablup-terms-of-service.ts

Dialog: #terms-of-service-dialog

• Attributes: fixed, blockscrolling, persistent, scrollable
• Header action: mwc-select for language selection (Korean, English)
• Content: DOMPurify-sanitized HTML loaded from /resources/documents/{entry}.{lang}.html
• Footer: Close button

State:

• tosEntry: 'terms-of-service' | 'privacy-policy'
• tosLanguage: 'en' | 'ko'
• tosLanguages: Array of {code, text}
• tosContent: HTML string (sanitized)
• title: Dynamic title
• show, block: boolean flags

Dynamic Property Updates:

dialog.backdrop = true;
dialog.scrimClickAction = '';

Data Loading Flow:

1. Parent calls receiveTOSAgreement() or receivePPAgreement()
2. Set tosEntry and title
3. Fetch /resources/documents/{tosEntry}.{tosLanguage}.html
4. Sanitize with DOMPurify
5. Inject into content div
6. Show dialog

Event Listeners:

• didShow / didHide for state synchronization

Note: A React TermsOfServiceModal already exists at react/src/components/TermsOfServiceModal.tsx — review and extend if needed rather than creating from scratch.

Migration Plan

1. Review existing react/src/components/TermsOfServiceModal.tsx
2. Ensure it supports both TOS and Privacy Policy modes
3. Add language selector (BAISelect with language options)
4. Implement dynamic HTML content loading with DOMPurify
5. Register as <backend-ai-react-terms-of-service> via reactToWebComponent
6. Update parent components (backend-ai-signup, backend-ai-login) to use the React version
7. Remove Lit version

Component Mapping

Current (Lit)	Target (React)
backend-ai-dialog	BAIModal
mwc-select + mwc-list-item	BAISelect or Ant Design Select
mwc-button	BAIButton
Manual HTML injection	dangerouslySetInnerHTML with DOMPurify
Dynamic property updates	React state + props

Acceptance Criteria

• TermsOfServiceModal supports both TOS and Privacy Policy
• Language selection works (at minimum: English, Korean)
• HTML content loaded dynamically and sanitized
• Scrollable content area
• Registered as web component for backward compatibility
• Used by both signup and login flows
• i18n translations preserved