Add logging to the web client

webclient/src/App.js

@@ -26,7 +26,7 @@ class App extends Component {
 		let token = this.storage ? localStorage.getItem('token') : null;
 
 		this.state = {
-			login: {token: token, error: null, username: '', password: '', confirmLogout: false},
+			login: {token: token, error: false, username: '', password: '', confirmLogout: false},
 			user: null,
 			toolData: null,
 			toolStatus: null,
@@ -37,6 +37,13 @@ class App extends Component {
 		};
 	}
 
+	log = (string) => {
+		if (this.state.connected) {
+			const username = this.state.login.username.replace('.', '') || this.state.user.username || 'unknown';
+			this.socket.emit('log', `${username} - Web client: ${string}`);
+		}
+	}
+
 	noNetwork = () => {
 		this.setState({ network: false });
 		this.socket.disconnect();
@@ -96,6 +103,7 @@ class App extends Component {
 
 	requestInterlock = change => {
 		this.socket.emit('requestInterlock', {
+			username: this.state.user.username,
 			token: this.state.login.token,
 			change: change,
 		});
@@ -120,12 +128,16 @@ class App extends Component {
 			.then(response => {
 				if (response.ok) {
 					response.json().then(data => {
+						this.log('Good login');
 						this.setState({ login: {...login, ...data, error: false} });
 						if (this.storage) localStorage.setItem('token', data.token);
 						this.getUser();
 					});
 				} else {
-					this.setState({ login: {...login, error: true} });
+					response.json().then(data => {
+						this.log('Bad login');
+						this.setState({ login: {...login, error: data.error} });
+					});
 				}
 			})
 			.catch(error => {
@@ -149,6 +161,7 @@ class App extends Component {
 	}
 
 	handleLogout = () => {
+		this.log('Logout');
 		this.setState({
 			login: {...this.state.login, token: null, confirmLogout: false}
 		});
@@ -173,14 +186,16 @@ class App extends Component {
 	submitCourses = () => {
 		const toolData = this.state.toolData;
 		const selectedCourses = this.state.selectedCourses;
+		const courseList = toolData.courses.map(x => x.slug).filter((x, i) => selectedCourses[i]);
 
 		fetch(AUTH_SERVER_URL + '/select-courses/', {
 			method: 'PUT',
 			headers: {'Authorization': 'Token ' + this.state.login.token, 'Content-Type': 'application/json; charset=utf-8'},
-			body: JSON.stringify({'courses': toolData.courses.map(x => x.slug).filter((x, i) => selectedCourses[i]) })
+			body: JSON.stringify({ 'courses': courseList })
 		})
 			.then(response => {
 				if (response.ok) {
+					this.log('Selected courses ' + courseList.join(', '));
 					this.getUser();
 				} else {
 					this.noNetwork();
@@ -295,7 +310,7 @@ class App extends Component {
 								</Form.Field>
 								<Button type='submit'>Submit</Button>
 								{login.error && <Label basic color='red' pointing='left'>
-									Invalid username / password!
+									{login.error}
 								</Label>}
 							</Form>
 						</Container>