feat: add whether to enable self registration toggle (#760)

* refactor(frontend): extract RegistrationDisabled as reusable component
- Create RegistrationDisabled component with i18n support
- Add registrationClosed and registrationClosedMessage translations
- Replace inline JSX in App.tsx with new component
- Improve code maintainability and reusability
- Add hover effect to back button for better UX
* fix(frontend): add registration toggle to LoginModal component
- Add useSystemConfig hook to LoginModal
- Conditionally render registration button based on registration_enabled config
- Ensures consistency with HeaderBar and LoginPage registration controls
- Completes registration toggle feature implementation across all entry points
* feat(frontend): add registration toggle UI support
- Add registration disabled page in App.tsx when registration is closed
- Hide registration link in LoginPage when registration is disabled
- Add registration_enabled field to SystemConfig interface
- Frontend conditionally shows/hides registration UI based on backend config
* feat: add registration toggle feature
Add system-level registration enable/disable control:
- Add registration_enabled config to system_config table (default: true)
- Add registration check in handleRegister API endpoint
- Expose registration_enabled status in /api/config endpoint
- Frontend can use this config to conditionally show/hide registration UI
This allows administrators to control user registration without code changes.
* fix(frontend): add registration toggle to HeaderBar and RegisterPage
- Add useSystemConfig hook and registrationEnabled check to HeaderBar
- Conditionally show/hide signup buttons in both desktop and mobile views
- Add registration check to RegisterPage to show RegistrationDisabled component
- This completes the registration toggle feature across all UI components
* test(frontend): add comprehensive unit tests for registration toggle feature
- Add RegistrationDisabled component tests (rendering, navigation, styling)
- Add registrationToggle logic tests (config handling, edge cases, multi-location consistency)
- Configure Vitest with jsdom environment for React component testing
- All 80 tests passing (9 new tests for RegistrationDisabled + 21 for toggle logic)

web/src/components/landing/LoginModal.tsx

@@ -1,6 +1,7 @@
 import { motion } from 'framer-motion'
 import { X } from 'lucide-react'
 import { t, Language } from '../../i18n/translations'
+import { useSystemConfig } from '../../hooks/useSystemConfig'
 
 interface LoginModalProps {
   onClose: () => void
@@ -8,6 +9,9 @@ interface LoginModalProps {
 }
 
 export default function LoginModal({ onClose, language }: LoginModalProps) {
+  const { config: systemConfig } = useSystemConfig()
+  const registrationEnabled = systemConfig?.registration_enabled !== false
+
   return (
     <motion.div
       className="fixed inset-0 z-50 flex items-center justify-center p-4"
@@ -66,23 +70,25 @@ export default function LoginModal({ onClose, language }: LoginModalProps) {
           >
             {t('signIn', language)}
           </motion.button>
-          <motion.button
-            onClick={() => {
-              window.history.pushState({}, '', '/register')
-              window.dispatchEvent(new PopStateEvent('popstate'))
-              onClose()
-            }}
-            className="block w-full px-6 py-3 rounded-lg font-semibold text-center"
-            style={{
-              background: 'var(--brand-dark-gray)',
-              color: 'var(--brand-light-gray)',
-              border: '1px solid rgba(240, 185, 11, 0.2)',
-            }}
-            whileHover={{ scale: 1.05, borderColor: 'var(--brand-yellow)' }}
-            whileTap={{ scale: 0.95 }}
-          >
-            {t('registerNewAccount', language)}
-          </motion.button>
+          {registrationEnabled && (
+            <motion.button
+              onClick={() => {
+                window.history.pushState({}, '', '/register')
+                window.dispatchEvent(new PopStateEvent('popstate'))
+                onClose()
+              }}
+              className="block w-full px-6 py-3 rounded-lg font-semibold text-center"
+              style={{
+                background: 'var(--brand-dark-gray)',
+                color: 'var(--brand-light-gray)',
+                border: '1px solid rgba(240, 185, 11, 0.2)',
+              }}
+              whileHover={{ scale: 1.05, borderColor: 'var(--brand-yellow)' }}
+              whileTap={{ scale: 0.95 }}
+            >
+              {t('registerNewAccount', language)}
+            </motion.button>
+          )}
         </div>
       </motion.div>
     </motion.div>