@mui/material#Checkbox JavaScript Examples

The following examples show how to use @mui/material#Checkbox. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: FavoriteButton.js    From SimpleWeather with MIT License 6 votes vote down vote up
FavoriteButton = (props) => {
    return (
        <Checkbox
            {...props}
            icon={<FavoriteBorder/>}
            checkedIcon={<Favorite/>}
            size='large'
            sx={{
                color: 'white',
                '&.Mui-checked': {
                    color: 'white',
                },
                '&.Mui-disabled': {
                    color: 'transparent',
                }
            }}
        />
    );
}
Example #2
Source File: Alphabetical.jsx    From Edlib with GNU General Public License v3.0 6 votes vote down vote up
Alphabetical = ({ allH5ps, contentTypes }) => {
    const { classes } = useStyles();

    return (
        <List dense component="div" disablePadding>
            {allH5ps.map((h5p, index) => (
                <ListItem
                    key={index}
                    button
                    dense
                    onClick={() => contentTypes.toggle(h5p)}
                >
                    <ListItemIcon
                        classes={{
                            root: classes.listItemIcon,
                        }}
                    >
                        <Checkbox
                            size="small"
                            edge="start"
                            checked={contentTypes.has(h5p)}
                            tabIndex={-1}
                            disableRipple
                            color="primary"
                            classes={{
                                root: classes.checkboxRoot,
                            }}
                        />
                    </ListItemIcon>
                    <ListItemText
                        primary={`${h5p.title} (${h5p.filteredCount})`}
                    />
                </ListItem>
            ))}
        </List>
    );
}
Example #3
Source File: RowCards.jsx    From matx-react with MIT License 5 votes vote down vote up
RowCards = () => {
  const { palette } = useTheme();
  const textMuted = palette.text.secondary;

  return [1, 2, 3, 4].map((id) => (
    <Fragment key={id}>
      <Card sx={{ py: 1, px: 2 }} className="project-card">
        <Grid container alignItems="center">
          <Grid item md={5} xs={7}>
            <Box display="flex" alignItems="center">
              <Checkbox />
              <Hidden smDown>
                {id % 2 === 1 ? (
                  <StarOutline size="small">
                    <Icon>star_outline</Icon>
                  </StarOutline>
                ) : (
                  <DateRange size="small">
                    <Icon>date_range</Icon>
                  </DateRange>
                )}
              </Hidden>
              <ProjectName>Project {id}</ProjectName>
            </Box>
          </Grid>

          <Grid item md={3} xs={4}>
            <Box color={textMuted}>{format(new Date().getTime(), 'MM/dd/yyyy hh:mma')}</Box>
          </Grid>

          <Hidden smDown>
            <Grid item xs={3}>
              <Box display="flex" position="relative" marginLeft="-0.875rem !important">
                <StyledAvatar src="/assets/images/face-4.jpg" />
                <StyledAvatar src="/assets/images/face-4.jpg" />
                <StyledAvatar src="/assets/images/face-4.jpg" />
                <StyledAvatar sx={{ fontSize: '14px' }}>+3</StyledAvatar>
              </Box>
            </Grid>
          </Hidden>

          <Grid item xs={1}>
            <Box display="flex" justifyContent="flex-end">
              <IconButton>
                <Icon>more_vert</Icon>
              </IconButton>
            </Box>
          </Grid>
        </Grid>
      </Card>
      <Box py={1} />
    </Fragment>
  ));
}
Example #4
Source File: ImportDialog.js    From admin-web with GNU Affero General Public License v3.0 5 votes vote down vote up
render() {
    const { t, open, user, onClose } = this.props;
    const { loading, force } = this.state;

    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>Are you sure you want to import {user.name}?</DialogTitle>
        <DialogContent>
          <FormControlLabel
            control={
              <Checkbox
                checked={force}
                onChange={this.handleChange}
                color="primary"
              />
            }
            label="force"
          />
        </DialogContent>
        <DialogActions>
          <Button
            onClick={onClose}
            color="secondary"
          >
            {t('Cancel')}
          </Button>
          <Button
            onClick={this.handleImport}
            variant="contained"
            color="primary"
          >
            {loading ? <CircularProgress size={24}/> : t('Confirm')}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }
Example #5
Source File: DeleteUser.js    From admin-web with GNU Affero General Public License v3.0 5 votes vote down vote up
render() {
    const { t, open, user, onClose } = this.props;
    const { checked, loading } = this.state;

    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>Are you sure you want to delete {user.username}?</DialogTitle>
        <DialogContent style={{ minWidth: 400 }}>
          <FormControlLabel
            control={
              <Checkbox
                checked={checked}
                onChange={() => this.setState({ checked: !checked })}
                name="checked"
                color="primary"
              />
            }
            label="Delete files?"
          />
        </DialogContent>
        <DialogActions>
          <Button
            onClick={onClose}
            color="secondary"
          >
            {t('Cancel')}
          </Button>
          <Button
            onClick={this.handleDelete}
            variant="contained"
            color="secondary"
          >
            {loading ? <CircularProgress size={24}/> : t('Confirm')}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }
Example #6
Source File: DeleteFolder.js    From admin-web with GNU Affero General Public License v3.0 5 votes vote down vote up
render() {
    const { t, open, item, onClose } = this.props;
    const { loading, clear, taskMessage, taskID } = this.state;

    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>{taskMessage ? taskMessage : `Are you sure you want to delete ${item}?`}</DialogTitle>
        <DialogContent>
          {!taskMessage && <FormControlLabel
            control={<Checkbox onChange={this.handleCheckbox} value={clear} />}
            label={t('Clear folder data')}
          />}
        </DialogContent>
        <DialogActions>
          <Button
            onClick={this.handleClose}
            color="secondary"
          >
            {t(taskMessage ? 'Close' : 'Cancel')}
          </Button>
          {!taskMessage && <Button
            onClick={this.handleDelete}
            variant="contained"
            color="secondary"
          >
            {loading ? <CircularProgress size={24}/> : t('Confirm')}
          </Button>}
          {taskMessage && taskID > 0 && <Button variant="contained" onClick={this.handleViewTask}>
            {t('View task')}
          </Button>
          }
        </DialogActions>
      </Dialog>
    );
  }
Example #7
Source File: DeleteDomain.js    From admin-web with GNU Affero General Public License v3.0 5 votes vote down vote up
render() {
    const { t, open, item, onClose, capabilities } = this.props;
    const { loading, purge, deleteFiles } = this.state;
    const canPurge = capabilities.includes(DOMAIN_PURGE);
    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>{t('deleteDialog', { item })}?</DialogTitle>
        {canPurge && <DialogContent>
          <FormControlLabel
            control={
              <Checkbox
                checked={purge}
                onChange={this.handlePurge}
                name="checked"
                color="primary"
              />
            }
            label="Delete permanently?"
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={deleteFiles}
                onChange={() => this.setState({ deleteFiles: !deleteFiles })}
                name="checked"
                color="primary"
                disabled={!purge}
              />
            }
            label="Delete files?"
          />
        </DialogContent>}
        <DialogActions>
          <Button
            onClick={onClose}
            color="secondary"
          >
            {t('Cancel')}
          </Button>
          <Button
            onClick={this.handleDelete}
            variant="contained"
            color="secondary"
          >
            {loading ? <CircularProgress size={24}/> : t('Confirm')}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }
Example #8
Source File: filter.js    From react-table-library with MIT License 5 votes vote down vote up
Component = () => {
  let data = { nodes };

  const materialTheme = getTheme(DEFAULT_OPTIONS);
  const theme = useTheme(materialTheme);

  const [isHide, setHide] = React.useState(false);

  data = {
    nodes: isHide ? data.nodes.filter((node) => !node.isComplete) : data.nodes,
  };

  const COLUMNS = [
    { label: 'Task', renderCell: (item) => item.name },
    {
      label: 'Deadline',
      renderCell: (item) =>
        item.deadline.toLocaleDateString('en-US', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
        }),
    },
    { label: 'Type', renderCell: (item) => item.type },
    {
      label: 'Complete',
      renderCell: (item) => item.isComplete.toString(),
    },
    { label: 'Tasks', renderCell: (item) => item.nodes?.length },
  ];

  return (
    <>
      <Stack spacing={10}>
        <FormGroup>
          <FormControlLabel
            control={
              <Checkbox checked={isHide} onChange={(event) => setHide(event.target.checked)} />
            }
            label="Hide Complete"
          />
        </FormGroup>
      </Stack>

      <CompactTable columns={COLUMNS} data={data} theme={theme} />

      <br />
      <DocumentationSee anchor={'Features/' + key} />
    </>
  );
}
Example #9
Source File: select.js    From react-table-library with MIT License 5 votes vote down vote up
Component = () => {
  const data = { nodes };

  const materialTheme = getTheme(DEFAULT_OPTIONS);
  const customTheme = {
    Table: `
      --data-table-library_grid-template-columns:  70px repeat(5, minmax(0, 1fr));
    `,
  };
  const theme = useTheme([materialTheme, customTheme]);

  const select = useRowSelect(data, {
    onChange: onSelectChange,
  });

  function onSelectChange(action, state) {
    console.log(action, state);
  }

  const COLUMNS = [
    {
      label: 'Task',
      renderCell: (item) => item.name,
      select: {
        renderHeaderCellSelect: () => (
          <Checkbox
            size="small"
            checked={select.state.all}
            indeterminate={!select.state.all && !select.state.none}
            onChange={select.fns.onToggleAll}
          />
        ),
        renderCellSelect: (item) => (
          <Checkbox
            size="small"
            checked={select.state.ids.includes(item.id)}
            onChange={() => select.fns.onToggleById(item.id)}
          />
        ),
      },
    },
    {
      label: 'Deadline',
      renderCell: (item) =>
        item.deadline.toLocaleDateString('en-US', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
        }),
    },
    { label: 'Type', renderCell: (item) => item.type },
    {
      label: 'Complete',
      renderCell: (item) => item.isComplete.toString(),
    },
    { label: 'Tasks', renderCell: (item) => item.nodes?.length },
  ];

  return (
    <>
      <CompactTable columns={COLUMNS} data={data} theme={theme} select={select} />

      <br />
      <DocumentationSee anchor={'Features/' + key} />
    </>
  );
}
Example #10
Source File: UserListHead.js    From Django-REST-Framework-React-BoilerPlate with MIT License 5 votes vote down vote up
export default function UserListHead({
  order,
  orderBy,
  rowCount,
  headLabel,
  numSelected,
  onRequestSort,
  onSelectAllClick,
}) {
  const createSortHandler = (property) => (event) => {
    onRequestSort(event, property);
  };

  return (
    <TableHead>
      <TableRow>
        <TableCell padding="checkbox">
          <Checkbox
            indeterminate={numSelected > 0 && numSelected < rowCount}
            checked={rowCount > 0 && numSelected === rowCount}
            onChange={onSelectAllClick}
          />
        </TableCell>
        {headLabel.map((headCell) => (
          <TableCell
            key={headCell.id}
            align={headCell.alignRight ? 'right' : 'left'}
            sortDirection={orderBy === headCell.id ? order : false}
          >
            <TableSortLabel
              hideSortIcon
              active={orderBy === headCell.id}
              direction={orderBy === headCell.id ? order : 'asc'}
              onClick={createSortHandler(headCell.id)}
            >
              {headCell.label}
              {orderBy === headCell.id ? (
                <Box sx={{ ...visuallyHidden }}>{order === 'desc' ? 'sorted descending' : 'sorted ascending'}</Box>
              ) : null}
            </TableSortLabel>
          </TableCell>
        ))}
      </TableRow>
    </TableHead>
  );
}
Example #11
Source File: FormGroupCheckbox.jsx    From matx-react with MIT License 5 votes vote down vote up
export default function FormGroupCheckbox() {
  const [state, setState] = React.useState({
    gilad: true,
    jason: false,
    antoine: false,
  });

  const handleChange = (name) => (event) => {
    setState({ ...state, [name]: event.target.checked });
  };

  const { gilad, jason, antoine } = state;
  const error = [gilad, jason, antoine].filter((v) => v).length !== 2;

  return (
    <AppButtonRoot>
      <FormControl component="fieldset" className="formControl">
        <FormLabel component="legend">Assign responsibility</FormLabel>
        <FormGroup>
          <FormControlLabel
            control={<Checkbox checked={gilad} onChange={handleChange('gilad')} value="gilad" />}
            label="Gilad Gray"
          />
          <FormControlLabel
            control={<Checkbox checked={jason} onChange={handleChange('jason')} value="jason" />}
            label="Jason Killian"
          />
          <FormControlLabel
            control={
              <Checkbox checked={antoine} onChange={handleChange('antoine')} value="antoine" />
            }
            label="Antoine Llorca"
          />
        </FormGroup>
        <FormHelperText>Be careful</FormHelperText>
      </FormControl>

      <FormControl required error={error} component="fieldset" className="formControl">
        <FormLabel component="legend">Pick two</FormLabel>
        <FormGroup>
          <FormControlLabel
            control={<Checkbox checked={gilad} onChange={handleChange('gilad')} value="gilad" />}
            label="Gilad Gray"
          />
          <FormControlLabel
            control={<Checkbox checked={jason} onChange={handleChange('jason')} value="jason" />}
            label="Jason Killian"
          />
          <FormControlLabel
            control={
              <Checkbox checked={antoine} onChange={handleChange('antoine')} value="antoine" />
            }
            label="Antoine Llorca"
          />
        </FormGroup>

        <FormHelperText>You can display an error</FormHelperText>
      </FormControl>
    </AppButtonRoot>
  );
}
Example #12
Source File: ColorManyPicker.js    From Django-REST-Framework-React-BoilerPlate with MIT License 5 votes vote down vote up
export default function ColorManyPicker({ colors, onChecked, sx, ...other }) {
  return (
    <Box sx={sx}>
      {colors.map((color) => {
        const isWhite = color === '#FFFFFF' || color === 'white';

        return (
          <Checkbox
            key={color}
            size="small"
            value={color}
            color="default"
            checked={onChecked(color)}
            icon={
              <IconColor
                sx={{
                  ...(isWhite && {
                    border: (theme) => `solid 1px ${theme.palette.divider}`,
                  }),
                }}
              />
            }
            checkedIcon={
              <IconColor
                sx={{
                  transform: 'scale(1.4)',
                  '&:before': {
                    opacity: 0.48,
                    width: '100%',
                    content: "''",
                    height: '100%',
                    borderRadius: '50%',
                    position: 'absolute',
                    boxShadow: '4px 4px 8px 0 currentColor',
                  },
                  '& svg': { width: 12, height: 12, color: 'common.white' },
                  ...(isWhite && {
                    border: (theme) => `solid 1px ${theme.palette.divider}`,
                    boxShadow: (theme) => `4px 4px 8px 0 ${theme.palette.grey[500_24]}`,
                    '& svg': { width: 12, height: 12, color: 'common.black' },
                  }),
                }}
              />
            }
            sx={{
              color,
              '&:hover': { opacity: 0.72 },
            }}
            {...other}
          />
        );
      })}
    </Box>
  );
}
Example #13
Source File: SimpleCheckbox.jsx    From matx-react with MIT License 5 votes vote down vote up
export default function SimpleCheckbox() {
  const [state, setState] = React.useState({
    checkedA: true,
    checkedB: true,
    checkedF: true,
  });

  const handleChange = (name) => (event) => {
    setState({ ...state, [name]: event.target.checked });
  };

  return (
    <Box>
      <Checkbox
        value="checkedA"
        checked={state.checkedA}
        onChange={handleChange('checkedA')}
        inputProps={{ 'aria-label': 'primary checkbox' }}
      />
      <Checkbox
        checked={state.checkedB}
        onChange={handleChange('checkedB')}
        value="checkedB"
        color="primary"
        inputProps={{ 'aria-label': 'secondary checkbox' }}
      />
      <Checkbox value="checkedC" inputProps={{ 'aria-label': 'uncontrolled-checkbox' }} />
      <Checkbox disabled value="checkedD" inputProps={{ 'aria-label': 'disabled checkbox' }} />

      <Checkbox
        disabled
        checked
        value="checkedE"
        inputProps={{ 'aria-label': 'disabled checked checkbox' }}
      />

      <Checkbox
        checked={state.checkedF}
        onChange={handleChange('checkedF')}
        value="checkedF"
        indeterminate
        inputProps={{ 'aria-label': 'indeterminate checkbox' }}
      />

      <Checkbox
        defaultChecked
        color="default"
        value="checkedG"
        inputProps={{ 'aria-label': 'checkbox with default color' }}
      />
    </Box>
  );
}
Example #14
Source File: SavedFilters.jsx    From Edlib with GNU General Public License v3.0 5 votes vote down vote up
SavedFilters = ({ savedFilterData, setShowDelete, filterUtils }) => {
    const { t } = useTranslation();
    const { classes } = useStyles();

    return (
        <>
            <List
                dense
                component="div"
                disablePadding
                className={classes.nested}
            >
                {savedFilterData.map((savedFilter) => {
                    return (
                        <ListItem
                            key={savedFilter.id}
                            button
                            dense
                            onClick={() =>
                                filterUtils.setFilterFromChoices(
                                    savedFilter.choices
                                )
                            }
                        >
                            <ListItemIcon
                                classes={{
                                    root: classes.listItemIcon,
                                }}
                            >
                                <Checkbox
                                    size="small"
                                    edge="start"
                                    checked={filterUtils.areFiltersAndChoicesIdentical(
                                        savedFilter.choices
                                    )}
                                    tabIndex={-1}
                                    disableRipple
                                    color="primary"
                                    classes={{
                                        root: classes.checkboxRoot,
                                    }}
                                />
                            </ListItemIcon>
                            <ListItemText primary={savedFilter.name} />
                        </ListItem>
                    );
                })}
                <ListItem dense>
                    <Box>
                        <Button
                            color="primary"
                            variant="outlined"
                            onClick={() => setShowDelete(true)}
                            size="small"
                            disabled={savedFilterData.length === 0}
                        >
                            {t('delete')}
                        </Button>
                    </Box>
                </ListItem>
            </List>
        </>
    );
}
Example #15
Source File: Licenses.jsx    From Edlib with GNU General Public License v3.0 5 votes vote down vote up
Licenses = ({ licenses, filterCount, licenseData }) => {
    const { t } = useTranslation();
    const { classes } = useStyles();

    return (
        <List dense component="div" disablePadding className={classes.nested}>
            {licenseData
                .map((item) => {
                    const parts = item.id.split('-');
                    const count = filterCount.find(
                        (filterCount) =>
                            filterCount.key === item.id.toLowerCase()
                    );

                    return {
                        title: parts
                            .map((part) => t(`licenses.${part}`))
                            .join(' - '),
                        value: item.id,
                        filteredCount: count ? count.count : 0,
                    };
                })
                .sort((a, b) =>
                    a.title < b.title ? -1 : a.title > b.title ? 1 : 0
                )
                .map((license) => (
                    <ListItem
                        key={license.value}
                        button
                        dense
                        onClick={() => licenses.toggle(license)}
                    >
                        <ListItemIcon
                            classes={{
                                root: classes.listItemIcon,
                            }}
                        >
                            <Checkbox
                                size="small"
                                edge="start"
                                checked={licenses.has(license)}
                                tabIndex={-1}
                                disableRipple
                                color="primary"
                                classes={{
                                    root: classes.checkboxRoot,
                                }}
                            />
                        </ListItemIcon>
                        <ListItemText
                            primary={`${license.title} (${license.filteredCount})`}
                        />
                    </ListItem>
                ))}
        </List>
    );
}
Example #16
Source File: DomainMenu.js    From admin-web with GNU Affero General Public License v3.0 4 votes vote down vote up
render() {
    const { classes, domain, t, capabilities } = this.props;
    const { snackbar, deleting, sizeUnits, langs, createParams } = this.state;
    const { prohibitsendquota, prohibitreceivequota, storagequotalimit,
      lang, privChat, privArchive, privFiles, privVideo,
      // eslint-disable-next-line camelcase
      smtp, changePassword, pop3_imap } = createParams;
    const writable = this.context.includes(DOMAIN_ADMIN_WRITE);
    const editable = capabilities.includes(ORG_ADMIN);

    return (
      <TableViewContainer
        headline={t("Domain overview")}
        snackbar={snackbar}
        onSnackbarClose={() => this.setState({ snackbar: '' })}
      >
        <Paper className={classes.paper} elevation={1}>
          <Grid container direction="column" className={classes.container}>
            <Grid item className={classes.firstRow}>
              <Typography variant="h6">
                <span className={classes.description}>{t('Domain name')}:</span>
                {domain.domainname}
              </Typography>
              {editable && <div className={classes.editButtonContainer}>
                <Button
                  onClick={this.handleNav}
                  variant="contained"
                  color="primary"
                  style={{ marginRight: 8 }}
                >
                  {t('editHeadline', { item: 'domain' })}
                </Button>
                <Button
                  onClick={this.handleDelete}
                  variant="contained"
                  color="secondary"
                >
                  {t('Delete domain')}
                </Button>
              </div>}
            </Grid>
            <Typography variant="h6" className={classes.data}>
              <span className={classes.description}>{t('Title')}:</span>
              {domain.title}
            </Typography>
            <Typography variant="h6" className={classes.data}>
              <span className={classes.description}>{t('Address')}:</span>
              {domain.address}
            </Typography>
            <Typography variant="h6" className={classes.data}>
              <span className={classes.description}>{t('Admin')}:</span>
              {domain.adminName}
            </Typography>
            <Typography variant="h6" className={classes.data}>
              <span className={classes.description}>{t('Users')}:</span>
              {`${domain.activeUsers} active, ${domain.inactiveUsers} inactive, ${domain.maxUser} maximum`}
            </Typography>
            <Typography variant="h6" className={classes.data}>
              <span className={classes.description}>{t('Telephone')}:</span>
              {domain.tel}
            </Typography>
          </Grid>
          <div className={classes.defaultsContainer}>
            <FormControl className={classes.form}>
              <Typography
                color="primary"
                variant="h6"
                className={classes.subheader}
              >
                {t('Default user parameters')}
              </Typography>
              <TextField
                select
                className={classes.input}
                label={t("Language")}
                fullWidth
                value={lang || ''}
                onChange={this.handleInput('lang')}
              >
                {langs.map((l) => (
                  <MenuItem key={l.code} value={l.code}>
                    {l.code + ": " + l.name}
                  </MenuItem>
                ))}
              </TextField>
              <Grid container className={classes.input}>
                <TextField 
                  className={classes.flexInput}
                  label={
                    <div className={classes.labelContainer}>
                      {t("Send quota limit")}
                      <div style={{ width: 6, height: 6, backgroundColor: yellow['500'], marginLeft: 4 }}></div>
                    </div>
                  }
                  value={prohibitsendquota !== undefined ? prohibitsendquota : ''}
                  onChange={this.handleInput('prohibitsendquota')}
                  InputProps={{
                    endAdornment:
                      <FormControl className={classes.adornment}>
                        <Select
                          onChange={this.handleUnitChange('prohibitsendquota')}
                          value={sizeUnits.prohibitsendquota}
                          className={classes.select}
                          variant="standard"
                        >
                          <MenuItem value={1}>MB</MenuItem>
                          <MenuItem value={2}>GB</MenuItem>
                          <MenuItem value={3}>TB</MenuItem>
                        </Select>
                      </FormControl>,
                  }}
                />
                <TextField 
                  className={classes.flexInput}
                  label={
                    <div className={classes.labelContainer}>
                      {t("Receive quota limit")}
                      <div style={{ width: 6, height: 6, backgroundColor: red['500'], marginLeft: 4 }}></div>
                    </div>
                  }
                  value={prohibitreceivequota !== undefined ? prohibitreceivequota : ''}
                  onChange={this.handleInput('prohibitreceivequota')}
                  InputProps={{
                    endAdornment:
                      <FormControl className={classes.adornment}>
                        <Select
                          onChange={this.handleUnitChange('prohibitreceivequota')}
                          value={sizeUnits.prohibitreceivequota}
                          className={classes.select}
                          variant="standard"
                        >
                          <MenuItem value={1}>MB</MenuItem>
                          <MenuItem value={2}>GB</MenuItem>
                          <MenuItem value={3}>TB</MenuItem>
                        </Select>
                      </FormControl>,
                  }}
                />
                <TextField 
                  className={classes.flexInput}
                  style={{ marginRight: 0 }}
                  label={
                    <div className={classes.labelContainer}>
                      {t("Storage quota limit")}
                      <div style={{ width: 6, height: 6, backgroundColor: '#ddd', marginLeft: 4 }}></div>
                    </div>
                  }
                  value={storagequotalimit !== undefined ? storagequotalimit : ''}
                  onChange={this.handleInput('storagequotalimit')}
                  InputProps={{
                    endAdornment:
                      <FormControl className={classes.adornment}>
                        <Select
                          onChange={this.handleUnitChange('storagequotalimit')}
                          value={sizeUnits.storagequotalimit}
                          className={classes.select}
                          variant="standard"
                        >
                          <MenuItem value={1}>MB</MenuItem>
                          <MenuItem value={2}>GB</MenuItem>
                          <MenuItem value={3}>TB</MenuItem>
                        </Select>
                      </FormControl>,
                  }}
                />
              </Grid>
              <Grid container className={classes.input}>
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={smtp || false }
                      onChange={this.handleCheckbox('smtp')}
                      color="primary"
                    />
                  }
                  label={t('Allow SMTP sending (used by POP3/IMAP clients)')}
                />
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={changePassword || false }
                      onChange={this.handleCheckbox('changePassword')}
                      color="primary"
                    />
                  }
                  label={t('Allow password changes')}
                />
                <FormControlLabel
                  control={
                    <Checkbox
                  checked={pop3_imap || false /*eslint-disable-line*/}
                      onChange={this.handleCheckbox('pop3_imap')}
                      color="primary"
                    />
                  }
                  label={t('Allow POP3/IMAP logins')}
                />
              </Grid>
              <Grid container className={classes.input}>
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={privChat || false }
                      onChange={this.handleCheckbox('privChat')}
                      color="primary"
                    />
                  }
                  label={t('Allow Chat')}
                />
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={privVideo || false }
                      onChange={this.handleCheckbox('privVideo')}
                      color="primary"
                    />
                  }
                  label={t('Allow Video')}
                />
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={privFiles || false }
                      onChange={this.handleCheckbox('privFiles')}
                      color="primary"
                    />
                  }
                  label={t('Allow Files')}
                />
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={privArchive || false }
                      onChange={this.handleCheckbox('privArchive')}
                      color="primary"
                    />
                  }
                  label={t('Allow Archive')}
                />
              </Grid>
            </FormControl>
          </div>
          <Grid container className={classes.buttonGrid}>
            <Button
              variant="contained"
              color="primary"
              onClick={this.handleEdit}
              disabled={!writable}
            >
              {t('Save')}
            </Button>
          </Grid>
        </Paper>
        <DeleteDomain
          open={deleting}
          delete={this.props.delete}
          onSuccess={this.handleDeleteSuccess}
          onError={this.handleDeleteError}
          onClose={this.handleDeleteClose}
          item={domain.domainname}
          id={domain.ID}
        />
      </TableViewContainer>
    );
  }
Example #17
Source File: Sync.js    From admin-web with GNU Affero General Public License v3.0 4 votes vote down vote up
render() {
    const { classes, t, sync } = this.props;
    const { snackbar, sortedDevices, order, orderBy, match, showPush, onlyActive,
      filterEnded, filterUpdated } = this.state;

    return (
      <TableViewContainer
        handleScroll={this.handleScroll}
        headline={<>
          {t("Mobile devices")}
          <IconButton
            size="small"
            href="https://docs.grommunio.com/admin/administration.html#mobile-devices"
            target="_blank"
          >
            <HelpOutline fontSize="small"/>
          </IconButton>
        </>
        }
        subtitle={t('sync_sub')}
        snackbar={snackbar}
        onSnackbarClose={() => this.setState({ snackbar: '' })}
      >
        <Grid container alignItems="flex-end" className={classes.buttonGrid}>
          <FormControlLabel
            control={
              <Checkbox
                checked={showPush}
                onChange={this.handleCheckbox('showPush')}
                color="primary"
              />
            }
            label={t('Show push connections')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={onlyActive}
                onChange={this.handleCheckbox('onlyActive')}
                color="primary"
              />
            }
            label={t('Only show active connections')}
          />
          <TextField
            value={filterUpdated}
            onChange={this.handleInput('filterUpdated')}
            label={t("Last updated (seconds)")}
            className={classes.select}
            select
            color="primary"
            fullWidth
          >
            <MenuItem value={60}>10</MenuItem>
            <MenuItem value={60}>30</MenuItem>
            <MenuItem value={60}>60</MenuItem>
            <MenuItem value={120}>120</MenuItem>
          </TextField>
          <TextField
            value={filterEnded}
            onChange={this.handleInput('filterEnded')}
            label={t("Last ended (seconds)")}
            className={classes.select}
            select
            color="primary"
            fullWidth
          >
            <MenuItem value={20}>3</MenuItem>
            <MenuItem value={20}>5</MenuItem>
            <MenuItem value={20}>10</MenuItem>
            <MenuItem value={20}>20</MenuItem>
          </TextField>
          <div className={classes.actions}>
            <TextField
              value={match}
              onChange={this.handleInput('match')}
              placeholder={t("Filter")}
              variant="outlined"
              className={classes.textfield}
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <Search color="secondary" />
                  </InputAdornment>
                ),
              }}
              color="primary"
            />
          </div>
        </Grid>
        <SyncStatistics data={sync}/>
        <Paper elevation={1}>
          <Table size="small">
            <TableHead>
              <TableRow>
                {this.columns.map((column) => (
                  <TableCell
                    key={column.value}
                    padding={column.padding || 'normal'}
                  >
                    <TableSortLabel
                      active={orderBy === column.value}
                      align="left" 
                      direction={order}
                      onClick={this.handleSort(column.value, column.type, true)}
                    >
                      {t(column.label)}
                    </TableSortLabel>
                  </TableCell>
                ))}
                <TableCell padding="checkbox">
                  {t('Push')}
                </TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {(sortedDevices || sync).map((obj, idx) => {
                const timePast = getTimePast(obj.diff);
                const matches = this.getMatch(obj);
                return matches ? (
                  <Tooltip key={idx} placement="top" title={obj.devtype + ' / ' + obj.devagent}>
                    <TableRow hover className={this.getRowClass(obj, obj.diff)}>
                      <TableCell className={classes.cell} padding="checkbox">{obj.pid || ''}</TableCell>
                      <TableCell className={classes.cell} padding="checkbox">{obj.ip || ''}</TableCell>
                      <TableCell className={classes.cell}>{obj.user || ''}</TableCell>
                      <TableCell className={classes.cell}>{getStringFromCommand(obj.command)}</TableCell>
                      <TableCell className={classes.cell}>{timePast}</TableCell>
                      <TableCell className={classes.cell}>{obj.devid || ''}</TableCell>
                      <TableCell className={classes.cell}>{obj.addinfo || ''}</TableCell>
                      <TableCell className={classes.cell} padding="checkbox">
                        {obj.push ? <CheckCircleOutlined /> : <HighlightOffOutlined />}
                      </TableCell>
                    </TableRow>
                  </Tooltip>
                ) : null;
              })}
            </TableBody>
          </Table>
        </Paper>
      </TableViewContainer>
    );
  }
Example #18
Source File: LdapConfig.js    From admin-web with GNU Affero General Public License v3.0 4 votes vote down vote up
render() {
    const { classes, t } = this.props;
    const writable = this.context.includes(SYSTEM_ADMIN_WRITE);
    const { available, force, deleting, snackbar, server, bindUser, bindPass, starttls, baseDn, objectID, disabled,
      username, filter, templates, attributes, defaultQuota, displayName, searchAttributes,
      authBackendSelection, aliases, taskMessage, taskID } = this.state;
    return (
      <div className={classes.root}>
        <TopBar />
        <div className={classes.toolbar}></div>
        <form className={classes.base} onSubmit={this.handleSave}>
          <Typography variant="h2" className={classes.pageTitle}>
            {t("Directory")}
            <Tooltip
              className={classes.tooltip}
              title={t("ldap_settingsHelp")}
              placement="top"
            >
              <IconButton
                size="small"
                href="https://docs.grommunio.com/admin/administration.html#ldap"
                target="_blank"
              >
                <Help fontSize="small"/>
              </IconButton>
            </Tooltip>
          </Typography>
          <Typography variant="caption" className={classes.subtitle}>
            {t('ldap_sub')}
          </Typography>
          <Grid container className={classes.category}>
            <FormControlLabel
              control={
                <Switch
                  checked={!disabled}
                  onChange={this.handleActive}
                  name="disabled"
                  color="primary"
                />
              }
              label={<span>
                {t('LDAP enabled')}
                <Tooltip
                  className={classes.tooltip}
                  title={t("Enable LDAP service")}
                  placement="top"
                >
                  <IconButton size="small">
                    <Help fontSize="small"/>
                  </IconButton>
                </Tooltip>
              </span>}
            />
            <div className={classes.flexContainer}>
              <Tooltip placement="top" title={t("Synchronize already imported users")}>
                <Button
                  variant="contained"
                  color="primary"
                  style={{ marginRight: 16 }}
                  onClick={this.handleSync(false)}
                >
                  {t("Sync users")}
                </Button>
              </Tooltip>
              <Tooltip
                placement="top"
                title={t("ldap_import_tooltip")}
              >
                <Button
                  variant="contained"
                  color="primary"
                  style={{ marginRight: 16 }}
                  onClick={this.handleSync(true)}
                >
                  {t("Import users")}
                </Button>
              </Tooltip>
            </div>
          </Grid>
          <Typography
            color="inherit"
            variant="caption"
            style={{
              marginLeft: 16,
              color: available ? green['500'] : red['500'],
            }}
          >
            {!disabled && (available ? t('LDAP connectivity check passed') : t('LDAP connectivity check failed'))}
          </Typography>
          <Paper elevation={1} className={classes.paper}>
            <Typography variant="h6" className={classes.category}>{t('LDAP Server')}</Typography>
            <FormControl className={classes.formControl}>
              <div className={classes.flexRow}>
                <LdapTextfield
                  flex
                  label='LDAP Server'
                  autoFocus
                  placeholder="ldap://[::1]:389/"
                  onChange={this.handleInput('server')}
                  value={server || ''}
                  desc={t("ldap_server_desc")}
                  id="url"
                  name="url"
                  autoComplete="url"
                  InputLabelProps={{
                    shrink: true,
                  }}
                />
                <LdapTextfield
                  flex
                  label="LDAP Bind DN"
                  onChange={this.handleInput('bindUser')}
                  value={bindUser || ''}
                  desc={t("Distinguished Name used for binding")}
                  id="username"
                  name="username"
                  autoComplete="username"
                />
                <LdapTextfield
                  flex
                  label={t('LDAP Bind Password')}
                  onChange={this.handleInput('bindPass')}
                  value={bindPass || ''}
                  desc={t("ldap_password_desc")}
                  id="password"
                  name="password"
                  type="password"
                  autoComplete="current-password"
                />
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={starttls || false}
                      onChange={this.handleCheckbox('starttls')}
                      name="starttls"
                      inputProps={{
                        autoComplete: 'starttls',
                        name: 'starttls',
                        id: 'starttls',
                      }}
                      color="primary"
                    />
                  }
                  label={<span>
                    {'STARTTLS'}
                    <Tooltip
                      className={classes.tooltip}
                      title="Whether to issue a StartTLS extended operation"
                      placement="top"
                    >
                      <IconButton size="small">
                        <Help fontSize="small"/>
                      </IconButton>
                    </Tooltip>
                  </span>}
                />
              </div>
              <LdapTextfield
                label='LDAP Base DN'
                onChange={this.handleInput('baseDn')}
                value={baseDn || ''}
                desc={t("Base DN to use for searches")}
                id="baseDn"
                name="baseDn"
                autoComplete="baseDn"
              />
            </FormControl>
          </Paper>
          <Paper elevation={1} className={classes.paper}>
            <Typography variant="h6" className={classes.category}>
              {t('User authentication mechanism')}
            </Typography>
            <FormControl className={classes.formControl}>
              <RadioGroup
                name="authBackendSelection"
                value={authBackendSelection}
                onChange={this.handleInput("authBackendSelection")}
                row
                className={classes.radioGroup}
                color="primary"
              >
                <FormControlLabel
                  value="externid"
                  control={<Radio color="primary"/>}
                  label={t("Automatic")}
                />
                <FormControlLabel value="always_mysql" control={<Radio color="primary"/>} label={t("Only MySQL")} />
                <FormControlLabel value="always_ldap" control={<Radio color="primary"/>} label={t("Only LDAP")} />
              </RadioGroup>
            </FormControl>
          </Paper>
          <Paper className={classes.paper} elevation={1}>
            <FormControl className={classes.formControl}>
              <Typography variant="h6" className={classes.category}>{t('Attribute Configuration')}</Typography>
              <LdapTextfield
                label={t('LDAP Template')}
                onChange={this.handleTemplate}
                value={templates}
                select
                desc={t("Mapping templates to use")}
                id="templates"
                name="templates"
                autoComplete="templates"
              >
                <MenuItem value='none'>{t('No template')}</MenuItem>
                <MenuItem value="OpenLDAP">OpenLDAP</MenuItem>
                <MenuItem value="ActiveDirectory">ActiveDirectory</MenuItem>
              </LdapTextfield>
              <LdapTextfield
                label={t('LDAP Filter')}
                onChange={this.handleInput('filter')}
                value={filter || ''}
                desc={t("LDAP search filter to apply to user lookup")}
                id="filter"
                name="filter"
                autoComplete="filter"
              />
              <LdapTextfield
                label={t('Unique Identifier Attribute')}
                onChange={this.handleInput('objectID')}
                value={objectID || ''}
                desc={t("ldap_oID_desc")}
                id="objectID"
                name="objectID"
                autoComplete="objectID"
              />
              <LdapTextfield
                label={t('LDAP Username Attribute')}
                onChange={this.handleInput('username')}
                value={username || ''}
                desc={t("ldap_username_desc")}
                id="username"
                name="username"
                autoComplete="username"
              />
              <LdapTextfield
                label={t('LDAP Display Name Attribute')}
                onChange={this.handleInput('displayName')}
                value={displayName || ''}
                desc={t("Name of the attribute that contains the name")}
                id="displayName"
                name="displayName"
                autoComplete="displayName"
              />
              <LdapTextfield
                label={t('LDAP Default Quota')}
                onChange={this.handleInput('defaultQuota')}
                value={defaultQuota}
                desc={t("ldap_defaultQuota_desc")}
                id="defaultQuota"
                name="defaultQuota"
                autoComplete="defaultQuota"
              />
              <LdapTextfield
                label={t('LDAP Aliases')}
                onChange={this.handleInput('aliases')}
                value={aliases}
                desc={t("LDAP alias mapping")}
                id="aliasMapping"
                name="aliasMapping"
                autoComplete="aliasMapping"
              />
            </FormControl>
          </Paper>
          <Paper elevation={1} className={classes.paper}>
            <Typography variant="h6" className={classes.category}>{t('LDAP Search Attributes')}</Typography>
            <Typography variant="caption" className={classes.category}>
              {t('ldap_attribute_desc')}
            </Typography>
            <Autocomplete
              value={searchAttributes || []}
              onChange={this.handleAutocomplete('searchAttributes')}
              className={classes.textfield}
              options={adminConfig.searchAttributes}
              multiple
              renderInput={(params) => (
                <TextField
                  {...params}
                />
              )}
            />
          </Paper>
          <Paper elevation={1} className={classes.paper}>
            <Typography variant="h6" className={classes.category}>
              {t('Custom Mapping')}
              <Tooltip
                className={classes.tooltip}
                title={t('ldap_mapping_desc')}
                placement="top"
              >
                <IconButton size="small">
                  <Help fontSize="small"/>
                </IconButton>
              </Tooltip>
            </Typography>
            {attributes.map((mapping, idx) =>
              <Grid className={classes.attribute} container alignItems="center" key={idx}>
                <LdapTextfield
                  label={t('Name')}
                  flex
                  onChange={this.handleAttributeInput('key', idx)}
                  value={mapping.key || ''}
                  desc={t("LDAP attribute to map")}
                />
                <Typography className={classes.spacer}>:</Typography>
                <LdapTextfield
                  label={t('Value')}
                  flex
                  onChange={this.handleAttributeInput('value', idx)}
                  value={mapping.value || ''}
                  desc={t("Name of the user property to map to")}
                />
                <IconButton
                  onClick={this.removeRow(idx)}
                  className={classes.removeButton}
                  size="large">
                  <Delete color="error" />
                </IconButton>
              </Grid>
            )}
            <Grid container justifyContent="center" className={classes.addButton}>
              <Button size="small" onClick={this.handleNewRow}>
                <Add color="primary" />
              </Button>
            </Grid>
          </Paper>
          <div className={classes.bottomRow}>
            <Button
              variant="contained"
              color="secondary"
              onClick={this.handleDelete}
              className={classes.deleteButton}
            >
              {t('Delete config')}
            </Button>
            <Button
              variant="contained"
              color="primary"
              type="submit"
              onClick={this.handleSave}
              disabled={!writable}
            >
              {t('Save')}
            </Button>
            <FormControlLabel
              className={classes.attribute}
              control={
                <Checkbox
                  checked={force || false}
                  onChange={this.handleCheckbox('force')}
                  name="disabled"
                  color="primary"
                />
              }
              label={<span>
                {t('Force config save')}
                <Tooltip
                  className={classes.tooltip}
                  title={t("Save LDAP configuration even if it's faulty")}
                  placement="top"
                >
                  <IconButton size="small">
                    <Help fontSize="small"/>
                  </IconButton>
                </Tooltip>
              </span>}
            />
          </div>
        </form>
        <DeleteConfig
          open={deleting}
          onSuccess={this.handleDeleteSuccess}
          onError={this.handleDeleteError}
          onClose={this.handleDeleteClose}
        />
        <TaskCreated
          message={taskMessage}
          taskID={taskID}
          onClose={this.handleTaskClose}
        />
        <Feedback
          snackbar={snackbar}
          onClose={() => this.setState({ snackbar: '' })}
        />
      </div>
    );
  }
Example #19
Source File: Domains.js    From admin-web with GNU Affero General Public License v3.0 4 votes vote down vote up
render() {
    const { classes, t, domains, tableState, handleMatch, handleRequestSort,
      handleAdd, handleAddingSuccess, handleAddingClose, handleAddingError,
      clearSnackbar, handleDelete, handleDeleteClose, handleDeleteError,
      handleDeleteSuccess, handleEdit } = this.props;
    const { showDeleted } = this.state;
    const { order, orderBy, match, snackbar, adding, deleting } = tableState;
    const writable = this.context.includes(SYSTEM_ADMIN_WRITE);
    const filteredDomains = domains.Domains.filter(d => d.domainStatus !== 3 || showDeleted);

    return (
      <TableViewContainer
        handleScroll={this.handleScroll}
        headline={t("Domains")}
        subtitle={t('domains_sub')}
        snackbar={snackbar}
        href="https://docs.grommunio.com/admin/administration.html#domains"
        onSnackbarClose={clearSnackbar}
      >
        <Grid container alignItems="flex-end" className={classes.buttonGrid}>
          <Button
            variant="contained"
            color="primary"
            onClick={handleAdd}
            disabled={!writable}
          >
            {t("New domain")}
          </Button>
          <div className={classes.actions}>
            <FormControlLabel
              label={t("Show deactivated")}
              control={
                <Checkbox
                  checked={showDeleted || false}
                  onChange={this.handleCheckbox("showDeleted")}
                />
              }
            />
            <TextField
              value={match}
              onChange={handleMatch}
              placeholder={t("Search")}
              variant={"outlined"}
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <Search color="secondary" />
                  </InputAdornment>
                ),
              }}
              color="primary"
            />
          </div>
        </Grid>
        <Typography className={classes.count} color="textPrimary">
          {t("showingDomains", { count: filteredDomains.length })}
        </Typography>
        <Paper elevation={1}>
          <Table size="small">
            <TableHead>
              <TableRow>
                {this.columns.map((column) => (
                  <TableCell key={column.value}>
                    <TableSortLabel
                      active={orderBy === column.value}
                      align="left"
                      direction={orderBy === column.value ? order : "asc"}
                      onClick={handleRequestSort(column.value)}
                      disabled={column.value === 'activeUsers'}
                    >
                      {t(column.label)}
                    </TableSortLabel>
                  </TableCell>
                ))}
                <TableCell padding="checkbox" />
              </TableRow>
            </TableHead>
            <TableBody>
              {filteredDomains.map((obj, idx) =>
                <TableRow key={idx} hover onClick={handleEdit("/domains/" + obj.ID)}>
                  <TableCell>
                    {obj.domainname}{obj.domainname !== obj.displayname ? ` (${obj.displayname}) ` : " "}
                    {obj.domainStatus === 3 ? `[${t("Deactivated")}]` : ""}
                  </TableCell>
                  <TableCell>{obj.address}</TableCell>
                  <TableCell>{obj.title}</TableCell>
                  <TableCell>{obj.activeUsers}</TableCell>
                  <TableCell>{obj.maxUser}</TableCell>
                  <TableCell align="right">
                    {writable && <IconButton onClick={handleDelete(obj)} size="large">
                      <Delete color="error" />
                    </IconButton>}
                  </TableCell>
                </TableRow>)
              }
            </TableBody>
          </Table>
          {domains.Domains.length < domains.count && (
            <Grid container justifyContent="center">
              <CircularProgress
                color="primary"
                className={classes.circularProgress}
              />
            </Grid>
          )}
        </Paper>
        <AddDomain
          open={adding}
          onSuccess={handleAddingSuccess}
          onError={handleAddingError}
          onClose={handleAddingClose}
        />
        <DeleteDomain
          open={!!deleting}
          delete={this.props.delete}
          onSuccess={handleDeleteSuccess}
          onError={handleDeleteError}
          onClose={handleDeleteClose}
          item={deleting.domainname}
          id={deleting.ID}
        />
      </TableViewContainer>
    );
  }
Example #20
Source File: SlimSyncPolicies.js    From admin-web with GNU Affero General Public License v3.0 4 votes vote down vote up
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>
    );
  }
Example #21
Source File: column-hide.js    From react-table-library with MIT License 4 votes vote down vote up
Component = () => {
  const data = { nodes };

  const materialTheme = getTheme(DEFAULT_OPTIONS);
  const theme = useTheme(materialTheme);

  const [hiddenColumns, setHiddenColumns] = React.useState(['DEADLINE', 'COMPLETE']);

  const toggleColumn = (column) => {
    if (hiddenColumns.includes(column)) {
      setHiddenColumns(hiddenColumns.filter((v) => v !== column));
    } else {
      setHiddenColumns(hiddenColumns.concat(column));
    }
  };

  const COLUMNS = [
    { label: 'Task', renderCell: (item) => item.name, hide: hiddenColumns.includes('TASK') },
    {
      label: 'Deadline',
      renderCell: (item) =>
        item.deadline.toLocaleDateString('en-US', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
        }),
      hide: hiddenColumns.includes('DEADLINE'),
    },
    { label: 'Type', renderCell: (item) => item.type, hide: hiddenColumns.includes('TYPE') },
    {
      label: 'Complete',
      renderCell: (item) => item.isComplete.toString(),
      hide: hiddenColumns.includes('COMPLETE'),
    },
    {
      label: 'Tasks',
      renderCell: (item) => item.nodes?.length,
      hide: hiddenColumns.includes('TASKS'),
    },
  ];

  return (
    <>
      <Stack spacing={10}>
        <FormGroup row>
          <FormControlLabel
            control={
              <Checkbox
                checked={!hiddenColumns.includes('NAME')}
                onChange={() => toggleColumn('NAME')}
              />
            }
            label="Name"
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!hiddenColumns.includes('DEADLINE')}
                onChange={() => toggleColumn('DEADLINE')}
              />
            }
            label="Deadline"
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!hiddenColumns.includes('TYPE')}
                onChange={() => toggleColumn('TYPE')}
              />
            }
            label="Type"
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!hiddenColumns.includes('COMPLETE')}
                onChange={() => toggleColumn('COMPLETE')}
              />
            }
            label="Complete"
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!hiddenColumns.includes('TASKS')}
                onChange={() => toggleColumn('TASKS')}
              />
            }
            label="Tasks"
          />
        </FormGroup>
      </Stack>

      <CompactTable columns={COLUMNS} data={data} theme={theme} layout={{ hiddenColumns }} />

      <br />
      <DocumentationSee anchor={'Features/' + key} />
    </>
  );
}
Example #22
Source File: showreel.js    From react-table-library with MIT License 4 votes vote down vote up
Component = () => {
  const [data, setData] = React.useState({ nodes });

  //* Theme *//

  const materialTheme = getTheme({
    ...DEFAULT_OPTIONS,
    striped: true,
    highlightOnHover: true,
  });
  const customTheme = {
    Table: `
      --data-table-library_grid-template-columns:  70px repeat(5, minmax(0, 1fr));

      margin: 16px 0px;
    `,
  };
  const theme = useTheme([materialTheme, customTheme]);

  //* Resize *//

  const resize = { resizerHighlight: '#dee2e6' };

  //* Pagination *//

  const pagination = usePagination(data, {
    state: {
      page: 0,
      size: 2,
    },
    onChange: onPaginationChange,
  });

  function onPaginationChange(action, state) {
    console.log(action, state);
  }

  //* Search *//

  const [search, setSearch] = React.useState('');

  useCustom('search', data, {
    state: { search },
    onChange: onSearchChange,
  });

  function onSearchChange(action, state) {
    console.log(action, state);
    pagination.fns.onSetPage(0);
  }

  //* Filter *//

  const [isHide, setHide] = React.useState(false);

  useCustom('filter', data, {
    state: { isHide },
    onChange: onFilterChange,
  });

  function onFilterChange(action, state) {
    console.log(action, state);
    pagination.fns.onSetPage(0);
  }

  //* Select *//

  const select = useRowSelect(data, {
    onChange: onSelectChange,
  });

  function onSelectChange(action, state) {
    console.log(action, state);
  }

  //* Tree *//

  const tree = useTree(
    data,
    {
      onChange: onTreeChange,
    },
    {
      clickType: TreeExpandClickTypes.ButtonClick,
      treeYLevel: 1,
      treeIcon: {
        margin: '4px',
        iconDefault: null,
        iconRight: <FaChevronRight />,
        iconDown: <FaChevronDown />,
      },
    },
  );

  function onTreeChange(action, state) {
    console.log(action, state);
  }

  //* Sort *//

  const sort = useSort(
    data,
    {
      onChange: onSortChange,
    },
    {
      sortIcon: {
        iconDefault: null,
        iconUp: <FaChevronUp />,
        iconDown: <FaChevronDown />,
      },
      sortFns: {
        TASK: (array) => array.sort((a, b) => a.name.localeCompare(b.name)),
        DEADLINE: (array) => array.sort((a, b) => a.deadline - b.deadline),
        TYPE: (array) => array.sort((a, b) => a.type.localeCompare(b.type)),
        COMPLETE: (array) => array.sort((a, b) => a.isComplete - b.isComplete),
        TASKS: (array) => array.sort((a, b) => (a.nodes || []).length - (b.nodes || []).length),
      },
    },
  );

  function onSortChange(action, state) {
    console.log(action, state);
  }

  //* Drawer *//

  const [drawerId, setDrawerId] = React.useState(null);
  const [edited, setEdited] = React.useState('');

  const handleEdit = (event) => {
    setEdited(event.target.value);
  };

  const handleCancel = () => {
    setEdited('');
    setDrawerId(null);
  };

  const handleSave = () => {
    const node = findNodeById(data.nodes, drawerId);
    const editedNode = { ...node, name: edited };
    const nodes = insertNode(data.nodes, editedNode);

    setData({
      nodes,
    });

    setEdited('');
    setDrawerId(null);
  };

  //* Modal *//

  const [modalOpened, setModalOpened] = React.useState(false);

  //* Custom Modifiers *//

  let modifiedNodes = data.nodes;

  // search
  modifiedNodes = modifiedNodes.filter((node) =>
    node.name.toLowerCase().includes(search.toLowerCase()),
  );

  // filter
  modifiedNodes = isHide ? modifiedNodes.filter((node) => !node.isComplete) : modifiedNodes;

  //* Columns *//

  const COLUMNS = [
    {
      label: 'Task',
      renderCell: (item) => item.name,
      resize,
      sort: { sortKey: 'TASK' },
      select: {
        renderHeaderCellSelect: () => (
          <Checkbox
            size="small"
            checked={select.state.all}
            indeterminate={!select.state.all && !select.state.none}
            onChange={select.fns.onToggleAll}
          />
        ),
        renderCellSelect: (item) => (
          <Checkbox
            size="small"
            checked={select.state.ids.includes(item.id)}
            onChange={() => select.fns.onToggleById(item.id)}
          />
        ),
      },
      tree: true,
    },
    {
      label: 'Deadline',
      renderCell: (item) =>
        item.deadline.toLocaleDateString('en-US', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
        }),
      resize,
      sort: { sortKey: 'DEADLINE' },
    },
    { label: 'Type', renderCell: (item) => item.type, resize, sort: { sortKey: 'TYPE' } },
    {
      label: 'Complete',
      renderCell: (item) => item.isComplete.toString(),
      resize,
      sort: { sortKey: 'COMPLETE' },
    },
    {
      label: 'Tasks',
      renderCell: (item) => (
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span>{item.nodes?.length}</span>
          <IconButton onClick={() => setDrawerId(item.id)}>
            <FaPen size={14} />
          </IconButton>
        </div>
      ),
      resize,
      sort: { sortKey: 'TASKS' },
    },
  ];

  return (
    <>
      <Modal open={modalOpened} onClose={() => setModalOpened(false)}>
        <Box
          style={{
            position: 'absolute',
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)',
            width: 500,
            backgroundColor: '#ffffff',
            border: '1px solid #e0e0e0',
            borderRadius: '4px',
            padding: '10px',
          }}
        >
          <Typography variant="h6" component="h2">
            "Not all features included here, but we got ..."
          </Typography>
          <FormGroup>
            <FormControlLabel control={<Checkbox checked />} label="Resize" />
            <FormControlLabel control={<Checkbox checked />} label="Sort" />
            <FormControlLabel control={<Checkbox checked />} label="Search" />
            <FormControlLabel control={<Checkbox checked />} label="Filter" />
            <FormControlLabel control={<Checkbox checked />} label="Select" />
            <FormControlLabel control={<Checkbox checked />} label="Tree" />
            <FormControlLabel control={<Checkbox checked />} label="Drawer on Edit" />
            <FormControlLabel control={<Checkbox checked />} label="Pagination" />
          </FormGroup>
        </Box>
      </Modal>

      {/* Form */}

      <Stack spacing={1} direction="row">
        <Button variant="contained" onClick={() => setModalOpened(true)}>
          Features?
        </Button>

        <TextField
          label="Search Task"
          value={search}
          onChange={(event) => setSearch(event.target.value)}
        />
        <FormControlLabel
          control={
            <Checkbox checked={isHide} onChange={(event) => setHide(event.target.checked)} />
          }
          label="Hide Complete"
        />
      </Stack>

      {/* Table */}

      <CompactTable
        columns={COLUMNS}
        data={{ ...data, nodes: modifiedNodes }}
        theme={theme}
        layout={{ custom: true }}
        select={select}
        tree={tree}
        sort={sort}
        pagination={pagination}
      />

      <br />
      <Stack spacing={10}>
        <TablePagination
          count={modifiedNodes.length}
          page={pagination.state.page}
          rowsPerPage={pagination.state.size}
          rowsPerPageOptions={[1, 2, 5]}
          onRowsPerPageChange={(event) =>
            pagination.fns.onSetSize(parseInt(event.target.value, 10))
          }
          onPageChange={(event, page) => pagination.fns.onSetPage(page)}
        />
      </Stack>

      <Drawer
        open={drawerId}
        onClose={handleCancel}
        title="Edit"
        anchor="right"
        PaperProps={{
          sx: { width: '50%', padding: '20px' },
        }}
      >
        <Stack spacing={1}>
          <TextField
            label="Name"
            value={edited || fromTreeToList(data.nodes).find((node) => node.id === drawerId)?.name}
            onChange={handleEdit}
            autoFocus
          />
          <Button variant="outlined" onClick={handleCancel}>
            Cancel
          </Button>
          <Button variant="contained" onClick={handleSave}>
            Save
          </Button>
        </Stack>
      </Drawer>
    </>
  );
}
Example #23
Source File: SimpleForm.jsx    From matx-react with MIT License 4 votes vote down vote up
SimpleForm = () => {
  const [state, setState] = useState({ date: new Date() });

  useEffect(() => {
    ValidatorForm.addValidationRule("isPasswordMatch", (value) => {
      if (value !== state.password) return false;

      return true;
    });
    return () => ValidatorForm.removeValidationRule("isPasswordMatch");
  }, [state.password]);

  const handleSubmit = (event) => {
    // console.log("submitted");
    // console.log(event);
  };

  const handleChange = (event) => {
    event.persist();
    setState({ ...state, [event.target.name]: event.target.value });
  };

  const handleDateChange = (date) => setState({ ...state, date });

  const {
    username,
    firstName,
    creditCard,
    mobile,
    password,
    confirmPassword,
    gender,
    date,
    email,
  } = state;

  return (
    <div>
      <ValidatorForm onSubmit={handleSubmit} onError={() => null}>
        <Grid container spacing={6}>
          <Grid item lg={6} md={6} sm={12} xs={12} sx={{ mt: 2 }}>
            <TextField
              type="text"
              name="username"
              id="standard-basic"
              value={username || ""}
              onChange={handleChange}
              errorMessages={["this field is required"]}
              label="Username (Min length 4, Max length 9)"
              validators={["required", "minStringLength: 4", "maxStringLength: 9"]}
            />

            <TextField
              type="text"
              name="firstName"
              label="First Name"
              onChange={handleChange}
              value={firstName || ""}
              validators={["required"]}
              errorMessages={["this field is required"]}
            />

            <TextField
              type="email"
              name="email"
              label="Email"
              value={email || ""}
              onChange={handleChange}
              validators={["required", "isEmail"]}
              errorMessages={["this field is required", "email is not valid"]}
            />

            <LocalizationProvider dateAdapter={AdapterDateFns}>
              <DatePicker
                value={date}
                onChange={handleDateChange}
                renderInput={(props) => (
                  <TextField
                    {...props}
                    label="Date picker"
                    id="mui-pickers-date"
                    sx={{ mb: 2, width: "100%" }}
                  />
                )}
              />
            </LocalizationProvider>

            <TextField
              sx={{ mb: 4 }}
              type="number"
              name="creditCard"
              label="Credit Card"
              onChange={handleChange}
              value={creditCard || ""}
              errorMessages={["this field is required"]}
              validators={["required", "minStringLength:16", "maxStringLength: 16"]}
            />
          </Grid>

          <Grid item lg={6} md={6} sm={12} xs={12} sx={{ mt: 2 }}>
            <TextField
              type="text"
              name="mobile"
              value={mobile || ""}
              label="Mobile Nubmer"
              onChange={handleChange}
              validators={["required"]}
              errorMessages={["this field is required"]}
            />
            <TextField
              name="password"
              type="password"
              label="Password"
              value={password || ""}
              onChange={handleChange}
              validators={["required"]}
              errorMessages={["this field is required"]}
            />
            <TextField
              type="password"
              name="confirmPassword"
              onChange={handleChange}
              label="Confirm Password"
              value={confirmPassword || ""}
              validators={["required", "isPasswordMatch"]}
              errorMessages={["this field is required", "password didn't match"]}
            />
            <RadioGroup
              row
              name="gender"
              sx={{ mb: 2 }}
              value={gender || ""}
              onChange={handleChange}
            >
              <FormControlLabel
                value="Male"
                label="Male"
                labelPlacement="end"
                control={<Radio color="secondary" />}
              />

              <FormControlLabel
                value="Female"
                label="Female"
                labelPlacement="end"
                control={<Radio color="secondary" />}
              />

              <FormControlLabel
                value="Others"
                label="Others"
                labelPlacement="end"
                control={<Radio color="secondary" />}
              />
            </RadioGroup>

            <FormControlLabel
              control={<Checkbox />}
              label="I have read and agree to the terms of service."
            />
          </Grid>
        </Grid>

        <Button color="primary" variant="contained" type="submit">
          <Icon>send</Icon>
          <Span sx={{ pl: 1, textTransform: "capitalize" }}>Submit</Span>
        </Button>
      </ValidatorForm>
    </div>
  );
}
Example #24
Source File: JwtLogin.jsx    From matx-react with MIT License 4 votes vote down vote up
JwtLogin = () => {
  const theme = useTheme();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);

  const { login } = useAuth();

  const handleFormSubmit = async (values) => {
    setLoading(true);
    try {
      await login(values.email, values.password);
      navigate('/');
    } catch (e) {
      setLoading(false);
    }
  };

  return (
    <JWTRoot>
      <Card className="card">
        <Grid container>
          <Grid item sm={6} xs={12}>
            <JustifyBox p={4} height="100%" sx={{ minWidth: 320 }}>
              <img src="/assets/images/illustrations/dreamer.svg" width="100%" alt="" />
            </JustifyBox>
          </Grid>

          <Grid item sm={6} xs={12}>
            <ContentBox>
              <Formik
                onSubmit={handleFormSubmit}
                initialValues={initialValues}
                validationSchema={validationSchema}
              >
                {({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => (
                  <form onSubmit={handleSubmit}>
                    <TextField
                      fullWidth
                      size="small"
                      type="email"
                      name="email"
                      label="Email"
                      variant="outlined"
                      onBlur={handleBlur}
                      value={values.email}
                      onChange={handleChange}
                      helperText={touched.email && errors.email}
                      error={Boolean(errors.email && touched.email)}
                      sx={{ mb: 3 }}
                    />

                    <TextField
                      fullWidth
                      size="small"
                      name="password"
                      type="password"
                      label="Password"
                      variant="outlined"
                      onBlur={handleBlur}
                      value={values.password}
                      onChange={handleChange}
                      helperText={touched.password && errors.password}
                      error={Boolean(errors.password && touched.password)}
                      sx={{ mb: 1.5 }}
                    />

                    <FlexBox justifyContent="space-between">
                      <FlexBox gap={1}>
                        <Checkbox
                          size="small"
                          name="remember"
                          onChange={handleChange}
                          checked={values.remember}
                          sx={{ padding: 0 }}
                        />

                        <Paragraph>Remember Me</Paragraph>
                      </FlexBox>

                      <NavLink
                        to="/session/forgot-password"
                        style={{ color: theme.palette.primary.main }}
                      >
                        Forgot password?
                      </NavLink>
                    </FlexBox>

                    <LoadingButton
                      type="submit"
                      color="primary"
                      loading={loading}
                      variant="contained"
                      sx={{ my: 2 }}
                    >
                      Login
                    </LoadingButton>

                    <Paragraph>
                      Don't have an account?
                      <NavLink
                        to="/session/signup"
                        style={{ color: theme.palette.primary.main, marginLeft: 5 }}
                      >
                        Register
                      </NavLink>
                    </Paragraph>
                  </form>
                )}
              </Formik>
            </ContentBox>
          </Grid>
        </Grid>
      </Card>
    </JWTRoot>
  );
}
Example #25
Source File: JwtRegister.jsx    From matx-react with MIT License 4 votes vote down vote up
JwtRegister = () => {
  const theme = useTheme();
  const { register } = useAuth();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);

  const handleFormSubmit = (values) => {
    setLoading(true);

    try {
      register(values.email, values.username, values.password);
      navigate('/');
      setLoading(false);
    } catch (e) {
      console.log(e);
      setLoading(false);
    }
  };

  return (
    <JWTRegister>
      <Card className="card">
        <Grid container>
          <Grid item sm={6} xs={12}>
            <ContentBox>
              <img
                width="100%"
                alt="Register"
                src="/assets/images/illustrations/posting_photo.svg"
              />
            </ContentBox>
          </Grid>

          <Grid item sm={6} xs={12}>
            <Box p={4} height="100%">
              <Formik
                onSubmit={handleFormSubmit}
                initialValues={initialValues}
                validationSchema={validationSchema}
              >
                {({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => (
                  <form onSubmit={handleSubmit}>
                    <TextField
                      fullWidth
                      size="small"
                      type="text"
                      name="username"
                      label="Username"
                      variant="outlined"
                      onBlur={handleBlur}
                      value={values.username}
                      onChange={handleChange}
                      helperText={touched.username && errors.username}
                      error={Boolean(errors.username && touched.username)}
                      sx={{ mb: 3 }}
                    />

                    <TextField
                      fullWidth
                      size="small"
                      type="email"
                      name="email"
                      label="Email"
                      variant="outlined"
                      onBlur={handleBlur}
                      value={values.email}
                      onChange={handleChange}
                      helperText={touched.email && errors.email}
                      error={Boolean(errors.email && touched.email)}
                      sx={{ mb: 3 }}
                    />
                    <TextField
                      fullWidth
                      size="small"
                      name="password"
                      type="password"
                      label="Password"
                      variant="outlined"
                      onBlur={handleBlur}
                      value={values.password}
                      onChange={handleChange}
                      helperText={touched.password && errors.password}
                      error={Boolean(errors.password && touched.password)}
                      sx={{ mb: 2 }}
                    />

                    <FlexBox gap={1} alignItems="center">
                      <Checkbox
                        size="small"
                        name="remember"
                        onChange={handleChange}
                        checked={values.remember}
                        sx={{ padding: 0 }}
                      />

                      <Paragraph fontSize={13}>
                        I have read and agree to the terms of service.
                      </Paragraph>
                    </FlexBox>

                    <LoadingButton
                      type="submit"
                      color="primary"
                      loading={loading}
                      variant="contained"
                      sx={{ mb: 2, mt: 3 }}
                    >
                      Regiser
                    </LoadingButton>

                    <Paragraph>
                      Already have an account?
                      <NavLink
                        to="/session/signin"
                        style={{ color: theme.palette.primary.main, marginLeft: 5 }}
                      >
                        Login
                      </NavLink>
                    </Paragraph>
                  </form>
                )}
              </Formik>
            </Box>
          </Grid>
        </Grid>
      </Card>
    </JWTRegister>
  );
}
Example #26
Source File: DomainDetails.js    From admin-web with GNU Affero General Public License v3.0 4 votes vote down vote up
render() {
    const { classes, t, orgs, capabilities, servers } = this.props;
    const writable = this.context.includes(SYSTEM_ADMIN_WRITE);
    const { domainname, domainStatus, orgID, maxUser, title, address, adminName,
      tel, syncPolicy, checkPw, newPw, changingPw, snackbar, tab, defaultPolicy,
      chat, homeserver, autocompleteInput } = this.state;
    
    return (
      <ViewWrapper
        topbarTitle={t('Domains')}
        snackbar={snackbar}
        onSnackbarClose={() => this.setState({ snackbar: '' })}
      >
        <Paper className={classes.paper} elevation={1}>
          <Grid container>
            <Typography
              color="primary"
              variant="h5"
            >
              {t('editHeadline', { item: 'Domain' })}
            </Typography>
          </Grid>
          <Tabs className={classes.tabs} indicatorColor="primary" onChange={this.handleTab} value={tab}>
            <Tab value={0} label={t('Domain')} />
            <Tab value={1} label={t('Sync policies')} />
          </Tabs>
          {tab === 0 && <FormControl className={classes.form}>
            <Grid container className={classes.input}>
              <TextField
                label={t("Domain")} 
                style={{ flex: 1, marginRight: 8 }} 
                value={domainname || ''}
                autoFocus
                disabled
              />
            </Grid>
            <TextField
              select
              className={classes.input}
              label={t("Status")}
              fullWidth
              value={domainStatus || 0}
              onChange={this.handleInput('domainStatus')}
            >
              {this.statuses.map((status, key) => (
                <MenuItem key={key} value={status.ID}>
                  {status.name}
                </MenuItem>
              ))}
            </TextField>
            {capabilities.includes(SYSTEM_ADMIN_READ) && <MagnitudeAutocomplete
              value={orgID}
              filterAttribute={'name'}
              onChange={this.handleAutocomplete('orgID')}
              className={classes.input} 
              options={orgs}
              inputValue={autocompleteInput}
              onInputChange={this.handleInput('autocompleteInput')}
              label={t('Organization')}
            />}
            <TextField 
              className={classes.input} 
              label={t("Maximum users")} 
              fullWidth 
              value={maxUser || ''}
              onChange={this.handleInput('maxUser')}
            />
            <TextField 
              className={classes.input} 
              label={t("Title")} 
              fullWidth 
              value={title || ''}
              onChange={this.handleInput('title')}
            />
            <TextField 
              className={classes.input} 
              label={t("Address")} 
              fullWidth 
              value={address || ''}
              onChange={this.handleInput('address')}
            />
            <TextField 
              className={classes.input} 
              label={t("Administrator")} 
              fullWidth 
              value={adminName || ''}
              onChange={this.handleInput('adminName')}
            />
            <TextField 
              className={classes.input} 
              label={t("Telephone")} 
              fullWidth 
              value={tel || ''}
              onChange={this.handleInput('tel')}
            />
            <MagnitudeAutocomplete
              value={homeserver}
              filterAttribute={'hostname'}
              onChange={this.handleServer}
              className={classes.input} 
              options={servers}
              label={t('Homeserver')}
            />
            <FormControlLabel
              control={
                <Checkbox
                  checked={chat || false}
                  onChange={this.handleCheckbox('chat')}
                  color="primary"
                />
              }
              className={classes.input} 
              label={t('grommunio-chat Team')}
            />
          </FormControl>}
          {tab === 1 && <SlimSyncPolicies
            syncPolicy={syncPolicy}
            defaultPolicy={defaultPolicy}
            handleChange={this.handleSyncChange}
            handleCheckbox={this.handleSyncCheckboxChange}
            handleSlider={this.handleSlider}
          />}
          <Button
            color="secondary"
            onClick={this.handleBack}
            style={{ marginRight: 8 }}
          >
            {t('Back')}
          </Button>
          <Button
            variant="contained"
            color="primary"
            onClick={this.handleEdit}
            disabled={!writable}
          >
            {t('Save')}
          </Button>
        </Paper>
        <Dialog open={!!changingPw} onClose={() => this.setState({ changingPw: false })}>
          <DialogTitle>{t('Change password')}</DialogTitle>
          <DialogContent>
            <TextField 
              className={classes.input} 
              label={t("New password")} 
              fullWidth
              type="password"
              value={newPw}
              onChange={event => this.setState({ newPw: event.target.value })}
              autoFocus
              onKeyPress={this.handleKeyPress}
            />
            <TextField 
              className={classes.input} 
              label={t("Repeat new password")} 
              fullWidth
              type="password"
              value={checkPw}
              onChange={event => this.setState({ checkPw: event.target.value })}
              onKeyPress={this.handleKeyPress}
            />
          </DialogContent>
          <DialogActions>
            <Button
              color="secondary"
              onClick={() => this.setState({ changingPw: false })}>
              {t('Cancel')}
            </Button>
            <Button
              variant="contained"
              color="primary"
              onClick={this.handlePasswordChange}
              disabled={checkPw !== newPw}
            >
              {t('Save')}
            </Button>
          </DialogActions>
        </Dialog>
      </ViewWrapper>
    );
  }
Example #27
Source File: Defaults.js    From admin-web with GNU Affero General Public License v3.0 4 votes vote down vote up
render() {
    const { classes, t } = this.props;
    const { createParams, sizeUnits, snackbar, langs } = this.state;
    const { maxUser, prohibitsendquota, prohibitreceivequota, storagequotalimit,
      lang, privChat, privArchive, privFiles, privVideo,
      // eslint-disable-next-line camelcase
      smtp, changePassword, pop3_imap, chatTeam, chatUser } = createParams;
    const writable = this.context.includes(SYSTEM_ADMIN_WRITE);

    return (
      <ViewWrapper
        topbarTitle={t('Defaults')}
        snackbar={snackbar}
        onSnackbarClose={() => this.setState({ snackbar: '' })}
      >
        <Paper className={classes.paper} elevation={1}>
          <Grid container>
            <Typography
              color="primary"
              variant="h5"
            >
              {t('editHeadline', { item: 'Defaults' })}
            </Typography>
          </Grid>
          <FormControl className={classes.form}>
            <Typography
              color="primary"
              variant="h6"
              className={classes.subheader}
            >
              {t('Domain create parameters')}
            </Typography>
            <TextField 
              style={{ marginBottom: 16 }}
              label={t("Max users")}
              onChange={this.handleInput('maxUser')}
              fullWidth 
              value={maxUser || ''}
              autoFocus
            />
            <Grid container className={classes.input}>
              <FormControlLabel
                control={
                  <Checkbox
                    checked={chatTeam || false }
                    onChange={this.handleCheckbox('chatTeam')}
                    color="primary"
                  />
                }
                label={t('Create chat team')}
              />
            </Grid>
            <Typography
              color="primary"
              variant="h6"
              className={classes.subheader}
            >
              {t('User create parameters')}
            </Typography>
            <TextField
              select
              className={classes.input}
              label={t("Language")}
              fullWidth
              value={lang || ''}
              onChange={this.handleInput('lang')}
            >
              {langs.map((l) => (
                <MenuItem key={l.code} value={l.code}>
                  {l.code + ": " + l.name}
                </MenuItem>
              ))}
            </TextField>
            <Grid container style={{ marginTop: 8 }}>
              <TextField 
                className={classes.flexInput}
                label={
                  <div className={classes.labelContainer}>
                    {t("Send quota limit")}
                    <div style={{ width: 6, height: 6, backgroundColor: yellow['500'], marginLeft: 4 }}></div>
                  </div>
                }
                value={prohibitsendquota !== undefined ? prohibitsendquota : ''}
                onChange={this.handleInput('prohibitsendquota')}
                InputProps={{
                  endAdornment:
                    <FormControl className={classes.adornment}>
                      <Select
                        onChange={this.handleUnitChange('prohibitsendquota')}
                        value={sizeUnits.prohibitsendquota}
                        className={classes.select}
                        variant="standard"
                      >
                        <MenuItem value={1}>MB</MenuItem>
                        <MenuItem value={2}>GB</MenuItem>
                        <MenuItem value={3}>TB</MenuItem>
                      </Select>
                    </FormControl>,
                }}
              />
              <TextField 
                className={classes.flexInput}
                label={
                  <div className={classes.labelContainer}>
                    {t("Receive quota limit")}
                    <div style={{ width: 6, height: 6, backgroundColor: red['500'], marginLeft: 4 }}></div>
                  </div>
                }
                value={prohibitreceivequota !== undefined ? prohibitreceivequota : ''}
                onChange={this.handleInput('prohibitreceivequota')}
                InputProps={{
                  endAdornment:
                    <FormControl className={classes.adornment}>
                      <Select
                        onChange={this.handleUnitChange('prohibitreceivequota')}
                        value={sizeUnits.prohibitreceivequota}
                        className={classes.select}
                        variant="standard"
                      >
                        <MenuItem value={1}>MB</MenuItem>
                        <MenuItem value={2}>GB</MenuItem>
                        <MenuItem value={3}>TB</MenuItem>
                      </Select>
                    </FormControl>,
                }}
              />
              <TextField 
                className={classes.flexInput}
                style={{ marginRight: 0 }}
                label={
                  <div className={classes.labelContainer}>
                    {t("Storage quota limit")}
                    <div style={{ width: 6, height: 6, backgroundColor: '#ddd', marginLeft: 4 }}></div>
                  </div>
                }
                value={storagequotalimit !== undefined ? storagequotalimit : ''}
                onChange={this.handleInput('storagequotalimit')}
                InputProps={{
                  endAdornment:
                    <FormControl className={classes.adornment}>
                      <Select
                        onChange={this.handleUnitChange('storagequotalimit')}
                        value={sizeUnits.storagequotalimit}
                        className={classes.select}
                        variant="standard"
                      >
                        <MenuItem value={1}>MB</MenuItem>
                        <MenuItem value={2}>GB</MenuItem>
                        <MenuItem value={3}>TB</MenuItem>
                      </Select>
                    </FormControl>,
                }}
              />
            </Grid>
            <Grid container className={classes.checkboxes}>
              <FormControlLabel
                control={
                  <Checkbox
                    checked={smtp || false }
                    onChange={this.handleCheckbox('smtp')}
                    color="primary"
                  />
                }
                label={t('Allow SMTP sending (used by POP3/IMAP clients)')}
              />
              <FormControlLabel
                control={
                  <Checkbox
                    checked={changePassword || false }
                    onChange={this.handleCheckbox('changePassword')}
                    color="primary"
                  />
                }
                label={t('Allow password changes')}
              />
              <FormControlLabel
                control={
                  <Checkbox
                checked={pop3_imap || false /*eslint-disable-line*/}
                    onChange={this.handleCheckbox('pop3_imap')}
                    color="primary"
                  />
                }
                label={t('Allow POP3/IMAP logins')}
              />
            </Grid>
            <Grid container className={classes.checkboxes}>
              <FormControlLabel
                control={
                  <Checkbox
                    checked={privChat || false }
                    onChange={this.handleCheckbox('privChat')}
                    color="primary"
                  />
                }
                label={t('Allow Chat')}
              />
              <FormControlLabel
                control={
                  <Checkbox
                    checked={privVideo || false }
                    onChange={this.handleCheckbox('privVideo')}
                    color="primary"
                  />
                }
                label={t('Allow Video')}
              />
              <FormControlLabel
                control={
                  <Checkbox
                    checked={privFiles || false }
                    onChange={this.handleCheckbox('privFiles')}
                    color="primary"
                  />
                }
                label={t('Allow Files')}
              />
              <FormControlLabel
                control={
                  <Checkbox
                    checked={privArchive || false }
                    onChange={this.handleCheckbox('privArchive')}
                    color="primary"
                  />
                }
                label={t('Allow Archive')}
              />
            </Grid>
            <Grid container className={classes.checkboxes}>
              <FormControlLabel
                control={
                  <Checkbox
                    checked={chatUser || false }
                    onChange={this.handleCheckbox('chatUser')}
                    color="primary"
                  />
                }
                label={t('Create chat user')}
              />
            </Grid>
          </FormControl>
          <Grid container className={classes.buttonGrid}>
            <Button
              variant="contained"
              color="primary"
              onClick={this.handleEdit}
              disabled={!writable}
            >
              {t('Save')}
            </Button>
          </Grid>
        </Paper>
      </ViewWrapper>
    );
  }
Example #28
Source File: Account.js    From admin-web with GNU Affero General Public License v3.0 4 votes vote down vote up
render() {
    const { classes, t, user, domain, sizeUnits, handleStatusInput, handlePropertyChange,
      handleIntPropertyChange, handleCheckbox, handleUnitChange, langs,
      handlePasswordChange, handleQuotaDelete, handleChatUser, handleServer,
      servers } = this.props;
    const writable = this.context.includes(DOMAIN_ADMIN_WRITE);
    const { username, status, properties, smtp, pop3_imap, changePassword, lang, //eslint-disable-line
      ldapID, chat, chatAdmin, privChat, privVideo, privFiles, privArchive, homeserver } = user;
    const { creationtime, displaytypeex, storagequotalimit, prohibitreceivequota,
      prohibitsendquota } = properties;

    return (
      <FormControl className={classes.form}>
        <Grid container className={classes.input}>
          <TextField
            label={t("Username")}
            value={username || ''}
            autoFocus
            style={{ flex: 1, marginRight: 8 }}
            InputProps={{
              endAdornment: <div>@{domain.domainname}</div>,
            }}
            disabled
          />
          {writable && status !== 4 && ldapID === null && <Button
            variant="contained"
            color="primary"
            onClick={handlePasswordChange}
            size="small"
          >
            {t('Change password')}
          </Button>}
        </Grid>
        {ldapID && <TextField 
          label={t("LDAP ID")}
          className={classes.input}
          value={ldapID || ''}
          disabled
          style={{ flex: 1, marginRight: 8 }}
        />}
        <TextField
          select
          className={classes.input}
          label={t("Mode")}
          fullWidth
          value={status || 0}
          onChange={handleStatusInput}
        >
          {this.statuses.map((status, key) => (
            <MenuItem key={key} value={status.ID}>
              {status.name}
            </MenuItem>
          ))}
        </TextField>
        <TextField
          select
          className={classes.input}
          label={t("Type")}
          fullWidth
          disabled={displaytypeex === 1}
          value={displaytypeex || 0}
          onChange={handlePropertyChange('displaytypeex')}
        >
          {this.types.map((type, key) => (
            <MenuItem key={key} value={type.ID}>
              {type.name}
            </MenuItem>
          ))}
        </TextField>
        {this.context.includes(SYSTEM_ADMIN_READ) && <MagnitudeAutocomplete
          value={homeserver || ''}
          filterAttribute={'hostname'}
          onChange={handleServer}
          className={classes.input} 
          options={servers}
          label={t('Homeserver')}
          disabled={!this.context.includes(SYSTEM_ADMIN_WRITE)}
        />}
        <TextField
          select
          className={classes.input}
          label={t("Language")}
          fullWidth
          value={lang || 'en_US'}
          disabled
        >
          {langs.map((l) => (
            <MenuItem key={l.code} value={l.code}>
              {l.code + ": " + l.name}
            </MenuItem>
          ))}
        </TextField>
        <div className={classes.quota}>
          <Typography color="textPrimary" className={classes.quotaHeadline}>{t('Used space')}</Typography>
          <Grid container style={{ marginTop: 8 }}>
            <TextField 
              className={classes.flexInput}
              label={
                <div className={classes.labelContainer}>
                  {t("Send quota limit")}
                  <div style={{ width: 6, height: 6, backgroundColor: yellow['500'], marginLeft: 4 }}></div>
                </div>
              }
              value={prohibitsendquota !== undefined ? prohibitsendquota : ''}
              onChange={handleIntPropertyChange('prohibitsendquota')}
              InputProps={{
                endAdornment:
                  <FormControl className={classes.adornment}>
                    <Select
                      onChange={handleUnitChange('prohibitsendquota')}
                      value={sizeUnits.prohibitsendquota}
                      className={classes.select}
                      variant="standard"
                    >
                      <MenuItem value={1}>MB</MenuItem>
                      <MenuItem value={2}>GB</MenuItem>
                      <MenuItem value={3}>TB</MenuItem>
                    </Select>
                    <Tooltip title={('Delete quota')} placement="top">
                      <IconButton size="small" onClick={handleQuotaDelete('prohibitsendquota')}>
                        <Delete color="error" fontSize="small" />
                      </IconButton>
                    </Tooltip>
                  </FormControl>,
              }}
            />
            <TextField 
              className={classes.flexInput}
              label={
                <div className={classes.labelContainer}>
                  {t("Receive quota limit")}
                  <div style={{ width: 6, height: 6, backgroundColor: red['500'], marginLeft: 4 }}></div>
                </div>
              }
              value={prohibitreceivequota !== undefined ? prohibitreceivequota : ''}
              onChange={handleIntPropertyChange('prohibitreceivequota')}
              InputProps={{
                endAdornment:
                  <FormControl className={classes.adornment}>
                    <Select
                      onChange={handleUnitChange('prohibitreceivequota')}
                      value={sizeUnits.prohibitreceivequota}
                      className={classes.select}
                      variant="standard"
                    >
                      <MenuItem value={1}>MB</MenuItem>
                      <MenuItem value={2}>GB</MenuItem>
                      <MenuItem value={3}>TB</MenuItem>
                    </Select>
                    <Tooltip title={('Delete quota')} placement="top">
                      <IconButton size="small" onClick={handleQuotaDelete('prohibitreceivequota')}>
                        <Delete color="error" fontSize="small" />
                      </IconButton>
                    </Tooltip>
                  </FormControl>,
              }}
            />
            <TextField 
              className={classes.flexInput}
              label={
                <div className={classes.labelContainer}>
                  {t("Storage quota limit")}
                  <div style={{ width: 6, height: 6, backgroundColor: '#ddd', marginLeft: 4 }}></div>
                </div>
              }
              value={storagequotalimit !== undefined ? storagequotalimit : ''}
              onChange={handleIntPropertyChange('storagequotalimit')}
              InputProps={{
                endAdornment:
                  <FormControl className={classes.adornment}>
                    <Select
                      onChange={handleUnitChange('storagequotalimit')}
                      value={sizeUnits.storagequotalimit}
                      className={classes.select}
                      variant="standard"
                    >
                      <MenuItem value={1}>MB</MenuItem>
                      <MenuItem value={2}>GB</MenuItem>
                      <MenuItem value={3}>TB</MenuItem>
                    </Select>
                    <Tooltip title={('Delete quota')} placement="top">
                      <IconButton size="small" onClick={handleQuotaDelete('storagequotalimit')}>
                        <Delete color="error" fontSize="small" />
                      </IconButton>
                    </Tooltip>
                  </FormControl>,
              }}
            />
            <div className={classes.graphContainer}>
              {this.calculateGraph()}
            </div>
          </Grid>
        </div>
        <TextField
          className={classes.input}
          label={t("Creation time")}
          fullWidth
          value={creationtime || ''}
          onChange={handlePropertyChange('creationtime')}
          disabled
        />
        {status !== 4 && <Tooltip
          placement="top-start"
          title={!domain.chat ? "This domain doesn't have a grommunio-chat team" : ''}
        >
          <Grid container className={classes.input}>
            <FormControlLabel
              control={
                <Checkbox
                  checked={chat || false}
                  onChange={handleChatUser}
                  color="primary"
                />
              }
              label={t('Create grommunio-chat User')}
              disabled={!domain.chat}
            />
            <FormControlLabel
              control={
                <Checkbox
                  checked={chatAdmin || false}
                  onChange={handleCheckbox('chatAdmin')}
                  color="primary"
                />
              }
              disabled={!chat || !domain.chat}
              label={t('grommunio-chat admin permissions')}
            />
          </Grid>
        </Tooltip>}
        {status !== 4 && <Grid container className={classes.input}>
          <FormControlLabel
            control={
              <Checkbox
                checked={smtp || false }
                onChange={handleCheckbox('smtp')}
                color="primary"
              />
            }
            label={t('Allow SMTP sending (used by POP3/IMAP clients)')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={changePassword || false }
                onChange={handleCheckbox('changePassword')}
                color="primary"
              />
            }
            label={t('Allow password changes')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={pop3_imap || false /*eslint-disable-line*/}
                onChange={handleCheckbox('pop3_imap')}
                color="primary"
              />
            }
            label={t('Allow POP3/IMAP logins')}
          />
        </Grid>}
        {status !== 4 && <Grid container className={classes.input}>
          <FormControlLabel
            control={
              <Checkbox
                checked={privChat || false }
                onChange={handleCheckbox('privChat')}
                color="primary"
              />
            }
            disabled={!chat}
            label={t('Allow Chat')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={privVideo || false }
                onChange={handleCheckbox('privVideo')}
                color="primary"
              />
            }
            label={t('Allow Video')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={privFiles || false }
                onChange={handleCheckbox('privFiles')}
                color="primary"
              />
            }
            label={t('Allow Files')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={privArchive || false }
                onChange={handleCheckbox('privArchive')}
                color="primary"
              />
            }
            label={t('Allow Archive')}
          />
        </Grid>}
      </FormControl>
    );
  }
Example #29
Source File: SyncPolicies.js    From admin-web with GNU Affero General Public License v3.0 4 votes vote down vote up
render() {
    const { classes, t, syncPolicy, handleChange, handleRadio,
      handleSlider, handleCheckbox } = this.props;
    const { allowbluetooth, allowbrowser, allowcam, allowconsumeremail, allowdesktopsync,
      allowhtmlemail, allowinternetsharing, allowirda, allowpopimapemail, allowremotedesk,
      allowsimpledevpw, allowsmimeencalgneg, allowsmimesoftcerts, allowstoragecard,
      allowtextmessaging, allowunsignedapps, allowunsigninstallpacks, allowwifi, alphanumpwreq,
      approvedapplist, attenabled, devencenabled, devpwenabled, devpwexpiration, devpwhistory,
      maxattsize, maxcalagefilter, maxdevpwfailedattempts, maxemailagefilter, maxemailbodytruncsize,
      maxemailhtmlbodytruncsize, maxinacttimedevlock, mindevcomplexchars, mindevpwlenngth,
      pwrecoveryenabled, reqdevenc, reqencsmimealgorithm, reqencsmimemessages, reqmansyncroam,
      reqsignedsmimealgorithm, reqsignedsmimemessages, unapprovedinromapplist } = syncPolicy;
    return (
      <FormControl className={classes.form}>
        <Typography variant="h6" className={classes.header}>{t('Apps and devices')}</Typography>
        <FormControl component="fieldset" className={classes.radio}>
          <FormLabel component="legend">{t('Allow Bluetooth')}</FormLabel>
          <RadioGroup
            row
            value={syncPolicy.allowbluetooth !== undefined ? syncPolicy.allowbluetooth :
              allowbluetooth === undefined ? '' : allowbluetooth}
            onChange={handleRadio('allowbluetooth')}
          >
            <FormControlLabel value={0} control={<Radio color="primary"/>} label={t('Disabled')} />
            <FormControlLabel value={1} control={<Radio color="primary"/>} label={t('Allow only HFP')} />
            <FormControlLabel value={2} control={<Radio color="primary"/>} label={t('Allow')} />
          </RadioGroup>
        </FormControl>
        <Grid container>
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowbrowser}
                onChange={handleCheckbox('allowbrowser')}
                color="primary"
              />
            }
            label={t('Allow browser')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowcam}
                onChange={handleCheckbox('allowcam')}
                color="primary"
              />
            }
            label={t('Allow cam')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowtextmessaging}
                onChange={handleCheckbox('allowtextmessaging')}
                color="primary"
              />
            }
            label={t('Allow text messaging')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowunsignedapps}
                onChange={handleCheckbox('allowunsignedapps')}
                color="primary"
              />
            }
            label={t('Allow unsigned apps')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowunsigninstallpacks}
                onChange={handleCheckbox('allowunsigninstallpacks')}
                color="primary"
              />
            }
            label={t('Allow unsigned install packs')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowinternetsharing}
                onChange={handleCheckbox('allowinternetsharing')}
                color="primary"
              />
            }
            label={t('Allow internet sharing')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowirda}
                onChange={handleCheckbox('allowirda')}
                color="primary"
              />
            }
            label={t('Allow IrDA')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowstoragecard}
                onChange={handleCheckbox('allowstoragecard')}
                color="primary"
              />
            }
            label={t('Allow storage card')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowwifi}
                onChange={handleCheckbox('allowwifi')}
                color="primary"
              />
            }
            label={t('Allow WiFi')}
          />
        </Grid>
        <Grid container>
          <TextField
            className={classes.gridTf}
            label={t("Approved in-ROM applications")}
            helperText="app1,app2,app3,..."
            color="primary"
            value={approvedapplist}
            onChange={handleChange("approvedapplist")}
          />
          <TextField
            className={classes.gridTf}
            label={t("Not approved in-ROM applications")}
            helperText="app1,app2,app3,..."
            color="primary"
            value={unapprovedinromapplist}
            onChange={handleChange("unapprovedinromapplist")}
          />
          <TextField
            className={classes.gridTf}
            label={t("Inactivity (seconds) before device locks itself")}
            color="primary"
            value={maxinacttimedevlock}
            onChange={handleChange("maxinacttimedevlock")}
          />
        </Grid>


        <Typography variant="h6" className={classes.header}>{t('Passwords')}</Typography>
        <Grid container>
          <FormControlLabel
            control={
              <Checkbox
                checked={!!alphanumpwreq}
                onChange={handleCheckbox('alphanumpwreq')}
                color="primary"
              />
            }
            label={t('Requires alphanumeric password')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!devpwenabled}
                onChange={handleCheckbox('devpwenabled')}
                color="primary"
              />
            }
            label={t('Device password required')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowsimpledevpw}
                onChange={handleCheckbox('allowsimpledevpw')}
                color="primary"
              />
            }
            label={t('Allow simple passwords')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!pwrecoveryenabled}
                onChange={handleCheckbox('pwrecoveryenabled')}
                color="primary"
              />
            }
            label={t('Password recovery enabled')}
          />
        </Grid>
        <Grid container>
          <TextField
            className={classes.gridTf}
            label={t("Min number of passwords to store")}
            color="primary"
            value={devpwhistory}
            onChange={handleChange("devpwhistory")}
          />
          <TextField
            className={classes.gridTf}
            label={t('Device password history')}
            color="primary"
            value={devpwexpiration}
            onChange={handleChange("devpwexpiration")}
          />
        </Grid>
        <div>
          <Typography gutterBottom>
            {t('Max failed password attempts')}
          </Typography>
          <Slider
            className={classes.slider}
            value={maxdevpwfailedattempts || 8}
            valueLabelDisplay="auto"
            step={1}
            marks
            min={4}
            max={16}
            onChange={handleSlider("maxdevpwfailedattempts")}
          />
        </div>
        <div>
          <Typography gutterBottom>
            {t('Minumim device password length')}
          </Typography>
          <Slider
            className={classes.slider}
            value={mindevpwlenngth || 4}
            valueLabelDisplay="auto"
            step={1}
            marks
            min={1}
            max={16}
            onChange={handleSlider("mindevpwlenngth")}
          />
        </div>
        <div>
          <Typography gutterBottom>
            {t('Minumim password character classes')}
          </Typography>
          <Slider
            className={classes.slider}
            value={mindevcomplexchars || 3}
            valueLabelDisplay="auto"
            step={1}
            marks
            min={1}
            max={4}
            onChange={handleSlider("mindevcomplexchars")}
          />
        </div>




        <Typography variant="h6" className={classes.header}>{t('Encryption and signing')}</Typography>
        <Grid container>
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowsmimesoftcerts}
                onChange={handleCheckbox('allowsmimesoftcerts')}
                color="primary"
              />
            }
            label={t('Allow soft certificates')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!reqdevenc}
                onChange={handleCheckbox('allowcam')}
                color="primary"
              />
            }
            label={t('Device encryption')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!reqencsmimemessages}
                onChange={handleCheckbox('reqencsmimemessages')}
                color="primary"
              />
            }
            label={t('Requires encrypted messages')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!devencenabled}
                onChange={handleCheckbox('devencenabled')}
                color="primary"
              />
            }
            label={t('Enable device encryption (Deprecated)')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!reqsignedsmimemessages}
                onChange={handleCheckbox('reqsignedsmimemessages')}
                color="primary"
              />
            }
            label={t('Requires message signing')}
          />
        </Grid>
        <FormControl component="fieldset" className={classes.radio}>
          <FormLabel component="legend">{t('Encrypt algorithm')}</FormLabel>
          <RadioGroup
            color="primary"
            row
            value={reqencsmimealgorithm === undefined ? '' : reqencsmimealgorithm}
            onChange={handleRadio('reqencsmimealgorithm')}
          >
            <FormControlLabel value={0} control={<Radio color="primary"/>} label="TripleDES" />
            <FormControlLabel value={1} control={<Radio color="primary"/>} label="DES" />
            <FormControlLabel value={2} control={<Radio color="primary"/>} label="RC2128bit" />
            <FormControlLabel value={3} control={<Radio color="primary"/>} label="RC264bit" />
            <FormControlLabel value={4} control={<Radio color="primary"/>} label="RC240bit" />
          </RadioGroup>
        </FormControl>
        <FormControl component="fieldset" className={classes.radio}>
          <FormLabel component="legend">{t('Allow encrypt algorithm negotiation')}</FormLabel>
          <RadioGroup
            color="primary"
            row
            value={allowsmimeencalgneg === undefined ? '' : allowsmimeencalgneg}
            onChange={handleRadio('allowsmimeencalgneg')}
          >
            <FormControlLabel value={0} control={<Radio color="primary"/>} label={t('Not allow')} />
            <FormControlLabel value={1} control={<Radio color="primary"/>} label={t('Only strong')} />
            <FormControlLabel value={2} control={<Radio color="primary"/>} label={t('Any')} />
          </RadioGroup>
        </FormControl>
        <FormControl component="fieldset" className={classes.radio}>
          <FormLabel component="legend">{t('Message signing algorithm')}</FormLabel>
          <RadioGroup
            color="primary"
            row
            value={reqsignedsmimealgorithm === undefined ? '' : reqsignedsmimealgorithm}
            onChange={handleRadio('reqsignedsmimealgorithm')}
          >
            <FormControlLabel value={0} control={<Radio color="primary"/>} label="SHA1" />
            <FormControlLabel value={1} control={<Radio color="primary"/>} label="MD5" />
          </RadioGroup>
        </FormControl>




        <Typography variant="h6" className={classes.header}>{t('E-Mail')}</Typography>
        <Grid container>
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowhtmlemail}
                onChange={handleCheckbox('allowhtmlemail')}
                color="primary"
              />
            }
            label={t('Allow html E-Mail')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowconsumeremail}
                onChange={handleCheckbox('allowconsumeremail')}
                color="primary"
              />
            }
            label={t('Allow consumer E-Mail')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowpopimapemail}
                onChange={handleCheckbox('allowpopimapemail')}
                color="primary"
              />
            }
            label={t('Allow POP/IMAP E-Mail')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!attenabled}
                onChange={handleCheckbox('attenabled')}
                color="primary"
              />
            }
            label={t('Enable attachments')}
          />
        </Grid>
        <TextField
          className={classes.slider}
          label={t("Max attachment size")}
          color="primary"
          value={maxattsize}
          onChange={handleChange("maxattsize")}
          InputProps={{
            endAdornment: 'MB',
          }}
          variant="standard"
          style={{ marginBottom: 8 }}
        />
        <TextField
          className={classes.slider}
          label={t("Truncation size for plain-text E-Mails")}
          helperText="(-1=unlimited, 0=header only, >0=truncate to size)"
          color="primary"
          value={maxemailbodytruncsize}
          onChange={handleChange("maxemailbodytruncsize")}
          variant="standard"
          style={{ marginBottom: 8 }}
        />
        <TextField
          className={classes.slider}
          label={t("Truncation size for HTML E-Mails")}
          helperText="(-1=unlimited, 0=header only, >0=truncate to size)"
          color="primary"
          value={maxemailhtmlbodytruncsize}
          onChange={handleChange("maxemailhtmlbodytruncsize")}
          variant="standard"
        />


        <Typography variant="h6" className={classes.header}>{t('Synchronisation')}</Typography>
        <Grid container>
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowremotedesk}
                onChange={handleCheckbox('allowremotedesk')}
                color="primary"
              />
            }
            label={t('Allow remote desk')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!reqmansyncroam}
                onChange={handleCheckbox('reqmansyncroam')}
                color="primary"
              />
            }
            label={t('Requires manual synchronization')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowdesktopsync}
                onChange={handleCheckbox('allowdesktopsync')}
                color="primary"
              />
            }
            label={t('Allow desktop sync')}
          />
        </Grid>
        <FormControl component="fieldset" className={classes.radio}>
          <FormLabel component="legend">{t('Max calendar age')}</FormLabel>
          <RadioGroup
            color="primary"
            row
            value={maxcalagefilter === undefined ? '' : maxcalagefilter}
            onChange={handleRadio('maxcalagefilter')}
          >
            <FormControlLabel value={4} control={<Radio color="primary"/>} label={t('2 weeks')} />
            <FormControlLabel value={5} control={<Radio color="primary"/>} label={t('1 month')} />
            <FormControlLabel value={6} control={<Radio color="primary"/>} label={t('3 months')} />
            <FormControlLabel value={7} control={<Radio color="primary"/>} label={t('6 months')} />
            <FormControlLabel value={0} control={<Radio color="primary"/>} label={t('Unlimited')} />
          </RadioGroup>
        </FormControl>
        <FormControl component="fieldset" className={classes.radio} style={{ marginBottom: 8 }}>
          <FormLabel component="legend">{t('Max E-Mail age')}</FormLabel>
          <RadioGroup
            color="primary"
            row
            value={maxemailagefilter === undefined ? '' : maxemailagefilter}
            onChange={handleRadio('maxemailagefilter')}
          >
            <FormControlLabel value={1} control={<Radio color="primary"/>} label={t('1 day')} />
            <FormControlLabel value={2} control={<Radio color="primary"/>} label={t('3 days')} />
            <FormControlLabel value={3} control={<Radio color="primary"/>} label={t('1 week')} />
            <FormControlLabel value={4} control={<Radio color="primary"/>} label={t('2 weeks')} />
            <FormControlLabel value={5} control={<Radio color="primary"/>} label={t('1 month')} />
            <FormControlLabel value={0} control={<Radio color="primary"/>} label={t('All')} />
          </RadioGroup>
        </FormControl>
      </FormControl>
    );
  }