From b1c19d0c941b6e713ecc5fe7929a1da9327e15d2 Mon Sep 17 00:00:00 2001
From: sebastian2357 <80636200+sebastian2357@users.noreply.github.com>
Date: Wed, 11 Jun 2025 18:45:03 +0200
Subject: [PATCH] fix(webapp): optimize registration layout (#8630)

* - fixed nowrap for button
- restyled bullets for slider
- relocated back links
- removed icons

* - removed icon from RegistrationSlideEmail too

* - added media query for padding

* - fixed missing constants

* - fixed padding in no-header layout

* - fixed sticky footer in registration flow

* - removed icons from inputs

* - set fixed height for back link

* - fixed invite code placeholder

* - added auto submit to invite and email code forms
- fixed layout password inputs
- added layout to checkboxes (create)
- removed unnecessary texts
- moved backLink for password-reset
- tidied up create layout

* fixed margin

* - fixed nonceLength

* lint fixes

* corrected path

---------

Co-authored-by: Sebastian Stein <sebastian@codepassion.de>
Co-authored-by: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
---
 frontend/src/assets/sass/tokens.module.scss   |   1 +
 webapp/assets/_new/styles/tokens.scss         |   1 +
 .../ComponentSlider/ComponentSlider.vue       |   5 +-
 webapp/components/EnterNonce/EnterNonce.vue   |   6 +-
 webapp/components/PageFooter/PageFooter.vue   |  15 +-
 webapp/components/PasswordReset/Request.vue   |   2 +-
 .../Registration/EmailDisplayAndVerify.vue    |   1 -
 .../Registration/RegistrationSlideCreate.vue  | 196 +++++++++++-------
 .../Registration/RegistrationSlideEmail.vue   |  15 +-
 .../Registration/RegistrationSlideInvite.vue  |  23 +-
 .../Registration/RegistrationSlideNonce.vue   |  20 +-
 .../Registration/RegistrationSlider.vue       |  20 +-
 webapp/components/Registration/Signup.vue     |   2 -
 .../_new/generic/BaseButton/BaseButton.vue    |  43 +++-
 webapp/layouts/no-header.vue                  |  36 +++-
 webapp/locales/de.json                        |   3 +-
 webapp/locales/en.json                        |   3 +-
 webapp/locales/es.json                        |   3 +-
 webapp/locales/fr.json                        |   3 +-
 webapp/locales/it.json                        |   3 +-
 webapp/locales/nl.json                        |   3 +-
 webapp/locales/pl.json                        |   3 +-
 webapp/locales/pt.json                        |   3 +-
 webapp/locales/ru.json                        |   3 +-
 webapp/pages/password-reset.vue               |  10 +
 webapp/pages/password-reset/request.vue       |   6 +-
 26 files changed, 271 insertions(+), 158 deletions(-)

diff --git a/frontend/src/assets/sass/tokens.module.scss b/frontend/src/assets/sass/tokens.module.scss
index 3454ab690..a10e1a256 100644
--- a/frontend/src/assets/sass/tokens.module.scss
+++ b/frontend/src/assets/sass/tokens.module.scss
@@ -276,6 +276,7 @@ $size-avatar-large: 114px;
 $size-button-large: 50px;
 $size-button-base: 36px;
 $size-button-small: 26px;
+$size-button-tiny: 18px;
 
 /**
  * @tokens Size Images
diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss
index 42c01d3a8..2a25c54a4 100644
--- a/webapp/assets/_new/styles/tokens.scss
+++ b/webapp/assets/_new/styles/tokens.scss
@@ -274,6 +274,7 @@ $size-avatar-large: 114px;
  $size-button-large: 50px;
  $size-button-base: 36px;
  $size-button-small: 26px;
+ $size-button-tiny: 18px;
 
 /**
  * @tokens Size Images
diff --git a/webapp/components/ComponentSlider/ComponentSlider.vue b/webapp/components/ComponentSlider/ComponentSlider.vue
index 19e82417f..5a8cf55c2 100644
--- a/webapp/components/ComponentSlider/ComponentSlider.vue
+++ b/webapp/components/ComponentSlider/ComponentSlider.vue
@@ -38,8 +38,8 @@
           <base-button
             :class="['selection-dot']"
             style="float: left"
-            :circle="true"
-            size="small"
+            :bullet="true"
+            size="tiny"
             type="submit"
             filled
             :loading="false"
@@ -54,6 +54,7 @@
           :icon="sliderData.sliders[sliderIndex].button.icon"
           type="submit"
           filled
+          padding
           :loading="
             sliderData.sliders[sliderIndex].button.loading !== undefined
               ? sliderData.sliders[sliderIndex].button.loading
diff --git a/webapp/components/EnterNonce/EnterNonce.vue b/webapp/components/EnterNonce/EnterNonce.vue
index 6b9d5cb38..5cc1574b2 100644
--- a/webapp/components/EnterNonce/EnterNonce.vue
+++ b/webapp/components/EnterNonce/EnterNonce.vue
@@ -28,6 +28,8 @@
 </template>
 
 <script>
+import registrationConstants from '~/constants/registration'
+
 export default {
   props: {
     email: { type: String, required: true },
@@ -43,7 +45,9 @@ export default {
           min: 5,
           max: 5,
           required: true,
-          message: this.$t('components.registration.email-nonce.form.validations.length'),
+          message: this.$t('components.registration.email-nonce.form.validations.length', {
+            nonceLength: registrationConstants.NONCE_LENGTH,
+          }),
         },
       },
       disabled: true,
diff --git a/webapp/components/PageFooter/PageFooter.vue b/webapp/components/PageFooter/PageFooter.vue
index cd279766d..f17bf5fa5 100644
--- a/webapp/components/PageFooter/PageFooter.vue
+++ b/webapp/components/PageFooter/PageFooter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="footer" class="ds-footer">
+  <div id="footer" class="ds-footer" :class="{ 'is-sticky': isSticky }">
     <!-- links to internal or external pages -->
     <span v-for="pageParams in links.FOOTER_LINK_LIST" :key="pageParams.name">
       <page-params-link :pageParams="pageParams">
@@ -26,6 +26,12 @@ export default {
   components: {
     PageParamsLink,
   },
+  props: {
+    isSticky: {
+      type: Boolean,
+      default: true,
+    },
+  },
   data() {
     return { links, version: `v${this.$env.VERSION}` }
   },
@@ -35,13 +41,16 @@ export default {
 <style lang="scss" scoped>
 .ds-footer {
   text-align: center;
-  position: fixed;
-  bottom: 0px;
   z-index: 10;
   background-color: $color-footer-background;
   width: 100%;
   padding: 10px 10px;
   box-shadow: 0px -6px 12px -4px rgba(0, 0, 0, 0.1);
+
+  &.is-sticky {
+    position: fixed;
+    bottom: 0px;
+  }
 }
 .ds-footer a {
   color: $color-footer-link;
diff --git a/webapp/components/PasswordReset/Request.vue b/webapp/components/PasswordReset/Request.vue
index 79558a911..fed38119b 100644
--- a/webapp/components/PasswordReset/Request.vue
+++ b/webapp/components/PasswordReset/Request.vue
@@ -24,9 +24,9 @@
       :disabled="disabled"
       :loading="$apollo.loading"
       filled
+      padding
       name="submit"
       type="submit"
-      icon="envelope"
     >
       {{ $t('components.password-reset.request.form.submit') }}
     </base-button>
diff --git a/webapp/components/Registration/EmailDisplayAndVerify.vue b/webapp/components/Registration/EmailDisplayAndVerify.vue
index 5a9a5d030..c66d6a791 100644
--- a/webapp/components/Registration/EmailDisplayAndVerify.vue
+++ b/webapp/components/Registration/EmailDisplayAndVerify.vue
@@ -1,6 +1,5 @@
 <template>
   <ds-text>
-    {{ $t('components.registration.email-display.yourEmail') }}
     <b v-if="emailAsString.length > 0">
       {{ emailAsString }}
       <b v-if="!isEmailFormat" class="email-warning">
diff --git a/webapp/components/Registration/RegistrationSlideCreate.vue b/webapp/components/Registration/RegistrationSlideCreate.vue
index 10eb2cfaa..0a42d8a14 100644
--- a/webapp/components/Registration/RegistrationSlideCreate.vue
+++ b/webapp/components/Registration/RegistrationSlideCreate.vue
@@ -35,19 +35,19 @@
       <!-- leave this here in case the scoped variable is needed in the future nobody would remember this -->
       <!-- <template v-slot="{ errors }"> -->
       <template>
+        <email-display-and-verify :email="sliderData.collectedInputData.email" />
+
         <div v-if="askForRealName" class="full-name">
           <!-- <p>{{ $t('settings.data.realNamePlease') }}</p>-->
           <ds-input
             id="givenName"
             model="givenName"
-            icon="user"
             :label="$t('settings.data.givenName')"
             :placeholder="$t('settings.data.givenNamePlaceholder')"
           />
           <ds-input
             id="surName"
             model="surName"
-            icon="user"
             :label="$t('settings.data.surName')"
             :placeholder="$t('settings.data.surNamePlaceholder')"
           />
@@ -56,90 +56,99 @@
           v-else
           id="name"
           model="name"
-          icon="user"
           :label="$t('settings.data.labelName')"
           :placeholder="$t('settings.data.namePlaceholder')"
         />
-        <label for="password">
-          {{ $t('settings.security.change-password.label-new-password') }}
-        </label>
         <div class="password-wrapper">
           <ds-input
             id="password"
             model="password"
             :type="showPassword ? 'text' : 'password'"
+            :label="$t('settings.security.change-password.label-new-password')"
             autocomplete="off"
             class="password-field"
             ref="password"
           />
           <show-password
+            class="show-password-toggle with-label"
             @show-password="toggleShowPassword('password')"
             :iconName="iconNamePassword"
           />
         </div>
-        <label for="passwordConfirmation">
-          {{ $t('settings.security.change-password.label-new-password-confirm') }}
-        </label>
         <div class="password-wrapper">
           <ds-input
             id="passwordConfirmation"
             model="passwordConfirmation"
             :type="showPasswordConfirm ? 'text' : 'password'"
+            :label="$t('settings.security.change-password.label-new-password-confirm')"
             autocomplete="off"
             class="password-field"
             ref="confirmPassword"
           />
           <show-password
+            class="show-password-toggle with-label"
             @show-password="toggleShowPassword('confirmPassword')"
             :iconName="iconNamePasswordConfirm"
           />
         </div>
-        <password-strength class="password-strength" :password="formData.password" />
+        <password-strength
+          class="password-strength"
+          :password="formData.password"
+          style="margin: 30px 0 20px 0"
+        />
 
         <!-- location -->
         <location-select
           v-if="locationRequired"
-          class="location-select"
           v-model="locationName"
           :canBeCleared="false"
           :showPreviousLocation="false"
         />
 
-        <email-display-and-verify :email="sliderData.collectedInputData.email" />
-        <ds-text>
-          <input
-            id="checkbox0"
-            type="checkbox"
-            v-model="termsAndConditionsConfirmed"
-            :checked="termsAndConditionsConfirmed"
-          />
-          <label for="checkbox0">
-            {{ $t('components.registration.create-user-account.termsAndCondsEtcConfirmed') }}
-            <br />
-            <page-params-link :pageParams="links.TERMS_AND_CONDITIONS" forceTargetBlank>
-              {{ $t('site.termsAndConditions') }}
-            </page-params-link>
-            <br />
-            <page-params-link :pageParams="links.DATA_PRIVACY" forceTargetBlank>
-              {{ $t('site.data-privacy') }}
-            </page-params-link>
-          </label>
-        </ds-text>
-        <ds-text>
-          <input
-            id="checkbox1"
-            type="checkbox"
-            v-model="receiveCommunicationAsEmailsEtcConfirmed"
-            :checked="receiveCommunicationAsEmailsEtcConfirmed"
-          />
-          <label for="checkbox1">
-            {{
-              $t(
-                'components.registration.create-user-account.receiveCommunicationAsEmailsEtcConfirmed',
-              )
-            }}
-          </label>
-        </ds-text>
+        <div class="checkbox-group">
+          <div class="checkbox-item">
+            <input
+              id="checkbox0"
+              type="checkbox"
+              v-model="termsAndConditionsConfirmed"
+              :checked="termsAndConditionsConfirmed"
+              class="checkbox-input"
+            />
+            <label for="checkbox0" class="checkbox-label">
+              <span class="checkbox-text">
+                {{ $t('components.registration.create-user-account.termsAndCondsEtcConfirmed') }}
+              </span>
+              <div class="checkbox-links">
+                <page-params-link :pageParams="links.TERMS_AND_CONDITIONS" forceTargetBlank>
+                  {{ $t('site.termsAndConditions') }}
+                </page-params-link>
+                <span class="separator">•</span>
+                <page-params-link :pageParams="links.DATA_PRIVACY" forceTargetBlank>
+                  {{ $t('site.data-privacy') }}
+                </page-params-link>
+              </div>
+            </label>
+          </div>
+
+          <div class="checkbox-item">
+            <input
+              id="checkbox1"
+              type="checkbox"
+              v-model="receiveCommunicationAsEmailsEtcConfirmed"
+              :checked="receiveCommunicationAsEmailsEtcConfirmed"
+              class="checkbox-input"
+            />
+            <label for="checkbox1" class="checkbox-label">
+              <span class="checkbox-text">
+                {{
+                  $t(
+                    'components.registration.create-user-account.receiveCommunicationAsEmailsEtcConfirmed',
+                  )
+                }}
+              </span>
+            </label>
+          </div>
+        </div>
       </template>
       <ds-space margin="xxx-small" />
     </ds-form>
@@ -395,39 +404,19 @@ export default {
   display: flex;
   width: 100%;
   align-items: center;
-  padding: $input-padding-vertical $space-x-small;
-  padding-left: 0;
-  padding-right: 0;
+  padding: 0;
   height: $input-height;
-  margin-bottom: 10px;
-  margin-bottom: $space-small;
-
-  color: $text-color-base;
-  background: $background-color-disabled;
-
-  border: $input-border-size solid $border-color-softer;
-  border-left: none;
-  border-radius: $border-radius-base;
-  outline: none;
-  transition: all $duration-short $ease-out;
-
-  &:focus-within {
-    background-color: $background-color-base;
-    border: $input-border-size solid $border-color-active;
-
-    .toggle-icon {
-      color: $text-color-base;
-    }
-  }
+  margin-top: 40px;
+  margin-bottom: 16px;
 
   .password-field {
-    position: relative;
-    padding-top: $space-small;
-    border: none;
-    border-style: none;
-    appearance: none;
-    margin-left: 0;
     width: 100%;
+    padding: 0;
+  }
+
+  ::v-deep .ds-input-wrap {
+    bottom: 4px;
+    left: -1px;
   }
 }
 
@@ -435,7 +424,60 @@ export default {
   padding-bottom: $space-small;
 }
 
-.location-select {
-  padding-bottom: $space-base;
+.checkbox-group {
+  margin: 20px 0;
+}
+
+.checkbox-item {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 16px;
+  padding: 16px;
+  background-color: #f8f9fa; // Light gray background
+  border-radius: 8px;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: #f0f2f5; // Slightly darker on hover
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.checkbox-input {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  margin-right: 12px;
+  margin-top: 2px; // Align with first line of text
+  cursor: pointer;
+}
+
+.checkbox-label {
+  flex: 1;
+  cursor: pointer;
+  line-height: 1.5;
+  color: #374151; // Dark gray text
+}
+
+.checkbox-text {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+
+.checkbox-links {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  font-size: 0.875rem; // Slightly smaller text for links
+
+  .separator {
+    color: #9ca3af; // Light gray separator
+    font-size: 0.75rem;
+  }
 }
 </style>
diff --git a/webapp/components/Registration/RegistrationSlideEmail.vue b/webapp/components/Registration/RegistrationSlideEmail.vue
index f44811e01..4ad6c70fd 100644
--- a/webapp/components/Registration/RegistrationSlideEmail.vue
+++ b/webapp/components/Registration/RegistrationSlideEmail.vue
@@ -9,14 +9,7 @@
     <ds-text>
       {{ $t('components.registration.signup.form.description') }}
     </ds-text>
-    <ds-input
-      :placeholder="$t('login.email')"
-      type="email"
-      id="email"
-      model="email"
-      name="email"
-      icon="envelope"
-    />
+    <ds-input :placeholder="$t('login.email')" type="email" id="email" model="email" name="email" />
     <slot></slot>
     <ds-text v-if="sliderData.collectedInputData.emailSend">
       <input id="checkbox" type="checkbox" v-model="sendEmailAgain" :checked="sendEmailAgain" />
@@ -111,11 +104,7 @@ export default {
               ? 'components.registration.email.buttonTitle.resend'
               : 'components.registration.email.buttonTitle.skipResend'
             : 'components.registration.email.buttonTitle.send',
-          buttonIcon: this.sliderData.collectedInputData.emailSend
-            ? this.sendEmailAgain
-              ? 'envelope'
-              : 'arrow-right'
-            : 'envelope',
+          buttonIcon: null,
         },
       }
     },
diff --git a/webapp/components/Registration/RegistrationSlideInvite.vue b/webapp/components/Registration/RegistrationSlideInvite.vue
index b11c42db4..2fa64d4e3 100644
--- a/webapp/components/Registration/RegistrationSlideInvite.vue
+++ b/webapp/components/Registration/RegistrationSlideInvite.vue
@@ -7,11 +7,12 @@
     @input-valid="handleInputValid"
   >
     <ds-input
-      :placeholder="$t('components.registration.invite-code.form.invite-code')"
+      :placeholder="formSchema.inviteCode.placeholder"
+      :minlength="formSchema.inviteCode.minLength"
+      :maxlength="formSchema.inviteCode.maxLength"
       model="inviteCode"
       name="inviteCode"
       id="inviteCode"
-      icon="question-circle"
     />
     <ds-text v-if="!validInput">
       {{ $t('components.registration.invite-code.form.description') }}
@@ -43,7 +44,7 @@
 </template>
 
 <script>
-import registrationConstants from '~/constants/registration'
+import registrationConstants from '~/constants/registrationBranded.js'
 import { validateInviteCode } from '~/graphql/InviteCode'
 import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
 
@@ -69,6 +70,7 @@ export default {
           message: this.$t('components.registration.invite-code.form.validations.length', {
             inviteCodeLength: registrationConstants.INVITE_CODE_LENGTH,
           }),
+          placeholder: this.$t('components.registration.invite-code.form.invite-code'),
         },
       },
       dbRequestInProgress: false,
@@ -141,11 +143,16 @@ export default {
           const validationResult = response.data.validateInviteCode
 
           if (validationResult && validationResult.isValid) {
-            this.$toast.success(
-              this.$t('components.registration.invite-code.form.validations.success', {
-                inviteCode,
-              }),
-            )
+            // Auto-advance to next slide
+            const currentIndex = this.sliderData.sliderIndex
+            const nextIndex = currentIndex + 1
+
+            if (
+              this.sliderData.sliderSelectorCallback &&
+              nextIndex < this.sliderData.sliders.length
+            ) {
+              this.sliderData.sliderSelectorCallback(nextIndex)
+            }
             return true
           } else {
             this.$toast.error(
diff --git a/webapp/components/Registration/RegistrationSlideNonce.vue b/webapp/components/Registration/RegistrationSlideNonce.vue
index 0bc466e58..6219d52d9 100644
--- a/webapp/components/Registration/RegistrationSlideNonce.vue
+++ b/webapp/components/Registration/RegistrationSlideNonce.vue
@@ -13,14 +13,10 @@
       model="nonce"
       name="nonce"
       id="nonce"
-      icon="question-circle"
     />
     <ds-text>
       {{ $t('components.registration.email-nonce.form.description') }}
     </ds-text>
-    <ds-text>
-      {{ $t('components.registration.email-nonce.form.click-next') }}
-    </ds-text>
     <slot></slot>
     <ds-space margin="xxx-small" />
   </ds-form>
@@ -120,12 +116,16 @@ export default {
 
           if (this.sliderData.sliders[this.sliderIndex].data.response) {
             if (this.sliderData.sliders[this.sliderIndex].data.response.VerifyNonce) {
-              this.$toast.success(
-                this.$t('components.registration.email-nonce.form.validations.success', {
-                  email,
-                  nonce,
-                }),
-              )
+              // Auto-advance to next slide
+              const currentIndex = this.sliderData.sliderIndex
+              const nextIndex = currentIndex + 1
+
+              if (
+                this.sliderData.sliderSelectorCallback &&
+                nextIndex < this.sliderData.sliders.length
+              ) {
+                this.sliderData.sliderSelectorCallback(nextIndex)
+              }
             } else {
               this.$toast.error(
                 this.$t('components.registration.email-nonce.form.validations.error', {
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index 3a2d71db4..06747d583 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -1,5 +1,8 @@
 <template>
   <section class="registration-slider">
+    <div v-if="registrationType !== 'no-public-registration'" class="back-link" left>
+      <nuxt-link :to="loginLink">{{ $t('site.back-to-login') }}</nuxt-link>
+    </div>
     <base-card>
       <template #imageColumn>
         <page-params-link :pageParams="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)">
@@ -27,12 +30,6 @@
         <template #create-user-account>
           <registration-slide-create :sliderData="sliderData" />
         </template>
-
-        <template v-if="registrationType !== 'no-public-registration'" #footer>
-          <ds-space margin-bottom="xxx-small" margin-top="small" centered>
-            <nuxt-link :to="loginLink">{{ $t('site.back-to-login') }}</nuxt-link>
-          </ds-space>
-        </template>
       </component-slider>
 
       <template #topMenu>
@@ -94,7 +91,7 @@ export default {
         data: { request: null, response: { isValidInviteCode: false } },
         button: {
           titleIdent: 'components.registration.invite-code.buttonTitle',
-          icon: 'arrow-right',
+          icon: null,
           callback: this.buttonCallback,
           sliderCallback: null, // optional set by slot
         },
@@ -106,7 +103,7 @@ export default {
         data: { request: null, response: null },
         button: {
           titleIdent: 'components.registration.email.buttonTitle.send', // changed by slider component
-          icon: 'envelope', // changed by slider component
+          icon: null,
           callback: this.buttonCallback,
           sliderCallback: null, // optional set by slot
         },
@@ -118,7 +115,7 @@ export default {
         data: { request: null, response: { VerifyNonce: false } },
         button: {
           titleIdent: 'components.registration.email-nonce.buttonTitle',
-          icon: 'arrow-right',
+          icon: null,
           callback: this.buttonCallback,
           sliderCallback: null, // optional set by slot
         },
@@ -130,7 +127,7 @@ export default {
         data: { request: null, response: null },
         button: {
           titleIdent: 'components.registration.create-user-account.buttonTitle',
-          icon: 'check',
+          icon: null,
           loading: false,
           callback: this.buttonCallback,
           sliderCallback: null, // optional set by slot
@@ -266,4 +263,7 @@ export default {
   max-width: 620px;
   margin: auto;
 }
+.back-link {
+  height: 35px;
+}
 </style>
diff --git a/webapp/components/Registration/Signup.vue b/webapp/components/Registration/Signup.vue
index 156c43d4e..ff4b12fe5 100644
--- a/webapp/components/Registration/Signup.vue
+++ b/webapp/components/Registration/Signup.vue
@@ -29,7 +29,6 @@
         id="email"
         model="email"
         name="email"
-        icon="envelope"
       />
       <base-button
         :disabled="disabled"
@@ -37,7 +36,6 @@
         filled
         name="submit"
         type="submit"
-        icon="envelope"
       >
         {{ $t('components.registration.signup.form.submit') }}
       </base-button>
diff --git a/webapp/components/_new/generic/BaseButton/BaseButton.vue b/webapp/components/_new/generic/BaseButton/BaseButton.vue
index 7985e66c7..2c6fb91a3 100644
--- a/webapp/components/_new/generic/BaseButton/BaseButton.vue
+++ b/webapp/components/_new/generic/BaseButton/BaseButton.vue
@@ -19,6 +19,10 @@ export default {
     LoadingSpinner,
   },
   props: {
+    bullet: {
+      type: Boolean,
+      default: false,
+    },
     circle: {
       type: Boolean,
       default: false,
@@ -46,9 +50,13 @@ export default {
       type: String,
       default: 'regular',
       validator(value) {
-        return value.match(/(small|regular|large)/)
+        return value.match(/(tiny|small|regular|large)/)
       },
     },
+    padding: {
+      type: Boolean,
+      default: false,
+    },
     type: {
       type: String,
       default: 'button',
@@ -66,11 +74,14 @@ export default {
       let buttonClass = 'base-button'
 
       if (this.$slots.default === undefined) buttonClass += ' --icon-only'
+      if (this.bullet) buttonClass += ' --bullet'
       if (this.circle) buttonClass += ' --circle'
       if (this.danger) buttonClass += ' --danger'
       if (this.loading) buttonClass += ' --loading'
+      if (this.size === 'tiny') buttonClass += ' --tiny'
       if (this.size === 'small') buttonClass += ' --small'
       if (this.size === 'large') buttonClass += ' --large'
+      if (this.padding) buttonClass += ' --padding'
 
       if (this.filled) buttonClass += ' --filled'
       else if (this.ghost) buttonClass += ' --ghost'
@@ -98,6 +109,7 @@ export default {
   font-weight: $font-weight-bold;
   letter-spacing: $letter-spacing-large;
   cursor: pointer;
+  white-space: nowrap;
 
   &.--danger {
     @include buttonStates($color-scheme: danger);
@@ -117,14 +129,33 @@ export default {
     border-radius: 50%;
   }
 
+  &.--bullet {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    &[disabled] {
+      background-color: transparent;
+      border: 1px solid $color-neutral-80;
+    }
+  }
+
   &.--ghost {
     border: none;
   }
 
+  &.--tiny {
+    height: $size-button-tiny;
+    &.--bullet,
+    &.--circle {
+      width: $size-button-tiny;
+    }
+  }
+
   &.--small {
     height: $size-button-small;
     font-size: $font-size-small;
 
+    &.--bullet,
     &.--circle {
       width: $size-button-small;
     }
@@ -134,11 +165,21 @@ export default {
     height: $size-button-large;
     font-size: $font-size-large;
 
+    &.--bullet,
     &.--circle {
       width: $size-button-large;
     }
   }
 
+  &.--padding {
+    padding: 0 20px;
+  }
+  @media screen and (max-width: 400px) {
+    &.--padding {
+      padding: 0 15px;
+    }
+  }
+
   &:not(.--icon-only) > .base-icon {
     margin-right: $space-xx-small;
   }
diff --git a/webapp/layouts/no-header.vue b/webapp/layouts/no-header.vue
index 249275b3f..075b4c022 100644
--- a/webapp/layouts/no-header.vue
+++ b/webapp/layouts/no-header.vue
@@ -1,11 +1,13 @@
 <template>
   <div class="layout-blank">
-    <ds-container>
-      <div style="padding: 5rem 2rem">
-        <nuxt />
-      </div>
-    </ds-container>
-    <page-footer />
+    <div class="layout-content">
+      <ds-container>
+        <div>
+          <nuxt />
+        </div>
+      </ds-container>
+    </div>
+    <page-footer :is-sticky="false" />
     <div id="overlay" />
   </div>
 </template>
@@ -26,3 +28,25 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.layout-blank {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.layout-content {
+  flex: 1;
+}
+
+.layout-blank > .layout-content > .ds-container > div {
+  padding: 5rem 2rem;
+}
+
+@media only screen and (max-width: 500px) {
+  .layout-blank > .layout-content > .ds-container > div {
+    padding: 3rem 0;
+  }
+}
+</style>
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 0c987f5ae..3d17e5e5b 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -227,8 +227,7 @@
       },
       "email-display": {
         "warningFormat": "⚠️ E-Mail hat ein ungültiges Format!",
-        "warningUndef": "⚠️ Keine E-Mail definiert!",
-        "yourEmail": "Deine E-Mail-Adresse:"
+        "warningUndef": "⚠️ Keine E-Mail definiert!"
       },
       "email-nonce": {
         "buttonTitle": "Weiter",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 6f83754db..69082f227 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -227,8 +227,7 @@
       },
       "email-display": {
         "warningFormat": "⚠️ E-mail has wrong format!",
-        "warningUndef": "⚠️ No e-mail defined!",
-        "yourEmail": "Your e-mail address:"
+        "warningUndef": "⚠️ No e-mail defined!"
       },
       "email-nonce": {
         "buttonTitle": "Continue",
diff --git a/webapp/locales/es.json b/webapp/locales/es.json
index 71b45e56c..45b27135e 100644
--- a/webapp/locales/es.json
+++ b/webapp/locales/es.json
@@ -227,8 +227,7 @@
       },
       "email-display": {
         "warningFormat": null,
-        "warningUndef": null,
-        "yourEmail": null
+        "warningUndef": null
       },
       "email-nonce": {
         "buttonTitle": null,
diff --git a/webapp/locales/fr.json b/webapp/locales/fr.json
index 4f4b6251d..e64b87454 100644
--- a/webapp/locales/fr.json
+++ b/webapp/locales/fr.json
@@ -227,8 +227,7 @@
       },
       "email-display": {
         "warningFormat": null,
-        "warningUndef": null,
-        "yourEmail": null
+        "warningUndef": null
       },
       "email-nonce": {
         "buttonTitle": null,
diff --git a/webapp/locales/it.json b/webapp/locales/it.json
index 1cc3e2cea..30c7cc40b 100644
--- a/webapp/locales/it.json
+++ b/webapp/locales/it.json
@@ -227,8 +227,7 @@
       },
       "email-display": {
         "warningFormat": null,
-        "warningUndef": null,
-        "yourEmail": null
+        "warningUndef": null
       },
       "email-nonce": {
         "buttonTitle": null,
diff --git a/webapp/locales/nl.json b/webapp/locales/nl.json
index bf2f22c91..613ca84c6 100644
--- a/webapp/locales/nl.json
+++ b/webapp/locales/nl.json
@@ -227,8 +227,7 @@
       },
       "email-display": {
         "warningFormat": null,
-        "warningUndef": null,
-        "yourEmail": null
+        "warningUndef": null
       },
       "email-nonce": {
         "buttonTitle": null,
diff --git a/webapp/locales/pl.json b/webapp/locales/pl.json
index b68d28130..bf7296906 100644
--- a/webapp/locales/pl.json
+++ b/webapp/locales/pl.json
@@ -227,8 +227,7 @@
       },
       "email-display": {
         "warningFormat": null,
-        "warningUndef": null,
-        "yourEmail": null
+        "warningUndef": null
       },
       "email-nonce": {
         "buttonTitle": null,
diff --git a/webapp/locales/pt.json b/webapp/locales/pt.json
index 81e9dc4b2..985ec6604 100644
--- a/webapp/locales/pt.json
+++ b/webapp/locales/pt.json
@@ -227,8 +227,7 @@
       },
       "email-display": {
         "warningFormat": null,
-        "warningUndef": null,
-        "yourEmail": null
+        "warningUndef": null
       },
       "email-nonce": {
         "buttonTitle": null,
diff --git a/webapp/locales/ru.json b/webapp/locales/ru.json
index d81828486..d1214e3fc 100644
--- a/webapp/locales/ru.json
+++ b/webapp/locales/ru.json
@@ -227,8 +227,7 @@
       },
       "email-display": {
         "warningFormat": null,
-        "warningUndef": null,
-        "yourEmail": null
+        "warningUndef": null
       },
       "email-nonce": {
         "buttonTitle": null,
diff --git a/webapp/pages/password-reset.vue b/webapp/pages/password-reset.vue
index fa3223f6d..dc79a0bba 100644
--- a/webapp/pages/password-reset.vue
+++ b/webapp/pages/password-reset.vue
@@ -1,5 +1,9 @@
 <template>
   <ds-container width="small" class="password-reset">
+    <div class="back-link">
+      <nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
+    </div>
+
     <base-card>
       <template #imageColumn>
         <page-params-link :pageParams="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)">
@@ -42,3 +46,9 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.back-link {
+  height: 35px;
+}
+</style>
diff --git a/webapp/pages/password-reset/request.vue b/webapp/pages/password-reset/request.vue
index 29f8fde9d..faddceb80 100644
--- a/webapp/pages/password-reset/request.vue
+++ b/webapp/pages/password-reset/request.vue
@@ -1,9 +1,5 @@
 <template>
-  <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>
+  <request @handleSubmitted="handlePasswordResetRequested"></request>
 </template>
 
 <script>