Add Login Component

ui/src/actions/UserAction.js

@@ -0,0 +1,93 @@
+import dispatcher from '../stores/dispatcher';
+import config from 'react-global-configuration';
+import {getToken, setAuthorizationToken} from './defaultAxios';
+import * as GlobalAction from './GlobalAction';
+import axios from 'axios';
+import {detect} from 'detect-browser';
+import ClientStore from '../stores/ClientStore';
+
+/**
+ * Login the user.
+ * @param {string} username
+ * @param {string} password
+ */
+export function login(username, password) {
+    const browser = detect();
+    const name = (browser && browser.name + ' ' + browser.version) || 'unknown browser';
+    axios.request(config.get('url') + 'client', {
+        method: 'POST',
+        data: {name: name},
+        auth: {username: username, password: password},
+    }).then(function(resp) {
+        setAuthorizationToken(resp.data.token);
+        GlobalAction.initialLoad();
+    });
+}
+
+/** Log the user out. */
+export function logout() {
+    if (getToken() !== null) {
+        axios.delete(config.get('url') + 'client/' + ClientStore.getIdByToken(getToken())).then(() => {
+            setAuthorizationToken(null);
+            dispatcher.dispatch({type: 'REMOVE_CURRENT_USER'});
+        });
+    }
+}
+
+/** Fetches the current user. */
+export function fetchCurrentUser() {
+    axios.get(config.get('url') + 'current/user').then(function(resp) {
+        dispatcher.dispatch({type: 'SET_CURRENT_USER', payload: resp.data});
+    });
+}
+
+/**
+ * Changes the current user.
+ * @param {string} pass
+ */
+export function changeCurrentUser(pass) {
+    axios.post(config.get('url') + 'current/user/password', {pass});
+}
+
+/** Fetches all users. */
+export function fetchUsers() {
+    axios.get(config.get('url') + 'user').then(function(resp) {
+        dispatcher.dispatch({type: 'UPDATE_USERS', payload: resp.data});
+    });
+}
+
+/**
+ * Delete a user.
+ * @param {int} id the user id
+ */
+export function deleteUser(id) {
+    axios.delete(config.get('url') + 'user/' + id).then(function(resp) {
+        fetchUsers();
+    });
+}
+
+/**
+ * Create a user.
+ * @param {string} name
+ * @param {string} pass
+ * @param {bool} admin if true, the user is an administrator
+ */
+export function createUser(name, pass, admin) {
+    axios.post(config.get('url') + 'user', {name, pass, admin}).then(function(resp) {
+        fetchUsers();
+    });
+}
+
+/**
+ * Update a user by id.
+ * @param {int} id
+ * @param {string} name
+ * @param {string} pass empty if no change
+ * @param {bool} admin if true, the user is an administrator
+ */
+export function updateUser(id, name, pass, admin) {
+    axios.post(config.get('url') + 'user/' + id, {name, pass, admin}).then(function(resp) {
+        fetchUsers();
+        fetchCurrentUser(); // just in case update current user
+    });
+}

ui/src/pages/Login.js

@@ -0,0 +1,47 @@
+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 * as UserAction from '../actions/UserAction';
+import DefaultPage from '../component/DefaultPage';
+
+class Login extends Component {
+    constructor() {
+        super();
+        this.state = {username: '', password: ''};
+    }
+
+    handleChange(propertyName, event) {
+        const state = this.state;
+        state[propertyName] = event.target.value;
+        this.setState(state);
+    }
+
+    login = () => 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>
+                            <TextField id="name" label="Username" margin="dense" value={username}
+                                       onChange={this.handleChange.bind(this, 'username')}/>
+                            <TextField type="password" id="password" label="Password" margin="normal"
+                                       value={password} onChange={this.handleChange.bind(this, 'password')}/>
+                            <Button variant="raised" size="large" color="primary"
+                                    style={{marginTop: 15, marginBottom: 5}} onClick={this.login}>
+                                Login
+                            </Button>
+                        </form>
+                    </Container>
+                </Grid>
+            </DefaultPage>
+        );
+    }
+}
+
+export default Login;

ui/src/stores/CurrentUserStore.js

@@ -0,0 +1,42 @@
+import {EventEmitter} from 'events';
+import dispatcher from './dispatcher';
+
+class CurrentUserStore extends EventEmitter {
+    constructor() {
+        super();
+        this.currentUser = null;
+    }
+
+    get() {
+        return this.currentUser || {name: 'unknown', admin: false};
+    }
+
+    isAdmin() {
+        return this.get().admin;
+    }
+
+    getName() {
+        return this.get().name;
+    }
+
+    isLoggedIn() {
+        return this.currentUser != null;
+    }
+
+    set(user) {
+        this.currentUser = user;
+        this.emit('change');
+    }
+
+    handle(data) {
+        if (data.type === 'REMOVE_CURRENT_USER') {
+            this.set(null);
+        } else if (data.type === 'SET_CURRENT_USER') {
+            this.set(data.payload);
+        }
+    }
+}
+
+const store = new CurrentUserStore();
+dispatcher.register(store.handle.bind(store));
+export default store;