@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
80 lines (78 loc) • 3.17 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 TextField from '@mui/material/TextField';
import React, { useState } from 'react';
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 { defineMessages, useIntl } from 'react-intl';
const translations = defineMessages({
toggleVisibilityButtonText: {
id: 'passwordTextField.toggleVisibilityButtonText',
defaultMessage: 'toggle password visibility'
}
});
const PasswordTextField = React.forwardRef((props, ref) => {
const { visibilitySwitch = true, initialVisible = false } = props;
const { formatMessage } = useIntl();
const [showPassword, setShowPassword] = useState(initialVisible);
const handleClickShowPassword = () => setShowPassword(!showPassword);
return React.createElement(
TextField,
Object.assign({}, props, {
ref: ref,
type: showPassword ? 'text' : 'password',
InputProps: visibilitySwitch
? Object.assign(Object.assign({}, props.InputProps), {
endAdornment: React.createElement(
InputAdornment,
{ position: 'end' },
React.createElement(
IconButton,
{
edge: 'end',
'aria-label': formatMessage(translations.toggleVisibilityButtonText),
onClick: handleClickShowPassword,
size: 'large'
},
showPassword ? React.createElement(VisibilityOff, null) : React.createElement(Visibility, null)
)
)
})
: props.InputProps
})
);
});
export default PasswordTextField;
PasswordTextField.defaultProps = {
type: 'password'
};