From 2efc77097fcf44f034ccec99545634b3fd6ad2fb Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Wed, 17 Apr 2019 14:49:03 +0200
Subject: [PATCH] match specification of Dennis - minimum 3 characters for
 username, no hint for user to change the username to "Anonymous", Toast error
 if userdata cannot be changed due to username restrictions, display
 "Anonymous" if no username is found in database (even tho this is against
 implemented rules)

---
 backend/src/middleware/userMiddleware.js |  5 ++
 webapp/components/User/index.vue         | 87 ++++++++----------------
 webapp/locales/de.json                   |  5 +-
 webapp/locales/en.json                   |  5 +-
 webapp/pages/settings/index.vue          | 44 +++++-------
 5 files changed, 58 insertions(+), 88 deletions(-)

diff --git a/backend/src/middleware/userMiddleware.js b/backend/src/middleware/userMiddleware.js
index b3fc1bf2c..4789b4cbd 100644
--- a/backend/src/middleware/userMiddleware.js
+++ b/backend/src/middleware/userMiddleware.js
@@ -1,4 +1,5 @@
 import dotenv from 'dotenv'
+import { UserInputError } from 'apollo-server'
 
 import createOrUpdateLocations from './nodes/locations'
 
@@ -12,6 +13,10 @@ export default {
       return result
     },
     UpdateUser: async (resolve, root, args, context, info) => {
+      const USERNAME_MIN_LENGTH = 3 // TODO move to the correct place
+      if (!args.name || args.name.length < USERNAME_MIN_LENGTH) {
+        throw new UserInputError(`Username must be at least ${USERNAME_MIN_LENGTH} characters long!`)
+      }
       const result = await resolve(root, args, context, info)
       await createOrUpdateLocations(args.id, args.locationName, context.driver)
       return result
diff --git a/webapp/components/User/index.vue b/webapp/components/User/index.vue
index 6b0731981..2a3904763 100644
--- a/webapp/components/User/index.vue
+++ b/webapp/components/User/index.vue
@@ -3,65 +3,35 @@
     <div
       style="display: inline-block; float: left; margin-right: 4px;  height: 100%; vertical-align: middle;"
     >
-      <ds-avatar
-        style="display: inline-block; vertical-align: middle;"
-        size="32px"
-      />
+      <ds-avatar style="display: inline-block; vertical-align: middle;" size="32px"/>
     </div>
     <div style="display: inline-block; height: 100%; vertical-align: middle;">
-      <b
-        class="username"
-        style="vertical-align: middle;"
-      >Anonymus</b>
+      <b class="username" style="vertical-align: middle;">{{ $t('profile.userAnonym') }}</b>
     </div>
   </div>
-  <dropdown
-    v-else
-    :class="{'disabled-content': user.disabled}"
-    placement="top-start"
-    offset="0"
-  >
-    <template
-      slot="default"
-      slot-scope="{openMenu, closeMenu, isOpen}"
-    >
-      <nuxt-link
-        :to="userLink"
-        :class="['user', isOpen && 'active']"
-      >
-        <div
-          @mouseover="openMenu(true)"
-          @mouseleave="closeMenu(true)"
-        >
+  <dropdown v-else :class="{'disabled-content': user.disabled}" placement="top-start" offset="0">
+    <template slot="default" slot-scope="{openMenu, closeMenu, isOpen}">
+      <nuxt-link :to="userLink" :class="['user', isOpen && 'active']">
+        <div @mouseover="openMenu(true)" @mouseleave="closeMenu(true)">
           <div
             style="display: inline-block; float: left; margin-right: 4px;  height: 100%; vertical-align: middle;"
           >
             <ds-avatar
               :image="user.avatar"
-              :name="user.name"
+              :name="userName()"
               style="display: inline-block; vertical-align: middle;"
               size="32px"
             />
           </div>
           <div style="display: inline-block; height: 100%; vertical-align: middle;">
-            <b
-              class="username"
-              style="vertical-align: middle;"
-            >{{ user.name | truncate(trunc, 18) }}</b>
+            <b class="username" style="vertical-align: middle;">{{ userName(18) }}</b>
           </div>
           <!-- Time -->
-          <div
-            v-if="dateTime"
-            style="display: inline;"
-          >
-            <ds-text
-              align="right"
-              size="small"
-              color="soft"
-            >
-              <ds-icon name="clock" />
+          <div v-if="dateTime" style="display: inline;">
+            <ds-text align="right" size="small" color="soft">
+              <ds-icon name="clock"/>
               <no-ssr>
-                <hc-relative-date-time :date-time="dateTime" />
+                <hc-relative-date-time :date-time="dateTime"/>
               </no-ssr>
             </ds-text>
           </div>
@@ -70,10 +40,7 @@
     </template>
     <template slot="popover">
       <div style="min-width: 250px">
-        <hc-badges
-          v-if="user.badges && user.badges.length"
-          :badges="user.badges"
-        />
+        <hc-badges v-if="user.badges && user.badges.length" :badges="user.badges"/>
         <ds-text
           v-if="user.location"
           align="center"
@@ -82,17 +49,13 @@
           style="margin-top: 5px"
           bold
         >
-          <ds-icon name="map-marker" />
+          <ds-icon name="map-marker"/>
           {{ user.location.name }}
         </ds-text>
         <ds-flex style="margin-top: -10px">
           <ds-flex-item class="ds-tab-nav-item">
             <ds-space margin="small">
-              <ds-number
-                :count="fanCount"
-                :label="$t('profile.followers')"
-                size="x-large"
-              />
+              <ds-number :count="fanCount" :label="$t('profile.followers')" size="x-large"/>
             </ds-space>
           </ds-flex-item>
           <ds-flex-item class="ds-tab-nav-item ds-tab-nav-item-active">
@@ -112,11 +75,7 @@
             </ds-space>
           </ds-flex-item>
         </ds-flex>
-        <ds-flex
-          v-if="!itsMe"
-          gutter="x-small"
-          style="margin-bottom: 0;"
-        >
+        <ds-flex v-if="!itsMe" gutter="x-small" style="margin-bottom: 0;">
           <ds-flex-item :width="{base: 3}">
             <hc-follow-button
               :follow-id="user.id"
@@ -127,7 +86,7 @@
           </ds-flex-item>
           <ds-flex-item :width="{base: 1}">
             <ds-button fullwidth>
-              <ds-icon name="user-times" />
+              <ds-icon name="user-times"/>
             </ds-button>
           </ds-flex-item>
         </ds-flex>
@@ -174,6 +133,18 @@ export default {
       if (!(id && slug)) return ''
       return { name: 'profile-id-slug', params: { slug, id } }
     }
+  },
+  methods: {
+    // TODO method this is a duplicate from /pages/profile/_id/_slug.vue
+    // where to put this?
+    userName(maxLength) {
+      // Return Anonymous if no Username is given
+      if (!this.user.name) {
+        return this.$t('profile.userAnonym')
+      }
+      // Return full Username or truncated Username
+      return maxLength ? this.user.name.substring(0, maxLength) : this.user.name
+    }
   }
 }
 </script>
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 030f88abf..6e81014a9 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -29,9 +29,10 @@
     "data": {
       "name": "Deine Daten",
       "labelName": "Dein Name",
-      "namePlaceholder": "Anonymus",
+      "namePlaceholder": "Petra Lustig",
       "labelCity": "Deine Stadt oder Region",
-      "labelBio": "Über dich"
+      "labelBio": "Über dich",
+      "success": "Deine Daten wurden erfolgreich aktualisiert!"
     },
     "security": {
       "name": "Sicherheit",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index dc44bd2ba..0c7c4df83 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -29,9 +29,10 @@
     "data": {
       "name": "Your data",
       "labelName": "Your Name",
-      "namePlaceholder": "Anonymous",
+      "namePlaceholder": "Femanon Funny",
       "labelCity": "Your City or Region",
-      "labelBio": "About You"
+      "labelBio": "About You",
+      "success": "Your data was successfully updated!"
     },
     "security": {
       "name": "Security",
diff --git a/webapp/pages/settings/index.vue b/webapp/pages/settings/index.vue
index 3acaf9c4c..b73e830d0 100644
--- a/webapp/pages/settings/index.vue
+++ b/webapp/pages/settings/index.vue
@@ -1,8 +1,5 @@
 <template>
-  <ds-form
-    v-model="form"
-    @submit="submit"
-  >
+  <ds-form v-model="form" @submit="submit">
     <ds-card :header="$t('settings.data.name')">
       <ds-input
         id="name"
@@ -19,7 +16,7 @@
         :options="cities"
         :label="$t('settings.data.labelCity')"
         :placeholder="$t('settings.data.labelCity')"
-        :loading="loading"
+        :loading="loadingGeo"
         @input.native="handleCityInput"
       />
       <!-- eslint-enable vue/use-v-on-exact -->
@@ -36,11 +33,9 @@
           style="float: right;"
           icon="check"
           type="submit"
-          :loading="sending"
+          :loading="loadingData"
           primary
-        >
-          {{ $t('actions.save') }}
-        </ds-button>
+        >{{ $t('actions.save') }}</ds-button>
       </template>
     </ds-card>
   </ds-form>
@@ -88,8 +83,8 @@ export default {
     return {
       axiosSource: null,
       cities: [],
-      sending: false,
-      loading: false,
+      loadingData: false,
+      loadingGeo: false,
       formData: {}
     }
   },
@@ -111,13 +106,13 @@ export default {
     ...mapMutations({
       setCurrentUser: 'auth/SET_USER'
     }),
-    submit() {
-      this.sending = true
+    async submit() {
+      this.loadingData = true
       const { name, about } = this.formData
       let { locationName } = this.formData
       locationName = locationName && (locationName['label'] || locationName)
-      this.$apollo
-        .mutate({
+      try {
+        const { data } = await this.$apollo.mutate({
           mutation,
           variables: {
             id: this.currentUser.id,
@@ -135,15 +130,12 @@ export default {
             })
           }
         })
-        .then(data => {
-          this.$toast.success('Updated user')
-        })
-        .catch(err => {
-          this.$toast.error(err.message)
-        })
-        .finally(() => {
-          this.sending = false
-        })
+        this.$toast.success(this.$t('settings.data.success'))
+      } catch (err) {
+        this.$toast.error(err.message)
+      } finally {
+        this.loadingData = false
+      }
     },
     handleCityInput(value) {
       clearTimeout(timeout)
@@ -181,7 +173,7 @@ export default {
         return
       }
 
-      this.loading = true
+      this.loadingGeo = true
       this.axiosSource = CancelToken.source()
 
       const place = encodeURIComponent(value)
@@ -198,7 +190,7 @@ export default {
           this.cities = this.processCityResults(res)
         })
         .finally(() => {
-          this.loading = false
+          this.loadingGeo = false
         })
     }
   }