refactor: restructure translations and components

webapp/components/EnterNonce/EnterNonce.spec.js

@@ -1,12 +1,12 @@
 import { mount, createLocalVue } from '@vue/test-utils'
-import VerifyNonce from './VerifyNonce.vue'
+import EnterNonce from './EnterNonce.vue'
 import Styleguide from '@human-connection/styleguide'
 
 const localVue = createLocalVue()
 
 localVue.use(Styleguide)
 
-describe('VerifyNonce ', () => {
+describe('EnterNonce ', () => {
   let wrapper
   let Wrapper
   let mocks
@@ -25,28 +25,28 @@ describe('VerifyNonce ', () => {
     beforeEach(jest.useFakeTimers)
 
     Wrapper = () => {
-      return mount(VerifyNonce, {
+      return mount(EnterNonce, {
         mocks,
         localVue,
         propsData,
       })
     }
 
-    it('renders a verify nonce form', () => {
+    it('renders an enter nonce form', () => {
       wrapper = Wrapper()
-      expect(wrapper.find('.verify-nonce').exists()).toBe(true)
+      expect(wrapper.find('form').exists()).toBe(true)
     })
 
-    describe('after verification nonce given', () => {
+    describe('after nonce entered', () => {
       beforeEach(() => {
         wrapper = Wrapper()
         wrapper.find('input#nonce').setValue('123456')
         wrapper.find('form').trigger('submit')
       })
 
-      it('emits `verification`', () => {
+      it('emits `nonceEntered`', () => {
         const expected = [[{ nonce: '123456', email: 'mail@example.org' }]]
-        expect(wrapper.emitted('verification')).toEqual(expected)
+        expect(wrapper.emitted('nonceEntered')).toEqual(expected)
       })
     })
   })

webapp/components/EnterNonce/EnterNonce.vue

@@ -0,0 +1,65 @@
+<template>
+  <ds-space margin="large">
+    <ds-form
+      v-model="formData"
+      :schema="formSchema"
+      @submit="handleSubmitVerify"
+      @input="handleInput"
+      @input-valid="handleInputValid"
+    >
+      <ds-input
+        :placeholder="$t('components.enter-nonce.form.nonce')"
+        model="nonce"
+        name="nonce"
+        id="nonce"
+        icon="question-circle"
+      />
+      <ds-space margin-botton="large">
+        <ds-text>
+          {{ $t('components.enter-nonce.form.description') }}
+        </ds-text>
+      </ds-space>
+      <ds-button :disabled="disabled" primary fullwidth name="submit" type="submit">
+        {{ $t('components.enter-nonce.form.next') }}
+      </ds-button>
+    </ds-form>
+  </ds-space>
+</template>
+
+<script>
+export default {
+  props: {
+    email: { type: String, required: true },
+  },
+  data() {
+    return {
+      formData: {
+        nonce: '',
+      },
+      formSchema: {
+        nonce: {
+          type: 'string',
+          min: 6,
+          max: 6,
+          required: true,
+          message: this.$t('components.enter-nonce.form.validations.length'),
+        },
+      },
+      disabled: true,
+    }
+  },
+  methods: {
+    async handleInput() {
+      this.disabled = true
+    },
+    async handleInputValid() {
+      this.disabled = false
+    },
+    handleSubmitVerify() {
+      const { nonce } = this.formData
+      const email = this.email
+      this.$emit('nonceEntered', { email, nonce })
+    },
+  },
+}
+</script>

webapp/components/PasswordReset/ChangePassword.spec.js

@@ -39,7 +39,7 @@ describe('ChangePassword ', () => {
       })
     }
 
-    describe('given email and verification nonce', () => {
+    describe('given email and nonce', () => {
       beforeEach(() => {
         propsData.email = 'mail@example.org'
         propsData.nonce = '123456'
@@ -66,7 +66,7 @@ describe('ChangePassword ', () => {
 
         describe('password reset successful', () => {
           it('displays success message', () => {
-            const expected = 'verify-nonce.form.change-password.success'
+            const expected = 'components.password-reset.change-password.success'
             expect(mocks.$t).toHaveBeenCalledWith(expected)
           })
 

webapp/components/PasswordReset/ChangePassword.vue

@@ -1,54 +1,58 @@
 <template>
-  <ds-card class="verify-nonce">
+  <ds-space margin-top="base" margin-bottom="xxx-small">
-    <ds-space margin="large">
+    <ds-form
-      <ds-form
+      v-if="!changePasswordResult"
-        v-if="!changePasswordResult"
+      v-model="formData"
-        v-model="formData"
+      :schema="formSchema"
-        :schema="formSchema"
+      @submit="handleSubmitPassword"
-        @submit="handleSubmitPassword"
+      class="change-password"
-        class="change-password"
+    >
-      >
+      <template slot-scope="{ errors }">
-        <template slot-scope="{ errors }">
+        <ds-input
-          <ds-input
+          id="password"
-            id="password"
+          model="password"
-            model="password"
+          type="password"
-            type="password"
+          autocomplete="off"
-            autocomplete="off"
+          :label="$t('settings.security.change-password.label-new-password')"
-            :label="$t('settings.security.change-password.label-new-password')"
+        />
-          />
+        <ds-input
-          <ds-input
+          id="passwordConfirmation"
-            id="passwordConfirmation"
+          model="passwordConfirmation"
-            model="passwordConfirmation"
+          type="password"
-            type="password"
+          autocomplete="off"
-            autocomplete="off"
+          :label="$t('settings.security.change-password.label-new-password-confirm')"
-            :label="$t('settings.security.change-password.label-new-password-confirm')"
+        />
-          />
+        <password-strength :password="formData.password" />
-          <password-strength :password="formData.password" />
+        <ds-space margin-top="base" margin-bottom="xxx-small">
-          <ds-space margin-top="base">
+          <ds-button :loading="$apollo.loading" :disabled="errors" primary>
-            <ds-button :loading="$apollo.loading" :disabled="errors" primary>
+            {{ $t('settings.security.change-password.button') }}
-              {{ $t('settings.security.change-password.button') }}
+          </ds-button>
-            </ds-button>
+        </ds-space>
-          </ds-space>
+      </template>
-        </template>
+    </ds-form>
-      </ds-form>
+    <ds-text v-else>
-      <ds-text v-else>
+      <template v-if="changePasswordResult === 'success'">
-        <template v-if="changePasswordResult === 'success'">
+        <sweetalert-icon icon="success" />
-          <sweetalert-icon icon="success" />
+        <ds-text>
-          <ds-text>
+          {{ $t('components.password-reset.change-password.success') }}
-            {{ $t(`verify-nonce.form.change-password.success`) }}
+        </ds-text>
-          </ds-text>
+      </template>
-        </template>
+      <template v-else>
-        <template v-else>
+        <sweetalert-icon icon="error" />
-          <sweetalert-icon icon="error" />
+        <ds-text>
-          <ds-text align="left">
+          <p>
-            {{ $t(`verify-nonce.form.change-password.error`) }}
+            {{ $t(`components.password-reset.change-password.error`) }}
-            {{ $t('verify-nonce.form.change-password.help') }}
+          </p>
-          </ds-text>
+          <p>
-          <a href="mailto:support@human-connection.org">support@human-connection.org</a>
+            {{ $t('components.password-reset.change-password.help') }}
-        </template>
+            <br />
-      </ds-text>
+            <a href="mailto:support@human-connection.org">support@human-connection.org</a>
-    </ds-space>
+          </p>
-  </ds-card>
+        </ds-text>
+      </template>
+      <slot></slot>
+    </ds-text>
+  </ds-space>
 </template>
 
 <script>

webapp/components/PasswordReset/Request.spec.js

@@ -18,7 +18,7 @@ describe('Request', () => {
         success: jest.fn(),
         error: jest.fn(),
       },
-      $t: jest.fn(),
+      $t: jest.fn(t => t),
       $apollo: {
         loading: false,
         mutate: jest.fn().mockResolvedValue({ data: { reqestPasswordReset: true } }),
@@ -45,7 +45,7 @@ describe('Request', () => {
 
     it('renders a password reset form', () => {
       wrapper = Wrapper()
-      expect(wrapper.find('.password-reset').exists()).toBe(true)
+      expect(wrapper.find('form').exists()).toBe(true)
     })
 
     describe('submit', () => {
@@ -69,7 +69,10 @@ describe('Request', () => {
       })
 
       it('displays a message that a password email was requested', () => {
-        const expected = ['password-reset.form.submitted', { email: 'mail@example.org' }]
+        const expected = [
+          'components.password-reset.request.form.submitted',
+          { email: 'mail@example.org' },
+        ]
         expect(mocks.$t).toHaveBeenCalledWith(...expected)
       })
 

webapp/components/PasswordReset/Request.vue

@@ -1,76 +1,55 @@
 <template>
-  <ds-card class="password-reset">
+  <ds-form
-    <ds-flex gutter="small">
+    v-if="!submitted"
-      <ds-flex-item :width="{ base: '100%', sm: '50%' }" centered>
+    @input="handleInput"
-        <client-only>
+    @input-valid="handleInputValid"
-          <locale-switch offset="5" />
+    v-model="formData"
-        </client-only>
+    :schema="formSchema"
-        <ds-space margin-top="small" margin-bottom="xxx-small" centered>
+    @submit="handleSubmit"
-          <img class="login-image" alt="Human Connection" src="/img/sign-up/humanconnection.svg" />
+  >
-        </ds-space>
+    <ds-space margin="small">
-      </ds-flex-item>
+      <ds-input
-      <ds-flex-item :width="{ base: '100%', sm: '50%' }" centered>
+        :placeholder="$t('login.email')"
-        <ds-form
+        type="email"
-          v-if="!submitted"
+        id="email"
-          @input="handleInput"
+        model="email"
-          @input-valid="handleInputValid"
+        name="email"
-          v-model="formData"
+        icon="envelope"
-          :schema="formSchema"
+      />
-          @submit="handleSubmit"
+    </ds-space>
-        >
+    <ds-space margin-botton="large">
-          <ds-space margin="small">
+      <ds-text align="left">{{ $t('components.password-reset.request.form.description') }}</ds-text>
-            <ds-input
+    </ds-space>
-              :placeholder="$t('login.email')"
+    <ds-button
-              type="email"
+      :disabled="disabled"
-              id="email"
+      :loading="$apollo.loading"
-              model="email"
+      primary
-              name="email"
+      fullwidth
-              icon="envelope"
+      name="submit"
-            />
+      type="submit"
-          </ds-space>
+      icon="envelope"
-          <ds-space margin-botton="large">
+    >
-            <ds-text align="left">{{ $t('password-reset.form.description') }}</ds-text>
+      {{ $t('components.password-reset.request.form.submit') }}
-          </ds-space>
+    </ds-button>
-          <ds-button
+    <slot></slot>
-            :disabled="disabled"
+  </ds-form>
-            :loading="$apollo.loading"
+  <div v-else>
-            primary
+    <transition name="ds-transition-fade">
-            fullwidth
+      <ds-flex centered>
-            name="submit"
+        <sweetalert-icon icon="info" />
-            type="submit"
+      </ds-flex>
-            icon="envelope"
+    </transition>
-          >
+    <ds-text v-html="submitMessage" align="left" />
-            {{ $t('password-reset.form.submit') }}
+  </div>
-          </ds-button>
-        </ds-form>
-        <div v-else>
-          <transition name="ds-transition-fade">
-            <ds-flex centered>
-              <sweetalert-icon icon="info" />
-            </ds-flex>
-          </transition>
-          <ds-text v-html="submitMessage" align="left" />
-        </div>
-        <ds-space margin-bottom="small" />
-        <div>
-          <nuxt-link to="/login">{{ $t('site.login') }}</nuxt-link>
-        </div>
-      </ds-flex-item>
-    </ds-flex>
-
-    <ds-space margin="x-small"></ds-space>
-  </ds-card>
 </template>
 
 <script>
 import gql from 'graphql-tag'
 import { SweetalertIcon } from 'vue-sweetalert-icons'
-import LocaleSwitch from '../LocaleSwitch/LocaleSwitch'
 
 export default {
   components: {
     SweetalertIcon,
-    LocaleSwitch,
   },
   data() {
     return {
@@ -91,7 +70,7 @@ export default {
   computed: {
     submitMessage() {
       const { email } = this.formData
-      return this.$t('password-reset.form.submitted', { email })
+      return this.$t('components.password-reset.request.form.submitted', { email })
     },
   },
   methods: {
@@ -128,7 +107,4 @@ export default {
   width: 90%;
   max-width: 200px;
 }
-.password-reset {
-  position: relative;
-}
 </style>

webapp/components/PasswordReset/VerifyNonce.vue

@@ -1,67 +0,0 @@
-<template>
-  <ds-card class="verify-nonce">
-    <ds-space margin="large">
-      <ds-form
-        v-model="formData"
-        :schema="formSchema"
-        @submit="handleSubmitVerify"
-        @input="handleInput"
-        @input-valid="handleInputValid"
-      >
-        <ds-input
-          :placeholder="$t('verify-nonce.form.nonce')"
-          model="nonce"
-          name="nonce"
-          id="nonce"
-          icon="question-circle"
-        />
-        <ds-space margin-botton="large">
-          <ds-text>
-            {{ $t('verify-nonce.form.description') }}
-          </ds-text>
-        </ds-space>
-        <ds-button :disabled="disabled" primary fullwidth name="submit" type="submit">
-          {{ $t('verify-nonce.form.next') }}
-        </ds-button>
-      </ds-form>
-    </ds-space>
-  </ds-card>
-</template>
-
-<script>
-export default {
-  props: {
-    email: { type: String, required: true },
-  },
-  data() {
-    return {
-      formData: {
-        nonce: '',
-      },
-      formSchema: {
-        nonce: {
-          type: 'string',
-          min: 6,
-          max: 6,
-          required: true,
-          message: this.$t('common.validations.verification-nonce'),
-        },
-      },
-      disabled: true,
-    }
-  },
-  methods: {
-    async handleInput() {
-      this.disabled = true
-    },
-    async handleInputValid() {
-      this.disabled = false
-    },
-    handleSubmitVerify() {
-      const { nonce } = this.formData
-      const email = this.email
-      this.$emit('verification', { email, nonce })
-    },
-  },
-}
-</script>

webapp/components/Registration/Signup.spec.js

@@ -42,7 +42,7 @@ describe('Signup', () => {
     describe('without invitation code', () => {
       it('renders signup form', () => {
         wrapper = Wrapper()
-        expect(wrapper.find('.signup').exists()).toBe(true)
+        expect(wrapper.find('form').exists()).toBe(true)
       })
 
       describe('submit', () => {

webapp/components/Registration/Signup.vue

@@ -8,7 +8,9 @@
       :schema="formSchema"
       @submit="handleSubmit"
     >
-      <h1>{{ invitation ? $t('profile.invites.title') : $t('registration.signup.title') }}</h1>
+      <h1>
+        {{ invitation ? $t('profile.invites.title') : $t('components.registration.signup.title') }}
+      </h1>
       <ds-space v-if="token" margin-botton="large">
         <ds-text v-html="$t('registration.signup.form.invitation-code', { code: token })" />
       </ds-space>
@@ -17,7 +19,7 @@
           {{
             invitation
               ? $t('profile.invites.description')
-              : $t('registration.signup.form.description')
+              : $t('components.registration.signup.form.description')
           }}
         </ds-text>
       </ds-space>
@@ -38,7 +40,7 @@
         type="submit"
         icon="envelope"
       >
-        {{ $t('registration.signup.form.submit') }}
+        {{ $t('components.registration.signup.form.submit') }}
       </ds-button>
     </ds-form>
     <div v-else>

webapp/locales/de.json

@@ -1,4 +1,49 @@
 {
+  "components": {
+    "password-reset": {
+      "request": {
+        "form": {
+          "description": "Eine Mail zum Zurücksetzen des Passworts wird an die angegebene E-Mail Adresse geschickt.",
+          "submit": "Email anfordern",
+          "submitted": "Eine E-Mail mit weiteren Instruktionen wurde verschickt an <b>{email}</b>"
+        }
+      },
+      "change-password": {
+        "success": "Änderung des Passworts war erfolgreich!",
+        "error": "Passwort Änderung fehlgeschlagen. Möglicherweise falscher Sicherheitscode?",
+        "help": "Falls Probleme auftreten, schreib uns gerne eine Mail an:"
+      }
+    },
+    "enter-nonce": {
+      "form": {
+        "nonce": "Code eingeben",
+        "description": "Öffne dein E-Mail Postfach und gib den Code ein, den wir geschickt haben.",
+        "next": "Weiter",
+        "validations": {
+          "length": "muss genau 6 Buchstaben lang sein"
+        }
+      }
+    },
+    "registration": {
+      "signup": {
+        "title": "Mach mit bei Human Connection!",
+        "form": {
+          "description": "Um loszulegen, gib deine E-Mail Adresse ein:",
+          "invitation-code": "Dein Einladungscode lautet: <b>{code}</b>",
+          "errors": {
+            "email-exists": "Es gibt schon ein Benutzerkonto mit dieser E-Mail Adresse!",
+            "invalid-invitation-token": "Es sieht so aus, als ob der Einladungscode schon eingelöst wurde. Jeder Code kann nur einmalig benutzt werden."
+          },
+          "submit": "Konto erstellen",
+          "success": "Eine Mail mit einem Bestätigungslink für die Registrierung wurde an <b>{email}</b> geschickt"
+        }
+      },
+      "create-user-account": {
+        "title": "Benutzerkonto anlegen",
+        "success": "Dein Benutzerkonto wurde erstellt!"
+      }
+    }
+  },
   "maintenance": {
     "title": "Human Connection befindet sich in der Wartung",
     "explanation": "Zurzeit führen wir einige geplante Wartungsarbeiten durch, bitte versuch es später erneut.",
@@ -42,7 +87,7 @@
     "bank": "Bankverbindung",
     "germany": "Deutschland",
     "code-of-conduct": "Verhaltenscodex",
-    "login": "Zurück zum Anmeldung"
+    "back-to-login": "Zurück zur Anmeldung"
   },
   "sorting": {
     "newest": "Neueste",
@@ -63,45 +108,6 @@
     "hello": "Hallo",
     "success": "Du bist eingeloggt!"
   },
-  "password-reset": {
-    "form": {
-      "description": "Eine Mail zum Zurücksetzen des Passworts wird an die angegebene E-Mail Adresse geschickt.",
-      "submit": "Email anfordern",
-      "submitted": "Eine E-Mail mit weiteren Instruktionen wurde verschickt an <b>{email}</b>"
-    }
-  },
-  "registration": {
-    "signup": {
-      "title": "Mach mit bei Human Connection!",
-      "form": {
-        "description": "Um loszulegen, gib deine E-Mail Adresse ein:",
-        "invitation-code": "Dein Einladungscode lautet: <b>{code}</b>",
-        "errors": {
-          "email-exists": "Es gibt schon ein Benutzerkonto mit dieser E-Mail Adresse!",
-          "invalid-invitation-token": "Es sieht so aus, als ob der Einladungscode schon eingelöst wurde. Jeder Code kann nur einmalig benutzt werden."
-        },
-        "submit": "Konto erstellen",
-        "success": "Eine Mail mit einem Bestätigungslink für die Registrierung wurde an <b>{email}</b> geschickt"
-      },
-      "back-to-login": "Zurück zur Anmeldung"
-    },
-    "create-user-account": {
-      "title": "Benutzerkonto anlegen",
-      "success": "Dein Benutzerkonto wurde erstellt!"
-    }
-  },
-  "verify-nonce": {
-    "form": {
-      "nonce": "Code eingeben",
-      "description": "Öffne dein E-Mail Postfach und gib den Code ein, den wir geschickt haben.",
-      "next": "Weiter",
-      "change-password": {
-        "success": "Änderung des Passworts war erfolgreich!",
-        "error": "Passwort Änderung fehlgeschlagen. Möglicherweise falscher Sicherheitscode?",
-        "help": "Falls Probleme auftreten, schreib uns gerne eine Mail an:"
-      }
-    }
-  },
   "editor": {
     "placeholder": "Schreib etwas Inspirierendes …",
     "mention": {
@@ -400,8 +406,7 @@
     "reportContent": "Melden",
     "validations": {
       "email": "muss eine gültige E-Mail Adresse sein",
-      "url": "muss eine gültige URL sein",
+      "url": "muss eine gültige URL sein"
-      "verification-nonce": "muss genau 6 Buchstaben lang sein"
     }
   },
   "actions": {

webapp/locales/en.json

@@ -1,4 +1,50 @@
 {
+  "components": {
+    "password-reset": {
+      "request": {
+        "title": "Reset your password",
+        "form": {
+          "description": "A password reset email will be sent to the given email address.",
+          "submit": "Request email",
+          "submitted": "An email with further instructions has been sent to <b>{email}</b>"
+        }
+      },
+      "change-password": {
+        "success": "Changing your password was successful!",
+        "error": "Changing your password failed. Maybe the security code was not correct?",
+        "help": "In case of problems, feel free to ask for help by sending us a mail to:"
+      }
+    },
+    "enter-nonce": {
+      "form": {
+        "nonce": "Enter your code",
+        "description": "Open your inbox and enter the code that we've sent to you.",
+        "next": "Continue",
+        "validations": {
+          "length": "must be 6 characters long"
+        }
+      }
+    },
+    "registration": {
+      "signup": {
+        "title": "Join Human Connection!",
+        "form": {
+          "description": "To get started, enter your email address:",
+          "invitation-code": "Your invitation code is: <b>{code}</b>",
+          "errors": {
+            "email-exists": "There is already a user account with this email address!",
+            "invalid-invitation-token": "It looks like as if the invitation has been used already. Invitation links can only be used once."
+          },
+          "submit": "Create an account",
+          "success": "A mail with a link to complete your registration has been sent to <b>{email}</b>"
+        }
+      },
+      "create-user-account": {
+        "title": "Create user account",
+        "success": "Your account has been created!"
+      }
+    }
+  },
   "maintenance": {
     "title": "Human Connection is under maintenance",
     "explanation": "At the moment we are doing some scheduled maintenance, please try again later.",
@@ -42,7 +88,7 @@
     "bank": "bank account",
     "germany": "Germany",
     "code-of-conduct": "Code of Conduct",
-    "login": "Back to login"
+    "back-to-login": "Back to login page"
   },
   "sorting": {
     "newest": "Newest",
@@ -63,46 +109,6 @@
     "hello": "Hello",
     "success": "You are logged in!"
   },
-  "password-reset": {
-    "title": "Reset your password",
-    "form": {
-      "description": "A password reset email will be sent to the given email address.",
-      "submit": "Request email",
-      "submitted": "An email with further instructions has been sent to <b>{email}</b>"
-    }
-  },
-  "registration": {
-    "signup": {
-      "title": "Join Human Connection!",
-      "form": {
-        "description": "To get started, enter your email address:",
-        "invitation-code": "Your invitation code is: <b>{code}</b>",
-        "errors": {
-          "email-exists": "There is already a user account with this email address!",
-          "invalid-invitation-token": "It looks like as if the invitation has been used already. Invitation links can only be used once."
-        },
-        "submit": "Create an account",
-        "success": "A mail with a link to complete your registration has been sent to <b>{email}</b>"
-      },
-      "back-to-login": "Back to login page"
-    },
-    "create-user-account": {
-      "title": "Create user account",
-      "success": "Your account has been created!"
-    }
-  },
-  "verify-nonce": {
-    "form": {
-      "nonce": "Enter your code",
-      "description": "Open your inbox and enter the code that we've sent to you.",
-      "next": "Continue",
-      "change-password": {
-        "success": "Changing your password was successful!",
-        "error": "Changing your password failed. Maybe the security code was not correct?",
-        "help": "In case of problems, feel free to ask for help by sending us a mail to:"
-      }
-    }
-  },
   "editor": {
     "placeholder": "Leave your inspirational thoughts …",
     "mention": {
@@ -401,8 +407,7 @@
     "reportContent": "Report",
     "validations": {
       "email": "must be a valid email address",
-      "url": "must be a valid URL",
+      "url": "must be a valid URL"
-      "verification-nonce": "must be 6 characters long"
     }
   },
   "actions": {

webapp/locales/pl.json

@@ -1,4 +1,31 @@
 {
+  "components": {
+    "password-reset": {
+      "request": {
+        "title": "Zresetuj hasło",
+        "form": {
+          "description": "Na podany adres e-mail zostanie wysłany email z resetem hasła.",
+          "submit": "Poproś o wiadomość e-mail",
+          "submitted": "Na adres <b>{email}</b> została wysłana wiadomość z dalszymi instrukcjami."
+        }
+      },
+      "change-password": {
+        "success": "Zmiana hasła zakończyła się sukcesem!",
+        "error": "Zmiana hasła nie powiodła się. Może kod bezpieczeństwa nie był poprawny?",
+        "help": "W przypadku problemów, zachęcamy do zwrócenia się o pomoc, wysyłając do nas wiadomość e-mail:"
+      }
+    },
+    "enter-nonce": {
+      "form": {
+        "nonce": "Wprowadź swój kod",
+        "description": "Otwórz swoją skrzynkę odbiorczą i wpisz kod, który do Ciebie wysłaliśmy.",
+        "next": "Kontynuuj",
+        "validations": {
+          "length": "musi mieć długość 6 znaków."
+        }
+      }
+    }
+  },
   "filter-menu": {
     "title": "Twoja bańka filtrująca"
   },
@@ -29,26 +56,6 @@
     "moreInfoHint": "idź po więcej szczegółów",
     "hello": "Cześć"
   },
-  "password-reset": {
-    "title": "Zresetuj hasło",
-    "form": {
-      "description": "Na podany adres e-mail zostanie wysłany email z resetem hasła.",
-      "submit": "Poproś o wiadomość e-mail",
-      "submitted": "Na adres <b>{email}</b> została wysłana wiadomość z dalszymi instrukcjami."
-    }
-  },
-  "verify-nonce": {
-    "form": {
-      "nonce": "Wprowadź swój kod",
-      "description": "Otwórz swoją skrzynkę odbiorczą i wpisz kod, który do Ciebie wysłaliśmy.",
-      "next": "Kontynuuj",
-      "change-password": {
-        "success": "Zmiana hasła zakończyła się sukcesem!",
-        "error": "Zmiana hasła nie powiodła się. Może kod bezpieczeństwa nie był poprawny?",
-        "help": "W przypadku problemów, zachęcamy do zwrócenia się o pomoc, wysyłając do nas wiadomość e-mail:"
-      }
-    }
-  },
   "editor": {
     "placeholder": "Napisz coś inspirującego..."
   },
@@ -236,8 +243,7 @@
     "loading": "załadunek",
     "reportContent": "Sprawozdanie",
     "validations": {
-      "email": "musi być ważny adres e-mail.",
+      "email": "musi być ważny adres e-mail."
-      "verification-nonce": "musi mieć długość 6 znaków."
     }
   },
   "actions": {

webapp/nuxt.config.js

@@ -36,7 +36,7 @@ export default {
       'login',
       'logout',
       'password-reset-request',
-      'password-reset-verify-nonce',
+      'password-reset-enter-nonce',
       'password-reset-change-password',
       'registration-signup',
       'registration-enter-nonce',

webapp/pages/password-reset.vue

@@ -1,17 +1,22 @@
 <template>
-  <ds-container width="medium">
+  <ds-container width="small">
-    <ds-flex>
+    <ds-card>
-      <ds-flex-item :width="{ base: '100%' }" centered>
+      <client-only>
-        <ds-space style="text-align: center;" margin-top="small" margin-bottom="xxx-small" centered>
+        <locale-switch offset="5" />
-          <nuxt-child />
+      </client-only>
-        </ds-space>
+      <nuxt-child />
-      </ds-flex-item>
+      <ds-space margin="x-small"></ds-space>
-    </ds-flex>
+    </ds-card>
   </ds-container>
 </template>
 
 <script>
+import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
+
 export default {
+  components: {
+    LocaleSwitch,
+  },
   layout: 'no-header',
   asyncData({ store, redirect }) {
     if (store.getters['auth/isLoggedIn']) {
@@ -20,3 +25,10 @@ export default {
   },
 }
 </script>
+<style lang="scss" scoped>
+img {
+  padding-left: 50px;
+  padding-right: 50px;
+  max-width: 200px;
+}
+</style>

webapp/pages/password-reset/change-password.vue

@@ -3,7 +3,11 @@
     :email="email"
     :nonce="nonce"
     @passwordResetResponse="handlePasswordResetResponse"
-  />
+  >
+    <ds-space centered>
+      <nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
+    </ds-space>
+  </change-password>
 </template>
 
 <script>

webapp/pages/password-reset/enter-nonce.vue

@@ -1,20 +1,20 @@
 <template>
-  <verify-nonce :email="email" @verification="handleVerification" />
+  <enter-nonce :email="email" @nonceEntered="nonceEntered" />
 </template>
 
 <script>
-import VerifyNonce from '~/components/PasswordReset/VerifyNonce'
+import EnterNonce from '~/components/EnterNonce/EnterNonce.vue'
 
 export default {
   components: {
-    VerifyNonce,
+    EnterNonce,
   },
   data() {
     const { email = '' } = this.$route.query
     return { email }
   },
   methods: {
-    handleVerification({ email, nonce }) {
+    nonceEntered({ email, nonce }) {
       this.$router.push({ path: 'change-password', query: { email, nonce } })
     },
   },

webapp/pages/password-reset/request.vue

@@ -1,5 +1,9 @@
 <template>
-  <request @handleSubmitted="handlePasswordResetRequested" />
+  <request @handleSubmitted="handlePasswordResetRequested">
+    <ds-space margin-bottom="xxx-small" margin-top="large" centered>
+      <nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
+    </ds-space>
+  </request>
 </template>
 
 <script>
@@ -11,7 +15,7 @@ export default {
   },
   methods: {
     handlePasswordResetRequested({ email }) {
-      this.$router.push({ path: 'verify-nonce', query: { email } })
+      this.$router.push({ path: 'enter-nonce', query: { email } })
     },
   },
 }

webapp/pages/registration/signup.vue

@@ -12,7 +12,7 @@
         </ds-flex-item>
         <ds-flex-item :width="{ base: '100%', sm: '50%' }" centered>
           <signup :invitation="false" />
-          <nuxt-link to="/login">{{ $t('registration.signup.back-to-login') }}</nuxt-link>
+          <nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
         </ds-flex-item>
       </ds-flex>
     </ds-card>