Tidy up, follow @roschaefer, @Tirokk PR suggestions

- Fix tests by stubbing LocaleSwitch/client-only
- Add portuguese translations
- Add back to login link
- Use span over &nbsp following @alina-becks PR review on another PR

webapp/components/PageFooter/PageFooter.vue

@@ -1,20 +1,20 @@
 <template>
   <div id="footer" class="ds-footer">
     <a href="https://human-connection.org" target="_blank" v-html="$t('site.made')"></a>
-    &nbsp;-&nbsp;
+    <span>-</span>
     <nuxt-link to="/imprint">{{ $t('site.imprint') }}</nuxt-link>
-    &nbsp;‑&nbsp;
+    <span>-</span>
     <nuxt-link to="/terms-and-conditions">{{ $t('site.termsAndConditions') }}</nuxt-link>
-    &nbsp;‑&nbsp;
+    <span>-</span>
     <nuxt-link to="/code-of-conduct">{{ $t('site.code-of-conduct') }}</nuxt-link>
-    &nbsp;‑&nbsp;
+    <span>-</span>
     <nuxt-link to="/data-privacy">{{ $t('site.data-privacy') }}</nuxt-link>
-    &nbsp;‑&nbsp;
+    <span>-</span>
     <nuxt-link to="/changelog">{{ $t('site.changelog') }}</nuxt-link>
   </div>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .ds-footer {
   text-align: center;
   position: fixed;
@@ -25,4 +25,7 @@
   padding: 10px 10px;
   box-shadow: 0px -6px 12px -4px rgba(0, 0, 0, 0.1);
 }
+span {
+  margin-right: 0.2rem;
+}
 </style>

webapp/components/PasswordReset/Request.spec.js

@@ -6,11 +6,11 @@ const localVue = createLocalVue()
 
 localVue.use(Styleguide)
 config.stubs['sweetalert-icon'] = '<span><slot /></span>'
+config.stubs['client-only'] = '<span><slot /></span>'
+config.stubs['nuxt-link'] = '<span><slot /></span>'
 
 describe('Request', () => {
-  let wrapper
+  let wrapper, Wrapper, mocks, stubs
-  let Wrapper
-  let mocks
 
   beforeEach(() => {
     mocks = {
@@ -23,6 +23,12 @@ describe('Request', () => {
         loading: false,
         mutate: jest.fn().mockResolvedValue({ data: { reqestPasswordReset: true } }),
       },
+      $i18n: {
+        locale: () => 'en',
+      },
+    }
+    stubs = {
+      LocaleSwitch: "<div class='stub'></div>",
     }
   })
 
@@ -33,6 +39,7 @@ describe('Request', () => {
       return mount(Request, {
         mocks,
         localVue,
+        stubs,
       })
     }
 

webapp/components/PasswordReset/Request.vue

@@ -30,9 +30,7 @@
             icon="envelope"
           />
           <ds-space margin-botton="large">
-            <ds-text>
+            <ds-text>{{ $t('password-reset.form.description') }}</ds-text>
-              {{ $t('password-reset.form.description') }}
-            </ds-text>
           </ds-space>
           <ds-button
             :disabled="disabled"
@@ -54,6 +52,10 @@
           </transition>
           <ds-text v-html="submitMessage" />
         </div>
+        <ds-space margin-bottom="small" />
+        <div>
+          <nuxt-link to="/login">{{ $t('site.login') }}</nuxt-link>
+        </div>
       </ds-flex-item>
     </ds-flex>
 

webapp/components/Registration/CreateUserAccount.spec.js

@@ -7,12 +7,10 @@ const localVue = createLocalVue()
 
 localVue.use(Styleguide)
 config.stubs['sweetalert-icon'] = '<span><slot /></span>'
+config.stubs['client-only'] = '<span><slot /></span>'
 
 describe('CreateUserAccount', () => {
-  let wrapper
+  let wrapper, Wrapper, mocks, propsData, stubs
-  let Wrapper
-  let mocks
-  let propsData
 
   beforeEach(() => {
     mocks = {
@@ -27,6 +25,9 @@ describe('CreateUserAccount', () => {
       },
     }
     propsData = {}
+    stubs = {
+      LocaleSwitch: "<div class='stub'></div>",
+    }
   })
 
   describe('mount', () => {
@@ -35,6 +36,7 @@ describe('CreateUserAccount', () => {
         mocks,
         propsData,
         localVue,
+        stubs,
       })
     }
 

webapp/components/Registration/CreateUserAccount.vue

@@ -3,11 +3,9 @@
     <ds-card v-if="success" class="success">
       <ds-space>
         <sweetalert-icon icon="success" />
-        <ds-text
+        <ds-text align="center" bold color="success">
-          align="center"
+          {{ $t('registration.create-user-account.success') }}
-          bold
+        </ds-text>
-          color="success"
-        >{{ $t('registration.create-user-account.success') }}</ds-text>
       </ds-space>
     </ds-card>
     <ds-form
@@ -60,7 +58,10 @@
               v-model="termsAndConditionsConfirmed"
               :checked="termsAndConditionsConfirmed"
             />
-            <label for="checkbox" v-html="$t('termsAndConditions.termsAndConditionsConfirmed')"></label>
+            <label
+              for="checkbox"
+              v-html="$t('termsAndConditions.termsAndConditionsConfirmed')"
+            ></label>
           </ds-text>
 
           <template slot="footer">
@@ -74,7 +75,9 @@
               :loading="$apollo.loading"
               :disabled="errors || !termsAndConditionsConfirmed"
               primary
-            >{{ $t('actions.save') }}</ds-button>
+            >
+              {{ $t('actions.save') }}
+            </ds-button>
           </template>
         </ds-card>
       </template>

webapp/layouts/default.vue

@@ -88,11 +88,9 @@
                           {{ $t('login.hello') }}
                           <b>{{ userName }}</b>
                           <template v-if="user.role !== 'user'">
-                            <ds-text
+                            <ds-text color="softer" size="small" style="margin-bottom: 0">
-                              color="softer"
+                              {{ user.role | camelCase }}
-                              size="small"
+                            </ds-text>
-                              style="margin-bottom: 0"
-                            >{{ user.role | camelCase }}</ds-text>
                           </template>
                           <hr />
                           <ds-menu :routes="routes" :matcher="matcher">

webapp/locales/de.json

@@ -36,7 +36,8 @@
     "responsible": "Verantwortlicher gemäß § 55 Abs. 2 RStV ",
     "bank": "Bankverbindung",
     "germany": "Deutschland",
-    "code-of-conduct": "Verhaltenscodex"
+    "code-of-conduct": "Verhaltenscodex",
+    "login": "Zurück zum Anmeldung"
   },
   "sorting": {
     "newest": "Neuste",
@@ -56,7 +57,6 @@
     "success": "Du bist eingeloggt!"
   },
   "password-reset": {
-    "title": "Passwort zurücksetzen",
     "form": {
       "description": "Eine Mail zum Zurücksetzen des Passworts wird an die angegebene E-Mail Adresse geschickt.",
       "submit": "Email anfordern",
@@ -614,4 +614,4 @@
     "have-fun": "Jetzt aber viel Spaß mit der Alpha von Human Connection! Für den ersten Weltfrieden. ♥︎",
     "closing": "Herzlichst <br><br> Euer Human Connection Team"
   }
-}
+}

webapp/locales/en.json

@@ -36,14 +36,15 @@
     "responsible": "responsible for contents of this page (§ 55 Abs. 2 RStV)",
     "bank": "bank account",
     "germany": "Germany",
-    "code-of-conduct": "Code of Conduct"
+    "code-of-conduct": "Code of Conduct",
+    "login": "Back to login"
   },
   "sorting": {
     "newest": "Newest",
     "oldest": "Oldest"
   },
   "login": {
-    "copy": "If you already have a human-connection account, login here.",
+    "copy": "If you already have a human-connection account, please login.",
     "login": "Login",
     "logout": "Logout",
     "email": "Your Email",
@@ -60,7 +61,7 @@
     "form": {
       "description": "A password reset email will be sent to the given email address.",
       "submit": "Request email",
-      "submitted": "A mail with further instruction has been sent to <b>{email}</b>"
+      "submitted": "An email with further instructions has been sent to <b>{email}</b>"
     }
   },
   "registration": {
@@ -614,4 +615,4 @@
     "have-fun": "Now have fun with the alpha version of Human Connection! For the first universal peace. ♥︎",
     "closing": "Thank you very much <br> <br> your Human Connection Team"
   }
-}
+}

webapp/locales/pt.json

@@ -1,28 +1,37 @@
 {
   "site": {
-    "made": "Com ❤ feito",
+    "made": "Feito com ❤",
     "imprint": "Impressão",
-    "termsAc": "termos e condições",
+    "termsAc": "Termos e Condições",
-    "data-privacy": "protecção de dados",
+    "data-privacy": "Proteção de Dados",
     "changelog": "Mudanças e Histórico",
     "contact": "Contato",
-    "tribunal": "tribunal",
     "tribunal": "tribunal de registo",
     "register": "número de registo",
     "director": "Diretor Administrativo",
     "taxident": "Número de identificação do imposto sobre o valor acrescentado de acordo com o § 27 da Lei do Imposto sobre o Valor Acrescentado (Alemanha)",
     "responsible": "Responsável segundo § 55 Abs. 2 RStV (Alemanha) ",
     "bank": "conta bancária",
-    "germany": "Alemanha"
+    "germany": "Alemanha",
+    "code-of-conduct": "Codigo de Conduto",
+    "login": "Voltar para o Login"
   },
   "login": {
-    "copy": "Se você já tem uma conta no Human Connection, entre aqui.",
+    "copy": "Se você já tem uma conta no Human Connection, por favor faça o login.",
     "login": "Entrar",
     "logout": "Sair",
     "email": "Seu email",
     "password": "Sua senha",
     "moreInfo": "O que é o Human Connection?",
-    "hello": "Olá"
+    "hello": "Olá",
+    "forgotPassword": "Esqueceu a sua senha?"
+  },
+  "password-reset": {
+    "form": {
+      "description": "Um e-mail de redefinição de senha será enviado para o endereço de e-mail fornecido.",
+      "submit": "Solicitar email",
+      "submitted": "Um e-mail com mais instruções foi enviado para <b>{email}</b>"
+    }
   },
   "profile": {
     "name": "Meu perfil",
@@ -203,4 +212,4 @@
   "shoutButton": {
     "shouted": "Aclamou"
   }
-}
+}

webapp/pages/login.vue

@@ -53,13 +53,17 @@
                 name="submit"
                 type="submit"
                 icon="sign-in"
-              >{{ $t('login.login') }}</ds-button>
+              >
+                {{ $t('login.login') }}
+              </ds-button>
               <ds-space margin="x-small">
                 <a
                   :href="$t('login.moreInfoURL')"
                   :title="$t('login.moreInfoHint')"
                   target="_blank"
-                >{{ $t('login.moreInfo') }}</a>
+                >
+                  {{ $t('login.moreInfo') }}
+                </a>
               </ds-space>
             </form>
           </ds-flex-item>
@@ -72,7 +76,6 @@
 <script>
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import { VERSION } from '~/constants/terms-and-conditions-version.js'
-import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 
 export default {
   layout: 'no-header',