add explanation what username is for, when no username is given

frontend/src/components/UserSettings/UserName.vue

@@ -24,7 +24,12 @@
             </small>
           </b-col>
           <b-col v-if="showUserData" class="col-12">
-            {{ username }}
+            <span v-if="username">
+              {{ username }}
+            </span>
+            <div v-else class="alert">
+              {{ $t('settings.username.no-username') }}
+            </div>
           </b-col>
           <b-col v-else class="col-12">
             <b-input type="text" v-model="username"></b-input>
@@ -98,4 +103,7 @@ export default {
 .cursor-pointer {
   cursor: pointer;
 }
+div.alert {
+  color: red;
+}
 </style>

frontend/src/locales/de.json

@@ -323,7 +323,8 @@
     "showAmountGDT": "Dein GDT Betrag ist sichtbar.",
     "username": {
       "change-username": "Nutzername ändern",
-      "change-success": "Dein Nutzername wurde erfolgreich geändert."
+      "change-success": "Dein Nutzername wurde erfolgreich geändert.",
+      "no-username": "Bitte gebe einen Nutzernamen ein. Damit hilfst du anderen Benutzern dich zu finden, ohne ihnen deine Email geben zu müsen."
     }
   },
   "signin": "Anmelden",

frontend/src/locales/en.json

@@ -323,7 +323,8 @@
     "showAmountGDT": "Your GDT amount is visible.",
     "username": {
       "change-username": "Change username",
-      "change-success": "Your username has been successfully changed."
+      "change-success": "Your username has been successfully changed.",
+      "no-username": "Please enter a username. This helps other users to find you without giving them your email."
     }
   },
   "signin": "Sign in",