Fix #1650

webapp/graphql/User.js

@@ -134,3 +134,11 @@ export const unfollowUserMutation = i18n => {
     }
   `
 }
+
+export const checkSlugAvailableQuery = gql`
+  query($slug: String!) {
+    User(slug: $slug) {
+      slug
+    }
+  }
+`

webapp/locales/de.json

@@ -151,11 +151,17 @@
     "data": {
       "name": "Deine Daten",
       "labelName": "Dein Name",
+      "labelSlug": "Dein eindeutiger Benutzername",
       "namePlaceholder": "Petra Lustig",
       "labelCity": "Deine Stadt oder Region",
       "labelBio": "Über dich",
       "success": "Deine Daten wurden erfolgreich aktualisiert!"
     },
+    "validation": {
+      "slug": {
+        "alreadyTaken": "Dieser Benutzername ist schon vergeben."
+      }
+    },
     "security": {
       "name": "Sicherheit",
       "change-password": {

webapp/locales/en.json

@@ -152,11 +152,17 @@
     "data": {
       "name": "Your data",
       "labelName": "Your Name",
+      "labelSlug": "Your unique user name",
       "namePlaceholder": "Femanon Funny",
       "labelCity": "Your City or Region",
       "labelBio": "About You",
       "success": "Your data was successfully updated!"
     },
+    "validation": {
+      "slug": {
+        "alreadyTaken": "This user name is already taken."
+      }
+    },
     "security": {
       "name": "Security",
       "change-password": {

webapp/pages/settings/index.vue

@@ -8,6 +8,16 @@
         :label="$t('settings.data.labelName')"
         :placeholder="$t('settings.data.namePlaceholder')"
       />
+      <ds-input
+        id="slug"
+        model="slug"
+        icon="at"
+        :label="$t('settings.data.labelSlug')"
+        @input.native="validateSlug"
+      />
+      <ds-text v-if="!slugAvailable" color="danger">
+        {{ $t('settings.validation.slug.alreadyTaken') }}
+      </ds-text>
       <!-- eslint-disable vue/use-v-on-exact -->
       <ds-select
         id="city"
@@ -29,7 +39,14 @@
         :placeholder="$t('settings.data.labelBio')"
       />
       <template slot="footer">
-        <ds-button style="float: right;" icon="check" type="submit" :loading="loadingData" primary>
+        <ds-button
+          style="float: right;"
+          icon="check"
+          :disabled="!slugAvailable"
+          type="submit"
+          :loading="loadingData"
+          primary
+        >
           {{ $t('actions.save') }}
         </ds-button>
       </template>
@@ -42,6 +59,8 @@ import gql from 'graphql-tag'
 
 import { mapGetters, mapMutations } from 'vuex'
 import { CancelToken } from 'axios'
+import { checkSlugAvailableQuery } from '~/graphql/User.js'
+import { debounce } from 'lodash'
 
 let timeout
 const mapboxToken = process.env.MAPBOX_TOKEN
@@ -60,9 +79,10 @@ const query = gql`
 */
 
 const mutation = gql`
-  mutation($id: ID!, $name: String, $locationName: String, $about: String) {
-    UpdateUser(id: $id, name: $name, locationName: $locationName, about: $about) {
+  mutation($id: ID!, $slug: String, $name: String, $locationName: String, $about: String) {
+    UpdateUser(id: $id, slug: $slug, name: $name, locationName: $locationName, about: $about) {
       id
+      slug
       name
       locationName
       about
@@ -78,6 +98,7 @@ export default {
       loadingData: false,
       loadingGeo: false,
       formData: {},
+      slugAvailable: true,
     }
   },
   computed: {
@@ -86,21 +107,30 @@ export default {
     }),
     form: {
       get: function() {
-        const { name, locationName, about } = this.currentUser
-        return { name, locationName, about }
+        const { name, slug, locationName, about } = this.currentUser
+        return { name, slug, locationName, about }
       },
       set: function(formData) {
         this.formData = formData
       },
     },
   },
+  created() {
+    this.validateSlug = debounce(async () => {
+      const variables = { slug: this.formData.slug }
+      const {
+        data: { User },
+      } = await this.$apollo.query({ query: checkSlugAvailableQuery, variables })
+      this.slugAvailable = User && !User[0]
+    }, 500)
+  },
   methods: {
     ...mapMutations({
       setCurrentUser: 'auth/SET_USER',
     }),
     async submit() {
       this.loadingData = true
-      const { name, about } = this.formData
+      const { name, slug, about } = this.formData
       let { locationName } = this.formData || this.currentUser
       locationName = locationName && (locationName['label'] || locationName)
       try {
@@ -109,14 +139,16 @@ export default {
           variables: {
             id: this.currentUser.id,
             name,
+            slug,
             locationName,
             about,
           },
           update: (store, { data: { UpdateUser } }) => {
-            const { name, locationName, about } = UpdateUser
+            const { name, slug, locationName, about } = UpdateUser
             this.setCurrentUser({
               ...this.currentUser,
               name,
+              slug,
               locationName,
               about,
             })