fix(a11y): add id/name and htmlFor to all form fields — fix browser warnings about unlabeled inputs

dental-server/dental-client/src/components/PluginsModal.jsx

@@ -67,25 +67,25 @@ export default function PluginsModal({ isOpen, onClose }) {
         )}
 
         <div className="form-group">
-          <label>Access Key *</label>
-          <input type="text" className="form-control" placeholder="Ex: AIPL5M4G..." required value={config.wasabiAccessKey} onChange={set('wasabiAccessKey')} />
+          <label htmlFor="wasabi-access-key">Access Key *</label>
+          <input id="wasabi-access-key" name="wasabiAccessKey" type="text" className="form-control" placeholder="Ex: AIPL5M4G..." required autoComplete="off" value={config.wasabiAccessKey} onChange={set('wasabiAccessKey')} />
         </div>
         <div className="form-group">
-          <label>Secret Key *</label>
-          <input type="password" className="form-control" placeholder="Sua Secret Key" required value={config.wasabiSecretKey} onChange={set('wasabiSecretKey')} />
+          <label htmlFor="wasabi-secret-key">Secret Key *</label>
+          <input id="wasabi-secret-key" name="wasabiSecretKey" type="password" className="form-control" placeholder="Sua Secret Key" required autoComplete="off" value={config.wasabiSecretKey} onChange={set('wasabiSecretKey')} />
         </div>
         <div className="form-group">
-          <label>Bucket Ativo *</label>
-          <input type="text" className="form-control" placeholder="Ex: meu-bucket-rx" required value={config.wasabiBucket} onChange={set('wasabiBucket')} />
+          <label htmlFor="wasabi-bucket">Bucket Ativo *</label>
+          <input id="wasabi-bucket" name="wasabiBucket" type="text" className="form-control" placeholder="Ex: meu-bucket-rx" required value={config.wasabiBucket} onChange={set('wasabiBucket')} />
         </div>
         <div style={{ display: 'flex', gap: 12 }}>
           <div className="form-group" style={{ flex: 1 }}>
-            <label>Região</label>
-            <input type="text" className="form-control" placeholder="Ex: us-east-1" value={config.wasabiRegion} onChange={set('wasabiRegion')} />
+            <label htmlFor="wasabi-region">Região</label>
+            <input id="wasabi-region" name="wasabiRegion" type="text" className="form-control" placeholder="Ex: us-east-1" value={config.wasabiRegion} onChange={set('wasabiRegion')} />
           </div>
           <div className="form-group" style={{ flex: 1 }}>
-            <label>Endpoint</label>
-            <input type="text" className="form-control" placeholder="Ex: s3.wasabisys.com" value={config.wasabiEndpoint} onChange={set('wasabiEndpoint')} />
+            <label htmlFor="wasabi-endpoint">Endpoint</label>
+            <input id="wasabi-endpoint" name="wasabiEndpoint" type="text" className="form-control" placeholder="Ex: s3.wasabisys.com" value={config.wasabiEndpoint} onChange={set('wasabiEndpoint')} />
           </div>
         </div>
 

dental-server/dental-client/src/components/SettingsModal.jsx

@@ -50,22 +50,22 @@ export default function SettingsModal({ isOpen, onClose }) {
     <Modal isOpen={isOpen} onClose={onClose} title="⚙️ Configurações da Conta" large={false}>
       <form onSubmit={handleSubmit}>
         <div className="form-group">
-          <label>Senha Atual (Obrigatório)*</label>
-          <input type="password" className="form-control" placeholder="Digite sua senha atual" required value={currentPassword} onChange={(e) => setCurrentPassword(e.target.value)} />
+          <label htmlFor="settings-current-password">Senha Atual (Obrigatório)*</label>
+          <input id="settings-current-password" name="currentPassword" type="password" className="form-control" placeholder="Digite sua senha atual" required autoComplete="current-password" value={currentPassword} onChange={(e) => setCurrentPassword(e.target.value)} />
         </div>
         <hr style={{ margin: '20px 0', border: 'none', borderTop: '1px solid #eee' }} />
         <p style={{ marginBottom: 15, color: '#666', fontSize: '0.9rem' }}>Preencha apenas os campos que deseja alterar:</p>
         <div className="form-group">
-          <label>Novo Nome de Usuário</label>
-          <input type="text" className="form-control" placeholder="Deixe em branco para não alterar" value={newUsername} onChange={(e) => setNewUsername(e.target.value)} />
+          <label htmlFor="settings-new-username">Novo Nome de Usuário</label>
+          <input id="settings-new-username" name="newUsername" type="text" className="form-control" placeholder="Deixe em branco para não alterar" autoComplete="username" value={newUsername} onChange={(e) => setNewUsername(e.target.value)} />
         </div>
         <div className="form-group">
-          <label>Novo E-mail de Acesso</label>
-          <input type="email" className="form-control" placeholder="Deixe em branco para não alterar" value={newEmail} onChange={(e) => setNewEmail(e.target.value)} />
+          <label htmlFor="settings-new-email">Novo E-mail de Acesso</label>
+          <input id="settings-new-email" name="newEmail" type="email" className="form-control" placeholder="Deixe em branco para não alterar" autoComplete="email" value={newEmail} onChange={(e) => setNewEmail(e.target.value)} />
         </div>
         <div className="form-group">
-          <label>Nova Senha</label>
-          <input type="password" className="form-control" placeholder="Deixe em branco para não alterar" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
+          <label htmlFor="settings-new-password">Nova Senha</label>
+          <input id="settings-new-password" name="newPassword" type="password" className="form-control" placeholder="Deixe em branco para não alterar" autoComplete="new-password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
         </div>
         <div className="form-actions">
           <button type="button" className="btn btn-secondary" onClick={onClose}>Cancelar</button>

dental-server/dental-client/src/components/TransformModal.jsx

@@ -399,8 +399,10 @@ export default function TransformModal({ isOpen, onClose, image, onSaved }) {
           {/* Área de ação */}
           <div className="transform-action-area">
             <div className="form-group">
-              <label>Nova Observação / Detalhes (Opcional):</label>
+              <label htmlFor="transform-remark">Nova Observação / Detalhes (Opcional):</label>
               <textarea
+                id="transform-remark"
+                name="remark"
                 className="form-control"
                 rows={2}
                 value={remark}
@@ -451,6 +453,7 @@ export default function TransformModal({ isOpen, onClose, image, onSaved }) {
             <h3 className="section-title">Cadastrar Nova GTO</h3>
             <div className="form-actions-inline" style={{ marginTop: 12 }}>
               <input
+                id="gto-number" name="gtoNumber"
                 type="text" className="form-control"
                 placeholder="Número/ID da GTO"
                 value={gtoNumber}
@@ -458,6 +461,7 @@ export default function TransformModal({ isOpen, onClose, image, onSaved }) {
                 style={{ flex: 1 }}
               />
               <input
+                id="gto-desc" name="gtoDesc"
                 type="text" className="form-control"
                 placeholder="Descrição (Opcional)"
                 value={gtoDesc}

dental-server/dental-client/src/components/UserManagementModal.jsx

@@ -69,16 +69,16 @@ export default function UserManagementModal({ isOpen, onClose }) {
           <h3 style={{ margin: '0 0 16px', fontSize: '1.05rem', fontWeight: 700, color: 'var(--text-primary)' }}>Cadastrar Novo Usuário</h3>
           <form onSubmit={createUser}>
             <div className="form-group">
-              <label>NOME DE USUÁRIO *</label>
-              <input type="text" required placeholder="Ex: dentista.ana" value={username} onChange={(e) => setUsername(e.target.value)} />
+              <label htmlFor="new-user-username">NOME DE USUÁRIO *</label>
+              <input id="new-user-username" name="username" type="text" required placeholder="Ex: dentista.ana" autoComplete="off" value={username} onChange={(e) => setUsername(e.target.value)} />
             </div>
             <div className="form-group">
-              <label>E-MAIL *</label>
-              <input type="email" required placeholder="ana@consultorio.com" value={email} onChange={(e) => setEmail(e.target.value)} />
+              <label htmlFor="new-user-email">E-MAIL *</label>
+              <input id="new-user-email" name="email" type="email" required placeholder="ana@consultorio.com" autoComplete="off" value={email} onChange={(e) => setEmail(e.target.value)} />
             </div>
             <div className="form-group">
-              <label>SENHA *</label>
-              <input type="password" required placeholder="Senha de acesso" value={password} onChange={(e) => setPassword(e.target.value)} />
+              <label htmlFor="new-user-password">SENHA *</label>
+              <input id="new-user-password" name="password" type="password" required placeholder="Senha de acesso" autoComplete="new-password" value={password} onChange={(e) => setPassword(e.target.value)} />
             </div>
             <div className="form-group" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
               <input type="checkbox" id="new_is_admin" checked={isAdmin} onChange={(e) => setIsAdmin(e.target.checked)} style={{ width: 16, height: 16 }} />