Merge pull request #1935 from gradido/1929-styling-new-template-for-password-component

1929 styling new template for password component

frontend/src/components/Auth/AuthCarousel.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <b-carousel :interval="3000">
+    <b-carousel :interval="13000">
       <b-carousel-slide img-src="/img/template/Foto_01_2400_small.jpg"></b-carousel-slide>
       <b-carousel-slide img-src="/img/template/Foto_02_2400_small.jpg"></b-carousel-slide>
       <b-carousel-slide img-src="/img/template/Foto_03_2400_small.jpg"></b-carousel-slide>

frontend/src/components/Auth/AuthMobileStart.vue

@@ -9,36 +9,36 @@
       {{ $t('auth.left.newCurrency') }}
     </div>
     <img
-      src="img/template/Blaetter.png"
+      src="/img/template/Blaetter.png"
       class="sheet-img position-absolute d-block d-lg-none zindex1000"
     />
     <b-img
       id="img0"
       class="position-absolute zindex1000"
-      src="img/template/logo-header.png"
+      src="/img/template/logo-header.png"
       alt="start background image"
     ></b-img>
     <b-img
       fluid
       id="img1"
       class="position-absolute h-100 w-100 overflow-hidden zindex100"
-      src="img/template/gold_03.png"
+      src="/img/template/gold_03.png"
       alt="start background image"
     ></b-img>
     <b-img
       id="img2"
       class="position-absolute zindex100"
-      src="img/template/gradido_background_header.png"
+      src="/img/template/gradido_background_header.png"
       alt="start background image"
     ></b-img>
     <b-img
       id="img3"
       class="position-relative zindex10"
-      src="img/template/Foto_01.jpg"
+      src="/img/template/Foto_01.jpg"
       alt="start background image"
     ></b-img>
     <div class="mobil-start-box-text position-fixed w-100 text-center zindex1000">
-      <b-button variant="gradido" to="/register" @click="$emit('is-mobile-start', false)">
+      <b-button variant="gradido" to="/register" @click="$emit('set-mobile-start', false)">
         {{ $t('signup') }}
       </b-button>
       <div class="mt-3 h3 text-white">
@@ -46,7 +46,7 @@
         <b-link
           to="/login"
           class="text-gradido gradido-global-color-blue"
-          @click="$emit('is-mobile-start', false)"
+          @click="$emit('set-mobile-start', false)"
         >
           {{ $t('auth.left.hereLogin') }}
         </b-link>
@@ -58,6 +58,9 @@
 <script>
 export default {
   name: 'AuthMobileStart',
+  props: {
+    mobileStart: { type: Boolean, default: false },
+  },
 }
 </script>
 

frontend/src/components/Auth/AuthNavbar.vue

@@ -10,7 +10,7 @@
         />
         <b-img
           class="imgLogoBack mt--3 ml--3"
-          src="img/template/gradido_background_header.png"
+          src="/img/template/gradido_background_header.png"
           width="230"
           alt="start background image"
         ></b-img>
@@ -37,8 +37,8 @@ export default {
   name: 'AuthNavbar',
   data() {
     return {
-      logo: 'img/brand/green.png',
-      sheet: 'img/template/Blaetter.png',
+      logo: '/img/brand/green.png',
+      sheet: '/img/template/Blaetter.png',
     }
   },
 }

frontend/src/layouts/AuthLayout.vue

@@ -3,7 +3,7 @@
     <auth-mobile-start
       v-if="mobileStart"
       class="d-inline d-lg-none zindex10000"
-      @is-mobile-start="setMobileStart"
+      @set-mobile-start="setMobileStart"
     />
     <div class="h-100 align-middle">
       <auth-navbar class="zindex10" />
@@ -34,7 +34,7 @@
                 <div class="mb-0">{{ $t('1000thanks') }}</div>
               </b-col>
               <b-col cols="3" class="text-right d-none d-sm-none d-md-inline">
-                <b-avatar src="img/brand/gradido_coin●.png" size="6rem"></b-avatar>
+                <b-avatar src="/img/brand/gradido_coin●.png" size="6rem"></b-avatar>
               </b-col>
             </b-row>
             <b-card no-body ref="pageFontSize" class="border-0 mt-4 gradido-custom-background">
@@ -44,7 +44,7 @@
                 </b-col>
                 <b-col cols="2" class="text-right">
                   <div id="popover-target-1" class="pointer">
-                    <b-img src="img/svg/type.svg" width="19" class="svgType"></b-img>
+                    <b-img src="/img/svg/type.svg" width="19" class="svgType"></b-img>
                   </div>
                   <b-popover
                     target="popover-target-1"
@@ -64,7 +64,7 @@
               </b-row>
               <b-row class="d-inline d-sm-inline d-md-none d-lg-none mb-3">
                 <b-col class="text-center">
-                  <b-avatar src="img/brand/gradido_coin●.png" size="6rem"></b-avatar>
+                  <b-avatar src="/img/brand/gradido_coin●.png" size="6rem"></b-avatar>
                   <b-row>
                     <b-col class="zindex1000 d-flex justify-content-center">
                       <auth-navbar-small />
@@ -73,7 +73,7 @@
                 </b-col>
               </b-row>
               <b-card-body class="">
-                <router-view></router-view>
+                <router-view @set-mobile-start="setMobileStart"></router-view>
               </b-card-body>
             </b-card>
           </div>

frontend/src/pages/ResetPassword.spec.js

@@ -79,16 +79,6 @@ describe('ResetPassword', () => {
         expect(wrapper.find('div.resetpwd-form').exists()).toBeTruthy()
       })
 
-      describe('links', () => {
-        it('has a link "Back"', async () => {
-          expect(wrapper.findAllComponents(RouterLinkStub).at(0).text()).toEqual('back')
-        })
-
-        it('links to /login when clicking "Back"', async () => {
-          expect(wrapper.findAllComponents(RouterLinkStub).at(0).props().to).toBe('/login')
-        })
-      })
-
       describe('reset password form', () => {
         it('has a register form', async () => {
           expect(wrapper.find('form').exists()).toBeTruthy()

frontend/src/pages/ResetPassword.vue

@@ -5,19 +5,13 @@
       <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
         <input-password-confirmation v-model="form" />
         <div class="text-center">
-          <b-button type="submit" variant="primary" class="mt-4">
+          <b-button type="submit" variant="gradido" class="mt-4">
             <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
             {{ $t(displaySetup.button) }}
           </b-button>
         </div>
       </b-form>
     </validation-observer>
-
-    <b-row v-if="displaySetup.linkTo">
-      <b-col class="text-center py-lg-4">
-        <router-link :to="displaySetup.linkTo" class="mt-3">{{ $t('back') }}</router-link>
-      </b-col>
-    </b-row>
   </div>
 </template>
 
@@ -39,10 +33,6 @@ const textFields = {
     button: 'settings.password.set',
     linkTo: '/login',
   },
-  login: {
-    headline: 'site.thx.errorTitle',
-    subtitle: 'site.thx.activateEmail',
-  },
 }
 
 export default {
@@ -116,6 +106,7 @@ export default {
     },
   },
   created() {
+    this.$emit('set-mobile-start', false)
     this.setDisplaySetup()
   },
 }