introduced uiText.ts

frontend/src/components/connections/ConnectModal.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState, type SyntheticEvent } from 'react'
 import { login } from '../../api/connections'
 import type { LoginRequest, ServiceType } from '../../types/connection'
+import { uiText } from '../../text/uiText'
 import '../ui/Modal.scss'
 
 interface Props {
@@ -44,7 +45,7 @@ export function ConnectModal({ serviceType, label, onClose, onSuccess }: Readonl
       await login(req)
       onSuccess()
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Login failed')
+      setError(err instanceof Error ? err.message : uiText.connections.connectModal.loginFailed)
     } finally {
       setLoading(false)
     }
@@ -53,31 +54,31 @@ export function ConnectModal({ serviceType, label, onClose, onSuccess }: Readonl
   return (
     <dialog className="modal" ref={dialogRef}>
       <div className="modal__header">
-        <h2 className="modal__title" id="modal-title">Connect to {label}</h2>
-        <button className="modal__close" onClick={onClose} aria-label="Close">×</button>
+        <h2 className="modal__title" id="modal-title">{uiText.connections.connectModal.title(label)}</h2>
+        <button className="modal__close" onClick={onClose} aria-label={uiText.modal.closeAriaLabel}>{uiText.modal.closeSymbol}</button>
       </div>
       <form className="modal__form" onSubmit={handleSubmit}>
         <div className="modal__field">
-          <label className="modal__label" htmlFor="appUrl">App URL</label>
+          <label className="modal__label" htmlFor="appUrl">{uiText.connections.connectModal.appUrlLabel}</label>
           <input id="appUrl" ref={firstInputRef} className="modal__input" type="url"
-                  placeholder="https://homebox.example.com"
+                  placeholder={uiText.connections.connectModal.appUrlPlaceholder}
                   value={appUrl} onChange={e => setAppUrl(e.target.value)} required />
         </div>
         <div className="modal__field">
-          <label className="modal__label" htmlFor="username">Username</label>
+          <label className="modal__label" htmlFor="username">{uiText.connections.connectModal.usernameLabel}</label>
           <input id="username" className="modal__input" type="text"
                   autoComplete="username"
                   value={username} onChange={e => setUsername(e.target.value)} required />
         </div>
         <div className="modal__field">
-          <label className="modal__label" htmlFor="password">Password</label>
+          <label className="modal__label" htmlFor="password">{uiText.connections.connectModal.passwordLabel}</label>
           <input id="password" className="modal__input" type="password"
                   autoComplete="current-password"
                   value={password} onChange={e => setPassword(e.target.value)} required />
         </div>
         {error && <p className="modal__error">{error}</p>}
         <button className="modal__submit" type="submit" disabled={loading}>
-          {loading ? 'Connecting…' : 'Connect'}
+          {loading ? uiText.connections.connectModal.connectingButton : uiText.connections.connectModal.connectButton}
         </button>
       </form>
     </dialog>