From f196a73c13b7566734ed90d84c62ffbfb8bda6dd Mon Sep 17 00:00:00 2001
From: Victor <victor@xirion.net>
Date: Tue, 6 Nov 2018 18:15:28 +0100
Subject: [PATCH 01/10] Initial improvement of post preview

Regarding #63
---
 cshub-client/package-lock.json             | 28 ++++++----------------
 cshub-client/src/components/posts/Post.vue |  7 ++----
 2 files changed, 9 insertions(+), 26 deletions(-)

diff --git a/cshub-client/package-lock.json b/cshub-client/package-lock.json
index da9a34b0..bc6d07a1 100644
--- a/cshub-client/package-lock.json
+++ b/cshub-client/package-lock.json
@@ -4301,14 +4301,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4323,20 +4321,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4453,8 +4448,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4466,7 +4460,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4481,7 +4474,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4489,14 +4481,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -4515,7 +4505,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4596,8 +4585,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4609,7 +4597,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4731,7 +4718,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
diff --git a/cshub-client/src/components/posts/Post.vue b/cshub-client/src/components/posts/Post.vue
index 6da7b464..ad957eda 100644
--- a/cshub-client/src/components/posts/Post.vue
+++ b/cshub-client/src/components/posts/Post.vue
@@ -63,7 +63,7 @@
                             </v-avatar>
                         </v-badge>
                         <div>
-                            <h3 class="headline mb-0">{{post.title}}</h3><p v-if="!post.approved && fullPostComputed" style="color: grey">(unverified)</p>
+                            <h3 class="headline">{{post.title}}</h3><p v-if="!post.approved && fullPostComputed" style="color: grey">(unverified)</p>
                             <div>{{post.author.firstname}} {{post.author.lastname}} - {{post.datetime | formatDate}}</div>
                         </div>
                     </span>
@@ -466,7 +466,7 @@
 
     .previewCard {
         position: relative;
-        max-height: 110px;
+        max-height: 30vh;
         width: 90%;
         overflow: hidden;
         margin: 20px 5% 20px 5%;
@@ -484,9 +484,6 @@
     }
 
     .viewButton {
-        position: absolute;
-        bottom: 0;
-        left: 0;
         width: 100%;
         text-align: right;
         margin: 0;

From 2177a27bcd3fdc696b0cbf30fe9c6ff677958b8d Mon Sep 17 00:00:00 2001
From: RobbinBaauw <robbin.baauw@gmail.com>
Date: Tue, 6 Nov 2018 18:22:21 +0100
Subject: [PATCH 02/10] Fixed 49

---
 cshub-client/.env.production                     | 2 +-
 cshub-client/src/components/posts/Post.vue       | 3 +++
 cshub-client/src/views/posts/TopicCreate.vue     | 2 +-
 cshub-client/src/views/user/LoginScreen.vue      | 2 +-
 cshub-server/src/components/account/Login.ts     | 7 +------
 cshub-server/src/components/pages/CreateTopic.ts | 4 ++--
 6 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/cshub-client/.env.production b/cshub-client/.env.production
index 50df19ce..128253c2 100644
--- a/cshub-client/.env.production
+++ b/cshub-client/.env.production
@@ -1,2 +1,2 @@
-VUE_APP_API_URL=https://api-dev.cshub.nl
+VUE_APP_API_URL=https://api.cshub.nl
 VUE_APP_DEBUG=false
diff --git a/cshub-client/src/components/posts/Post.vue b/cshub-client/src/components/posts/Post.vue
index 6da7b464..c0611989 100644
--- a/cshub-client/src/components/posts/Post.vue
+++ b/cshub-client/src/components/posts/Post.vue
@@ -10,6 +10,9 @@
                 <v-card-title primary-title :id="'postTitle_' + domId" style="padding-bottom: 0;">
                     <transition name="topMenuShow">
                         <div v-if="!showTopMenu && fullPostComputed">
+                            <v-btn color="primary" depressed small dark @click="returnToPostMenu">
+                                <v-icon>fas fa-chevron-left</v-icon>
+                            </v-btn>
                             <v-btn color="secondary" depressed small @click="showTopMenu = true">
                                 <v-icon>fas fa-angle-down</v-icon>
                             </v-btn>
diff --git a/cshub-client/src/views/posts/TopicCreate.vue b/cshub-client/src/views/posts/TopicCreate.vue
index 19d71fea..b7e15df9 100644
--- a/cshub-client/src/views/posts/TopicCreate.vue
+++ b/cshub-client/src/views/posts/TopicCreate.vue
@@ -23,7 +23,7 @@
                                         label="Topic title"
                                         box
                                         v-model="topicTitle"
-                                        v-validate="'required|min:4|max:127'"
+                                        v-validate="'required|min:2|max:35'"
                                         :error-messages="errors.collect('topicTitle') + topicTitleError"
                                         @change="topicTitleError = ''"
                                         name="topicTitle"
diff --git a/cshub-client/src/views/user/LoginScreen.vue b/cshub-client/src/views/user/LoginScreen.vue
index 9525211b..ec832535 100644
--- a/cshub-client/src/views/user/LoginScreen.vue
+++ b/cshub-client/src/views/user/LoginScreen.vue
@@ -29,7 +29,7 @@
                                     :append-icon="userData.passwordvisible ? 'fa-eye-slash' : 'fas fa-eye'"
                                     @click:append="() => (userData.passwordvisible = !userData.passwordvisible)"
                                     :type="userData.passwordvisible ? 'text' : 'password'"
-                                    v-validate="'required|min:8'"
+                                    v-validate="'required'"
                                     box
                                     required
                                     autocomplete="current-password"
diff --git a/cshub-server/src/components/account/Login.ts b/cshub-server/src/components/account/Login.ts
index 5d64d35b..bcc96cca 100644
--- a/cshub-server/src/components/account/Login.ts
+++ b/cshub-server/src/components/account/Login.ts
@@ -16,12 +16,7 @@ app.post(Login.getURL, (req: Request, res: Response) => {
     const loginRequest = req.body as Login;
 
     // Checking the input, see createaccount for a (bit) more in depth explanation
-    if (customValidator({
-        input: loginRequest.password,
-        validationObject: {
-            minlength: 8
-        }
-    }).valid && customValidator({input: loginRequest.email}).valid) {
+    if (customValidator({input: loginRequest.password}).valid && customValidator({input: loginRequest.email}).valid) {
 
         // If the input is actually valid, check if the password entered is equal. Depending on the output of the server, provide the correct error or login.
         hashPassword(loginRequest.password)
diff --git a/cshub-server/src/components/pages/CreateTopic.ts b/cshub-server/src/components/pages/CreateTopic.ts
index 190a23c0..1b556c1c 100644
--- a/cshub-server/src/components/pages/CreateTopic.ts
+++ b/cshub-server/src/components/pages/CreateTopic.ts
@@ -19,8 +19,8 @@ app.post(CreateTopic.getURL, (req: Request, res: Response) => {
     const inputsValidation = validateMultipleInputs({
         input: submitTopicRequest.topicTitle,
         validationObject: {
-            minlength: 4,
-            maxlength: 127
+            minlength: 2,
+            maxlength: 35
         }
     }, {input: submitTopicRequest.topicParentHash});
 

From 35555affd4c7fca62f5a2e47660409466ea5ec77 Mon Sep 17 00:00:00 2001
From: RobbinBaauw <robbin.baauw@gmail.com>
Date: Tue, 6 Nov 2018 18:29:54 +0100
Subject: [PATCH 03/10] Added validation for dot in email

---
 cshub-client/src/utilities/validation.ts  | 8 ++++++--
 cshub-server/src/utilities/StringUtils.ts | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/cshub-client/src/utilities/validation.ts b/cshub-client/src/utilities/validation.ts
index b4777f0f..7331773a 100644
--- a/cshub-client/src/utilities/validation.ts
+++ b/cshub-client/src/utilities/validation.ts
@@ -3,11 +3,15 @@ import VeeValidate from "vee-validate";
 
 export const emailValidator = {
     getMessage() {
-        return "No correct email format.";
+        return "Use your e-mail, not NetID (e.g. C.S.Hub@student.tudelft.nl)";
     },
     validate(value: string) {
         const regex = new RegExp("^[a-zA-Z.]*$");
-        return regex.test(value);
+        if (regex.test(value) && value.includes(".")) {
+            return true;
+        } else {
+            return false;
+        }
     }
 };
 
diff --git a/cshub-server/src/utilities/StringUtils.ts b/cshub-server/src/utilities/StringUtils.ts
index 4d824b87..903df1ed 100644
--- a/cshub-server/src/utilities/StringUtils.ts
+++ b/cshub-server/src/utilities/StringUtils.ts
@@ -54,7 +54,7 @@ export const customValidator = (input: ICustomValidatorInput): ICustomValidatorR
         return {valid: false, error: CustomValidatorReponseTypes.MAXLENGTH, value: input.input};
     } else if (input.validationObject.tuemail) {
         const regex = new RegExp("^[a-zA-Z.]*$");
-        if (!regex.test(input.input.toString())) { return {valid: false, error: CustomValidatorReponseTypes.TUEMAIL, value: input.input}; }
+        if (!regex.test(input.input.toString()) || !input.input.toString().includes(".")) { return {valid: false, error: CustomValidatorReponseTypes.TUEMAIL, value: input.input}; }
     } else {
         return {valid: true};
     }

From 88fe4034665baadaf04ad9237eb5f63ad02f2a16 Mon Sep 17 00:00:00 2001
From: RobbinBaauw <robbin.baauw@gmail.com>
Date: Tue, 6 Nov 2018 18:33:39 +0100
Subject: [PATCH 04/10] Added more validation so no trailing dot is allowed

---
 cshub-client/src/utilities/validation.ts  |  2 +-
 cshub-server/src/utilities/StringUtils.ts | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/cshub-client/src/utilities/validation.ts b/cshub-client/src/utilities/validation.ts
index 7331773a..e4e907fc 100644
--- a/cshub-client/src/utilities/validation.ts
+++ b/cshub-client/src/utilities/validation.ts
@@ -7,7 +7,7 @@ export const emailValidator = {
     },
     validate(value: string) {
         const regex = new RegExp("^[a-zA-Z.]*$");
-        if (regex.test(value) && value.includes(".")) {
+        if (regex.test(value) && value.includes(".") && value[value.length - 1] !== ".") {
             return true;
         } else {
             return false;
diff --git a/cshub-server/src/utilities/StringUtils.ts b/cshub-server/src/utilities/StringUtils.ts
index 903df1ed..de9d5fa7 100644
--- a/cshub-server/src/utilities/StringUtils.ts
+++ b/cshub-server/src/utilities/StringUtils.ts
@@ -33,6 +33,8 @@ export enum CustomValidatorReponseTypes {
 // It will return a response which tells it if it's valid, gives the enum of the error and the value of the string is something is wrong
 export const customValidator = (input: ICustomValidatorInput): ICustomValidatorResponse => {
 
+    const inputString = input.input.toString();
+
     if (input.validationObject === undefined) {
         input.validationObject = {nullemptyundefined: true};
     }
@@ -48,13 +50,15 @@ export const customValidator = (input: ICustomValidatorInput): ICustomValidatorR
         return {valid: false, error: CustomValidatorReponseTypes.UNDEFINED, value: input.input};
     } else if (input.validationObject.empty && input.input === "") {
         return {valid: false, error: CustomValidatorReponseTypes.EMPTY, value: input.input};
-    } else if (input.validationObject.minlength && input.validationObject.minlength > 0 && input.input.toString().length < input.validationObject.minlength) {
+    } else if (input.validationObject.minlength && input.validationObject.minlength > 0 && inputString.length < input.validationObject.minlength) {
         return {valid: false, error: CustomValidatorReponseTypes.MINLENGTH, value: input.input};
-    } else if (input.validationObject.maxlength && input.validationObject.maxlength > 0 && input.input.toString().length > input.validationObject.maxlength) {
+    } else if (input.validationObject.maxlength && input.validationObject.maxlength > 0 && inputString.length > input.validationObject.maxlength) {
         return {valid: false, error: CustomValidatorReponseTypes.MAXLENGTH, value: input.input};
     } else if (input.validationObject.tuemail) {
         const regex = new RegExp("^[a-zA-Z.]*$");
-        if (!regex.test(input.input.toString()) || !input.input.toString().includes(".")) { return {valid: false, error: CustomValidatorReponseTypes.TUEMAIL, value: input.input}; }
+        if (!regex.test(inputString) || !inputString.includes(".") || inputString[inputString.length - 1] === ".") {
+            return {valid: false, error: CustomValidatorReponseTypes.TUEMAIL, value: input.input};
+        }
     } else {
         return {valid: true};
     }

From 67a44be323ed30df4e83fa15a666f6abdbc10a08 Mon Sep 17 00:00:00 2001
From: Victor <victor@xirion.net>
Date: Tue, 6 Nov 2018 21:35:25 +0100
Subject: [PATCH 05/10] Post preview now completely different.

Fixes #63
---
 cshub-client/src/components/posts/Post.vue | 863 ++++++++++-----------
 cshub-client/src/plugins/quill/quill.ts    |  10 +-
 2 files changed, 436 insertions(+), 437 deletions(-)

diff --git a/cshub-client/src/components/posts/Post.vue b/cshub-client/src/components/posts/Post.vue
index ad957eda..6d1538c9 100644
--- a/cshub-client/src/components/posts/Post.vue
+++ b/cshub-client/src/components/posts/Post.vue
@@ -5,107 +5,90 @@
             <transition :duration="300" @before-leave="showContent = false" @before-enter="showContent = false" @after-enter="afterAnimation">
                 <div v-if="fullPostComputed"></div>
             </transition>
-
             <v-card :class="{previewCard: !fullPostComputed, fullCard: fullPostComputed}" :id="'post_' + domId">
-                <v-card-title primary-title :id="'postTitle_' + domId" style="padding-bottom: 0;">
-                    <transition name="topMenuShow">
-                        <div v-if="!showTopMenu && fullPostComputed">
-                            <v-btn color="secondary" depressed small @click="showTopMenu = true">
-                                <v-icon>fas fa-angle-down</v-icon>
-                            </v-btn>
-                        </div>
-                    </transition>
-                    <span v-if="showTopMenu || !fullPostComputed" style="display: contents;">
-                        <transition name="breadcrumb">
-                            <v-breadcrumbs divider="/" style="width: 100%" v-if="fullPostComputed">
-                                <v-btn color="primary" depressed small dark @click="returnToPostMenu">
-                                    <v-icon>fas fa-chevron-left</v-icon>
-                                </v-btn>
-                                <v-breadcrumbs-item
-                                        v-for="item in topicNames"
-                                        :key="item.index"
-                                        :disabled="false"
-                                >
-                                    <router-link :to="item.url">{{item.name}}</router-link>
-                                </v-breadcrumbs-item>
-                                <v-breadcrumbs-item
-                                        :disabled="true"
-                                >
-                                    {{post.title}}
-                                </v-breadcrumbs-item>
-                                <v-btn color="green" depressed small @click="verifyPost"
-                                       v-if="!post.approved && userAdminComputed">
-                                    <v-icon>fas fa-check</v-icon>
-                                </v-btn>
-                                <v-btn color="orange" depressed small @click="enableEdit"
-                                       v-if="(userOwnsThisPostComputed || userAdminComputed) && !editModeComputed">
-                                    <v-icon>fas fa-edit</v-icon>
-                                </v-btn>
-                                <v-btn v-if="editModeComputed" depressed small color="orange" @click="editPost">
-                                    <v-icon>fas fa-save</v-icon>
+                    <v-card-title primary-title :id="'postTitle_' + domId" class="pb-0 xl-0 pt-1"  @click.capture="navigateToPost">
+                        <transition name="topMenuShow">
+                            <div v-if="!showTopMenu && fullPostComputed">
+                                <v-btn color="secondary" depressed small @click="showTopMenu = true">
+                                    <v-icon>fas fa-angle-down</v-icon>
                                 </v-btn>
-                                <v-btn depressed small color="primary" @click="viewEditDialog">
-                                    <v-icon>fas fa-list-ol</v-icon>
-                                </v-btn>
-                                <v-btn depressed small color="secondary" @click="showTopMenu = false">
-                                    <v-icon>fas fa-angle-up</v-icon>
-                                </v-btn>
-                            </v-breadcrumbs>
-                        </transition>
-                        <v-badge right color="green" overlap class="mr-3 pl-3">
-                            <span slot="badge">{{post.upvotes}}</span>
-                            <v-avatar
-                                    :tile="false"
-                                    :size="50"
-                                    :class="{adminBorder: post.author.admin}"
-                            >
-                                <img :src="post.author.avatar" alt="avatar">
-                            </v-avatar>
-                        </v-badge>
-                        <div>
-                            <h3 class="headline">{{post.title}}</h3><p v-if="!post.approved && fullPostComputed" style="color: grey">(unverified)</p>
-                            <div>{{post.author.firstname}} {{post.author.lastname}} - {{post.datetime | formatDate}}</div>
-                        </div>
-                    </span>
-                </v-card-title>
-
-                <v-container
-                    v-show="fullPostComputed"
-                    position="relative"
-                    class="scroll-y"
-                    :class="'postScrollWindow_' + domId"
-                    style="margin: 0; padding-top: 0; max-width: none; overflow-wrap: break-word"
-                >
-                    <v-layout
-                      column
-                      align-center
-                      justify-center
-                      v-scroll:#post-scroll-target>
-                        <v-card-text v-if="!loadingIcon" id="postCardText">
-                            <Quill key="editQuill" ref="editQuill" v-if="editModeComputed"
-                                   :editorSetup="{allowEdit: true, showToolbar: true, postHash}"
-                                   :initialValue="editContent"></Quill>
-                            <div class="ql-editor">
-                                <div v-if="!editModeComputed" v-show="showContent" v-html="post.htmlContent"></div>
                             </div>
-                        </v-card-text>
-                    </v-layout>
-                </v-container>
-                <div v-if="loadingIcon">
-                    <v-progress-circular
-                            :size="150"
-                            :width="5"
-                            color="primary"
-                            indeterminate
-                            style="width: 100%; margin: 10% auto;"
-                    ></v-progress-circular>
-                </div>
-
-                <v-card-actions>
-                    <v-btn class="viewButton" flat color="primary" @click="navigateToPost" v-if="!fullPostComputed"><b>View</b>
-                    </v-btn>
-                </v-card-actions>
-            </v-card>
+                        </transition>
+                        <span v-if="showTopMenu || !fullPostComputed" style="display: contents">
+                            <transition name="breadcrumb">
+                                <v-breadcrumbs divider="/" style="width: 100%" v-if="fullPostComputed">
+                                    <v-btn color="primary" depressed small dark @click="returnToPostMenu">
+                                        <v-icon>fas fa-chevron-left</v-icon>
+                                    </v-btn>
+                                    <v-breadcrumbs-item
+                                            v-for="item in topicNames"
+                                            :key="item.index"
+                                            :disabled="false">
+                                        <router-link :to="item.url">{{item.name}}</router-link>
+                                    </v-breadcrumbs-item>
+                                    <v-breadcrumbs-item :disabled="true"> {{post.title}} </v-breadcrumbs-item>
+                                    <v-btn color="green" depressed small @click="verifyPost"
+                                           v-if="!post.approved && userAdminComputed">
+                                        <v-icon>fas fa-check</v-icon>
+                                    </v-btn>
+                                    <v-btn color="orange" depressed small @click="enableEdit"
+                                           v-if="(userOwnsThisPostComputed || userAdminComputed) && !editModeComputed">
+                                        <v-icon>fas fa-edit</v-icon>
+                                    </v-btn>
+                                    <v-btn v-if="editModeComputed" depressed small color="orange" @click="editPost">
+                                        <v-icon>fas fa-save</v-icon>
+                                    </v-btn>
+                                    <v-btn depressed small color="primary" @click="viewEditDialog">
+                                        <v-icon>fas fa-list-ol</v-icon>
+                                    </v-btn>
+                                    <v-btn depressed small color="secondary" @click="showTopMenu = false">
+                                        <v-icon>fas fa-angle-up</v-icon>
+                                    </v-btn>
+                                </v-breadcrumbs>
+                            </transition>
+                            <v-list dense three-line class="pa-0">
+                              <v-list-tile avatar>
+                                <v-list-tile-avatar >
+                                  <img :src="post.author.avatar" :class="{adminBorder: post.author.admin}"/>
+                                </v-list-tile-avatar>
+                                <v-list-tile-content class="pt-2 d-inline">
+                                  <v-list-tile-sub-title class="black--text post-title">{{post.title}}</v-list-tile-sub-title>
+                                  <v-list-tile-sub-title>{{post.author.firstname}} {{post.author.lastname}} - {{post.datetime | formatDate}}</v-list-tile-sub-title>
+                                </v-list-tile-content>
+                              </v-list-tile>
+                            </v-list>
+                        </span>
+                    </v-card-title>
+                    <v-container
+                            v-show="fullPostComputed"
+                            position="relative"
+                            class="scroll-y"
+                            :class="'postScrollWindow_' + domId"
+                            style="margin: 0; padding-top: 0; max-width: none; overflow-wrap: break-word">
+                        <v-layout
+                                column
+                                align-center
+                                justify-center
+                                v-scroll:#post-scroll-target>
+                            <v-card-text v-if="!loadingIcon" id="postCardText">
+                                <Quill key="editQuill" ref="editQuill" v-if="editModeComputed"
+                                       :editorSetup="{allowEdit: true, showToolbar: true, postHash}"
+                                       :initialValue="editContent"></Quill>
+                                <div class="ql-editor">
+                                  <div v-if="!editModeComputed" v-show="showContent" v-html="post.htmlContent"></div>
+                                </div>
+                            </v-card-text>
+                        </v-layout>
+                    </v-container>
+                    <div v-if="loadingIcon">
+                        <v-progress-circular
+                                :size="150"
+                                :width="5"
+                                color="primary"
+                                indeterminate
+                                style="width: 100%; margin: 10% auto;" />
+                    </div>
+                </v-card>
         </div>
         <div v-else-if="loadingIcon">
             <v-progress-circular
@@ -113,410 +96,426 @@
                     :width="5"
                     color="primary"
                     indeterminate
-                    style="width: 100%; margin: 10% auto;"
-            ></v-progress-circular>
+                    style="width: 100%; margin: 10% auto;" />
         </div>
-        <PostEditsDialog :postHash="postHash"></PostEditsDialog>
+        <PostEditsDialog :postHash="postHash" />
     </div>
 </template>
 
 <script lang="ts">
-    import Vue from "vue";
-    import localForage from "localforage";
-    import Delta from "quill-delta/dist/Delta";
-    import {Watch, Component, Prop} from "vue-property-decorator";
-    import {Route} from "vue-router";
-    import {AxiosError} from "axios";
-
-    import Quill from "../quill/Quill.vue";
-    import PostEditsDialog from "./PostEditsDialog.vue";
-
-    import {
-        EditPostCallback,
-        EditPost,
-        GetPostCallBack,
-        GetPost,
-        GetPostContentCallBack,
-        GetPostContent,
-        PostVersionTypes,
-        VerifyPostCallBack,
-        VerifyPost, GetEditContent, GetEditContentCallback
-    } from "../../../../cshub-shared/api-calls";
-    import {IPost, ITopic} from "../../../../cshub-shared/models";
-    import {getTopicFromHash} from "../../../../cshub-shared/utilities/Topics";
-
-    import {ApiWrapper, logObjectConsole, logStringConsole} from "../../utilities";
-    import {CacheTypes} from "../../utilities/cache-types";
-    import {ImgurUpload} from "../../utilities/imgur";
-    import {idGenerator} from "../../utilities/id-generator";
-
-    import {Routes} from "../../views/router/router";
-
-    import dataState from "../../store/data";
-    import userState from "../../store/user";
-    import uiState from "../../store/ui";
-
-    interface IBreadCrumbType {
-        name: string;
-        url: string;
-    }
-
-    @Component({
-        name: "Post",
-        components: {Quill, PostEditsDialog},
-    })
-    export default class Post extends Vue {
-
-        /**
-         * Data
-         */
-        @Prop(Number) private postHash: number;
-
-        private domId: string = idGenerator();
-        private post: IPost = null;
-        private topicNames: IBreadCrumbType[] = [];
-        private canResize = true;
-        private editContent: Delta = new Delta();
-        private showContent = true;
-        private loadingIcon = false;
-        private previousTopicURL = "";
-        private showTopMenu = true;
-
-        /**
-         * Computed properties
-         */
-        get userOwnsThisPostComputed(): boolean {
-            if (userState.userModel !== null) {
-                return userState.userModel.id === this.post.author.id;
-            } else {
-                return false;
-            }
+import Vue from "vue";
+import localForage from "localforage";
+import Delta from "quill-delta/dist/Delta";
+import {Watch, Component, Prop} from "vue-property-decorator";
+import {Route} from "vue-router";
+import {AxiosError} from "axios";
+
+import Quill from "../quill/Quill.vue";
+import PostEditsDialog from "./PostEditsDialog.vue";
+
+import {
+    EditPostCallback,
+    EditPost,
+    GetPostCallBack,
+    GetPost,
+    GetPostContentCallBack,
+    GetPostContent,
+    PostVersionTypes,
+    VerifyPostCallBack,
+    VerifyPost, GetEditContent, GetEditContentCallback
+} from "../../../../cshub-shared/api-calls";
+import {IPost, ITopic} from "../../../../cshub-shared/models";
+import {getTopicFromHash} from "../../../../cshub-shared/utilities/Topics";
+
+import {ApiWrapper, logObjectConsole, logStringConsole} from "../../utilities";
+import {CacheTypes} from "../../utilities/cache-types";
+import {ImgurUpload} from "../../utilities/imgur";
+import {idGenerator} from "../../utilities/id-generator";
+
+import {Routes} from "../../views/router/router";
+
+import dataState from "../../store/data";
+import userState from "../../store/user";
+import uiState from "../../store/ui";
+
+interface IBreadCrumbType {
+    name: string;
+    url: string;
+}
+
+@Component({
+    name: "Post",
+    components: {Quill, PostEditsDialog},
+})
+export default class Post extends Vue {
+
+    /**
+     * Data
+     */
+    @Prop(Number) private postHash: number;
+
+    private domId: string = idGenerator();
+    private post: IPost = null;
+    private topicNames: IBreadCrumbType[] = [];
+    private canResize = true;
+    private editContent: Delta = new Delta();
+    private showContent = true;
+    private loadingIcon = false;
+    private previousTopicURL = "";
+    private showTopMenu = true;
+
+    /**
+     * Computed properties
+     */
+    get userOwnsThisPostComputed(): boolean {
+        if (userState.userModel !== null) {
+            return userState.userModel.id === this.post.author.id;
+        } else {
+            return false;
         }
+    }
 
-        get userAdminComputed(): boolean {
-            return userState.isAdmin;
-        }
+    get userAdminComputed(): boolean {
+        return userState.isAdmin;
+    }
 
-        get currentPostURLComputed(): string {
-            return `${Routes.POST}/${this.postHash}`;
-        }
+    get currentPostURLComputed(): string {
+        return `${Routes.POST}/${this.postHash}`;
+    }
 
-        get fullPostComputed(): boolean {
-            return this.$route.fullPath.includes(this.postHash.toString());
-        }
+    get fullPostComputed(): boolean {
+        return this.$route.fullPath.includes(this.postHash.toString());
+    }
 
-        get editModeComputed(): boolean {
-            return this.$route.fullPath === `${this.currentPostURLComputed}/edit`;
-        }
+    get editModeComputed(): boolean {
+        return this.$route.fullPath === `${this.currentPostURLComputed}/edit`;
+    }
 
-        get editsListComputed(): boolean {
-            return this.$route.fullPath === `${this.currentPostURLComputed}/edits`;
-        }
+    get editsListComputed(): boolean {
+        return this.$route.fullPath === `${this.currentPostURLComputed}/edits`;
+    }
 
-        /**
-         * Watchers
-         */
-        @Watch("$route")
-        private routeChanged(to: Route, from: Route) {
-            if (this.fullPostComputed && (from.name === "topic" || from.fullPath === Routes.INDEX)) {
-                this.getContentRequest(this.post);
-                this.previousTopicURL = from.fullPath;
-            } else if (this.editsListComputed) {
-                this.previousTopicURL = Routes.INDEX;
-                this.viewEditDialog();
-            } else {
-                this.previousTopicURL = Routes.INDEX;
-            }
+    /**
+     * Watchers
+     */
+    @Watch("$route")
+    private routeChanged(to: Route, from: Route) {
+        if (this.fullPostComputed && (from.name === "topic" || from.fullPath === Routes.INDEX)) {
+            this.getContentRequest(this.post);
+            this.previousTopicURL = from.fullPath;
+        } else if (this.editsListComputed) {
+            this.previousTopicURL = Routes.INDEX;
+            this.viewEditDialog();
+        } else {
+            this.previousTopicURL = Routes.INDEX;
         }
+    }
 
-        /**
-         * Lifecycle hooks
-         */
-        private mounted() {
+    /**
+     * Lifecycle hooks
+     */
+    private mounted() {
 
-            if (this.$vuetify.breakpoint.xsOnly) {
-                this.showTopMenu = false;
-            }
+        if (this.$vuetify.breakpoint.xsOnly) {
+            this.showTopMenu = false;
+        }
 
-            window.addEventListener("resize", this.windowHeightChanged);
-            this.getPostRequest();
+        window.addEventListener("resize", this.windowHeightChanged);
+        this.getPostRequest();
 
-            this.previousTopicURL = Routes.INDEX;
+        this.previousTopicURL = Routes.INDEX;
 
-            if (this.editModeComputed) {
-                this.enableEdit();
-            } else if (this.editsListComputed) {
-                uiState.setEditDialogState({
-                    on: true,
-                    hash: this.postHash
-                });
-            }
+        if (this.editModeComputed) {
+            this.enableEdit();
+        } else if (this.editsListComputed) {
+            uiState.setEditDialogState({
+                on: true,
+                hash: this.postHash
+            });
         }
+    }
 
-        private updated() {
-            setTimeout(() => {
-                this.windowHeightChanged();
-            }, 500);
-        }
+    private updated() {
+        setTimeout(() => {
+            this.windowHeightChanged();
+        }, 500);
+    }
 
-        /**
-         * Methods
-         */
-        private windowHeightChanged() {
-            if (this.canResize) {
-                // Calculate the right height for the postcardtext, 100px padding
-                this.canResize = false;
-
-                const postCard = document.getElementById(`post_${this.domId}`);
-                const postCardTitle = document.getElementById(`postTitle_${this.domId}`);
-                if (postCard !== null) {
-
-                    let postCardTitleHeight = 0;
-                    if (postCardTitle !== null) {
-                        postCardTitleHeight = postCardTitle.clientHeight;
-                    }
+    /**
+     * Methods
+     */
+    private windowHeightChanged() {
+        if (this.canResize) {
+            // Calculate the right height for the postcardtext, 100px padding
+            this.canResize = false;
+
+            const postCard = document.getElementById(`post_${this.domId}`);
+            const postCardTitle = document.getElementById(`postTitle_${this.domId}`);
+            if (postCard !== null) {
+
+                let postCardTitleHeight = 0;
+                if (postCardTitle !== null) {
+                    postCardTitleHeight = postCardTitle.clientHeight;
+                }
 
-                    const newHeight = postCard.clientHeight - postCardTitleHeight - 50;
+                const newHeight = postCard.clientHeight - postCardTitleHeight - 50;
 
-                    (document.getElementsByClassName(`postScrollWindow_${this.domId}`).item(0) as HTMLElement).style.maxHeight = `${newHeight}px`;
+                (document.getElementsByClassName(`postScrollWindow_${this.domId}`).item(0) as HTMLElement).style.maxHeight = `${newHeight}px`;
 
-                    setTimeout(() => {
-                        this.canResize = true;
-                    }, 1000);
-                } else {
+                setTimeout(() => {
                     this.canResize = true;
-                }
+                }, 1000);
+            } else {
+                this.canResize = true;
             }
         }
+    }
 
-        private verifyPost() {
-            ApiWrapper.sendPostRequest(new VerifyPost(this.postHash), (callback: VerifyPostCallBack) => {
-                logStringConsole("Verified post");
-                this.$router.push(Routes.INDEX);
-            });
-        }
+    private verifyPost() {
+        ApiWrapper.sendPostRequest(new VerifyPost(this.postHash), (callback: VerifyPostCallBack) => {
+            logStringConsole("Verified post");
+            this.$router.push(Routes.INDEX);
+        });
+    }
 
-        private returnToPostMenu() {
-            this.$router.push(this.previousTopicURL);
-        }
+    private returnToPostMenu() {
+        this.$router.push(this.previousTopicURL);
+    }
 
-        private getParentTopic(child: ITopic, topics: ITopic[]): ITopic {
-            for (const topic of topics) {
-                if (topic.children !== undefined && topic.children.findIndex((x) => x.id === child.id) !== -1) {
-                    return topic;
-                } else if (topic.children !== undefined && topic.children.length > 0) {
-                    const currTopic = this.getParentTopic(child, topic.children);
-                    if (currTopic !== null) {
-                        return currTopic;
-                    }
+    private getParentTopic(child: ITopic, topics: ITopic[]): ITopic {
+        for (const topic of topics) {
+            if (topic.children !== undefined && topic.children.findIndex((x) => x.id === child.id) !== -1) {
+                return topic;
+            } else if (topic.children !== undefined && topic.children.length > 0) {
+                const currTopic = this.getParentTopic(child, topic.children);
+                if (currTopic !== null) {
+                    return currTopic;
                 }
             }
-            return null;
         }
+        return null;
+    }
 
-        private enableEdit() {
-            ApiWrapper.sendPostRequest(new GetEditContent(this.postHash), (callbackData: GetEditContentCallback) => {
-                let baseDelta = new Delta(callbackData.edits[0].content);
-                for (let i = 1; i < callbackData.edits.length; i++) {
-                    baseDelta = baseDelta.compose(callbackData.edits[i].content);
-                }
+    private enableEdit() {
+        ApiWrapper.sendPostRequest(new GetEditContent(this.postHash), (callbackData: GetEditContentCallback) => {
+            let baseDelta = new Delta(callbackData.edits[0].content);
+            for (let i = 1; i < callbackData.edits.length; i++) {
+                baseDelta = baseDelta.compose(callbackData.edits[i].content);
+            }
 
-                this.editContent = baseDelta;
+            this.editContent = baseDelta;
 
-                this.$router.push(`${this.currentPostURLComputed}/edit`);
-            });
-        }
+            this.$router.push(`${this.currentPostURLComputed}/edit`);
+        });
+    }
 
-        private getTopicListWhereFinalChildIs(child: ITopic): IBreadCrumbType[] {
-            const parentTopic = this.getParentTopic(child, dataState.topics);
+    private getTopicListWhereFinalChildIs(child: ITopic): IBreadCrumbType[] {
+        const parentTopic = this.getParentTopic(child, dataState.topics);
 
-            const currTopic: IBreadCrumbType = {
-                name: child.name,
-                url: `${Routes.TOPIC}/${child.hash}`
-            };
+        const currTopic: IBreadCrumbType = {
+            name: child.name,
+            url: `${Routes.TOPIC}/${child.hash}`
+        };
 
-            if (parentTopic !== null) {
-                const parentArray: IBreadCrumbType[] = this.getTopicListWhereFinalChildIs(parentTopic);
-                return [...parentArray, currTopic];
-            } else {
-                return [currTopic];
-            }
+        if (parentTopic !== null) {
+            const parentArray: IBreadCrumbType[] = this.getTopicListWhereFinalChildIs(parentTopic);
+            return [...parentArray, currTopic];
+        } else {
+            return [currTopic];
         }
+    }
 
-        private editPost() {
-            logStringConsole("Edited post");
-            const delta: Delta = (this.$refs as any).editQuill.getDelta();
+    private editPost() {
+        logStringConsole("Edited post");
+        const delta: Delta = (this.$refs as any).editQuill.getDelta();
 
-            ImgurUpload.findAndReplaceImagesWithImgurLinks(delta)
-                .then((newValue: Delta) => {
-                    const diff = this.editContent.diff(newValue);
+        ImgurUpload.findAndReplaceImagesWithImgurLinks(delta)
+            .then((newValue: Delta) => {
+                const diff = this.editContent.diff(newValue);
 
-                    const html: string = (this.$refs as any).editQuill.getHTML();
+                const html: string = (this.$refs as any).editQuill.getHTML();
 
-                    ApiWrapper.sendPostRequest(new EditPost(this.postHash, diff, html), (callbackData: EditPostCallback) => {
-                        this.$router.push(this.currentPostURLComputed);
-                        this.getPostRequest();
-                    });
+                ApiWrapper.sendPostRequest(new EditPost(this.postHash, diff, html), (callbackData: EditPostCallback) => {
+                    this.$router.push(this.currentPostURLComputed);
+                    this.getPostRequest();
                 });
-        }
+            });
+    }
 
-        private getPostRequest() {
-            localForage.getItem<IPost>(CacheTypes.POSTS + this.postHash)
-                .then((cachedValue: IPost) => {
-                    if (cachedValue === null || cachedValue.id === undefined) {
-                        ApiWrapper.sendPostRequest(new GetPost(this.postHash), (callbackData: GetPostCallBack) => {
-                            if (callbackData.post !== null) {
-                                this.post = callbackData.post;
-
-                                logObjectConsole(callbackData.post, "getPostRequest");
-
-                                if (this.fullPostComputed) {
-                                    this.getContentRequest(callbackData.post);
-                                } else {
-                                    localForage.setItem<IPost>(CacheTypes.POSTS + this.postHash, callbackData.post);
-                                }
+    private getPostRequest() {
+        localForage.getItem<IPost>(CacheTypes.POSTS + this.postHash)
+            .then((cachedValue: IPost) => {
+                if (cachedValue === null || cachedValue.id === undefined) {
+                    ApiWrapper.sendPostRequest(new GetPost(this.postHash), (callbackData: GetPostCallBack) => {
+                        if (callbackData.post !== null) {
+                            this.post = callbackData.post;
+
+                            logObjectConsole(callbackData.post, "getPostRequest");
+
+                            if (this.fullPostComputed) {
+                                this.getContentRequest(callbackData.post);
                             } else {
-                                this.$router.push(Routes.INDEX);
+                                localForage.setItem<IPost>(CacheTypes.POSTS + this.postHash, callbackData.post);
                             }
-                        });
-                    } else {
-                        logStringConsole("Gotten post from cache", "getPostRequest");
-
-                        if (this.fullPostComputed) {
-                            this.getContentRequest(cachedValue);
                         } else {
-                            this.post = cachedValue;
+                            this.$router.push(Routes.INDEX);
                         }
-                    }
-                });
-        }
-
-        private getContentRequest(cachedValue: IPost) {
-            const timeOut = setTimeout(() => {
-                this.loadingIcon = true;
-            }, 250);
-
-            ApiWrapper.sendPostRequest(new GetPostContent(this.postHash, typeof cachedValue.htmlContent !== "string", cachedValue.postVersion), (callbackContent: GetPostContentCallBack) => {
-
-                clearTimeout(timeOut);
-                this.loadingIcon = false;
-
-                let hasBeenUpdated = false;
-
-                if (callbackContent.postVersionType === PostVersionTypes.POSTDELETED) {
-                    this.$router.push(Routes.INDEX);
-                } else if (callbackContent.postVersionType === PostVersionTypes.UPDATEDPOST) {
-                    this.post = callbackContent.postUpdated;
-                    this.post.htmlContent = callbackContent.content.html;
-                    this.post.approved = callbackContent.content.approved;
-                    hasBeenUpdated = true;
-                } else if (callbackContent.postVersionType === PostVersionTypes.RETRIEVEDCONTENT) {
-                    this.post = cachedValue;
-                    this.post.htmlContent = callbackContent.content.html;
-                    this.post.approved = callbackContent.content.approved;
-                    hasBeenUpdated = true;
-                } else if (callbackContent.postVersionType === PostVersionTypes.NOCHANGE) {
-                    this.post = cachedValue;
-                }
-
-                this.topicNames = this.getTopicListWhereFinalChildIs(getTopicFromHash(this.post.topicHash, dataState.topics));
+                    });
+                } else {
+                    logStringConsole("Gotten post from cache", "getPostRequest");
 
-                if (hasBeenUpdated) {
-                    this.$forceUpdate();
-                    localForage.setItem<IPost>(CacheTypes.POSTS + this.postHash, this.post)
-                        .then(() => {
-                            logStringConsole("Changed post in cache", "getContentRequest");
-                        });
+                    if (this.fullPostComputed) {
+                        this.getContentRequest(cachedValue);
+                    } else {
+                        this.post = cachedValue;
+                    }
                 }
-            }, (err: AxiosError) => {
-
-                clearTimeout(timeOut);
-                this.loadingIcon = false;
-
-                this.post.htmlContent = cachedValue.htmlContent;
-                this.$forceUpdate();
             });
-        }
-
-        private afterAnimation() {
-            this.showContent = true;
-        }
+    }
 
-        private viewEditDialog() {
-            this.$router.push(`${this.currentPostURLComputed}/edits`);
-            uiState.setEditDialogState({
-                on: true,
-                hash: this.postHash
-            });
-        }
+    private getContentRequest(cachedValue: IPost) {
+        const timeOut = setTimeout(() => {
+            this.loadingIcon = true;
+        }, 250);
 
-        private navigateToPost(): void {
-            logStringConsole(`Going to post ${this.post.title}`, "PostPreview navigateToPost");
+        ApiWrapper.sendPostRequest(new GetPostContent(this.postHash, typeof cachedValue.htmlContent !== "string", cachedValue.postVersion), (callbackContent: GetPostContentCallBack) => {
 
-            this.$router.push(this.currentPostURLComputed);
-        }
-    }
-</script>
+            clearTimeout(timeOut);
+            this.loadingIcon = false;
 
-<style scoped>
+            let hasBeenUpdated = false;
 
-    .adminBorder {
-        box-shadow: 0 0 2pt 3pt #ad073b;
-    }
+            if (callbackContent.postVersionType === PostVersionTypes.POSTDELETED) {
+                this.$router.push(Routes.INDEX);
+            } else if (callbackContent.postVersionType === PostVersionTypes.UPDATEDPOST) {
+                this.post = callbackContent.postUpdated;
+                this.post.htmlContent = callbackContent.content.html;
+                this.post.approved = callbackContent.content.approved;
+                hasBeenUpdated = true;
+            } else if (callbackContent.postVersionType === PostVersionTypes.RETRIEVEDCONTENT) {
+                this.post = cachedValue;
+                this.post.htmlContent = callbackContent.content.html;
+                this.post.approved = callbackContent.content.approved;
+                hasBeenUpdated = true;
+            } else if (callbackContent.postVersionType === PostVersionTypes.NOCHANGE) {
+                this.post = cachedValue;
+            }
 
-    .previewCard {
-        position: relative;
-        max-height: 30vh;
-        width: 90%;
-        overflow: hidden;
-        margin: 20px 5% 20px 5%;
-        transition: 0.3s;
-    }
+            this.topicNames = this.getTopicListWhereFinalChildIs(getTopicFromHash(this.post.topicHash, dataState.topics));
 
-    .fullCard {
-        position: absolute;
-        width: 100%;
-        overflow: hidden;
-        margin: 0;
-        height: 100%;
-        max-height: 100%;
-        transition: 0.3s;
-    }
+            if (hasBeenUpdated) {
+                this.$forceUpdate();
+                localForage.setItem<IPost>(CacheTypes.POSTS + this.postHash, this.post)
+                    .then(() => {
+                        logStringConsole("Changed post in cache", "getContentRequest");
+                    });
+            }
+        }, (err: AxiosError) => {
 
-    .viewButton {
-        width: 100%;
-        text-align: right;
-        margin: 0;
-        padding: 0;
-    }
+            clearTimeout(timeOut);
+            this.loadingIcon = false;
 
-    .breadcrumb-enter-active {
-        transition: opacity .2s;
+            this.post.htmlContent = cachedValue.htmlContent;
+            this.$forceUpdate();
+        });
     }
 
-    .breadcrumb-leave-active {
-        transition: opacity .1s;
+    private afterAnimation() {
+        this.showContent = true;
     }
 
-    .breadcrumb-enter, .breadcrumb-leave-to {
-        opacity: 0;
+    private viewEditDialog() {
+        this.$router.push(`${this.currentPostURLComputed}/edits`);
+        uiState.setEditDialogState({
+            on: true,
+            hash: this.postHash
+        });
     }
 
-    .topMenuShow-enter-active, .topMenuShow-leave-active {
-        transition: opacity .2s;
-    }
+    private navigateToPost(): void {
+        logStringConsole(`Going to post ${this.post.title}`, "PostPreview navigateToPost");
 
-    .topMenuShow-enter, .topMenuShow-leave-to {
-        opacity: 0;
+        this.$router.push(this.currentPostURLComputed);
     }
+}
+</script>
 
-    @font-face {
-        font-family: 'SailecLight';
-        src: url("../../../public/assets/Sailec-Light.otf");
-    }
+<style scoped>
 
-    .ql-editor {
-        border: none;
-        font-family: 'SailecLight', sans-serif;
-    }
+.adminBorder {
+    box-shadow: 0 0 2pt 3pt #ad073b;
+}
+
+.previewCard {
+    position: relative;
+    width: 90%;
+    overflow: hidden;
+    margin: 20px 5% 20px 5%;
+    padding: 0;
+    transition: 0.3s;
+}
+
+.previewCard:hover {
+    transform: scale(1.05);
+    border: HSL(194, 100%, 42%) 1px solid;
+}
+
+.fullCard {
+    position: absolute;
+    width: 100%;
+    overflow: hidden;
+    margin: 0;
+    height: 100%;
+    max-height: 100%;
+    transition: 0.3s;
+}
+
+.post-title {
+    font-weight: 400;
+    font-size: 1.5rem;
+    line-height: 24px;
+    font-family: Roboto, sans-serif;
+    word-break: break-all;
+}
+
+.viewButton {
+    position: relative;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    text-align: right;
+    margin: 0;
+    padding: 0;
+    height: 2em;
+}
+
+.breadcrumb-enter-active {
+    transition: opacity .2s;
+}
+
+.breadcrumb-leave-active {
+    transition: opacity .1s;
+}
+
+.breadcrumb-enter, .breadcrumb-leave-to {
+    opacity: 0;
+}
+
+.topMenuShow-enter-active, .topMenuShow-leave-active {
+    transition: opacity .2s;
+}
+
+.topMenuShow-enter, .topMenuShow-leave-to {
+    opacity: 0;
+}
+
+@font-face {
+    font-family: 'SailecLight';
+    src: url("../../../public/assets/Sailec-Light.otf");
+}
+
+.ql-editor {
+    border: none;
+    font-family: 'SailecLight', sans-serif;
+}
 </style>
\ No newline at end of file
diff --git a/cshub-client/src/plugins/quill/quill.ts b/cshub-client/src/plugins/quill/quill.ts
index b27b9de4..65c71583 100644
--- a/cshub-client/src/plugins/quill/quill.ts
+++ b/cshub-client/src/plugins/quill/quill.ts
@@ -50,11 +50,11 @@ export interface RangeStatic {
 }
 
 export class RangeStatic implements RangeStatic {
-    constructor() {};
 
-    index: number;
-    length: number;
-}
+
+    public index: number;
+    public length: number;
+    constructor() {}}
 
 export interface EventEmitter {
     on(eventName: "text-change", handler: TextChangeHandler): EventEmitter;
@@ -74,4 +74,4 @@ export interface EventEmitter {
     off(eventName: "selection-change", handler: SelectionChangeHandler): EventEmitter;
 
     off(eventName: "editor-change", handler: EditorChangeHandler): EventEmitter;
-}
\ No newline at end of file
+}

From 333f2809140c59c7fb699d6fc957ef35b7ad8a55 Mon Sep 17 00:00:00 2001
From: RobbinBaauw <robbin.baauw@gmail.com>
Date: Tue, 6 Nov 2018 21:38:43 +0100
Subject: [PATCH 06/10] Fixed a lot of avatar stuff

---
 cshub-client/public/assets/defaultAvatar.png  | Bin 0 -> 1926 bytes
 .../src/components/admin/UserTable.vue        |   2 -
 .../src/components/global/NavDrawer.vue       |  10 +
 cshub-client/src/components/posts/Post.vue    |   9 +-
 cshub-client/src/views/router/router.ts       |   5 +-
 .../src/views/user/CreateUserAccount.vue      | 130 +++---
 cshub-client/src/views/user/UserDashboard.vue | 226 ++++++----
 cshub-server/package-lock.json                | 408 +++++++++++++++++-
 cshub-server/package.json                     |   3 +-
 cshub-server/src/auth/JWTHandler.ts           |   5 +-
 .../src/components/account/CreateAccount.ts   |   1 +
 cshub-server/src/components/account/Login.ts  |   4 +-
 .../src/components/pages/GetEditContent.ts    |   2 +-
 cshub-server/src/components/pages/GetPost.ts  |   4 +
 .../src/components/pages/admin/GetAllUsers.ts |   4 +-
 .../components/pages/user/ChangeUserAvatar.ts |  51 +++
 .../src/components/pages/user/index.ts        |   1 +
 cshub-shared/api-calls/AuthRequests.ts        |   1 +
 .../api-calls/pages/user/ChangeUserAvatar.ts  |  24 ++
 cshub-shared/api-calls/pages/user/index.ts    |   2 +
 cshub-shared/package-lock.json                |   5 +
 cshub-shared/package.json                     |   3 +
 22 files changed, 741 insertions(+), 159 deletions(-)
 create mode 100644 cshub-client/public/assets/defaultAvatar.png
 create mode 100644 cshub-server/src/components/pages/user/ChangeUserAvatar.ts
 create mode 100644 cshub-shared/api-calls/pages/user/ChangeUserAvatar.ts

diff --git a/cshub-client/public/assets/defaultAvatar.png b/cshub-client/public/assets/defaultAvatar.png
new file mode 100644
index 0000000000000000000000000000000000000000..62ede7562fb4bfd1f4f22af19871a945dfe57583
GIT binary patch
literal 1926
zcmV;12YL93P)<h;3K|Lk000e1NJLTq005Q%005Q<1^@s6JOOdy000L~Nkl<Zc%1E>
zTZmOv7{`B(Io@R|FOioSt)%S1kTUI}MopzpAw=mzNMTq#+d~h&6g>!;y=3(iL==S4
zTcKcv;*GL$3@xXNNg9r!c^`GOhqXjK%&|Fh_FmuF-~RvLW5by<=ew-`S!?gJ*Io;R
z5JCtcgb+dqA%qY@2q8p+Gr&5424WP@4zvMdfiV@wvGIL}qjgmr{{Yql#}mdZ8kAds
zWx!WJH*l#=>yDqbEPl2q5d(mwz&79_^^2*RU5q}KqLINpcLAHpPfXQpbM!5o(G090
zo8hjWVRA)`ML1v#unRjuRobo?lPEAlfvwn!snWK_*hB$o0@h+LqH4A_#wZHLD(uDc
zf3_;O>_slj$6hpjwfQ;KK;*zS>;=<T+m=%eM8>pZFP2)ZJ(o&|Oxc9JP-?YJxl}@A
z#$4=0(qEgKLp{v!cDehkbpUlx<k;QQiG9!0U+c`F9wGy#U@wk(ZA#`<F~ZYO=;6xB
zLk@t1)o6Ig!5s&%AIj>r1DRLF2rn}m2LWd(eh+*R7y_KP4y0a+-Vm3Wh>u*F2)Ps<
z4~+rPY8^m^xX8teu-dEx$dESc0J6Y~uv~o0BQA3BBCOHY0c41aT)YU&)BJH4xky-z
zhl^Y!tj5DdE?$H+#5#ZsagmD`VY&F0M_lCMMOa?)04KS)NCG%w9YBV-$i<7W4qFG1
zAue)}uo@2+xp)y)mvsOc;vyF>!gBE~kGROii?9w^2aq8ya`7^QbQo}qFq5>%oCjKf
z)7F91i<chjG_c(|hz!_{15tq=VF7$?9Y6+n$N}&rtPR!yWPpbp06*tg0D}qVSw+2x
zdzNs1)omR}7I^Bhx`B<>LDa!UoQTRJ3$TCaw7<3>hkA&N7y#_SUL>{J9(<jaxEcx}
zG}3D8Ao{^-LhPb}8A`a{X59<*)w*ypx$kPc^;iIBfHl@Z)W8}-%%T7crx>gIb;ejl
zfp`$;!CpMotS81O3dl<A1ys#e=9st0nZdwr>_t>*yJKvkz)UCH>aiBnWjhvQ5)QbZ
z#t_%B7>jU(wYVfI$5@F=qACIR03D<gRY&wGN<cI424RkQUV=IweQ4ME5;B8)cDUaa
zKU<WTW?(U}j{1J7?}?wW81+)3f(gKDz+U<;sJ-!jCK$xqu(+CBmN6p<D;Q6T$JY4z
z{%C*3;|Y`Kgb+ex#6ar+5-<{Ym~c}4D)2UN6!<=o{}+HSfjPir!ZH9|z_~>JMFunh
z(}3rJ4+xk2)vom3CEsTdheRLMt{{H|-UpTdccSy%hGQ7;4DdO%->&HZX66vnOltpi
z|7gtNX&lahFA9T!r+`m@lhpr%<`!TP^{rMjD1OG44B|Nfd_;KGu;?r3G(1hfeBeX!
zyODelcpX?sxW6~*I`NE(?^ziC=U`4T9Rc10=Az*;a~=VHAfJZoOT+E}K8>~`zGe~2
zPQpcisFT})FR*FEMz+szvaexkT7b6*i)2_gVx!tw;7wpeKWkh%9->%JGF#h0U|xR;
zT_)y`%~f96>=Zips>)m>s(S1sp|=-TF^}-Avu>QC+i_raZKe0iEF`Kd?O))&np(gi
z1Ay<aZwznNfzOqM`pjbN8^NnRS3^5wj^!<aX5eS^LtkF(2c}{)J;$=Ud<BUrPg;SO
zteji*SS`S>z)eQ}%R(1$8wT_8t$M6QNK`2p1H5SA*h*MW82K$DPg*#&7zzgg{}AS)
zi~KnQ+(_bGFD!bj*+^6=845g*+Np)GGz_NavD6MFta9*ZYKN)Mu|^X%)7ISWwDbTs
z6Ye7>A$5;64T;Kvfh4{$omyCJiT#Nyw5D_>VU>r8DV<4J<-xVEl6J@98e9vjEwMjw
zg`~ntd4<+Qcot4;5!i5wgwG(R?6JlpQCTvaaL+IaDTOsIp)b)p$%ey}!Wx#)m*}0A
zRE{L9a*=GC;FQAB-pBSN`*N$tDi;!#$OV_e(okrROJS+UvPZ%ax!_V*8Vc=kDJ=C^
z_P7+5dMtbL+~VaLQVJ_sQlct1q;ix}SeFv|61|hGy;BOSC!sIVJIUtXr4&|ILSLeH
zj#vkf2Q5G+_Dd+1)jCNyZ6-C-(OT{nb~4u9HTMFCurGF5>`<(EDVRj<JCMq1w~kor
zQZW*E2e^QJ19-Cwv9_gNhinF6b4lyQ@M1e+O$Fg+kC)MQa`jkOtYN8lq^QOaU<vRo
z_6=1O`!?20x6Jy;EZ}3b%W7}d9cweI-_;e21C|3DD7VPEV-1#5fQNsJwz}Rh!iJfT
z1MR@ww&CQ?Pr!O$9q<is+BTfNQ#4^!GM*r?cEXj=6vF0DMdTdt8?cigruD#IrV-Ua
z(S=pXK*AbacSM_d)v-1H-I5-{u3WzW`>s0fi?6$x0pd+q*P|JjOc2>Ege853M;lS)
zSos=+`);SAovd=KeC=<7h<?Xtn>QhZ5JCtcgb+dqA%qY@2q7x?5BHSV69MPOBLDyZ
M07*qoM6N<$f(j*##{d8T

literal 0
HcmV?d00001

diff --git a/cshub-client/src/components/admin/UserTable.vue b/cshub-client/src/components/admin/UserTable.vue
index 64185e3c..0160cc6c 100644
--- a/cshub-client/src/components/admin/UserTable.vue
+++ b/cshub-client/src/components/admin/UserTable.vue
@@ -14,7 +14,6 @@
                 <td class="text-xs-right">{{ props.item.lastname }}</td>
                 <td class="text-xs-right">{{ props.item.email }}</td>
                 <td class="text-xs-right">{{ props.item.admin }}</td>
-                <td class="text-xs-right">{{ props.item.avatar }}</td>
                 <td class="text-xs-right">{{ props.item.blocked }}</td>
                 <td class="text-xs-right">{{ props.item.verified }}</td>
             </template>
@@ -47,7 +46,6 @@
             {text: "Last name", value: "lastname"},
             {text: "Email", value: "email"},
             {text: "Admin", value: "admin"},
-            {text: "Avatar", value: "avatar"},
             {text: "Blocked", value: "blocked"},
             {text: "Verified", value: "verified"}
         ];
diff --git a/cshub-client/src/components/global/NavDrawer.vue b/cshub-client/src/components/global/NavDrawer.vue
index 7fa3db39..af91d936 100644
--- a/cshub-client/src/components/global/NavDrawer.vue
+++ b/cshub-client/src/components/global/NavDrawer.vue
@@ -21,6 +21,7 @@
             <router-link :to="navigationLocations.USERDASHBOARD" v-if="userLoggedInComputed"><NavDrawerItem icon="fas fa-user" text="User dashboard"></NavDrawerItem></router-link>
             <router-link :to="navigationLocations.ADMINDASHBOARD" v-if="userLoggedInComputed && userAdminComputed"><NavDrawerItem icon="fas fa-users" text="Admin dashboard"></NavDrawerItem></router-link>
             <router-link :to="navigationLocations.LOGIN" v-if="!userLoggedInComputed"><NavDrawerItem icon="fas fa-sign-in-alt" text="Login"></NavDrawerItem></router-link>
+            <NavDrawerItem v-if="userLoggedInComputed" icon="fas fa-sign-out-alt" text="Logout"></NavDrawerItem>
             <v-divider dark class="my-3"></v-divider>
             <v-layout
                     row
@@ -191,6 +192,15 @@
                     });
                 });
         }
+
+        /**
+         * Methods
+         */
+        private logout() {
+            logStringConsole("Logging user out");
+            document.cookie = "";
+            this.$router.push(Routes.INDEX);
+        }
     }
 </script>
 
diff --git a/cshub-client/src/components/posts/Post.vue b/cshub-client/src/components/posts/Post.vue
index c0611989..008ceb89 100644
--- a/cshub-client/src/components/posts/Post.vue
+++ b/cshub-client/src/components/posts/Post.vue
@@ -62,7 +62,7 @@
                                     :size="50"
                                     :class="{adminBorder: post.author.admin}"
                             >
-                                <img :src="post.author.avatar" alt="avatar">
+                                <img :src="getAvatarURL(post.author.avatar)" alt="avatar">
                             </v-avatar>
                         </v-badge>
                         <div>
@@ -265,6 +265,13 @@
         /**
          * Methods
          */
+        private getAvatarURL(dbImage: string) {
+            if (dbImage !== null) {
+                return `data:image/jpg;base64,${dbImage}`;
+            } else {
+                return "/assets/defaultAvatar.png";
+            }
+        }
         private windowHeightChanged() {
             if (this.canResize) {
                 // Calculate the right height for the postcardtext, 100px padding
diff --git a/cshub-client/src/views/router/router.ts b/cshub-client/src/views/router/router.ts
index e59c7bfc..4b1ef7a8 100644
--- a/cshub-client/src/views/router/router.ts
+++ b/cshub-client/src/views/router/router.ts
@@ -113,7 +113,6 @@ const router = new Router({
 });
 
 router.beforeEach((to: Route, from: Route, next) => {
-    next();
 
     if (!userState.hasCheckedToken) {
         ApiWrapper.sendGetRequest(new VerifyUserToken(), (verified: VerifyUserTokenCallback) => {
@@ -128,11 +127,15 @@ router.beforeEach((to: Route, from: Route, next) => {
             } else {
                 logStringConsole("User is not logged in", "isLoggedIn after API");
             }
+            next();
             userState.setCheckedToken();
 
         }, (err: AxiosError) => {
             dataState.setConnection(false);
+            next();
         });
+    } else {
+        next();
     }
 
 });
diff --git a/cshub-client/src/views/user/CreateUserAccount.vue b/cshub-client/src/views/user/CreateUserAccount.vue
index da2ac7aa..52c8f93e 100644
--- a/cshub-client/src/views/user/CreateUserAccount.vue
+++ b/cshub-client/src/views/user/CreateUserAccount.vue
@@ -7,70 +7,72 @@
                         <span>Create account</span>
                     </v-card-title>
                     <v-card-text>
-                        <v-text-field
-                                label="Email"
-                                v-model="userData.email"
-                                :error-messages="errors.collect('email') + userData.emailerror"
-                                name="email"
-                                v-validate="'required|checkTUEmail'"
-                                suffix="@student.tudelft.nl"
-                                required
-                                box
-                                @change="userData.emailerror = ''"
-                                @keyup.enter="doCreateAccount"
-                        ></v-text-field>
-                        <v-text-field
-                                label="Password"
-                                v-model="userData.password"
-                                :error-messages="errors.collect('password')"
-                                name="password"
-                                :append-icon="userData.passwordvisible ? 'fa-eye-slash' : 'fas fa-eye'"
-                                @click:append="() => (userData.passwordvisible = !userData.passwordvisible)"
-                                :type="userData.passwordvisible ? 'text' : 'password'"
-                                v-validate="'required|min:8|confirmed:password confirmation'"
-                                box
-                                required
-                                @change="userData.passworderror = ''"
-                                @keyup.enter="doCreateAccount"
-                        ></v-text-field>
-                        <v-text-field
-                                label="Confirm password"
-                                v-model="userData.confirmPassword"
-                                :error-messages="errors.collect('password confirmation')"
-                                name="password confirmation"
-                                :append-icon="userData.passwordvisible ? 'fa-eye-slash' : 'fas fa-eye'"
-                                @click:append="() => (userData.passwordvisible = !userData.passwordvisible)"
-                                :type="userData.passwordvisible ? 'text' : 'password'"
-                                v-validate="'required|min:8'"
-                                box
-                                ref="password confirmation"
-                                required
-                                @change="userData.passworderror = ''"
-                                @keyup.enter="doCreateAccount"
-                        ></v-text-field>
-                        <v-text-field
-                                label="First name"
-                                v-model="userData.firstname"
-                                :error-messages="errors.collect('firstname')"
-                                name="firstname"
-                                v-validate="'required'"
-                                required
-                                box
-                                @keyup.enter="doCreateAccount"
-                        ></v-text-field>
-                        <v-text-field
-                                label="Last name"
-                                v-model="userData.lastname"
-                                :error-messages="errors.collect('lastname')"
-                                name="lastname"
-                                v-validate="'required'"
-                                required
-                                box
-                                @keyup.enter="doCreateAccount"
-                        ></v-text-field>
-                        <div>
-                            <v-btn depressed color="primary" @click="doCreateAccount">Create account</v-btn>
-                        </div>
+                        <v-form>
+                            <v-text-field
+                                    label="Email"
+                                    v-model="userData.email"
+                                    :error-messages="errors.collect('email') + userData.emailerror"
+                                    name="email"
+                                    v-validate="'required|checkTUEmail'"
+                                    suffix="@student.tudelft.nl"
+                                    required
+                                    box
+                                    @change="userData.emailerror = ''"
+                                    @keyup.enter="doCreateAccount"
+                            ></v-text-field>
+                            <v-text-field
+                                    label="Password"
+                                    v-model="userData.password"
+                                    :error-messages="errors.collect('password')"
+                                    name="password"
+                                    :append-icon="userData.passwordvisible ? 'fa-eye-slash' : 'fas fa-eye'"
+                                    @click:append="() => (userData.passwordvisible = !userData.passwordvisible)"
+                                    :type="userData.passwordvisible ? 'text' : 'password'"
+                                    v-validate="'required|min:8|confirmed:password confirmation'"
+                                    box
+                                    required
+                                    @change="userData.passworderror = ''"
+                                    @keyup.enter="doCreateAccount"
+                            ></v-text-field>
+                            <v-text-field
+                                    label="Confirm password"
+                                    v-model="userData.confirmPassword"
+                                    :error-messages="errors.collect('password confirmation')"
+                                    name="password confirmation"
+                                    :append-icon="userData.passwordvisible ? 'fa-eye-slash' : 'fas fa-eye'"
+                                    @click:append="() => (userData.passwordvisible = !userData.passwordvisible)"
+                                    :type="userData.passwordvisible ? 'text' : 'password'"
+                                    v-validate="'required|min:8'"
+                                    box
+                                    ref="password confirmation"
+                                    required
+                                    @change="userData.passworderror = ''"
+                                    @keyup.enter="doCreateAccount"
+                            ></v-text-field>
+                            <v-text-field
+                                    label="First name"
+                                    v-model="userData.firstname"
+                                    :error-messages="errors.collect('firstname')"
+                                    name="firstname"
+                                    v-validate="'required'"
+                                    required
+                                    box
+                                    @keyup.enter="doCreateAccount"
+                            ></v-text-field>
+                            <v-text-field
+                                    label="Last name"
+                                    v-model="userData.lastname"
+                                    :error-messages="errors.collect('lastname')"
+                                    name="lastname"
+                                    v-validate="'required'"
+                                    required
+                                    box
+                                    @keyup.enter="doCreateAccount"
+                            ></v-text-field>
+                            <div>
+                                <v-btn depressed color="primary" @click="doCreateAccount">Create account</v-btn>
+                            </div>
+                        </v-form>
                     </v-card-text>
                 </v-card>
             </v-flex>
diff --git a/cshub-client/src/views/user/UserDashboard.vue b/cshub-client/src/views/user/UserDashboard.vue
index 37565f8f..2e6a6704 100644
--- a/cshub-client/src/views/user/UserDashboard.vue
+++ b/cshub-client/src/views/user/UserDashboard.vue
@@ -1,5 +1,11 @@
 <template>
     <div>
+        <v-subheader>
+            Your posts
+        </v-subheader>
+
+        <PostList :postHashes="postHashes"></PostList>
+
         <v-subheader>
             Your profile
         </v-subheader>
@@ -7,87 +13,104 @@
             <v-layout justify-center align-center>
                 <v-flex shrink>
                     <v-form>
-                        <v-text-field
-                                label="Email"
-                                v-model="userDataComputed.email"
-                                suffix="@student.tudelft.nl"
-                                box
-                                disabled
-                        ></v-text-field>
-                        <v-text-field
-                                label="First name"
-                                v-model="userDataComputed.firstname"
-                                box
-                                disabled
-                        ></v-text-field>
-                        <v-text-field
-                                label="Last name"
-                                v-model="userDataComputed.lastname"
-                                box
-                                autocomplete=""
-                                disabled
-                        ></v-text-field>
-                        <v-text-field
-                                label="Current password"
-                                v-model="userData.currentPassword"
-                                :error-messages="errors.collect('current password') + userData.currentPasswordError"
-                                name="current password"
-                                :append-icon="userData.passwordvisible ? 'fa-eye-slash' : 'fas fa-eye'"
-                                @click:append="() => (userData.passwordvisible = !userData.passwordvisible)"
-                                :type="userData.passwordvisible ? 'text' : 'password'"
-                                v-validate="'required|min:8'"
-                                box
-                                required
-                                autocomplete="current-password"
-                                @change="userData.currentPasswordError = ''"
-                                @keyup.enter="changePassword"
-                        ></v-text-field>
-                        <v-text-field
-                                label="New password"
-                                v-model="userData.newPassword"
-                                :error-messages="errors.collect('new password')"
-                                name="new password"
-                                :append-icon="userData.passwordvisible ? 'fa-eye-slash' : 'fas fa-eye'"
-                                @click:append="() => (userData.passwordvisible = !userData.passwordvisible)"
-                                :type="userData.passwordvisible ? 'text' : 'password'"
-                                v-validate="'required|min:8|confirmed:new password confirmation'"
-                                box
-                                autocomplete="new-password"
-                                required
-                                @keyup.enter="changePassword"
-                        ></v-text-field>
-                        <v-text-field
-                                label="Confirm new password"
-                                v-model="userData.confirmNewPassword"
-                                :error-messages="errors.collect('new password confirmation')"
-                                name="new password confirmation"
-                                :append-icon="userData.passwordvisible ? 'fa-eye-slash' : 'fas fa-eye'"
-                                @click:append="() => (userData.passwordvisible = !userData.passwordvisible)"
-                                :type="userData.passwordvisible ? 'text' : 'password'"
-                                v-validate="'required|min:8'"
-                                box
-                                required
-                                autocomplete="new-password"
-                                ref="new password confirmation"
-                                @keyup.enter="changePassword"
-                        ></v-text-field>
-                        <v-btn color="primary" depressed dark @click="changePassword">Change password</v-btn>
+                        <v-card class="ma-2">
+                            <v-card-text>
+                                <v-text-field
+                                        label="Email"
+                                        v-model="userDataComputed.email"
+                                        suffix="@student.tudelft.nl"
+                                        box
+                                        disabled
+                                ></v-text-field>
+                                <v-text-field
+                                        label="First name"
+                                        v-model="userDataComputed.firstname"
+                                        box
+                                        disabled
+                                ></v-text-field>
+                                <v-text-field
+                                        label="Last name"
+                                        v-model="userDataComputed.lastname"
+                                        box
+                                        autocomplete=""
+                                        disabled
+                                ></v-text-field>
+                            </v-card-text>
+                        </v-card>
+                        <v-card class="ma-2">
+                            <v-card-text>
+                                <v-text-field
+                                        label="Current password"
+                                        v-model="userData.currentPassword"
+                                        :error-messages="errors.collect('current password') + userData.currentPasswordError"
+                                        name="current password"
+                                        :append-icon="userData.passwordvisible ? 'fa-eye-slash' : 'fas fa-eye'"
+                                        @click:append="() => (userData.passwordvisible = !userData.passwordvisible)"
+                                        :type="userData.passwordvisible ? 'text' : 'password'"
+                                        v-validate="'required|min:8'"
+                                        box
+                                        required
+                                        autocomplete="current-password"
+                                        @change="userData.currentPasswordError = ''"
+                                        @keyup.enter="changePassword"
+                                ></v-text-field>
+                                <v-text-field
+                                        label="New password"
+                                        v-model="userData.newPassword"
+                                        :error-messages="errors.collect('new password')"
+                                        name="new password"
+                                        :append-icon="userData.passwordvisible ? 'fa-eye-slash' : 'fas fa-eye'"
+                                        @click:append="() => (userData.passwordvisible = !userData.passwordvisible)"
+                                        :type="userData.passwordvisible ? 'text' : 'password'"
+                                        v-validate="'required|min:8|confirmed:new password confirmation'"
+                                        box
+                                        autocomplete="new-password"
+                                        required
+                                        @keyup.enter="changePassword"
+                                ></v-text-field>
+                                <v-text-field
+                                        label="Confirm new password"
+                                        v-model="userData.confirmNewPassword"
+                                        :error-messages="errors.collect('new password confirmation')"
+                                        name="new password confirmation"
+                                        :append-icon="userData.passwordvisible ? 'fa-eye-slash' : 'fas fa-eye'"
+                                        @click:append="() => (userData.passwordvisible = !userData.passwordvisible)"
+                                        :type="userData.passwordvisible ? 'text' : 'password'"
+                                        v-validate="'required|min:8'"
+                                        box
+                                        required
+                                        autocomplete="new-password"
+                                        ref="new password confirmation"
+                                        @keyup.enter="changePassword"
+                                ></v-text-field>
+                                <v-btn color="primary" depressed dark @click="changePassword">Change password</v-btn>
+                            </v-card-text>
+                        </v-card>
+                        <v-card class="ma-2">
+                            <v-card-text>
+                                <img :src="imageBase64" height="150" v-if="imageBase64"/>
+                                <v-text-field label="Select Image" v-model="imageName" @click='pickFile' prepend-icon='fas fa-paperclip' hint="It might be that others don't see your avatar being updated, that's because it's cached and avatars aren't really that important..." persistent-hint></v-text-field>
+                                <input
+                                        type="file"
+                                        style="display: none"
+                                        ref="image"
+                                        accept="image/*"
+                                        @change="onFilePicked"
+                                >
+                                <v-btn color="primary" class="mt-3" depressed dark @click="changeAvatar">Change avatar</v-btn>
+                            </v-card-text>
+                        </v-card>
                     </v-form>
                 </v-flex>
             </v-layout>
         </v-container>
-
-        <v-subheader>
-            Your posts
-        </v-subheader>
-
-        <PostList :postHashes="postHashes"></PostList>
     </div>
 </template>
 
 <script lang="ts">
     import Vue from "vue";
     import {Component} from "vue-property-decorator";
+    import localForage from "localforage";
 
     import PostList from "../../components/posts/PostList.vue";
 
@@ -95,13 +118,18 @@
 
     import {ApiWrapper, logObjectConsole, logStringConsole} from "../../utilities";
     import {
-        GetUserPostsCallback,
-        ChangeUserPasswordCallback,
         ChangeUserPassword,
+        ChangeUserPasswordCallback,
         ChangeUserPasswordReponseTypes,
-        GetUserPosts
+        GetUserPosts,
+        GetUserPostsCallback
     } from "../../../../cshub-shared/api-calls/pages/user";
-    import {IUser} from "../../../../cshub-shared/models";
+    import {IPost, IUser} from "../../../../cshub-shared/models";
+    import {
+        ChangeUserAvatar,
+        ChangeUserAvatarCallback,
+        ChangeUserAvatarReponseTypes
+    } from "../../../../cshub-shared/api-calls/pages/user/ChangeUserAvatar";
 
     @Component({
         name: "UserDashboard",
@@ -119,8 +147,10 @@
             currentPasswordError: "",
             newPassword: "",
             confirmNewPassword: "",
-            passwordvisible: false
+            passwordvisible: false,
         };
+        private imageBase64 = "";
+        private imageName = "";
 
         /**
          * Computed properties
@@ -139,6 +169,26 @@
         /**
          * Methods
          */
+        private pickFile() {
+            (this.$refs.image as any).click();
+        }
+
+        private onFilePicked(e: Event) {
+            const files: FileList = (e.target as any).files;
+
+            if (files[0] !== undefined) {
+                this.imageName = files[0].name;
+                const fr = new FileReader();
+                fr.readAsDataURL(files[0]);
+                fr.addEventListener("load", () => {
+                    this.imageBase64 = fr.result.toString();
+                });
+            } else {
+                this.imageName = "";
+                this.imageBase64 = null;
+            }
+        }
+
         private getHashes() {
             ApiWrapper.sendPostRequest(new GetUserPosts(), (callbackData: GetUserPostsCallback) => {
                 this.postHashes = callbackData.postHashes;
@@ -146,6 +196,30 @@
             });
         }
 
+        private changeAvatar() {
+            ApiWrapper.sendPostRequest(new ChangeUserAvatar(this.imageBase64), (callback: ChangeUserAvatarCallback) => {
+                if (callback.response === ChangeUserAvatarReponseTypes.SUCCESS) {
+                    logStringConsole("User changed avatar");
+                    localForage.keys()
+                        .then((keys: string[]) => {
+                            for (const key of keys) {
+                                if (key.slice(0, 5) === "POST_") {
+                                    localForage.getItem<IPost>(key)
+                                        .then((post: IPost) => {
+                                            if (post.author.id === userState.userModel.id) {
+                                                post.author.avatar = callback.newAvatar;
+                                                localForage.setItem<IPost>(key, post);
+                                            }
+                                        });
+                                }
+                            }
+                        });
+                } else if (callback.response === ChangeUserAvatarReponseTypes.INVALIDIMAGE) {
+                    // Perhaps do something
+                }
+            });
+        }
+
         private changePassword() {
             ApiWrapper.sendPostRequest(new ChangeUserPassword(this.userData.currentPassword, this.userData.newPassword), (callBack: ChangeUserPasswordCallback) => {
                 if (callBack.response === ChangeUserPasswordReponseTypes.SUCCESS) {
diff --git a/cshub-server/package-lock.json b/cshub-server/package-lock.json
index 6cd9f038..d39737d8 100644
--- a/cshub-server/package-lock.json
+++ b/cshub-server/package-lock.json
@@ -236,6 +236,20 @@
         "normalize-path": "^2.1.1"
       }
     },
+    "aproba": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
+      "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw=="
+    },
+    "are-we-there-yet": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
+      "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
+      "requires": {
+        "delegates": "^1.0.0",
+        "readable-stream": "^2.0.6"
+      }
+    },
     "argparse": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
@@ -418,6 +432,15 @@
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.12.0.tgz",
       "integrity": "sha512-DYWGk01lDcxeS/K9IHPGWfT8PsJmbXRtRd2Sx72Tnb8pcYZQFF1oSDb8hJtS1vhp212q1Rzi5dUf9+nq0o9UIg=="
     },
+    "bl": {
+      "version": "1.2.2",
+      "resolved": "http://registry.npmjs.org/bl/-/bl-1.2.2.tgz",
+      "integrity": "sha512-e8tQYnZodmebYDWGH7KMRvtzKXaJHx3BbilrgZCfvyLUYdKpK1t5PSPmpkny/SgiTSCnjfLW7v5rlONXVFkQEA==",
+      "requires": {
+        "readable-stream": "^2.3.5",
+        "safe-buffer": "^5.1.1"
+      }
+    },
     "body-parser": {
       "version": "1.18.3",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.3.tgz",
@@ -492,11 +515,30 @@
         }
       }
     },
+    "buffer-alloc": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/buffer-alloc/-/buffer-alloc-1.2.0.tgz",
+      "integrity": "sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==",
+      "requires": {
+        "buffer-alloc-unsafe": "^1.1.0",
+        "buffer-fill": "^1.0.0"
+      }
+    },
+    "buffer-alloc-unsafe": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz",
+      "integrity": "sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg=="
+    },
     "buffer-equal-constant-time": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
       "integrity": "sha1-+OcRMvf/5uAaXJaXpMbz5I1cyBk="
     },
+    "buffer-fill": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/buffer-fill/-/buffer-fill-1.0.0.tgz",
+      "integrity": "sha1-+PeLdniYiO858gXNY39o5wISKyw="
+    },
     "buffer-from": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
@@ -601,6 +643,11 @@
         "upath": "^1.0.5"
       }
     },
+    "chownr": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.1.tgz",
+      "integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g=="
+    },
     "ci-info": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-1.6.0.tgz",
@@ -637,6 +684,11 @@
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
       "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ="
     },
+    "code-point-at": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
+      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
+    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -732,6 +784,11 @@
         "xdg-basedir": "^3.0.0"
       }
     },
+    "console-control-strings": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
+    },
     "content-disposition": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
@@ -829,6 +886,14 @@
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
       "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
     },
+    "decompress-response": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz",
+      "integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=",
+      "requires": {
+        "mimic-response": "^1.0.0"
+      }
+    },
     "deep-equal": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
@@ -887,6 +952,11 @@
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
     },
+    "delegates": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o="
+    },
     "denque": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/denque/-/denque-1.3.0.tgz",
@@ -902,6 +972,11 @@
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
       "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
     },
+    "detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups="
+    },
     "diagnostics": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/diagnostics/-/diagnostics-1.1.1.tgz",
@@ -970,6 +1045,14 @@
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
     },
+    "end-of-stream": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
+      "integrity": "sha512-1MkrZNvWTKCaigbn+W15elq2BB/L22nqrSY5DKlo3X6+vclJm8Bb5djXJBmEX6fS3+zCh/F4VBK5Z2KxJt4s2Q==",
+      "requires": {
+        "once": "^1.4.0"
+      }
+    },
     "env-variable": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/env-variable/-/env-variable-0.0.5.tgz",
@@ -1061,6 +1144,11 @@
         }
       }
     },
+    "expand-template": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-1.1.1.tgz",
+      "integrity": "sha512-cebqLtV8KOZfw0UI8TEFWxtczxxC1jvyUvx6H4fyp1K1FN7A4Q+uggVUlOsI1K8AGU0rwOGqP8nCapdrw8CYQg=="
+    },
     "express": {
       "version": "4.16.3",
       "resolved": "http://registry.npmjs.org/express/-/express-4.16.3.tgz",
@@ -1363,6 +1451,24 @@
       "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
       "integrity": "sha1-g8YK/Fi5xWmXAH7Rp2izqzA6RP4="
     },
+    "fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow=="
+    },
+    "fs-copy-file-sync": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/fs-copy-file-sync/-/fs-copy-file-sync-1.1.1.tgz",
+      "integrity": "sha512-2QY5eeqVv4m2PfyMiEuy9adxNP+ajf+8AR05cEi+OAzPcOj90hvFImeZhTmKLBgSd9EvG33jsD7ZRxsx9dThkQ=="
+    },
+    "fs-minipass": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.5.tgz",
+      "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==",
+      "requires": {
+        "minipass": "^2.2.1"
+      }
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -1420,7 +1526,8 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
@@ -1531,7 +1638,8 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -1541,6 +1649,7 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -1652,7 +1761,8 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -1767,6 +1877,7 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -1830,6 +1941,41 @@
         }
       }
     },
+    "gauge": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
+      "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
+      "requires": {
+        "aproba": "^1.0.3",
+        "console-control-strings": "^1.0.0",
+        "has-unicode": "^2.0.0",
+        "object-assign": "^4.1.0",
+        "signal-exit": "^3.0.0",
+        "string-width": "^1.0.1",
+        "strip-ansi": "^3.0.1",
+        "wide-align": "^1.1.0"
+      },
+      "dependencies": {
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "requires": {
+            "number-is-nan": "^1.0.0"
+          }
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "requires": {
+            "code-point-at": "^1.0.0",
+            "is-fullwidth-code-point": "^1.0.0",
+            "strip-ansi": "^3.0.0"
+          }
+        }
+      }
+    },
     "generate-function": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.3.1.tgz",
@@ -1856,6 +2002,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "github-from-package": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
+      "integrity": "sha1-l/tdlr/eiXMxPyDoKI75oWf6ZM4="
+    },
     "glob": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
@@ -1946,6 +2097,11 @@
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
     },
+    "has-unicode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk="
+    },
     "has-value": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
@@ -2524,6 +2680,11 @@
         "mime-db": "~1.36.0"
       }
     },
+    "mimic-response": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
+      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ=="
+    },
     "minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -2537,6 +2698,35 @@
       "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
       "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
     },
+    "minipass": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz",
+      "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
+      "requires": {
+        "safe-buffer": "^5.1.2",
+        "yallist": "^3.0.0"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
+        "yallist": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.2.tgz",
+          "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k="
+        }
+      }
+    },
+    "minizlib": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.1.1.tgz",
+      "integrity": "sha512-TrfjCjk4jLhcJyGMYymBH6oTXcWjYbUAXTHDbtnWHjZC25h0cdajHuPE1zxb4DVmu8crfh+HwH/WMuyLG0nHBg==",
+      "requires": {
+        "minipass": "^2.2.1"
+      }
+    },
     "mixin-deep": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.1.tgz",
@@ -2560,7 +2750,6 @@
       "version": "0.5.1",
       "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
       "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
-      "dev": true,
       "requires": {
         "minimist": "0.0.8"
       },
@@ -2568,8 +2757,7 @@
         "minimist": {
           "version": "0.0.8",
           "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "dev": true
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
         }
       }
     },
@@ -2613,8 +2801,7 @@
     "nan": {
       "version": "2.11.1",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.11.1.tgz",
-      "integrity": "sha512-iji6k87OSXa0CcrLl9z+ZiYSuR2o+c0bGuNmXdrhTQTakxytAFsC56SArGYoiHlJlFoHSnvmhpceZJaXkVuOtA==",
-      "optional": true
+      "integrity": "sha512-iji6k87OSXa0CcrLl9z+ZiYSuR2o+c0bGuNmXdrhTQTakxytAFsC56SArGYoiHlJlFoHSnvmhpceZJaXkVuOtA=="
     },
     "nanomatch": {
       "version": "1.2.13",
@@ -2634,11 +2821,24 @@
         "to-regex": "^3.0.1"
       }
     },
+    "napi-build-utils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.1.tgz",
+      "integrity": "sha512-boQj1WFgQH3v4clhu3mTNfP+vOBxorDlE8EKiMjUlLG3C4qAESnn9AxIOkFgTR2c9LtzNjPrjS60cT27ZKBhaA=="
+    },
     "negotiator": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
       "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk="
     },
+    "node-abi": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-2.5.0.tgz",
+      "integrity": "sha512-9g2twBGSP6wIR5PW7tXvAWnEWKJDH/VskdXp168xsw9VVxpEGov8K4jsP4/VeoC7b2ZAyzckvMCuQuQlw44lXg==",
+      "requires": {
+        "semver": "^5.4.1"
+      }
+    },
     "nodemailer": {
       "version": "4.6.8",
       "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-4.6.8.tgz",
@@ -2684,6 +2884,11 @@
         }
       }
     },
+    "noop-logger": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/noop-logger/-/noop-logger-0.1.1.tgz",
+      "integrity": "sha1-lKKxYzxPExdVMAfYlm/Q6EG2pMI="
+    },
     "nopt": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
@@ -2708,6 +2913,22 @@
         "path-key": "^2.0.0"
       }
     },
+    "npmlog": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
+      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
+      "requires": {
+        "are-we-there-yet": "~1.1.2",
+        "console-control-strings": "~1.1.0",
+        "gauge": "~2.7.3",
+        "set-blocking": "~2.0.0"
+      }
+    },
+    "number-is-nan": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
+      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
+    },
     "oauth-sign": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
@@ -2783,6 +3004,11 @@
       "resolved": "https://registry.npmjs.org/one-time/-/one-time-0.0.4.tgz",
       "integrity": "sha1-+M33eISCb+Tf+T46nMN7HkSAdC4="
     },
+    "os-homedir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M="
+    },
     "p-finally": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
@@ -2862,6 +3088,41 @@
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
       "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs="
     },
+    "prebuild-install": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-5.2.1.tgz",
+      "integrity": "sha512-9DAccsInWHB48TBQi2eJkLPE049JuAI6FjIH0oIrij4bpDVEbX6JvlWRAcAAlUqBHhjgq0jNqA3m3bBXWm9v6w==",
+      "requires": {
+        "detect-libc": "^1.0.3",
+        "expand-template": "^1.0.2",
+        "github-from-package": "0.0.0",
+        "minimist": "^1.2.0",
+        "mkdirp": "^0.5.1",
+        "napi-build-utils": "^1.0.1",
+        "node-abi": "^2.2.0",
+        "noop-logger": "^0.1.1",
+        "npmlog": "^4.0.1",
+        "os-homedir": "^1.0.1",
+        "pump": "^2.0.1",
+        "rc": "^1.2.7",
+        "simple-get": "^2.7.0",
+        "tar-fs": "^1.13.0",
+        "tunnel-agent": "^0.6.0",
+        "which-pm-runs": "^1.0.0"
+      },
+      "dependencies": {
+        "simple-get": {
+          "version": "2.8.1",
+          "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-2.8.1.tgz",
+          "integrity": "sha512-lSSHRSw3mQNUGPAYRqo7xy9dhKmxFXIjLjp4KHpf99GEH2VH7C3AM+Qfx6du6jhfUi6Vm7XnbEVEf7Wb6N8jRw==",
+          "requires": {
+            "decompress-response": "^3.3.0",
+            "once": "^1.3.1",
+            "simple-concat": "^1.0.0"
+          }
+        }
+      }
+    },
     "prepend-http": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
@@ -2907,6 +3168,15 @@
         "ps-tree": "^1.1.0"
       }
     },
+    "pump": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
+      "integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==",
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
     "punycode": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
@@ -3152,6 +3422,11 @@
         "send": "0.16.2"
       }
     },
+    "set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
+    },
     "set-value": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.0.tgz",
@@ -3178,6 +3453,23 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
       "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
     },
+    "sharp": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.21.0.tgz",
+      "integrity": "sha512-qr6yMl0ju8EGMtjIj5U1Ojj8sKuZ99/DQaNKWmoFHxqg3692AFSrEiPI/yr0O05OWtGD8LuCw8WSGmnZcNrZaA==",
+      "requires": {
+        "color": "^3.0.0",
+        "detect-libc": "^1.0.3",
+        "fs-copy-file-sync": "^1.1.1",
+        "nan": "^2.11.1",
+        "npmlog": "^4.1.2",
+        "prebuild-install": "^5.2.0",
+        "semver": "^5.5.1",
+        "simple-get": "^3.0.3",
+        "tar": "^4.4.6",
+        "tunnel-agent": "^0.6.0"
+      }
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -3196,6 +3488,21 @@
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
       "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="
     },
+    "simple-concat": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.0.tgz",
+      "integrity": "sha1-c0TLuLbib7J9ZrL8hvn21Zl1IcY="
+    },
+    "simple-get": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.0.3.tgz",
+      "integrity": "sha512-Wvre/Jq5vgoz31Z9stYWPLn0PqRqmBDpFSdypAnHu5AvRVCYPRYGnvryNLiXu8GOBNDH82J2FRHUGMjjHUpXFw==",
+      "requires": {
+        "decompress-response": "^3.3.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
     "simple-swizzle": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
@@ -3497,6 +3804,68 @@
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
       "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
     },
+    "tar": {
+      "version": "4.4.7",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.7.tgz",
+      "integrity": "sha512-mR3MzsCdN0IEWjZRuF/J9gaWHnTwOvzjqPTcvi1xXgfKTDQRp39gRETPQEfPByAdEOGmZfx1HrRsn8estaEvtA==",
+      "requires": {
+        "chownr": "^1.1.1",
+        "fs-minipass": "^1.2.5",
+        "minipass": "^2.3.4",
+        "minizlib": "^1.1.1",
+        "mkdirp": "^0.5.0",
+        "safe-buffer": "^5.1.2",
+        "yallist": "^3.0.2"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
+        "yallist": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.2.tgz",
+          "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k="
+        }
+      }
+    },
+    "tar-fs": {
+      "version": "1.16.3",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-1.16.3.tgz",
+      "integrity": "sha512-NvCeXpYx7OsmOh8zIOP/ebG55zZmxLE0etfWRbWok+q2Qo8x/vOR/IJT1taADXPe+jsiu9axDb3X4B+iIgNlKw==",
+      "requires": {
+        "chownr": "^1.0.1",
+        "mkdirp": "^0.5.1",
+        "pump": "^1.0.0",
+        "tar-stream": "^1.1.2"
+      },
+      "dependencies": {
+        "pump": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/pump/-/pump-1.0.3.tgz",
+          "integrity": "sha512-8k0JupWme55+9tCVE+FS5ULT3K6AbgqrGa58lTT49RpyfwwcGedHqaC5LlQNdEAumn/wFsu6aPwkuPMioy8kqw==",
+          "requires": {
+            "end-of-stream": "^1.1.0",
+            "once": "^1.3.1"
+          }
+        }
+      }
+    },
+    "tar-stream": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-1.6.2.tgz",
+      "integrity": "sha512-rzS0heiNf8Xn7/mpdSVVSMAWAoy9bfb1WOTYC78Z0UQKeKa/CWS8FOq0lKGNa8DWKAn9gxjCvMLYc5PGXYlK2A==",
+      "requires": {
+        "bl": "^1.0.0",
+        "buffer-alloc": "^1.2.0",
+        "end-of-stream": "^1.0.0",
+        "fs-constants": "^1.0.0",
+        "readable-stream": "^2.3.0",
+        "to-buffer": "^1.1.1",
+        "xtend": "^4.0.0"
+      }
+    },
     "term-size": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz",
@@ -3520,6 +3889,11 @@
       "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz",
       "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8="
     },
+    "to-buffer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/to-buffer/-/to-buffer-1.1.1.tgz",
+      "integrity": "sha512-lx9B5iv7msuFYE3dytT+KE5tap+rNYw+K4jVkb9R/asAb+pbBSM17jtunHplhBe6RRJdZx3Pn2Jph24O32mOVg=="
+    },
     "to-object-path": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
@@ -3828,6 +4202,19 @@
         "isexe": "^2.0.0"
       }
     },
+    "which-pm-runs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/which-pm-runs/-/which-pm-runs-1.0.0.tgz",
+      "integrity": "sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs="
+    },
+    "wide-align": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
+      "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
+      "requires": {
+        "string-width": "^1.0.2 || 2"
+      }
+    },
     "widest-line": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-2.0.0.tgz",
@@ -3881,6 +4268,11 @@
       "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-3.0.0.tgz",
       "integrity": "sha1-SWsswQnsqNus/i3HK2A8F8WHCtQ="
     },
+    "xtend": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
+      "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68="
+    },
     "yallist": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
diff --git a/cshub-server/package.json b/cshub-server/package.json
index ecc692a3..bb0aecd2 100644
--- a/cshub-server/package.json
+++ b/cshub-server/package.json
@@ -11,12 +11,13 @@
     "body-parser": "^1.18.3",
     "cookie-parser": "^1.4.3",
     "cors": "^2.8.4",
+    "dayjs": "^1.7.7",
     "express": "^4.16.2",
     "jsonwebtoken": "^8.3.0",
-    "dayjs": "^1.7.7",
     "mysql2": "^1.6.1",
     "nodemailer": "^4.6.8",
     "nodemon": "^1.18.4",
+    "sharp": "^0.21.0",
     "ssh2": "^0.6.1",
     "tslint": "^5.11.0",
     "winston": "^3.1.0"
diff --git a/cshub-server/src/auth/JWTHandler.ts b/cshub-server/src/auth/JWTHandler.ts
index 74bd34ab..59de5bbf 100644
--- a/cshub-server/src/auth/JWTHandler.ts
+++ b/cshub-server/src/auth/JWTHandler.ts
@@ -9,8 +9,11 @@ import {Settings} from "../settings";
 // Sign the object, add the expirydate of 2 hours and then convert to unix timeformat
 export const sign = (obj: IUser): string => {
 
+    let newObj: IUser = JSON.parse(JSON.stringify(obj));
+    newObj.avatar = "";
+
     const jwtobj: IJWTToken = {
-        user: obj,
+        user: newObj,
         expirydate: dayjs().add(Settings.TOKENAGEMILLISECONDS, "millisecond").unix()
     };
 
diff --git a/cshub-server/src/components/account/CreateAccount.ts b/cshub-server/src/components/account/CreateAccount.ts
index bc0e049b..cfa86728 100644
--- a/cshub-server/src/components/account/CreateAccount.ts
+++ b/cshub-server/src/components/account/CreateAccount.ts
@@ -33,6 +33,7 @@ app.post(CreateAccount.getURL, (req: Request, res: Response) => {
                 if (result.getRows().length === 0) {
                     hashPassword(createAccountRequest.password)
                         .then((hashedValue: string) => {
+
                             query(`
                             INSERT INTO users
                             SET email = ?, password = ?, firstname = ?, lastname = ?
diff --git a/cshub-server/src/components/account/Login.ts b/cshub-server/src/components/account/Login.ts
index bcc96cca..2aa2a09f 100644
--- a/cshub-server/src/components/account/Login.ts
+++ b/cshub-server/src/components/account/Login.ts
@@ -22,7 +22,7 @@ app.post(Login.getURL, (req: Request, res: Response) => {
         hashPassword(loginRequest.password)
             .then((hashedValue: string) => {
                 query(`
-                SELECT email, id, firstname, lastname, admin, blocked, verified, password, avatar
+                SELECT email, id, firstname, lastname, admin, blocked, verified, password
                 FROM users
                 WHERE email = ?
                 `, loginRequest.email)
@@ -46,7 +46,7 @@ app.post(Login.getURL, (req: Request, res: Response) => {
                                     verified: result.getNumberFromDB("verified") === 1,
                                     firstname: result.getStringFromDB("firstname"),
                                     lastname: result.getStringFromDB("lastname"),
-                                    avatar: result.getStringFromDB("avatar")
+                                    avatar: ""
                                 };
 
                                 const jwt = sign(userModel);
diff --git a/cshub-server/src/components/pages/GetEditContent.ts b/cshub-server/src/components/pages/GetEditContent.ts
index b464b9c5..37746123 100644
--- a/cshub-server/src/components/pages/GetEditContent.ts
+++ b/cshub-server/src/components/pages/GetEditContent.ts
@@ -54,7 +54,7 @@ app.post(GetEditContent.getURL, (req: Request, res: Response) => {
                                         id: edit.getNumberFromDB("authorId"),
                                         firstname: edit.getStringFromDB("authorFirstName"),
                                         lastname: edit.getStringFromDB("authorLastName"),
-                                        avatar: edit.getStringFromDB("authorAvatar"),
+                                        avatar: "",
                                         admin: edit.getNumberFromDB("authorAdmin") === 1
                                     },
                                     id: edit.getNumberFromDB("id"),
diff --git a/cshub-server/src/components/pages/GetPost.ts b/cshub-server/src/components/pages/GetPost.ts
index 2e5e69e5..7b1163af 100644
--- a/cshub-server/src/components/pages/GetPost.ts
+++ b/cshub-server/src/components/pages/GetPost.ts
@@ -79,6 +79,10 @@ export const getPostData = (postHash: number): Promise<GetPostCallBack> => {
                 postVersion: post.getNumberFromDB("postVersion")
             };
 
+            if (postBase.author.avatar !== null) {
+                postBase.author.avatar = Buffer.from(postBase.author.avatar).toString("base64");
+            }
+
             return new GetPostCallBack(postBase);
         })
         .catch(err => {
diff --git a/cshub-server/src/components/pages/admin/GetAllUsers.ts b/cshub-server/src/components/pages/admin/GetAllUsers.ts
index 34fda7b4..9719f6f4 100644
--- a/cshub-server/src/components/pages/admin/GetAllUsers.ts
+++ b/cshub-server/src/components/pages/admin/GetAllUsers.ts
@@ -14,7 +14,7 @@ app.post(GetAllUsers.getURL, (req: Request, res: Response) => {
     if (token.valid && token.tokenObj.user.admin) {
 
         query(`
-        SELECT id, email, firstname, lastname, blocked, verified, admin, avatar
+        SELECT id, email, firstname, lastname, blocked, verified, admin
         FROM users
         LIMIT ?, ?
         `, (getAllUsersRequest.page - 1) * getAllUsersRequest.rowsPerPage, getAllUsersRequest.rowsPerPage)
@@ -28,7 +28,7 @@ app.post(GetAllUsers.getURL, (req: Request, res: Response) => {
                         admin: userRow.getNumberFromDB("admin") === 1,
                         firstname: userRow.getStringFromDB("firstname"),
                         lastname: userRow.getStringFromDB("lastname"),
-                        avatar: userRow.getStringFromDB("avatar"),
+                        avatar: "",
                         email: userRow.getStringFromDB("email"),
                         blocked: userRow.getNumberFromDB("blocked") === 1,
                         verified: userRow.getNumberFromDB("verified") === 1
diff --git a/cshub-server/src/components/pages/user/ChangeUserAvatar.ts b/cshub-server/src/components/pages/user/ChangeUserAvatar.ts
new file mode 100644
index 00000000..6fc29a12
--- /dev/null
+++ b/cshub-server/src/components/pages/user/ChangeUserAvatar.ts
@@ -0,0 +1,51 @@
+import {app} from "../../../";
+import {
+    ChangeUserAvatar,
+    ChangeUserAvatarCallback,
+    ChangeUserAvatarReponseTypes
+} from "../../../../../cshub-shared/api-calls";
+import {Request, Response} from "express";
+import {checkTokenValidity} from "../../../auth/AuthMiddleware";
+import sharp from "sharp";
+import {query} from "../../../utilities/DatabaseConnection";
+
+app.post(ChangeUserAvatar.getURL, (req: Request, res: Response) => {
+
+    const userDashboardChangeAvatarRequest = req.body as ChangeUserAvatar;
+
+    const token = checkTokenValidity(req);
+
+    if (token.valid) {
+
+        const base64stripped = userDashboardChangeAvatarRequest.imageb64.replace(/data:image\/(.+);base64,/, "");
+
+        const imageBuff = Buffer.from(base64stripped, "base64");
+
+        let bufferData;
+
+        sharp(imageBuff)
+            .resize({
+                width: 100
+            })
+            .jpeg({
+                quality: 40
+            })
+            .toBuffer()
+            .then((bufferDataJPG) => {
+                bufferData = bufferDataJPG;
+                return query(`
+                    UPDATE users
+                    SET avatar = ?
+                    WHERE id = ?
+                `, bufferData, token.tokenObj.user.id)
+            })
+            .then(() => {
+                res.json(new ChangeUserAvatarCallback(ChangeUserAvatarReponseTypes.SUCCESS, Buffer.from(bufferData).toString("base64")));
+            })
+            .catch(() => {
+                res.json(new ChangeUserAvatarCallback(ChangeUserAvatarReponseTypes.INVALIDIMAGE));
+            });
+    } else {
+        res.status(401).send();
+    }
+});
diff --git a/cshub-server/src/components/pages/user/index.ts b/cshub-server/src/components/pages/user/index.ts
index 82e94509..0dae0ba0 100644
--- a/cshub-server/src/components/pages/user/index.ts
+++ b/cshub-server/src/components/pages/user/index.ts
@@ -1,2 +1,3 @@
 import "./GetUserPosts";
 import "./ChangeUserPassword";
+import "./ChangeUserAvatar";
diff --git a/cshub-shared/api-calls/AuthRequests.ts b/cshub-shared/api-calls/AuthRequests.ts
index eb5738a8..5fbf2f15 100644
--- a/cshub-shared/api-calls/AuthRequests.ts
+++ b/cshub-shared/api-calls/AuthRequests.ts
@@ -3,6 +3,7 @@ export class AuthRequests {
 
     public static readonly DASHBOARD: string = "/1/dashboard";
     public static readonly CHANGEPASSWORD: string = "/1/changepassword";
+    public static readonly CHANGEAVATAR: string = "/1/changeavatar";
     public static readonly SUBMITPOST: string = "/1/submitpost";
     public static readonly EDITPOST: string = "/1/editpost";
     public static readonly EDITCONTENT: string = "/1/editcontent";
diff --git a/cshub-shared/api-calls/pages/user/ChangeUserAvatar.ts b/cshub-shared/api-calls/pages/user/ChangeUserAvatar.ts
new file mode 100644
index 00000000..7a9db41d
--- /dev/null
+++ b/cshub-shared/api-calls/pages/user/ChangeUserAvatar.ts
@@ -0,0 +1,24 @@
+import {IApiRequest} from "../../../models/IApiRequest";
+
+import {AuthRequests} from "../../AuthRequests";
+
+export enum ChangeUserAvatarReponseTypes {
+    SUCCESS,
+    INVALIDIMAGE
+}
+
+export class ChangeUserAvatarCallback {
+
+    constructor(
+        public response: ChangeUserAvatarReponseTypes,
+        public newAvatar?: string
+    ) {}
+}
+
+export class ChangeUserAvatar implements IApiRequest {
+
+    public static getURL: string = AuthRequests.CHANGEAVATAR;
+    public URL: string = ChangeUserAvatar.getURL;
+
+    constructor(public imageb64: string) {}
+}
diff --git a/cshub-shared/api-calls/pages/user/index.ts b/cshub-shared/api-calls/pages/user/index.ts
index fc6772c8..3c0461b4 100644
--- a/cshub-shared/api-calls/pages/user/index.ts
+++ b/cshub-shared/api-calls/pages/user/index.ts
@@ -1,2 +1,4 @@
 export * from "./GetUserPosts";
 export * from "./ChangeUserPassword";
+export * from "./ChangeUserAvatar";
+
diff --git a/cshub-shared/package-lock.json b/cshub-shared/package-lock.json
index dae8d4c7..258f06af 100644
--- a/cshub-shared/package-lock.json
+++ b/cshub-shared/package-lock.json
@@ -4,6 +4,11 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@types/node": {
+      "version": "10.12.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.2.tgz",
+      "integrity": "sha512-53ElVDSnZeFUUFIYzI8WLQ25IhWzb6vbddNp8UHlXQyU0ET2RhV5zg0NfubzU7iNMh5bBXb0htCzfvrSVNgzaQ=="
+    },
     "dayjs": {
       "version": "1.7.7",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.7.7.tgz",
diff --git a/cshub-shared/package.json b/cshub-shared/package.json
index 215aa417..ff7c4f6a 100644
--- a/cshub-shared/package.json
+++ b/cshub-shared/package.json
@@ -4,5 +4,8 @@
   "devDependencies": {
     "quill-delta": "^4.1.0",
     "dayjs": "^1.7.7"
+  },
+  "dependencies": {
+    "@types/node": "^10.12.2"
   }
 }

From 957764aec023f4b5777befb1724747e164b96d99 Mon Sep 17 00:00:00 2001
From: RobbinBaauw <robbin.baauw@gmail.com>
Date: Tue, 6 Nov 2018 21:53:11 +0100
Subject: [PATCH 07/10] Bugfix on edit list

---
 cshub-client/src/components/posts/Post.vue            |  6 ++++--
 cshub-client/src/components/posts/PostEditsDialog.vue | 10 +++++++---
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/cshub-client/src/components/posts/Post.vue b/cshub-client/src/components/posts/Post.vue
index 008ceb89..26e377c9 100644
--- a/cshub-client/src/components/posts/Post.vue
+++ b/cshub-client/src/components/posts/Post.vue
@@ -119,7 +119,7 @@
                     style="width: 100%; margin: 10% auto;"
             ></v-progress-circular>
         </div>
-        <PostEditsDialog :postHash="postHash"></PostEditsDialog>
+        <PostEditsDialog :key="postHash":postHash="postHash"></PostEditsDialog>
     </div>
 </template>
 
@@ -453,7 +453,9 @@
         }
 
         private viewEditDialog() {
-            this.$router.push(`${this.currentPostURLComputed}/edits`);
+            if (this.$route.fullPath !== `${this.currentPostURLComputed}/edits`) {
+                this.$router.push(`${this.currentPostURLComputed}/edits`);
+            }
             uiState.setEditDialogState({
                 on: true,
                 hash: this.postHash
diff --git a/cshub-client/src/components/posts/PostEditsDialog.vue b/cshub-client/src/components/posts/PostEditsDialog.vue
index b40f3f9d..4e15e07f 100644
--- a/cshub-client/src/components/posts/PostEditsDialog.vue
+++ b/cshub-client/src/components/posts/PostEditsDialog.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-dialog v-model="dialogActive.on" fullscreen hide-overlay transition="dialog-bottom-transition">
+    <v-dialog v-model="thisDialogActive" fullscreen hide-overlay transition="dialog-bottom-transition">
         <v-card>
             <v-toolbar dark color="primary">
                 <v-btn icon dark @click.native="dialogActive = {on: false, hash: -1}">
@@ -83,6 +83,10 @@
             return uiState.editDialogState;
         }
 
+        get thisDialogActive(): boolean {
+            return this.dialogActive.on && this.dialogActive.hash === this.postHash;
+        }
+
         set dialogActive(value: editDialogType) {
             if (!value.on) {
                 this.$router.push(`${Routes.POST}/${this.postHash}`);
@@ -95,8 +99,8 @@
          * Watchers
          */
         @Watch("dialogActive")
-        private dialogActiveChanged(newVal: boolean) {
-            if (newVal && this.dialogActive.hash === this.postHash) {
+        private dialogActiveChanged(newVal: editDialogType) {
+            if (this.thisDialogActive) {
                 ApiWrapper.sendPostRequest(new GetEditContent(this.postHash), (callbackData: GetEditContentCallback) => {
 
                     let previousDelta = new Delta(JSON.parse(JSON.stringify(callbackData.edits[0].content)));

From b984481f12a4216b0677ee40c7252e32cfa619bb Mon Sep 17 00:00:00 2001
From: RobbinBaauw <robbin.baauw@gmail.com>
Date: Tue, 6 Nov 2018 22:24:40 +0100
Subject: [PATCH 08/10] Fixed logout

---
 cshub-client/src/components/global/NavDrawer.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/cshub-client/src/components/global/NavDrawer.vue b/cshub-client/src/components/global/NavDrawer.vue
index af91d936..170e065e 100644
--- a/cshub-client/src/components/global/NavDrawer.vue
+++ b/cshub-client/src/components/global/NavDrawer.vue
@@ -21,7 +21,7 @@
             <router-link :to="navigationLocations.USERDASHBOARD" v-if="userLoggedInComputed"><NavDrawerItem icon="fas fa-user" text="User dashboard"></NavDrawerItem></router-link>
             <router-link :to="navigationLocations.ADMINDASHBOARD" v-if="userLoggedInComputed && userAdminComputed"><NavDrawerItem icon="fas fa-users" text="Admin dashboard"></NavDrawerItem></router-link>
             <router-link :to="navigationLocations.LOGIN" v-if="!userLoggedInComputed"><NavDrawerItem icon="fas fa-sign-in-alt" text="Login"></NavDrawerItem></router-link>
-            <NavDrawerItem v-if="userLoggedInComputed" icon="fas fa-sign-out-alt" text="Logout"></NavDrawerItem>
+            <a @click="logout"><NavDrawerItem v-if="userLoggedInComputed" icon="fas fa-sign-out-alt" text="Logout"></NavDrawerItem></a>
             <v-divider dark class="my-3"></v-divider>
             <v-layout
                     row
@@ -198,7 +198,9 @@
          */
         private logout() {
             logStringConsole("Logging user out");
-            document.cookie = "";
+            document.cookie = "token=";
+            userState.clearUserModel();
+            uiState.setDrawerState(false);
             this.$router.push(Routes.INDEX);
         }
     }

From 565bbd40404586044a6c3ed1573b61c96022bfe9 Mon Sep 17 00:00:00 2001
From: RobbinBaauw <robbin.baauw@gmail.com>
Date: Tue, 6 Nov 2018 22:29:19 +0100
Subject: [PATCH 09/10] Minor tweaks

---
 cshub-client/src/components/global/NavDrawer.vue | 1 +
 cshub-client/src/views/user/UserDashboard.vue    | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/cshub-client/src/components/global/NavDrawer.vue b/cshub-client/src/components/global/NavDrawer.vue
index 170e065e..903f5a3b 100644
--- a/cshub-client/src/components/global/NavDrawer.vue
+++ b/cshub-client/src/components/global/NavDrawer.vue
@@ -37,6 +37,7 @@
                 :items="topics"
                 item-key="hash"
                 activatable
+                class="ml-3"
                 active-class="primary--text"
                 transition>
             </v-treeview>
diff --git a/cshub-client/src/views/user/UserDashboard.vue b/cshub-client/src/views/user/UserDashboard.vue
index 2e6a6704..9b278f77 100644
--- a/cshub-client/src/views/user/UserDashboard.vue
+++ b/cshub-client/src/views/user/UserDashboard.vue
@@ -116,6 +116,8 @@
 
     import userState from "../../store/user";
 
+    import {Routes} from "../router/router";
+
     import {ApiWrapper, logObjectConsole, logStringConsole} from "../../utilities";
     import {
         ChangeUserPassword,
@@ -213,6 +215,9 @@
                                         });
                                 }
                             }
+                        })
+                        .then(() => {
+                            this.$router.push(Routes.INDEX);
                         });
                 } else if (callback.response === ChangeUserAvatarReponseTypes.INVALIDIMAGE) {
                     // Perhaps do something

From d8507be77959b4cbbda301282b953da220dac184 Mon Sep 17 00:00:00 2001
From: Robbin Baauw <robbin.baauw@gmail.com>
Date: Tue, 6 Nov 2018 22:36:01 +0100
Subject: [PATCH 10/10] Update package json to remove unnecessary dep

---
 cshub-shared/package.json | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/cshub-shared/package.json b/cshub-shared/package.json
index ff7c4f6a..215aa417 100644
--- a/cshub-shared/package.json
+++ b/cshub-shared/package.json
@@ -4,8 +4,5 @@
   "devDependencies": {
     "quill-delta": "^4.1.0",
     "dayjs": "^1.7.7"
-  },
-  "dependencies": {
-    "@types/node": "^10.12.2"
   }
 }