From 7da49ea54a012300fecaae7f6c2b11fa4b58fe0c Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Wed, 18 Sep 2019 16:31:50 +0200
Subject: [PATCH 1/5] Fix storybook

---
 webapp/storybook/webpack.config.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/webapp/storybook/webpack.config.js b/webapp/storybook/webpack.config.js
index 80c0358e7..95c4c75a6 100644
--- a/webapp/storybook/webpack.config.js
+++ b/webapp/storybook/webpack.config.js
@@ -1,7 +1,6 @@
 const path = require('path')
-const nuxtConf = require('../nuxt.config')
-const srcDir = `../${nuxtConf.srcDir || ''}`
-const rootDir = `../${nuxtConf.rootDir || ''}`
+const srcDir = '..'
+const rootDir = '..'
 
 // Export a function. Accept the base config as the only param.
 module.exports = async ({ config, mode }) => {

From ade92e387dc0df87569dbe858f4d337d991ca5ea Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Wed, 18 Sep 2019 16:54:34 +0200
Subject: [PATCH 2/5] Add slug to User component, fix #1486

---
 webapp/components/User/User.story.js | 74 ++++++++++++++++++++++++++++
 webapp/components/User/User.vue      | 13 +++--
 webapp/storybook/helpers.js          |  4 ++
 3 files changed, 87 insertions(+), 4 deletions(-)
 create mode 100644 webapp/components/User/User.story.js

diff --git a/webapp/components/User/User.story.js b/webapp/components/User/User.story.js
new file mode 100644
index 000000000..e7a66de3f
--- /dev/null
+++ b/webapp/components/User/User.story.js
@@ -0,0 +1,74 @@
+import { storiesOf } from '@storybook/vue'
+import { withA11y } from '@storybook/addon-a11y'
+import User from '~/components/User/User.vue'
+import helpers from '~/storybook/helpers'
+
+helpers.init()
+
+const user = {
+  id: 'u6',
+  slug: 'louie',
+  name: 'Louie',
+  avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/designervzm/128.jpg',
+  about:
+    'Illum in et velit soluta voluptatem architecto consequuntur enim placeat. Eum excepturi est ratione rerum in voluptatum corporis. Illum consequatur minus. Modi incidunt velit.',
+  disabled: false,
+  deleted: false,
+  locationName: null,
+  location: null,
+  createdAt: '2019-09-18T14:16:01.695Z',
+  badges: [],
+  badgesCount: 0,
+  shoutedCount: 1,
+  commentedCount: 2,
+  contributionsCount: 5,
+  followingCount: 1,
+  following: [
+    {
+      id: 'u3',
+      slug: 'jenny-rostock',
+      name: 'Jenny Rostock',
+      avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/bowbrick/128.jpg',
+      disabled: false,
+      deleted: false,
+      followedByCount: 2,
+      followedByCurrentUser: false,
+      contributionsCount: 1,
+      commentedCount: 3,
+      badges: [
+        {
+          id: 'indiegogo_en_bear',
+          icon: '/img/badges/indiegogo_en_bear.svg',
+        },
+      ],
+      location: {
+        name: 'Paris',
+      },
+    },
+  ],
+  followedByCount: 0,
+  followedByCurrentUser: false,
+  isBlocked: false,
+  followedBy: [],
+  socialMedia: [],
+}
+
+storiesOf('User', module)
+  .addDecorator(withA11y)
+  .addDecorator(helpers.layout)
+  .add('available user', () => ({
+    components: { User },
+    store: helpers.store,
+    data: () => ({
+      user,
+    }),
+    template: '<user :user="user" :trunc="35" :date-time="new Date()" />',
+  }))
+  .add('anonymous user', () => ({
+    components: { User },
+    store: helpers.store,
+    data: () => ({
+      user: null,
+    }),
+    template: '<user :user="user" :trunc="35" :date-time="new Date()" />',
+  }))
diff --git a/webapp/components/User/User.vue b/webapp/components/User/User.vue
index 7c97c5755..811b9b9ca 100644
--- a/webapp/components/User/User.vue
+++ b/webapp/components/User/User.vue
@@ -14,14 +14,15 @@
             <b class="username">{{ userName | truncate(18) }}</b>
           </div>
           <!-- Time -->
-          <div v-if="dateTime" style="display: inline;">
-            <ds-text align="left" size="small" color="soft">
+          <ds-text align="right" size="small" color="soft">
+            <span class="slug">{{ userSlug }}</span>
+            <div v-if="dateTime" style="display: inline;">
               <ds-icon name="clock" />
               <client-only>
                 <hc-relative-date-time :date-time="dateTime" />
               </client-only>
-            </ds-text>
-          </div>
+            </div>
+          </ds-text>
         </div>
       </nuxt-link>
     </template>
@@ -126,6 +127,10 @@ export default {
       if (!(id && slug)) return ''
       return { name: 'profile-id-slug', params: { slug, id } }
     },
+    userSlug() {
+      const { slug } = this.user || {}
+      return slug && `@${slug}`
+    },
     userName() {
       const { name } = this.user || {}
       return name || this.$t('profile.userAnonym')
diff --git a/webapp/storybook/helpers.js b/webapp/storybook/helpers.js
index eb4ef4556..883f10001 100644
--- a/webapp/storybook/helpers.js
+++ b/webapp/storybook/helpers.js
@@ -3,6 +3,7 @@ import Vuex from 'vuex'
 import vuexI18n from 'vuex-i18n/dist/vuex-i18n.umd.js'
 import Styleguide from '@human-connection/styleguide'
 import Filters from '~/plugins/vue-filters'
+import VTooltip from '~/plugins/v-tooltip'
 import layout from './layout.vue'
 
 const helpers = {
@@ -25,6 +26,9 @@ const helpers = {
       auth: {
         namespaced: true,
         getters: {
+          isModerator() {
+            return false
+          },
           user(state) {
             return { id: 1, name: 'admin' }
           },

From 85f1773211edd611c786862861da643eb23ebde4 Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Wed, 18 Sep 2019 17:15:04 +0200
Subject: [PATCH 3/5] Add slug to user profile page

---
 webapp/pages/profile/_id/_slug.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index d7f4e2f39..d17af8e9f 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -27,7 +27,12 @@
             />
           </client-only>
           <ds-space margin="small">
-            <ds-heading tag="h3" align="center" no-margin>{{ userName }}</ds-heading>
+            <ds-heading tag="h3" align="center" no-margin>
+              {{ userName }}
+            </ds-heading>
+            <ds-text size="large" align="center" color="soft">
+              {{ userSlug }}
+            </ds-text>
             <ds-text v-if="user.location" align="center" color="soft" size="small">
               <ds-icon name="map-marker" />
               {{ user.location.name }}
@@ -143,7 +148,7 @@
           <ds-card style="position: relative; height: auto;">
             <ds-space margin="x-small">
               <ds-text tag="h5" color="soft">
-                {{ $t('profile.socialMedia') }} {{ user.name | truncate(15) }}?
+                {{ $t('profile.socialMedia') }} {{ userName | truncate(15) }}?
               </ds-text>
               <template>
                 <ds-space v-for="link in socialMediaLinks" :key="link.username" margin="x-small">
@@ -336,6 +341,10 @@ export default {
       const { name } = this.user || {}
       return name || this.$t('profile.userAnonym')
     },
+    userSlug() {
+      const { slug } = this.user || {}
+      return slug && `@${slug}`
+    },
   },
   watch: {
     User(val) {

From af24693be47d96c93c80235383289516a7c4160b Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Wed, 18 Sep 2019 18:18:13 +0200
Subject: [PATCH 4/5] Fix lint

---
 webapp/storybook/helpers.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/webapp/storybook/helpers.js b/webapp/storybook/helpers.js
index 883f10001..6a479034f 100644
--- a/webapp/storybook/helpers.js
+++ b/webapp/storybook/helpers.js
@@ -3,9 +3,10 @@ import Vuex from 'vuex'
 import vuexI18n from 'vuex-i18n/dist/vuex-i18n.umd.js'
 import Styleguide from '@human-connection/styleguide'
 import Filters from '~/plugins/vue-filters'
-import VTooltip from '~/plugins/v-tooltip'
 import layout from './layout.vue'
 
+import '~/plugins/v-tooltip'
+
 const helpers = {
   init(options = {}) {
     Vue.use(Vuex)

From ec7d9753db3041f1a8202a3cf53bd273534f33a1 Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Wed, 18 Sep 2019 23:29:45 +0200
Subject: [PATCH 5/5] Follow @alina-beck's PR review

https://github.com/Human-Connection/Human-Connection/pull/1640#pullrequestreview-290089879
---
 webapp/components/User/User.vue    | 20 +++++++++++---------
 webapp/pages/profile/_id/_slug.vue |  2 +-
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/webapp/components/User/User.vue b/webapp/components/User/User.vue
index 811b9b9ca..f139ce6b9 100644
--- a/webapp/components/User/User.vue
+++ b/webapp/components/User/User.vue
@@ -11,17 +11,19 @@
         <div @mouseover="openMenu(true)" @mouseleave="closeMenu(true)">
           <hc-avatar class="avatar" :user="user" />
           <div>
-            <b class="username">{{ userName | truncate(18) }}</b>
+            <ds-text align="left">
+              <b class="username">{{ userName | truncate(18) }}</b>
+              <ds-text v-if="dateTime" size="small" color="soft">
+                <ds-icon name="clock" />
+                <client-only>
+                  <hc-relative-date-time :date-time="dateTime" />
+                </client-only>
+              </ds-text>
+            </ds-text>
           </div>
           <!-- Time -->
-          <ds-text align="right" size="small" color="soft">
-            <span class="slug">{{ userSlug }}</span>
-            <div v-if="dateTime" style="display: inline;">
-              <ds-icon name="clock" />
-              <client-only>
-                <hc-relative-date-time :date-time="dateTime" />
-              </client-only>
-            </div>
+          <ds-text align="left" size="small" color="soft">
+            {{ userSlug }}
           </ds-text>
         </div>
       </nuxt-link>
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index d17af8e9f..0d04e8ca7 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -30,7 +30,7 @@
             <ds-heading tag="h3" align="center" no-margin>
               {{ userName }}
             </ds-heading>
-            <ds-text size="large" align="center" color="soft">
+            <ds-text align="center" color="soft">
               {{ userSlug }}
             </ds-text>
             <ds-text v-if="user.location" align="center" color="soft" size="small">