Merge pull request #42 from vnma0/pwd-change

Integrating the ability to change password

src/app/globalStatusBar/login/stub/login.js

@@ -38,7 +38,7 @@ async function login(username, password, func) {
         )
             .then(res => {
                 window.hestia.user.loggedIn = res.ok
-                return res.text()
+                window.hestia.user.userId = res.json()['_id']
             })
             .then(() => (window.hestia.user.username = username))
             // set username

src/app/globalStatusBar/userSetting/passwordChange/passwordChangeDialog.js

@@ -5,19 +5,20 @@ import {
     DialogContent,
     Dialog,
     DialogActions,
+    DialogContentText,
 } from '@material-ui/core'
 import { Button, TextField } from '@material-ui/core'
 import { fade } from '../../lib/libTransition.js'
 
+import passwordChange from '../stub/passwordChange.js'
+
 /**
  * @name PasswordChangeForm
  * @description The password changing dialog.
  *              ALL PROPS WILL BE PASSED DOWN TO <Dialog />
  * @param {function} TransitionComponent : TransitionComponent that the dialog uses.
  *                                         Overrides slideDirection.
  * @param {String} user : user name to display
- * @example <PasswordChangeDialog open={this.state.open} onClose={() => {this.state.open = false}}
- *           slideDirection={'up'} />
  * @author minhducsun2002
  */
 
@@ -69,11 +70,8 @@ class PasswordChangeDialog extends Component {
     }
 
     changePassword() {
-        alert(
-            `You attempted to change password from '${this.state.oldKey}'` +
-                ` to '${this.state.newKey}'` +
-                ` and verified with '${this.state.verifyKey}'`
-        )
+        passwordChange(window.hestia.user.userId,
+            this.state.oldKey, this.state.newKey)
     }
 
     render() {
@@ -90,6 +88,11 @@ class PasswordChangeDialog extends Component {
                     Changing password for {this.props.user}
                 </DialogTitle>
                 <DialogContent>
+                    <DialogContentText>
+                        Password length must be longer than 6 and smaller than 18.
+                        <br />
+                        Upon successful operation you will be logged out - be careful.
+                    </DialogContentText>
                     <TextField
                         label="Old password"
                         type="password"
@@ -116,7 +119,7 @@ class PasswordChangeDialog extends Component {
                 </DialogContent>
                 <DialogActions>
                     <Button onClick={this.props.onClose}>Cancel</Button>
-                    <Button
+                    <Button disabled={this.state.newKey !== this.state.verifyKey}
                         onClick={this.changePassword}
                         ref={this.state.pwdChangeInvokerRef}
                     >

src/app/globalStatusBar/userSetting/stub/passwordChange.js

@@ -0,0 +1,52 @@
+/**
+ * @name constructRequestBody
+ * @description Create an `URLSearchParams` object suitable for sending as credential changing request
+ * @param {String} password - Self-explanatory
+ * @param {String} newPassword - Self-explanatory
+ * @returns {URLSearchParams} - new `URLSearchParams` with given parameters
+ */
+
+function constructRequestBody(password, newPassword) {
+    let out = new URLSearchParams();
+    out.append('password', password);
+    out.append('newPassword', newPassword);
+    return out;
+}
+
+/**
+ * @name passwordChange
+ * @description Change password. Reload the page upon successful response.
+ * @param {String} userId - user ID to change password
+ * @param {String} password - old password
+ * @param {String} newPassword - new password
+ * @param {Function} func - Function to call upon operation finishing.
+ *                          Signature: `function (success : Boolean)`, with `success` as `Response.ok`.
+ * @returns {Promise<Response>}
+ */
+
+export default async function passwordChange (userId = window.hestia.user.userId, 
+                                                password, newPassword, func) {
+    return fetch(`/api/users/${userId}/password`, {
+        method: 'PUT',
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        mode: 'cors',
+        body: constructRequestBody(password, newPassword)
+    }).then(res => {
+        // console.log(res.text())
+        if (res.ok)
+        // password successfully changed
+            window.location.reload()
+            // reload, because the server will sign out automatically
+        else throw new Error('Request to change password failed')
+    }).then((okay) => {
+        if (typeof func === 'function')
+            func(okay);
+    }).catch(err => {
+        if (typeof window.hestia.pushNotification === 'function')
+            window.hestia.pushNotification(
+                'Failed to change your password'
+            )
+    })
+}