Adde welcome dialog: #208

src-admin/src/App.tsx

@@ -33,6 +33,7 @@ import BridgesTab from './Tabs/Bridges';
 import ControllerTab from './Tabs/Controller';
 import DevicesTab from './Tabs/Devices';
 import OptionsTab from './Tabs/Options';
+import WelcomeDialog from './components/WelcomeDialog';
 
 import type {
     CommissioningInfo,
@@ -94,12 +95,14 @@ interface AppState extends GenericAppState {
     /** Undefined if no detection ran yet */
     detectedDevices?: DetectedRoom[];
     ready: boolean;
+    showWelcomeDialog: boolean;
     progress: {
         title?: ioBroker.StringOrTranslated;
         text?: ioBroker.StringOrTranslated;
         indeterminate?: boolean;
         value?: number;
     } | null;
+    welcomeDialogShowed: boolean;
 }
 
 class App extends GenericApp<GenericAppProps, AppState> {
@@ -156,6 +159,8 @@ class App extends GenericApp<GenericAppProps, AppState> {
             },
             ready: false,
             progress: null,
+            showWelcomeDialog: false,
+            welcomeDialogShowed: false,
         });
 
         this.alert = window.alert;
@@ -254,6 +259,8 @@ class App extends GenericApp<GenericAppProps, AppState> {
 
         const alive = await this.socket.getState(`system.adapter.matter.${this.instance}.alive`);
 
+        const welcomeDialog = await this.socket.getState(`matter.${this.instance}.welcomeDialog`);
+
         if (alive?.val) {
             this.refreshBackendSubscription(true);
         }
@@ -263,6 +270,8 @@ class App extends GenericApp<GenericAppProps, AppState> {
             commissioning,
             ready: true,
             alive: !!alive?.val,
+            showWelcomeDialog: !welcomeDialog?.val,
+            welcomeDialogShowed: !!welcomeDialog?.val,
         });
     }
 
@@ -279,6 +288,28 @@ class App extends GenericApp<GenericAppProps, AppState> {
         }
     };
 
+    renderWelcomeDialog(): React.JSX.Element | null {
+        if (!this.state.showWelcomeDialog) {
+            return null;
+        }
+
+        return (
+            <WelcomeDialog
+                common={this.common}
+                instance={this.instance}
+                socket={this.socket}
+                onClose={async () => {
+                    if (!this.state.welcomeDialogShowed) {
+                        await this.socket.setState(`matter.${this.instance}.welcomeDialog`, true, true);
+                    }
+                    this.setState({ showWelcomeDialog: false, welcomeDialogShowed: true });
+                }}
+                login={this.state.native.login}
+                pass={this.state.native.pass}
+            />
+        );
+    }
+
     onBackendUpdates = (update: GUIMessage | null): void => {
         if (!update) {
             return;
@@ -441,6 +472,7 @@ class App extends GenericApp<GenericAppProps, AppState> {
                         this.updateNativeValue(id, value, resolve);
                     });
                 }}
+                onShowWelcomeDialog={() => this.setState({ showWelcomeDialog: true })}
                 onLoad={(native: Record<string, any>) => this.onLoadConfig(native)}
                 socket={this.socket}
                 common={this.common}
@@ -626,6 +658,7 @@ class App extends GenericApp<GenericAppProps, AppState> {
                 <ThemeProvider theme={this.state.theme}>
                     {this.renderToast()}
                     {this.renderProgressDialog()}
+                    {this.renderWelcomeDialog()}
                     <div
                         className="App"
                         style={{

src-admin/src/Tabs/Options.tsx

@@ -8,16 +8,18 @@ import {
     DialogActions,
     DialogContent,
     DialogTitle,
+    Fab,
     FormControl,
-    FormControlLabel,
+    FormControlLabel, IconButton,
     InputLabel,
     MenuItem,
     Select,
     TextField,
+    Tooltip,
     Typography,
 } from '@mui/material';
 
-import { Check, Close, LayersClear } from '@mui/icons-material';
+import {Check, Close, LayersClear, AutoAwesome, Clear, VisibilityOff, Visibility} from '@mui/icons-material';
 
 import { type AdminConnection, I18n, Logo } from '@iobroker/adapter-react-v5';
 
@@ -34,6 +36,7 @@ const styles: Record<string, React.CSSProperties> = {
         width: '100%',
         display: 'flex',
         flexDirection: 'column',
+        position: 'relative',
     },
     input: {
         marginTop: 2,
@@ -74,6 +77,7 @@ interface OptionsProps {
     onLoad: (native: Record<string, any>) => void;
     /** The current matter config */
     matter: MatterConfig;
+    onShowWelcomeDialog: () => void;
 }
 
 interface OptionsState {
@@ -83,6 +87,7 @@ interface OptionsState {
     iotPassword: string;
     iotInstance: string;
     interfaces?: { value: string; address?: string; address6?: string }[];
+    passVisible?: boolean;
 }
 
 function cutIpV6(address: string, length?: number): string {
@@ -265,6 +270,22 @@ class Options extends Component<OptionsProps, OptionsState> {
         return (
             <div style={styles.panel}>
                 {this.renderConfirmDialog()}
+                <Tooltip
+                    title={I18n.t('Show welcome dialog')}
+                    slotProps={{ popper: { sx: { pointerEvents: 'none' } } }}
+                >
+                    <Fab
+                        size="small"
+                        style={{
+                            position: 'absolute',
+                            top: 4,
+                            left: 80,
+                        }}
+                        onClick={this.props.onShowWelcomeDialog}
+                    >
+                        <AutoAwesome />
+                    </Fab>
+                </Tooltip>
                 <Logo
                     instance={this.props.instance}
                     common={this.props.common}
@@ -411,6 +432,21 @@ class Options extends Component<OptionsProps, OptionsState> {
                         type="text"
                         onChange={e => this.props.onChange('login', e.target.value)}
                         margin="normal"
+                        slotProps={{
+                            htmlInput: {
+                                autocomplete: 'new-password',
+                            },
+                            input: {
+                                endAdornment: this.props.native.login ? (
+                                    <IconButton
+                                        size="small"
+                                        onClick={() => this.props.onChange('login', '')}
+                                    >
+                                        <Clear />
+                                    </IconButton>
+                                ) : null,
+                            },
+                        }}
                         style={{ ...styles.input, marginRight: 16 }}
                     />
                     <TextField
@@ -419,8 +455,23 @@ class Options extends Component<OptionsProps, OptionsState> {
                         error={!!passwordError}
                         autoComplete="current-password"
                         style={styles.input}
+                        slotProps={{
+                            htmlInput: {
+                                autocomplete: 'new-password',
+                            },
+                            input: {
+                                endAdornment: this.props.native.pass ? (
+                                    <IconButton
+                                        size="small"
+                                        onClick={() => this.setState({ passVisible: !this.state.passVisible })}
+                                    >
+                                        {this.state.passVisible ? <VisibilityOff /> : <Visibility />}
+                                    </IconButton>
+                                ) : null,
+                            },
+                        }}
                         value={this.props.native.pass}
-                        type="password"
+                        type={this.state.passVisible ? 'text' : 'password'}
                         helperText={passwordError || ''}
                         onChange={e => this.props.onChange('pass', e.target.value)}
                         margin="normal"

src-admin/src/components/InfoBox.tsx

@@ -4,7 +4,7 @@ import { Info, Warning, Close, Visibility, type SvgIconComponent } from '@mui/ic
 
 interface InfoBoxProps {
     /** Text to display in the info box */
-    children: string | string[] | React.JSX.Element | React.JSX.Element[];
+    children: string | (string | React.JSX.Element | null)[] | React.JSX.Element;
     /** The type determines the color and symbol */
     type: 'warning' | 'info' | 'error';
     /** If the Box is closeable */