From 9a89459bcf54afc9bcea807b0cbbbdcf8a585f52 Mon Sep 17 00:00:00 2001
From: Simon <toports@gmx.de>
Date: Sun, 17 Mar 2019 18:41:27 +0100
Subject: [PATCH] Inplement about user property; Add "me" page

Hide error element if empty
---
 src/router/routes.js                | 13 +++++
 src/scss/components/_general.scss   |  4 ++
 src/store/modules/auth.js           | 23 +++++----
 src/store/modules/users.js          |  4 +-
 src/vue/App.vue                     |  1 -
 src/vue/Header.vue                  |  8 ++-
 src/vue/pages/me/Me.vue             | 79 +++++++++++++++++++++++++++++
 src/vue/pages/settings/Settings.vue |  8 +--
 src/vue/pages/viewpost/ViewPost.vue | 23 ++-------
 src/vue/ui/TextAreaInputField.vue   |  3 +-
 10 files changed, 127 insertions(+), 39 deletions(-)
 create mode 100644 src/vue/pages/me/Me.vue

diff --git a/src/router/routes.js b/src/router/routes.js
index 6320692..9da3f60 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -12,6 +12,7 @@ import PasswordReset from '../vue/pages/forgotpassword/ForgotPassword';
 import ViewPost      from '../vue/pages/viewpost/ViewPost';
 import ViewUser      from '../vue/pages/viewuser/ViewUser';
 import Search        from '../vue/pages/search/Search';
+import Me            from '../vue/pages/me/Me';
 
 /**
  * Responsible for trying to authenticate the user via a existing api-key.
@@ -154,6 +155,18 @@ export default [
         path: '/search',
         component: Search
     },
+    {
+        path: '/me',
+        component: Me,
+        beforeEnter(to, from, next) {
+            setTitle('Me');
+
+            /**
+             * Check if user is logged in.
+             */
+            authenticate().then(() => next()).catch(() => next('/login'));
+        }
+    },
 
     // 404 catcher
     {path: '*', redirect: '/'}
diff --git a/src/scss/components/_general.scss b/src/scss/components/_general.scss
index b8c1288..3109494 100644
--- a/src/scss/components/_general.scss
+++ b/src/scss/components/_general.scss
@@ -9,4 +9,8 @@
     &:not(:empty){
         margin-bottom: 0.75em;
     }
+
+    &:empty {
+        display: none;
+    }
 }
diff --git a/src/store/modules/auth.js b/src/store/modules/auth.js
index 6a12461..a8aa855 100644
--- a/src/store/modules/auth.js
+++ b/src/store/modules/auth.js
@@ -39,7 +39,7 @@ export const auth = {
                 query: {
                     operation: 'login',
                     vars: {username, password},
-                    fields: ['apikey', 'email', 'permissions', 'id', 'fullname']
+                    fields: ['apikey', 'email', 'permissions', 'id', 'fullname', 'about']
                 }
             }).then(({errors, data}) => {
 
@@ -47,7 +47,7 @@ export const auth = {
                 if (errors && errors.length) {
                     throw errors[0].message;
                 } else {
-                    const {apikey, id, email, fullname, permissions} = data.login;
+                    const {apikey, id, email, fullname, permissions, about} = data.login;
 
                     state.apikey = apikey;
                     state.user = {
@@ -55,7 +55,8 @@ export const auth = {
                         id,
                         permissions,
                         username,
-                        fullname
+                        fullname,
+                        about
                     };
 
                     // Save apikey and return loaded user
@@ -81,7 +82,7 @@ export const auth = {
                 query: {
                     operation: 'login',
                     vars: {apikey},
-                    fields: ['email', 'permissions', 'id', 'fullname', 'username']
+                    fields: ['email', 'permissions', 'id', 'fullname', 'username', 'about']
                 }
             }).then(({errors, data}) => {
 
@@ -94,13 +95,14 @@ export const auth = {
                 } else {
 
                     // Save to current state
-                    const {id, email, fullname, username, permissions} = data.login;
+                    const {id, email, fullname, username, permissions, about} = data.login;
                     state.user = {
                         email,
                         id,
                         permissions,
                         username,
-                        fullname
+                        fullname,
+                        about
                     };
 
                     return state.user;
@@ -142,16 +144,16 @@ export const auth = {
          * @param fullname New Fullname
          * @param password New Password
          */
-        async updateCredentials({state}, {email, fullname, password}) {
+        async updateProfileData({state}, {about, email, fullname, password}) {
             return this.dispatch('graphql', {
                 query: {
                     operation: 'updateUser',
                     vars: {
-                        email, fullname, password,
+                        email, fullname, password, about,
                         id: state.user.id,
                         apikey: state.apikey
                     },
-                    fields: ['email', 'fullname', 'permissions']
+                    fields: ['email', 'fullname', 'permissions', 'about']
                 }
             }).then(({errors, data}) => {
 
@@ -161,9 +163,10 @@ export const auth = {
                 } else {
 
                     // Update changes in current state
-                    const {email, fullname, permissions} = data.updateUser;
+                    const {email, fullname, permissions, about} = data.updateUser;
                     state.user = {
                         ...state.user,
+                        about,
                         email,
                         fullname,
                         permissions
diff --git a/src/store/modules/users.js b/src/store/modules/users.js
index 7ee0759..5bdbbe6 100644
--- a/src/store/modules/users.js
+++ b/src/store/modules/users.js
@@ -18,7 +18,7 @@ export const users = {
                 query: {
                     operation: 'getAllUsers',
                     vars: {apikey},
-                    fields: ['id', 'username', 'fullname', 'permissions', 'deactivated', 'email']
+                    fields: ['id', 'username', 'fullname', 'permissions', 'deactivated', 'email', 'about']
                 }
             }).then(({errors, data: {getAllUsers}}) => {
 
@@ -50,7 +50,7 @@ export const users = {
                 query: {
                     operation: 'user',
                     vars: {id, apikey},
-                    fields: ['id', 'username', 'fullname', 'permissions', 'deactivated', 'email']
+                    fields: ['id', 'username', 'fullname', 'permissions', 'deactivated', 'email', 'about']
                 }
             }).then(({errors, data: {user}}) => {
 
diff --git a/src/vue/App.vue b/src/vue/App.vue
index 68aa94f..4d8e4da 100644
--- a/src/vue/App.vue
+++ b/src/vue/App.vue
@@ -56,7 +56,6 @@
     textarea,
     input,
     [contenteditable] {
-        font-family: $font-family;
         outline: none;
         border: none;
         background: transparent;
diff --git a/src/vue/Header.vue b/src/vue/Header.vue
index 3c1d098..8922bed 100644
--- a/src/vue/Header.vue
+++ b/src/vue/Header.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="{header: 1, visible: $store.state.page.lastScrollDirection === 'up'}">
+    <div :class="{header: 1, visible: $store.state.page.lastScrollDirection !== 'down'}">
 
         <div class="bar">
 
@@ -26,9 +26,11 @@
 
                 <!-- Visible as not-logged-in user -->
                 <router-link to="/">Home</router-link>
+
                 <router-link v-if="!user"
                              to="/login">Login
                 </router-link>
+
                 <router-link v-if="!user"
                              to="/register">Register
                 </router-link>
@@ -47,11 +49,15 @@
                 <router-link v-if="user"
                              to="/settings">Settings
                 </router-link>
+
                 <router-link v-if="user"
                              to="/login"
                              @click.native="logout">Logout
                 </router-link>
 
+                <router-link v-if="user"
+                             to="me">Profile</router-link>
+
             </div>
         </div>
 
diff --git a/src/vue/pages/me/Me.vue b/src/vue/pages/me/Me.vue
new file mode 100644
index 0000000..feebc21
--- /dev/null
+++ b/src/vue/pages/me/Me.vue
@@ -0,0 +1,79 @@
+<template>
+    <div class="settings small">
+
+        <h1>{{ auth.user.fullname }} aka. {{ auth.user.username }}</h1>
+
+        <text-area-input-field ref="inAbout"
+                               :no-border="true"
+
+                               placeholder="Enter a short bio..."/>
+
+        <p class="error">{{ errorMsg }}</p>
+
+        <button class="button-primary" @click="submit">Update</button>
+    </div>
+</template>
+
+<script>
+
+    // UI Components
+    import TextInputField     from '../../ui/TextInputField';
+    import TextAreaInputField from '../../ui/TextAreaInputField';
+
+    // Vuex stuff
+    import {mapState} from 'vuex';
+
+    export default {
+        components: {TextInputField, TextAreaInputField},
+
+        data() {
+            return {
+                errorMsg: ''
+            };
+        },
+
+        computed: {
+            ...mapState(['auth'])
+        },
+
+        mounted() {
+            this.$refs.inAbout.value = this.auth.user.about || '';
+        },
+
+        methods: {
+
+            submit() {
+                const {inAbout} = this.$refs;
+                this.errorMsg = '';
+
+                // Fire auth
+                this.$store.dispatch('auth/updateProfileData', {
+                    about: inAbout.value || null
+                }).catch(reason => {
+                    this.errorMsg = reason;
+                });
+            }
+        }
+    };
+
+</script>
+
+<style lang="scss" scoped>
+
+    .settings {
+
+        .error {
+            margin-top: 2em;
+        }
+
+        > button {
+            width: 100%;
+            margin-top: 0.25em;
+        }
+
+        .text-area-input-field {
+            font-family: $font-family-article-stack;
+        }
+    }
+
+</style>
diff --git a/src/vue/pages/settings/Settings.vue b/src/vue/pages/settings/Settings.vue
index 5b4a507..f4f3dc8 100644
--- a/src/vue/pages/settings/Settings.vue
+++ b/src/vue/pages/settings/Settings.vue
@@ -34,7 +34,7 @@
 <script>
 
     // UI Components
-    import TextInputField from '../../ui/TextInputField';
+    import TextInputField     from '../../ui/TextInputField';
 
     // Vuex stuff
     import {mapState} from 'vuex';
@@ -76,7 +76,7 @@
                 }
 
                 // Fire auth
-                this.$store.dispatch('auth/updateCredentials', {
+                this.$store.dispatch('auth/updateProfileData', {
                     fullname: inFullName.value || null,
                     email: inEmail.value || null,
                     password: inPassword.value || null
@@ -99,12 +99,12 @@
     .settings {
 
         .error {
-            margin-top: 2em;
+            margin-top: 1em;
         }
 
         > button {
             width: 100%;
-            margin-top: 0.25em;
+            margin-top: 1.5em;
         }
 
         .text-input-field {
diff --git a/src/vue/pages/viewpost/ViewPost.vue b/src/vue/pages/viewpost/ViewPost.vue
index 3b02962..f7a196e 100644
--- a/src/vue/pages/viewpost/ViewPost.vue
+++ b/src/vue/pages/viewpost/ViewPost.vue
@@ -181,36 +181,19 @@
             }
 
             > span {
-                position: relative;
                 font-size: 0.8em;
                 font-weight: 500;
-                background: rgba($palette-slate-gray, 0.07);
+                background: rgba($palette-slate-gray, 0.05);
                 color: rgba($palette-slate-gray, 0.75);
                 margin: 0 0.5em 0.5em 0;
                 border-radius: 0.15em;
                 padding: 0.55em 0.85em 0.5em;
                 cursor: pointer;
                 transition: all 0.3s;
-                overflow: hidden;
-                z-index: 1;
-
-                &::before {
-                    @include pseudo();
-                    @include position(0, 0, auto, 0);
-                    @include size(100%, 0);
-                    background: $palette-sweet-red;
-                    transition: all 0.3s;
-                    z-index: -1;
-                    opacity: 0;
-                }
 
                 &:hover {
-                    color: white;
-
-                    &::before {
-                        height: 100%;
-                        opacity: 1;
-                    }
+                    background: rgba($palette-slate-gray, 0.1);
+                    color: rgba($palette-slate-gray, 0.85);
                 }
             }
         }
diff --git a/src/vue/ui/TextAreaInputField.vue b/src/vue/ui/TextAreaInputField.vue
index 5a2aecf..38fa35c 100644
--- a/src/vue/ui/TextAreaInputField.vue
+++ b/src/vue/ui/TextAreaInputField.vue
@@ -16,7 +16,7 @@
                   @keyup.enter="$emit('submit')"></textarea>
 
         <!-- Colored border to show focus -->
-        <span :class="{border: 1, active: focused}"></span>
+        <span v-if="!noBorder" :class="{border: 1, active: focused}"></span>
 
     </div>
 </template>
@@ -26,6 +26,7 @@
     export default {
         props: {
             placeholder: {type: String, required: true},
+            noBorder: {type: Boolean, default: false},
             password: {type: Boolean, default: false},
             autofocus: {type: Boolean, default: false}
         },