client/users: add user deletion

client/css/users.css

@@ -66,3 +66,6 @@
 #user-edit form {
     width: 22.5em;
 }
+#user-delete form {
+    width: 100%;
+}

client/html/user.hbs

@@ -6,6 +6,9 @@
             -->{{#if this.canEditAnything}}<!--
             --><li data-name='edit'><a href='/user/{{this.user.name}}/edit'>Account settings</a></li><!--
             -->{{/if}}<!--
+            -->{{#if this.canDelete}}<!--
+            --><li data-name='delete'><a href='/user/{{this.user.name}}/delete'>Account deletion</a></li><!--
+            -->{{/if}}<!--
         --></ul><!--
     --></nav>
     <div id='user-content-holder'></div>

client/html/user_deletion.hbs

@@ -0,0 +1,18 @@
+<div id='user-delete'>
+    <form>
+        <fieldset class='input'>
+            <ul>
+                <li>
+                    <input id='confirm-deletion' name='confirm-deletion' type='checkbox' required/>
+                    <label for='confirm-deletion' class='checkbox'>
+                        I confirm that I want to delete {{#if this.isLoggedIn}}my{{else}}this{{/if}} account.
+                    </label>
+                </li>
+            </ul>
+        </fieldset>
+        <fieldset class='messages'></fieldset>
+        <fieldset class='buttons'>
+            <input type='submit' value='Delete account'/>
+        </fieldset>
+    </form>
+</div>

client/js/api.js

@@ -27,6 +27,11 @@ class Api {
         return this._process(fullUrl, () => request.put(fullUrl).send(data));
     }
 
+    delete(url, data) {
+        const fullUrl = this.getFullUrl(url);
+        return this._process(fullUrl, () => request.delete(fullUrl).send(data));
+    }
+
     _process(url, requestFactory) {
         return new Promise((resolve, reject) => {
             let req = requestFactory();

client/js/controllers/users_controller.js

@@ -26,6 +26,10 @@ class UsersController {
             '/user/:name/edit',
             (ctx, next) => { this.loadUserRoute(ctx, next); },
             (ctx, next) => { this.editUserRoute(ctx, next); });
+        page(
+            '/user/:name/delete',
+            (ctx, next) => { this.loadUserRoute(ctx, next); },
+            (ctx, next) => { this.deleteUserRoute(ctx, next); });
         page.exit('/user/', (ctx, next) => { this.user = null; });
     }
 
@@ -60,6 +64,18 @@ class UsersController {
         }
     }
 
+    showUserRoute(ctx, next) {
+        this._show(ctx.state.user, 'summary');
+    }
+
+    editUserRoute(ctx, next) {
+        this._show(ctx.state.user, 'edit');
+    }
+
+    deleteUserRoute(ctx, next) {
+        this._show(ctx.state.user, 'delete');
+    }
+
     _register(name, password, email) {
         const data = {
             name: name,
@@ -119,6 +135,28 @@ class UsersController {
         });
     }
 
+    _delete(user) {
+        const isLoggedIn = api.isLoggedIn() && api.user.id == user.id;
+        return new Promise((resolve, reject) => {
+            api.delete('/user/' + user.name)
+                .then(response => {
+                    if (isLoggedIn) {
+                        api.logout();
+                    }
+                    resolve();
+                    if (api.hasPrivilege('users:list')) {
+                        page('/users');
+                    } else {
+                        page('/');
+                    }
+                    events.notify(events.Success, 'Account deleted');
+                }).catch(response => {
+                    reject();
+                    events.notify(events.Error, response.description);
+                });
+        });
+    }
+
     _show(user, section) {
         const isLoggedIn = api.isLoggedIn() && api.user.id == user.id;
         const infix = isLoggedIn ? 'self' : 'any';
@@ -152,18 +190,12 @@ class UsersController {
             canEditRank: api.hasPrivilege('users:edit:' + infix + ':rank'),
             canEditAvatar: api.hasPrivilege('users:edit:' + infix + ':avatar'),
             canEditAnything: api.hasPrivilege('users:edit:' + infix),
+            canDelete: api.hasPrivilege('users:delete:' + infix),
             ranks: ranks,
             edit: (...args) => { return this._edit(user, ...args); },
+            delete: (...args) => { return this._delete(user, ...args); },
         });
     }
-
-    showUserRoute(ctx, next) {
-        this._show(ctx.state.user, 'summary');
-    }
-
-    editUserRoute(ctx, next) {
-        this._show(ctx.state.user, 'edit');
-    }
 }
 
 module.exports = new UsersController();

client/js/views/user_deletion_view.js

@@ -0,0 +1,30 @@
+'use strict';
+
+const BaseView = require('./base_view.js');
+
+class UserDeletionView extends BaseView {
+    constructor() {
+        super();
+        this.template = this.getTemplate('user-deletion-template');
+    }
+
+    render(ctx) {
+        const target = ctx.target;
+        const source = this.template(ctx);
+
+        const form = source.querySelector('form');
+
+        this.decorateValidator(form);
+
+        form.addEventListener('submit', e => {
+            e.preventDefault();
+            this.clearMessages();
+            this.disableForm(form);
+            ctx.delete();
+        });
+
+        this.showView(target, source);
+    }
+}
+
+module.exports = UserDeletionView;

client/js/views/user_view.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const BaseView = require('./base_view.js');
+const UserDeletionView = require('./user_deletion_view.js');
 const UserSummaryView = require('./user_summary_view.js');
 const UserEditView = require('./user_edit_view.js');
 
@@ -8,6 +9,7 @@ class UserView extends BaseView {
     constructor() {
         super();
         this.template = this.getTemplate('user-template');
+        this.deletionView = new UserDeletionView();
         this.summaryView = new UserSummaryView();
         this.editView = new UserEditView();
     }
@@ -29,6 +31,8 @@ class UserView extends BaseView {
         let view = null;
         if (ctx.section == 'edit') {
             view = this.editView;
+        } else if (ctx.section == 'delete') {
+            view = this.deletionView;
         } else {
             view = this.summaryView;
         }