Merge pull request #6441 from Ocelot-Social-Community/6439-fix-terms-and-condition+data-privacy-links-on-registration

fix(webapp): change registration `terms and conditions`, `data privacy` links to use `page-params-link`

webapp/components/Registration/RegistrationSlideCreate.vue

@@ -89,13 +89,13 @@
           <label for="checkbox0">
             {{ $t('components.registration.create-user-account.termsAndCondsEtcConfirmed') }}
             <br />
-            <a :href="'/terms-and-conditions'" target="_blank">
+            <page-params-link :pageParams="links.TERMS_AND_CONDITIONS" forceTargetBlank>
               {{ $t('site.termsAndConditions') }}
-            </a>
+            </page-params-link>
             <br />
-            <a :href="'/data-privacy'" target="_blank">
+            <page-params-link :pageParams="links.DATA_PRIVACY" forceTargetBlank>
               {{ $t('site.data-privacy') }}
-            </a>
+            </page-params-link>
           </label>
         </ds-text>
         <ds-text>
@@ -123,20 +123,22 @@
 import { VERSION } from '~/constants/terms-and-conditions-version.js'
 import links from '~/constants/links'
 import emails from '~/constants/emails'
+import { SignupVerificationMutation } from '~/graphql/Registration.js'
+import { SweetalertIcon } from 'vue-sweetalert-icons'
 import PasswordStrength from '~/components/Password/Strength'
 import EmailDisplayAndVerify from './EmailDisplayAndVerify'
-import { SweetalertIcon } from 'vue-sweetalert-icons'
+import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink'
 import PasswordForm from '~/components/utils/PasswordFormHelper'
-import { SignupVerificationMutation } from '~/graphql/Registration.js'
 import ShowPassword from '../ShowPassword/ShowPassword.vue'
 
 export default {
   name: 'RegistrationSlideCreate',
   components: {
-    PasswordStrength,
     EmailDisplayAndVerify,
-    SweetalertIcon,
+    PageParamsLink,
+    PasswordStrength,
     ShowPassword,
+    SweetalertIcon,
   },
   props: {
     sliderData: { type: Object, required: true },

webapp/components/_new/features/PageParamsLink/PageParamsLink.vue

@@ -1,17 +1,12 @@
 <template>
   <nuxt-link
-    v-if="pageParams.isInternalPage"
+    v-if="isInternalLink"
     :to="pageParams.internalPage.pageRoute"
     :data-test="pageParams.name + '-nuxt-link'"
   >
     <slot />
   </nuxt-link>
-  <a
-    v-else
-    :href="pageParams.externalLink.url"
-    :target="pageParams.externalLink.target"
-    :data-test="pageParams.name + '-link'"
-  >
+  <a v-else :href="href" :target="target" :data-test="pageParams.name + '-link'">
     <slot />
   </a>
 </template>
@@ -21,6 +16,24 @@ export default {
   name: 'PageParamsLink',
   props: {
     pageParams: { type: Object, required: true },
+    forceTargetBlank: { type: Boolean, default: false },
+  },
+  computed: {
+    href() {
+      return this.pageParams.isInternalPage
+        ? this.pageParams.internalPage.pageRoute
+        : this.pageParams.externalLink.url
+    },
+    target() {
+      return this.forceTargetBlank
+        ? '_blank'
+        : !this.pageParams.isInternalPage
+        ? this.pageParams.externalLink.target
+        : ''
+    },
+    isInternalLink() {
+      return !this.forceTargetBlank && this.pageParams.isInternalPage
+    },
   },
 }
 </script>