106 lines
4.0 KiB
TypeScript
106 lines
4.0 KiB
TypeScript
import * as React from "react";
|
|
|
|
import Typography from "@material-ui/core/Typography";
|
|
import Paper from "@material-ui/core/Paper";
|
|
import TextField from "@material-ui/core/TextField";
|
|
import Grid from "@material-ui/core/Grid";
|
|
import Button from "@material-ui/core/Button";
|
|
import LinearProgress from "@material-ui/core/LinearProgress";
|
|
import Snackbar from "@material-ui/core/Snackbar";
|
|
|
|
import { withRouter } from "react-router-dom";
|
|
|
|
import { IUser } from "../models/user";
|
|
|
|
interface IProps {
|
|
login: (username: string, password: string) => Promise<IUser | {}>;
|
|
authenticated: boolean;
|
|
history: any;
|
|
|
|
setLoading: (state: boolean) => void;
|
|
setSnackbar: (state: boolean, msg: string) => void;
|
|
loading: boolean;
|
|
snackOpen: boolean;
|
|
snackMsg: string;
|
|
}
|
|
|
|
const LoginPageWithRouter = withRouter(
|
|
class LoginPage extends React.Component<IProps> {
|
|
private usernameRef: any = undefined;
|
|
private passwordRef: any = undefined;
|
|
|
|
performLogin = () => {
|
|
this.props.setLoading(true);
|
|
|
|
const username = this.usernameRef.value || "";
|
|
const password = this.passwordRef.value || "";
|
|
this.props.login(username, password).then((res: IUser) => {
|
|
// Set the session key
|
|
window.sessionStorage.setItem("sessionToken", res.sessionToken);
|
|
this.props.history.push("/dashboard");
|
|
}, (err) => {
|
|
this.props.setLoading(false);
|
|
this.props.setSnackbar(true, "Failed to log in");
|
|
});
|
|
}
|
|
|
|
componentDidMount() {
|
|
// If we're already authenticated, we can skip the login page
|
|
if (this.props.authenticated) {
|
|
this.props.history.push("/dashboard");
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return <div>
|
|
<Grid
|
|
container
|
|
spacing={0}
|
|
direction="column"
|
|
alignItems="center"
|
|
justify="center"
|
|
style={{ minHeight: '100vh' }}>
|
|
<Grid item xs={12}>
|
|
<Paper className="paper">
|
|
<Typography variant="title">Login</Typography>
|
|
<Grid container direction="column" spacing={8}>
|
|
<Grid item>
|
|
<TextField
|
|
label="Username"
|
|
inputRef={node => this.usernameRef = node} />
|
|
</Grid>
|
|
<Grid item>
|
|
<TextField
|
|
label="Passwort"
|
|
type="password"
|
|
inputRef={node => this.passwordRef = node} />
|
|
</Grid>
|
|
<Grid item>
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
className="login-btn"
|
|
onClick={() => this.performLogin()}>
|
|
Login
|
|
</Button>
|
|
{
|
|
this.props.loading ? (
|
|
<LinearProgress />
|
|
) : undefined
|
|
}
|
|
</Grid>
|
|
</Grid>
|
|
</Paper>
|
|
</Grid>
|
|
</Grid>
|
|
<Snackbar
|
|
open={this.props.snackOpen}
|
|
onClose={() => this.props.setSnackbar(false, "")}
|
|
message={this.props.snackMsg}
|
|
autoHideDuration={6000} />
|
|
</div>;
|
|
}
|
|
}
|
|
);
|
|
export default LoginPageWithRouter;
|