Merge pull request #3113 from gradido/3105-refactor-fFrontend-settings-page-style-optimisation

refactor(frontend):  refactor changes incorporated

frontend/src/components/Inputs/InputUsername.vue

@@ -9,7 +9,7 @@
       vid="username"
       v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"
     >
-      <b-form-group :label="$t('form.username')">
+      <b-form-group :label="$t('form.username')" :description="$t('settings.usernameInfo')">
         <b-input-group>
           <b-form-input
             v-model="currentValue"

frontend/src/components/UserSettings/UserName.vue

@@ -2,13 +2,17 @@
   <div id="username_form">
     <div v-if="$store.state.username">
       <label>{{ $t('form.username') }}</label>
-      <b-input-group class="mb-3" data-test="username-input-group">
+      <b-form-group
+        class="mb-3"
+        data-test="username-input-group"
+        :description="$t('settings.emailInfo')"
+      >
         <b-form-input
           v-model="username"
           readonly
           data-test="username-input-readonly"
         ></b-form-input>
-      </b-input-group>
+      </b-form-group>
     </div>
     <div v-else>
       <validation-observer ref="usernameObserver" v-slot="{ handleSubmit, invalid }">

frontend/src/locales/de.json

@@ -337,7 +337,8 @@
     "username": {
       "change-success": "Dein Nutzername wurde erfolgreich geändert.",
       "no-username": "Bitte gib einen Benutzernamen ein. Damit hilfst du anderen Benutzern dich zu finden, ohne deine E-Mail-Adresse preisgeben zu müssen."
-    }
+    },
+    "usernameInfo": "Kann nach dem speichern nicht mehr geändert werden!"
   },
   "signin": "Anmelden",
   "signup": "Registrieren",

frontend/src/locales/en.json

@@ -292,7 +292,7 @@
     "warningText": "Are you still there?"
   },
   "settings": {
-    "emailInfo": "NCannot be changed at this time.",
+    "emailInfo": "Cannot be changed at this time.",
     "hideAmountGDD": "Your GDD amount is hidden.",
     "hideAmountGDT": "Your GDT amount is hidden.",
     "info": "Transactions can now be made by username or email address.",
@@ -337,7 +337,8 @@
     "username": {
       "change-success": "Your username has been changed successfully.",
       "no-username": "Please enter a username. This will help other users find you without having to reveal your email address."
-    }
+    },
+    "usernameInfo": "Cannot be changed after saving!"
   },
   "signin": "Sign in",
   "signup": "Sign up",

frontend/src/pages/Settings.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="card bg-white gradido-border-radius appBoxShadow p-4 mt--3">
     <div class="h2">{{ $t('PersonalDetails') }}</div>
-    <div class="m-4 text-small">
+    <div class="my-4 text-small">
       {{ $t('settings.info') }}
     </div>
 
@@ -58,7 +58,7 @@
     </b-row>
 
     <hr />
-    <div class="h3 mt-5">{{ $t('form.password') }}</div>
+    <div class="mt-5">{{ $t('form.password') }}</div>
     <user-password />
     <hr />
     <b-row class="mb-5">