import React, { Component } from 'react'; import { withSnackbar, WithSnackbarProps } from 'notistack'; import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator'; import { withStyles, createStyles, Theme, WithStyles } from '@material-ui/core/styles'; import { Paper, Typography, Fab } from '@material-ui/core'; import ForwardIcon from '@material-ui/icons/Forward'; import { withAuthenticationContext, AuthenticationContextProps } from './authentication/AuthenticationContext'; import {PasswordValidator} from './components'; import { PROJECT_NAME, SIGN_IN_ENDPOINT } from './api'; const styles = (theme: Theme) => createStyles({ loginPage: { display: "flex", height: "100vh", margin: "auto", padding: theme.spacing(2), justifyContent: "center", flexDirection: "column", maxWidth: theme.breakpoints.values.sm }, loginPanel: { textAlign: "center", padding: theme.spacing(2), paddingTop: "200px", backgroundImage: 'url("/app/icon.png")', backgroundRepeat: "no-repeat", backgroundPosition: "50% " + theme.spacing(2) + "px", backgroundSize: "auto 150px", width: "100%" }, extendedIcon: { marginRight: theme.spacing(0.5), }, button: { marginRight: theme.spacing(2), marginTop: theme.spacing(2), } }); type SignInProps = WithSnackbarProps & WithStyles & AuthenticationContextProps; interface SignInState { username: string, password: string, processing: boolean } class SignIn extends Component { constructor(props: SignInProps) { super(props); this.state = { username: '', password: '', processing: false }; } updateInputElement = (event: React.ChangeEvent): void => { const { name, value } = event.currentTarget; this.setState(prevState => ({ ...prevState, [name]: value, })) }; onSubmit = () => { const { username, password } = this.state; const { authenticationContext } = this.props; this.setState({ processing: true }); fetch(SIGN_IN_ENDPOINT, { method: 'POST', body: JSON.stringify({ username, password }), headers: new Headers({ 'Content-Type': 'application/json' }) }) .then(response => { if (response.status === 200) { return response.json(); } else if (response.status === 401) { throw Error("Invalid login details."); } else { throw Error("Invalid status code: " + response.status); } }).then(json => { authenticationContext.signIn(json.access_token); }) .catch(error => { this.props.enqueueSnackbar(error.message, { variant: 'warning', }); this.setState({ processing: false }); }); }; render() { const { username, password, processing } = this.state; const { classes } = this.props; return (
{PROJECT_NAME} Sign In
); } } export default withAuthenticationContext(withSnackbar(withStyles(styles)(SignIn)));