fix(#235): tts connection messages and fields

Fields are required in the HTML form.

If a field is invalid (empty) then the connection error messages aren't shown; it just says that the field is required.

Author: marisademeglio

src/renderer/components/TtsEnginesConfig/index.tsx

@@ -58,20 +58,27 @@ export function TtsEnginesConfigPane({
         [engineKey: string]: string
     }>({})
 
+    const [engineStatus, setEngineStatus] = useState<{
+        [engineKey: string]: string
+    }>({})
+
     const [enginePropsChanged, setEnginePropsChanged] = useState<{
         [engineKey: string]: boolean
     }>({})
 
     useEffect(() => {
         let messages = { ...engineMessage }
-
+        let statuses = { ...engineStatus }
         for (let engineKey in pipeline.ttsEnginesStates) {
             // Note : engineKey in template is the full one
             // while in voices only the final name is given
             messages['org.daisy.pipeline.tts.' + engineKey] =
                 pipeline.ttsEnginesStates[engineKey].message
+            statuses['org.daisy.pipeline.tts.' + engineKey] =
+                pipeline.ttsEnginesStates[engineKey].status
         }
         setEngineMessage(messages)
+        setEngineStatus(statuses)
     }, [pipeline.ttsEnginesStates])
 
     let onPropertyChange = (e, propName) => {
@@ -142,7 +149,7 @@ export function TtsEnginesConfigPane({
         // TODO : add a setting to let users disable autoconnect on startup
         onChangeTtsEngineProperties(ttsProps)
     }
-
+    console.log(engineProperties)
     return (
         <>
             <p id="available-voices-label" className="label">
@@ -180,22 +187,32 @@ export function TtsEnginesConfigPane({
                                                 )
                                             })()}
                                         </label>
-                                        <input
-                                            id={propkey}
-                                            type="text"
-                                            onChange={(e) =>
-                                                onPropertyChange(e, propkey)
-                                            }
-                                            value={
-                                                engineProperties.find(
-                                                    (p) => p.key == propkey
-                                                )?.value ?? ''
-                                            }
-                                        />
+                                        <div className="input">
+                                            <input
+                                                id={propkey}
+                                                type="text"
+                                                onChange={(e) =>
+                                                    onPropertyChange(e, propkey)
+                                                }
+                                                value={
+                                                    engineProperties.find(
+                                                        (p) => p.key == propkey
+                                                    )?.value ?? ''
+                                                }
+                                                required
+                                            />
+                                            {!(engineProperties.find(
+                                                (p) => p.key == propkey
+                                            )?.value) && (
+                                                <span className="required-field-message">
+                                                    This field is required
+                                                </span>
+                                            )}
+                                        </div>
                                     </li>
                                 ))}
                             {engineMessage[engineId] && (
-                                <li className="error">
+                                <li className={engineStatus[engineId]}>
                                     {engineMessage[engineId].split('\n')
                                         .length === 1 ? (
                                         <span>{engineMessage[engineId]}</span>

src/renderer/style/settings.scss

@@ -222,6 +222,10 @@ $engineColWidth: 8rem;
         gap: calc(var(--pad) * 1.5);
         margin-top: calc(var(--pad) * 1);
         padding: 0;
+        /* don't show engine messages if the engine is disabled. they don't make sense. */
+        li:has(input:invalid) .disabled {
+            display: none;
+        }
         &>li {
             font-weight: bold;
             font-size: larger;
@@ -236,21 +240,28 @@ $engineColWidth: 8rem;
                     display: flex;
                     flex-direction: row;
 
-                    :first-child {
+                    label {
                         width: 5rem;
                     }
-                    :last-child {
+                    button, .input, .input input {
                         width: 70%;
                     }
                 }
-                .error {
+                .required-field-message, .error, .disabled {
+                    font-style: italic;
+                    font-weight: normal;
+                    color: var(--warning);
                     details {
                         width:100% !important;
                         summary {
                             width:100% !important;
                         }
                     }
                 }
+                .connecting {
+                    font-style: italic;
+                    font-weight: normal;
+                }
             }
         }
 
@@ -262,6 +273,9 @@ $engineColWidth: 8rem;
     .Disconnected::after {
         content: ' ❌';
     }
+    .required-field-message {
+        display: block;
+    }
 }
 .tts-more-options {
     display: flex;