@mui/material#Dialog JavaScript Examples

ConfirmationDialog = ({
  open,
  onConfirmDialogClose,
  text,
  title = 'confirm',
  onYesClick,
}) => {
  return (
    <Dialog maxWidth="xs" open={open} onClose={onConfirmDialogClose}>
      <DialogBox>
        <Title>{title}</Title>
        <p>{text}</p>
        <Controller>
          <StyledButton className="yesBtn" variant="outlined" color="primary" onClick={onYesClick}>
            Yes
          </StyledButton>
          <StyledButton
            className="noBtn"
            variant="outlined"
            color="secondary"
            onClick={onConfirmDialogClose}
          >
            No
          </StyledButton>
        </Controller>
      </DialogBox>
    </Dialog>
  );
}

render() {
    const { t, open, loading, onClose, onDetach } = this.props;

    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>Are you sure you want to detach this user?</DialogTitle>
        <DialogActions>
          <Button
            onClick={onClose}
            color="secondary"
          >
            {t('Cancel')}
          </Button>
          <Button
            onClick={onDetach}
            variant="contained"
            color="primary"
          >
            {loading ? <CircularProgress color="secondary" size={24}/> : t('Confirm')}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

render() {
    const { t, open, onClose } = this.props;
    const { loading } = this.state;

    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>Are you sure you want to delete the LDAP config?</DialogTitle>
        <DialogActions>
          <Button
            onClick={onClose}
            color="secondary"
          >
            {t('Cancel')}
          </Button>
          <Button
            onClick={this.handleDelete}
            variant="contained"
            color="primary"
          >
            {loading ? <CircularProgress size={24}/> : t('Confirm')}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

render() {
    const { t, open, handleConfirm, onClose, action, service } = this.props;

    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>Are you sure you want to {action} {service?.name || 'this service'}?</DialogTitle>
        <DialogActions>
          <Button
            onClick={onClose}
            color="secondary"
          >
            {t('Cancel')}
          </Button>
          <Button
            onClick={handleConfirm}
            variant="contained"
            color="primary"
          >
            {t('Confirm')}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

render() {
    const { t, open, item, onClose } = this.props;
    const { loading } = this.state;

    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>Are you sure you want to delete {item}?</DialogTitle>
        <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>
    );
  }

render() {
    const { t, open, dump, onClose } = this.props;

    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="lg"
        fullWidth
      >
        <DialogTitle>{t('Raw LDAP data')}</DialogTitle>
        <DialogContent style={{ minWidth: 400 }}>
          <pre>{dump}</pre>
        </DialogContent>
        <DialogActions>
          <Button
            onClick={onClose}
            color="secondary"
          >
            {t('Close')}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

render() {
    const { t, open, item, onClose } = this.props;
    const { loading } = this.state;

    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>{t('deleteDialog', { item })}?</DialogTitle>
        <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>
    );
  }

function ConfirmationDialog(props) {
  const { open, onClose, loading, title, content, onConfirm } = props;
  return (
    <Dialog open={open} onClose={onClose} disableEscapeKeyDown={loading}>
      <DialogTitle>{title}</DialogTitle>
      <DialogContent>
        <DialogContentText>{content}</DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} disabled={loading}>
          Close
        </Button>
        <Button
          color="secondary"
          onClick={onConfirm}
          variant="contained"
          disabled={loading}
        >
          Yes {loading && <ButtonCircularProgress />}
        </Button>
      </DialogActions>
    </Dialog>
  );
}

render() {
    const { t, open, ownerName, onClose } = this.props;
    const { loading } = this.state;

    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>Are you sure you want to remove {ownerName} from this folder?</DialogTitle>
        <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>
    );
  }

DataDelete = ({id, handleDeletion}) => {

    const [open, setOpen] = useState(false);

    return (
        <>
            <Button variant="contained" color="error" onClick={() => setOpen(true)}>
                Delete
            </Button>
            <Dialog onClose={() => setOpen(false)} open={open}>
                <DialogTitle>Delete</DialogTitle>
                <Box p={3}>
                    Confirm deletion?
                    <Stack direction="row" spacing={1} mt={2}>
                        <Button variant="contained" color="error" onClick={() => handleDeletion(id)}>Yes</Button>
                        <Button variant="contained" color="secondary" onClick={() => setOpen(false)}>Cancel</Button>
                    </Stack>
                </Box>
            </Dialog>
        </>
    )
}

render() {
    const { t, message, taskID, onClose } = this.props;

    return (
      <Dialog
        onClose={onClose}
        open={!!message}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>{message}</DialogTitle>
        <DialogActions>
          <Button
            onClick={onClose}
            color="secondary"
          >
            {t('Close')}
          </Button>
          {message && taskID > 0 && <Button variant="contained" onClick={this.handleViewTask}>
            {t('View task')}
          </Button>
          }
        </DialogActions>
      </Dialog>
    );
  }

/**
 * A Wrapper around the Dialog component to create centered
 * Login, Register or other Dialogs.
 */
function FormDialog(props) {
  const {
    classes,
    open,
    onClose,
    loading,
    headline,
    onFormSubmit,
    content,
    actions,
    hideBackdrop
  } = props;
  return (
    <Dialog
      open={open}
      onClose={onClose}
      disableEscapeKeyDown={loading}
      classes={{
        paper: classes.dialogPaper,
        paperScrollPaper: classes.dialogPaperScrollPaper
      }}
      hideBackdrop={hideBackdrop ? hideBackdrop : false}>
      <DialogTitleWithCloseIcon
        title={headline}
        onClose={onClose}
        disabled={loading}
      />
      <DialogContent className={classes.dialogContent}>
        <form onSubmit={onFormSubmit}>
          <div>{content}</div>
          <Box width="100%" className={classes.actions}>
            {actions}
          </Box>
        </form>
      </DialogContent>
    </Dialog>
  );
}

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>
    );
  }

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>
    );
  }

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>
    );
  }

render() {
    const { classes, t, open, onClose, commands } = this.props;
    const { service, data, loading } = this.state;

    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="md"
        fullWidth
      >
        <DialogTitle>Configure grommunio-dbconf</DialogTitle>
        <DialogContent style={{ minWidth: 400 }}>
          <FormControl className={classes.form}>
            <TextField 
              className={classes.input} 
              label={t("Service name")} 
              fullWidth 
              value={service || ''}
              onChange={this.handleInput('service')}
              autoFocus
              required
            />
            <Typography variant="h6">Data</Typography>
            {data.map((pair, idx) => <Grid key={idx} container alignItems="flex-end">
              <Typography className={classes.gridTypo}>
                {pair.key}
              </Typography>
              <TextField
                label="value"
                value={pair.value}
                onChange={this.handleDataInput(idx)}
                className={classes.flexTextfield}
                select
              >
                {commands[this.commandKeys[idx]].map((command, idx) =>
                  <MenuItem key={idx} value={command}>
                    {command}
                  </MenuItem>
                )}
              </TextField>
            </Grid>
            )}
          </FormControl>
        </DialogContent>
        <DialogActions>
          <Button
            onClick={onClose}
            color="secondary"
          >
            {t('Cancel')}
          </Button>
          <Button
            onClick={this.handleUpload}
            variant="contained"
            color="primary"
            disabled={loading || !service}
          >
            {loading ? <CircularProgress size={24}/> : t('Add')}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

render() {
    const { classes, t, open, onClose } = this.props;
    const { service, filename, data, loading } = this.state;

    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="md"
        fullWidth
      >
        <DialogTitle>{t('addHeadline', { item: 'File' })}</DialogTitle>
        <DialogContent style={{ minWidth: 400 }}>
          <FormControl className={classes.form}>
            <TextField 
              className={classes.input} 
              label={t("Service name")} 
              fullWidth 
              value={service || ''}
              onChange={this.handleInput('service')}
              autoFocus
              required
            />
            <TextField 
              className={classes.input} 
              label={t("File name")} 
              fullWidth 
              value={filename || ''}
              onChange={this.handleInput('filename')}
              required
            />
            <Typography>Data</Typography>
            {data.map((pair, idx) => <Grid container key={idx}>
              <TextField
                label="key"
                value={pair.key}
                onChange={this.handleDataInput('key', idx)}
                className={classes.flexTextfield}
              />
              <TextField
                label="value"
                value={pair.value}
                onChange={this.handleDataInput('value', idx)}
                className={classes.flexTextfield}
              />
              <IconButton onClick={this.handleRemoveRow(idx)} size="large">
                <Delete color="error"/>
              </IconButton>
            </Grid>
            )}
            <Grid container justifyContent="center">
              <IconButton onClick={this.handleAddRow} size="large">
                <Add color="primary"/>
              </IconButton>
            </Grid>
          </FormControl>
        </DialogContent>
        <DialogActions>
          <Button
            onClick={onClose}
            color="secondary"
          >
            {t('Cancel')}
          </Button>
          <Button
            onClick={this.handleUpload}
            variant="contained"
            color="primary"
            disabled={loading || !service}
          >
            {loading ? <CircularProgress size={24}/> : t('Add')}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

render() {
    const { classes, t, open, onClose, Orphaned } = this.props;

    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="md"
        fullWidth
      >
        <DialogTitle>{t('Orphaned users')}</DialogTitle>
        <DialogContent style={{ minWidth: 400 }}>
          {Orphaned.length > 0 ? <List>
            {Orphaned.map(user => 
              <ListItem key={user.ID}>
                <ListItemText
                  primary={user.username}
                />
              </ListItem>  
            )}
          </List> : <Typography>All LDAP users are valid</Typography>}
        </DialogContent>
        <DialogActions>
          <Button
            onClick={onClose}
            color="secondary"
          >
            {t('Close')}
          </Button>
          <Button
            className={classes.delete}
            onClick={this.handleDelete(true)}
            variant="contained"
            color="secondary"
            disabled={Orphaned.length === 0}
          >
            {t('Delete with files')}
          </Button>
          <Button
            className={classes.delete}
            onClick={this.handleDelete(false)}
            variant="contained"
            color="secondary"
            disabled={Orphaned.length === 0}
          >
            {t('Delete')}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

render() {
    const { classes, t, changingPw, onClose } = this.props;
    const { newPw, checkPw } = this.state;
    return (
      <Dialog open={changingPw} onClose={onClose}>
        <DialogTitle>{t('Change password')}</DialogTitle>
        <DialogContent className={classes.content}>
          <TextField
            className={classes.input}
            label={t("New password")} 
            fullWidth
            type="password"
            value={newPw}
            onChange={({ target }) => this.setState({ newPw: target.value })}
            autoFocus
            onKeyPress={this.handleKeyPress}
          />
          <TextField
            className={classes.input}
            label={t("Repeat new password")} 
            fullWidth
            type="password"
            value={checkPw}
            onChange={({ target }) => this.setState({ checkPw: target.value })}
            onKeyPress={this.handleKeyPress}
          />
        </DialogContent>
        <DialogActions>
          <Button
            color="secondary"
            onClick={onClose}
          >
            {t('Cancel')}
          </Button>
          <Button
            variant="contained"
            color="primary"
            onClick={this.handlePasswordChange}
            disabled={checkPw !== newPw}
          >
            {t('Save')}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

render() {
    const { classes, t, open, onClose } = this.props;
    const { hostname, extname, loading } = this.state;

    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="md"
        fullWidth
        TransitionProps={{
          onEnter: this.handleEnter,
        }}>
        <DialogTitle>{t('addHeadline', { item: 'Server' })}</DialogTitle>
        <DialogContent style={{ minWidth: 400 }}>
          <FormControl className={classes.form}>
            <TextField 
              className={classes.input} 
              label={t("Hostname")} 
              fullWidth 
              value={hostname || ''}
              onChange={this.handleInput('hostname')}
              autoFocus
              required
            />
            <TextField 
              className={classes.input} 
              label={t("extname")} 
              fullWidth 
              value={extname || ''}
              onChange={this.handleInput('extname')}
              required
            />
          </FormControl>
        </DialogContent>
        <DialogActions>
          <Button
            onClick={onClose}
            color="secondary"
          >
            {t('Cancel')}
          </Button>
          <Button
            onClick={this.handleAdd}
            variant="contained"
            color="primary"
            disabled={loading || !hostname || !extname}
          >
            {loading ? <CircularProgress size={24}/> : t('Add')}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

render() {
    const { classes, t, open, onCancel, Users } = this.props;
    const { owners, loading, autocompleteInput } = this.state;
    return (
      <Dialog
        onClose={onCancel}
        open={open}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>{t('addHeadline', { item: 'Owner' })}</DialogTitle>
        <DialogContent style={{ minWidth: 400 }}>
          <FormControl className={classes.form}>
            <MagnitudeAutocomplete
              multiple
              value={owners || []}
              filterAttribute={'username'}
              inputValue={autocompleteInput}
              onChange={this.handleAutocomplete('owners')}
              className={classes.input} 
              options={Users || []}
              onInputChange={this.handleInput('autocompleteInput')}
              placeholder={t("Search users") +  "..."}
              label={t('Owners')}
            />
          </FormControl>
        </DialogContent>
        <DialogActions>
          <Button
            onClick={onCancel}
            color="secondary"
          >
            {t('Cancel')}
          </Button>
          <Button
            onClick={this.handleAdd}
            variant="contained"
            color="primary"
            disabled={owners.length === 0 || loading}
          >
            {loading ? <CircularProgress size={24}/> : 'Add'}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

render() {
    const { classes, t, open, onClose, Domains } = this.props;
    const { name, description, domains, autocompleteInput, loading } = this.state;
    const nameAcceptable = name.length < 33;

    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="md"
        fullWidth
        TransitionProps={{
          onEnter: this.handleEnter,
        }}>
        <DialogTitle>{t('addHeadline', { item: 'Organization' })}</DialogTitle>
        <DialogContent style={{ minWidth: 400 }}>
          <FormControl className={classes.form}>
            <TextField 
              className={classes.input} 
              label={t("Name")} 
              fullWidth 
              value={name || ''}
              onChange={this.handleInput('name')}
              autoFocus
              required
              error={Boolean(name && !nameAcceptable)}
            />
            <TextField 
              className={classes.input} 
              label={t("Description")} 
              fullWidth 
              value={description || ''}
              onChange={this.handleInput('description')}
              multiline
              rows={4}
              variant="outlined"
            />
            <MagnitudeAutocomplete
              value={domains || []}
              filterAttribute={'domainname'}
              inputValue={autocompleteInput}
              onChange={this.handleAutocomplete('domains')}
              className={classes.input} 
              options={Domains || []}
              onInputChange={this.handleInput('autocompleteInput')}
              label={t('Domains')}
              placeholder={t("Search domains") + "..."}
              multiple
              autoSelect
            />
          </FormControl>
        </DialogContent>
        <DialogActions>
          <Button
            onClick={onClose}
            color="secondary"
          >
            {t('Cancel')}
          </Button>
          <Button
            onClick={this.handleAdd}
            variant="contained"
            color="primary"
            disabled={loading || !nameAcceptable}
          >
            {loading ? <CircularProgress size={24}/> : t('Add')}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

render() {
    const { classes, t, open, onClose, Users } = this.props;
    const { displayname, owners, container, comment, loading, autocompleteInput } = this.state;

    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>{t('addHeadline', { item: 'Folder' })}</DialogTitle>
        <DialogContent style={{ minWidth: 400 }}>
          <FormControl className={classes.form}>
            <TextField 
              label={t("Folder name")}
              value={displayname}
              onChange={this.handleInput('displayname')}
              className={classes.input}
              autoFocus
              required
            />
            <TextField
              select
              className={classes.input}
              label={t("Container")}
              fullWidth
              value={container || ''}
              onChange={this.handleInput('container')}
            >
              {this.types.map((type, key) => (
                <MenuItem key={key} value={type.ID}>
                  {type.name}
                </MenuItem>
              ))}
            </TextField>
            <TextField 
              className={classes.input} 
              label={t("Comment")} 
              fullWidth
              multiline
              rows={4}
              value={comment}
              variant="outlined"
              onChange={this.handleInput('comment')}
            />
            <MagnitudeAutocomplete
              multiple
              value={owners || []}
              filterAttribute={'username'}
              inputValue={autocompleteInput}
              onChange={this.handleAutocomplete('owners')}
              className={classes.input} 
              options={Users || []}
              onInputChange={this.handleInput('autocompleteInput')}
              label={t('Owners')}
              placeholder={t("Search domains")  + "..."}
            />
          </FormControl>
        </DialogContent>
        <DialogActions>
          <Button
            onClick={onClose}
            color="secondary"
          >
            Cancel
          </Button>
          <Button
            onClick={this.handleAdd}
            variant="contained"
            color="primary"
            disabled={!displayname || loading}
          >
            {loading ? <CircularProgress size={24}/> : 'Add'}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

function ChangePassword(props) {
  const { onClose, classes, setLoginStatus } = props;
  const [isLoading, setIsLoading] = useState(false);

  const sendPasswordEmail = useCallback(() => {
    setIsLoading(true);
    setTimeout(() => {
      setLoginStatus("verificationEmailSend");
      setIsLoading(false);
      onClose();
    }, 1500);
  }, [setIsLoading, setLoginStatus, onClose]);

  return (
    <Dialog
      open
      hideBackdrop
      onClose={onClose}
      disableEscapeKeyDown={isLoading}
      maxWidth="xs">
      <form
        onSubmit={(e) => {
          e.preventDefault();
          sendPasswordEmail();
        }}
      >
        <DialogContent className={classes.dialogContent}>
          <Typography paragraph>
            Enter your email address below and we will send you instructions on
            how to reset your password.
          </Typography>
          <TextField
            variant="outlined"
            margin="dense"
            required
            fullWidth
            label="Email Address"
            autoFocus
            type="email"
            autoComplete="off"
          />
        </DialogContent>
        <DialogActions className={classes.dialogActions}>
          <Button onClick={onClose} disabled={isLoading}>
            Cancel
          </Button>
          <Button
            type="submit"
            variant="contained"
            color="secondary"
            disabled={isLoading}
          >
            Reset password
            {isLoading && <ButtonCircularProgress />}
          </Button>
        </DialogActions>
      </form>
    </Dialog>
  );
}

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>
    );
  }

render() {
    const { classes, t, deviceID, open } = this.props;
    const { password } = this.state;

    return (
      <Dialog
        open={open}
        onClose={this.handleCancel}
      >
        <DialogTitle className={classes.iconContainer}>
          <Warning
            color="warning"
            fontSize="large"
          />
        </DialogTitle>
        <DialogContent className={classes.content}>
          <Typography variant="h6" align="center" style={{ marginBottom: 8 }}>
            Remote wipe of device {deviceID || '<unknown>'} engaged
          </Typography>
          <Typography variant="body1">
            {t('RemoteWipeExplanation')}
          </Typography>
          <TextField
            style={{ marginTop: 16 }}
            label={t('Enter password to confirm')}
            value={password}
            onChange={this.handleInput}
            fullWidth
            type="password"
            autoComplete="new-password"
          />
        </DialogContent>
        <DialogActions>
          <Button variant="contained" onClick={this.handleCancel}>
            {t('Cancel')}
          </Button>
          <Button
            color="error"
            onClick={this.handleConfirm(password)}
            disabled={!password}
            variant="contained" 
          >
            {t('Confirm')}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

function ImageCropperDialog(props) {
  const {
    ImageCropper,
    classes,
    onClose,
    open,
    src,
    onCrop,
    aspectRatio,
    theme,
  } = props;
  const [crop, setCrop] = useState(null);

  const getCropFunctionFromChild = useCallback(
    (cropFunction) => {
      setCrop(() => cropFunction);
    },
    [setCrop]
  );

  return (
    <Dialog
      open={open}
      onEscapeKeyDown={onClose}
      classes={{ paper: classes.dialogPaper }}
      style={{ overflowX: "visible" }}
    >
      <DialogContent className={classes.dialogContent}>
        <ImageCropper
          src={src}
          setCropFunction={getCropFunctionFromChild}
          onCrop={onCrop}
          aspectRatio={aspectRatio}
          color={theme.palette.primary.main}
        />
      </DialogContent>
      <DialogActions>
        <Box mr={1}>
          <Button onClick={onClose}>Close</Button>
        </Box>
        <Button variant="contained" color="secondary" onClick={crop}>
          Crop
        </Button>
      </DialogActions>
    </Dialog>
  );
}

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>
    );
  }

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>
    );
  }