password change

client/src/components/account.management.jsx

@@ -1,9 +1,11 @@
-const { connect } = require('preact-redux');
 const preact = require('preact');
+const { Component } = require('preact')
+const { connect } = require('preact-redux');
+const linkState = require('linkstate').default;
 
 const SpawnButton = require('./spawn.button');
 
-const { postData } = require('./../utils');
+const { postData, errorToast, infoToast } = require('../utils');
 const actions = require('../actions');
 
 const addState = connect(
@@ -15,10 +17,22 @@ const addState = connect(
         } = state;
 
 
+        function setPassword(current, password) {
+            postData('/account/password', { current, password })
+                .then(res => res.json())
+                .then(data => {
+                    if (!data.success) return errorToast(data.error_message);
+                    infoToast('Password changed. Reloading...')
+                    setTimeout(() => window.location.reload(), 5000);
+                })
+                .catch(error => errorToast(error));
+        }
+
         function logout() {
             postData('/account/logout').then(() => window.location.reload(true));
         }
 
+
         function sendConstructSpawn(name) {
             return ws.sendMtxConstructSpawn(name);
         }
@@ -27,81 +41,111 @@ const addState = connect(
             account,
             ping,
             logout,
+            setPassword,
             sendConstructSpawn,
         };
     },
 );
 
 
-function AccountStatus(args) {
-    const {
-        account,
-        ping,
-        logout,
-        sendConstructSpawn,
-    } = args;
+class AccountStatus extends Component {
+    constructor(props) {
+        super(props);
 
-    if (!account) return null;
+        this.state = {
+            setPassword: { current: '', password: '', confirm: ''},
+        };
+    }
 
-    return (
-        <section class='account'>
-            <div>
-                <h1>{account.name}</h1>
-                <dl>
-                    <dt>Subscription</dt>
-                    <dd>{account.subscribed ? 'some date' : 'unsubscribed'}</dd>
-                </dl>
-                <button onClick={() => logout()}>Logout</button>
-            </div>
-            <form>
-                <label for="email">Update Email:</label>
-                <input
-                    class="login-input"
-                    disabled
-                    type="email"
-                    name="current"
-                    placeholder={account.email || 'no email set'}
-                />
-                <input
-                    class="login-input"
-                    type="email"
-                    name="email"
-                    placeholder="new email"
-                />
-                <button>Update</button>
-            </form>
-            <form>
-                <label for="current">Change Password:</label>
-                <input
-                    class="login-input"
-                    type="password"
-                    name="current"
-                    placeholder="current"
-                />
-                <input
-                    class="login-input"
-                    type="password"
-                    name="new"
-                    placeholder="new password"
-                />
-                <input
-                    class="login-input"
-                    type="password"
-                    name="confirm"
-                    placeholder="confirm"
-                />
-                <button>Change</button>
-            </form>
-            <div class="list">
-                <figure>
-                    <figcaption>spawn new construct</figcaption>
-                    <button onClick={() => sendConstructSpawn()} type="submit">
-                        ¤50
+    render(args) {
+        const {
+            account,
+            ping,
+            logout,
+            setPassword,
+            sendConstructSpawn,
+        } = args;
+
+        if (!account) return null;
+
+        const passwordsEqual = () =>
+            this.state.setPassword.password === this.state.setPassword.confirm;
+
+        const setPasswordDisabled = () => {
+            const { current, password, confirm } = this.state.setPassword;
+            return !(passwordsEqual() && password && current && confirm);
+        }
+
+        return (
+            <section class='account'>
+                <div>
+                    <h1>{account.name}</h1>
+                    <dl>
+                        <dt>Subscription</dt>
+                        <dd>{account.subscribed ? 'some date' : 'unsubscribed'}</dd>
+                    </dl>
+                    <button onClick={() => logout()}>Logout</button>
+                </div>
+                <div>
+                    <label for="email">Update Email:</label>
+                    <input
+                        class="login-input"
+                        disabled
+                        type="email"
+                        name="current"
+                        placeholder={account.email || 'no email set'}
+                    />
+                    <input
+                        class="login-input"
+                        type="email"
+                        name="email"
+                        placeholder="new email"
+                    />
+                    <button>Update</button>
+                </div>
+                <div>
+                    <label for="current">Change Password:</label>
+                    <input
+                        class="login-input"
+                        type="password"
+                        name="current"
+                        value={this.state.setPassword.current}
+                        onInput={linkState(this, 'setPassword.current')}
+                        placeholder="current"
+                    />
+                    <input
+                        class="login-input"
+                        type="password"
+                        name="new"
+                        value={this.state.setPassword.password}
+                        onInput={linkState(this, 'setPassword.password')}
+                        placeholder="new password"
+                    />
+                    <input
+                        class="login-input"
+                        type="password"
+                        name="confirm"
+                        value={this.state.setPassword.confirm}
+                        onInput={linkState(this, 'setPassword.confirm')}
+                        placeholder="confirm"
+                    />
+                    <button
+                        disabled={setPasswordDisabled()}
+                        onClick={() => setPassword(this.state.setPassword.current, this.state.setPassword.password)}>
+                        Set Password
                     </button>
-                </figure>
-            </div>
-        </section>
-    );
+                </div>
+                <div class="list">
+                    <figure>
+                        <figcaption>spawn new construct</figcaption>
+                        <button onClick={() => sendConstructSpawn()} type="submit">
+                            ¤50
+                        </button>
+                    </figure>
+                </div>
+            </section>
+        );
+    }
 }
 
 module.exports = addState(AccountStatus);

client/src/utils.jsx

@@ -213,6 +213,15 @@ function errorToast(message) {
     });
 }
 
+function infoToast(message) {
+    toast.info({
+        position: 'topRight',
+        drag: false,
+        close: false,
+        message,
+    });
+}
+
 function convertItem(v) {
     if (['Red', 'Green', 'Blue'].includes(v)) {
         return (
@@ -233,6 +242,7 @@ module.exports = {
     postData,
     convertItem,
     errorToast,
+    infoToast,
     NULL_UUID,
     STATS,
     COLOURS,