feat(webui): impl. change password for user dashboard

webui/ovpm/app/api.js

@@ -4,7 +4,7 @@
 export var baseURL = window.location.protocol + "//" + window.location.host + "/api/v1"
 
 if (process.env.NODE_ENV !== 'production') {
-    baseURL = "http://172.16.16.149:9091/api/v1"
+    baseURL = "http://172.16.16.79:9091/api/v1"
 }
 
 export const endpoints = {

webui/ovpm/app/components/Dashboard/UserDashboard/PasswordEdit/index.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import Button from 'muicss/lib/react/button';
+import Container from 'muicss/lib/react/container';
+import Input from 'muicss/lib/react/input';
+
+
+export default class UserEdit extends React.Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            password: "",
+        }
+
+    }
+
+    componentWillMount() {
+    }
+
+    handlePasswordChange(e) {
+        this.setState({password: e.target.value})
+    }
+
+    handleFormSubmit() {
+        this.props.onSave(this.state.password)
+    }
+
+    handleFormCancel() {
+        this.setState({error: null})
+        this.props.onCancel()
+    }
+
+    render() {
+        return (
+            <Container>
+                <h1>{this.props.title}</h1>
+
+                <Input label="Password" value={this.state.password} onChange={this.handlePasswordChange.bind(this)} floatingLabel={true} required={true} type="password"/>
+                <div className="mui--pull-right">
+                    <Button color="primary" onClick={this.handleFormSubmit.bind(this)} required={true}>Save</Button>
+                    <Button color="danger" onClick={this.handleFormCancel.bind(this)} required={true}>Cancel</Button>
+                </div>
+            </Container>
+        )
+    }
+}

webui/ovpm/app/components/Dashboard/UserDashboard/index.jsx

@@ -8,6 +8,9 @@ import {GetAuthToken, ClearAuthToken} from '../../../utils/auth.js';
 import {API} from '../../../utils/restClient.js';
 import {baseURL, endpoints} from '../../../api.js';
 
+import Modal from 'react-modal';
+import PasswordEdit from './PasswordEdit';
+
 let saveData = (function () {
     var a = document.createElement("a");
     document.body.appendChild(a);
@@ -23,12 +26,24 @@ let saveData = (function () {
     };
 }());
 
+const modalStyle = {
+    content : {
+        top                   : '50%',
+        left                  : '50%',
+        right                 : 'auto',
+        bottom                : 'auto',
+        marginRight           : '-50%',
+        transform             : 'translate(-50%, -50%)'
+    }
+};
+
 
 export default class UserDashboard extends React.Component {
     constructor(props) {
         super(props)
 
         this.state = {
+            isChangePasswordModalOpen: false,
         }
         let authToken = GetAuthToken()
         this.api = new API(baseURL, endpoints, authToken)
@@ -58,12 +73,56 @@ export default class UserDashboard extends React.Component {
         ClearAuthToken()
     }
 
+    handleCloseModal() {
+        this.setState({isChangePasswordModalOpen: false})
+    }
+    handleOpenChangePasswordModal() {
+        this.setState({isChangePasswordModalOpen: true})
+    }
+
+    handleChangePasswordSave(password) {
+        let userObj = {
+            username: this.props.username,
+            password: password,
+        }
+        this.api.call("userUpdate", userObj, true, this.handleChangePasswordSuccess.bind(this), this.handleChangePasswordFailure.bind(this))
+        this.handleCloseChangePasswordModal()
+    }
+
+    handleChangePasswordSuccess(res) {
+        console.log("password changed")
+    }
+
+    handleChangePasswordFailure(error) {
+        console.log(error)
+        if (error.response.status == 401) {
+            this.handleAuthFailure(error)
+        }
+    }
+
+    handleAuthFailure(error) {
+        console.log("auth failure", error)
+        ClearAuthToken()
+    }
+
+    handleCloseChangePasswordModal() {
+        this.setState({isChangePasswordModalOpen: false})
+    }
+
     render() {
+        let passwordResetModal = (
+            <Modal isOpen={this.state.isChangePasswordModalOpen} contentLabel="Modal" style={modalStyle}>
+                <PasswordEdit title="Change Password" onCancel={this.handleCloseChangePasswordModal.bind(this)} onSave={this.handleChangePasswordSave.bind(this)} />
+            </Modal>
+        )
+
         return (
             <Container>
+                {passwordResetModal}
                 <Panel>
                     <p>Welcome, <b>{this.props.username}</b> (<Link to="/logout">logout</Link>)!</p>
                     <div>
+                        <Button color="primary" variant="raised" onClick={this.handleOpenChangePasswordModal.bind(this)}>Change Password</Button>
                         <Button color="primary" variant="raised" onClick={this.handleDownloadProfileClick.bind(this)}>Download VPN Profile</Button>
                     </div>
                 </Panel>