@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
267 lines (265 loc) • 9.76 kB
JavaScript
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import React, { useState } from 'react';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Radio from '@mui/material/Radio';
import Collapse from '@mui/material/Collapse';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import TextField from '@mui/material/TextField';
import InputAdornment from '@mui/material/InputAdornment';
import IconButton from '@mui/material/IconButton';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
import { makeStyles } from 'tss-react/mui';
import Typography from '@mui/material/Typography';
const useStyles = makeStyles()((theme) => ({
authBox: {
padding: '10px',
background: theme.palette.background.paper,
borderRadius: '5px',
marginLeft: '30px',
display: 'flex',
justifyContent: 'center'
},
margin: {
margin: theme.spacing(1)
},
textField: {
width: '100%'
}
}));
const messages = defineMessages({
userName: {
id: 'words.userName',
defaultMessage: 'Username'
},
password: {
id: 'words.password',
defaultMessage: 'Password'
},
token: {
id: 'words.token',
defaultMessage: 'Token'
},
privateKey: {
id: 'gitAuthForm.privateKey',
defaultMessage: 'Private Key'
}
});
function renderHelperText(name, value = '', helperText, required, submitted) {
if (required && !value && submitted) {
return React.createElement(FormattedMessage, {
id: 'gitForm.required',
defaultMessage: '{name} is required.',
values: { name }
});
} else {
return helperText;
}
}
function AuthFields(props) {
const { inputs, handleInputChange, onKeyPress } = props;
const type = inputs.repoAuthentication;
const [showPassword, setShowPassword] = useState(false);
const { formatMessage } = useIntl();
const { classes, cx } = useStyles();
const handleClickShowPassword = () => {
setShowPassword(!showPassword);
};
return React.createElement(
'div',
{ className: classes.authBox },
(type === 'basic' || type === 'token') &&
React.createElement(TextField, {
id: 'repoUsername',
name: 'repoUsername',
className: cx(classes.margin, classes.textField),
label: formatMessage(messages.userName),
required: true,
autoFocus: true,
value: inputs.repoUsername,
onKeyPress: onKeyPress,
onChange: handleInputChange,
error: inputs.submitted && !inputs.repoUsername,
helperText: renderHelperText(formatMessage(messages.userName), inputs.repoUsername, '', true, inputs.submitted)
}),
type === 'basic' &&
React.createElement(TextField, {
id: 'repoPassword',
name: 'repoPassword',
className: cx(classes.margin, classes.textField),
type: showPassword ? 'text' : 'password',
label: formatMessage(messages.password),
required: true,
value: inputs.repoPassword,
onKeyPress: onKeyPress,
onChange: handleInputChange,
error: inputs.submitted && !inputs.repoPassword,
helperText: renderHelperText(formatMessage(messages.password), inputs.repoPassword, '', true, inputs.submitted),
InputProps: {
endAdornment: React.createElement(
InputAdornment,
{ position: 'end' },
React.createElement(
IconButton,
{
edge: 'end',
'aria-label': 'toggle password visibility',
onClick: handleClickShowPassword,
size: 'large'
},
showPassword ? React.createElement(VisibilityOff, null) : React.createElement(Visibility, null)
)
)
}
}),
type === 'token' &&
React.createElement(TextField, {
id: 'repoToken',
name: 'repoToken',
className: cx(classes.margin, classes.textField),
type: showPassword ? 'text' : 'password',
label: formatMessage(messages.token),
required: true,
value: inputs.repoToken,
error: inputs.submitted && !inputs.repoToken,
helperText: renderHelperText(formatMessage(messages.token), inputs.repoToken, '', true, inputs.submitted),
onKeyPress: onKeyPress,
onChange: handleInputChange,
InputProps: {
endAdornment: React.createElement(
InputAdornment,
{ position: 'end' },
React.createElement(
IconButton,
{
edge: 'end',
'aria-label': 'toggle password visibility',
onClick: handleClickShowPassword,
size: 'large'
},
showPassword ? React.createElement(VisibilityOff, null) : React.createElement(Visibility, null)
)
)
}
}),
type === 'key' &&
React.createElement(TextField, {
id: 'repoKey',
name: 'repoKey',
label: formatMessage(messages.privateKey),
required: true,
fullWidth: true,
multiline: true,
className: classes.margin,
error: inputs.submitted && !inputs.repoKey,
helperText: renderHelperText(formatMessage(messages.privateKey), inputs.repoKey, '', true, inputs.submitted),
onKeyPress: onKeyPress,
onChange: handleInputChange,
value: inputs.repoKey
})
);
}
export function GitAuthForm(props) {
const { inputs, setInputs, handleInputChange, onKeyPress } = props;
const viewAuth = (type) => {
const _expanded = Object.assign({}, inputs.expanded);
Object.keys(inputs.expanded).map((key) => {
if (key === type) {
return (_expanded[key] = !_expanded[key]);
}
return (_expanded[key] = false);
});
setInputs(Object.assign(Object.assign({}, inputs), { expanded: _expanded }));
};
return React.createElement(
React.Fragment,
null,
React.createElement(
Typography,
{ variant: 'subtitle1', color: 'textSecondary' },
React.createElement(FormattedMessage, { id: 'words.authentication', defaultMessage: 'Authentication' })
),
React.createElement(
RadioGroup,
{
'aria-label': 'repoAuthentication',
name: 'repoAuthentication',
value: inputs.repoAuthentication,
onChange: handleInputChange,
onKeyPress: onKeyPress
},
React.createElement(FormControlLabel, {
value: 'none',
control: React.createElement(Radio, { onChange: () => viewAuth('none') }),
label: React.createElement(FormattedMessage, {
id: 'gitForm.noAuthenticationRequired',
defaultMessage: 'Authentication not required (public URL)'
})
}),
React.createElement(FormControlLabel, {
value: 'basic',
control: React.createElement(Radio, { onChange: () => viewAuth('basic') }),
label: React.createElement(FormattedMessage, {
id: 'gitForm.usernameAndPassword',
defaultMessage: 'Username & Password'
})
}),
React.createElement(
Collapse,
{ in: inputs.expanded.basic, timeout: 300, unmountOnExit: true },
React.createElement(AuthFields, { inputs: inputs, handleInputChange: handleInputChange })
),
React.createElement(FormControlLabel, {
value: 'token',
control: React.createElement(Radio, { onChange: () => viewAuth('token') }),
label: React.createElement(FormattedMessage, { id: 'gitForm.token', defaultMessage: 'Token' })
}),
React.createElement(
Collapse,
{ in: inputs.expanded.token, timeout: 300, unmountOnExit: true },
React.createElement(AuthFields, { inputs: inputs, handleInputChange: handleInputChange })
),
React.createElement(FormControlLabel, {
value: 'key',
control: React.createElement(Radio, { onChange: () => viewAuth('key') }),
label: React.createElement(FormattedMessage, { id: 'gitForm.privateKey', defaultMessage: 'Private Key' })
}),
React.createElement(
Collapse,
{ in: inputs.expanded.key, timeout: 300, unmountOnExit: true },
React.createElement(AuthFields, { inputs: inputs, handleInputChange: handleInputChange })
)
)
);
}
export default GitAuthForm;