108 lines
3.7 KiB
JavaScript

import { i18n } from 'arm-common';
import { HBox, LoginContainer, VBox } from 'arm-core-layouts';
import agui, { CoolValidator } from "arm-gui";
import React from "react";
import { connect } from "react-redux";
import { AppConstants } from "../../constants/AppConstants.js";
import AccountActions from "./AccountActions.js";
export default class Login extends React.Component {
state = {
useridRule: {
required: i18n("APP.LOGIN.USER", "Nome utente")
},
passwordRule: {
required: i18n("APP.LOGIN.PSW", "Password")
},
otherErrors: null
}
login = async () => {
const { login } = this.props;
try {
await login();
this.goThrough();
} catch (e) {}
}
goThrough = () => {
const { history, to } = this.props;
history.push({ pathname: to || "/", state: { showCollapse: true } });
}
goToTest = async () => {
const { history } = this.props;
history.push({ pathname: "/test" });
}
onEnter = (e) => e.key === 'Enter' && this.login()
render() {
const { userid, password, updateForm } = this.props;
const { useridRule, passwordRule, otherErrors } = this.state;
return (
<LoginContainer header footer={`V. ${AppConstants.VERSION}`} >
<CoolValidator otherErrors={otherErrors} >
<VBox>
<agui.CoolTextInput
onKeyUp={this.onEnter}
required
id="userid"
autocomplete="on"
label={i18n("APP.LOGIN.USER", "Nome utente")}
placeholder={i18n("APP.LOGIN.USER.PLACEHOLDER", "Inserisci il nome utente")}
value={userid}
validationRule={useridRule}
onChange={updateForm}
/>
<agui.CoolTextInput
onKeyUp={this.onEnter}
required
id="password"
type="password"
autocomplete="on"
label={i18n("APP.LOGIN.PSW", "Password")}
placeholder={i18n("APP.LOGIN.PSW.PLACEHOLDER", "Inserisci la password")}
value={password}
validationRule={passwordRule}
onChange={updateForm}
/>
<HBox style={{ justifyContent: 'flex-end' }}>
<agui.aButton
bs="secondary"
visible={!!AppConstants.DEBUG_VIEW}
onClick={this.goToTest}
icon='fas fa-bug'
/>
<agui.aButton
bs="primary"
type="submit"
onClick={this.login}
> {i18n("APP.LOGIN.LOGIN", "Accedi")} </agui.aButton>
</HBox>
</VBox>
</CoolValidator>
</LoginContainer>
)
}
};
const mapStateToProps = (state) => ({
userid: state.account.userid,
password: state.account.password,
});
const mapDispatchToProps = (dispatch) => ({
updateForm: (value, field) => dispatch(AccountActions.updateForm(value, field)),
login: () => dispatch(AccountActions.login()),
});
Login = connect(mapStateToProps, mapDispatchToProps)(Login);