Typescriptify Login-Component

ui/src/pages/Login.tsx

@@ -1,35 +1,26 @@
-import React, {Component} from 'react';
 import Button from 'material-ui/Button';
 import Grid from 'material-ui/Grid';
 import TextField from 'material-ui/TextField';
-import Container from '../component/Container';
+import React, {ChangeEvent, Component, FormEvent} from 'react';
 import * as UserAction from '../actions/UserAction';
+import Container from '../component/Container';
 import DefaultPage from '../component/DefaultPage';
 
-class Login extends Component {
+interface IState {
-    constructor() {
+    username: string
-        super();
+    password: string
-        this.state = {username: '', password: ''};
+}
-    }
 
-    handleChange(propertyName, event) {
+class Login extends Component<{}, IState> {
-        const state = this.state;
+    public state = {username: '', password: ''};
-        state[propertyName] = event.target.value;
-        this.setState(state);
-    }
 
-    login = (e) => {
+    public render() {
-        e.preventDefault();
-        UserAction.login(this.state.username, this.state.password);
-    };
-
-    render() {
         const {username, password} = this.state;
         return (
             <DefaultPage title="Login" maxWidth={250} hideButton={true}>
                 <Grid item xs={12} style={{textAlign: 'center'}}>
                     <Container>
-                        <form onSubmit={(e) => e.preventDefault()}>
+                        <form onSubmit={this.preventDefault}>
                             <TextField id="name" label="Username" margin="dense" value={username}
                                        onChange={this.handleChange.bind(this, 'username')}/>
                             <TextField type="password" id="password" label="Password" margin="normal"
@@ -44,6 +35,19 @@ class Login extends Component {
             </DefaultPage>
         );
     }
+
+    private handleChange(propertyName: string, event: ChangeEvent<HTMLInputElement>) {
+        const state = this.state;
+        state[propertyName] = event.target.value;
+        this.setState(state);
+    }
+
+    private login = (e: React.MouseEvent<HTMLInputElement>) => {
+        e.preventDefault();
+        UserAction.login(this.state.username, this.state.password);
+    };
+
+    private preventDefault = (e: FormEvent<HTMLFormElement>) => e.preventDefault();
 }
 
 export default Login;