@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
142 lines (140 loc) • 4.84 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 from 'react';
import TextField from '@mui/material/TextField';
import { FormattedMessage } from 'react-intl';
import PasswordTextField from '../PasswordTextField/PasswordTextField';
import Button from '@mui/material/Button';
import { makeStyles } from 'tss-react/mui';
import { USER_PASSWORD_MAX_LENGTH, USER_USERNAME_MAX_LENGTH } from '../UserManagement/utils';
const useStyles = makeStyles()((theme) => ({
spacing: {
marginBottom: theme.spacing(1.5)
},
doubleSpacing: {
marginBottom: theme.spacing(2)
},
inputLabel: {
'&.MuiInputLabel-shrink, &[class*="MuiInputLabel-shrink"]': {
padding: '0 8px',
borderRadius: 10,
background: theme.palette.background.paper,
transform: 'translate(9px, -6px) scale(.75)'
}
}
}));
export function LogInForm(props) {
const { classes: cls, cx } = useStyles();
const {
children,
username,
onSubmit,
onSetUsername,
isFetching,
onSetPassword,
password,
enableUsernameInput = false,
classes,
action = '/studio/login',
method = 'post',
onRecover,
xsrfParamName,
xsrfToken
} = props;
return React.createElement(
'form',
{ action: action, method: method, onSubmit: onSubmit },
children,
React.createElement(TextField, {
id: 'loginFormUsernameField',
name: 'username',
fullWidth: true,
autoFocus: enableUsernameInput && !Boolean(username),
disabled: !enableUsernameInput,
type: 'text',
value: username,
onChange: (e) => onSetUsername?.(e.target.value),
className: cx(cls.spacing, classes?.username),
label: React.createElement(FormattedMessage, {
id: 'loginView.usernameTextFieldLabel',
defaultMessage: 'Username'
}),
InputLabelProps: { className: cls.inputLabel },
inputProps: { maxLength: USER_USERNAME_MAX_LENGTH }
}),
React.createElement(PasswordTextField, {
id: 'loginFormPasswordField',
name: 'password',
fullWidth: true,
autoFocus: !enableUsernameInput || Boolean(username),
value: password,
onChange: (e) => onSetPassword?.(e.target.value),
className: cx(cls.spacing, classes?.password, 'last-before-button'),
label: React.createElement(FormattedMessage, {
id: 'authMonitor.passwordTextFieldLabel',
defaultMessage: 'Password'
}),
InputLabelProps: { className: cls.inputLabel },
inputProps: { maxLength: USER_PASSWORD_MAX_LENGTH }
}),
xsrfParamName && React.createElement('input', { type: 'hidden', name: xsrfParamName, value: xsrfToken }),
React.createElement(
Button,
{
color: 'primary',
variant: 'contained',
fullWidth: true,
type: 'submit',
disabled: isFetching,
className: cx(onRecover && cls.spacing, classes?.submit)
},
React.createElement(FormattedMessage, { id: 'loginView.loginButtonLabel', defaultMessage: 'Log In' })
),
onRecover &&
React.createElement(
Button,
{
type: 'button',
color: 'primary',
disabled: isFetching,
variant: 'text',
fullWidth: true,
className: classes?.recover,
onClick: () => onRecover()
},
React.createElement(FormattedMessage, {
id: 'loginView.forgotPasswordButtonLabel',
defaultMessage: 'Forgot your password?'
})
)
);
}
export default LogInForm;