@iobroker/json-config 6.17.6 → 6.17.13

package/src/JsonConfigComponent/ConfigCRON.jsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@mui/styles';
+
+import {
+    InputLabel,
+    FormControl,
+    Button,
+    TextField,
+} from '@mui/material';
+
+import { Cron as DialogCron, I18n } from '@iobroker/adapter-react-v5';
+
+import ConfigGeneric from './ConfigGeneric';
+
+const styles = () => ({
+    fullWidth: {
+        width: '100%',
+    },
+    flex: {
+        display: 'flex',
+    },
+    button: {
+        height: 48,
+        marginLeft: 4,
+        minWidth: 48,
+    },
+});
+
+class ConfigCRON extends ConfigGeneric {
+    async componentDidMount() {
+        super.componentDidMount();
+        const { data, attr } = this.props;
+        const value = ConfigGeneric.getValue(data, attr) || '';
+        this.setState({ value, showDialog: false });
+    }
+
+    renderItem(error, disabled /* , defaultValue */) {
+        const { classes, schema, attr } = this.props;
+        const { value, showDialog } = this.state;
+
+        return (
+            <FormControl className={classes.fullWidth} variant="standard">
+                {schema.label ? <InputLabel shrink>{this.getText(schema.label)}</InputLabel> : null}
+                <div className={classes.flex}>
+                    <TextField
+                        variant="standard"
+                        fullWidth
+                        value={value ?? ''}
+                        error={!!error}
+                        disabled={disabled}
+                        placeholder={this.getText(schema.placeholder)}
+                        label={this.getText(schema.label)}
+                        helperText={this.renderHelp(schema.help, schema.helpLink, schema.noTranslation)}
+                        onChange={e => {
+                            const value_ = e.target.value;
+                            this.setState({ value: value_ }, () => this.onChange(attr, value_));
+                        }}
+                    />
+                    <Button
+                        color="grey"
+                        className={this.props.classes.button}
+                        size="small"
+                        variant="outlined"
+                        onClick={() => this.setState({ showDialog: true })}
+                    >
+                        ...
+                    </Button>
+                </div>
+                {showDialog ? (
+                    <DialogCron
+                        title={I18n.t('ra_Define schedule')}
+                        simple={schema.simple}
+                        complex={schema.complex}
+                        cron={value}
+                        language={I18n.getLanguage()}
+                        onClose={() => this.setState({ showDialog: false })}
+                        cancel={I18n.t('ra_Cancel')}
+                        ok={I18n.t('ra_Ok')}
+                        onOk={value_ => this.setState({ showDialog: false, value: value_ }, () => this.onChange(attr, value_))}
+                    />
+                ) : null}
+            </FormControl>
+        );
+    }
+}
+
+ConfigCRON.propTypes = {
+    themeType: PropTypes.string,
+    themeName: PropTypes.string,
+    style: PropTypes.object,
+    className: PropTypes.string,
+    data: PropTypes.object.isRequired,
+    schema: PropTypes.object,
+    onError: PropTypes.func,
+    onChange: PropTypes.func,
+    dateFormat: PropTypes.string,
+    isFloatComma: PropTypes.bool,
+};
+
+export default withStyles(styles)(ConfigCRON);

package/src/JsonConfigComponent/ConfigCertCollection.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@mui/styles';
+
+import {
+    InputLabel,
+    MenuItem,
+    FormControl,
+    Select,
+    FormHelperText,
+} from '@mui/material';
+
+import { I18n } from '@iobroker/adapter-react-v5';
+import type { ConfigItemCertCollection } from '#JC/types';
+import ConfigGeneric, {type ConfigGenericProps, type ConfigGenericState} from './ConfigGeneric';
+
+const styles: Record<string, any> = {
+    fullWidth: {
+        width: '100%',
+    },
+};
+
+interface ConfigCertCollectionProps extends ConfigGenericProps {
+    schema: ConfigItemCertCollection;
+}
+
+interface ConfigCertCollectionState extends ConfigGenericState {
+    collectionsOptions?: string[];
+}
+
+interface CertCollection {
+    /** Source of the certificate */
+    from: string;
+    key: string;
+    cert: string;
+    chain: string[],
+    domains: string[],
+    staging?: boolean,
+    tsExpires?: number;
+}
+
+class ConfigCertCollection extends ConfigGeneric<ConfigCertCollectionProps, ConfigCertCollectionState> {
+    async componentDidMount() {
+        super.componentDidMount();
+
+        let collectionsOptions: string[];
+        const collectionsOptionsObj = await this.props.socket.getObject('system.certificates');
+        if (collectionsOptionsObj?.native?.collections) {
+            collectionsOptions = Object.keys(collectionsOptionsObj.native.collections as Record<string, CertCollection>);
+        } else {
+            collectionsOptions = [];
+        }
+        this.setState({ collectionsOptions });
+    }
+
+    renderItem(error: unknown, disabled: boolean /* , defaultValue */) {
+        if (!this.state.collectionsOptions) {
+            return null;
+        }
+        const leCollection = (ConfigGeneric.getValue(this.props.data, this.props.schema.leCollectionName || 'leCollection') || 'false').toString();
+
+        return <FormControl className={this.props.classes.fullWidth} variant="standard">
+            {this.props.schema.label ? <InputLabel shrink>{this.getText(this.props.schema.label)}</InputLabel> : null}
+            <Select
+                variant="standard"
+                error={!!error}
+                displayEmpty
+                disabled={!!disabled}
+                value={leCollection}
+                onChange={e => this.onChange(
+                    this.props.schema.leCollectionName || 'leCollection',
+                    e.target.value === 'false' ? false : (e.target.value === 'true' ? true : e.target.value),
+                )}
+            >
+                <MenuItem
+                    key="_false"
+                    value="false"
+                    style={{ fontWeight: 'bold' }}
+                >
+                    {I18n.t('ra_Do not use let\'s encrypt')}
+                </MenuItem>
+                <MenuItem
+                    key="_true"
+                    value="true"
+                    style={{ fontWeight: 'bold' }}
+                >
+                    {I18n.t('ra_Use all available let\'s encrypt certificates')}
+                </MenuItem>
+                {this.state.collectionsOptions?.map(item =>
+                    <MenuItem
+                        key={item}
+                        value={item}
+                    >
+                        {item}
+                    </MenuItem>)}
+            </Select>
+            {this.props.schema.help ? <FormHelperText>{this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}</FormHelperText> : null}
+        </FormControl>;
+    }
+}
+
+export default withStyles(styles)(ConfigCertCollection);

package/src/JsonConfigComponent/ConfigCertificateSelect.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { withStyles } from '@mui/styles';
+
+import {
+    InputLabel,
+    MenuItem,
+    FormControl,
+    Select,
+    FormHelperText,
+} from '@mui/material';
+
+import { I18n } from '@iobroker/adapter-react-v5';
+import type { ConfigItemCertificateSelect } from '#JC/types';
+import ConfigGeneric, {type ConfigGenericProps, type ConfigGenericState} from './ConfigGeneric';
+
+const styles: Record<string, any> = {
+    fullWidth: {
+        width: '100%',
+    },
+};
+
+interface ConfigCertificateSelectProps extends ConfigGenericProps {
+    schema: ConfigItemCertificateSelect;
+}
+
+interface ConfigCertificateSelectState extends ConfigGenericState {
+    selectOptions?: { label: string; value: string }[];
+}
+
+class ConfigCertificateSelect extends ConfigGeneric<ConfigCertificateSelectProps, ConfigCertificateSelectState> {
+    async componentDidMount() {
+        super.componentDidMount();
+        const value = ConfigGeneric.getValue(this.props.data, this.props.attr);
+        const certificates = await this.props.socket.getCertificates();
+
+        const selectOptions: { label: string; value: string }[] = certificates
+            .filter(el => {
+                const name = this.props.attr.toLowerCase();
+
+                if (name.includes(el.type)) {
+                    return true;
+                }
+                if (el.type === 'public' && name.includes('cert')) {
+                    return true;
+                }
+                if (el.type === 'private' && (name.includes('priv') || name.includes('key'))) {
+                    return true;
+                }
+                return !!(el.type === 'chained' && (name.includes('chain') || name.includes('ca')));
+            })
+            .map(el => ({ label: el.name, value: el.name }));
+
+        selectOptions.unshift({ label: I18n.t(ConfigGeneric.NONE_LABEL), value: ConfigGeneric.NONE_VALUE });
+
+        this.setState({ value, selectOptions });
+    }
+
+    renderItem(error: unknown, disabled: boolean /* , defaultValue */) {
+        if (!this.state.selectOptions) {
+            return null;
+        }
+
+        const item = this.state.selectOptions?.find(item => item.value === this.state.value);
+
+        return <FormControl className={this.props.classes.fullWidth} variant="standard">
+            {this.props.schema.label ? <InputLabel shrink>{this.getText(this.props.schema.label)}</InputLabel> : null}
+            <Select
+                variant="standard"
+                error={!!error}
+                displayEmpty
+                disabled={!!disabled}
+                value={this.state.value}
+                renderValue={() => this.getText(item?.label, this.props.schema.noTranslation !== false)}
+                onChange={e =>
+                    this.setState({ value: e.target.value }, () =>
+                        this.onChange(this.props.attr, this.state.value))}
+            >
+                {this.state.selectOptions?.map(item_ =>
+                    <MenuItem
+                        key={item_.value}
+                        value={item_.value}
+                        style={item_.value === ConfigGeneric.NONE_VALUE ? { opacity: 0.5 } : {}}
+                    >
+                        {this.getText(item_.label, this.props.schema.noTranslation !== false)}
+                    </MenuItem>)}
+            </Select>
+            {this.props.schema.help ? <FormHelperText>{this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}</FormHelperText> : null}
+        </FormControl>;
+    }
+}
+
+export default withStyles(styles)(ConfigCertificateSelect);

package/src/JsonConfigComponent/ConfigCertificates.tsx

@@ -0,0 +1,202 @@
+import React from 'react';
+import { withStyles } from '@mui/styles';
+
+import {
+    InputLabel,
+    MenuItem,
+    FormControl,
+    Select,
+} from '@mui/material';
+
+import { I18n } from '@iobroker/adapter-react-v5';
+import type { ConfigItemCertificates } from '#JC/types';
+import ConfigGeneric, {type ConfigGenericProps, type ConfigGenericState} from './ConfigGeneric';
+
+const styles: Record<string, any> = {
+    fullWidth: {
+        width: '100%',
+    },
+    leWidth: {
+        width: 620,
+        marginBottom: 10,
+    },
+    certWidth: {
+        width: 200,
+        marginRight: 10,
+    },
+};
+
+interface ConfigCertificatesProps extends ConfigGenericProps {
+    schema: ConfigItemCertificates;
+}
+
+interface ConfigCertificatesState extends ConfigGenericState {
+    certsPublicOptions?: { label: string; value: string }[];
+    certsChainOptions?: { label: string; value: string }[];
+    certsPrivateOptions?: { label: string; value: string }[];
+    collectionsOptions?: string[];
+}
+
+class ConfigCertificates extends ConfigGeneric<ConfigCertificatesProps, ConfigCertificatesState> {
+    async componentDidMount() {
+        super.componentDidMount();
+        const certificates = await this.props.socket.getCertificates();
+        const certsPublicOptions: { label: string; value: string }[] = [];
+        const certsPrivateOptions: { label: string; value: string }[] = [];
+        const certsChainOptions: { label: string; value: string }[] = [];
+
+        let collectionsOptions: string[] | null = [];
+        const collectionsOptionsObj = await this.props.socket.getObject('system.certificates');
+        if (collectionsOptionsObj?.native?.collections) {
+            collectionsOptions = Object.keys(collectionsOptionsObj.native.collections);
+        } else {
+            collectionsOptions = null;
+        }
+
+        certificates
+            .forEach(el => {
+                if (el.type === 'public') {
+                    certsPublicOptions.push({ label: el.name, value: el.name });
+                } else if (el.type === 'private') {
+                    certsPrivateOptions.push({ label: el.name, value: el.name });
+                } else if (el.type === 'chained') {
+                    certsChainOptions.push({ label: el.name, value: el.name });
+                } else {
+                    certsPublicOptions.push({ label: el.name, value: el.name });
+                    certsPrivateOptions.push({ label: el.name, value: el.name });
+                    certsChainOptions.push({ label: el.name, value: el.name });
+                }
+            });
+
+        certsPublicOptions.unshift({ label: I18n.t(ConfigGeneric.NONE_LABEL), value: ConfigGeneric.NONE_VALUE });
+        certsPrivateOptions.unshift({ label: I18n.t(ConfigGeneric.NONE_LABEL), value: ConfigGeneric.NONE_VALUE });
+        certsChainOptions.unshift({ label: I18n.t(ConfigGeneric.NONE_LABEL), value: ConfigGeneric.NONE_VALUE });
+
+        this.setState({
+            certsPublicOptions,
+            certsChainOptions,
+            certsPrivateOptions,
+            collectionsOptions,
+        });
+    }
+
+    renderItem(error: unknown, disabled: boolean /* , defaultValue */) {
+        if (!this.state.certsPublicOptions || !this.state.certsPrivateOptions || !this.state.certsChainOptions) {
+            return null;
+        }
+        const leCollection = (ConfigGeneric.getValue(this.props.data, this.props.schema.leCollectionName || 'leCollection') || 'false').toString();
+        const certPublic = ConfigGeneric.getValue(this.props.data, this.props.schema.certPublicName || 'certPublic');
+        const certPrivate = ConfigGeneric.getValue(this.props.data, this.props.schema.certPrivateName || 'certPrivate');
+        const certChained = ConfigGeneric.getValue(this.props.data, this.props.schema.certChainedName || 'certChained');
+
+        const itemCertPublic = this.state.certsPublicOptions?.find(item => item.value === certPublic);
+        const itemCertPrivate = this.state.certsPrivateOptions?.find(item => item.value === certPrivate);
+        const itemCertChained = this.state.certsChainOptions?.find(item => item.value === certChained);
+
+        return <div className={this.props.classes.fullWidth}>
+            {this.state.collectionsOptions ? <FormControl className={this.props.classes.leWidth} variant="standard">
+                <InputLabel shrink>Let&apos;s encrypt</InputLabel>
+                <Select
+                    variant="standard"
+                    error={!!error}
+                    displayEmpty
+                    disabled={!!disabled}
+                    value={leCollection}
+                    onChange={e => this.onChange(
+                        this.props.schema.leCollectionName || 'leCollection',
+                        e.target.value === 'false' ? false : (e.target.value === 'true' ? true : e.target.value),
+                    )}
+                >
+                    <MenuItem
+                        key="_false"
+                        value="false"
+                        style={{ fontWeight: 'bold' }}
+                    >
+                        {I18n.t('ra_Do not use let\'s encrypt')}
+                    </MenuItem>
+                    <MenuItem
+                        key="_true"
+                        value="true"
+                        style={{ fontWeight: 'bold' }}
+                    >
+                        {I18n.t('ra_Use all available let\'s encrypt certificates')}
+                    </MenuItem>
+                    {this.state.collectionsOptions?.map(item =>
+                        <MenuItem
+                            key={item}
+                            value={item}
+                        >
+                            {item}
+                        </MenuItem>)}
+                </Select>
+            </FormControl> : null}
+            {this.state.collectionsOptions ? <br /> : null}
+            {this.state.collectionsOptions && leCollection !== 'false' ? <div>{I18n.t('ra_Fallback custom certificates')}</div> : null}
+            <FormControl className={this.props.classes.certWidth} variant="standard">
+                <InputLabel shrink>{I18n.t('ra_Public certificate')}</InputLabel>
+                <Select
+                    variant="standard"
+                    error={!!error}
+                    displayEmpty
+                    disabled={!!disabled}
+                    value={certPublic || ''}
+                    renderValue={() => this.getText(itemCertPublic?.label)}
+                    onChange={e => this.onChange(this.props.schema.certPublicName || 'certPublic', e.target.value)}
+                >
+                    {this.state.certsPublicOptions?.map((item, i) =>
+                        <MenuItem
+                            key={`${item.value}_${i}`}
+                            value={item.value}
+                            style={item.value === ConfigGeneric.NONE_VALUE ? { opacity: 0.5 } : {}}
+                        >
+                            {this.getText(item.label)}
+                        </MenuItem>)}
+                </Select>
+            </FormControl>
+            <FormControl className={this.props.classes.certWidth} variant="standard">
+                <InputLabel shrink>{I18n.t('ra_Private certificate')}</InputLabel>
+                <Select
+                    variant="standard"
+                    error={!!error}
+                    displayEmpty
+                    disabled={!!disabled}
+                    value={certPrivate || ''}
+                    renderValue={() => this.getText(itemCertPrivate?.label)}
+                    onChange={e => this.onChange(this.props.schema.certPrivateName || 'certPrivate', e.target.value)}
+                >
+                    {this.state.certsPrivateOptions?.map((item, i) =>
+                        <MenuItem
+                            key={`${item.value}_${i}`}
+                            value={item.value}
+                            style={item.value === ConfigGeneric.NONE_VALUE ? { opacity: 0.5 } : {}}
+                        >
+                            {this.getText(item.label)}
+                        </MenuItem>)}
+                </Select>
+            </FormControl>
+            <FormControl className={this.props.classes.certWidth} variant="standard">
+                <InputLabel shrink>{I18n.t('ra_Chained certificate')}</InputLabel>
+                <Select
+                    variant="standard"
+                    error={!!error}
+                    displayEmpty
+                    disabled={!!disabled}
+                    value={certChained || ''}
+                    renderValue={() => this.getText(itemCertChained?.label)}
+                    onChange={e => this.onChange(this.props.schema.certChainedName || 'certChained', e.target.value)}
+                >
+                    {this.state.certsChainOptions?.map((item, i) =>
+                        <MenuItem
+                            key={`${item.value}_${i}`}
+                            value={item.value}
+                            style={item.value === ConfigGeneric.NONE_VALUE ? { opacity: 0.5 } : {}}
+                        >
+                            {this.getText(item.label)}
+                        </MenuItem>)}
+                </Select>
+            </FormControl>
+        </div>;
+    }
+}
+
+export default withStyles(styles)(ConfigCertificates);