// SPDX-License-Identifier: AGPL-3.0-or-later // SPDX-FileCopyrightText: 2020-2022 grommunio GmbH import React, { PureComponent } from 'react'; import { withStyles } from '@mui/styles'; import PropTypes from 'prop-types'; import { withTranslation } from 'react-i18next'; import { Checkbox, FormControl, FormControlLabel, Slider, TextField, Typography } from '@mui/material'; import blue from '../colors/blue'; const styles = theme => ({ form: { width: '100%', margin: '12px 0px 0px 8px', }, slider: { maxWidth: 400, }, gridTf: { flex: 1, margin: theme.spacing(0, 1, 1, 0), }, header: { margin: theme.spacing(2, 0, 1, 0), }, radio: { marginTop: 8, }, blueCheckbox: { color: blue['500'], }, }); class SlimSyncPolicies extends PureComponent { render() { const { classes, t, syncPolicy, defaultPolicy, handleChange, handleSlider, handleCheckbox } = this.props; const { reqdevenc, allowsimpledevpw, devpwenabled, devpwexpiration, maxinacttimedevlock, devpwhistory, alphanumpwreq, maxdevpwfailedattempts, mindevpwlenngth, allowstoragecard, mindevcomplexchars } = syncPolicy; return ( <FormControl className={classes.form}> <Typography variant="h6" className={classes.header}>{t('General')}</Typography> <FormControlLabel control={ <Checkbox className={reqdevenc === defaultPolicy.reqdevenc ? "": classes.blueCheckbox} checked={!!reqdevenc} onChange={handleCheckbox('reqdevenc')} color={reqdevenc === defaultPolicy.reqdevenc ? "default" : "primary"} /> } label={t('Require encryption on device')} /> <FormControlLabel control={ <Checkbox className={allowstoragecard === defaultPolicy.allowstoragecard ? "" : classes.blueCheckbox} checked={!!allowstoragecard} onChange={handleCheckbox('allowstoragecard')} color={allowstoragecard === defaultPolicy.allowstoragecard ? "default" : "primary"} /> } label={t('Require encryption on storage card')} /> <Typography variant="h6" className={classes.header}>{t('Passwords')}</Typography> <FormControlLabel control={ <Checkbox className={devpwenabled === defaultPolicy.devpwenabled ? "" : classes.blueCheckbox} checked={!!devpwenabled} onChange={handleCheckbox('devpwenabled')} color={devpwenabled === defaultPolicy.devpwenabled ? "default" : "primary"} /> } label={t('Password required')} /> <FormControlLabel control={ <Checkbox className={allowsimpledevpw === defaultPolicy.allowsimpledevpw ? "" : classes.blueCheckbox} checked={!!allowsimpledevpw} onChange={handleCheckbox('allowsimpledevpw')} color={allowsimpledevpw === defaultPolicy.allowsimpledevpw ? "default" : "primary"} /> } label={t('Allow simple passwords')} style={{ marginBottom: 8 }} /> <div> <Typography gutterBottom> {t('Minumim password length')} </Typography> <Slider className={classes.slider} value={mindevpwlenngth || 4} valueLabelDisplay="auto" color={mindevpwlenngth === defaultPolicy.mindevpwlenngth ? "secondary" : "primary"} step={1} marks min={1} max={16} onChange={handleSlider("mindevpwlenngth")} /> </div> <FormControlLabel control={ <Checkbox className={alphanumpwreq === defaultPolicy.alphanumpwreq ? "" : classes.blueCheckbox} checked={!!alphanumpwreq} onChange={handleCheckbox('alphanumpwreq')} color={alphanumpwreq === defaultPolicy.alphanumpwreq ? "default" : "primary"} /> } label={t('Require alphanumeric password')} style={{ marginBottom: 8 }} /> <div> <Typography gutterBottom> {t('Minumim password character sets')} </Typography> <Slider className={classes.slider} value={mindevcomplexchars || 3} valueLabelDisplay="auto" color={mindevcomplexchars === defaultPolicy.mindevcomplexchars ? "secondary" : "primary"} step={1} marks min={1} max={4} onChange={handleSlider("mindevcomplexchars")} /> </div> <div> <Typography gutterBottom> {t('Number of failed attempts allowed')} </Typography> <Slider className={classes.slider} value={maxdevpwfailedattempts || 8} valueLabelDisplay="auto" color={maxdevpwfailedattempts === defaultPolicy.maxdevpwfailedattempts ? "secondary" : "primary"} step={1} marks min={4} max={16} onChange={handleSlider("maxdevpwfailedattempts")} /> </div> <TextField className={classes.slider} label={t('Password expiration (days)')} value={devpwexpiration} InputLabelProps={{ className: devpwexpiration === defaultPolicy.devpwexpiration ? "" : classes.blueCheckbox, }} onChange={handleChange("devpwexpiration")} variant="standard" style={{ marginBottom: 8 }} /> <TextField className={classes.slider} label={t("Inactivity (seconds) before device locks itself")} value={maxinacttimedevlock} onChange={handleChange("maxinacttimedevlock")} InputLabelProps={{ className: maxinacttimedevlock === defaultPolicy.maxinacttimedevlock ? "" : classes.blueCheckbox, }} variant="standard" style={{ marginBottom: 8 }} /> <TextField className={classes.slider} style={{ marginBottom: 16 }} label={t("Password history")} value={devpwhistory} InputLabelProps={{ className: devpwhistory === defaultPolicy.devpwhistory ? "" : classes.blueCheckbox, }} onChange={handleChange("devpwhistory")} variant="standard" /> </FormControl> ); } } SlimSyncPolicies.propTypes = { classes: PropTypes.object.isRequired, t: PropTypes.func.isRequired, syncPolicy: PropTypes.object.isRequired, defaultPolicy: PropTypes.object.isRequired, handleChange: PropTypes.func.isRequired, handleCheckbox: PropTypes.func.isRequired, handleSlider: PropTypes.func.isRequired, }; export default withTranslation()(withStyles(styles)(SlimSyncPolicies));