@mui/material#Radio JavaScript Examples
The following examples show how to use
@mui/material#Radio.
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: 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 #3
| 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 #4
| 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 #5
| 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 #6
| 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>
);
}
