@mui/material#FormControlLabel JavaScript Examples
The following examples show how to use
@mui/material#FormControlLabel.
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: PlacingRadioLabel.jsx From matx-react with MIT License | 5 votes |
export default function PlacingRadioLabel() {
const [value, setValue] = React.useState("female");
function handleChange(event) {
setValue(event.target.value);
}
return (
<FormControl component="fieldset">
<FormLabel component="legend">labelPlacement</FormLabel>
<RadioGroup aria-label="position" name="position" value={value} onChange={handleChange} row>
<FormControlLabel
value="top"
label="Top"
labelPlacement="top"
control={<Radio color="primary" />}
/>
<FormControlLabel
value="start"
label="Start"
labelPlacement="start"
control={<Radio color="primary" />}
/>
<FormControlLabel
value="bottom"
label="Bottom"
labelPlacement="bottom"
control={<Radio color="primary" />}
/>
<FormControlLabel
value="end"
label="End"
labelPlacement="end"
control={<Radio color="primary" />}
/>
</RadioGroup>
</FormControl>
);
}
Example #2
Source File: ImportDialog.js From admin-web with GNU Affero General Public License v3.0 | 5 votes |
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 #3
Source File: DeleteUser.js From admin-web with GNU Affero General Public License v3.0 | 5 votes |
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 #4
Source File: DeleteFolder.js From admin-web with GNU Affero General Public License v3.0 | 5 votes |
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 #5
Source File: DeleteDomain.js From admin-web with GNU Affero General Public License v3.0 | 5 votes |
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 #6
Source File: filter.js From react-table-library with MIT License | 5 votes |
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 #7
Source File: FormGroupCheckbox.jsx From matx-react with MIT License | 5 votes |
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 #8
Source File: showreel.js From react-table-library with MIT License | 4 votes |
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 #9
Source File: Layout1Customizer.jsx From matx-react with MIT License | 4 votes |
Layout1Customizer = ({ settings, handleChange, handleControlChange }) => {
return (
<Fragment>
<Box mb="16px" mx="12px">
<ThemeName>Sidebar theme</ThemeName>
<ToolbarContainer>
{mainSidebarThemes.map((color, i) => (
<Tooltip key={i} title={color} placement="top">
<ToolbarContent
color={color}
onClick={() => handleChange('layout1Settings.leftSidebar.theme', color)}
>
{settings.layout1Settings.leftSidebar.theme === color && <Icon>done</Icon>}
<div className={settings.themes[color].palette.type}></div>
</ToolbarContent>
</Tooltip>
))}
</ToolbarContainer>
</Box>
<Box mb="32px" mx="12px">
<ThemeName>Sidebar theme</ThemeName>
<ToolbarContainer>
{topbarThemes.map((color, i) => (
<Tooltip key={i} title={color} placement="top">
<ToolbarContent
color={color}
onClick={() => handleChange('layout1Settings.topbar.theme', color)}
>
{settings.layout1Settings.topbar.theme === color && <Icon>done</Icon>}
<div className={settings.themes[color].palette.type}></div>
</ToolbarContent>
</Tooltip>
))}
</ToolbarContainer>
</Box>
<Box mb="18px" mx="12px">
<FormControl component="fieldset">
<FormLabel component="legend">Sidebar mode</FormLabel>
<RadioGroup
aria-label="Sidebar"
name="leftSidebar"
value={settings.layout1Settings.leftSidebar.mode}
onChange={handleControlChange('layout1Settings.leftSidebar.mode')}
>
<FormControlLabel value="full" control={<Radio />} label="Full" />
<FormControlLabel value="close" control={<Radio />} label="Close" />
<FormControlLabel value="compact" control={<Radio />} label="Compact" />
</RadioGroup>
</FormControl>
</Box>
<Box mb="32px" mx="12px">
<ThemeName sx={{ mb: 4 }}>Sidebar background image</ThemeName>
<div>
<Grid container spacing={3}>
{sidebarBG.map((bg, i) => (
<Grid item xs={4} key={i}>
<BadgeSelected
color="primary"
badgeContent={<Icon>done</Icon>}
invisible={settings.layout1Settings.leftSidebar.bgImgURL !== bg}
sx={{ width: '100%', height: '100%', cursor: 'pointer' }}
>
<Paper onClick={() => handleChange('layout1Settings.leftSidebar.bgImgURL', bg)}>
<IMG src={bg} alt="" />
</Paper>
</BadgeSelected>
</Grid>
))}
</Grid>
</div>
</Box>
<Box mb="24px" mx="12px">
<FormControl component="fieldset">
<FormLabel component="legend">Topbar</FormLabel>
<FormGroup>
<FormControlLabel
control={
<Switch
checked={get(settings.layout1Settings.topbar, 'show')}
onChange={handleControlChange('layout1Settings.topbar.show')}
/>
}
label="Show"
/>
<FormControlLabel
control={
<Switch
checked={get(settings.layout1Settings.topbar, 'fixed')}
onChange={handleControlChange('layout1Settings.topbar.fixed')}
/>
}
label="Fixed"
/>
</FormGroup>
</FormControl>
</Box>
</Fragment>
);
}
Example #10
Source File: SimpleForm.jsx From matx-react with MIT License | 4 votes |
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 #11
Source File: column-hide.js From react-table-library with MIT License | 4 votes |
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 #12
Source File: Sync.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
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 #13
Source File: Account.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
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 #14
Source File: Logs.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
render() {
const { classes, t, logs } = this.props;
const { snackbar, log, filename, autorefresh, clipboardMessage } = this.state;
return (
<TableViewContainer
headline={t("Logs")}
subtitle={t("logs_sub")}
href="https://docs.grommunio.com/admin/administration.html#logs"
snackbar={snackbar}
onSnackbarClose={() => this.setState({ snackbar: '' })}
>
<div className={classes.logViewer}>
<List style={{ width: 200 }}>
<ListItem>
<ListItemText
primary={t("Log files")}
primaryTypographyProps={{ color: "primary", variant: 'h6' }}
/>
</ListItem>
{logs.Logs.map((log, idx) =>
<ListItem
key={idx}
onClick={this.handleLog(log)}
button
className={classes.li}
selected={log === filename}
>
<ListItemText
primary={log}
primaryTypographyProps={{ color: "textPrimary" }}
/>
</ListItem>
)}
</List>
<Paper elevation={1} className={classes.paper}>
{filename && <Grid container justifyContent="flex-end">
<IconButton onClick={this.handleRefresh} style={{ marginRight: 8 }} size="large">
<Refresh />
</IconButton>
<FormControlLabel
control={
<Switch
checked={autorefresh}
onChange={this.handleAutoRefresh}
name="autorefresh"
color="primary"
/>
}
label="Autorefresh"
/>
</Grid>}
{log.length > 0 ? <IconButton onClick={this.handleScroll} size="large">
<ArrowUp />
</IconButton> : filename && <Typography><no logs></Typography>}
{log.map((log, idx) =>
<pre
key={idx}
className={log.level < 4 ? classes.errorLog : log.level < 6 ? classes.noticeLog : classes.log}
onClick={this.handleCopyToClipboard(log.message)}
>
{'[' + log.time + ']: ' + log.message}
</pre>
)}
</Paper>
</div>
<Portal>
<Snackbar
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
open={!!clipboardMessage}
onClose={this.handleSnackbarClose}
autoHideDuration={2000}
transitionDuration={{ in: 0, appear: 250, enter: 250, exit: 0 }}
>
<Alert
onClose={this.handleSnackbarClose}
severity={"success"}
elevation={6}
variant="filled"
>
{clipboardMessage}
</Alert>
</Snackbar>
</Portal>
</TableViewContainer>
);
}
Example #15
Source File: LdapConfig.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
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 #16
Source File: Domains.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
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 #17
Source File: DomainMenu.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
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 #18
Source File: DomainDetails.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
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 #19
Source File: Defaults.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
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 #20
Source File: SyncPolicies.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
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>
);
}
Example #21
Source File: SlimSyncPolicies.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
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 #22
Source File: FolderPermissions.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
render() {
const { classes, t, open, onCancel, owners, domain, folderID } = this.props;
const { permissions, selected, adding, deleting } = this.state;
return (
<Dialog
onClose={onCancel}
open={open}
maxWidth="sm"
fullWidth
TransitionProps={{
onEnter: this.handleEnter,
}}
>
<DialogTitle>{t('Permissions')}</DialogTitle>
<DialogContent style={{ minWidth: 400 }}>
{owners.length > 0 ? <List className={classes.list}>
{owners.map((user, idx) => <Fragment key={idx}>
<ListItem disablePadding>
<ListItemButton
selected={user.memberID === selected?.memberID}
component="a"
onClick={this.handleUserSelect(user)}
>
<ListItemText primary={user.username}/>
</ListItemButton>
</ListItem>
<Divider />
</Fragment>)}
</List> : <div className={classes.noOwnersContainer}>
<em>{t('No owners')}</em>
</div>}
<div className={classes.addUserRow}>
<Button
onClick={this.handleAdd}
variant="contained"
color="primary"
style={{ marginRight: 8 }}
>
{t('Add')}
</Button>
<Button
onClick={this.handleDelete}
color="secondary"
>
{t('Remove')}
</Button>
</div>
<FormControl fullWidth style={{ marginBottom: 4 }}>
<InputLabel>{t('Profile')}</InputLabel>
<Select
labelId="demo-simple-select-label"
value={permissionProfiles.findIndex(profile => profile.value === permissions) === -1 ? "" : permissions}
label={t('Profile')}
onChange={this.handleProfileSelect}
>
{permissionProfiles.map((profile, idx) =>
<MenuItem key={idx} value={profile.value}>
{profile.name}
</MenuItem>
)}
</Select>
</FormControl>
<Grid container>
<Grid item xs={6}>
<FormControl className={classes.form}>
<FormLabel>Read</FormLabel>
<RadioGroup defaultValue={0} value={permissions & 1} onChange={this.handlePermissions}>
<FormControlLabel
value={0x0}
control={<Radio size="small" className={classes.radio}/>}
label="None"
/>
<FormControlLabel
value={0x1}
control={<Radio size="small" className={classes.radio}/>}
label="Full Details"
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={6}>
<FormControl className={classes.form}>
<FormLabel>Write</FormLabel>
<FormControlLabel
control={
<Checkbox
value={0x2}
checked={Boolean(permissions & 0x2)}
onChange={this.handlePermissions}
className={classes.radio}
color="primary"
/>
}
label={t('Create items')}
/>
<FormControlLabel
control={
<Checkbox
value={0x80}
checked={Boolean(permissions & 0x80)}
className={classes.radio}
onChange={this.handlePermissions}
color="primary"
/>
}
label={t('Create subfolders')}
/>
<FormControlLabel
control={
<Checkbox
checked={Boolean(permissions & 0x8)}
value={0x8}
className={classes.radio}
onChange={this.handlePermissions}
color="primary"
/>
}
label={t('Edit own')}
/>
<FormControlLabel
control={
<Checkbox
className={classes.radio}
checked={Boolean(permissions & 0x20)}
value={0x20}
onChange={this.handlePermissions}
color="primary"
/>
}
label={t('Edit all')}
/>
</FormControl>
</Grid>
</Grid>
<Grid container style={{ marginTop: 16 }}>
<Grid item xs={6}>
<FormControl className={classes.form}>
<FormLabel>Delete items</FormLabel>
<RadioGroup
value={(permissions & 0x50) || true /* This is a bit janky */}
defaultValue={true}
onChange={this.handleRadioPermissions}
>
<FormControlLabel
value={(permissions & 0x50) === 0} // Has explicit handling
control={<Radio size="small" className={classes.radio}/>}
label="None" />
<FormControlLabel
value={0x10}
control={<Radio size="small" className={classes.radio}/>}
label="Own"
/>
<FormControlLabel
value={0x50}
control={<Radio size="small" className={classes.radio}/>}
label="All"
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={6}>
<FormControl className={classes.form}>
<FormLabel>Other</FormLabel>
<FormControlLabel
control={
<Checkbox
className={classes.radio}
checked={Boolean(permissions & 0x100)}
value={0x100}
onChange={this.handlePermissions}
color="primary"
/>
}
label={t('Folder owner')}
/>
<FormControlLabel
control={
<Checkbox
className={classes.radio}
checked={Boolean(permissions & 0x200)}
onChange={this.handlePermissions}
color="primary"
value={0x200}
/>
}
label={t('Folder contact')}
/>
<FormControlLabel
control={
<Checkbox
className={classes.radio}
checked={Boolean(permissions & 0x400)}
onChange={this.handlePermissions}
color="primary"
value={0x400}
/>
}
label={t('Folder visible')}
/>
</FormControl>
</Grid>
</Grid>
</DialogContent>
<DialogActions>
<Button
onClick={onCancel}
color="secondary"
>
{t('Close')}
</Button>
<Button
onClick={this.handleSave}
variant="contained"
color="primary"
disabled={owners.length === 0 || !selected}
>
{t('Save')}
</Button>
</DialogActions>
<AddOwner
open={adding}
onSuccess={this.handleAddingSuccess}
onError={this.handleAddingError}
onCancel={this.handleAddingCancel}
domain={domain}
folderID={folderID}
/>
{selected && <RemoveOwner
open={deleting}
onSuccess={this.handleDeleteSuccess}
onError={this.handleDeleteError}
onClose={this.handleDeleteClose}
ownerName={selected.username}
domainID={domain.ID}
folderID={folderID}
memberID={selected.memberID}
/>}
</Dialog>
);
}
Example #23
Source File: EditFetchmail.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
render() {
const { classes, t, open, onClose, username } = this.props;
const { active, srcServer, srcUser, srcPassword, srcFolder, srcAuth, fetchall, keep, protocol,
useSSL, sslCertCheck, sslCertPath, sslFingerprint, extraOptions } = this.state;
const disabled = [srcServer, srcUser, srcPassword, protocol].includes('');
return (
<Dialog
onClose={onClose}
open={open}
maxWidth="md"
fullWidth
TransitionProps={{
onEnter: this.handleEnter,
}}>
<DialogTitle>{t('editEntry', { username: username })}</DialogTitle>
<DialogContent style={{ minWidth: 400 }}>
<FormControl className={classes.form} noValidate autoComplete="off">
<TextField
className={classes.input}
label={t("Source server")}
fullWidth
value={srcServer || ''}
onChange={this.handleInput('srcServer')}
required
autoFocus
/>
<TextField
className={classes.input}
label={t("Source user")}
fullWidth
value={srcUser || ''}
onChange={this.handleInput('srcUser')}
required
/>
<form autoComplete="off" noValidate>
<TextField
className={classes.input}
label={t("Source password")}
fullWidth
value={srcPassword || ''}
onChange={this.handleInput('srcPassword')}
type="password"
required
id="new-password"
name='new-password'
autoComplete="new-password"
/>
</form>
<TextField
className={classes.input}
label={t("Source folder")}
fullWidth
value={srcFolder || ''}
onChange={this.handleInput('srcFolder')}
/>
<TextField
className={classes.input}
label={t("Source auth")}
fullWidth
value={srcAuth || ''}
onChange={this.handleInput('srcAuth')}
select
>
{this.authTypes.map(t =>
<MenuItem key={t} value={t}>{t}</MenuItem>
)}
</TextField>
<TextField
className={classes.input}
label={t("Protocol")}
fullWidth
value={protocol || ''}
onChange={this.handleInput('protocol')}
select
required
>
{this.protocols.map(p =>
<MenuItem key={p} value={p}>{p}</MenuItem>
)}
</TextField>
<TextField
className={classes.input}
label={t("SSL certificate path")}
fullWidth
value={sslCertPath || ''}
onChange={this.handleInput('sslCertPath')}
disabled={!useSSL}
/>
<TextField
className={classes.input}
label={t("SSL fingerprint")}
fullWidth
value={sslFingerprint || ''}
onChange={this.handleInput('sslFingerprint')}
disabled={!useSSL}
/>
<TextField
className={classes.input}
label={t("Extra options")}
fullWidth
value={extraOptions || ''}
onChange={this.handleInput('extraOptions')}
/>
<Grid container>
<FormControlLabel
control={
<Checkbox
checked={active}
onChange={this.handleCheckbox('active')}
color="primary"
/>
}
label="Active"
/>
<FormControlLabel
control={
<Checkbox
checked={useSSL}
onChange={this.handleCheckbox('useSSL')}
color="primary"
/>
}
label="Use SSL"
/>
<FormControlLabel
control={
<Checkbox
checked={fetchall}
onChange={this.handleCheckbox('fetchall')}
color="primary"
/>
}
label="Fetch all"
/>
<FormControlLabel
control={
<Checkbox
checked={keep}
onChange={this.handleCheckbox('keep')}
color="primary"
/>
}
label="Keep"
/>
<FormControlLabel
control={
<Checkbox
checked={sslCertCheck}
onChange={this.handleCheckbox('sslCertCheck')}
color="primary"
disabled={!useSSL}
/>
}
label="SSL certificate check"
/>
</Grid>
</FormControl>
</DialogContent>
<DialogActions>
<Button
onClick={onClose}
color="secondary"
>
{t('Cancel')}
</Button>
<Button
onClick={this.handleAdd}
variant="contained"
color="primary"
disabled={disabled}
>
{t('Confirm')}
</Button>
</DialogActions>
</Dialog>
);
}
Example #24
Source File: AddUser.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
render() {
const { classes, t, domain, open, onClose, servers } = this.props;
const { username, loading, properties, password, repeatPw, usernameError,
status, homeserver, lang, langs, chat, chatAvailable } = this.state;
const { displayname, displaytypeex } = properties;
const addDisabled = usernameError || !username || loading ||
((password !== repeatPw || password.length < 6) && status !== 4);
return (
<Dialog
onClose={onClose}
open={open}
maxWidth="sm"
fullWidth
TransitionProps={{
onEnter: this.handleEnter,
}}
>
<DialogTitle>{t('addHeadline', { item: 'User' })}</DialogTitle>
<DialogContent>
<FormControl className={classes.form}>
<TextField
select
className={classes.input}
label={t("Mode")}
fullWidth
value={status || 0}
onChange={this.handleInput('status')}
>
{this.statuses.map((status, key) => (
<MenuItem key={key} value={status.ID}>
{status.name}
</MenuItem>
))}
</TextField>
<TextField
label={t("Username")}
value={username || ''}
autoFocus
onChange={this.handleUsernameInput}
InputProps={{
endAdornment: <div>@{domain.domainname}</div>,
}}
className={classes.input}
required
error={!!username && usernameError}
/>
{status !== 4 && <TextField
label={t("Password")}
value={password || ''}
onChange={this.handleInput('password')}
className={classes.input}
type="password"
required
FormHelperTextProps={{
error: true,
}}
helperText={(password && password.length < 6) ? t('Password must be at least 6 characters long') : ''}
autoComplete="new-password"
/>}
{status !== 4 && <TextField
label={t("Repeat password")}
value={repeatPw || ''}
onChange={this.handleInput('repeatPw')}
className={classes.input}
type="password"
required
FormHelperTextProps={{
error: true,
}}
helperText={(repeatPw && password !== repeatPw) ? t("Passwords don't match") : ''}
/>}
<TextField
label={t("Display name")}
value={displayname || ''}
onChange={this.handlePropertyChange('displayname')}
className={classes.input}
/>
<TextField
select
className={classes.input}
label={t("Language")}
fullWidth
value={lang || 'en_US'}
onChange={this.handleInput('lang')}
>
{langs.map((l) => (
<MenuItem key={l.code} value={l.code}>
{l.code + ": " + l.name}
</MenuItem>
))}
</TextField>
<TextField
select
className={classes.input}
label={t("Type")}
fullWidth
value={displaytypeex || 0}
onChange={this.handlePropertyChange('displaytypeex')}
>
{this.types.map((type, key) => (
<MenuItem key={key} value={type.ID}>
{type.name}
</MenuItem>
))}
</TextField>
<MagnitudeAutocomplete
value={homeserver}
filterAttribute={'hostname'}
onChange={this.handleAutocomplete('homeserver')}
className={classes.input}
options={servers}
label={t('Homeserver')}
/>
<FormControlLabel
control={
<Checkbox
checked={chat || false}
onChange={this.handleCheckbox('chat')}
color="primary"
/>
}
label={t('Create grommunio-chat User')}
disabled={!chatAvailable}
/>
</FormControl>
</DialogContent>
<DialogActions>
<Button
onClick={onClose}
color="secondary"
>
{t('Cancel')}
</Button>
<Button
onClick={this.handleAddAndEdit}
variant="contained"
color="primary"
disabled={addDisabled}
>
{loading ? <CircularProgress size={24}/> : t('Add and edit')}
</Button>
<Button
onClick={this.handleAdd}
variant="contained"
color="primary"
disabled={addDisabled}
>
{loading ? <CircularProgress size={24}/> : t('Add')}
</Button>
</DialogActions>
</Dialog>
);
}
Example #25
Source File: AddGlobalUser.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
render() {
const { classes, t, open, onClose, Domains, servers } = this.props;
const { username, loading, properties, password, repeatPw,
usernameError, domain, autocompleteInput, status, homeserver,
lang, langs, chat, chatAvailable } = this.state;
const { displayname, displaytypeex } = properties;
const addDisabled = !domain || usernameError || !username || loading ||
((password !== repeatPw || password.length < 6) && status !== 4);
return (
<Dialog
onClose={onClose}
open={open}
maxWidth="sm"
fullWidth
TransitionProps={{
onEnter: this.handleEnter,
}}
>
<DialogTitle>{t('addHeadline', { item: 'User' })}</DialogTitle>
<DialogContent>
<FormControl className={classes.form}>
<MagnitudeAutocomplete
value={domain}
filterAttribute={'domainname'}
inputValue={autocompleteInput}
onChange={this.handleAutocomplete}
className={classes.input}
options={Domains}
onInputChange={this.handleInput('autocompleteInput')}
label={t('Domain')}
placeholder={t("Search domains") + "..."}
autoFocus
autoSelect
/>
<TextField
select
className={classes.input}
label={t("Mode")}
fullWidth
value={status || 0}
onChange={this.handleInput('status')}
>
{this.statuses.map((status, key) => (
<MenuItem key={key} value={status.ID}>
{status.name}
</MenuItem>
))}
</TextField>
<TextField
label={t("Username")}
value={username || ''}
onChange={this.handleUsernameInput}
fullWidth
InputProps={{
endAdornment: <div>@{domain?.domainname || '<select domain>'}</div>,
className: classes.noWrap,
}}
className={classes.input}
required
error={!!username && usernameError}
/>
{status !== 4 && <TextField
label={t("Password")}
value={password || ''}
onChange={this.handleInput('password')}
className={classes.input}
type="password"
required
FormHelperTextProps={{
error: true,
}}
helperText={(password && password.length < 6) ? t('Password must be at least 6 characters long') : ''}
autoComplete="new-password"
/>}
{status !== 4 && <TextField
label={t("Repeat password")}
value={repeatPw || ''}
onChange={this.handleInput('repeatPw')}
className={classes.input}
type="password"
required
FormHelperTextProps={{
error: true,
}}
autoComplete="off"
helperText={(repeatPw && password !== repeatPw) ? t("Passwords don't match") : ''}
/>}
<TextField
label={t("Display name")}
value={displayname || ''}
onChange={this.handlePropertyChange('displayname')}
className={classes.input}
/>
<TextField
select
className={classes.input}
label={t("Language")}
fullWidth
value={lang || 'en_US'}
onChange={this.handleInput('lang')}
>
{langs.map((l) => (
<MenuItem key={l.code} value={l.code}>
{l.code + ": " + l.name}
</MenuItem>
))}
</TextField>
<TextField
select
className={classes.input}
label={t("Type")}
fullWidth
value={displaytypeex || 0}
onChange={this.handlePropertyChange('displaytypeex')}
>
{this.types.map((type, key) => (
<MenuItem key={key} value={type.ID}>
{type.name}
</MenuItem>
))}
</TextField>
<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"
/>
}
label={t('Create grommunio-chat User')}
disabled={!chatAvailable}
/>
</FormControl>
</DialogContent>
<DialogActions>
<Button
onClick={onClose}
color="secondary"
>
{t('Cancel')}
</Button>
<Button
onClick={this.handleAddAndEdit}
variant="contained"
color="primary"
disabled={addDisabled}
>
{loading ? <CircularProgress size={24}/> : t('Add and edit')}
</Button>
<Button
onClick={this.handleAdd}
variant="contained"
color="primary"
disabled={addDisabled}
>
{loading ? <CircularProgress size={24}/> : t('Add')}
</Button>
</DialogActions>
</Dialog>
);
}
Example #26
Source File: AddFetchmail.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
render() {
const { classes, t, open, onClose, username } = this.props;
const { active, srcServer, srcUser, srcPassword, srcFolder, srcAuth, fetchall, keep, protocol,
useSSL, sslCertCheck, sslCertPath, sslFingerprint, extraOptions } = this.state;
const disabled = [srcServer, srcUser, srcPassword, protocol].includes('');
return (
<Dialog
onClose={onClose}
open={open}
maxWidth="md"
fullWidth
>
<DialogTitle>{t('addEntry', { username: username })}</DialogTitle>
<DialogContent style={{ minWidth: 400 }}>
<FormControl className={classes.form} autoComplete="off" noValidate>
<TextField
className={classes.input}
label={t("Source server")}
fullWidth
value={srcServer || ''}
onChange={this.handleInput('srcServer')}
autoFocus
required
/>
<TextField
className={classes.input}
label={t("Source user")}
fullWidth
value={srcUser || ''}
onChange={this.handleInput('srcUser')}
required
/>
<form autoComplete="off" noValidate>
<TextField
className={classes.input}
label={t("Source password")}
fullWidth
value={srcPassword || ''}
onChange={this.handleInput('srcPassword')}
type="password"
required
id="new-password"
name='new-password'
autoComplete="new-password"
/>
</form>
<TextField
className={classes.input}
label={t("Source folder")}
fullWidth
value={srcFolder || ''}
onChange={this.handleInput('srcFolder')}
/>
<TextField
className={classes.input}
label={t("Source auth")}
fullWidth
value={srcAuth || ''}
onChange={this.handleInput('srcAuth')}
select
>
{this.authTypes.map(t =>
<MenuItem key={t} value={t}>{t}</MenuItem>
)}
</TextField>
<TextField
className={classes.input}
label={t("Protocol")}
fullWidth
value={protocol || ''}
onChange={this.handleInput('protocol')}
select
required
>
{this.protocols.map(p =>
<MenuItem key={p} value={p}>{p}</MenuItem>
)}
</TextField>
<TextField
className={classes.input}
label={t("SSL certificate path")}
fullWidth
value={sslCertPath || ''}
onChange={this.handleInput('sslCertPath')}
disabled={!useSSL}
/>
<TextField
className={classes.input}
label={t("SSL fingerprint")}
fullWidth
value={sslFingerprint || ''}
onChange={this.handleInput('sslFingerprint')}
disabled={!useSSL}
/>
<TextField
className={classes.input}
label={t("Extra options")}
fullWidth
value={extraOptions || ''}
onChange={this.handleInput('extraOptions')}
/>
<Grid container>
<FormControlLabel
control={
<Checkbox
checked={active}
onChange={this.handleCheckbox('active')}
color="primary"
/>
}
label="Active"
/>
<FormControlLabel
control={
<Checkbox
checked={useSSL}
onChange={this.handleCheckbox('useSSL')}
color="primary"
/>
}
label="Use SSL"
/>
<FormControlLabel
control={
<Checkbox
checked={fetchall}
onChange={this.handleCheckbox('fetchall')}
color="primary"
/>
}
label="Fetch all"
/>
<FormControlLabel
control={
<Checkbox
checked={keep}
onChange={this.handleCheckbox('keep')}
color="primary"
/>
}
label="Keep"
/>
<FormControlLabel
control={
<Checkbox
checked={sslCertCheck}
onChange={this.handleCheckbox('sslCertCheck')}
color="primary"
disabled={!useSSL}
/>
}
label="SSL certificate check"
/>
</Grid>
</FormControl>
</DialogContent>
<DialogActions>
<Button
onClick={onClose}
color="secondary"
>
{t('Cancel')}
</Button>
<Button
onClick={this.handleAdd}
variant="contained"
color="primary"
disabled={disabled}
>
{t('Add')}
</Button>
</DialogActions>
</Dialog>
);
}
Example #27
Source File: AddDomain.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
render() {
const { classes, t, open, onClose, orgs, servers } = this.props;
const { domainname, domainStatus, orgID, domainError, chat, homeserver,
maxUser, title, address, adminName, tel, loading, createRole, autocompleteInput } = this.state;
return (
<Dialog
onClose={onClose}
open={open}
maxWidth="md"
fullWidth
TransitionProps={{
onEnter: this.handleEnter,
}}>
<DialogTitle>{t('addHeadline', { item: 'Domain' })}</DialogTitle>
<DialogContent style={{ minWidth: 400 }}>
<FormControl className={classes.form}>
<TextField
className={classes.input}
label={t("Domain")}
fullWidth
value={domainname || ''}
onChange={this.handleInput('domainname')}
autoFocus
required
error={!!domainname && domainError}
/>
<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>
<MagnitudeAutocomplete
value={orgID}
filterAttribute={'name'}
inputValue={autocompleteInput}
onChange={this.handleAutocomplete('orgID')}
className={classes.input}
options={orgs}
onInputChange={this.handleInput('autocompleteInput')}
label={t('Organization')}
/>
<TextField
className={classes.input}
label={t("Maximum users")}
fullWidth
value={maxUser || ''}
onChange={this.handleNumberInput('maxUser')}
required
/>
<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.handleAutocomplete('homeserver')}
className={classes.input}
options={servers}
label={t('Homeserver')}
/>
<FormControlLabel
control={
<Checkbox
checked={createRole}
onChange={this.handleCheckbox('createRole')}
color="primary"
/>
}
label={t('Create domain admin role')}
/>
<FormControlLabel
control={
<Checkbox
checked={chat}
onChange={this.handleCheckbox('chat')}
color="primary"
/>
}
label={t('Create grommunio-chat Team')}
/>
</FormControl>
</DialogContent>
<DialogActions>
<Button
onClick={onClose}
color="secondary"
>
{t('Cancel')}
</Button>
<Button
onClick={this.handleAdd}
variant="contained"
color="primary"
disabled={loading || !domainname || !maxUser || domainError}
>
{loading ? <CircularProgress size={24}/> : t('Add')}
</Button>
</DialogActions>
</Dialog>
);
}
Example #28
Source File: RegisterDialog.js From react-saas-template with MIT License | 4 votes |
function RegisterDialog(props) {
const { setStatus, theme, onClose, openTermsDialog, status, classes } = props;
const [isLoading, setIsLoading] = useState(false);
const [hasTermsOfServiceError, setHasTermsOfServiceError] = useState(false);
const [isPasswordVisible, setIsPasswordVisible] = useState(false);
const registerTermsCheckbox = useRef();
const registerPassword = useRef();
const registerPasswordRepeat = useRef();
const register = useCallback(() => {
if (!registerTermsCheckbox.current.checked) {
setHasTermsOfServiceError(true);
return;
}
if (
registerPassword.current.value !== registerPasswordRepeat.current.value
) {
setStatus("passwordsDontMatch");
return;
}
setStatus(null);
setIsLoading(true);
setTimeout(() => {
setIsLoading(false);
}, 1500);
}, [
setIsLoading,
setStatus,
setHasTermsOfServiceError,
registerPassword,
registerPasswordRepeat,
registerTermsCheckbox,
]);
return (
<FormDialog
loading={isLoading}
onClose={onClose}
open
headline="Register"
onFormSubmit={(e) => {
e.preventDefault();
register();
}}
hideBackdrop
hasCloseIcon
content={
<Fragment>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
error={status === "invalidEmail"}
label="Email Address"
autoFocus
autoComplete="off"
type="email"
onChange={() => {
if (status === "invalidEmail") {
setStatus(null);
}
}}
FormHelperTextProps={{ error: true }}
/>
<VisibilityPasswordTextField
variant="outlined"
margin="normal"
required
fullWidth
error={
status === "passwordTooShort" || status === "passwordsDontMatch"
}
label="Password"
inputRef={registerPassword}
autoComplete="off"
onChange={() => {
if (
status === "passwordTooShort" ||
status === "passwordsDontMatch"
) {
setStatus(null);
}
}}
helperText={(() => {
if (status === "passwordTooShort") {
return "Create a password at least 6 characters long.";
}
if (status === "passwordsDontMatch") {
return "Your passwords dont match.";
}
return null;
})()}
FormHelperTextProps={{ error: true }}
isVisible={isPasswordVisible}
onVisibilityChange={setIsPasswordVisible}
/>
<VisibilityPasswordTextField
variant="outlined"
margin="normal"
required
fullWidth
error={
status === "passwordTooShort" || status === "passwordsDontMatch"
}
label="Repeat Password"
inputRef={registerPasswordRepeat}
autoComplete="off"
onChange={() => {
if (
status === "passwordTooShort" ||
status === "passwordsDontMatch"
) {
setStatus(null);
}
}}
helperText={(() => {
if (status === "passwordTooShort") {
return "Create a password at least 6 characters long.";
}
if (status === "passwordsDontMatch") {
return "Your passwords dont match.";
}
})()}
FormHelperTextProps={{ error: true }}
isVisible={isPasswordVisible}
onVisibilityChange={setIsPasswordVisible}
/>
<FormControlLabel
style={{ marginRight: 0 }}
control={
<Checkbox
color="primary"
inputRef={registerTermsCheckbox}
onChange={() => {
setHasTermsOfServiceError(false);
}}
/>
}
label={
<Typography variant="body1">
I agree to the
<span
className={classes.link}
onClick={isLoading ? null : openTermsDialog}
tabIndex={0}
role="button"
onKeyDown={(event) => {
// For screenreaders listen to space and enter events
if (
(!isLoading && event.keyCode === 13) ||
event.keyCode === 32
) {
openTermsDialog();
}
}}
>
{" "}
terms of service
</span>
</Typography>
}
/>
{hasTermsOfServiceError && (
<FormHelperText
error
style={{
display: "block",
marginTop: theme.spacing(-1),
}}
>
In order to create an account, you have to accept our terms of
service.
</FormHelperText>
)}
{status === "accountCreated" ? (
<HighlightedInformation>
We have created your account. Please click on the link in the
email we have sent to you before logging in.
</HighlightedInformation>
) : (
<HighlightedInformation>
Registration is disabled until we go live.
</HighlightedInformation>
)}
</Fragment>
}
actions={
<Button
type="submit"
fullWidth
variant="contained"
size="large"
color="secondary"
disabled={isLoading}
>
Register
{isLoading && <ButtonCircularProgress />}
</Button>
}
/>
);
}
Example #29
Source File: LoginDialog.js From react-saas-template with MIT License | 4 votes |
function LoginDialog(props) {
const {
setStatus,
history,
classes,
onClose,
openChangePasswordDialog,
status,
} = props;
const [isLoading, setIsLoading] = useState(false);
const [isPasswordVisible, setIsPasswordVisible] = useState(false);
const loginEmail = useRef();
const loginPassword = useRef();
const login = useCallback(() => {
setIsLoading(true);
setStatus(null);
if (loginEmail.current.value !== "[email protected]") {
setTimeout(() => {
setStatus("invalidEmail");
setIsLoading(false);
}, 1500);
} else if (loginPassword.current.value !== "HaRzwc") {
setTimeout(() => {
setStatus("invalidPassword");
setIsLoading(false);
}, 1500);
} else {
setTimeout(() => {
history.push("/c/dashboard");
}, 150);
}
}, [setIsLoading, loginEmail, loginPassword, history, setStatus]);
return (
<Fragment>
<FormDialog
open
onClose={onClose}
loading={isLoading}
onFormSubmit={(e) => {
e.preventDefault();
login();
}}
hideBackdrop
headline="Login"
content={
<Fragment>
<TextField
variant="outlined"
margin="normal"
error={status === "invalidEmail"}
required
fullWidth
label="Email Address"
inputRef={loginEmail}
autoFocus
autoComplete="off"
type="email"
onChange={() => {
if (status === "invalidEmail") {
setStatus(null);
}
}}
helperText={
status === "invalidEmail" &&
"This email address isn't associated with an account."
}
FormHelperTextProps={{ error: true }}
/>
<VisibilityPasswordTextField
variant="outlined"
margin="normal"
required
fullWidth
error={status === "invalidPassword"}
label="Password"
inputRef={loginPassword}
autoComplete="off"
onChange={() => {
if (status === "invalidPassword") {
setStatus(null);
}
}}
helperText={
status === "invalidPassword" ? (
<span>
Incorrect password. Try again, or click on{" "}
<b>"Forgot Password?"</b> to reset it.
</span>
) : (
""
)
}
FormHelperTextProps={{ error: true }}
onVisibilityChange={setIsPasswordVisible}
isVisible={isPasswordVisible}
/>
<FormControlLabel
className={classes.formControlLabel}
control={<Checkbox color="primary" />}
label={<Typography variant="body1">Remember me</Typography>}
/>
{status === "verificationEmailSend" ? (
<HighlightedInformation>
We have send instructions on how to reset your password to your
email address
</HighlightedInformation>
) : (
<HighlightedInformation>
Email is: <b>[email protected]</b>
<br />
Password is: <b>HaRzwc</b>
</HighlightedInformation>
)}
</Fragment>
}
actions={
<Fragment>
<Button
type="submit"
fullWidth
variant="contained"
color="secondary"
disabled={isLoading}
size="large"
>
Login
{isLoading && <ButtonCircularProgress />}
</Button>
<Typography
align="center"
className={classNames(
classes.forgotPassword,
isLoading ? classes.disabledText : null
)}
color="primary"
onClick={isLoading ? null : openChangePasswordDialog}
tabIndex={0}
role="button"
onKeyDown={(event) => {
// For screenreaders listen to space and enter events
if (
(!isLoading && event.keyCode === 13) ||
event.keyCode === 32
) {
openChangePasswordDialog();
}
}}
>
Forgot Password?
</Typography>
</Fragment>
}
/>
</Fragment>
);
}