Do not show password: #255

src-admin/src/App.tsx

@@ -25,6 +25,8 @@ import {
     type GenericAppProps,
     type GenericAppState,
     type IobTheme,
+    SaveCloseButtons,
+    DialogConfirm,
 } from '@iobroker/adapter-react-v5';
 import { clone, getText } from './Utils';
 
@@ -505,6 +507,9 @@ class App extends GenericApp<GenericAppProps, AppState> {
                 instance={this.instance}
                 matter={this.state.matter}
                 showToast={(text: string) => this.showToast(text)}
+                onError={(errorText: string): void => {
+                    this.setConfigurationError(errorText);
+                }}
             />
         );
     }
@@ -669,6 +674,47 @@ class App extends GenericApp<GenericAppProps, AppState> {
         );
     }
 
+    renderSaveCloseButtons(): React.JSX.Element | null {
+        if (!this.state.confirmClose && !this.state.bottomButtons) {
+            return null;
+        }
+
+        return (
+            <>
+                {this.state.bottomButtons ? (
+                    <SaveCloseButtons
+                        theme={this.state.theme}
+                        newReact={this.newReact}
+                        noTextOnButtons={
+                            this.state.width === 'xs' || this.state.width === 'sm' || this.state.width === 'md'
+                        }
+                        changed={this.state.changed}
+                        onSave={(isClose: boolean): Promise<void> => this.onSave(isClose)}
+                        onClose={() => {
+                            if (this.state.changed) {
+                                this.setState({ confirmClose: true });
+                            } else {
+                                GenericApp.onClose();
+                            }
+                        }}
+                        error={!!this.state.isConfigurationError}
+                    />
+                ) : null}
+                {this.state.confirmClose ? (
+                    <DialogConfirm
+                        title={I18n.t('ra_Please confirm')}
+                        text={I18n.t('ra_Some data are not stored. Discard?')}
+                        ok={I18n.t('ra_Discard')}
+                        cancel={I18n.t('ra_Cancel')}
+                        onClose={(isYes: boolean): void =>
+                            this.setState({ confirmClose: false }, () => isYes && GenericApp.onClose())
+                        }
+                    />
+                ) : null}
+            </>
+        );
+    }
+
     render(): React.JSX.Element {
         if (!this.state.ready) {
             return (

src-admin/src/Tabs/Options.tsx

@@ -20,7 +20,7 @@ import {
     Typography,
 } from '@mui/material';
 
-import { Check, Close, LayersClear, AutoAwesome, Clear, VisibilityOff, Visibility } from '@mui/icons-material';
+import { Check, Close, LayersClear, AutoAwesome, Clear } from '@mui/icons-material';
 
 import { type AdminConnection, I18n, Logo } from '@iobroker/adapter-react-v5';
 
@@ -43,7 +43,7 @@ const styles: Record<string, React.CSSProperties> = {
         marginTop: 2,
         marginBottom: 1,
         width: '100%',
-        maxWidth: 500,
+        maxWidth: 250,
     },
     inputLong: {
         marginTop: 2,
@@ -79,16 +79,17 @@ interface OptionsProps {
     /** The current matter config */
     matter: MatterConfig;
     onShowWelcomeDialog: () => void;
+    onError: (errorText: string) => void;
 }
 
 interface OptionsState {
     showDialog: boolean;
     dialogLevel: number;
     iotLogin: string;
     iotPassword: string;
+    passwordRepeat: string;
     iotInstance: string;
     interfaces?: { value: string; address?: string; address6?: string }[];
-    passVisible?: boolean;
 }
 
 function cutIpV6(address: string, length?: number): string {
@@ -111,6 +112,7 @@ class Options extends Component<OptionsProps, OptionsState> {
             dialogLevel: 0,
             iotLogin: '',
             iotPassword: '',
+            passwordRepeat: this.props.native.pass,
             iotInstance: '',
         };
     }
@@ -261,7 +263,10 @@ class Options extends Component<OptionsProps, OptionsState> {
 
     render(): React.JSX.Element {
         const item = this.state.interfaces?.find(it => it.value === (this.props.native.interface || '_'));
-        const passwordError = Options.checkPassword(this.props.native.pass);
+        const passwordError =
+            this.props.native.pass !== this.state.passwordRepeat
+                ? I18n.t('Password repeat is not equal to password')
+                : Options.checkPassword(this.props.native.pass);
 
         const bridge = this.props.matter.bridges.find(bridge => bridge.uuid === this.props.native.defaultBridge) || {
             uuid: '_',
@@ -425,7 +430,7 @@ class Options extends Component<OptionsProps, OptionsState> {
                         )}
                     </InfoBox>
                 </div>
-                <div style={{ display: 'flex', alignItems: 'baseline' }}>
+                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, flexWrap: 'wrap' }}>
                     <TextField
                         variant="standard"
                         label={I18n.t('ioBroker.pro Login')}
@@ -448,14 +453,14 @@ class Options extends Component<OptionsProps, OptionsState> {
                                 ) : null,
                             },
                         }}
-                        style={{ ...styles.input, marginRight: 16 }}
+                        style={styles.input}
                     />
                     <TextField
                         variant="standard"
                         label={I18n.t('ioBroker.pro Password')}
                         error={!!passwordError}
-                        autoComplete="current-password"
                         style={styles.input}
+                        autoComplete="current-password"
                         slotProps={{
                             htmlInput: {
                                 autocomplete: 'new-password',
@@ -464,29 +469,88 @@ class Options extends Component<OptionsProps, OptionsState> {
                                 endAdornment: this.props.native.pass ? (
                                     <IconButton
                                         size="small"
-                                        onClick={() => this.setState({ passVisible: !this.state.passVisible })}
+                                        onClick={() => {
+                                            void this.props.onChange('pass', '');
+                                            if (this.state.passwordRepeat !== '') {
+                                                this.props.onError(I18n.t('Password repeat is not equal to password'));
+                                            } else {
+                                                this.props.onError('');
+                                            }
+                                        }}
                                     >
-                                        {this.state.passVisible ? <VisibilityOff /> : <Visibility />}
+                                        <Clear />
                                     </IconButton>
                                 ) : null,
                             },
                         }}
                         value={this.props.native.pass}
-                        type={this.state.passVisible ? 'text' : 'password'}
+                        type="password"
                         helperText={passwordError || ''}
-                        onChange={e => this.props.onChange('pass', e.target.value)}
+                        onChange={e => {
+                            void this.props.onChange('pass', e.target.value);
+                            if (this.state.passwordRepeat !== e.target.value) {
+                                this.props.onError(I18n.t('Password repeat is not equal to password'));
+                            } else {
+                                this.props.onError('');
+                            }
+                        }}
                         margin="normal"
                     />
+                    <TextField
+                        variant="standard"
+                        label={I18n.t('Password repeat')}
+                        error={!!passwordError}
+                        autoComplete="current-password"
+                        style={styles.input}
+                        slotProps={{
+                            htmlInput: {
+                                autocomplete: 'new-password',
+                            },
+                            input: {
+                                endAdornment: this.state.passwordRepeat ? (
+                                    <IconButton
+                                        size="small"
+                                        onClick={() => {
+                                            this.setState({ passwordRepeat: '' });
+                                            if (this.props.native.pass !== '') {
+                                                this.props.onError(I18n.t('Password repeat is not equal to password'));
+                                            } else {
+                                                this.props.onError('');
+                                            }
+                                        }}
+                                    >
+                                        <Clear />
+                                    </IconButton>
+                                ) : null,
+                            },
+                        }}
+                        value={this.state.passwordRepeat}
+                        type="password"
+                        helperText={passwordError || ''}
+                        onChange={e => {
+                            if (this.props.native.pass !== e.target.value) {
+                                this.props.onError(I18n.t('Password repeat is not equal to password'));
+                            } else {
+                                this.props.onError('');
+                            }
+                            this.setState({ passwordRepeat: e.target.value });
+                        }}
+                        margin="normal"
+                    />
+                </div>
+                <div>
                     {this.state.iotInstance &&
                     (this.state.iotPassword !== this.props.native.pass ||
+                        this.state.iotPassword !== this.state.passwordRepeat ||
                         this.state.iotLogin !== this.props.native.login) ? (
                         <Button
-                            style={{ marginLeft: 16 }}
                             variant="contained"
                             color="primary"
                             onClick={async () => {
-                                await this.props.onChange('login', this.state.iotLogin);
-                                await this.props.onChange('pass', this.state.iotPassword);
+                                void this.props.onChange('login', this.state.iotLogin);
+                                void this.props.onChange('pass', this.state.iotPassword);
+                                this.props.onError('');
+                                this.setState({ passwordRepeat: this.state.iotPassword });
                             }}
                         >
                             {I18n.t('Sync credentials with %s', this.state.iotInstance.replace('system.adapter.', ''))}

src-admin/src/i18n/de.json

@@ -109,6 +109,7 @@
     "Pairing Info Text": "Erkennen von Geräten in Ihrem IP-Netzwerk. \nBitte stellen Sie sicher, dass der ioBroker-Host im Netzwerk und im Netzwerk der zu erkennenden Geräte frei UDP-Nachrichten senden und empfangen kann. \nSetzen Sie die Geräte bei Bedarf auf die Werkseinstellungen zurück oder schalten Sie sie aus und wieder ein.",
     "Pairing Info Text BLE": "Erkennen von Geräten in Ihrem IP-Netzwerk und über BLE. \nBitte stellen Sie sicher, dass der ioBroker-Host im Netzwerk und im Netzwerk der zu erkennenden Geräte frei UDP-Nachrichten senden und empfangen kann. \nSetzen Sie die Geräte bei Bedarf auf die Werkseinstellungen zurück oder schalten Sie sie aus und wieder ein.",
     "Password repeat": "Passwort wiederholen",
+    "Password repeat is not equal to password": "Passwortwiederholung ist nicht gleich Passwort",
     "Please DO NOT use the QR code / pairing code that is printed on the Matter device.": "Bitte verwenden Sie NICHT den QR-Code/Pairing-Code, der auf dem Matter-Gerät aufgedruckt ist",
     "Please confirm": "Bitte bestätigen",
     "Please scan this QR-Code with the App of the ecosystem you want to pair it to or use the below printed setup code.": "Bitte scannen Sie diesen QR-Code mit der App des Ökosystems, mit dem Sie es koppeln möchten, oder verwenden Sie den unten aufgedruckten Setup-Code.",

src-admin/src/i18n/en.json

@@ -109,6 +109,7 @@
     "Pairing Info Text": "Discovering devices in your IP network. \nPlease make sure that he ioBroker host can freely send and receive UDP messages in the network and in the network of the devices to discover. \nIf needed reset the devices to factory settings or power cycle them.",
     "Pairing Info Text BLE": "Discovering devices in your IP network and via BLE. \nPlease make sure that he ioBroker host can freely send and receive UDP messages in the network and in the network of the devices to discover. \nIf needed reset the devices to factory settings or power cycle them.",
     "Password repeat": "Password repeat",
+    "Password repeat is not equal to password": "Password repeat is not equal to password",
     "Please DO NOT use the QR code / pairing code that is printed on the Matter device.": "Please DO NOT use the QR code / pairing code that is printed on the Matter device.",
     "Please confirm": "Please confirm",
     "Please scan this QR-Code with the App of the ecosystem you want to pair it to or use the below printed setup code.": "Please scan this QR-Code with the App of the ecosystem you want to pair it to or use the below printed setup code.",

src-admin/src/i18n/es.json

@@ -109,6 +109,7 @@
     "Pairing Info Text": "Descubriendo dispositivos en su red IP. \nAsegúrese de que el host de ioBroker pueda enviar y recibir mensajes UDP libremente en la red y en la red de los dispositivos a descubrir. \nSi es necesario, restablezca los dispositivos a la configuración de fábrica o reinícielos.",
     "Pairing Info Text BLE": "Descubriendo dispositivos en su red IP y vía BLE. \nAsegúrese de que el host de ioBroker pueda enviar y recibir mensajes UDP libremente en la red y en la red de los dispositivos a descubrir. \nSi es necesario, restablezca los dispositivos a la configuración de fábrica o reinícielos.",
     "Password repeat": "Repetición de contraseña",
+    "Password repeat is not equal to password": "La repetición de contraseña no es igual a la contraseña",
     "Please DO NOT use the QR code / pairing code that is printed on the Matter device.": "NO utilice el código QR/código de emparejamiento que está impreso en el dispositivo Matter.",
     "Please confirm": "Por favor confirmar",
     "Please scan this QR-Code with the App of the ecosystem you want to pair it to or use the below printed setup code.": "Escanee este código QR con la aplicación del ecosistema con el que desea vincularlo o utilice el código de configuración impreso a continuación.",

src-admin/src/i18n/fr.json

@@ -109,6 +109,7 @@
     "Pairing Info Text": "Découverte des appareils de votre réseau IP. \nVeuillez vous assurer que l'hôte ioBroker peut envoyer et recevoir librement des messages UDP sur le réseau et sur le réseau des appareils à découvrir. \nSi nécessaire, réinitialisez les appareils aux paramètres d'usine ou redémarrez-les.",
     "Pairing Info Text BLE": "Découverte des appareils dans votre réseau IP et via BLE. \nVeuillez vous assurer que l'hôte ioBroker peut envoyer et recevoir librement des messages UDP sur le réseau et sur le réseau des appareils à découvrir. \nSi nécessaire, réinitialisez les appareils aux paramètres d'usine ou redémarrez-les.",
     "Password repeat": "Répéter le mot de passe",
+    "Password repeat is not equal to password": "La répétition du mot de passe n'est pas égale au mot de passe",
     "Please DO NOT use the QR code / pairing code that is printed on the Matter device.": "Veuillez NE PAS utiliser le code QR / code d'appairage imprimé sur l'appareil Matter.",
     "Please confirm": "Veuillez confirmer",
     "Please scan this QR-Code with the App of the ecosystem you want to pair it to or use the below printed setup code.": "Veuillez scanner ce QR-Code avec l'application de l'écosystème auquel vous souhaitez le coupler ou utiliser le code de configuration imprimé ci-dessous.",

src-admin/src/i18n/it.json

@@ -109,6 +109,7 @@
     "Pairing Info Text": "Rilevamento dei dispositivi nella tua rete IP. \nAssicurati che l'host ioBroker possa inviare e ricevere liberamente messaggi UDP nella rete e nella rete dei dispositivi da rilevare. \nSe necessario, ripristina i dispositivi alle impostazioni di fabbrica o spegnili e spegnili.",
     "Pairing Info Text BLE": "Rilevamento dei dispositivi nella tua rete IP e tramite BLE. \nAssicurati che l'host ioBroker possa inviare e ricevere liberamente messaggi UDP nella rete e nella rete dei dispositivi da rilevare. \nSe necessario, ripristina i dispositivi alle impostazioni di fabbrica o spegnili e spegnili.",
     "Password repeat": "Ripetizione password",
+    "Password repeat is not equal to password": "La ripetizione della password non è uguale alla password",
     "Please DO NOT use the QR code / pairing code that is printed on the Matter device.": "Si prega di NON utilizzare il codice QR/codice di associazione stampato sul dispositivo Matter.",
     "Please confirm": "Per favore conferma",
     "Please scan this QR-Code with the App of the ecosystem you want to pair it to or use the below printed setup code.": "Scansiona questo codice QR con l'app dell'ecosistema a cui desideri associarlo o utilizza il codice di configurazione stampato di seguito.",

src-admin/src/i18n/nl.json

@@ -109,6 +109,7 @@
     "Pairing Info Text": "Apparaten in uw IP-netwerk ontdekken. \nZorg ervoor dat de ioBroker-host vrijelijk UDP-berichten kan verzenden en ontvangen in het netwerk en in het netwerk van de te ontdekken apparaten. \nReset indien nodig de apparaten naar de fabrieksinstellingen of schakel ze uit en weer in.",
     "Pairing Info Text BLE": "Apparaten ontdekken in uw IP-netwerk en via BLE. \nZorg ervoor dat de ioBroker-host vrijelijk UDP-berichten kan verzenden en ontvangen in het netwerk en in het netwerk van de te ontdekken apparaten. \nReset indien nodig de apparaten naar de fabrieksinstellingen of schakel ze uit en weer in.",
     "Password repeat": "Wachtwoord herhalen",
+    "Password repeat is not equal to password": "Wachtwoord herhalen is niet gelijk aan wachtwoord",
     "Please DO NOT use the QR code / pairing code that is printed on the Matter device.": "Gebruik NIET de QR-code/koppelingscode die op het Matter-apparaat staat.",
     "Please confirm": "Bevestig alstublieft",
     "Please scan this QR-Code with the App of the ecosystem you want to pair it to or use the below printed setup code.": "Scan deze QR-code met de app van het ecosysteem waaraan u deze wilt koppelen of gebruik de hieronder afgedrukte installatiecode.",