From f57c45bb3b402060ee5b1676ab7e6017cbb01edf Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Mon, 12 Nov 2018 14:27:12 +0100
Subject: [PATCH 01/46] added locations and about me text

---
 assets/styles/main.scss                       |   8 +
 components/PostCard.vue                       |  23 +-
 components/ShoutButton.vue                    |   2 +-
 graphql/UserProfileQuery.js                   |  14 +-
 nuxt.config.js                                |  10 +-
 package.json                                  |   1 +
 pages/admin.vue                               |   4 +
 pages/admin/categories.vue                    |  43 ++-
 pages/admin/tags.vue                          |  47 +++
 pages/index.vue                               |   1 +
 pages/post/_slug/index.vue                    |  16 +-
 pages/post/_slug/more-info.vue                |  16 +-
 pages/profile/_slug.vue                       |  21 +-
 pages/settings/index.vue                      | 202 +++++++++++-
 store/auth.js                                 |  21 +-
 .../components/data-display/Avatar/style.scss |   2 +-
 .../components/data-display/Table/Table.vue   |  22 +-
 .../components/data-display/Table/style.scss  |  29 +-
 .../data-input/FormItem/FormItem.vue          |   9 +-
 .../data-input/FormItem/InputError.vue        |   0
 .../data-input/FormItem/InputLabel.vue        |   0
 .../components/data-input/FormItem/style.scss |   0
 .../components/data-input/Input/Input.vue     |   3 +-
 .../components/data-input/Input/demo.md       |   0
 .../components/data-input/Input/style.scss    |   0
 .../components/data-input/Select/Select.vue   | 248 ++++++++++++--
 .../Select/__snapshots__/spec.js.snap         |  69 ++++
 .../components/data-input/Select/demo.md      | 154 +++++++++
 .../components/data-input/Select/spec.js      | 309 ++++++++++++++++++
 .../components/data-input/Select/style.scss   | 148 ++++++++-
 .../components/data-input/shared/input.js     |  23 +-
 .../components/data-input/shared/input.scss   |  79 +++--
 .../data-input/shared/multiinput.js           |  49 +++
 .../system/components/layout/Card/Card.vue    |  23 +-
 .../src/system/components/layout/Card/demo.md |  17 +
 .../components/typography/Chip/Chip.vue       |  93 ++++++
 .../system/components/typography/Chip/demo.md |  62 ++++
 .../components/typography/Chip/style.scss     |  81 +++++
 .../components/typography/Icon/Icon.vue       |  14 +
 .../components/typography/Icon/style.scss     |  27 +-
 styleguide/src/system/icons/svg/angellist.svg |   5 +
 .../src/system/icons/svg/balance-scale.svg    |   5 +
 styleguide/src/system/icons/svg/bell.svg      |   5 +
 styleguide/src/system/icons/svg/bullhorn.svg  |   5 +
 styleguide/src/system/icons/svg/gamepad.svg   |   5 +
 .../src/system/icons/svg/graduation-cap.svg   |   5 +
 styleguide/src/system/icons/svg/leaf.svg      |   5 +
 .../src/system/icons/svg/mouse-pointer.svg    |   5 +
 .../src/system/icons/svg/paint-brush.svg      |   5 +
 styleguide/src/system/icons/svg/paw.svg       |   5 +
 styleguide/src/system/icons/svg/recycle.svg   |   5 +
 .../src/system/icons/svg/toggle-off.svg       |   5 +
 styleguide/src/system/icons/svg/toggle-on.svg |   5 +
 styleguide/src/system/icons/svg/tree.svg      |   5 +
 .../src/system/icons/svg/university.svg       |   5 +
 .../src/system/styles/shared/_form.scss       |  12 +-
 .../src/system/styles/shared/_mixins.scss     |  32 +-
 styleguide/src/system/tokens/color.yml        |   4 +
 styleguide/src/system/tokens/font-size.yml    |   2 +-
 styleguide/src/system/tokens/z-index.yml      |   2 +
 yarn.lock                                     |  98 ++++--
 61 files changed, 1960 insertions(+), 155 deletions(-)
 create mode 100644 pages/admin/tags.vue
 mode change 100644 => 100755 styleguide/src/system/components/data-input/FormItem/FormItem.vue
 mode change 100644 => 100755 styleguide/src/system/components/data-input/FormItem/InputError.vue
 mode change 100644 => 100755 styleguide/src/system/components/data-input/FormItem/InputLabel.vue
 mode change 100644 => 100755 styleguide/src/system/components/data-input/FormItem/style.scss
 mode change 100644 => 100755 styleguide/src/system/components/data-input/Input/Input.vue
 mode change 100644 => 100755 styleguide/src/system/components/data-input/Input/demo.md
 mode change 100644 => 100755 styleguide/src/system/components/data-input/Input/style.scss
 mode change 100644 => 100755 styleguide/src/system/components/data-input/Select/Select.vue
 create mode 100755 styleguide/src/system/components/data-input/Select/__snapshots__/spec.js.snap
 mode change 100644 => 100755 styleguide/src/system/components/data-input/Select/demo.md
 create mode 100755 styleguide/src/system/components/data-input/Select/spec.js
 mode change 100644 => 100755 styleguide/src/system/components/data-input/Select/style.scss
 mode change 100644 => 100755 styleguide/src/system/components/data-input/shared/input.js
 mode change 100644 => 100755 styleguide/src/system/components/data-input/shared/input.scss
 create mode 100755 styleguide/src/system/components/data-input/shared/multiinput.js
 create mode 100755 styleguide/src/system/components/typography/Chip/Chip.vue
 create mode 100755 styleguide/src/system/components/typography/Chip/demo.md
 create mode 100755 styleguide/src/system/components/typography/Chip/style.scss
 create mode 100755 styleguide/src/system/icons/svg/angellist.svg
 create mode 100755 styleguide/src/system/icons/svg/balance-scale.svg
 create mode 100755 styleguide/src/system/icons/svg/bell.svg
 create mode 100755 styleguide/src/system/icons/svg/bullhorn.svg
 create mode 100755 styleguide/src/system/icons/svg/gamepad.svg
 create mode 100755 styleguide/src/system/icons/svg/graduation-cap.svg
 create mode 100755 styleguide/src/system/icons/svg/leaf.svg
 create mode 100755 styleguide/src/system/icons/svg/mouse-pointer.svg
 create mode 100755 styleguide/src/system/icons/svg/paint-brush.svg
 create mode 100755 styleguide/src/system/icons/svg/paw.svg
 create mode 100755 styleguide/src/system/icons/svg/recycle.svg
 create mode 100755 styleguide/src/system/icons/svg/toggle-off.svg
 create mode 100755 styleguide/src/system/icons/svg/toggle-on.svg
 create mode 100755 styleguide/src/system/icons/svg/tree.svg
 create mode 100755 styleguide/src/system/icons/svg/university.svg

diff --git a/assets/styles/main.scss b/assets/styles/main.scss
index a631016f3..c0b082ee1 100644
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -119,3 +119,11 @@ blockquote {
     margin-top: 0;
   }
 }
+
+hr {
+  border: 0;
+  width: 100%;
+  color: $color-neutral-80;
+  background-color: $color-neutral-80;
+  height: 1px !important;
+}
diff --git a/components/PostCard.vue b/components/PostCard.vue
index 59f19d1f2..fbe6a0996 100644
--- a/components/PostCard.vue
+++ b/components/PostCard.vue
@@ -24,13 +24,22 @@
         </no-ssr>
       </ds-space>
       <template slot="footer">
-        <span :style="{ opacity: post.shoutedCount ? 1 : .5 }">
-          <ds-icon name="heart-o" /> <small>{{ post.shoutedCount }}</small>
-        </span>
-        &nbsp;
-        <span :style="{ opacity: post.commentsCount ? 1 : .5 }">
-          <ds-icon name="comments" /> <small>{{ post.commentsCount }}</small>
-        </span>
+        <div style="display: inline-block; opacity: .5;">
+          <ds-icon
+            v-tooltip="{content: category.name, placement: 'bottom-start', delay: { show: 500 }}"
+            v-for="category in post.categories"
+            :key="category.id"
+            :name="category.icon" />&nbsp;
+        </div>
+        <div style="display: inline-block; float: right">
+          <span :style="{ opacity: post.shoutedCount ? 1 : .5 }">
+            <ds-icon name="bullhorn" /> <small>{{ post.shoutedCount }}</small>
+          </span>
+          &nbsp;
+          <span :style="{ opacity: post.commentsCount ? 1 : .5 }">
+            <ds-icon name="comments" /> <small>{{ post.commentsCount }}</small>
+          </span>
+        </div>
       </template>
     </ds-card>
   </a>
diff --git a/components/ShoutButton.vue b/components/ShoutButton.vue
index 84de685f1..011b30f38 100644
--- a/components/ShoutButton.vue
+++ b/components/ShoutButton.vue
@@ -6,7 +6,7 @@
       :disabled="disabled || loading"
       danger
       size="x-large"
-      icon="heart"
+      icon="bullhorn"
       @click="shout" />
     <ds-space margin-bottom="xx-small" />
     <ds-text color="soft">
diff --git a/graphql/UserProfileQuery.js b/graphql/UserProfileQuery.js
index 38646e386..de1992885 100644
--- a/graphql/UserProfileQuery.js
+++ b/graphql/UserProfileQuery.js
@@ -6,14 +6,11 @@ export default gql(`
       id
       name
       avatar
-      createdAt
-      friendsCount
-      friends {
-        id
+      about
+      location {
         name
-        slug
-        avatar
       }
+      createdAt
       badges {
         id
         key
@@ -63,6 +60,11 @@ export default gql(`
         deleted
         image
         createdAt
+        categories {
+          id
+          name
+          icon
+        }
         author {
           User {
             id
diff --git a/nuxt.config.js b/nuxt.config.js
index 59588a8ee..33a1cc314 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,10 +1,5 @@
 const pkg = require('./package')
-const envWhitelist = [
-  'NODE_ENV',
-  'BACKEND_URL',
-  'MAINTENANCE'
-]
-
+const envWhitelist = ['NODE_ENV', 'BACKEND_URL', 'MAINTENANCE']
 
 module.exports = {
   mode: 'universal',
@@ -102,6 +97,7 @@ module.exports = {
   */
   modules: [
     '@nuxtjs/apollo',
+    '@nuxtjs/axios',
     ['@nuxtjs/dotenv', { only: envWhitelist }],
     ['nuxt-env', { keys: envWhitelist }]
   ],
@@ -129,7 +125,7 @@ module.exports = {
     // },
     // required
     clientConfigs: {
-      default: '~/plugins/apollo-config.js',
+      default: '~/plugins/apollo-config.js'
     }
   },
 
diff --git a/package.json b/package.json
index 2125914ff..f24b443e0 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@nuxtjs/apollo": "^4.0.0-rc3",
+    "@nuxtjs/axios": "^5.3.4",
     "@nuxtjs/dotenv": "^1.3.0",
     "accounting": "^0.4.1",
     "cross-env": "^5.2.0",
diff --git a/pages/admin.vue b/pages/admin.vue
index 13f4b6705..48250e000 100644
--- a/pages/admin.vue
+++ b/pages/admin.vue
@@ -47,6 +47,10 @@ export default {
           name: 'Categories',
           path: `/admin/categories`
         },
+        {
+          name: 'Tags',
+          path: `/admin/tags`
+        },
         {
           name: 'Settings',
           path: `/admin/settings`
diff --git a/pages/admin/categories.vue b/pages/admin/categories.vue
index 0c7f18075..045542541 100644
--- a/pages/admin/categories.vue
+++ b/pages/admin/categories.vue
@@ -1,7 +1,42 @@
 <template>
-  <ds-card>
-    <ds-space margin="small">
-      Categories...
-    </ds-space>
+  <ds-card space="small">
+    <ds-heading tag="h3">Themen / Kategorien</ds-heading>
+    <ds-table
+      :data="Category"
+      :fields="['icon', 'name', 'postCount']"
+      condensed>
+      <template
+        slot="icon"
+        slot-scope="scope">
+        <ds-icon :name="scope.row.icon" />
+      </template>
+    </ds-table>
   </ds-card>
 </template>
+
+<script>
+import gql from 'graphql-tag'
+
+export default {
+  data() {
+    return {
+      Category: []
+    }
+  },
+  apollo: {
+    Category: {
+      query: gql(`
+        query {
+          Category(orderBy: postCount_desc) {
+            id
+            name
+            slug
+            icon
+            postCount
+          }
+        }
+      `)
+    }
+  }
+}
+</script>
diff --git a/pages/admin/tags.vue b/pages/admin/tags.vue
new file mode 100644
index 000000000..45ab9a2a3
--- /dev/null
+++ b/pages/admin/tags.vue
@@ -0,0 +1,47 @@
+<template>
+  <ds-card space="small">
+    <ds-heading tag="h3">Tags</ds-heading>
+    <ds-table
+      :data="Tag"
+      :fields="fields"
+      condensed>
+      <template
+        slot="id"
+        slot-scope="scope">
+        {{ scope.index + 1 }}
+      </template>
+    </ds-table>
+  </ds-card>
+</template>
+
+<script>
+import gql from 'graphql-tag'
+
+export default {
+  data() {
+    return {
+      Tag: [],
+      fields: {
+        id: { label: '#' },
+        name: { label: 'Name' },
+        taggedCountUnique: { label: 'Nutzer' },
+        taggedCount: { label: 'Beiträge' }
+      }
+    }
+  },
+  apollo: {
+    Tag: {
+      query: gql(`
+        query {
+          Tag(first: 20, orderBy: taggedCountUnique_desc) {
+            id
+            name
+            taggedCount
+            taggedCountUnique
+          }
+        }
+      `)
+    }
+  }
+}
+</script>
diff --git a/pages/index.vue b/pages/index.vue
index e267c6121..846dc9f98 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -106,6 +106,7 @@ export default {
             categories {
               id
               name
+              icon
             }
             shoutedCount
           }
diff --git a/pages/post/_slug/index.vue b/pages/post/_slug/index.vue
index 528be4fd4..adda11db9 100644
--- a/pages/post/_slug/index.vue
+++ b/pages/post/_slug/index.vue
@@ -17,11 +17,18 @@
       :count="post.shoutedCount"
       :post-id="post.id" />
     <!-- Categories -->
-    <div class="tags">
+    <ds-icon
+      v-tooltip="{content: category.name, placement: 'top-start', delay: { show: 300 }}"
+      v-for="category in post.categories"
+      :key="category.id"
+      :name="category.icon"
+      size="large" />&nbsp;
+    <ds-space margin-bottom="small" />
+    <!--<div class="tags">
       <ds-icon name="compass" /> <ds-tag
         v-for="category in post.categories"
-        :key="category.id">{{ category.name }}</ds-tag>
-    </div>
+        :key="category.id"><ds-icon :name="category.icon" /> {{ category.name }}</ds-tag>
+    </div>-->
     <!-- Tags -->
     <template v-if="post.tags && post.tags.length">
       <ds-space margin="xx-small"/>
@@ -140,7 +147,7 @@ export default {
               name
             }
             commentsCount
-            comments(orderBy: _id_desc) {
+            comments(orderBy: createdAt_desc) {
               id
               contentExcerpt
               createdAt
@@ -166,6 +173,7 @@ export default {
             categories {
               id
               name
+              icon
             }
             shoutedCount
           }
diff --git a/pages/post/_slug/more-info.vue b/pages/post/_slug/more-info.vue
index 6c704a245..d7553f917 100644
--- a/pages/post/_slug/more-info.vue
+++ b/pages/post/_slug/more-info.vue
@@ -5,9 +5,15 @@
     <ds-space/>
     <h3><ds-icon name="compass" /> Themenkategorien</h3>
     <div class="tags">
-      <ds-tag
+      <ds-icon
+        v-tooltip="{content: category.name, placement: 'top-start', delay: { show: 300 }}"
         v-for="category in post.categories"
-        :key="category.id">{{ category.name }}</ds-tag>
+        :key="category.id"
+        :name="category.icon"
+        size="large" />&nbsp;
+        <!--<ds-tag
+        v-for="category in post.categories"
+        :key="category.id"><ds-icon :name="category.icon" /> {{ category.name }}</ds-tag>-->
     </div>
     <template v-if="post.tags && post.tags.length">
       <h3><ds-icon name="tags" /> Schlagwörter</h3>
@@ -70,6 +76,7 @@ export default {
             categories {
               id
               name
+              icon
             }
             relatedContributions(first: 2) {
               id
@@ -78,6 +85,11 @@ export default {
               contentExcerpt
               shoutedCount
               commentsCount
+              categories {
+                id
+                name
+                icon
+              }
               author {
                 User {
                   id
diff --git a/pages/profile/_slug.vue b/pages/profile/_slug.vue
index 6c1898512..73c539707 100644
--- a/pages/profile/_slug.vue
+++ b/pages/profile/_slug.vue
@@ -21,10 +21,17 @@
               align="center"
               no-margin>{{ user.name }}</ds-heading>
             <ds-text
+              v-if="user.location && user.location.length"
               align="center"
               color="soft"
               size="small">
-              Mitglied seid {{ user.createdAt | date('MMMM yyyy') }}
+              <ds-icon name="map-marker" /> {{ user.location[0].name }}
+            </ds-text>
+            <ds-text
+              align="center"
+              color="soft"
+              size="small">
+              Mitglied seit {{ user.createdAt | date('MMMM yyyy') }}
             </ds-text>
           </ds-space>
           <ds-space
@@ -60,6 +67,18 @@
               :follow-id="user.id"
               @update="voted = true && fetchUser()" />
           </ds-space>
+          <template v-if="user.about">
+            <hr>
+            <ds-space
+              margin-top="small"
+              margin-bottom="small">
+              <ds-text
+                color="soft"
+                size="small">
+                {{ user.about }}
+              </ds-text>
+            </ds-space>
+          </template>
         </ds-card>
         <ds-space/>
         <ds-heading
diff --git a/pages/settings/index.vue b/pages/settings/index.vue
index 048d0d2bb..4f231abda 100644
--- a/pages/settings/index.vue
+++ b/pages/settings/index.vue
@@ -1,5 +1,203 @@
 <template>
-  <ds-card>
-    <p>My Data...</p>
+  <ds-card space="small">
+    <ds-input
+      id="name"
+      v-model="form.name"
+      icon="user"
+      label="Dein Name"
+      placeholder="Dein Name"/>
+    <ds-select
+      id="city"
+      :options="cities"
+      v-model="city"
+      icon="map-marker"
+      label="Deine Stadt"
+      placeholder="Deine Stadt"
+      @input="handleCitySelection"
+      @input.native="handleCityInput" />
+    <ds-input
+      id="bio"
+      v-model="form.about"
+      type="textarea"
+      rows="3"
+      label="Erzähl doch ein wenig (in zwei Sätzen) über dich"
+      placeholder="Über mich"/>
+    <template slot="footer">
+      <ds-button
+        style="float: right;"
+        icon="check"
+        primary
+        @click.prevent="submit">Speichern</ds-button>
+    </template>
   </ds-card>
 </template>
+
+<script>
+import gql from 'graphql-tag'
+
+import { mapGetters } from 'vuex'
+import { CancelToken } from 'axios'
+import find from 'lodash/find'
+
+let timeout
+const mapboxToken =
+  'pk.eyJ1IjoiaHVtYW4tY29ubmVjdGlvbiIsImEiOiJjajl0cnBubGoweTVlM3VwZ2lzNTNud3ZtIn0.KZ8KK9l70omjXbEkkbHGsQ'
+
+export default {
+  data() {
+    return {
+      axiosSource: null,
+      cities: [],
+      city: null,
+      form: {
+        name: null,
+        locationId: null,
+        about: null
+      }
+    }
+  },
+  computed: {
+    ...mapGetters({
+      user: 'auth/user'
+    })
+  },
+  watch: {
+    user: {
+      immediate: true,
+      handler: function(user) {
+        this.form = {
+          name: user.name,
+          locationId: user.locationId,
+          about: user.about
+        }
+      }
+    }
+  },
+  methods: {
+    submit() {
+      console.log('SUBMIT', { ...this.form })
+      this.$apollo
+        .mutate({
+          mutation: gql`
+            mutation(
+              $id: ID!
+              $name: String
+              $locationId: String
+              $about: String
+            ) {
+              UpdateUser(
+                id: $id
+                name: $name
+                locationId: $locationId
+                about: $about
+              ) {
+                id
+                name
+                locationId
+                about
+              }
+            }
+          `,
+          // Parameters
+          variables: {
+            id: this.user.id,
+            name: this.form.name,
+            locationId: this.form.locationId,
+            about: this.form.about
+          },
+          // Update the cache with the result
+          // The query will be updated with the optimistic response
+          // and then with the real result of the mutation
+          update: (store, { data: { UpdateUser } }) => {
+            this.$store.dispatch('auth/refresh', UpdateUser)
+
+            // Read the data from our cache for this query.
+            // const data = store.readQuery({ query: TAGS_QUERY })
+            // Add our tag from the mutation to the end
+            // data.tags.push(addTag)
+            // Write our data back to the cache.
+            // store.writeQuery({ query: TAGS_QUERY, data })
+          }
+          // Optimistic UI
+          // Will be treated as a 'fake' result as soon as the request is made
+          // so that the UI can react quickly and the user be happy
+          /* optimisticResponse: {
+            __typename: 'Mutation',
+            addTag: {
+              __typename: 'Tag',
+              id: -1,
+              label: newTag
+            }
+          } */
+        })
+        .then(data => {
+          console.log(data)
+          this.$toast.success('Updated user')
+        })
+        .catch(err => {
+          console.error(err)
+          this.$toast.error(err.message)
+        })
+    },
+    handleCityInput(value) {
+      clearTimeout(timeout)
+      timeout = setTimeout(() => this.requestGeoData(value), 500)
+    },
+    handleCitySelection(value) {
+      console.log('SET CURRENT VALUE', value)
+      const item = find(this.cities, { value: value })
+      console.log('ID:', item.id)
+      this.form.locationId = item.id
+    },
+    handleCityEnter() {
+      console.log('SET CURRENT VALUE')
+    },
+    processCityResults(res) {
+      if (
+        !res ||
+        !res.data ||
+        !res.data.features ||
+        !res.data.features.length
+      ) {
+        return []
+      }
+      let output = []
+      res.data.features.forEach(item => {
+        output.push({
+          label: item.place_name,
+          value: item.place_name,
+          id: item.id
+        })
+      })
+
+      return output
+    },
+    requestGeoData(e) {
+      if (this.axiosSource) {
+        // cancel last request
+        this.axiosSource.cancel()
+      }
+
+      const value = e.target ? e.target.value.trim() : ''
+      if (value === '' || value.length < 3) {
+        this.cities = []
+        return
+      }
+
+      this.axiosSource = CancelToken.source()
+
+      this.$axios
+        .get(
+          `https://api.mapbox.com/geocoding/v5/mapbox.places/${value}.json?access_token=${mapboxToken}&types=region,postcode,district,place,country&language=de`,
+          {
+            cancelToken: this.axiosSource.token
+          }
+        )
+        .then(res => {
+          this.cities = this.processCityResults(res)
+        })
+      console.log('TRY TO GET DATA FOR ', value)
+    }
+  }
+}
+</script>
diff --git a/store/auth.js b/store/auth.js
index da4d567e7..15d7207bd 100644
--- a/store/auth.js
+++ b/store/auth.js
@@ -85,7 +85,9 @@ export const actions = {
         slug: user.slug,
         email: user.email,
         avatar: user.avatar,
-        role: user.role
+        role: user.role,
+        locationId: user.locationId,
+        about: user.about
       })
       commit('SET_TOKEN', token)
     }
@@ -96,6 +98,21 @@ export const actions = {
     }
     return getters.isLoggedIn
   },
+  refresh({ state, commit }, { id, name, locationId, about, avatar }) {
+    if (!state.user.id || id !== state.user.id) {
+      return
+    }
+    commit('SET_USER', {
+      id: state.user.id, // do not change
+      name: name || state.user.name,
+      slug: state.user.slug, // do not change
+      email: state.user.email, // do not change
+      avatar: avatar || state.user.avatar,
+      role: state.user.role,
+      locationId: locationId || state.user.locationId,
+      about: about || state.user.about
+    })
+  },
   async login({ commit }, { email, password }) {
     try {
       commit('SET_PENDING', true)
@@ -112,6 +129,8 @@ export const actions = {
               email
               avatar
               role
+              locationId
+              about
               token
             }
           }
diff --git a/styleguide/src/system/components/data-display/Avatar/style.scss b/styleguide/src/system/components/data-display/Avatar/style.scss
index a4019a5f2..d6932d85e 100644
--- a/styleguide/src/system/components/data-display/Avatar/style.scss
+++ b/styleguide/src/system/components/data-display/Avatar/style.scss
@@ -19,7 +19,7 @@
     height: 100%;
     top: 0px;
     left: 0px;
-    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+    box-shadow: inset 0 0 0 1px rgba($color-neutral-0, .1);
     border-radius: 50%;
   }
 
diff --git a/styleguide/src/system/components/data-display/Table/Table.vue b/styleguide/src/system/components/data-display/Table/Table.vue
index ddc204677..3d21532de 100644
--- a/styleguide/src/system/components/data-display/Table/Table.vue
+++ b/styleguide/src/system/components/data-display/Table/Table.vue
@@ -5,7 +5,11 @@
     <table
       cellpadding="0"
       cellspacing="0"
-      class="ds-table">
+      class="ds-table"
+      :class="[
+        condensed && 'ds-table-condensed',
+        bordered && 'ds-table-bordered'
+    ]">
       <colgroup>
         <col
           v-for="header in headers"
@@ -24,7 +28,7 @@
       <tbody>
         <tr
           v-for="(row, index) in rows"
-          :key="index">
+          :key="row.key || index">
           <ds-table-col
             v-for="col in row"
             :key="col.key">
@@ -75,6 +79,20 @@ export default {
       default() {
         return null
       }
+    },
+    /**
+     * Should the table be more condense?
+     */
+    condensed: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Should the table have borders?
+     */
+    bordered: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {
diff --git a/styleguide/src/system/components/data-display/Table/style.scss b/styleguide/src/system/components/data-display/Table/style.scss
index bdebc8d23..7d59a6e9d 100644
--- a/styleguide/src/system/components/data-display/Table/style.scss
+++ b/styleguide/src/system/components/data-display/Table/style.scss
@@ -11,19 +11,34 @@
 
 .ds-table-col {
   @include reset;
-  border-bottom: $border-color-softer solid $border-size-base;
   vertical-align: top;
   padding: $space-small $space-xx-small;
-
-  &:last-child {
-    padding-right: 0;
-  }
 }
 
 .ds-table-head-col {
   @include reset;
-  border-bottom: $border-color-softer solid $border-size-base;
   padding: $space-small $space-xx-small;
   text-align: left;
   font-weight: $font-weight-bold;
-}
\ No newline at end of file
+}
+
+// bordered
+.ds-table-bordered {
+  .ds-table-col,
+  .ds-table-head-col {
+    border-bottom: $border-color-softer dotted $border-size-base;
+  }
+
+  tr:last-child .ds-table-col {
+    border-bottom: none;
+  }
+}
+
+// condensed
+.ds-table-condensed {
+  .ds-table-col,
+  .ds-table-head-col {
+    padding-top: $space-x-small;
+    padding-bottom: $space-x-small;
+  }
+}
diff --git a/styleguide/src/system/components/data-input/FormItem/FormItem.vue b/styleguide/src/system/components/data-input/FormItem/FormItem.vue
old mode 100644
new mode 100755
index b90c2d3d8..5fd877cd1
--- a/styleguide/src/system/components/data-input/FormItem/FormItem.vue
+++ b/styleguide/src/system/components/data-input/FormItem/FormItem.vue
@@ -1,10 +1,9 @@
 <template>
-  <div
+  <div 
     class="ds-form-item"
-    :class="$parentInput ? $parentInput.stateClasses : ''">
-    <ds-input-label
-      v-if="$parentInput"
-      :label="$parentInput.label"
+    :class="$parentInput.stateClasses">
+    <ds-input-label 
+      :label="$parentInput.label" 
       :for="$parentInput.id" />
     <slot/>
     <ds-input-error :error="$parentInput.error" />
diff --git a/styleguide/src/system/components/data-input/FormItem/InputError.vue b/styleguide/src/system/components/data-input/FormItem/InputError.vue
old mode 100644
new mode 100755
diff --git a/styleguide/src/system/components/data-input/FormItem/InputLabel.vue b/styleguide/src/system/components/data-input/FormItem/InputLabel.vue
old mode 100644
new mode 100755
diff --git a/styleguide/src/system/components/data-input/FormItem/style.scss b/styleguide/src/system/components/data-input/FormItem/style.scss
old mode 100644
new mode 100755
diff --git a/styleguide/src/system/components/data-input/Input/Input.vue b/styleguide/src/system/components/data-input/Input/Input.vue
old mode 100644
new mode 100755
index a955dd0f4..56f2d33e9
--- a/styleguide/src/system/components/data-input/Input/Input.vue
+++ b/styleguide/src/system/components/data-input/Input/Input.vue
@@ -17,11 +17,12 @@
         :type="type"
         :autofocus="autofocus"
         :placeholder="placeholder"
+        :tabindex="tabindex"
         :disabled="disabled"
         :readonly="readonly"
         :is="tag"
         :value.prop="innerValue"
-        @input="input"
+        @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"
         :rows="type === 'textarea' ? rows : null"
diff --git a/styleguide/src/system/components/data-input/Input/demo.md b/styleguide/src/system/components/data-input/Input/demo.md
old mode 100644
new mode 100755
diff --git a/styleguide/src/system/components/data-input/Input/style.scss b/styleguide/src/system/components/data-input/Input/style.scss
old mode 100644
new mode 100755
diff --git a/styleguide/src/system/components/data-input/Select/Select.vue b/styleguide/src/system/components/data-input/Select/Select.vue
old mode 100644
new mode 100755
index 48b86015d..e615dd6ea
--- a/styleguide/src/system/components/data-input/Select/Select.vue
+++ b/styleguide/src/system/components/data-input/Select/Select.vue
@@ -1,33 +1,119 @@
 <template>
   <ds-form-item>
-    <div class="ds-select-wrap">
+    <div
+      class="ds-select-wrap"
+      v-click-outside="handleBlur"
+      :tabindex="searchable ? -1 : tabindex"
+      @keydown.self.down.prevent="pointerNext"
+      @keydown.self.up.prevent="pointerPrev"
+      @keypress.enter.prevent.stop.self="selectPointerOption"
+      @keyup.esc="close">
       <div
         v-if="icon"
         class="ds-select-icon">
         <ds-icon :name="icon"/>
       </div>
-      <select
+      <div
         class="ds-select"
+        @click="handleClick"
         :class="[
           icon && `ds-select-has-icon`,
-          iconRight && `ds-select-has-icon-right`
-        ]"
-        :id="id"
-        :name="model"
-        :autofocus="autofocus"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :readonly="readonly"
-        :value.prop="innerValue"
-        @input="input"
-        @focus="handleFocus"
-        @blur="handleBlur">
-        <option
-          v-for="option in options"
-          :key="option.label || option">
-          {{ option.label || option }}
-        </option>
-      </select>
+          iconRight && `ds-select-has-icon-right`,
+          multiple && `ds-select-multiple`
+      ]">
+        <div
+          v-if="multiple"
+          class="ds-selected-options">
+          <div
+            class="ds-selected-option"
+            v-for="(value, index) in innerValue"
+            :key="value">
+            <!-- @slot Slot to provide a custom selected option display -->
+            <slot
+              name="optionitem"
+              :value="value">
+              <ds-chip
+                removable
+                @remove="deselectOption(index)"
+                color="primary">
+                {{ value }}
+              </ds-chip>
+            </slot>
+          </div>
+          <input
+            ref="search"
+            class="ds-select-search"
+            :id="id"
+            :name="model"
+            :autofocus="autofocus"
+            :placeholder="placeholder"
+            :tabindex="tabindex"
+            :disabled="disabled"
+            :readonly="readonly"
+            v-model="searchString"
+            @focus="handleFocus"
+            @keydown.delete.stop="deselectLastOption"
+            @keydown.down.prevent="pointerNext"
+            @keydown.up.prevent="pointerPrev"
+            @keypress.enter.prevent.stop="selectPointerOption"
+            @keyup.esc="close">
+        </div>
+        <div
+          v-else
+          class="ds-select-value">
+          <div
+            v-if="placeholder && !innerValue"
+            class="ds-select-placeholder">
+            {{ placeholder }}
+          </div>
+          <!-- @slot Slot to provide a custom value display -->
+          <slot
+            v-else
+            name="value"
+            :value="innerValue">
+            {{ innerValue }}
+          </slot>
+        </div>
+        <input
+          v-if="!multiple"
+          ref="search"
+          class="ds-select-search"
+          :id="id"
+          :name="model"
+          :autofocus="autofocus"
+          :placeholder="placeholder"
+          :tabindex="tabindex"
+          :disabled="disabled"
+          :readonly="readonly"
+          v-model="searchString"
+          @focus="handleFocus"
+          @keydown.delete.stop="deselectLastOption"
+          @keydown.down.prevent="pointerNext"
+          @keydown.up.prevent="pointerPrev"
+          @keypress.enter.prevent.stop="selectPointerOption"
+          @keyup.esc="close">
+      </div>
+      <div class="ds-select-dropdown">
+        <ul class="ds-select-options">
+          <li
+            class="ds-select-option"
+            :class="[
+              isSelected(option) && `ds-select-option-is-selected`,
+              pointer === index && `ds-select-option-hover`
+            ]"
+            v-for="(option, index) in filteredOptions"
+            @click="handleSelect(option)"
+            @mouseover="setPointer(index)"
+            :key="option.label || option">
+            <!-- @slot Slot to provide custom option items -->
+            <slot
+              name="option"
+              :option="option">
+              {{ option.label || option }}
+            </slot>
+          </li>
+        </ul>
+      </div>
       <div
         v-if="iconRight"
         class="ds-select-icon-right">
@@ -39,6 +125,11 @@
 
 <script>
 import inputMixin from '../shared/input'
+import multiinputMixin from '../shared/multiinput'
+import ClickOutside from 'vue-click-outside'
+import DsFormItem from '@@/components/data-input/FormItem/FormItem'
+import DsChip from '@@/components/typography/Chip/Chip'
+import DsIcon from '@@/components/typography/Icon/Icon'
 
 /**
  * Used for handling basic user input.
@@ -46,7 +137,21 @@ import inputMixin from '../shared/input'
  */
 export default {
   name: 'DsSelect',
-  mixins: [inputMixin],
+  mixins: [inputMixin, multiinputMixin],
+  components: {
+    DsFormItem,
+    DsChip,
+    DsIcon
+  },
+  directives: {
+    ClickOutside
+  },
+  data() {
+    return {
+      searchString: '',
+      pointer: 0
+    }
+  },
   props: {
     /**
      * The placeholder shown when value is empty.
@@ -69,13 +174,6 @@ export default {
       type: Boolean,
       default: false
     },
-    /**
-     * Whether the user can select multiple items
-     */
-    multiple: {
-      type: Boolean,
-      default: false
-    },
     /**
      * The name of the input's icon.
      */
@@ -88,7 +186,7 @@ export default {
      */
     iconRight: {
       type: String,
-      default: null
+      default: 'angle-down'
     },
     /**
      * The select options.
@@ -98,6 +196,98 @@ export default {
       default() {
         return []
       }
+    },
+    /**
+     * Whether the options are searchable
+     */
+    searchable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    filteredOptions() {
+      if (!this.searchString) {
+        return this.options
+      }
+      const searchParts = this.searchString.split(' ')
+
+      return this.options.filter(option => {
+        const value = option.value || option
+        return searchParts.every(part => {
+          if (!part) {
+            return true
+          }
+          return value.toLowerCase().includes(part.toLowerCase())
+        })
+      })
+    },
+    pointerMax() {
+      return this.filteredOptions.length - 1
+    }
+  },
+  watch: {
+    pointerMax(max) {
+      if (max < this.pointer) {
+        this.$nextTick(() => {
+          this.pointer = max
+        })
+      }
+    }
+  },
+  methods: {
+    handleSelect(options) {
+      this.selectOption(options)
+      this.resetSearch()
+      if (this.multiple) {
+        this.$refs.search.focus()
+        this.handleFocus()
+      } else {
+        this.close()
+      }
+    },
+    resetSearch() {
+      this.searchString = ''
+    },
+    handleClick() {
+      if (!this.focus || this.multiple) {
+        this.$refs.search.focus()
+        this.handleFocus()
+      }
+    },
+    close() {
+      this.$refs.search.blur()
+      this.handleBlur()
+    },
+    deselectLastOption() {
+      if (
+        this.multiple &&
+        this.innerValue &&
+        this.innerValue.length &&
+        !this.searchString.length
+      ) {
+        this.deselectOption(this.innerValue.length - 1)
+      }
+    },
+    setPointer(index) {
+      this.pointer = index
+    },
+    pointerPrev() {
+      if (this.pointer === 0) {
+        this.pointer = this.pointerMax
+      } else {
+        this.pointer--
+      }
+    },
+    pointerNext() {
+      if (this.pointer === this.pointerMax) {
+        this.pointer = 0
+      } else {
+        this.pointer++
+      }
+    },
+    selectPointerOption() {
+      this.handleSelect(this.filteredOptions[this.pointer])
     }
   }
 }
diff --git a/styleguide/src/system/components/data-input/Select/__snapshots__/spec.js.snap b/styleguide/src/system/components/data-input/Select/__snapshots__/spec.js.snap
new file mode 100755
index 000000000..27c32691c
--- /dev/null
+++ b/styleguide/src/system/components/data-input/Select/__snapshots__/spec.js.snap
@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Select.vue matches snapshot 1`] = `
+<dsformitem-stub>
+  <div
+    class="ds-select-wrap"
+    tabindex="-1"
+  >
+    <!---->
+     
+    <div
+      class="ds-select ds-select-has-icon-right"
+    >
+      <div
+        class="ds-select-value"
+      >
+        
+          1
+        
+      </div>
+       
+      <input
+        class="ds-select-search"
+        tabindex="0"
+      />
+    </div>
+     
+    <div
+      class="ds-select-dropdown"
+    >
+      <ul
+        class="ds-select-options"
+      >
+        <li
+          class="ds-select-option ds-select-option-is-selected ds-select-option-hover"
+        >
+          
+            1
+          
+        </li>
+        <li
+          class="ds-select-option"
+        >
+          
+            2
+          
+        </li>
+        <li
+          class="ds-select-option"
+        >
+          
+            3
+          
+        </li>
+      </ul>
+    </div>
+     
+    <div
+      class="ds-select-icon-right"
+    >
+      <dsicon-stub
+        arialabel="icon"
+        name="angle-down"
+        tag="span"
+      />
+    </div>
+  </div>
+</dsformitem-stub>
+`;
diff --git a/styleguide/src/system/components/data-input/Select/demo.md b/styleguide/src/system/components/data-input/Select/demo.md
old mode 100644
new mode 100755
index 299dc662d..c80c9c391
--- a/styleguide/src/system/components/data-input/Select/demo.md
+++ b/styleguide/src/system/components/data-input/Select/demo.md
@@ -2,4 +2,158 @@
 
 ```
 <ds-select :options="['blue', 'red', 'green']" />
+```
+
+## Usage with label
+
+```
+<ds-select
+  label="Color"
+  :options="['blue', 'red', 'green']" />
+```
+
+## Bind to a value
+
+Use v-model to bind a value to the select input.
+
+```
+<template>
+  <div>
+    <ds-select
+      v-model="color"
+      :options="['blue', 'red', 'green']"
+      placeholder="Color ..."></ds-select>
+    <ds-text>Your color: {{ color }}</ds-text>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        color: 'blue'
+      }
+    }
+  }
+</script>
+```
+
+## Multiselect
+
+Use the multiple prop to allow the user selecting multiple values.
+
+```
+<template>
+  <div>
+    <ds-select
+      v-model="color"
+      :options="['blue', 'red', 'green']"
+      placeholder="Color ..."
+      multiple></ds-select>
+    <ds-text>Your colors: {{ color }}</ds-text>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        color: ['blue', 'red']
+      }
+    }
+  }
+</script>
+```
+
+## Options as objects
+
+Options can be objects with a label and a value property.
+
+```
+<template>
+  <div>
+    <ds-select
+      v-model="color"
+      :options="colorOptions"
+      placeholder="Color ..."></ds-select>
+    <ds-text>Your color: {{ color }}</ds-text>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        color: '',
+        colorOptions: [
+          {
+            label: 'blue',
+            value: '#0e17d8'
+          },
+          {
+            label: 'red',
+            value: '#d80e3f'
+          },
+          {
+            label: 'green',
+            value: '#0ed853'
+          }
+        ]
+      }
+    }
+  }
+</script>
+```
+
+## Validation
+
+We use <a href="https://github.com/yiminghe/async-validator" targe="_blank">async-validator schemas</a> for validation.
+
+If you need to validate more than one field it is better to use the form component.
+
+```
+<template>
+  <div>
+    <ds-select
+      v-model="color"
+      :options="['blue', 'red', 'green']"
+      :schema="{type: 'enum', enum: ['green'], message: 'Please choose green :)' }"
+      placeholder="Color ..." />
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        color: ''
+      }
+    }
+  }
+</script>
+```
+
+## Select sizes
+
+```
+<ds-select placeholder="Small ..." size="small"></ds-select>
+<ds-select placeholder="Base ..."></ds-select>
+<ds-select placeholder="Large ..." size="large"></ds-select>
+```
+
+## Select icons
+
+Add an icon to help the user identify the select fields usage.
+
+```
+<ds-select
+  placeholder="User ..."
+  icon="user"></ds-select>
+<ds-select
+  placeholder="Day ..."
+  icon="clock"></ds-select>
+<ds-select
+  placeholder="User ..."
+  size="small"
+  icon="user"></ds-select>
+<ds-select
+  placeholder="User ..."
+  size="large"
+  icon="user"></ds-select>
 ```
\ No newline at end of file
diff --git a/styleguide/src/system/components/data-input/Select/spec.js b/styleguide/src/system/components/data-input/Select/spec.js
new file mode 100755
index 000000000..88f7da935
--- /dev/null
+++ b/styleguide/src/system/components/data-input/Select/spec.js
@@ -0,0 +1,309 @@
+import { shallowMount } from '@vue/test-utils'
+import Comp from './Select.vue'
+
+describe('Select.vue', () => {
+  describe('Events emitting', () => {
+    describe('@input', () => {
+      test('should be called when the value is changed passing the new value', () => {
+        const wrapper = shallowMount(Comp, {
+          propsData: {
+            value: '3',
+            options: ['1', '2', '3']
+          }
+        })
+        wrapper.vm.selectOption(wrapper.vm.options[0])
+        expect(wrapper.emitted().input[0]).toEqual(['1'])
+      })
+      test('should be called when an option is clicked passing the options value', () => {
+        const wrapper = shallowMount(Comp, {
+          propsData: {
+            value: '3',
+            options: ['1', '2', '3']
+          }
+        })
+        wrapper.find('.ds-select-option').trigger('click')
+        expect(wrapper.emitted().input[0]).toEqual(['1'])
+      })
+    })
+  })
+
+  describe('innerValue', () => {
+    test('should contain a single selected value by default', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          value: '1',
+          options: ['1', '2', '3']
+        }
+      })
+      expect(wrapper.vm.innerValue).toEqual('1')
+    })
+    test('should contain an array of values when multiple: true', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          value: ['1'],
+          options: ['1', '2', '3'],
+          multiple: true
+        }
+      })
+      expect(wrapper.vm.innerValue).toEqual(['1'])
+    })
+  })
+
+  describe('options', () => {
+    test('should highlight the selected value', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          value: '1',
+          options: ['1', '2', '3']
+        }
+      })
+      const option = wrapper.find('.ds-select-option')
+      expect(option.classes()).toContain('ds-select-option-is-selected')
+    })
+    test('should highlight all selected values when multiple: true', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          value: ['1', '2'],
+          options: ['1', '2', '3'],
+          multiple: true
+        }
+      })
+      const option = wrapper.findAll('.ds-select-option')
+      expect(option.at(0).classes()).toContain('ds-select-option-is-selected')
+      expect(option.at(1).classes()).toContain('ds-select-option-is-selected')
+    })
+  })
+
+  describe('selectOption', () => {
+    test('should set innerValue to selected value', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          value: '3',
+          options: ['1', '2', '3']
+        }
+      })
+      wrapper.vm.selectOption(wrapper.vm.options[0])
+      expect(wrapper.vm.innerValue).toEqual('1')
+    })
+    test('should add selected value to innerValue when multiple: true', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          value: ['3'],
+          options: ['1', '2', '3'],
+          multiple: true
+        }
+      })
+      wrapper.vm.selectOption(wrapper.vm.options[0])
+      expect(wrapper.vm.innerValue).toEqual(['3', '1'])
+    })
+    test('should toggle selected value in innerValue when multiple: true', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          value: ['3', '1'],
+          options: ['1', '2', '3'],
+          multiple: true
+        }
+      })
+      wrapper.vm.selectOption(wrapper.vm.options[0])
+      expect(wrapper.vm.innerValue).toEqual(['3'])
+    })
+  })
+
+  describe('search', () => {
+    test('should filter options by search string', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['cat', 'duck', 'dog']
+        }
+      })
+      wrapper.vm.searchString = 'do'
+      expect(wrapper.vm.filteredOptions).toEqual(['dog'])
+    })
+
+    test('should be case insensitive', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['cat', 'duck', 'dog']
+        }
+      })
+      wrapper.vm.searchString = 'DO'
+      expect(wrapper.vm.filteredOptions).toEqual(['dog'])
+    })
+
+    test('should ignore spaces', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['cat', 'duck', 'dog']
+        }
+      })
+      wrapper.vm.searchString = 'd o'
+      expect(wrapper.vm.filteredOptions).toEqual(['dog'])
+    })
+
+    test('should display filtered options', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['cat', 'duck', 'dog']
+        }
+      })
+      wrapper.vm.searchString = 'do'
+      const filteredOptions = wrapper.findAll('.ds-select-option')
+      expect(filteredOptions.length).toEqual(1)
+    })
+
+    test('should work when using search input', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['cat', 'duck', 'dog']
+        }
+      })
+      const searchInput = wrapper.find('.ds-select-search')
+      searchInput.setValue('do')
+      expect(wrapper.vm.filteredOptions).toEqual(['dog'])
+    })
+  })
+
+  describe('pointer', () => {
+    test('should be set by mouse over option', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['1', '2', '3']
+        }
+      })
+      const options = wrapper.findAll('.ds-select-option')
+      options.at(2).trigger('mouseover')
+      expect(wrapper.vm.pointer).toEqual(2)
+    })
+
+    test('should be set by pointerNext', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['1', '2', '3']
+        }
+      })
+      wrapper.vm.pointerNext()
+      expect(wrapper.vm.pointer).toEqual(1)
+    })
+
+    test('should be set to 0 by pointerNext when on last entry', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['1', '2', '3']
+        }
+      })
+      wrapper.vm.pointer = 2
+      wrapper.vm.pointerNext()
+      expect(wrapper.vm.pointer).toEqual(0)
+    })
+
+    test('should be set by pointerPrev', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['1', '2', '3']
+        }
+      })
+      wrapper.vm.pointer = 1
+      wrapper.vm.pointerPrev()
+      expect(wrapper.vm.pointer).toEqual(0)
+    })
+
+    test('should be set to last entry by pointerPrev when 0', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['1', '2', '3']
+        }
+      })
+      wrapper.vm.pointerPrev()
+      expect(wrapper.vm.pointer).toEqual(2)
+    })
+
+    test('should be set by key down on wrap', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['1', '2', '3']
+        }
+      })
+      const wrap = wrapper.find('.ds-select-wrap')
+      wrap.trigger('keydown.down')
+      expect(wrapper.vm.pointer).toEqual(1)
+    })
+
+    test('should be set by key up on wrap', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['1', '2', '3']
+        }
+      })
+      const wrap = wrapper.find('.ds-select-wrap')
+      wrap.trigger('keydown.up')
+      expect(wrapper.vm.pointer).toEqual(2)
+    })
+
+    test('should be set by key down on search input', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['1', '2', '3']
+        }
+      })
+      const searchInput = wrapper.find('.ds-select-search')
+      searchInput.trigger('keydown.down')
+      expect(wrapper.vm.pointer).toEqual(1)
+    })
+
+    test('should be set by key up on search input', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['1', '2', '3']
+        }
+      })
+      const searchInput = wrapper.find('.ds-select-search')
+      searchInput.trigger('keydown.up')
+      expect(wrapper.vm.pointer).toEqual(2)
+    })
+
+    test('should select option by pointer value', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['1', '2', '3']
+        }
+      })
+      wrapper.vm.pointer = 1
+      wrapper.vm.selectPointerOption()
+      expect(wrapper.vm.innerValue).toEqual('2')
+    })
+
+    test('should select option by enter key on wrap', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['1', '2', '3']
+        }
+      })
+      wrapper.vm.pointer = 1
+      const wrap = wrapper.find('.ds-select-wrap')
+      wrap.trigger('keypress.enter')
+      expect(wrapper.vm.innerValue).toEqual('2')
+    })
+
+    test('should select option by enter key on search input', () => {
+      const wrapper = shallowMount(Comp, {
+        propsData: {
+          options: ['1', '2', '3']
+        }
+      })
+      wrapper.vm.pointer = 1
+      const searchInput = wrapper.find('.ds-select-search')
+      searchInput.trigger('keypress.enter')
+      expect(wrapper.vm.innerValue).toEqual('2')
+    })
+  })
+
+  it('matches snapshot', () => {
+    const wrapper = shallowMount(Comp, {
+      propsData: {
+        value: '1',
+        options: ['1', '2', '3']
+      }
+    })
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})
\ No newline at end of file
diff --git a/styleguide/src/system/components/data-input/Select/style.scss b/styleguide/src/system/components/data-input/Select/style.scss
old mode 100644
new mode 100755
index 5b7a84690..524df126a
--- a/styleguide/src/system/components/data-input/Select/style.scss
+++ b/styleguide/src/system/components/data-input/Select/style.scss
@@ -1,3 +1,149 @@
 @import '../shared/input.scss';
 
-@include input(ds-select);
\ No newline at end of file
+@include input(ds-select);
+
+.ds-select {
+  user-select: none;
+  .ds-input-has-focus & {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.ds-select-search, .ds-select-value {
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: $input-border-size solid transparent;
+  padding: $input-padding-vertical $space-x-small;
+  line-height: $line-height-base;
+
+  .ds-input-size-small & {
+    padding: $input-padding-vertical-small $space-x-small;
+  }
+
+  .ds-input-size-large & {
+    padding: $input-padding-vertical-large $space-x-small;
+  }
+
+  .ds-select-has-icon & {
+    padding-left: $input-height;
+
+    .ds-input-size-small & {
+      padding-left: $input-height-small;
+    }
+
+    .ds-input-size-large & {
+      padding-left: $input-height-large;
+    }
+  }
+
+  .ds-select-has-icon-right & {
+    padding-right: $input-height;
+
+    .ds-input-size-small & {
+      padding-right: $input-height-small;
+    }
+
+    .ds-input-size-large & {
+      padding-right: $input-height-large;
+    }
+  }
+}
+
+.ds-select-search {
+  appearance: none;
+  font-size: inherit;
+  font-family: $font-family-text;
+  width: 100%;
+  background: transparent;
+  color: $text-color-base;
+  outline: none;
+  user-select: text;
+
+  opacity: 0;
+
+  &::placeholder {
+    color: $text-color-disabled;
+  }
+
+  .ds-input-has-focus & {
+    opacity: 1;
+  }
+
+  .ds-select-multiple & {
+    position: relative;
+    display: inline-flex;
+    width: auto;
+    height: auto;
+    padding: 0;
+    opacity: 1;
+  }
+}
+
+.ds-select-placeholder, .ds-select-value {
+  pointer-events: none;
+
+  .ds-input-has-focus & {
+    opacity: 0;
+  }
+}
+
+.ds-select-placeholder {
+  color: $text-color-disabled;
+}
+
+.ds-selected-options {
+  display: flex;
+}
+
+.ds-selected-option {
+  display: inline-flex;
+  margin-right: $space-xx-small;
+}
+
+.ds-select-dropdown {
+  position: absolute;
+  z-index: $z-index-dropdown;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  background-color: $background-color-base;
+  border: $input-border-size solid $border-color-active;
+  border-top: 0;
+  border-bottom-left-radius: $border-radius-base;
+  border-bottom-right-radius: $border-radius-base;
+  visibility: hidden;
+  opacity: 0;
+  transition: all $duration-short $ease-out;
+  max-height: 240px;
+  overflow: auto;
+
+  .ds-input-has-focus & {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+.ds-select-options {
+  @include reset-list;
+}
+
+.ds-select-option {
+  padding: $input-padding-vertical $space-x-small;
+  cursor: pointer;
+  transition: all $duration-short $ease-out;
+
+  &.ds-select-option-hover {
+    background-color: $background-color-primary;
+    color: $text-color-primary-inverse;
+  }
+}
+
+.ds-select-option-is-selected {
+  background-color: $background-color-soft;
+  color: $text-color-primary;
+}
diff --git a/styleguide/src/system/components/data-input/shared/input.js b/styleguide/src/system/components/data-input/shared/input.js
old mode 100644
new mode 100755
index 2780a3dff..e93f96ec5
--- a/styleguide/src/system/components/data-input/shared/input.js
+++ b/styleguide/src/system/components/data-input/shared/input.js
@@ -20,7 +20,7 @@ export default {
      * The value of the input. Can be passed via v-model.
      */
     value: {
-      type: [String, Object, Number],
+      type: [String, Object, Number, Array],
       default: null
     },
     /**
@@ -56,7 +56,7 @@ export default {
      */
     schema: {
       type: Object,
-      default: () => ({})
+      default: () => null
     },
     /**
      * The input's size.
@@ -68,6 +68,10 @@ export default {
       validator: value => {
         return value.match(/(small|base|large)/)
       }
+    },
+    tabindex: {
+      type: Number,
+      default: 0
     }
   },
   data() {
@@ -107,9 +111,13 @@ export default {
     }
   },
   methods: {
-    input(event) {
+    handleInput(event) {
+      this.input(event.target.value)
+    },
+    input(value) {
+      this.innerValue = value
       if (this.$parentForm) {
-        this.$parentForm.update(this.model, event.target.value)
+        this.$parentForm.update(this.model, value)
       } else {
         /**
          * Fires after user input.
@@ -117,8 +125,8 @@ export default {
          *
          * @event input
          */
-        this.$emit('input', event.target.value)
-        this.validate(event.target.value)
+        this.$emit('input', value)
+        this.validate(value)
       }
     },
     handleFormUpdate(data, errors) {
@@ -126,6 +134,9 @@ export default {
       this.error = errors ? errors[this.model] : null
     },
     validate(value) {
+      if (!this.schema) {
+        return
+      }
       const validator = new Schema({ input: this.schema })
       // Prevent validator from printing to console
       // eslint-disable-next-line
diff --git a/styleguide/src/system/components/data-input/shared/input.scss b/styleguide/src/system/components/data-input/shared/input.scss
old mode 100644
new mode 100755
index 5991feb99..b0f30f5db
--- a/styleguide/src/system/components/data-input/shared/input.scss
+++ b/styleguide/src/system/components/data-input/shared/input.scss
@@ -2,63 +2,67 @@
   .#{$class}-wrap {
     position: relative;
   }
-
+  
   .#{$class} {
+    appearance: none;
     box-sizing: border-box;
-    font-size: $font-size-base;
+    font-size: $input-font-size-base;
     line-height: $line-height-base;
     font-family: $font-family-text;
     width: 100%;
     padding: $input-padding-vertical $space-x-small;
     height: $input-height;
-
+  
     color: $text-color-base;
     background: $background-color-base;
-
-    border: $input-border-size solid $border-color-soft;
+  
+    border: $input-border-size solid $border-color-base;
     border-radius: $border-radius-base;
     outline: none;
     transition: all $duration-short $ease-out;
-
+  
     &::placeholder {
       color: $text-color-disabled;
     }
-
+  
+    .ds-input-has-focus &,
     &:focus {
       border-color: $border-color-active;
       background: $background-color-base;
     }
-
-    .#{$class}-is-disabled &,
+  
+    .ds-input-is-disabled &,
     &:disabled {
       color: $text-color-disabled;
       opacity: $opacity-disabled;
       cursor: not-allowed;
     }
-
-    .#{$class}-has-error & {
+  
+    .ds-input-has-error & {
       border-color: $border-color-danger;
     }
   }
-
-  .#{$class}-size-small {
+  
+  .ds-input-size-small {
     font-size: $font-size-small;
-
+  
     .#{$class} {
+      font-size: $input-font-size-small;
       height: $input-height-small;
       padding: $input-padding-vertical-small $space-x-small;
     }
   }
-
-  .#{$class}-size-large {
+  
+  .ds-input-size-large {
     font-size: $font-size-large;
-
+  
     .#{$class} {
+      font-size: $input-font-size-large;
       height: $input-height-large;
       padding: $input-padding-vertical-large $space-x-small;
     }
   }
-
+  
   .#{$class}-icon,
   .#{$class}-icon-right {
     position: absolute;
@@ -71,32 +75,47 @@
     width: $input-height;
     color: $text-color-softer;
     transition: color $duration-short $ease-out;
-
-    .#{$class}-has-focus & {
+    pointer-events: none;
+  
+    .ds-input-has-focus & {
       color: $text-color-base;
     }
-  }
 
+    .ds-input-size-small & {
+      width: $input-height-small;
+    }
+
+    .ds-input-size-large & {
+      width: $input-height-large;
+    }
+  }
+  
   .#{$class}-icon-right {
     right: 0;
     left: auto;
   }
-
+  
   .#{$class}-has-icon {
     padding-left: $input-height;
+  
+    .ds-input-size-small & {
+      padding-left: $input-height-small;
+    }
 
-    .#{$class}-size-small &,
-    .#{$class}-size-large & {
-      padding-left: $input-height;
+    .ds-input-size-large & {
+      padding-left: $input-height-large;
     }
   }
-
+  
   .#{$class}-has-icon-right {
     padding-right: $input-height;
 
-    .#{$class}-size-small &,
-    .#{$class}-size-large & {
-      padding-right: $input-height;
+    .ds-input-size-small & {
+      padding-right: $input-height-small;
     }
-  }
+
+    .ds-input-size-large & {
+      padding-right: $input-height-large;
+    }
+  }         
 }
diff --git a/styleguide/src/system/components/data-input/shared/multiinput.js b/styleguide/src/system/components/data-input/shared/multiinput.js
new file mode 100755
index 000000000..8666b9812
--- /dev/null
+++ b/styleguide/src/system/components/data-input/shared/multiinput.js
@@ -0,0 +1,49 @@
+/**
+ * @mixin
+ */
+export default {
+  props: {
+    /**
+     * Whether the user can select multiple items
+     */
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    selectOption(option) {
+      const newValue = option.value || option
+      if (this.multiple) {
+        this.selectMultiOption(newValue)
+      } else {
+        this.input(newValue)
+      }
+    },
+    selectMultiOption(value) {
+      if (!this.innerValue) {
+        return this.input([value])
+      }
+      const index = this.innerValue.indexOf(value)
+      if (index < 0) {
+        return this.input([...this.innerValue, value])
+      }
+      this.deselectOption(index)
+    },
+    deselectOption(index) {
+      const newArray = [...this.innerValue]
+      newArray.splice(index, 1)
+      this.input(newArray)
+    },
+    isSelected(option) {
+      if (!this.innerValue) {
+        return false
+      }
+      const value = option.value || option
+      if (this.multiple) {
+        return this.innerValue.includes(value)
+      }
+      return this.innerValue === value
+    }
+  }
+}
diff --git a/styleguide/src/system/components/layout/Card/Card.vue b/styleguide/src/system/components/layout/Card/Card.vue
index d45f047cd..c55e1e81b 100644
--- a/styleguide/src/system/components/layout/Card/Card.vue
+++ b/styleguide/src/system/components/layout/Card/Card.vue
@@ -14,9 +14,9 @@
       v-if="image || $slots.image">
       <!-- @slot Content of the card's image -->
       <slot name="image">
-        <img 
-          :src="image" 
-          v-if="!error" 
+        <img
+          :src="image"
+          v-if="!error"
           @error="onError" >
       </slot>
     </div>
@@ -36,7 +36,14 @@
       </slot>
     </header>
     <div class="ds-card-content">
-      <slot />
+      <template v-if="space">
+        <ds-space :margin="space">
+          <slot />
+        </ds-space>
+      </template>
+      <template v-else>
+        <slot />
+      </template>
     </div>
     <footer
       class="ds-card-footer"
@@ -125,6 +132,14 @@ export default {
     hover: {
       type: Boolean,
       default: false
+    },
+    /**
+     * If you need some spacing you can provide it here like for ds-space
+     * `xxx-small, xx-small, x-small, small, large, x-large, xx-large, xxx-large`
+     */
+    space: {
+      type: String,
+      default: null
     }
   },
   data() {
diff --git a/styleguide/src/system/components/layout/Card/demo.md b/styleguide/src/system/components/layout/Card/demo.md
index 21eb8a4b1..398e4e157 100644
--- a/styleguide/src/system/components/layout/Card/demo.md
+++ b/styleguide/src/system/components/layout/Card/demo.md
@@ -21,6 +21,23 @@ Set a header and image for the card and provide some content.
 </ds-flex>
 ```
 
+## Space
+
+Need more or less space top and bottom of the card?
+Specify with with the `space` prop
+
+```html
+<ds-card space="xx-small">
+  xx-small  
+</ds-card>
+```
+
+```html
+<ds-card space="xx-large">
+  xx-large  
+</ds-card>
+```
+
 ## Cards with footer
 
 Most commonly the footer will contain some actions connected to the content.
diff --git a/styleguide/src/system/components/typography/Chip/Chip.vue b/styleguide/src/system/components/typography/Chip/Chip.vue
new file mode 100755
index 000000000..b5baed90b
--- /dev/null
+++ b/styleguide/src/system/components/typography/Chip/Chip.vue
@@ -0,0 +1,93 @@
+<template>
+  <component
+    :is="tag"
+    class="ds-chip"
+    :class="[
+      `ds-chip-size-${size}`,
+      `ds-chip-${color}`,
+      removable && 'ds-chip-removable',
+      round && 'ds-chip-round'
+    ]"
+  >
+    <slot />
+    <button
+      v-if="removable"
+      @click="remove"
+      class="ds-chip-close">
+      <ds-icon name="close" />
+    </button>
+  </component>
+</template>
+
+<script>
+/**
+ * Chips are used to represent small blocks of information.
+ * Their most common usage is for displaying contacts or tags.
+ * @version 1.0.0
+ */
+export default {
+  name: 'DsChip',
+  props: {
+    /**
+     * The background color used for the chip.
+     * `medium, inverse, primary, success, warning, danger`
+     */
+    color: {
+      type: String,
+      default: 'medium',
+      validator: value => {
+        return value.match(/(medium|inverse|primary|success|warning|danger)/)
+      }
+    },
+    /**
+     * The size used for the text.
+     * `base, large, small`
+     */
+    size: {
+      type: String,
+      default: 'base',
+      validator: value => {
+        return value.match(/(base|large|small)/)
+      }
+    },
+    /**
+     * Whether the chip should be removeable
+     * `true, false`
+     */
+    removable: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Whether the chip should be rounded
+     * `true, false`
+     */
+    round: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * The html element name used for the text.
+     */
+    tag: {
+      type: String,
+      default: 'span'
+    }
+  },
+  methods: {
+    remove() {
+      /**
+       * Fires after user clicked the remove button.
+       *
+       * @event remove
+       */
+      this.$emit('remove')
+    }
+  }
+}
+</script>
+
+<style lang="scss" src="./style.scss">
+</style>
+
+<docs src="./demo.md"></docs>
diff --git a/styleguide/src/system/components/typography/Chip/demo.md b/styleguide/src/system/components/typography/Chip/demo.md
new file mode 100755
index 000000000..af57221f1
--- /dev/null
+++ b/styleguide/src/system/components/typography/Chip/demo.md
@@ -0,0 +1,62 @@
+## Chip colors
+
+Use different colors to emphasize or provide meaning.
+
+```
+<ds-chip>Medium</ds-chip>
+<ds-chip color="inverse">Inverse</ds-chip>
+<ds-chip color="primary">Primary</ds-chip>
+<ds-chip color="success">Success</ds-chip>
+<ds-chip color="warning">Warning</ds-chip>
+<ds-chip color="danger">Danger</ds-chip>
+```
+
+## Chip sizes
+
+Use different sizes to create hierarchy (defaults to `base`).
+
+```
+<ds-chip size="small">Small</ds-chip>
+<ds-chip size="base">Base</ds-chip>
+<ds-chip size="large">Large</ds-chip>
+```
+
+## Deletable
+
+A chip can be deletable.
+
+```
+<template>
+  <div>
+    <ds-chip
+      v-for="(tag, index) in tags"
+      @remove="removeTag(index)"
+      removable
+      :key="tag">
+      {{ tag }}
+    </ds-chip>
+    <ds-chip
+      v-for="(tag, index) in tags"
+      @remove="removeTag(index)"
+      removable
+      color="primary"
+      :key="tag">
+      {{ tag }}
+    </ds-chip>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        tags: ['Dog', 'Cat', 'Duck']
+      }
+    },
+    methods: {
+      removeTag (index) {
+        this.tags.splice(index, 1)
+      }
+    }
+  }
+</script>
+```
diff --git a/styleguide/src/system/components/typography/Chip/style.scss b/styleguide/src/system/components/typography/Chip/style.scss
new file mode 100755
index 000000000..f1f96abb7
--- /dev/null
+++ b/styleguide/src/system/components/typography/Chip/style.scss
@@ -0,0 +1,81 @@
+.ds-chip {
+  @include reset;
+  @include stack-space($space-xx-small);
+  position: relative;
+  display: inline-block;
+  font-family: $font-family-text;
+  line-height: $line-height-base;
+  padding: $space-xx-small $space-x-small;
+  border-radius: $border-radius-base;
+  font-weight: $font-weight-bold;
+  color: $text-color-base;
+  background-color: $background-color-softest;
+
+  &.ds-chip-removable {
+    padding-right: $space-x-small + $space-small;
+  }
+}
+
+.ds-chip-inverse {
+  color: $text-color-inverse;
+  background-color: $background-color-inverse-softer;
+}
+
+.ds-chip-primary {
+  color: $text-color-primary-inverse;
+  background-color: $background-color-primary;
+}
+
+.ds-chip-success {
+  color: $text-color-success-inverse;
+  background-color: $background-color-success;
+}
+
+.ds-chip-warning {
+  color: $text-color-warning-inverse;
+  background-color: $background-color-warning;
+}
+
+.ds-chip-danger {
+  color: $text-color-danger-inverse;
+  background-color: $background-color-danger;
+}
+
+.ds-chip-round {
+  border-radius: $border-radius-rounded;
+}
+
+.ds-chip-size-base {
+  font-size: $font-size-small;
+}
+
+.ds-chip-size-small {
+  font-size: $font-size-x-small;
+}
+
+.ds-chip-size-large {
+  font-size: $font-size-base;
+}
+
+.ds-chip-close {
+  @include reset-button;
+  position: absolute;
+  right: $space-xx-small;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: $font-size-x-small;
+  width: $space-small;
+  height: $space-small;
+  border-radius: $border-radius-circle;
+  //background-color: $background-color-base;
+  opacity: $opacity-soft;
+  cursor: pointer;
+  transition: all $duration-short $ease-out-sharp;
+
+  &:hover {
+    opacity: 1;
+  }
+}
\ No newline at end of file
diff --git a/styleguide/src/system/components/typography/Icon/Icon.vue b/styleguide/src/system/components/typography/Icon/Icon.vue
index 86636fdfb..0b9767e64 100644
--- a/styleguide/src/system/components/typography/Icon/Icon.vue
+++ b/styleguide/src/system/components/typography/Icon/Icon.vue
@@ -3,6 +3,7 @@
     :is="tag"
     :aria-label="ariaLabel"
     class="ds-icon"
+    :class="[size && `ds-icon-size-${size}`]"
   >
     <component
       v-if="svgComponent"
@@ -40,6 +41,19 @@ export default {
     tag: {
       type: String,
       default: 'span'
+    },
+    /**
+     * Which size should the icon have?
+     * `xx-small, x-small, small, base, large, x-large, xx-large, xxx-large`
+     */
+    size: {
+      type: String,
+      default: null,
+      validator: value => {
+        return value.match(
+          /(xx-small|x-small|small|base|large|x-large|xx-large|xxx-large)/
+        )
+      }
     }
   },
   computed: {
diff --git a/styleguide/src/system/components/typography/Icon/style.scss b/styleguide/src/system/components/typography/Icon/style.scss
index 1decda16d..2664dc697 100644
--- a/styleguide/src/system/components/typography/Icon/style.scss
+++ b/styleguide/src/system/components/typography/Icon/style.scss
@@ -17,4 +17,29 @@
   // overflow: visible;
   // Use this if the icons are build with solids
   fill: currentColor
-}
\ No newline at end of file
+}
+
+.ds-icon-size-xx-small {
+  font-size: $font-size-xx-small
+}
+.ds-icon-size-x-small {
+  font-size: $font-size-x-small
+}
+.ds-icon-size-small {
+  font-size: $font-size-small
+}
+.ds-icon-size-base {
+  font-size: $font-size-base
+}
+.ds-icon-size-large {
+  font-size: $font-size-large
+}
+.ds-icon-size-x-large {
+  font-size: $font-size-x-large
+}
+.ds-icon-size-xx-large {
+  font-size: $font-size-xx-large
+}
+.ds-icon-size-xxx-large {
+  font-size: $font-size-xxx-large
+}
diff --git a/styleguide/src/system/icons/svg/angellist.svg b/styleguide/src/system/icons/svg/angellist.svg
new file mode 100755
index 000000000..34123f5f0
--- /dev/null
+++ b/styleguide/src/system/icons/svg/angellist.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>angellist</title>
+<path d="M12.813 4c0.312 0.021 0.615 0.118 0.875 0.25 0.521 0.265 0.919 0.67 1.281 1.125 0.725 0.91 1.311 2.103 1.813 3.313 0.207 0.498 0.39 0.985 0.563 1.469 0.109-0.401 0.21-0.808 0.344-1.219 0.391-1.201 0.902-2.395 1.594-3.344 0.346-0.474 0.731-0.895 1.25-1.188s1.174-0.421 1.813-0.281c0.628 0.138 1.091 0.677 1.281 1.156s0.24 0.97 0.25 1.5c0.020 1.060-0.168 2.29-0.406 3.5-0.385 1.96-0.863 3.535-1.063 4.188 0.328 0.248 0.624 0.516 0.844 0.813 1.025 1.382 0.75 3.010 0.75 3.375 0 4.219-1.55 6.731-3.406 8s-3.874 1.344-4.75 1.344c-0.805 0-2.922 0.024-4.938-0.906s-3.906-3.011-3.906-6.563c0-1.078 0.261-1.996 0.906-2.625 0.403-0.392 0.929-0.57 1.469-0.625-0.205-0.548-0.361-1.162-0.281-1.844 0.089-0.757 0.563-1.558 1.344-2.063 0.319-0.206 0.672-0.326 1.031-0.344 0.169-0.008 0.336 0.001 0.5 0.031-0.273-0.768-0.577-1.665-0.844-2.625-0.325-1.173-0.597-2.383-0.625-3.469-0.014-0.543 0.037-1.059 0.219-1.563s0.577-1.017 1.156-1.25c0.303-0.122 0.625-0.177 0.938-0.156zM12.656 5.969c-0.013-0.002-0.018 0.026-0.031 0.031 0.004 0.007-0.006 0.024-0.031 0.094-0.051 0.14-0.104 0.453-0.094 0.844 0.020 0.781 0.229 1.879 0.531 2.969 0.497 1.791 1.081 3.25 1.313 3.813 0.442-0.431 1.082-0.719 1.781-0.719h0.063c-0.255-0.9-0.658-2.135-1.25-3.563-0.465-1.121-1.026-2.178-1.531-2.813-0.253-0.317-0.492-0.526-0.625-0.594-0.066-0.034-0.103-0.060-0.125-0.063zM21.656 6.125c-0.047-0-0.102 0.001-0.156 0.031-0.168 0.095-0.391 0.304-0.625 0.625-0.468 0.641-0.925 1.687-1.281 2.781-0.488 1.498-0.754 2.761-0.906 3.594 0.721 0.094 1.355 0.232 1.906 0.406 0.238-0.82 0.595-2.103 0.906-3.688 0.224-1.139 0.39-2.277 0.375-3.063-0.006-0.332-0.054-0.548-0.094-0.688-0.040 0.001-0.078 0-0.125 0zM16.125 15c-0.248 0-0.319 0.061-0.406 0.156s-0.169 0.254-0.188 0.469c-0.015 0.179 0.007 0.355 0.063 0.5 0.046 0.070 0.080 0.147 0.125 0.219 0.020 0.024 0.040 0.042 0.063 0.063 0.062 0.056 0.14 0.102 0.219 0.125 1.258 0.369 2.844 0.844 2.844 0.844 0.399 0.115 0.723 0.546 0.723 0.961 0 0.444-0.352 0.881-0.785 0.977 0 0-0.565 0.117-1.125 0.469-0.348 0.218-0.665 0.461-0.844 0.813-0.109 0.214-0.156 0.468-0.156 0.781 0 0.866 0.241 1.414 0.469 1.75s0.375 0.406 0.375 0.406l-1.094 1.656s-0.515-0.316-0.938-0.938c-0.189-0.278-0.354-0.651-0.5-1.063-0.079 0.184-0.099 0.39-0.219 0.531-0.466 0.55-1.139 0.906-1.906 0.906-0.74 0-1.409-0.369-1.906-0.813s-0.89-0.987-1.281-1.594l1.688-1.094c0.346 0.537 0.672 0.982 0.938 1.219s0.412 0.281 0.563 0.281c0.124 0 0.312-0.113 0.375-0.188-0.216-0.366-0.428-0.696-0.656-1-0.988-1.312-2.049-2.044-2.656-2.188-0.376-0.089-0.483-0.046-0.594 0.063s-0.313 0.471-0.313 1.219c0 2.907 1.245 4.056 2.75 4.75s3.296 0.719 4.094 0.719c0.727 0 2.304-0.097 3.625-1s2.531-2.589 2.531-6.344c0-0.822 0.143-1.5-0.344-2.156s-1.846-1.5-5.531-1.5zM11.5 15.031c-0.34 0.22-0.376 0.367-0.406 0.625s0.025 0.662 0.188 1.063c0.324 0.802 0.938 1.531 0.938 1.531 0.663 0.506 1.276 1.177 1.875 2l0.063-0.031c-0.196-0.257-0.218-0.129-0.063-0.125s0.414-0.041 0.594-0.125 0.279-0.181 0.313-0.25 0.064-0.147-0.063-0.469c-0.536-1.37-1.376-2.666-2.156-3.438-0.39-0.386-0.765-0.63-1-0.719s-0.239-0.090-0.281-0.063z"></path>
+</svg>
diff --git a/styleguide/src/system/icons/svg/balance-scale.svg b/styleguide/src/system/icons/svg/balance-scale.svg
new file mode 100755
index 000000000..f5e446fd2
--- /dev/null
+++ b/styleguide/src/system/icons/svg/balance-scale.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>balance-scale</title>
+<path d="M16 5c1.292 0 2.394 0.844 2.813 2h7.188v2h-1.406l0.281 0.5 4 7 0.125 0.25v0.25c0 2.75-2.25 5-5 5s-5-2.25-5-5v-0.25l0.125-0.25 4-7 0.281-0.5h-4.594c-0.304 0.84-0.973 1.509-1.813 1.813v13.188h4v2h-10v-2h4v-13.188c-0.842-0.304-1.507-0.969-1.813-1.813h-4.594l0.281 0.5 4 7 0.125 0.25v0.25c0 2.75-2.251 5-5 5s-5-2.25-5-5v-0.25l0.125-0.25 4-7 0.281-0.5h-1.406v-2h7.188c0.418-1.156 1.521-2 2.813-2zM16 7c-0.564 0-1 0.436-1 1s0.436 1 1 1 1-0.436 1-1-0.436-1-1-1zM8 12.031l-2.281 3.969h4.563zM24 12.031l-2.281 3.969h4.563zM5.25 18c0.402 1.161 1.444 2 2.75 2s2.348-0.839 2.75-2h-5.5zM21.25 18c0.402 1.161 1.444 2 2.75 2s2.348-0.839 2.75-2h-5.5z"></path>
+</svg>
diff --git a/styleguide/src/system/icons/svg/bell.svg b/styleguide/src/system/icons/svg/bell.svg
new file mode 100755
index 000000000..ee58c443c
--- /dev/null
+++ b/styleguide/src/system/icons/svg/bell.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>bell</title>
+<path d="M15 3c1.105 0 2 0.895 2 2 0 0.085-0.021 0.168-0.031 0.25 3.521 0.924 6.031 4.273 6.031 8.031v8.719c0 0.565 0.435 1 1 1h1v2h-7.188c0.114 0.316 0.188 0.647 0.188 1 0 1.645-1.355 3-3 3s-3-1.355-3-3c0-0.353 0.073-0.684 0.188-1h-7.188v-2h1c0.565 0 1-0.435 1-1v-9c0-3.726 2.574-6.866 6.031-7.75-0.010-0.082-0.031-0.165-0.031-0.25 0-1.105 0.895-2 2-2zM14.563 7c-3.118 0.226-5.563 2.824-5.563 6v9c0 0.353-0.073 0.684-0.188 1h12.375c-0.114-0.316-0.188-0.647-0.188-1v-8.719c0-3.319-2.546-6.183-5.813-6.281-0.064-0.002-0.124-0-0.188 0-0.148 0-0.292-0.011-0.438 0zM15 25c-0.564 0-1 0.436-1 1s0.436 1 1 1 1-0.436 1-1-0.436-1-1-1z"></path>
+</svg>
diff --git a/styleguide/src/system/icons/svg/bullhorn.svg b/styleguide/src/system/icons/svg/bullhorn.svg
new file mode 100755
index 000000000..95e0d21d3
--- /dev/null
+++ b/styleguide/src/system/icons/svg/bullhorn.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>bullhorn</title>
+<path d="M28 3.031v9.156c1.156 0.418 2 1.521 2 2.813s-0.844 2.394-2 2.813v9.156l-1.594-1.156s-2.007-1.443-4.875-2.906-6.587-2.906-9.813-2.906h-3.375l1.625 5.719 0.344 1.281h-6.063l-0.219-0.719-2-7-0.031-0.156v-9.125h9.719c3.27 0 6.987-1.412 9.844-2.875s4.844-2.938 4.844-2.938zM26 6.75c-0.82 0.558-1.459 1.064-3.531 2.125-2.929 1.5-6.726 3.050-10.469 3.125v6c3.708 0.073 7.499 1.595 10.438 3.094 2.078 1.060 2.735 1.567 3.563 2.125v-16.469zM4 12v6h6v-6h-6zM4.344 20l1.406 5h1.906l-1.406-5h-1.906z"></path>
+</svg>
diff --git a/styleguide/src/system/icons/svg/gamepad.svg b/styleguide/src/system/icons/svg/gamepad.svg
new file mode 100755
index 000000000..85a2b7434
--- /dev/null
+++ b/styleguide/src/system/icons/svg/gamepad.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>gamepad</title>
+<path d="M16 7c6.383 0 11.969 2.063 11.969 2.063l0.594 0.219 0.063 0.594 1.344 10.25c0.365 2.835-1.665 5.479-4.5 5.844-2.639 0.34-5.005-1.44-5.625-3.969h-7.688c-0.619 2.529-2.985 4.309-5.625 3.969-2.835-0.365-4.865-3.009-4.5-5.844l1.344-10.25 0.063-0.594 0.594-0.219s5.586-2.063 11.969-2.063zM16 9c-5.486 0-10.007 1.524-10.75 1.781l-1.219 9.625c-0.227 1.763 0.987 3.335 2.75 3.563s3.368-0.987 3.594-2.75l0.031-0.344 0.125-0.875h10.938l0.125 0.875 0.031 0.344c0.227 1.763 1.832 2.977 3.594 2.75 1.763-0.227 2.977-1.8 2.75-3.563l-1.219-9.625c-0.743-0.258-5.264-1.781-10.75-1.781zM9 12h2v2h2v2h-2v2h-2v-2h-2v-2h2v-2zM22 12c0.552 0 1 0.448 1 1s-0.448 1-1 1-1-0.448-1-1 0.448-1 1-1zM20 14c0.552 0 1 0.448 1 1s-0.448 1-1 1-1-0.448-1-1 0.448-1 1-1zM24 14c0.552 0 1 0.448 1 1s-0.448 1-1 1-1-0.448-1-1 0.448-1 1-1zM22 16c0.552 0 1 0.448 1 1s-0.448 1-1 1-1-0.448-1-1 0.448-1 1-1z"></path>
+</svg>
diff --git a/styleguide/src/system/icons/svg/graduation-cap.svg b/styleguide/src/system/icons/svg/graduation-cap.svg
new file mode 100755
index 000000000..5d35226d3
--- /dev/null
+++ b/styleguide/src/system/icons/svg/graduation-cap.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>graduation-cap</title>
+<path d="M16 6.781l0.313 0.094 15.344 5.125-2.844 0.938-2.813 0.938v5.125c0 0.82-0.499 1.5-1.094 1.969s-1.332 0.798-2.219 1.094c-1.773 0.591-4.112 0.938-6.688 0.938s-4.914-0.346-6.688-0.938c-0.887-0.296-1.624-0.625-2.219-1.094s-1.094-1.149-1.094-1.969v-5.125l-2-0.656v8.063c0.597 0.346 1 0.979 1 1.719 0 1.105-0.895 2-2 2s-2-0.895-2-2c0-0.74 0.403-1.373 1-1.719v-8.75l-1.656-0.531 2.844-0.938 12.5-4.188zM16 8.875l-9.375 3.125 9.375 3.125 9.375-3.125zM8 14.563v4.438c0 0.009-0.004 0.126 0.313 0.375s0.883 0.565 1.625 0.813c1.484 0.495 3.667 0.813 6.063 0.813s4.579-0.318 6.063-0.813c0.742-0.247 1.309-0.563 1.625-0.813s0.313-0.366 0.313-0.375v-4.438l-7.688 2.563-0.313 0.094-0.313-0.094z"></path>
+</svg>
diff --git a/styleguide/src/system/icons/svg/leaf.svg b/styleguide/src/system/icons/svg/leaf.svg
new file mode 100755
index 000000000..52b1693ba
--- /dev/null
+++ b/styleguide/src/system/icons/svg/leaf.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>leaf</title>
+<path d="M25.031 4l0.313 1.094s1.656 5.616 1.656 13.438c0 3.995-0.921 6.637-2.344 8.281s-3.306 2.188-4.844 2.188c-1.728 0-3.206-0.784-4.375-1.594s-2.165-1.731-2.344-1.844l1.063-1.688c0.704 0.445 1.398 1.177 2.406 1.875s2.173 1.25 3.25 1.25c1.083 0 2.301-0.33 3.313-1.5s1.875-3.282 1.875-6.969c0-6.501-1.022-10.659-1.344-11.875-3.442 1.276-7.451 1.856-10.688 3-1.789 0.632-3.284 1.437-4.313 2.563s-1.656 2.577-1.656 4.781c0 1.938 1.058 3.143 2.219 3.969 0.603 0.429 1.187 0.698 1.625 0.875 1.72-2.744 4.356-6.157 8.438-10.531l1.438 1.375c-6.808 7.295-9.428 11.855-10.375 14.625-0.473 1.385-0.53 2.32-0.5 3s0.217 1.058 0.156 1.781l-2-0.188c-0.002 0.020-0.116-0.597-0.156-1.5s0.047-2.151 0.594-3.75c0.303-0.885 0.756-1.918 1.375-3.063-0.512-0.228-1.12-0.551-1.75-1-1.477-1.051-3.063-2.897-3.063-5.594 0-2.605 0.833-4.643 2.188-6.125s3.168-2.402 5.125-3.094c3.913-1.384 8.509-1.908 11.688-3.313z"></path>
+</svg>
diff --git a/styleguide/src/system/icons/svg/mouse-pointer.svg b/styleguide/src/system/icons/svg/mouse-pointer.svg
new file mode 100755
index 000000000..2917ef518
--- /dev/null
+++ b/styleguide/src/system/icons/svg/mouse-pointer.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>mouse-pointer</title>
+<path d="M9 2.594l1.719 1.688 16.125 16.156-7.094 0.875 1.844 3.625 0.438 0.906-0.875 0.438-4 2.063-0.438-0.906-2.031-4.031-4.031 3.375-1.656 1.375v-25.563zM11 7.438v16.406l4.313-3.625 0.594 1.125 2.156 4.313 1.313-0.688-2.063-4-0.656-1.281 1.406-0.188 4.5-0.531z"></path>
+</svg>
diff --git a/styleguide/src/system/icons/svg/paint-brush.svg b/styleguide/src/system/icons/svg/paint-brush.svg
new file mode 100755
index 000000000..03b06aac6
--- /dev/null
+++ b/styleguide/src/system/icons/svg/paint-brush.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>paint-brush</title>
+<path d="M24.813 4.031c0.837 0 1.648 0.335 2.281 0.969 1.267 1.267 1.267 3.327 0 4.594v0.031l-12.688 12.5-0.5 0.469c-0.124 0.793-0.46 1.572-1.063 2.188l-0.031 0.031c-1.318 1.318-3.898 3.188-7.813 3.188h-1.844l1-1.563c0.967-1.474 1.37-2.804 1.688-4s0.479-2.31 1.313-3.219c0.565-0.616 1.282-0.985 2.031-1.125l0.625-0.594 12.688-12.5c0.633-0.633 1.476-0.969 2.313-0.969zM24.813 6c-0.313 0-0.64 0.14-0.906 0.406l-9.063 8.906 1.813 1.813 9.031-8.938c0.533-0.533 0.533-1.248 0-1.781-0.267-0.267-0.562-0.406-0.875-0.406zM13.406 16.719l-1.5 1.469 1.813 1.813 1.5-1.469zM9.969 20.031c-0.506-0.014-0.997 0.153-1.344 0.531-0.267 0.291-0.511 1.152-0.844 2.406-0.216 0.814-0.55 1.794-1.031 2.844 2.249-0.421 3.787-1.537 4.656-2.406 0.827-0.827 0.808-2.069 0.031-2.781-0.417-0.383-0.963-0.579-1.469-0.594z"></path>
+</svg>
diff --git a/styleguide/src/system/icons/svg/paw.svg b/styleguide/src/system/icons/svg/paw.svg
new file mode 100755
index 000000000..364ff1918
--- /dev/null
+++ b/styleguide/src/system/icons/svg/paw.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>paw</title>
+<path d="M12.5 5c1.069 0 2.002 0.608 2.594 1.438s0.906 1.903 0.906 3.063-0.314 2.233-0.906 3.063-1.525 1.438-2.594 1.438-2.002-0.608-2.594-1.438-0.906-1.903-0.906-3.063 0.314-2.233 0.906-3.063 1.525-1.438 2.594-1.438zM16 9.5c0-1.159 0.314-2.233 0.906-3.063s1.525-1.438 2.594-1.438 2.002 0.608 2.594 1.438 0.906 1.903 0.906 3.063-0.314 2.233-0.906 3.063-1.525 1.438-2.594 1.438-2.002-0.608-2.594-1.438-0.906-1.903-0.906-3.063zM12.5 7c-0.312 0-0.656 0.156-0.969 0.594s-0.531 1.133-0.531 1.906 0.219 1.469 0.531 1.906 0.657 0.594 0.969 0.594 0.656-0.156 0.969-0.594 0.531-1.133 0.531-1.906-0.219-1.469-0.531-1.906-0.657-0.594-0.969-0.594zM19.5 7c-0.312 0-0.656 0.156-0.969 0.594s-0.531 1.133-0.531 1.906 0.219 1.469 0.531 1.906 0.657 0.594 0.969 0.594 0.656-0.156 0.969-0.594 0.531-1.133 0.531-1.906-0.219-1.469-0.531-1.906-0.657-0.594-0.969-0.594zM7.5 12c1.069 0 2.002 0.608 2.594 1.438s0.906 1.903 0.906 3.063-0.314 2.233-0.906 3.063-1.525 1.438-2.594 1.438-2.002-0.608-2.594-1.438-0.906-1.903-0.906-3.063 0.314-2.233 0.906-3.063 1.525-1.438 2.594-1.438zM24.5 12c1.069 0 2.002 0.608 2.594 1.438s0.906 1.903 0.906 3.063-0.314 2.233-0.906 3.063-1.525 1.438-2.594 1.438-2.002-0.608-2.594-1.438-0.906-1.903-0.906-3.063 0.314-2.233 0.906-3.063 1.525-1.438 2.594-1.438zM7.5 14c-0.312 0-0.656 0.156-0.969 0.594s-0.531 1.133-0.531 1.906 0.219 1.469 0.531 1.906 0.657 0.594 0.969 0.594 0.656-0.156 0.969-0.594 0.531-1.133 0.531-1.906-0.219-1.469-0.531-1.906-0.657-0.594-0.969-0.594zM24.5 14c-0.312 0-0.656 0.156-0.969 0.594s-0.531 1.133-0.531 1.906 0.219 1.469 0.531 1.906 0.657 0.594 0.969 0.594 0.656-0.156 0.969-0.594 0.531-1.133 0.531-1.906-0.219-1.469-0.531-1.906-0.657-0.594-0.969-0.594zM16 16c1.339 0 2.29 0.861 2.75 1.625s0.73 1.417 0.969 1.656c0.142 0.142 1.126 0.562 2.125 1.094 0.5 0.266 1.012 0.582 1.438 1.094s0.719 1.238 0.719 2.031c0 1.921-1.579 3.5-3.5 3.5-0.867 0-1.77-0.279-2.656-0.531s-1.844-0.469-1.844-0.469-0.957 0.216-1.844 0.469-1.79 0.531-2.656 0.531c-1.921 0-3.5-1.579-3.5-3.5 0-0.813 0.291-1.538 0.719-2.063s0.935-0.869 1.438-1.125c1.006-0.513 1.97-0.877 2.125-1.031 0.264-0.264 0.544-0.897 1-1.656s1.385-1.625 2.719-1.625zM16 18c-0.667 0-0.737 0.135-1.031 0.625s-0.514 1.358-1.25 2.094c-0.845 0.845-1.881 0.995-2.625 1.375-0.372 0.19-0.677 0.39-0.844 0.594s-0.25 0.41-0.25 0.813c0 0.841 0.659 1.5 1.5 1.5 0.29 0 1.224-0.221 2.094-0.469s1.59-0.531 2.406-0.531c0.817 0 1.536 0.284 2.406 0.531s1.803 0.469 2.094 0.469c0.841 0 1.5-0.659 1.5-1.5 0-0.353-0.077-0.542-0.25-0.75s-0.464-0.423-0.844-0.625c-0.759-0.404-1.801-0.583-2.625-1.406-0.727-0.727-0.952-1.568-1.25-2.063s-0.37-0.656-1.031-0.656z"></path>
+</svg>
diff --git a/styleguide/src/system/icons/svg/recycle.svg b/styleguide/src/system/icons/svg/recycle.svg
new file mode 100755
index 000000000..9bbdb3ad3
--- /dev/null
+++ b/styleguide/src/system/icons/svg/recycle.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>recycle</title>
+<path d="M16 3.969c1.055 0 2.118 0.517 2.75 1.5l3.125 5.063 1.438-0.844v5.313l-4.625-2.594 1.5-0.875-3.125-5c-0.53-0.824-1.553-0.806-2.094 0l-2.813 4.594-1.719-1.031 2.813-4.625c0.632-0.983 1.695-1.5 2.75-1.5zM10.406 12.094v5.313l-1.531-0.938-2.625 4.25v0.031l-0.031 0.031c-0.665 0.968 0.015 2.219 1.281 2.219h5.5v2h-5.5c-2.712 0-4.409-3.084-2.938-5.313 0.012-0.018-0.012-0.045 0-0.063l0.031 0.031 2.563-4.219-1.25-0.75zM25.063 15.656l2.5 4v0.031c1.36 2.312-0.332 5.313-2.969 5.313h-5.594v2l-4.906-3 4.906-3v2h5.594c1.163 0 1.89-1.193 1.25-2.281l-2.5-4z"></path>
+</svg>
diff --git a/styleguide/src/system/icons/svg/toggle-off.svg b/styleguide/src/system/icons/svg/toggle-off.svg
new file mode 100755
index 000000000..c69ce1b5f
--- /dev/null
+++ b/styleguide/src/system/icons/svg/toggle-off.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>toggle-off</title>
+<path d="M9 7h14c4.959 0 9 4.041 9 9s-4.041 9-9 9h-14c-0.94 0-1.835-0.137-2.688-0.406-0.282-0.088-0.543-0.198-0.813-0.313-2.413-1.023-4.298-3.072-5.094-5.594-0.003-0.009 0.003-0.022 0-0.031-0.264-0.845-0.406-1.727-0.406-2.656 0-0.94 0.137-1.835 0.406-2.688 0.088-0.282 0.198-0.543 0.313-0.813 1.023-2.413 3.072-4.298 5.594-5.094 0.282-0.088 0.582-0.159 0.875-0.219 0.585-0.12 1.193-0.188 1.813-0.188zM9 9c-3.635 0-6.612 2.743-6.969 6.281-0.024 0.236-0.031 0.476-0.031 0.719 0 3.878 3.123 7 7 7s7-3.122 7-7-3.122-7-7-7zM14.625 9c2.051 1.652 3.375 4.171 3.375 7s-1.324 5.348-3.375 7h8.375c3.878 0 7-3.122 7-7s-3.122-7-7-7h-8.375z"></path>
+</svg>
diff --git a/styleguide/src/system/icons/svg/toggle-on.svg b/styleguide/src/system/icons/svg/toggle-on.svg
new file mode 100755
index 000000000..280c7d249
--- /dev/null
+++ b/styleguide/src/system/icons/svg/toggle-on.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>toggle-on</title>
+<path d="M9 7h14c4.959 0 9 4.041 9 9s-4.041 9-9 9h-14c-4.962 0-9-4.037-9-9s4.038-9 9-9zM23 9c-3.878 0-7 3.122-7 7s3.122 7 7 7 7-3.122 7-7-3.122-7-7-7z"></path>
+</svg>
diff --git a/styleguide/src/system/icons/svg/tree.svg b/styleguide/src/system/icons/svg/tree.svg
new file mode 100755
index 000000000..e0534af45
--- /dev/null
+++ b/styleguide/src/system/icons/svg/tree.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>tree</title>
+<path d="M16 3.594l0.719 0.688 5.938 5.969 1 0.969-1.281 0.625s-1.015 0.366-2.438 0.688l4.406 4.406 1 0.969-1.25 0.625s-1.079 0.304-1.625 0.5l3.594 3.594 0.969 1-1.219 0.625s-2.462 1.176-6.813 1.594v3.156h-2v-3.031c-0.335 0.011-0.648 0.031-1 0.031s-0.666-0.021-1-0.031v3.031h-2v-3.156c-4.343-0.417-6.781-1.594-6.781-1.594l-1.25-0.625 0.969-1 3.594-3.594c-0.546-0.196-1.625-0.5-1.625-0.5l-1.25-0.625 1-0.969 4.406-4.406c-1.422-0.322-2.438-0.688-2.438-0.688l-1.281-0.625 1-0.969 5.938-5.969zM16 6.438l-4 3.969c0.593 0.199 0.714 0.356 2.188 0.5l1.813 0.188 1.813-0.188c1.474-0.144 1.594-0.301 2.188-0.5zM16 11.438l-1.188 1.156-4.594 4.594c0.465 0.163 0.453 0.219 1.406 0.406l1.844 0.375-1.344 1.313-3.625 3.656c1.287 0.457 3.459 1.063 7.5 1.063 4.077 0 6.258-0.607 7.531-1.063l-3.656-3.656-1.344-1.313 1.844-0.375c0.953-0.188 0.941-0.243 1.406-0.406l-4.594-4.594z"></path>
+</svg>
diff --git a/styleguide/src/system/icons/svg/university.svg b/styleguide/src/system/icons/svg/university.svg
new file mode 100755
index 000000000..cddb5775a
--- /dev/null
+++ b/styleguide/src/system/icons/svg/university.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>university</title>
+<path d="M16 3.906l12.375 5.156 0.625 0.281v2.656h-2v11h2v5h-26v-5h2v-11h-2v-2.656l0.625-0.281 12-5zM16 6.094l-9.375 3.906h18.75zM7 12v11h2v-11h-2zM11 12v11h2v-11h-2zM15 12v11h2v-11h-2zM19 12v11h2v-11h-2zM23 12v11h2v-11h-2zM5 25v1h22v-1h-22z"></path>
+</svg>
diff --git a/styleguide/src/system/styles/shared/_form.scss b/styleguide/src/system/styles/shared/_form.scss
index 7e861b542..f40cac326 100644
--- a/styleguide/src/system/styles/shared/_form.scss
+++ b/styleguide/src/system/styles/shared/_form.scss
@@ -1,23 +1,27 @@
 /* FORM VARIABLES / MIXINS
 --------------------------------------------- */
 
+$input-font-size-base: $font-size-base;
 $input-border-size: $border-size-base;
 $input-padding-vertical: $space-x-small;
 $input-height: calc(
   #{$font-size-base * $line-height-base} + #{($input-padding-vertical + $input-border-size) * 2}
 );
 
-$input-padding-vertical-small: $space-xx-small;
+$input-font-size-small: $font-size-base;
+$input-padding-vertical-small: $space-xxx-small;
 $input-height-small: calc(
-  #{$font-size-small * $line-height-base} + #{($input-padding-vertical-small + $input-border-size) * 2}
+  #{$font-size-base * $line-height-base} + #{($input-padding-vertical-small + $input-border-size) * 2}
 );
 
+$input-font-size-large: $font-size-large;
 $input-padding-vertical-large: $space-x-small;
 $input-height-large: calc(
-  #{$font-size-large * $line-height-base} + #{($input-padding-vertical-large + $input-border-size) * 2}
+  #{$input-font-size-large * $line-height-base} + #{($input-padding-vertical-large + $input-border-size) * 2}
 );
 
+// $input-font-size-large: $font-size-x-large;
 $input-padding-vertical-x-large: $space-small;
 $input-height-x-large: calc(
-  #{$font-size-x-large * $line-height-base} + #{($input-padding-vertical-x-large + $input-border-size) * 2}
+  #{$input-font-size-large * $line-height-base} + #{($input-padding-vertical-x-large + $input-border-size) * 2}
 );
diff --git a/styleguide/src/system/styles/shared/_mixins.scss b/styleguide/src/system/styles/shared/_mixins.scss
index 18c51c777..922577750 100644
--- a/styleguide/src/system/styles/shared/_mixins.scss
+++ b/styleguide/src/system/styles/shared/_mixins.scss
@@ -2,15 +2,11 @@
 --------------------------------------------- */
 
 /* AUTO SCALING FOR TYPE WITH MIN/MAX SIZES
-
   @param {Number}  $responsive  - Viewport-based size
   @param {Number}  $min         - Minimum font size (px)
   @param {Number}  $max         - Maximum font size (px) (optional)
-
   @param {Number}  $fallback    - Fallback for viewport-based units (optional)
-
   @example SCSS - 5vw size, 35px min & 150px max size + 50px fallback:
-
   @include responsive-font(5vw, 35px, 150px, 50px);
 */
 @mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
@@ -44,6 +40,32 @@
   margin: 0;
 }
 
+@mixin reset-list {
+  @include reset;
+  list-style: none;
+}
+
+@mixin reset-button {
+  @include reset;
+  border: 0;
+  width: auto;
+  overflow: visible;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: normal;
+  outline: none;
+  font-smoothing: inherit;
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+  -webkit-appearance: none;
+
+  &::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+  }
+}
+
 @mixin clearfix {
   &:before, &:after {
     display: table;
@@ -104,4 +126,4 @@
     border-bottom-left-radius: $size;
     border-bottom-right-radius: $size;
   }
-}
\ No newline at end of file
+}
diff --git a/styleguide/src/system/tokens/color.yml b/styleguide/src/system/tokens/color.yml
index f1648a448..2ba577e73 100644
--- a/styleguide/src/system/tokens/color.yml
+++ b/styleguide/src/system/tokens/color.yml
@@ -291,6 +291,10 @@ props:
     value: *color-neutral-80
     category: border-color
 
+  - name: border-color-light
+    value: *color-neutral-90
+    category: border-color
+
   - name: border-color-active
     value: *color-primary
     category: border-color
diff --git a/styleguide/src/system/tokens/font-size.yml b/styleguide/src/system/tokens/font-size.yml
index 9fd1a31c9..0189ed2da 100644
--- a/styleguide/src/system/tokens/font-size.yml
+++ b/styleguide/src/system/tokens/font-size.yml
@@ -17,7 +17,7 @@ props:
   - name: font-size-base
     value: "1rem"
   - name: font-size-body
-    value: "16px"
+    value: "15px"
   - name: font-size-small
     value: "0.8rem"
   - name: font-size-x-small
diff --git a/styleguide/src/system/tokens/z-index.yml b/styleguide/src/system/tokens/z-index.yml
index b73e233d0..90937ddb6 100644
--- a/styleguide/src/system/tokens/z-index.yml
+++ b/styleguide/src/system/tokens/z-index.yml
@@ -6,6 +6,8 @@
 props:
   - name: z-index-modal
     value: "9999"
+  - name: z-index-dropdown
+    value: "8888"
   - name: z-index-page-submenu
     value: "2500"
   - name: z-index-page-header
diff --git a/yarn.lock b/yarn.lock
index 2a62fafdc..56cde3e7d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -693,6 +693,15 @@
     vue-apollo "^3.0.0-beta.25"
     vue-cli-plugin-apollo "^0.17.0"
 
+"@nuxtjs/axios@^5.3.4":
+  version "5.3.4"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/axios/-/axios-5.3.4.tgz#f04c16188ec967606e265ae8e4c6ee0fcc22d0af"
+  dependencies:
+    "@nuxtjs/proxy" "^1.3.0"
+    axios "^0.18.0"
+    axios-retry "^3.1.1"
+    consola "^1.4.4"
+
 "@nuxtjs/babel-preset-app@^0.7.0":
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/@nuxtjs/babel-preset-app/-/babel-preset-app-0.7.0.tgz#b208a95e0a053259c29b99a9e4ca9ea2604dbdd2"
@@ -732,6 +741,13 @@
     esm "^3.0.79"
     node-fetch "^2.2.0"
 
+"@nuxtjs/proxy@^1.3.0":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/proxy/-/proxy-1.3.1.tgz#7d76179aff321491f126d6560434579a4dc7a89a"
+  dependencies:
+    consola "^1.4.4"
+    http-proxy-middleware "^0.19.0"
+
 "@nuxtjs/youch@^4.2.3":
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/@nuxtjs/youch/-/youch-4.2.3.tgz#36f8b22df5a0efaa81373109851e1d857aca6bed"
@@ -1459,6 +1475,19 @@ aws4@^1.6.0, aws4@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
 
+axios-retry@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/axios-retry/-/axios-retry-3.1.1.tgz#88d2971f671a9023b21d887c5dcac6c54f332cde"
+  dependencies:
+    is-retry-allowed "^1.1.0"
+
+axios@^0.18.0:
+  version "0.18.0"
+  resolved "http://registry.npmjs.org/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102"
+  dependencies:
+    follow-redirects "^1.3.0"
+    is-buffer "^1.1.5"
+
 babel-code-frame@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -1508,21 +1537,6 @@ babel-plugin-transform-vue-jsx@^4.0.1:
   dependencies:
     esutils "^2.0.2"
 
-babel-polyfill@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.26.0.tgz#379937abc67d7895970adc621f284cd966cf2153"
-  dependencies:
-    babel-runtime "^6.26.0"
-    core-js "^2.5.0"
-    regenerator-runtime "^0.10.5"
-
-babel-runtime@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
-  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.11.0"
-
 babylon@7.0.0-beta.44:
   version "7.0.0-beta.44"
   resolved "http://registry.npmjs.org/babylon/-/babylon-7.0.0-beta.44.tgz#89159e15e6e30c5096e22d738d8c0af8a0e8ca1d"
@@ -2138,6 +2152,15 @@ consola@^1.4.3:
     lodash "^4.17.5"
     std-env "^1.1.0"
 
+consola@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/consola/-/consola-1.4.4.tgz#cf5eda375c0e99df8970cc8f5e98be023da24ce0"
+  dependencies:
+    chalk "^2.3.2"
+    figures "^2.0.0"
+    lodash "^4.17.5"
+    std-env "^1.1.0"
+
 console-browserify@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
@@ -2195,7 +2218,7 @@ copy-descriptor@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
 
-core-js@^2.4.0, core-js@^2.5.0, core-js@^2.5.7:
+core-js@^2.5.7:
   version "2.5.7"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e"
 
@@ -2515,6 +2538,12 @@ debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3:
   dependencies:
     ms "2.0.0"
 
+debug@=3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  dependencies:
+    ms "2.0.0"
+
 debug@^3.1.0:
   version "3.2.5"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.5.tgz#c2418fbfd7a29f4d4f70ff4cea604d4b64c46407"
@@ -3007,7 +3036,7 @@ event-stream@~3.3.0:
     stream-combiner "^0.2.2"
     through "^2.3.8"
 
-eventemitter3@^3.1.0:
+eventemitter3@^3.0.0, eventemitter3@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.0.tgz#090b4d6cdbd645ed10bf750d4b5407942d7ba163"
 
@@ -3289,6 +3318,12 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.1"
     readable-stream "^2.0.4"
 
+follow-redirects@^1.0.0, follow-redirects@^1.3.0:
+  version "1.5.9"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.9.tgz#c9ed9d748b814a39535716e531b9196a845d89c6"
+  dependencies:
+    debug "=3.1.0"
+
 for-in@^0.1.3:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"
@@ -3736,6 +3771,23 @@ http-errors@1.6.3, http-errors@~1.6.2, http-errors@~1.6.3:
     setprototypeof "1.1.0"
     statuses ">= 1.4.0 < 2"
 
+http-proxy-middleware@^0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.19.0.tgz#40992b5901dc44bc7bc3795da81b0b248eca02d8"
+  dependencies:
+    http-proxy "^1.17.0"
+    is-glob "^4.0.0"
+    lodash "^4.17.10"
+    micromatch "^3.1.10"
+
+http-proxy@^1.17.0:
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.17.0.tgz#7ad38494658f84605e2f6db4436df410f4e5be9a"
+  dependencies:
+    eventemitter3 "^3.0.0"
+    follow-redirects "^1.0.0"
+    requires-port "^1.0.0"
+
 http-signature@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
@@ -4089,7 +4141,7 @@ is-resolvable@^1.0.0, is-resolvable@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
 
-is-retry-allowed@^1.0.0:
+is-retry-allowed@^1.0.0, is-retry-allowed@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz#11a060568b67339444033d0125a61a20d564fb34"
 
@@ -6278,11 +6330,7 @@ regenerate@^1.2.1, regenerate@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
 
-regenerator-runtime@^0.10.5:
-  version "0.10.5"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658"
-
-regenerator-runtime@^0.11.0, regenerator-runtime@^0.11.1:
+regenerator-runtime@^0.11.1:
   version "0.11.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
 
@@ -6460,6 +6508,10 @@ require-uncached@^1.0.3:
     caller-path "^0.1.0"
     resolve-from "^1.0.0"
 
+requires-port@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+
 resolve-from@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"

From 3571ab66b8edacc6c4eda248546576b2a6fad1b8 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 13 Nov 2018 13:04:52 +0100
Subject: [PATCH 02/46] improved navigation and made profile top navigation
 sticky

---
 layouts/default.vue     | 3 ++-
 pages/profile/_slug.vue | 8 +++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 59f3ca73c..700f30abc 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -32,7 +32,8 @@
                 Hallo {{ user.name }}
                 <ds-menu
                   :routes="routes"
-                  style="margin-left: -15px; margin-right: -15px; padding-top: 1rem; padding-bottom: 1rem;"/>
+                  style="margin-left: -15px; margin-right: -15px; padding-top: 1rem; padding-bottom: 1rem;"
+                  @click.native="toggleMenu"/>
                 <ds-space margin="xx-small" />
                 <nuxt-link :to="{ name: 'logout'}">Logout</nuxt-link>
               </div>
diff --git a/pages/profile/_slug.vue b/pages/profile/_slug.vue
index 73c539707..43353674d 100644
--- a/pages/profile/_slug.vue
+++ b/pages/profile/_slug.vue
@@ -161,7 +161,7 @@
         <ds-flex
           :width="{ base: '100%' }"
           gutter="small">
-          <ds-flex-item>
+          <ds-flex-item class="profile-top-navigation">
             <ds-card class="ds-tab-nav">
               <ds-flex>
                 <ds-flex-item class="ds-tab-nav-item ds-tab-nav-item-active">
@@ -341,6 +341,12 @@ export default {
   border: #fff 5px solid;
 }
 
+.profile-top-navigation {
+  position: sticky;
+  top: 53px;
+  z-index: 1;
+}
+
 .ds-tab-nav {
   .ds-card-content {
     padding: 0 !important;

From efb95a16253287d1958c3d1dd8341035b147a77d Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Mon, 26 Nov 2018 15:51:27 +0100
Subject: [PATCH 03/46] unified eslint settings

---
 styleguide/.eslintrc.js            | 28 ++++++++++++++++------------
 styleguide/.postcssrc.js           |  2 +-
 styleguide/babel.config.js         |  2 +-
 styleguide/tests/unit/.eslintrc.js |  2 +-
 4 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/styleguide/.eslintrc.js b/styleguide/.eslintrc.js
index f99fcaee6..769f54cff 100644
--- a/styleguide/.eslintrc.js
+++ b/styleguide/.eslintrc.js
@@ -1,14 +1,18 @@
 module.exports = {
-	root: true,
-	env: {
-		node: true
-	},
-	extends: ['plugin:vue/strongly-recommended', '@vue/prettier'],
-	rules: {
-		'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-		'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
-	},
-	parserOptions: {
-		parser: 'babel-eslint'
-	}
+  root: true,
+  env: {
+    browser: true,
+    node: true
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  extends: ['plugin:vue/recommended', 'plugin:prettier/recommended'],
+  // required to lint *.vue files
+  plugins: ['vue', 'prettier'],
+  // add your custom rules here
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  }
 }
diff --git a/styleguide/.postcssrc.js b/styleguide/.postcssrc.js
index 100cc0124..961986e2b 100644
--- a/styleguide/.postcssrc.js
+++ b/styleguide/.postcssrc.js
@@ -2,4 +2,4 @@ module.exports = {
   plugins: {
     autoprefixer: {}
   }
-}
\ No newline at end of file
+}
diff --git a/styleguide/babel.config.js b/styleguide/babel.config.js
index c75f6e9e8..5808c33db 100644
--- a/styleguide/babel.config.js
+++ b/styleguide/babel.config.js
@@ -1,4 +1,4 @@
 module.exports = {
   presets: ['@vue/app'],
-  plugins: ["@babel/plugin-syntax-dynamic-import"]
+  plugins: ['@babel/plugin-syntax-dynamic-import']
 }
diff --git a/styleguide/tests/unit/.eslintrc.js b/styleguide/tests/unit/.eslintrc.js
index 4e51c63f4..cc7654c38 100644
--- a/styleguide/tests/unit/.eslintrc.js
+++ b/styleguide/tests/unit/.eslintrc.js
@@ -5,4 +5,4 @@ module.exports = {
   rules: {
     'import/no-extraneous-dependencies': 'off'
   }
-}
\ No newline at end of file
+}

From e2c6305f2131bb3b76aca44da2e46d985c74f0e3 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 7 Dec 2018 19:42:57 +0100
Subject: [PATCH 04/46] fixing linting issues

---
 components/PostCard.vue                        | 11 +++++++----
 pages/admin/categories.vue                     | 10 +++++++---
 pages/admin/tags.vue                           | 10 +++++++---
 pages/post/_slug/index.vue                     |  5 +++--
 pages/post/_slug/more-info.vue                 |  7 ++++---
 pages/profile/_slug.vue                        | 15 ++++++++++-----
 pages/settings/index.vue                       | 18 +++++++++++++-----
 .../components/data-input/shared/input.scss    |  9 ---------
 8 files changed, 51 insertions(+), 34 deletions(-)

diff --git a/components/PostCard.vue b/components/PostCard.vue
index 27f1977ae..6d6f56256 100644
--- a/components/PostCard.vue
+++ b/components/PostCard.vue
@@ -33,18 +33,21 @@
       <template slot="footer">
         <div style="display: inline-block; opacity: .5;">
           <ds-icon
-            v-tooltip="{content: category.name, placement: 'bottom-start', delay: { show: 500 }}"
             v-for="category in post.categories"
             :key="category.id"
-            :name="category.icon" />&nbsp;
+            v-tooltip="{content: category.name, placement: 'bottom-start', delay: { show: 500 }}"
+            :name="category.icon"
+          />&nbsp;
         </div>
         <div style="display: inline-block; float: right">
           <span :style="{ opacity: post.shoutedCount ? 1 : .5 }">
-            <ds-icon name="bullhorn" /> <small>{{ post.shoutedCount }}</small>
+            <ds-icon name="bullhorn" />
+            <small>{{ post.shoutedCount }}</small>
           </span>
           &nbsp;
           <span :style="{ opacity: post.commentsCount ? 1 : .5 }">
-            <ds-icon name="comments" /> <small>{{ post.commentsCount }}</small>
+            <ds-icon name="comments" />
+            <small>{{ post.commentsCount }}</small>
           </span>
         </div>
       </template>
diff --git a/pages/admin/categories.vue b/pages/admin/categories.vue
index 045542541..e09db79c0 100644
--- a/pages/admin/categories.vue
+++ b/pages/admin/categories.vue
@@ -1,13 +1,17 @@
 <template>
   <ds-card space="small">
-    <ds-heading tag="h3">Themen / Kategorien</ds-heading>
+    <ds-heading tag="h3">
+      Themen / Kategorien
+    </ds-heading>
     <ds-table
       :data="Category"
       :fields="['icon', 'name', 'postCount']"
-      condensed>
+      condensed
+    >
       <template
         slot="icon"
-        slot-scope="scope">
+        slot-scope="scope"
+      >
         <ds-icon :name="scope.row.icon" />
       </template>
     </ds-table>
diff --git a/pages/admin/tags.vue b/pages/admin/tags.vue
index 45ab9a2a3..a0866fb8e 100644
--- a/pages/admin/tags.vue
+++ b/pages/admin/tags.vue
@@ -1,13 +1,17 @@
 <template>
   <ds-card space="small">
-    <ds-heading tag="h3">Tags</ds-heading>
+    <ds-heading tag="h3">
+      Tags
+    </ds-heading>
     <ds-table
       :data="Tag"
       :fields="fields"
-      condensed>
+      condensed
+    >
       <template
         slot="id"
-        slot-scope="scope">
+        slot-scope="scope"
+      >
         {{ scope.index + 1 }}
       </template>
     </ds-table>
diff --git a/pages/post/_slug/index.vue b/pages/post/_slug/index.vue
index 926971eb0..3afea9c3b 100644
--- a/pages/post/_slug/index.vue
+++ b/pages/post/_slug/index.vue
@@ -24,11 +24,12 @@
     />
     <!-- Categories -->
     <ds-icon
-      v-tooltip="{content: category.name, placement: 'top-start', delay: { show: 300 }}"
       v-for="category in post.categories"
       :key="category.id"
+      v-tooltip="{content: category.name, placement: 'top-start', delay: { show: 300 }}"
       :name="category.icon"
-      size="large" />&nbsp;
+      size="large"
+    />&nbsp;
     <ds-space margin-bottom="small" />
     <!--<div class="tags">
       <ds-icon name="compass" /> <ds-tag
diff --git a/pages/post/_slug/more-info.vue b/pages/post/_slug/more-info.vue
index 9a8421908..8ea1ed734 100644
--- a/pages/post/_slug/more-info.vue
+++ b/pages/post/_slug/more-info.vue
@@ -8,12 +8,13 @@
     <h3><ds-icon name="compass" /> Themenkategorien</h3>
     <div class="tags">
       <ds-icon
-        v-tooltip="{content: category.name, placement: 'top-start', delay: { show: 300 }}"
         v-for="category in post.categories"
         :key="category.id"
+        v-tooltip="{content: category.name, placement: 'top-start', delay: { show: 300 }}"
         :name="category.icon"
-        size="large" />&nbsp;
-        <!--<ds-tag
+        size="large"
+      />&nbsp;
+      <!--<ds-tag
         v-for="category in post.categories"
         :key="category.id"><ds-icon :name="category.icon" /> {{ category.name }}</ds-tag>-->
     </div>
diff --git a/pages/profile/_slug.vue b/pages/profile/_slug.vue
index fcce234a4..0b4929e8b 100644
--- a/pages/profile/_slug.vue
+++ b/pages/profile/_slug.vue
@@ -29,13 +29,15 @@
               v-if="user.location && user.location.length"
               align="center"
               color="soft"
-              size="small">
+              size="small"
+            >
               <ds-icon name="map-marker" /> {{ user.location[0].name }}
             </ds-text>
             <ds-text
               align="center"
               color="soft"
-              size="small">
+              size="small"
+            >
               Mitglied seit {{ user.createdAt | date('MMMM yyyy') }}
             </ds-text>
           </ds-space>
@@ -82,10 +84,12 @@
             <hr>
             <ds-space
               margin-top="small"
-              margin-bottom="small">
+              margin-bottom="small"
+            >
               <ds-text
                 color="soft"
-                size="small">
+                size="small"
+              >
                 {{ user.about }}
               </ds-text>
             </ds-space>
@@ -192,7 +196,8 @@
       <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
         <ds-flex
           :width="{ base: '100%' }"
-          gutter="small">
+          gutter="small"
+        >
           <ds-flex-item class="profile-top-navigation">
             <ds-card class="ds-tab-nav">
               <ds-flex>
diff --git a/pages/settings/index.vue b/pages/settings/index.vue
index 4f231abda..acc9643a6 100644
--- a/pages/settings/index.vue
+++ b/pages/settings/index.vue
@@ -5,29 +5,37 @@
       v-model="form.name"
       icon="user"
       label="Dein Name"
-      placeholder="Dein Name"/>
+      placeholder="Dein Name"
+    />
+    <!-- eslint-disable vue/use-v-on-exact -->
     <ds-select
       id="city"
-      :options="cities"
       v-model="city"
+      :options="cities"
       icon="map-marker"
       label="Deine Stadt"
       placeholder="Deine Stadt"
       @input="handleCitySelection"
-      @input.native="handleCityInput" />
+      @input.native="handleCityInput"
+    />
+    <!-- eslint-enable vue/use-v-on-exact -->
     <ds-input
       id="bio"
       v-model="form.about"
       type="textarea"
       rows="3"
       label="Erzähl doch ein wenig (in zwei Sätzen) über dich"
-      placeholder="Über mich"/>
+      placeholder="Über mich"
+    />
     <template slot="footer">
       <ds-button
         style="float: right;"
         icon="check"
         primary
-        @click.prevent="submit">Speichern</ds-button>
+        @click.prevent="submit"
+      >
+        Speichern
+      </ds-button>
     </template>
   </ds-card>
 </template>
diff --git a/styleguide/src/system/components/data-input/shared/input.scss b/styleguide/src/system/components/data-input/shared/input.scss
index adbfa7489..2a880c28e 100755
--- a/styleguide/src/system/components/data-input/shared/input.scss
+++ b/styleguide/src/system/components/data-input/shared/input.scss
@@ -84,15 +84,6 @@
     }
   }
 
-    .ds-input-size-small & {
-      width: $input-height-small;
-    }
-
-    .ds-input-size-large & {
-      width: $input-height-large;
-    }
-  }
-
   .#{$class}-icon-right {
     right: 0;
     left: auto;

From cad596357afcc09c761583d75ee2a6d81f8919fc Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Sat, 29 Dec 2018 16:29:41 +0100
Subject: [PATCH 05/46] Little style improvements

---
 layouts/default.vue                                      | 9 +++++++++
 pages/settings/index.vue                                 | 4 +++-
 .../src/system/components/data-input/shared/input.scss   | 8 --------
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 6bf42691e..56285c753 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -41,6 +41,15 @@
                 >
                   <div class="avatar-menu-popover">
                     {{ $t('login.hello') }} <b>{{ user.name }}</b>
+                    <template v-if="user.role !== 'user'">
+                      <ds-text
+                        color="softer"
+                        size="small"
+                        style="margin-bottom: 0"
+                      >
+                        {{ user.role | camelCase }}
+                      </ds-text>
+                    </template>
                     <ds-menu
                       :routes="routes"
                       :is-exact="isExact"
diff --git a/pages/settings/index.vue b/pages/settings/index.vue
index e009750c4..902887718 100644
--- a/pages/settings/index.vue
+++ b/pages/settings/index.vue
@@ -1,6 +1,8 @@
 <template>
   <ds-card space="small">
-    {{ $t('settings.data.name') }}
+    <ds-heading tag="h3">
+      {{ $t('settings.data.name') }}
+    </ds-heading>
     <ds-input
       id="name"
       v-model="form.name"
diff --git a/styleguide/src/system/components/data-input/shared/input.scss b/styleguide/src/system/components/data-input/shared/input.scss
index 2a880c28e..87f7a6e2c 100755
--- a/styleguide/src/system/components/data-input/shared/input.scss
+++ b/styleguide/src/system/components/data-input/shared/input.scss
@@ -96,10 +96,6 @@
       padding-left: $input-height-small;
     }
 
-    .ds-input-size-small & {
-      padding-left: $input-height-small;
-    }
-
     .ds-input-size-large & {
       padding-left: $input-height-large;
     }
@@ -115,9 +111,5 @@
     .ds-input-size-large & {
       padding-right: $input-height-large;
     }
-
-    .ds-input-size-large & {
-      padding-right: $input-height-large;
-    }
   }
 }

From 8b5c59d39a261d3a671e6b34fdce7dda003bb058 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 4 Jan 2019 14:50:55 +0100
Subject: [PATCH 06/46] try to fix memory leak

---
 plugins/keep-alive.js | 45 +++++++++++++++++++++++--------------------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/plugins/keep-alive.js b/plugins/keep-alive.js
index 7308da642..93a8a1767 100644
--- a/plugins/keep-alive.js
+++ b/plugins/keep-alive.js
@@ -2,27 +2,30 @@ import Vue from 'vue'
 
 let lastRoute
 const keepAliveHook = {}
-keepAliveHook.install = Vue => {
-  const keepAlivePages = process.env.keepAlivePages || []
 
-  Vue.mixin({
-    // Save route if this instance is a page (has metaInfo)
-    mounted() {
-      if (this.$metaInfo) {
-        lastRoute = this.$route.name
+if (!process.server) {
+  keepAliveHook.install = Vue => {
+    const keepAlivePages = process.env.keepAlivePages || []
+
+    Vue.mixin({
+      // Save route if this instance is a page (has metaInfo)
+      mounted() {
+        if (this.$metaInfo) {
+          lastRoute = this.$route.name
+        }
+      },
+      activated() {
+        if (this.$metaInfo) {
+          lastRoute = this.$route.name
+        }
+      },
+      deactivated() {
+        // If this is a page and we don't want it to be kept alive
+        if (this.$metaInfo && !keepAlivePages.includes(lastRoute)) {
+          this.$destroy()
+        }
       }
-    },
-    activated() {
-      if (this.$metaInfo) {
-        lastRoute = this.$route.name
-      }
-    },
-    deactivated() {
-      // If this is a page and we don't want it to be kept alive
-      if (this.$metaInfo && !keepAlivePages.includes(lastRoute)) {
-        this.$destroy()
-      }
-    }
-  })
+    })
+  }
+  Vue.use(keepAliveHook)
 }
-Vue.use(keepAliveHook)

From d1f0131e0ef4539a992f2bd18f1732d60c953673 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 4 Jan 2019 14:59:23 +0100
Subject: [PATCH 07/46] Moved JWT_TOKEN and MAPBOX_TOKEN to .env

---
 .env.template  | 2 ++
 README.md      | 6 ++++++
 nuxt.config.js | 2 +-
 3 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 .env.template

diff --git a/.env.template b/.env.template
new file mode 100644
index 000000000..4313645bb
--- /dev/null
+++ b/.env.template
@@ -0,0 +1,2 @@
+JWT_SECRET="b/&&7b78BF&fv/Vd"
+MAPBOX_TOKEN="pk.eyJ1IjoiaHVtYW4tY29ubmVjdGlvbiIsImEiOiJjajl0cnBubGoweTVlM3VwZ2lzNTNud3ZtIn0.KZ8KK9l70omjXbEkkbHGsQ"
diff --git a/README.md b/README.md
index b82c75999..3a563eff9 100644
--- a/README.md
+++ b/README.md
@@ -15,6 +15,12 @@ $ yarn styleguide:build
 $ yarn install
 ```
 
+Copy:
+```
+cp .env.template .env
+```
+Configure the file `.env` according to your needs and your local setup.
+
 ### Development
 ``` bash
 # serve with hot reload at localhost:3000
diff --git a/nuxt.config.js b/nuxt.config.js
index be8da36c5..46eed5420 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,5 +1,5 @@
 const pkg = require('./package')
-const envWhitelist = ['NODE_ENV', 'MAINTENANCE']
+const envWhitelist = ['NODE_ENV', 'MAINTENANCE', 'MAPBOX_TOKEN']
 const dev = process.env.NODE_ENV !== 'production'
 const path = require('path')
 

From 47c858d9d2e6e922dc2816cf6e5138c9df1fb00e Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 4 Jan 2019 15:03:35 +0100
Subject: [PATCH 08/46] Improved locale handling

---
 graphql/UserProfileQuery.js |  1 +
 pages/profile/_slug.vue     |  4 +-
 pages/settings/index.vue    | 32 ++++---------
 store/auth.js               | 96 +++++++++++++++++++++----------------
 4 files changed, 67 insertions(+), 66 deletions(-)

diff --git a/graphql/UserProfileQuery.js b/graphql/UserProfileQuery.js
index 1848c82b9..2a283d0d4 100644
--- a/graphql/UserProfileQuery.js
+++ b/graphql/UserProfileQuery.js
@@ -7,6 +7,7 @@ export default gql(`
       name
       avatar
       about
+      locationName
       location {
         name
       }
diff --git a/pages/profile/_slug.vue b/pages/profile/_slug.vue
index fd6966dd8..670a4e81b 100644
--- a/pages/profile/_slug.vue
+++ b/pages/profile/_slug.vue
@@ -26,12 +26,12 @@
               {{ user.name }}
             </ds-heading>
             <ds-text
-              v-if="user.location && user.location.length"
+              v-if="user.location"
               align="center"
               color="soft"
               size="small"
             >
-              <ds-icon name="map-marker" /> {{ user.location[0].name }}
+              <ds-icon name="map-marker" /> {{ user.location.name }}
             </ds-text>
             <ds-text
               align="center"
diff --git a/pages/settings/index.vue b/pages/settings/index.vue
index 902887718..02db8c0d3 100644
--- a/pages/settings/index.vue
+++ b/pages/settings/index.vue
@@ -13,12 +13,11 @@
     <!-- eslint-disable vue/use-v-on-exact -->
     <ds-select
       id="city"
-      v-model="city"
+      v-model="form.locationName"
       :options="cities"
       icon="map-marker"
       label="Deine Stadt"
       placeholder="Deine Stadt"
-      @input="handleCitySelection"
       @input.native="handleCityInput"
     />
     <!-- eslint-enable vue/use-v-on-exact -->
@@ -51,18 +50,16 @@ import { CancelToken } from 'axios'
 import find from 'lodash/find'
 
 let timeout
-const mapboxToken =
-  'pk.eyJ1IjoiaHVtYW4tY29ubmVjdGlvbiIsImEiOiJjajl0cnBubGoweTVlM3VwZ2lzNTNud3ZtIn0.KZ8KK9l70omjXbEkkbHGsQ'
+const mapboxToken = process.env.MAPBOX_TOKEN
 
 export default {
   data() {
     return {
       axiosSource: null,
       cities: [],
-      city: null,
       form: {
         name: null,
-        locationId: null,
+        locationName: null,
         about: null
       }
     }
@@ -78,7 +75,7 @@ export default {
       handler: function(user) {
         this.form = {
           name: user.name,
-          locationId: user.locationId,
+          locationName: user.locationName,
           about: user.about
         }
       }
@@ -93,18 +90,18 @@ export default {
             mutation(
               $id: ID!
               $name: String
-              $locationId: String
+              $locationName: String
               $about: String
             ) {
               UpdateUser(
                 id: $id
                 name: $name
-                locationId: $locationId
+                locationName: $locationName
                 about: $about
               ) {
                 id
                 name
-                locationId
+                locationName
                 about
               }
             }
@@ -113,14 +110,14 @@ export default {
           variables: {
             id: this.user.id,
             name: this.form.name,
-            locationId: this.form.locationId,
+            locationName: this.form.locationName,
             about: this.form.about
           },
           // Update the cache with the result
           // The query will be updated with the optimistic response
           // and then with the real result of the mutation
           update: (store, { data: { UpdateUser } }) => {
-            this.$store.dispatch('auth/refresh', UpdateUser)
+            this.$store.dispatch('auth/fetchCurrentUser')
 
             // Read the data from our cache for this query.
             // const data = store.readQuery({ query: TAGS_QUERY })
@@ -154,15 +151,6 @@ export default {
       clearTimeout(timeout)
       timeout = setTimeout(() => this.requestGeoData(value), 500)
     },
-    handleCitySelection(value) {
-      console.log('SET CURRENT VALUE', value)
-      const item = find(this.cities, { value: value })
-      console.log('ID:', item.id)
-      this.form.locationId = item.id
-    },
-    handleCityEnter() {
-      console.log('SET CURRENT VALUE')
-    },
     processCityResults(res) {
       if (
         !res ||
@@ -199,7 +187,7 @@ export default {
 
       this.$axios
         .get(
-          `https://api.mapbox.com/geocoding/v5/mapbox.places/${value}.json?access_token=${mapboxToken}&types=region,postcode,district,place,country&language=de`,
+          `https://api.mapbox.com/geocoding/v5/mapbox.places/${value}.json?access_token=${mapboxToken}&types=region,postcode,district,place,country&language=${this.$i18n.locale()}`,
           {
             cancelToken: this.axiosSource.token
           }
diff --git a/store/auth.js b/store/auth.js
index 40d6eef2e..956ba8f83 100644
--- a/store/auth.js
+++ b/store/auth.js
@@ -49,8 +49,8 @@ export const getters = {
 }
 
 export const actions = {
-  async init({ commit }) {
-    if (process.client) {
+  async init({ commit, dispatch }) {
+    if (!process.server) {
       return
     }
     const token = this.app.$apolloHelpers.getToken()
@@ -58,20 +58,20 @@ export const actions = {
       return
     }
 
-    const user = await jwt.verify(token, 'b/&&7b78BF&fv/Vd')
-    if (user.id) {
-      commit('SET_USER', {
-        id: user.id,
-        name: user.name,
-        slug: user.slug,
-        email: user.email,
-        avatar: user.avatar,
-        role: user.role,
-        locationId: user.locationId,
-        about: user.about
-      })
-      commit('SET_TOKEN', token)
+    const payload = await jwt.verify(
+      token,
+      process.server
+        ? require('dotenv').parse(require('fs').readFileSync('.env')).JWT_SECRET
+        : null
+    )
+    if (!payload.id) {
+      return
     }
+    commit('SET_TOKEN', token)
+    commit('SET_USER', {
+      id: payload.id
+    })
+    await dispatch('fetchCurrentUser')
   },
   async check({ commit, dispatch, getters }) {
     if (!this.app.$apolloHelpers.getToken()) {
@@ -79,20 +79,32 @@ export const actions = {
     }
     return getters.isLoggedIn
   },
-  refresh({ state, commit }, { id, name, locationId, about, avatar }) {
-    if (!state.user.id || id !== state.user.id) {
-      return
-    }
-    commit('SET_USER', {
-      id: state.user.id, // do not change
-      name: name || state.user.name,
-      slug: state.user.slug, // do not change
-      email: state.user.email, // do not change
-      avatar: avatar || state.user.avatar,
-      role: state.user.role,
-      locationId: locationId || state.user.locationId,
-      about: about || state.user.about
-    })
+  async fetchCurrentUser({ commit, getters }) {
+    await this.app.apolloProvider.defaultClient
+      .query({
+        query: gql(`
+          query User($id: ID!) {
+            User(id: $id) {
+              id
+              name
+              slug
+              email
+              avatar
+              role
+              locationName
+              about
+            }
+          }
+        `),
+        variables: { id: getters.user.id }
+      })
+      .then(({ data }) => {
+        const user = data.User.pop()
+        if (user.id && user.email) {
+          commit('SET_USER', user)
+        }
+      })
+    return getters.user
   },
   async login({ commit }, { email, password }) {
     commit('SET_PENDING', true)
@@ -100,20 +112,20 @@ export const actions = {
       const res = await this.app.apolloProvider.defaultClient
         .mutate({
           mutation: gql(`
-          mutation($email: String!, $password: String!) {
-            login(email: $email, password: $password) {
-              id
-              name
-              slug
-              email
-              avatar
-              role
-              locationId
-              about
-              token
+            mutation($email: String!, $password: String!) {
+              login(email: $email, password: $password) {
+                id
+                name
+                slug
+                email
+                avatar
+                role
+                locationName
+                about
+                token
+              }
             }
-          }
-        `),
+          `),
           variables: { email, password }
         })
         .then(({ data }) => data && data.login)

From f1392e47c5310d6d7c68e780b15ddc1c481f3504 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 4 Jan 2019 15:03:52 +0100
Subject: [PATCH 09/46] disabled autocomplete on select

---
 styleguide/src/system/components/data-input/Select/Select.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/styleguide/src/system/components/data-input/Select/Select.vue b/styleguide/src/system/components/data-input/Select/Select.vue
index e615dd6ea..3f16da80c 100755
--- a/styleguide/src/system/components/data-input/Select/Select.vue
+++ b/styleguide/src/system/components/data-input/Select/Select.vue
@@ -51,6 +51,7 @@
             :disabled="disabled"
             :readonly="readonly"
             v-model="searchString"
+            autocomplete="off"
             @focus="handleFocus"
             @keydown.delete.stop="deselectLastOption"
             @keydown.down.prevent="pointerNext"
@@ -86,6 +87,7 @@
           :disabled="disabled"
           :readonly="readonly"
           v-model="searchString"
+          autocomplete="off"
           @focus="handleFocus"
           @keydown.delete.stop="deselectLastOption"
           @keydown.down.prevent="pointerNext"

From 662589e9951e4885c39d30e8d789fc5239f9df88 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Sat, 5 Jan 2019 13:42:38 +0100
Subject: [PATCH 10/46] Removed console.log

---
 pages/settings/index.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/pages/settings/index.vue b/pages/settings/index.vue
index 02db8c0d3..0fb87be69 100644
--- a/pages/settings/index.vue
+++ b/pages/settings/index.vue
@@ -195,7 +195,6 @@ export default {
         .then(res => {
           this.cities = this.processCityResults(res)
         })
-      console.log('TRY TO GET DATA FOR ', value)
     }
   }
 }

From c156bcedc94078e928e63ef9e5ffc74a934c9360 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Sat, 5 Jan 2019 13:43:20 +0100
Subject: [PATCH 11/46] Added author location to quick user preview

---
 components/Author.vue          | 15 +++++++++++++--
 graphql/UserProfileQuery.js    |  3 +++
 pages/index.vue                |  3 +++
 pages/post/_slug/index.vue     |  6 ++++++
 pages/post/_slug/more-info.vue |  3 +++
 5 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/components/Author.vue b/components/Author.vue
index 53379afa8..e313066a6 100644
--- a/components/Author.vue
+++ b/components/Author.vue
@@ -54,9 +54,20 @@
       <hc-badges
         v-if="author.badges && author.badges.length"
         :badges="author.badges"
-        style="margin-bottom: -10px"
       />
-      <ds-flex>
+      <ds-text
+        v-if="author.location"
+        align="center"
+        color="soft"
+        size="small"
+        style="margin-top: 5px"
+        bold
+      >
+        <ds-icon name="map-marker" /> {{ author.location.name }}
+      </ds-text>
+      <ds-flex
+        style="margin-top: -10px"
+      >
         <ds-flex-item class="ds-tab-nav-item">
           <ds-space margin="small">
             <ds-number
diff --git a/graphql/UserProfileQuery.js b/graphql/UserProfileQuery.js
index 2a283d0d4..a67d0d927 100644
--- a/graphql/UserProfileQuery.js
+++ b/graphql/UserProfileQuery.js
@@ -70,6 +70,9 @@ export default gql(`
           id
           avatar
           name
+          location {
+            name
+          }
         }
       }
     }
diff --git a/pages/index.vue b/pages/index.vue
index ca4ebc03c..58fdb284d 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -97,6 +97,9 @@ export default {
               shoutedCount
               commentsCount
               followedByCount
+              location {
+                name
+              }
               badges {
                 id
                 key
diff --git a/pages/post/_slug/index.vue b/pages/post/_slug/index.vue
index 949263e95..2b6b91f05 100644
--- a/pages/post/_slug/index.vue
+++ b/pages/post/_slug/index.vue
@@ -161,6 +161,9 @@ export default {
               contributionsCount
               commentsCount
               followedByCount
+              location {
+                name
+              }
               badges {
                 id
                 key
@@ -185,6 +188,9 @@ export default {
                 contributionsCount
                 commentsCount
                 followedByCount
+                location {
+                  name
+                }
                 badges {
                   id
                   key
diff --git a/pages/post/_slug/more-info.vue b/pages/post/_slug/more-info.vue
index 8ea1ed734..1530c03b2 100644
--- a/pages/post/_slug/more-info.vue
+++ b/pages/post/_slug/more-info.vue
@@ -107,6 +107,9 @@ export default {
                 contributionsCount
                 followedByCount
                 commentsCount
+                location {
+                  name
+                }
                 badges {
                   id
                   key

From 4f50274b0d9ef54ec86f2be209a9fbbf7bdc628e Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Mon, 7 Jan 2019 18:17:21 +0100
Subject: [PATCH 12/46] Added more localizations

---
 components/LoadMore.vue  |  2 +-
 locales/de.json          | 15 +++++++++++++--
 locales/en.json          | 15 +++++++++++++--
 pages/settings/index.vue | 14 +++++++-------
 4 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/components/LoadMore.vue b/components/LoadMore.vue
index 5bec2684a..cb38c218b 100644
--- a/components/LoadMore.vue
+++ b/components/LoadMore.vue
@@ -9,7 +9,7 @@
       ghost
       @click="$emit('click')"
     >
-      mehr laden
+      {{ $t('actions.loadMore') }}
     </ds-button>
   </ds-space>
 </template>
diff --git a/locales/de.json b/locales/de.json
index bb879f4ea..af6852243 100644
--- a/locales/de.json
+++ b/locales/de.json
@@ -1,4 +1,12 @@
 {
+  "actions": {
+    "loading": "lade",
+    "loadMore": "mehr laden",
+    "create": "Erstellen",
+    "save": "Speichern",
+    "edit": "Bearbeiten",
+    "delete": "Löschen"
+  },
   "login": {
     "copy": "Wenn Du ein Konto bei Human Connection hast, melde Dich bitte hier an.",
     "login": "Einloggen",
@@ -18,7 +26,10 @@
   "settings": {
     "name": "Einstellungen",
     "data": {
-      "name": "Deine Daten"
+      "name": "Deine Daten",
+      "labelName": "Dein Name",
+      "labelCity": "Deine Stadt oder Region",
+      "labelBio": "Über dich"
     },
     "security": {
       "name": "Sicherheit"
@@ -94,4 +105,4 @@
       "author": "Afrikanisches Sprichwort"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/locales/en.json b/locales/en.json
index a36bdda3c..51352ad67 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1,4 +1,12 @@
 {
+  "actions": {
+    "loading": "loading",
+    "loadMore": "load more",
+    "create": "Create",
+    "save": "Save",
+    "edit": "Edit",
+    "delete": "Delete"
+  },
   "login": {
     "copy": "If you already have a human-connection account, login here.",
     "login": "Login",
@@ -18,7 +26,10 @@
   "settings": {
     "name": "Settings",
     "data": {
-      "name": "Your data"
+      "name": "Your data",
+      "labelName": "Your Name",
+      "labelCity": "Your City or Region",
+      "labelBio": "About You"
     },
     "security": {
       "name": "Security"
@@ -94,4 +105,4 @@
       "author": "African proverb"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/pages/settings/index.vue b/pages/settings/index.vue
index 0fb87be69..4c67e2618 100644
--- a/pages/settings/index.vue
+++ b/pages/settings/index.vue
@@ -7,8 +7,8 @@
       id="name"
       v-model="form.name"
       icon="user"
-      label="Dein Name"
-      placeholder="Dein Name"
+      :label="$t('settings.data.labelName')"
+      :placeholder="$t('settings.data.labelName')"
     />
     <!-- eslint-disable vue/use-v-on-exact -->
     <ds-select
@@ -16,8 +16,8 @@
       v-model="form.locationName"
       :options="cities"
       icon="map-marker"
-      label="Deine Stadt"
-      placeholder="Deine Stadt"
+      :label="$t('settings.data.labelCity')"
+      :placeholder="$t('settings.data.labelCity')"
       @input.native="handleCityInput"
     />
     <!-- eslint-enable vue/use-v-on-exact -->
@@ -26,8 +26,8 @@
       v-model="form.about"
       type="textarea"
       rows="3"
-      label="Erzähl doch ein wenig (in zwei Sätzen) über dich"
-      placeholder="Über mich"
+      :label="$t('settings.data.labelBio')"
+      :placeholder="$t('settings.data.labelBio')"
     />
     <template slot="footer">
       <ds-button
@@ -36,7 +36,7 @@
         primary
         @click.prevent="submit"
       >
-        Speichern
+        {{ $t('actions.save') }}
       </ds-button>
     </template>
   </ds-card>

From ce3a812eb233bd69511a63360a22dbf45a393c72 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Mon, 7 Jan 2019 18:17:38 +0100
Subject: [PATCH 13/46] Fixed a test

---
 cypress/integration/common/steps.js | 36 ++++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/cypress/integration/common/steps.js b/cypress/integration/common/steps.js
index 55660d366..a368b7f5c 100644
--- a/cypress/integration/common/steps.js
+++ b/cypress/integration/common/steps.js
@@ -135,7 +135,7 @@ Then('I see a button with the label {string}', label => {
 
 When('I navigate to the administration dashboard', () => {
   cy.get('.avatar-menu').click()
-  cy.get('.avatar-menu-popover')
+  cy.get('.avatar-menu-popover a')
     .contains('Admin')
     .click()
 })
@@ -159,3 +159,37 @@ Then('I can see a list of tags ordered by user and post count:', table => {
     .should('have.length', 4)
   lastColumnIsSortedInDescendingOrder()
 })
+
+When('I enter {string} as my location', location => {
+  cy.get('input[id=city]').type(location)
+  cy.get('.ds-select-option')
+    .contains(location)
+    .click()
+})
+When('I enter {string} to about me', text => {
+  cy.get('textarea[id=bio]')
+    .clear()
+    .type(text)
+})
+When('I enter {string} as my name', text => {
+  cy.get('input[id=name]')
+    .clear()
+    .type(text)
+})
+Then('I can see {string} as my name', text => {
+  cy.get('input[id=name]')
+    .clear()
+    .type(text)
+})
+When('I press {string}', label => {
+  cy.contains(label).click()
+})
+Then('I can see a {string} as my location', location => {
+  cy.contains(location)
+})
+Then('I can see a {string} as my about me', about => {
+  cy.contains(about)
+})
+Then('I can see a {string} as my name', name => {
+  cy.get('.avatar-menu-popover').contains(name)
+})

From e13e14ce64a09d5b1e5f6765bcc2e857bf26eadf Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Mon, 7 Jan 2019 18:17:58 +0100
Subject: [PATCH 14/46] Added Cypress Tests for about me and location

---
 .../integration/AboutMeAndLocation.feature    | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 cypress/integration/AboutMeAndLocation.feature

diff --git a/cypress/integration/AboutMeAndLocation.feature b/cypress/integration/AboutMeAndLocation.feature
new file mode 100644
index 000000000..72a97bf22
--- /dev/null
+++ b/cypress/integration/AboutMeAndLocation.feature
@@ -0,0 +1,42 @@
+Feature: About me and and location
+  As a user
+  I would like to add some about me text and a location
+  So others can get some info about me and my location
+
+  The location and about me are show on the user. Later it will be possible
+  to search for users by location.
+
+  Background:
+    Given I am logged in
+
+  Scenario: I change my name
+    When I visit the "settings" page
+    And I enter "Hansi" as my name
+    And I press "Save"
+    And I can click on my profile picture in the top right corner
+    Then I can see a "Hansi" as my name
+
+    When I refresh the page
+    And I can click on my profile picture in the top right corner
+    Then I can see a "Hansi" as my name
+
+    When I visit the "settings" page
+    And I enter "Peter Lustig" as my name
+    And I press "Save"
+
+  Scenario: I set my location
+    When I visit the "settings" page
+    And I enter "Hamburg" as my location
+    And I press "Save"
+    And I visit the "profile/peter-lustig" page
+    Then I can see a "Hamburg" as my location
+
+  Scenario: I write about me
+    When I visit the "settings" page
+    And I enter "Some text about me" to about me
+    And I press "Save"
+    And I visit the "profile/peter-lustig" page
+    Then I can see a "Some text about me" as my about me
+
+
+

From 367043972e77dda8c01c38e1f894dd7ae3555945 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 8 Jan 2019 14:35:07 +0100
Subject: [PATCH 15/46] Added locale to axios requests

---
 plugins/axios.js | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 plugins/axios.js

diff --git a/plugins/axios.js b/plugins/axios.js
new file mode 100644
index 000000000..621a4ca55
--- /dev/null
+++ b/plugins/axios.js
@@ -0,0 +1,7 @@
+export default ({ $axios, app }) => {
+  $axios.onRequest(config => {
+    console.log(Object.keys(app))
+    // add current ui language
+    config.headers['Accept-Language'] = app.$i18n.locale()
+  })
+}

From 2eb77149edbf9fa8b5bd78916f5f375f132e65ae Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 8 Jan 2019 14:35:26 +0100
Subject: [PATCH 16/46] Encode mapbox url

---
 pages/settings/index.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/pages/settings/index.vue b/pages/settings/index.vue
index 4c67e2618..94120ddf0 100644
--- a/pages/settings/index.vue
+++ b/pages/settings/index.vue
@@ -185,9 +185,12 @@ export default {
 
       this.axiosSource = CancelToken.source()
 
+      const place = encodeURIComponent(value)
+      const lang = this.$i18n.locale()
+
       this.$axios
         .get(
-          `https://api.mapbox.com/geocoding/v5/mapbox.places/${value}.json?access_token=${mapboxToken}&types=region,postcode,district,place,country&language=${this.$i18n.locale()}`,
+          `https://api.mapbox.com/geocoding/v5/mapbox.places/${place}.json?access_token=${mapboxToken}&types=region,place,country&language=${lang}`,
           {
             cancelToken: this.axiosSource.token
           }

From 7a383c88f1c543022662b5144761248bfb076e18 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 8 Jan 2019 14:36:21 +0100
Subject: [PATCH 17/46] Use locale for location name

---
 graphql/UserProfileQuery.js    | 127 ++++++++++++++++++---------------
 nuxt.config.js                 |   1 +
 pages/index.vue                |  62 ++++++++--------
 pages/post/_slug/index.vue     |  90 +++++++++++------------
 pages/post/_slug/more-info.vue |  66 ++++++++---------
 pages/profile/_slug.vue        |   4 +-
 6 files changed, 184 insertions(+), 166 deletions(-)

diff --git a/graphql/UserProfileQuery.js b/graphql/UserProfileQuery.js
index a67d0d927..4e0245b52 100644
--- a/graphql/UserProfileQuery.js
+++ b/graphql/UserProfileQuery.js
@@ -1,80 +1,89 @@
 import gql from 'graphql-tag'
 
-export default gql(`
-  query User($slug: String!, $first: Int, $offset: Int) {
-    User(slug: $slug) {
-      id
-      name
-      avatar
-      about
-      locationName
-      location {
-        name
-      }
-      createdAt
-      badges {
-        id
-        key
-        icon
-      }
-      badgesCount
-      shoutedCount
-      commentsCount
-      followingCount
-      following(first: 7) {
+export default app => {
+  const lang = app.$i18n.locale().toUpperCase()
+  return gql(`
+    query User($slug: String!, $first: Int, $offset: Int) {
+      User(slug: $slug) {
         id
         name
-        slug
         avatar
-        followedByCount
-        contributionsCount
-        commentsCount
+        about
+        locationName
+        location {
+          name: name${lang}
+        }
+        createdAt
         badges {
           id
           key
           icon
         }
-      }
-      followedByCount
-      followedBy(first: 7)  {
-        id
-        name
-        slug
-        avatar
-        followedByCount
-        contributionsCount
-        commentsCount
-        badges {
-          id
-          key
-          icon
-        }
-      }
-      contributionsCount
-      contributions(first: $first, offset: $offset, orderBy: createdAt_desc) {
-        id
-        slug
-        title
-        contentExcerpt
+        badgesCount
         shoutedCount
         commentsCount
-        deleted
-        image
-        createdAt
-        categories {
+        followingCount
+        following(first: 7) {
           id
           name
-          icon
-        }
-        author {
-          id
+          slug
           avatar
-          name
+          followedByCount
+          contributionsCount
+          commentsCount
+          badges {
+            id
+            key
+            icon
+          }
           location {
+            name: name${lang}
+          }
+        }
+        followedByCount
+        followedBy(first: 7)  {
+          id
+          name
+          slug
+          avatar
+          followedByCount
+          contributionsCount
+          commentsCount
+          badges {
+            id
+            key
+            icon
+          }
+          location {
+            name: name${lang}
+          }
+        }
+        contributionsCount
+        contributions(first: $first, offset: $offset, orderBy: createdAt_desc) {
+          id
+          slug
+          title
+          contentExcerpt
+          shoutedCount
+          commentsCount
+          deleted
+          image
+          createdAt
+          categories {
+            id
             name
+            icon
+          }
+          author {
+            id
+            avatar
+            name
+            location {
+              name: name${lang}
+            }
           }
         }
       }
     }
-  }
-`)
+  `)
+}
diff --git a/nuxt.config.js b/nuxt.config.js
index 46eed5420..f71331b4e 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -62,6 +62,7 @@ module.exports = {
   */
   plugins: [
     { src: '~/plugins/i18n.js', ssr: true },
+    { src: '~/plugins/axios.js', ssr: false },
     { src: '~/plugins/keep-alive.js', ssr: false },
     { src: '~/plugins/design-system.js', ssr: true },
     { src: '~/plugins/vue-directives.js', ssr: false },
diff --git a/pages/index.vue b/pages/index.vue
index 58fdb284d..ec0f3f31e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -79,43 +79,45 @@ export default {
   },
   apollo: {
     Post: {
-      query: gql(`
-        query Post($first: Int, $offset: Int) {
-          Post(first: $first, offset: $offset) {
-            id
-            title
-            contentExcerpt
-            createdAt
-            slug
-            image
-            author {
+      query() {
+        return gql(`
+          query Post($first: Int, $offset: Int) {
+            Post(first: $first, offset: $offset) {
               id
-              avatar
+              title
+              contentExcerpt
+              createdAt
               slug
-              name
-              contributionsCount
-              shoutedCount
-              commentsCount
-              followedByCount
-              location {
-                name
-              }
-              badges {
+              image
+              author {
                 id
-                key
+                avatar
+                slug
+                name
+                contributionsCount
+                shoutedCount
+                commentsCount
+                followedByCount
+                location {
+                  name: name${this.$i18n.locale().toUpperCase()}
+                }
+                badges {
+                  id
+                  key
+                  icon
+                }
+              }
+              commentsCount
+              categories {
+                id
+                name
                 icon
               }
+              shoutedCount
             }
-            commentsCount
-            categories {
-              id
-              name
-              icon
-            }
-            shoutedCount
           }
-        }
-      `),
+        `)
+      },
       variables() {
         return {
           first: this.pageSize,
diff --git a/pages/post/_slug/index.vue b/pages/post/_slug/index.vue
index 2b6b91f05..187319889 100644
--- a/pages/post/_slug/index.vue
+++ b/pages/post/_slug/index.vue
@@ -143,42 +143,16 @@ export default {
   },
   apollo: {
     Post: {
-      query: gql(`
-        query Post($slug: String!) {
-          Post(slug: $slug) {
-            id
-            title
-            content
-            createdAt
-            slug
-            image
-            author {
+      query() {
+        return gql(`
+          query Post($slug: String!) {
+            Post(slug: $slug) {
               id
-              slug
-              name
-              avatar
-              shoutedCount
-              contributionsCount
-              commentsCount
-              followedByCount
-              location {
-                name
-              }
-              badges {
-                id
-                key
-                icon
-              }
-            }
-            tags {
-              name
-            }
-            commentsCount
-            comments(orderBy: createdAt_desc) {
-              id
-              contentExcerpt
+              title
+              content
               createdAt
-              deleted
+              slug
+              image
               author {
                 id
                 slug
@@ -189,24 +163,52 @@ export default {
                 commentsCount
                 followedByCount
                 location {
-                  name
-                }
+                    name: name${this.$i18n.locale().toUpperCase()}
+                  }
                 badges {
                   id
                   key
                   icon
                 }
               }
+              tags {
+                name
+              }
+              commentsCount
+              comments(orderBy: createdAt_desc) {
+                id
+                contentExcerpt
+                createdAt
+                deleted
+                author {
+                  id
+                  slug
+                  name
+                  avatar
+                  shoutedCount
+                  contributionsCount
+                  commentsCount
+                  followedByCount
+                  location {
+                    name: name${this.$i18n.locale().toUpperCase()}
+                  }
+                  badges {
+                    id
+                    key
+                    icon
+                  }
+                }
+              }
+              categories {
+                id
+                name
+                icon
+              }
+              shoutedCount
             }
-            categories {
-              id
-              name
-              icon
-            }
-            shoutedCount
           }
-        }
-      `),
+        `)
+      },
       variables() {
         return {
           slug: this.$route.params.slug
diff --git a/pages/post/_slug/more-info.vue b/pages/post/_slug/more-info.vue
index 1530c03b2..456c7c357 100644
--- a/pages/post/_slug/more-info.vue
+++ b/pages/post/_slug/more-info.vue
@@ -73,54 +73,56 @@ export default {
   },
   apollo: {
     Post: {
-      query: gql(`
-        query Post($slug: String!) {
-          Post(slug: $slug) {
-            id
-            title
-            tags {
-              id
-              name
-            }
-            categories {
-              id
-              name
-              icon
-            }
-            relatedContributions(first: 2) {
+      query() {
+        return gql(`
+          query Post($slug: String!) {
+            Post(slug: $slug) {
               id
               title
-              slug
-              contentExcerpt
-              shoutedCount
-              commentsCount
+              tags {
+                id
+                name
+              }
               categories {
                 id
                 name
                 icon
               }
-              author {
+              relatedContributions(first: 2) {
                 id
-                name
+                title
                 slug
-                avatar
-                contributionsCount
-                followedByCount
+                contentExcerpt
+                shoutedCount
                 commentsCount
-                location {
-                  name
-                }
-                badges {
+                categories {
                   id
-                  key
+                  name
                   icon
                 }
+                author {
+                  id
+                  name
+                  slug
+                  avatar
+                  contributionsCount
+                  followedByCount
+                  commentsCount
+                  location {
+                    name: name${this.$i18n.locale().toUpperCase()}
+                  }
+                  badges {
+                    id
+                    key
+                    icon
+                  }
+                }
               }
+              shoutedCount
             }
-            shoutedCount
           }
-        }
-      `),
+        `)
+      },
       variables() {
         return {
           slug: this.$route.params.slug
diff --git a/pages/profile/_slug.vue b/pages/profile/_slug.vue
index 670a4e81b..743b9ca81 100644
--- a/pages/profile/_slug.vue
+++ b/pages/profile/_slug.vue
@@ -360,7 +360,9 @@ export default {
   },
   apollo: {
     User: {
-      query: require('~/graphql/UserProfileQuery.js').default,
+      query() {
+        return require('~/graphql/UserProfileQuery.js').default(this)
+      },
       variables() {
         return {
           slug: this.$route.params.slug,

From bf73b7ca840c32373e3df450e0c33545d59b3f39 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 8 Jan 2019 14:36:36 +0100
Subject: [PATCH 18/46] Added missing axios configuration

---
 plugins/apollo-config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/apollo-config.js b/plugins/apollo-config.js
index 5c9c3632e..42cff717a 100644
--- a/plugins/apollo-config.js
+++ b/plugins/apollo-config.js
@@ -1,4 +1,4 @@
-export default function({ app }) {
+export default ({ app }) => {
   const backendUrl = process.env.BACKEND_URL || 'http://localhost:4000'
   return {
     httpEndpoint: process.server ? backendUrl : '/api',

From 0c336279b401ad81d0a4733ea8e5c702188007ed Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 8 Jan 2019 14:37:07 +0100
Subject: [PATCH 19/46] Improved dropdown behaviour

---
 components/Dropdown.vue | 21 +++++++++++++++++++++
 layouts/default.vue     | 21 +++++++++++++++++++++
 2 files changed, 42 insertions(+)

diff --git a/components/Dropdown.vue b/components/Dropdown.vue
index f47c1cabb..1440170f3 100644
--- a/components/Dropdown.vue
+++ b/components/Dropdown.vue
@@ -36,6 +36,27 @@ export default {
       isPopoverOpen: false
     }
   },
+  watch: {
+    isPopoverOpen: {
+      immediate: true,
+      handler(isOpen) {
+        console.log('isOpen', isOpen)
+        try {
+          if (isOpen) {
+            setTimeout(() => {
+              document
+                .getElementsByTagName('body')[0]
+                .classList.add('dropdown-open')
+            }, 10)
+          } else {
+            document
+              .getElementsByTagName('body')[0]
+              .classList.remove('dropdown-open')
+          }
+        } catch (err) {}
+      }
+    }
+  },
   beforeDestroy() {
     clearTimeout(mouseEnterTimer)
     clearTimeout(mouseLeaveTimer)
diff --git a/layouts/default.vue b/layouts/default.vue
index 56285c753..6004cec26 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -81,6 +81,7 @@
         <nuxt />
       </div>
     </ds-container>
+    <div id="overlay" />
   </div>
 </template>
 
@@ -162,4 +163,24 @@ export default {
     padding-bottom: 1rem;
   }
 }
+
+#overlay {
+  display: block;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  position: fixed;
+  background: rgba(0, 0, 0, 0.15);
+  z-index: 99;
+  pointer-events: none;
+  transition: opacity 150ms ease-out;
+  transition-delay: 50ms;
+
+  .dropdown-open & {
+    opacity: 1;
+    transition-delay: 0;
+  }
+}
 </style>

From 90ea91c33386bb109bbe24fe653c9b8d88786db1 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 8 Jan 2019 14:41:51 +0100
Subject: [PATCH 20/46] Fixed small issue with dropdown

---
 assets/styles/main.scss | 20 ++++++++++++++++++++
 layouts/blank.vue       |  1 +
 layouts/default.vue     | 20 --------------------
 3 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/assets/styles/main.scss b/assets/styles/main.scss
index e9254c4b9..91b040f54 100644
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -126,3 +126,23 @@ hr {
   background-color: $color-neutral-80;
   height: 1px !important;
 }
+
+#overlay {
+  display: block;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  position: fixed;
+  background: rgba(0, 0, 0, 0.15);
+  z-index: 99;
+  pointer-events: none;
+  transition: opacity 150ms ease-out;
+  transition-delay: 50ms;
+
+  .dropdown-open & {
+    opacity: 1;
+    transition-delay: 0;
+  }
+}
diff --git a/layouts/blank.vue b/layouts/blank.vue
index 23a783ac6..140ec9f6e 100644
--- a/layouts/blank.vue
+++ b/layouts/blank.vue
@@ -5,6 +5,7 @@
         <nuxt />
       </div>
     </ds-container>
+    <div id="overlay" />
   </div>
 </template>
 
diff --git a/layouts/default.vue b/layouts/default.vue
index 6004cec26..aee92529d 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -163,24 +163,4 @@ export default {
     padding-bottom: 1rem;
   }
 }
-
-#overlay {
-  display: block;
-  opacity: 0;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  position: fixed;
-  background: rgba(0, 0, 0, 0.15);
-  z-index: 99;
-  pointer-events: none;
-  transition: opacity 150ms ease-out;
-  transition-delay: 50ms;
-
-  .dropdown-open & {
-    opacity: 1;
-    transition-delay: 0;
-  }
-}
 </style>

From a518412ea052aa8ee9cbc2e547b85804439918de Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 8 Jan 2019 15:19:04 +0100
Subject: [PATCH 21/46] Improved location testing

---
 cypress/integration/AboutMeAndLocation.feature | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/cypress/integration/AboutMeAndLocation.feature b/cypress/integration/AboutMeAndLocation.feature
index 72a97bf22..0f5c6733b 100644
--- a/cypress/integration/AboutMeAndLocation.feature
+++ b/cypress/integration/AboutMeAndLocation.feature
@@ -24,12 +24,19 @@ Feature: About me and and location
     And I enter "Peter Lustig" as my name
     And I press "Save"
 
-  Scenario: I set my location
+  Scenario Outline: I set my location to "<location>"
     When I visit the "settings" page
-    And I enter "Hamburg" as my location
+    And I enter "<location>" as my location
     And I press "Save"
     And I visit the "profile/peter-lustig" page
-    Then I can see a "Hamburg" as my location
+    Then I can see a "<location>" as my location
+
+    Examples: Location
+        | location               |
+        | New York               |
+        | Germany                |
+        | Berlin                 |
+        | Mecklenburg-Vorpommern |
 
   Scenario: I write about me
     When I visit the "settings" page

From ee8dbb77655a5cc97efa07ba48d8ce7acfeaee6e Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 8 Jan 2019 17:34:36 +0100
Subject: [PATCH 22/46] Always use english lang on login

---
 cypress/integration/common/steps.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/cypress/integration/common/steps.js b/cypress/integration/common/steps.js
index a368b7f5c..77a864e2c 100644
--- a/cypress/integration/common/steps.js
+++ b/cypress/integration/common/steps.js
@@ -27,6 +27,7 @@ const switchLanguage = function(name) {
 
 const login = (email, password) => {
   cy.visit(`${baseUrl}/login`)
+  switchLanguage('English')
   cy.get('input[name=email]')
     .trigger('focus')
     .type(email)

From bd502da17b8629448d442306302889288b085975 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?=
 <roschaefer@users.noreply.github.com>
Date: Tue, 8 Jan 2019 18:19:32 +0100
Subject: [PATCH 23/46] Update cypress/integration/AboutMeAndLocation.feature

Co-Authored-By: appinteractive <greg@app-interactive.de>
---
 cypress/integration/AboutMeAndLocation.feature | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/integration/AboutMeAndLocation.feature b/cypress/integration/AboutMeAndLocation.feature
index 0f5c6733b..10c60bb15 100644
--- a/cypress/integration/AboutMeAndLocation.feature
+++ b/cypress/integration/AboutMeAndLocation.feature
@@ -3,7 +3,7 @@ Feature: About me and and location
   I would like to add some about me text and a location
   So others can get some info about me and my location
 
-  The location and about me are show on the user. Later it will be possible
+  The location and about me are displayed on the user profile. Later it will be possible
   to search for users by location.
 
   Background:

From c563d7ccc15d9534c84b1a6b7c58c3e2d7f73eb8 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 8 Jan 2019 18:24:48 +0100
Subject: [PATCH 24/46] Added: And I am on the "settings" page on given

---
 cypress/integration/AboutMeAndLocation.feature | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/cypress/integration/AboutMeAndLocation.feature b/cypress/integration/AboutMeAndLocation.feature
index 10c60bb15..ab2f2c276 100644
--- a/cypress/integration/AboutMeAndLocation.feature
+++ b/cypress/integration/AboutMeAndLocation.feature
@@ -8,9 +8,9 @@ Feature: About me and and location
 
   Background:
     Given I am logged in
+    And I am on the "settings" page
 
   Scenario: I change my name
-    When I visit the "settings" page
     And I enter "Hansi" as my name
     And I press "Save"
     And I can click on my profile picture in the top right corner
@@ -25,8 +25,7 @@ Feature: About me and and location
     And I press "Save"
 
   Scenario Outline: I set my location to "<location>"
-    When I visit the "settings" page
-    And I enter "<location>" as my location
+    When I enter "<location>" as my location
     And I press "Save"
     And I visit the "profile/peter-lustig" page
     Then I can see a "<location>" as my location
@@ -39,8 +38,7 @@ Feature: About me and and location
         | Mecklenburg-Vorpommern |
 
   Scenario: I write about me
-    When I visit the "settings" page
-    And I enter "Some text about me" to about me
+    When I enter "Some text about me" to about me
     And I press "Save"
     And I visit the "profile/peter-lustig" page
     Then I can see a "Some text about me" as my about me

From f982ea2c409737b957f66d4bc2c6aac10fc09e22 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 8 Jan 2019 18:37:28 +0100
Subject: [PATCH 25/46] Improved testing

---
 .../integration/AboutMeAndLocation.feature    | 22 ++++++-------------
 cypress/integration/common/steps.js           | 16 +++++++++-----
 2 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/cypress/integration/AboutMeAndLocation.feature b/cypress/integration/AboutMeAndLocation.feature
index ab2f2c276..d013823c0 100644
--- a/cypress/integration/AboutMeAndLocation.feature
+++ b/cypress/integration/AboutMeAndLocation.feature
@@ -11,18 +11,11 @@ Feature: About me and and location
     And I am on the "settings" page
 
   Scenario: I change my name
-    And I enter "Hansi" as my name
-    And I press "Save"
-    And I can click on my profile picture in the top right corner
-    Then I can see a "Hansi" as my name
+    When save "Hansi" as my new name
+    Then I can see my new name "Hansi" when I click on my profile picture in the top right
 
     When I refresh the page
-    And I can click on my profile picture in the top right corner
-    Then I can see a "Hansi" as my name
-
-    When I visit the "settings" page
-    And I enter "Peter Lustig" as my name
-    And I press "Save"
+    Then I can see my new name "Hansi" when I click on my profile picture in the top right
 
   Scenario Outline: I set my location to "<location>"
     When I enter "<location>" as my location
@@ -31,11 +24,10 @@ Feature: About me and and location
     Then I can see a "<location>" as my location
 
     Examples: Location
-        | location               |
-        | New York               |
-        | Germany                |
-        | Berlin                 |
-        | Mecklenburg-Vorpommern |
+        | location               | type    |
+        | Paris                  | City    |
+        | Mecklenburg-Vorpommern | Region  |
+        | Germany                | Country |
 
   Scenario: I write about me
     When I enter "Some text about me" to about me
diff --git a/cypress/integration/common/steps.js b/cypress/integration/common/steps.js
index 77a864e2c..4e7ac892d 100644
--- a/cypress/integration/common/steps.js
+++ b/cypress/integration/common/steps.js
@@ -172,15 +172,19 @@ When('I enter {string} to about me', text => {
     .clear()
     .type(text)
 })
-When('I enter {string} as my name', text => {
+When('save {string} as my new name', name => {
   cy.get('input[id=name]')
     .clear()
-    .type(text)
+    .type(name)
+  cy.contains('Save').click()
 })
-Then('I can see {string} as my name', text => {
-  cy.get('input[id=name]')
-    .clear()
-    .type(text)
+Then(
+  'I can see my new name {string} when I click on my profile picture in the top right',
+  name => {
+    cy.get('input[id=name]')
+      .clear()
+      .type(name)
+    cy.contains('Save').click()
 })
 When('I press {string}', label => {
   cy.contains(label).click()

From 272012c0207f3cdd8e0f8c4cf8807897f1e229c2 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 8 Jan 2019 18:45:36 +0100
Subject: [PATCH 26/46] Further condensed testing

---
 cypress/integration/AboutMeAndLocation.feature | 10 ++++------
 cypress/integration/common/steps.js            | 10 ++++++----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/cypress/integration/AboutMeAndLocation.feature b/cypress/integration/AboutMeAndLocation.feature
index d013823c0..9d0760a04 100644
--- a/cypress/integration/AboutMeAndLocation.feature
+++ b/cypress/integration/AboutMeAndLocation.feature
@@ -11,17 +11,16 @@ Feature: About me and and location
     And I am on the "settings" page
 
   Scenario: I change my name
-    When save "Hansi" as my new name
+    When I save "Hansi" as my new name
     Then I can see my new name "Hansi" when I click on my profile picture in the top right
 
     When I refresh the page
     Then I can see my new name "Hansi" when I click on my profile picture in the top right
 
   Scenario Outline: I set my location to "<location>"
-    When I enter "<location>" as my location
-    And I press "Save"
+    When I save "<location>" as my location
     And I visit the "profile/peter-lustig" page
-    Then I can see a "<location>" as my location
+    Then I can see "<location>" as my location
 
     Examples: Location
         | location               | type    |
@@ -30,8 +29,7 @@ Feature: About me and and location
         | Germany                | Country |
 
   Scenario: I write about me
-    When I enter "Some text about me" to about me
-    And I press "Save"
+    When I save "Some text about me" to about me
     And I visit the "profile/peter-lustig" page
     Then I can see a "Some text about me" as my about me
 
diff --git a/cypress/integration/common/steps.js b/cypress/integration/common/steps.js
index 4e7ac892d..5619174d9 100644
--- a/cypress/integration/common/steps.js
+++ b/cypress/integration/common/steps.js
@@ -161,18 +161,20 @@ Then('I can see a list of tags ordered by user and post count:', table => {
   lastColumnIsSortedInDescendingOrder()
 })
 
-When('I enter {string} as my location', location => {
+When('I save {string} as my location', location => {
   cy.get('input[id=city]').type(location)
   cy.get('.ds-select-option')
     .contains(location)
     .click()
+  cy.contains('Save').click()
 })
-When('I enter {string} to about me', text => {
+When('I save {string} to about me', text => {
   cy.get('textarea[id=bio]')
     .clear()
     .type(text)
+  cy.contains('Save').click()
 })
-When('save {string} as my new name', name => {
+When('I save {string} as my new name', name => {
   cy.get('input[id=name]')
     .clear()
     .type(name)
@@ -189,7 +191,7 @@ Then(
 When('I press {string}', label => {
   cy.contains(label).click()
 })
-Then('I can see a {string} as my location', location => {
+Then('I can see {string} as my location', location => {
   cy.contains(location)
 })
 Then('I can see a {string} as my about me', about => {

From aeed12a2bfde7571f30c6b032208f7e921235427 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 8 Jan 2019 18:47:14 +0100
Subject: [PATCH 27/46] Fixed linting

---
 cypress/integration/common/steps.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/cypress/integration/common/steps.js b/cypress/integration/common/steps.js
index 5619174d9..c0510eff1 100644
--- a/cypress/integration/common/steps.js
+++ b/cypress/integration/common/steps.js
@@ -1,6 +1,5 @@
 import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
 import find from 'lodash/find'
-import { eq } from 'semver';
 
 /* global cy */
 
@@ -74,7 +73,6 @@ Given('my user account has the role {string}', role => {
   // TODO: use db factories instead of seed data
 })
 
-
 When('I log out', logout)
 
 When('I visit the {string} page', page => {
@@ -187,7 +185,8 @@ Then(
       .clear()
       .type(name)
     cy.contains('Save').click()
-})
+  }
+)
 When('I press {string}', label => {
   cy.contains(label).click()
 })

From 5a664053a5f4b8650c7275a1fb277ab403118b97 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 8 Jan 2019 19:25:40 +0100
Subject: [PATCH 28/46] Refactored testingsetup

---
 .../{Login.feature => 01.Login.feature}       |   6 +-
 ...eature => 02.Internationalization.feature} |   0
 ...s.feature => 03.TagsAndCategories.feature} |   0
 ....feature => 04.AboutMeAndLocation.feature} |   1 +
 cypress/integration/common/admin.js           |  39 ++++++
 cypress/integration/common/settings.js        |  48 ++++++++
 cypress/integration/common/steps.js           | 112 ++----------------
 cypress/support/commands.js                   |  37 +++++-
 cypress/support/config.js                     |  17 +++
 9 files changed, 149 insertions(+), 111 deletions(-)
 rename cypress/integration/{Login.feature => 01.Login.feature} (71%)
 rename cypress/integration/{Internationalization.feature => 02.Internationalization.feature} (100%)
 rename cypress/integration/{TagsAndCategories.feature => 03.TagsAndCategories.feature} (100%)
 rename cypress/integration/{AboutMeAndLocation.feature => 04.AboutMeAndLocation.feature} (96%)
 create mode 100644 cypress/integration/common/admin.js
 create mode 100644 cypress/integration/common/settings.js
 create mode 100644 cypress/support/config.js

diff --git a/cypress/integration/Login.feature b/cypress/integration/01.Login.feature
similarity index 71%
rename from cypress/integration/Login.feature
rename to cypress/integration/01.Login.feature
index a7a47ddd5..72adc8553 100644
--- a/cypress/integration/Login.feature
+++ b/cypress/integration/01.Login.feature
@@ -5,8 +5,10 @@ Feature: Authentication
 
   Background:
     Given my account has the following details:
-      | name         | email             | password |
-      | Peter Lustig | admin@example.org | 1234     |
+      | name                | email                 | password | type
+      | Peter Lustig        | admin@example.org     | 1234     | Admin
+      | Bob der Bausmeister | moderator@example.org | 1234     | Moderator
+      | Jenny Rostock"      | user@example.org      | 1234     | User
 
   Scenario: Log in
     When I visit the "/login" page
diff --git a/cypress/integration/Internationalization.feature b/cypress/integration/02.Internationalization.feature
similarity index 100%
rename from cypress/integration/Internationalization.feature
rename to cypress/integration/02.Internationalization.feature
diff --git a/cypress/integration/TagsAndCategories.feature b/cypress/integration/03.TagsAndCategories.feature
similarity index 100%
rename from cypress/integration/TagsAndCategories.feature
rename to cypress/integration/03.TagsAndCategories.feature
diff --git a/cypress/integration/AboutMeAndLocation.feature b/cypress/integration/04.AboutMeAndLocation.feature
similarity index 96%
rename from cypress/integration/AboutMeAndLocation.feature
rename to cypress/integration/04.AboutMeAndLocation.feature
index 9d0760a04..ee049fa31 100644
--- a/cypress/integration/AboutMeAndLocation.feature
+++ b/cypress/integration/04.AboutMeAndLocation.feature
@@ -16,6 +16,7 @@ Feature: About me and and location
 
     When I refresh the page
     Then I can see my new name "Hansi" when I click on my profile picture in the top right
+    Then I save "Peter Lustig" as my new name
 
   Scenario Outline: I set my location to "<location>"
     When I save "<location>" as my location
diff --git a/cypress/integration/common/admin.js b/cypress/integration/common/admin.js
new file mode 100644
index 000000000..b1466a402
--- /dev/null
+++ b/cypress/integration/common/admin.js
@@ -0,0 +1,39 @@
+import { When, Then } from 'cypress-cucumber-preprocessor/steps'
+
+/* global cy */
+
+const lastColumnIsSortedInDescendingOrder = () => {
+  cy.get('tbody')
+    .find('tr td:last-child')
+    .then(lastColumn => {
+      cy.wrap(lastColumn)
+      const values = lastColumn
+        .map((i, td) => parseInt(td.textContent))
+        .toArray()
+      const orderedDescending = values.slice(0).sort((a, b) => b - a)
+      return cy.wrap(values).should('deep.eq', orderedDescending)
+    })
+}
+
+When('I navigate to the administration dashboard', () => {
+  cy.get('.avatar-menu').click()
+  cy.get('.avatar-menu-popover a')
+    .contains('Admin')
+    .click()
+})
+
+Then('I can see a list of categories ordered by post count:', table => {
+  // TODO: match the table in the feature with the html table
+  cy.get('thead')
+    .find('tr th')
+    .should('have.length', 3)
+  lastColumnIsSortedInDescendingOrder()
+})
+
+Then('I can see a list of tags ordered by user and post count:', table => {
+  // TODO: match the table in the feature with the html table
+  cy.get('thead')
+    .find('tr th')
+    .should('have.length', 4)
+  lastColumnIsSortedInDescendingOrder()
+})
diff --git a/cypress/integration/common/settings.js b/cypress/integration/common/settings.js
new file mode 100644
index 000000000..9036d5a5e
--- /dev/null
+++ b/cypress/integration/common/settings.js
@@ -0,0 +1,48 @@
+import { When, Then } from 'cypress-cucumber-preprocessor/steps'
+
+/* global cy */
+
+When('I save {string} as my new name', name => {
+  cy.get('input[id=name]')
+    .clear()
+    .type(name)
+  cy.contains('Save').click()
+})
+
+When('I save {string} as my location', location => {
+  cy.get('input[id=city]').type(location)
+  cy.get('.ds-select-option')
+    .contains(location)
+    .click()
+  cy.contains('Save').click()
+})
+
+When('I save {string} to about me', text => {
+  cy.get('textarea[id=bio]')
+    .clear()
+    .type(text)
+  cy.contains('Save').click()
+})
+
+Then(
+  'I can see my new name {string} when I click on my profile picture in the top right',
+  name => {
+    cy.get('input[id=name]')
+      .clear()
+      .type(name)
+    cy.contains('Save').click()
+  }
+)
+
+Then('I can see {string} as my location', location => {
+  cy.contains(location)
+})
+
+Then('I can see a {string} as my about me', about => {
+  cy.contains(about)
+})
+
+Then('I can see a {string} as my name', name => {
+  cy.get('.avatar-menu-popover').contains(name)
+})
+
diff --git a/cypress/integration/common/steps.js b/cypress/integration/common/steps.js
index c0510eff1..0561bd503 100644
--- a/cypress/integration/common/steps.js
+++ b/cypress/integration/common/steps.js
@@ -1,9 +1,9 @@
 import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
 import find from 'lodash/find'
+import { baseUrl } from '../../support/config'
 
-/* global cy */
+/* global cy  */
 
-const baseUrl = 'http://localhost:3000'
 const username = 'Peter Lustig'
 
 const locales = require('../../../locales')
@@ -19,46 +19,8 @@ const openPage = function(page) {
   cy.visit(`${baseUrl}/${page}`)
 }
 
-const switchLanguage = function(name) {
-  cy.get('.login-locale-switch a').click()
-  cy.contains('.locale-menu-popover a', name).click()
-}
-
-const login = (email, password) => {
-  cy.visit(`${baseUrl}/login`)
-  switchLanguage('English')
-  cy.get('input[name=email]')
-    .trigger('focus')
-    .type(email)
-  cy.get('input[name=password]')
-    .trigger('focus')
-    .type(password)
-  cy.get('button[name=submit]')
-    .as('submitButton')
-    .click()
-  cy.location('pathname').should('eq', '/') // we're in!
-}
-
-const logout = () => {
-  cy.visit(`${baseUrl}/logout`)
-  cy.location('pathname').should('contain', '/login') // we're out
-}
-
-const lastColumnIsSortedInDescendingOrder = () => {
-  cy.get('tbody')
-    .find('tr td:last-child')
-    .then(last_column => {
-      cy.wrap(last_column)
-      const values = last_column
-        .map((i, td) => parseInt(td.textContent))
-        .toArray()
-      const ordered_descending = values.slice(0).sort((a, b) => b - a)
-      return cy.wrap(values).should('deep.eq', ordered_descending)
-    })
-}
-
 Given('I am logged in', () => {
-  login('admin@example.org', 1234)
+  cy.login('admin@example.org', 1234)
 })
 
 Given('we have a selection of tags and categories as well as posts', () => {
@@ -73,7 +35,7 @@ Given('my user account has the role {string}', role => {
   // TODO: use db factories instead of seed data
 })
 
-When('I log out', logout)
+When('I log out', cy.logout)
 
 When('I visit the {string} page', page => {
   openPage(page)
@@ -83,7 +45,7 @@ Given('I am on the {string} page', page => {
 })
 
 When('I fill in my email and password combination and click submit', () => {
-  login('admin@example.org', 1234)
+  cy.login('admin@example.org', 1234)
 })
 
 When('I refresh the page', () => {
@@ -118,10 +80,10 @@ Then('I am still logged in', () => {
 })
 
 When('I select {string} in the language menu', name => {
-  switchLanguage(name)
+  cy.switchLanguage(name)
 })
 Given('I previously switched the language to {string}', name => {
-  switchLanguage(name)
+  cy.switchLanguage(name)
 })
 Then('the whole user interface appears in {string}', name => {
   const lang = getLangByName(name)
@@ -132,70 +94,10 @@ Then('I see a button with the label {string}', label => {
   cy.contains('button', label)
 })
 
-When('I navigate to the administration dashboard', () => {
-  cy.get('.avatar-menu').click()
-  cy.get('.avatar-menu-popover a')
-    .contains('Admin')
-    .click()
-})
-
 When(`I click on {string}`, linkOrButton => {
   cy.contains(linkOrButton).click()
 })
 
-Then('I can see a list of categories ordered by post count:', table => {
-  // TODO: match the table in the feature with the html table
-  cy.get('thead')
-    .find('tr th')
-    .should('have.length', 3)
-  lastColumnIsSortedInDescendingOrder()
-})
-
-Then('I can see a list of tags ordered by user and post count:', table => {
-  // TODO: match the table in the feature with the html table
-  cy.get('thead')
-    .find('tr th')
-    .should('have.length', 4)
-  lastColumnIsSortedInDescendingOrder()
-})
-
-When('I save {string} as my location', location => {
-  cy.get('input[id=city]').type(location)
-  cy.get('.ds-select-option')
-    .contains(location)
-    .click()
-  cy.contains('Save').click()
-})
-When('I save {string} to about me', text => {
-  cy.get('textarea[id=bio]')
-    .clear()
-    .type(text)
-  cy.contains('Save').click()
-})
-When('I save {string} as my new name', name => {
-  cy.get('input[id=name]')
-    .clear()
-    .type(name)
-  cy.contains('Save').click()
-})
-Then(
-  'I can see my new name {string} when I click on my profile picture in the top right',
-  name => {
-    cy.get('input[id=name]')
-      .clear()
-      .type(name)
-    cy.contains('Save').click()
-  }
-)
 When('I press {string}', label => {
   cy.contains(label).click()
 })
-Then('I can see {string} as my location', location => {
-  cy.contains(location)
-})
-Then('I can see a {string} as my about me', about => {
-  cy.contains(about)
-})
-Then('I can see a {string} as my name', name => {
-  cy.get('.avatar-menu-popover').contains(name)
-})
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index c1f5a772e..0eb913836 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -10,16 +10,45 @@
 //
 //
 // -- This is a parent command --
-// Cypress.Commands.add("login", (email, password) => { ... })
+// Cypress.Commands.add('login', (email, password) => { ... })
+
+/* globals Cypress cy */
+
+import { baseUrl } from './config'
+
+Cypress.Commands.add('switchLanguage', lang => {
+  cy.get('.login-locale-switch a').click()
+  cy.contains('.locale-menu-popover a', lang).click()
+})
+
+Cypress.Commands.add('login', (email, password) => {
+  cy.visit(`${baseUrl}/login`)
+  cy.switchLanguage('English')
+  cy.get('input[name=email]')
+    .trigger('focus')
+    .type(email)
+  cy.get('input[name=password]')
+    .trigger('focus')
+    .type(password)
+  cy.get('button[name=submit]')
+    .as('submitButton')
+    .click()
+  cy.location('pathname').should('eq', '/') // we're in!
+})
+Cypress.Commands.add('logout', (email, password) => {
+  cy.visit(`${baseUrl}/logout`)
+  cy.location('pathname').should('contain', '/login') // we're out
+})
+
 //
 //
 // -- This is a child command --
-// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
 //
 //
 // -- This is a dual command --
-// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
 //
 //
 // -- This is will overwrite an existing command --
-// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
diff --git a/cypress/support/config.js b/cypress/support/config.js
new file mode 100644
index 000000000..feabb62fe
--- /dev/null
+++ b/cypress/support/config.js
@@ -0,0 +1,17 @@
+export default {
+  baseUrl: 'http://localhost:3000',
+  users: {
+    admin: {
+      email: 'admin@example.org',
+      password: 1234
+    },
+    moderator: {
+      email: 'moderator@example.org',
+      password: 1234
+    },
+    user: {
+      email: 'user@example.org',
+      password: 1234
+    }
+  }
+}

From bfee061a269310016718fedf744da40f7a713042 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Wed, 9 Jan 2019 17:22:02 +0100
Subject: [PATCH 29/46] Added JWT_SECRET from env var

---
 server/index.js | 4 +++-
 store/auth.js   | 7 +------
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/server/index.js b/server/index.js
index abe500eb7..126a079fd 100644
--- a/server/index.js
+++ b/server/index.js
@@ -2,9 +2,11 @@ const express = require('express')
 const consola = require('consola')
 const { Nuxt, Builder } = require('nuxt')
 const app = express()
+
+require('dotenv').config() //
+
 const host = process.env.HOST || '127.0.0.1'
 const port = process.env.PORT || 3000
-
 app.set('port', port)
 
 // Import and Set Nuxt.js options
diff --git a/store/auth.js b/store/auth.js
index 956ba8f83..a6ab3b3f8 100644
--- a/store/auth.js
+++ b/store/auth.js
@@ -58,12 +58,7 @@ export const actions = {
       return
     }
 
-    const payload = await jwt.verify(
-      token,
-      process.server
-        ? require('dotenv').parse(require('fs').readFileSync('.env')).JWT_SECRET
-        : null
-    )
+    const payload = await jwt.verify(token, process.env.JWT_SECRET)
     if (!payload.id) {
       return
     }

From 2cb18f33d50dd31eb688027eb2dbc45ad010e6f7 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Wed, 9 Jan 2019 17:43:09 +0100
Subject: [PATCH 30/46] Try to fix build - issue #128

---
 .travis.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.travis.yml b/.travis.yml
index 0ad6b5e30..98c84cde1 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -21,7 +21,7 @@ install:
   - docker build --build-arg BUILD_COMMIT=$TRAVIS_COMMIT -t humanconnection/nitro-web .
   - docker-compose -f docker-compose.yml up -d
   - git clone https://github.com/Human-Connection/Nitro-Backend.git ../Nitro-Backend
-  - git -C "../Nitro-Backend" checkout $TRAVIS_BRANCH || echo "Branch \`$TRAVIS_BRANCH\` does not exist, falling back to \`master\`"
+  - git -C "../Nitro-Backend" checkout $TRAVIS_PULL_REQUEST_BRANCH || git -C "../Nitro-Backend" checkout $TRAVIS_BRANCH || echo "Branch \`$TRAVIS_PULL_REQUEST_BRANCH\` and \`$TRAVIS_BRANCH\` does not exist, falling back to \`master\`"
   - docker-compose -f ../Nitro-Backend/docker-compose.yml -f ../Nitro-Backend/docker-compose.travis.yml up -d
   - yarn global add cypress wait-on
   - yarn add cypress-cucumber-preprocessor

From ac04e766f9cedb4e8d8ed6a6f82d2b4650c85117 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Wed, 9 Jan 2019 17:52:39 +0100
Subject: [PATCH 31/46] Removed console log

---
 components/Dropdown.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/Dropdown.vue b/components/Dropdown.vue
index 1440170f3..c5eca14eb 100644
--- a/components/Dropdown.vue
+++ b/components/Dropdown.vue
@@ -40,7 +40,6 @@ export default {
     isPopoverOpen: {
       immediate: true,
       handler(isOpen) {
-        console.log('isOpen', isOpen)
         try {
           if (isOpen) {
             setTimeout(() => {

From 3382c5ef6f788d37fedcfb1e2c56f82820f747dc Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Thu, 10 Jan 2019 12:11:26 +0100
Subject: [PATCH 32/46] Removed unused comment slashes

---
 server/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/index.js b/server/index.js
index 126a079fd..66738790e 100644
--- a/server/index.js
+++ b/server/index.js
@@ -3,7 +3,7 @@ const consola = require('consola')
 const { Nuxt, Builder } = require('nuxt')
 const app = express()
 
-require('dotenv').config() //
+require('dotenv').config()
 
 const host = process.env.HOST || '127.0.0.1'
 const port = process.env.PORT || 3000

From 5c7ecfc6a677f48add2b6ab5c6e1b59bf07b70af Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Thu, 10 Jan 2019 13:50:20 +0100
Subject: [PATCH 33/46] Improved integration tests

---
 cypress.json                                  |  3 +-
 .../integration/04.AboutMeAndLocation.feature | 22 ++++---
 cypress/integration/common/settings.js        | 65 ++++++++++++++-----
 cypress/integration/common/steps.js           | 17 ++---
 cypress/support/commands.js                   | 26 ++++++--
 cypress/support/config.js                     |  1 -
 cypress/support/helpers.js                    | 11 ++++
 7 files changed, 99 insertions(+), 46 deletions(-)
 create mode 100644 cypress/support/helpers.js

diff --git a/cypress.json b/cypress.json
index af4800ea3..f41489007 100644
--- a/cypress.json
+++ b/cypress.json
@@ -1,4 +1,5 @@
 {
   "projectId": "qa7fe2",
-  "ignoreTestFiles": "*.js"
+  "ignoreTestFiles": "*.js",
+  "baseUrl": "http://localhost:3000"
 }
diff --git a/cypress/integration/04.AboutMeAndLocation.feature b/cypress/integration/04.AboutMeAndLocation.feature
index ee049fa31..4b5308e25 100644
--- a/cypress/integration/04.AboutMeAndLocation.feature
+++ b/cypress/integration/04.AboutMeAndLocation.feature
@@ -14,14 +14,16 @@ Feature: About me and and location
     When I save "Hansi" as my new name
     Then I can see my new name "Hansi" when I click on my profile picture in the top right
 
-    When I refresh the page
-    Then I can see my new name "Hansi" when I click on my profile picture in the top right
-    Then I save "Peter Lustig" as my new name
+  Scenario: Keep changes after refresh
+    When I changed my username to "Hansi" previously
+    And I refresh the page
+    Then my new username is still there
 
   Scenario Outline: I set my location to "<location>"
     When I save "<location>" as my location
-    And I visit the "profile/peter-lustig" page
-    Then I can see "<location>" as my location
+    And my username is "Peter Lustig"
+    When people visit my profile page
+    Then they can see the location in the info box below my avatar
 
     Examples: Location
         | location               | type    |
@@ -29,10 +31,12 @@ Feature: About me and and location
         | Mecklenburg-Vorpommern | Region  |
         | Germany                | Country |
 
-  Scenario: I write about me
-    When I save "Some text about me" to about me
-    And I visit the "profile/peter-lustig" page
-    Then I can see a "Some text about me" as my about me
+  Scenario: Display a description on profile page
+    Given I have the following self-description: "Ich lebe fettlos, fleischlos, fischlos dahin, fühle mich aber ganz wohl dabei"
+    And my username is "Peter Lustig"
+    When people visit my profile page
+    Then they can see the text in the info box below my avatar
+
 
 
 
diff --git a/cypress/integration/common/settings.js b/cypress/integration/common/settings.js
index 9036d5a5e..5058d01b5 100644
--- a/cypress/integration/common/settings.js
+++ b/cypress/integration/common/settings.js
@@ -2,11 +2,25 @@ import { When, Then } from 'cypress-cucumber-preprocessor/steps'
 
 /* global cy */
 
-When('I save {string} as my new name', name => {
+let aboutMeText
+let myLocation
+let myName
+
+const matchNameInUserMenu = name => {
+  cy.get('.avatar-menu').click()
+  cy.get('.avatar-menu-popover').contains(name)
+}
+
+const setUserName = name => {
   cy.get('input[id=name]')
     .clear()
     .type(name)
   cy.contains('Save').click()
+  myName = name
+}
+
+When('I save {string} as my new name', name => {
+  setUserName(name)
 })
 
 When('I save {string} as my location', location => {
@@ -15,34 +29,49 @@ When('I save {string} as my location', location => {
     .contains(location)
     .click()
   cy.contains('Save').click()
+  myLocation = location
 })
 
-When('I save {string} to about me', text => {
+When('I have the following self-description: {string}', text => {
   cy.get('textarea[id=bio]')
     .clear()
     .type(text)
   cy.contains('Save').click()
+  aboutMeText = text
+})
+
+When('my username is {string}', name => {
+  if (myName !== name) {
+    setUserName(name)
+  }
+  matchNameInUserMenu(name)
+})
+
+When('people visit my profile page', url => {
+  cy.visitMyProfile()
+})
+
+When('they can see the text in the info box below my avatar', () => {
+  cy.contains(aboutMeText)
+})
+
+When('I changed my username to {string} previously', name => {
+  myName = name
+})
+
+Then('they can see the location in the info box below my avatar', () => {
+  matchNameInUserMenu(myName)
+})
+
+Then('my new username is still there', () => {
+  matchNameInUserMenu(myName)
 })
 
 Then(
   'I can see my new name {string} when I click on my profile picture in the top right',
-  name => {
-    cy.get('input[id=name]')
-      .clear()
-      .type(name)
-    cy.contains('Save').click()
-  }
+  name => matchNameInUserMenu(name)
 )
 
-Then('I can see {string} as my location', location => {
-  cy.contains(location)
-})
-
-Then('I can see a {string} as my about me', about => {
-  cy.contains(about)
-})
-
 Then('I can see a {string} as my name', name => {
-  cy.get('.avatar-menu-popover').contains(name)
+  matchNameInUserMenu(name)
 })
-
diff --git a/cypress/integration/common/steps.js b/cypress/integration/common/steps.js
index 0561bd503..ceaf3d328 100644
--- a/cypress/integration/common/steps.js
+++ b/cypress/integration/common/steps.js
@@ -1,22 +1,15 @@
 import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
-import find from 'lodash/find'
-import { baseUrl } from '../../support/config'
+import { getLangByName } from '../../support/helpers'
 
 /* global cy  */
 
 const username = 'Peter Lustig'
 
-const locales = require('../../../locales')
-
-const getLangByName = function(name) {
-  return find(locales, { name })
-}
-
-const openPage = function(page) {
+const openPage = page => {
   if (page === 'landing') {
     page = ''
   }
-  cy.visit(`${baseUrl}/${page}`)
+  cy.visit(`/${page}`)
 }
 
 Given('I am logged in', () => {
@@ -80,10 +73,10 @@ Then('I am still logged in', () => {
 })
 
 When('I select {string} in the language menu', name => {
-  cy.switchLanguage(name)
+  cy.switchLanguage(name, true)
 })
 Given('I previously switched the language to {string}', name => {
-  cy.switchLanguage(name)
+  cy.switchLanguage(name, true)
 })
 Then('the whole user interface appears in {string}', name => {
   const lang = getLangByName(name)
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index 0eb913836..34fe771ef 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -14,15 +14,31 @@
 
 /* globals Cypress cy */
 
-import { baseUrl } from './config'
+import { getLangByName } from './helpers'
 
-Cypress.Commands.add('switchLanguage', lang => {
+const switchLang = name => {
   cy.get('.login-locale-switch a').click()
-  cy.contains('.locale-menu-popover a', lang).click()
+  cy.contains('.locale-menu-popover a', name).click()
+}
+
+Cypress.Commands.add('switchLanguage', (name, force) => {
+  const code = getLangByName(name).code
+  if (force || !cy.get(`html[lang=${code}]`)) {
+    switchLang(name)
+  }
+})
+
+Cypress.Commands.add('visitMyProfile', () => {
+  if (!cy.get('.avatar-menu-popover')) {
+    cy.get('.avatar-menu').click()
+  }
+  cy.get('.avatar-menu-popover')
+    .find('a[href^="/profile/"]')
+    .click()
 })
 
 Cypress.Commands.add('login', (email, password) => {
-  cy.visit(`${baseUrl}/login`)
+  cy.visit(`/login`)
   cy.switchLanguage('English')
   cy.get('input[name=email]')
     .trigger('focus')
@@ -36,7 +52,7 @@ Cypress.Commands.add('login', (email, password) => {
   cy.location('pathname').should('eq', '/') // we're in!
 })
 Cypress.Commands.add('logout', (email, password) => {
-  cy.visit(`${baseUrl}/logout`)
+  cy.visit(`/logout`)
   cy.location('pathname').should('contain', '/login') // we're out
 })
 
diff --git a/cypress/support/config.js b/cypress/support/config.js
index feabb62fe..af96ad615 100644
--- a/cypress/support/config.js
+++ b/cypress/support/config.js
@@ -1,5 +1,4 @@
 export default {
-  baseUrl: 'http://localhost:3000',
   users: {
     admin: {
       email: 'admin@example.org',
diff --git a/cypress/support/helpers.js b/cypress/support/helpers.js
new file mode 100644
index 000000000..661682139
--- /dev/null
+++ b/cypress/support/helpers.js
@@ -0,0 +1,11 @@
+
+import find from 'lodash/find'
+
+const helpers = {
+  locales: require('../../locales'),
+  getLangByName: name => {
+    return find(helpers.locales, { name })
+  }
+}
+
+export default helpers

From a6b8a8157438133a466a03797a34ea5f56a578a4 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Thu, 10 Jan 2019 13:51:45 +0100
Subject: [PATCH 34/46] Renamed scenario "I change my name" to "change
 username"

---
 cypress/integration/04.AboutMeAndLocation.feature | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/integration/04.AboutMeAndLocation.feature b/cypress/integration/04.AboutMeAndLocation.feature
index 4b5308e25..7a7c23712 100644
--- a/cypress/integration/04.AboutMeAndLocation.feature
+++ b/cypress/integration/04.AboutMeAndLocation.feature
@@ -10,7 +10,7 @@ Feature: About me and and location
     Given I am logged in
     And I am on the "settings" page
 
-  Scenario: I change my name
+  Scenario: Change username
     When I save "Hansi" as my new name
     Then I can see my new name "Hansi" when I click on my profile picture in the top right
 

From 9cfbb8429b07e7cff3fecec829f1294d42e8fea4 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Thu, 10 Jan 2019 13:54:01 +0100
Subject: [PATCH 35/46] Removed unused steps

---
 cypress/integration/common/settings.js | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/cypress/integration/common/settings.js b/cypress/integration/common/settings.js
index 5058d01b5..0f5a9d9cc 100644
--- a/cypress/integration/common/settings.js
+++ b/cypress/integration/common/settings.js
@@ -66,12 +66,3 @@ Then('they can see the location in the info box below my avatar', () => {
 Then('my new username is still there', () => {
   matchNameInUserMenu(myName)
 })
-
-Then(
-  'I can see my new name {string} when I click on my profile picture in the top right',
-  name => matchNameInUserMenu(name)
-)
-
-Then('I can see a {string} as my name', name => {
-  matchNameInUserMenu(name)
-})

From c45be5f39bad28cbe279bb390b939d61dc068eb4 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Thu, 10 Jan 2019 15:32:54 +0100
Subject: [PATCH 36/46] Fixed i18n on SSR

---
 plugins/i18n.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/plugins/i18n.js b/plugins/i18n.js
index 345aa3641..549ae722b 100644
--- a/plugins/i18n.js
+++ b/plugins/i18n.js
@@ -67,9 +67,12 @@ export default ({ app, req, cookie, store }) => {
   if (!isEmpty(localeCookie)) {
     userLocale = localeCookie
   } else {
-    userLocale = process.browser
-      ? navigator.language || navigator.userLanguage
-      : req.locale
+    try {
+      userLocale = process.browser
+        ? navigator.language || navigator.userLanguage
+        : req.headers['accept-language'].split(',')[0]
+    } catch (err) {}
+
     if (userLocale && !isEmpty(userLocale.language)) {
       userLocale = userLocale.language.substr(0, 2)
     }

From 02ed3db6fc3f4311e6371a1ce21b8d2c07fe12e3 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Thu, 10 Jan 2019 15:55:05 +0100
Subject: [PATCH 37/46] Improved integration tests

---
 .../integration/02.Internationalization.feature   |  9 ++++-----
 cypress/integration/common/admin.js               |  4 ++--
 cypress/integration/common/settings.js            |  8 +++++++-
 cypress/integration/common/steps.js               |  4 +---
 cypress/support/commands.js                       | 15 +++++++++------
 5 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/cypress/integration/02.Internationalization.feature b/cypress/integration/02.Internationalization.feature
index 375fc03aa..0a5f90ff0 100644
--- a/cypress/integration/02.Internationalization.feature
+++ b/cypress/integration/02.Internationalization.feature
@@ -13,12 +13,11 @@ Feature: Internationalization
 
     Examples: Login Button
         | language   | buttonLabel |
-        | English    | Login       |
-        | Deutsch    | Einloggen   |
         | Français   | Connexion   |
-        | Nederlands | Inloggen    |
+        | Deutsch    | Einloggen   |
+        | English    | Login       |
 
   Scenario: Keep preferred language after refresh
-    Given I previously switched the language to "Deutsch"
+    Given I previously switched the language to "Français"
     And I refresh the page
-    Then the whole user interface appears in "Deutsch"
+    Then the whole user interface appears in "Français"
diff --git a/cypress/integration/common/admin.js b/cypress/integration/common/admin.js
index b1466a402..9162667b4 100644
--- a/cypress/integration/common/admin.js
+++ b/cypress/integration/common/admin.js
@@ -17,8 +17,8 @@ const lastColumnIsSortedInDescendingOrder = () => {
 
 When('I navigate to the administration dashboard', () => {
   cy.get('.avatar-menu').click()
-  cy.get('.avatar-menu-popover a')
-    .contains('Admin')
+  cy.get('.avatar-menu-popover')
+    .find('a[href="/admin"]')
     .click()
 })
 
diff --git a/cypress/integration/common/settings.js b/cypress/integration/common/settings.js
index 0f5a9d9cc..f4746a3cd 100644
--- a/cypress/integration/common/settings.js
+++ b/cypress/integration/common/settings.js
@@ -7,8 +7,9 @@ let myLocation
 let myName
 
 const matchNameInUserMenu = name => {
-  cy.get('.avatar-menu').click()
+  cy.get('.avatar-menu').click() // open
   cy.get('.avatar-menu-popover').contains(name)
+  cy.get('.avatar-menu').click() // close again
 }
 
 const setUserName = name => {
@@ -66,3 +67,8 @@ Then('they can see the location in the info box below my avatar', () => {
 Then('my new username is still there', () => {
   matchNameInUserMenu(myName)
 })
+
+Then(
+  'I can see my new name {string} when I click on my profile picture in the top right',
+  name => matchNameInUserMenu(name)
+)
diff --git a/cypress/integration/common/steps.js b/cypress/integration/common/steps.js
index ceaf3d328..173b1418d 100644
--- a/cypress/integration/common/steps.js
+++ b/cypress/integration/common/steps.js
@@ -48,8 +48,7 @@ When('I refresh the page', () => {
 When('I log out through the menu in the top right corner', () => {
   cy.get('.avatar-menu').click()
   cy.get('.avatar-menu-popover')
-    .find('a')
-    .contains('Logout')
+    .find('a[href="/logout"]')
     .click()
 })
 
@@ -64,7 +63,6 @@ Then('I can see my name {string} in the dropdown menu', () => {
 
 Then('I see the login screen again', () => {
   cy.location('pathname').should('contain', '/login')
-  cy.contains('If you already have a human-connection account, login here.')
 })
 
 Then('I am still logged in', () => {
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index 34fe771ef..77c75c7d5 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -17,21 +17,25 @@
 import { getLangByName } from './helpers'
 
 const switchLang = name => {
-  cy.get('.login-locale-switch a').click()
+  cy.get('.locale-menu').click()
   cy.contains('.locale-menu-popover a', name).click()
 }
 
 Cypress.Commands.add('switchLanguage', (name, force) => {
   const code = getLangByName(name).code
-  if (force || !cy.get(`html[lang=${code}]`)) {
+  if (force) {
     switchLang(name)
+  } else {
+    cy.get('html').then($html => {
+      if ($html && $html.attr('lang') !== code) {
+        switchLang(name)
+      }
+    })
   }
 })
 
 Cypress.Commands.add('visitMyProfile', () => {
-  if (!cy.get('.avatar-menu-popover')) {
-    cy.get('.avatar-menu').click()
-  }
+  cy.get('.avatar-menu').click()
   cy.get('.avatar-menu-popover')
     .find('a[href^="/profile/"]')
     .click()
@@ -39,7 +43,6 @@ Cypress.Commands.add('visitMyProfile', () => {
 
 Cypress.Commands.add('login', (email, password) => {
   cy.visit(`/login`)
-  cy.switchLanguage('English')
   cy.get('input[name=email]')
     .trigger('focus')
     .type(email)

From b7c0b5d2fa8bbb5beabf95f661178141472227df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 11 Jan 2019 14:36:37 +0100
Subject: [PATCH 38/46] Add missing MAPBOX_TOKEN

---
 .dockerignore      | 4 ++--
 docker-compose.yml | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/.dockerignore b/.dockerignore
index 4ab35e506..cd8fd3390 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -12,7 +12,7 @@ scripts/
 
 cypress/
 
-README.md 
+README.md
 screenshot*.png
 lokalise.png
-.editorconfig
\ No newline at end of file
+.editorconfig
diff --git a/docker-compose.yml b/docker-compose.yml
index c8bba8595..8f20e3788 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -14,6 +14,7 @@ services:
     environment:
       - HOST=0.0.0.0
       - BACKEND_URL=http://backend:4000
+      - MAPBOX_TOKEN="pk.eyJ1IjoiaHVtYW4tY29ubmVjdGlvbiIsImEiOiJjajl0cnBubGoweTVlM3VwZ2lzNTNud3ZtIn0.KZ8KK9l70omjXbEkkbHGsQ"
 
 networks:
   hc-network:

From c12250874f83ecea3d7db488baa8bc88e1ba81e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 11 Jan 2019 17:33:05 +0100
Subject: [PATCH 39/46] Set protocol of github dependencies to https
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

I'm sitting in a café and its WiFi is blocking certain ports. I believe
this setting does not hurt and it fixes a connection issue in my current
situation.
---
 styleguide/package.json | 2 +-
 styleguide/yarn.lock    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/styleguide/package.json b/styleguide/package.json
index 57eea0c0c..66e4be840 100644
--- a/styleguide/package.json
+++ b/styleguide/package.json
@@ -57,7 +57,7 @@
     "vue-router": "^3.0.1",
     "vue-svg-loader": "^0.8.0",
     "vue-template-compiler": "^2.5.17",
-    "vuep": "git://github.com/visualjerk/vuep.git#fix-iframe-firefox",
+    "vuep": "git+https://github.com/visualjerk/vuep.git#fix-iframe-firefox",
     "webpack-bundle-analyzer": "^2.13.1",
     "webpack-merge-and-include-globally": "^2.0.11"
   },
diff --git a/styleguide/yarn.lock b/styleguide/yarn.lock
index fcd471314..1cb4cb1bd 100644
--- a/styleguide/yarn.lock
+++ b/styleguide/yarn.lock
@@ -10624,9 +10624,9 @@ vue@^2.4.2, vue@^2.5.17:
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.17.tgz#0f8789ad718be68ca1872629832ed533589c6ada"
   integrity sha512-mFbcWoDIJi0w0Za4emyLiW72Jae0yjANHbCVquMKijcavBGypqlF7zHRgMa5k4sesdv7hv2rB4JPdZfR+TPfhQ==
 
-"vuep@git://github.com/visualjerk/vuep.git#fix-iframe-firefox":
+"vuep@git+https://github.com/visualjerk/vuep.git#fix-iframe-firefox":
   version "0.8.1"
-  resolved "git://github.com/visualjerk/vuep.git#df765f9bce3d96f79ffc35e75ec2885539bf9baa"
+  resolved "git+https://github.com/visualjerk/vuep.git#df765f9bce3d96f79ffc35e75ec2885539bf9baa"
   dependencies:
     simple-assign "^0.1.0"
 

From a74a82ef2338baf28a3ea9503009a4fca007696f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 11 Jan 2019 17:42:05 +0100
Subject: [PATCH 40/46] Add missing JWT token to docker-compose.yml

How come that we didn't face this error earlier??
---
 docker-compose.yml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 8f20e3788..5a4c2ab5d 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -14,7 +14,8 @@ services:
     environment:
       - HOST=0.0.0.0
       - BACKEND_URL=http://backend:4000
-      - MAPBOX_TOKEN="pk.eyJ1IjoiaHVtYW4tY29ubmVjdGlvbiIsImEiOiJjajl0cnBubGoweTVlM3VwZ2lzNTNud3ZtIn0.KZ8KK9l70omjXbEkkbHGsQ"
+      - JWT_SECRET="b/&&7b78BF&fv/Vd"
+      - MAPBOX_TOKEN="pk.eyJ1IjoiaHVtYW4tY29ubmVjdGlvbiIsImEiOiJjajl0cnBubGoweTVlM3VwZ2lzNTNud3ZtIn0.bZ8KK9l70omjXbEkkbHGsQ"
 
 networks:
   hc-network:

From bde7282f09e8737ebbced77df80caad2f469257b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 11 Jan 2019 18:19:18 +0100
Subject: [PATCH 41/46] Try to substitute BACKEND_BRANCH env var properly

---
 .travis.yml | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 4361c917a..241fb2577 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -9,9 +9,11 @@ services:
   - docker
 
 env:
-  - DOCKER_COMPOSE_VERSION=1.23.2
+  - DOCKER_COMPOSE_VERSION=1.23.2 BACKEND_BRANCH=${TRAVIS_PULL_REQUEST_BRANCH:-${TRAVIS_BRANCH:-master}}
+
 
 before_install:
+  - echo $BACKEND_BRANCH
   - sudo rm /usr/local/bin/docker-compose
   - curl -L https://github.com/docker/compose/releases/download/${DOCKER_COMPOSE_VERSION}/docker-compose-`uname -s`-`uname -m` > docker-compose
   - chmod +x docker-compose
@@ -21,7 +23,7 @@ install:
   - docker build --build-arg BUILD_COMMIT=$TRAVIS_COMMIT --target production -t humanconnection/nitro-web .
   - docker-compose -f docker-compose.yml -f docker-compose.travis.yml up -d
   - git clone https://github.com/Human-Connection/Nitro-Backend.git ../Nitro-Backend
-  - git -C "../Nitro-Backend" checkout $TRAVIS_PULL_REQUEST_BRANCH || git -C "../Nitro-Backend" checkout $TRAVIS_BRANCH || echo "Branch \`$TRAVIS_PULL_REQUEST_BRANCH\` and \`$TRAVIS_BRANCH\` does not exist, falling back to \`master\`"
+  - git -C "../Nitro-Backend" checkout $BACKEND_BRANCH
   - docker-compose -f ../Nitro-Backend/docker-compose.yml -f ../Nitro-Backend/docker-compose.travis.yml up -d
   - yarn global add cypress wait-on
   - yarn add cypress-cucumber-preprocessor

From 096b3b7e9d96475a20263e9549abe70ea226dce2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 11 Jan 2019 18:46:35 +0100
Subject: [PATCH 42/46] Use multiline strings in the step definition

@appinteractive I'm having trouble to run cypress on my machine right
now. But I think this is the correct syntax.
---
 cypress/integration/04.AboutMeAndLocation.feature | 5 ++++-
 cypress/integration/common/settings.js            | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/cypress/integration/04.AboutMeAndLocation.feature b/cypress/integration/04.AboutMeAndLocation.feature
index 7a7c23712..71e9c882e 100644
--- a/cypress/integration/04.AboutMeAndLocation.feature
+++ b/cypress/integration/04.AboutMeAndLocation.feature
@@ -32,7 +32,10 @@ Feature: About me and and location
         | Germany                | Country |
 
   Scenario: Display a description on profile page
-    Given I have the following self-description: "Ich lebe fettlos, fleischlos, fischlos dahin, fühle mich aber ganz wohl dabei"
+    Given I have the following self-description:
+    """
+    Ich lebe fettlos, fleischlos, fischlos dahin, fühle mich aber ganz wohl dabei
+    """
     And my username is "Peter Lustig"
     When people visit my profile page
     Then they can see the text in the info box below my avatar
diff --git a/cypress/integration/common/settings.js b/cypress/integration/common/settings.js
index f4746a3cd..e58c3b21e 100644
--- a/cypress/integration/common/settings.js
+++ b/cypress/integration/common/settings.js
@@ -33,7 +33,7 @@ When('I save {string} as my location', location => {
   myLocation = location
 })
 
-When('I have the following self-description: {string}', text => {
+When('I have the following self-description:', text => {
   cy.get('textarea[id=bio]')
     .clear()
     .type(text)

From 08c947bacd4f1013e9069a933fe90835cc2cd92d Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Sat, 12 Jan 2019 14:48:03 +0100
Subject: [PATCH 43/46] Try to fix build by providing default env vars

---
 Dockerfile | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Dockerfile b/Dockerfile
index 8f7df318b..7a8c6583c 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -14,6 +14,7 @@ RUN apk --no-cache add git
 COPY . .
 
 FROM base as build-and-test
+RUN cp .env.template .env
 RUN yarn install --production=false --frozen-lockfile --non-interactive
 RUN cd styleguide && yarn install --production=false --frozen-lockfile --non-interactive \
     && cd .. \

From 9d4c1c6e1a4bb9f1bd1b63bfda6df0146699f90f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Tue, 15 Jan 2019 01:35:09 +0100
Subject: [PATCH 44/46] CMD and EXPOSE is valid for all docker stages

FYI: @mattwr18 and @ksinkar
I wanted to test cypress with the Travis configuration. I had
to add `command: ...` to the `docker-compose.travis.yml` which I find
quite annoying. So I put CMD and EXPOSE at the top of the Dockerfile,
thus making it a default for all stages including build-and-test.
---
 Dockerfile | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 7a8c6583c..abbf2917b 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,6 +1,9 @@
 FROM node:10-alpine as base
 LABEL Description="Web Frontend of the Social Network Human-Connection.org" Vendor="Human-Connection gGmbH" Version="0.0.1" Maintainer="Human-Connection gGmbH (developer@human-connection.org)"
 
+EXPOSE 3000
+CMD ["yarn", "run", "start"]
+
 # Expose the app port
 ARG BUILD_COMMIT
 ENV BUILD_COMMIT=$BUILD_COMMIT
@@ -25,6 +28,3 @@ FROM base as production
 ENV NODE_ENV=production
 COPY --from=build-and-test ./nitro-web/node_modules ./node_modules
 COPY --from=build-and-test ./nitro-web/.nuxt ./.nuxt
-
-EXPOSE 3000
-CMD ["yarn", "run", "start"]

From a3a229c36f91805862088d44b85f3562ef21c2df Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 15 Jan 2019 11:08:37 +0100
Subject: [PATCH 45/46] Fixed location test with region on english locale by
 using Saxony-Anhalt instead

---
 cypress/integration/04.AboutMeAndLocation.feature | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/cypress/integration/04.AboutMeAndLocation.feature b/cypress/integration/04.AboutMeAndLocation.feature
index 71e9c882e..83e7046f5 100644
--- a/cypress/integration/04.AboutMeAndLocation.feature
+++ b/cypress/integration/04.AboutMeAndLocation.feature
@@ -26,10 +26,10 @@ Feature: About me and and location
     Then they can see the location in the info box below my avatar
 
     Examples: Location
-        | location               | type    |
-        | Paris                  | City    |
-        | Mecklenburg-Vorpommern | Region  |
-        | Germany                | Country |
+        | location      | type    |
+        | Paris         | City    |
+        | Saxony-Anhalt | Region  |
+        | Germany       | Country |
 
   Scenario: Display a description on profile page
     Given I have the following self-description:

From 54b690bcc73c46f2ba7e66a351e627165019e89b Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 15 Jan 2019 11:09:01 +0100
Subject: [PATCH 46/46] Fixed username test on settings page by waiting for the
 form to be saved

---
 cypress/integration/common/settings.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/cypress/integration/common/settings.js b/cypress/integration/common/settings.js
index e58c3b21e..048f37b7a 100644
--- a/cypress/integration/common/settings.js
+++ b/cypress/integration/common/settings.js
@@ -16,7 +16,9 @@ const setUserName = name => {
   cy.get('input[id=name]')
     .clear()
     .type(name)
-  cy.contains('Save').click()
+  cy.contains('Save')
+    .click()
+    .wait(200)
   myName = name
 }