@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
90 lines (88 loc) • 3.36 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, { useRef, 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 inputRef = useRef();
const handleClickShowPassword = () => {
setShowPassword(!showPassword);
inputRef.current.focus();
setTimeout(() => {
const inputLength = inputRef.current.value.length;
inputRef.current.setSelectionRange(inputLength, inputLength);
}, 0);
};
return React.createElement(TextField, {
...props,
ref: ref,
type: showPassword ? 'text' : 'password',
inputProps: {
ref: inputRef
},
InputProps: visibilitySwitch
? {
...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'
};