Merge pull request #4599 from Ocelot-Social-Community/4595-refactor-landing-and-other-internal-pages

feat: 🍰 Landing Page And Other Internal Pages

backend/src/config/emails.js

@@ -0,0 +1,8 @@
+// this file is duplicated in `backend/src/config/` and `webapp/constants/` and replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/constants/
+export default {
+  SUPPORT_EMAIL: 'devops@ocelot.social',
+  MODERATION_EMAIL: 'devops@ocelot.social',
+  // ATTENTION: the following links have to be defined even for internal pages with full URLs as example like 'https://staging.ocelot.social/support', because they are used in e-mails!
+  ORGANIZATION_LINK: 'https://ocelot.social',
+  SUPPORT_LINK: 'https://ocelot.social',
+}

backend/src/config/index.js

@@ -1,5 +1,5 @@
 import dotenv from 'dotenv'
-import links from './links.js'
+import emails from './emails.js'
 import metadata from './metadata.js'
 
 // Load env file
@@ -79,9 +79,9 @@ const s3 = {
 
 const options = {
   EMAIL_DEFAULT_SENDER: env.EMAIL_DEFAULT_SENDER,
-  SUPPORT_URL: links.SUPPORT,
+  SUPPORT_URL: emails.SUPPORT_LINK,
   APPLICATION_NAME: metadata.APPLICATION_NAME,
-  ORGANIZATION_URL: links.ORGANIZATION,
+  ORGANIZATION_URL: emails.ORGANIZATION_LINK,
   PUBLIC_REGISTRATION: env.PUBLIC_REGISTRATION === 'true' || false,
   INVITE_REGISTRATION: env.INVITE_REGISTRATION !== 'false', // default = true
 }

backend/src/config/links.js

@@ -1,17 +0,0 @@
-// this file is duplicated in `backend/src/config/links.js` and `webapp/constants/links.js` and replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/constants/
-export default {
-  LANDING_PAGE: '/login', // examples: '/login', '/registration', '/organization', or external 'https://ocelot.social'
-
-  // you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/
-
-  SUPPORT: 'https://ocelot.social', // example for internal support page: 'https://staging.ocelot.social/support'. set a full URL please, because it is used in e-mails as well!
-
-  // on null or empty strings internal pages are used, see 'webapp/locales/html/'
-  ORGANIZATION: 'https://ocelot.social',
-  DONATE: 'https://ocelot-social.herokuapp.com/donations', // we use 'ocelot-social.herokuapp.com' at the moment, because redirections of 'ocelot.social' subpages are not working correctly
-  IMPRINT: 'https://ocelot-social.herokuapp.com/imprint', // we use 'ocelot-social.herokuapp.com' at the moment, because redirections of 'ocelot.social' subpages are not working correctly
-  TERMS_AND_CONDITIONS: null,
-  CODE_OF_CONDUCT: null,
-  DATA_PRIVACY: null,
-  FAQ: 'https://ocelot.social',
-}

docker-compose.override.yml

@@ -60,6 +60,11 @@ services:
     networks:
       - external-net
       
+# the following network from the main YAML gives the warning `WARNING: Some networks were defined but are not used by any service: internal-net` and should be removed
+#   but removing is not possible yet, it seems: https://github.com/docker/compose/issues/3729#issuecomment-623154878
+# networks:
+#   internal-net:
+
 volumes:
   webapp_node_modules:
   backend_node_modules:

webapp/Dockerfile.maintenance

@@ -57,8 +57,10 @@ COPY package.json yarn.lock ./
 RUN yarn install --production=false --frozen-lockfile --non-interactive
 
 COPY assets assets
+# COPY components/_new/generic/ components/_new/generic
 COPY components/LocaleSwitch/ components/LocaleSwitch
 COPY components/Dropdown.vue components/Dropdown.vue
+# COPY components/Logo/ components/Logo
 COPY layouts/blank.vue layouts/blank.vue
 COPY locales locales
 COPY mixins mixins

webapp/components/ContributionForm/ContributionForm.vue

@@ -25,10 +25,10 @@
         <div v-if="formData.image" class="blur-toggle">
           <label for="blur-img">{{ $t('contribution.inappropriatePicture') }}</label>
           <input type="checkbox" id="blur-img" v-model="formData.imageBlurred" />
-          <a :href="links.FAQ" target="_blank" class="link">
-            {{ $t('contribution.inappropriatePictureText') }}
+          <page-params-link class="link" :pageParams="links.FAQ">
+            {{ $t('contribution.inappropriatePicture') }}
             <base-icon name="question-circle" />
-          </a>
+          </page-params-link>
         </div>
         <ds-input
           model="title"
@@ -71,11 +71,13 @@ import HcEditor from '~/components/Editor/Editor'
 import PostMutations from '~/graphql/PostMutations.js'
 import ImageUploader from '~/components/ImageUploader/ImageUploader'
 import links from '~/constants/links.js'
+import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
 
 export default {
   components: {
     HcEditor,
     ImageUploader,
+    PageParamsLink,
   },
   props: {
     contribution: {

webapp/components/DonationInfo/DonationInfo.spec.js

@@ -21,12 +21,6 @@ describe('DonationInfo.vue', () => {
 
   const Wrapper = () => mount(DonationInfo, { mocks, localVue })
 
-  it('includes a link to the ocelot.social donations website', () => {
-    expect(Wrapper().find('a').attributes('href')).toBe(
-      'https://ocelot-social.herokuapp.com/donations',
-    )
-  })
-
   it('displays a call to action button', () => {
     expect(Wrapper().find('.base-button').text()).toBe('donations.donate-now')
   })

webapp/components/DonationInfo/DonationInfo.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="donation-info">
     <progress-bar :title="title" :label="label" :goal="goal" :progress="progress" />
-    <a target="_blank" :href="links.DONATE">
-      <base-button filled>{{ $t('donations.donate-now') }}</base-button>
-    </a>
+    <base-button filled @click="redirectToPage(links.DONATE)">
+      {{ $t('donations.donate-now') }}
+    </base-button>
   </div>
 </template>
 
@@ -36,6 +36,11 @@ export default {
       })
     },
   },
+  methods: {
+    redirectToPage(pageParams) {
+      pageParams.redirectToPage(this)
+    },
+  },
   apollo: {
     Donations: {
       query() {

webapp/components/LoginButton/LoginButton.spec.js

@@ -0,0 +1,41 @@
+import { config, mount } from '@vue/test-utils'
+import LoginButton from './LoginButton.vue'
+
+config.stubs['v-popover'] = '<span><slot /></span>'
+
+describe('LoginButton.vue', () => {
+  let wrapper
+  let mocks
+  let propsData
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn(),
+      navigator: {
+        clipboard: {
+          writeText: jest.fn(),
+        },
+      },
+    }
+    propsData = {}
+  })
+
+  describe('mount', () => {
+    const Wrapper = () => {
+      return mount(LoginButton, { mocks, propsData })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders', () => {
+      expect(wrapper.contains('.login-button')).toBe(true)
+    })
+
+    it('open popup', () => {
+      wrapper.find('.base-button').trigger('click')
+      expect(wrapper.contains('.login-button')).toBe(true)
+    })
+  })
+})

webapp/components/LoginButton/LoginButton.vue

@@ -0,0 +1,54 @@
+<template>
+  <dropdown class="login-button" offset="8" :placement="placement">
+    <template #default="{ toggleMenu }">
+      <base-button icon="sign-in" circle ghost @click.prevent="toggleMenu" />
+    </template>
+    <template #popover>
+      <div class="login-button-menu-popover">
+        <nuxt-link class="login-link" :to="{ name: 'login' }">
+          <base-icon name="sign-in" />
+          {{ $t('login.login') }}
+        </nuxt-link>
+      </div>
+    </template>
+  </dropdown>
+</template>
+
+<script>
+import Dropdown from '~/components/Dropdown'
+
+export default {
+  components: {
+    Dropdown,
+  },
+  props: {
+    placement: { type: String, default: 'top-end' },
+  },
+}
+</script>
+
+<style lang="scss" scope>
+.login-button {
+  color: $color-secondary;
+}
+
+.login-button-menu-popover {
+  padding-top: $space-x-small;
+  padding-bottom: $space-x-small;
+  hr {
+    color: $color-neutral-90;
+    background-color: $color-neutral-90;
+  }
+  .login-link {
+    color: $text-color-base;
+    padding-top: $space-xx-small;
+    &:hover {
+      color: $text-color-link-active;
+    }
+  }
+}
+
+.invite-code {
+  left: 50%;
+}
+</style>

webapp/components/LoginForm/LoginForm.vue

@@ -6,9 +6,9 @@
     </blockquote>
     <base-card>
       <template #imageColumn>
-        <a :href="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)" target="_blank">
+        <page-params-link :pageParams="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)">
           <logo logoType="welcome" />
-        </a>
+        </page-params-link>
       </template>
       <h2 class="title">{{ $t('login.login') }}</h2>
       <form :disabled="pending" @submit.prevent="onSubmit">
@@ -54,6 +54,7 @@
 <script>
 import links from '~/constants/links.js'
 import metadata from '~/constants/metadata.js'
+import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import Logo from '~/components/Logo/Logo'
 import ShowPassword from '../ShowPassword/ShowPassword.vue'
@@ -62,6 +63,7 @@ export default {
   components: {
     LocaleSwitch,
     Logo,
+    PageParamsLink,
     ShowPassword,
   },
   data() {

webapp/components/Logo/Logo.vue

@@ -71,7 +71,7 @@ export default {
       maintenance: {
         path: logos.LOGO_MAINTENACE_RESET_PATH,
         alt: 'Under Maintenance',
-        widthDefault: '75%',
+        widthDefault: '200px',
       },
     }
     return {

webapp/components/PageFooter/PageFooter.spec.js

@@ -29,8 +29,8 @@ describe('PageFooter.vue', () => {
         wrapper = Wrapper()
       })
 
-      it('renders four links', () => {
-        expect(wrapper.findAll('a')).toHaveLength(4)
+      it('renders five links', () => {
+        expect(wrapper.findAll('a')).toHaveLength(5)
       })
 
       it('renders three nuxt-links', () => {
@@ -56,12 +56,12 @@ describe('PageFooter.vue', () => {
       beforeEach(async () => {
         const links = {
           ...linksDefault,
-          ORGANIZATION: null,
-          IMPRINT: null,
-          TERMS_AND_CONDITIONS: null,
-          CODE_OF_CONDUCT: null,
-          DATA_PRIVACY: null,
-          FAQ: null,
+          ORGANIZATION: linksDefault.ORGANIZATION.overwrite({ externalLink: null }),
+          IMPRINT: linksDefault.IMPRINT.overwrite({ externalLink: null }),
+          TERMS_AND_CONDITIONS: linksDefault.TERMS_AND_CONDITIONS.overwrite({ externalLink: null }),
+          CODE_OF_CONDUCT: linksDefault.CODE_OF_CONDUCT.overwrite({ externalLink: null }),
+          DATA_PRIVACY: linksDefault.DATA_PRIVACY.overwrite({ externalLink: null }),
+          FAQ: linksDefault.FAQ.overwrite({ externalLink: null }),
         }
         wrapper = Wrapper()
         wrapper.setData({ links })
@@ -77,15 +77,17 @@ describe('PageFooter.vue', () => {
       })
 
       it('renders TERMS_AND_CONDITIONS as nuxt-link', () => {
-        expect(wrapper.find('span[data-test="terms-nuxt-link"]').exists()).toBeTruthy()
+        expect(
+          wrapper.find('span[data-test="terms-and-conditions-nuxt-link"]').exists(),
+        ).toBeTruthy()
       })
 
       it('renders CODE_OF_CONDUCT as nuxt-link', () => {
-        expect(wrapper.find('span[data-test="code-nuxt-link"]').exists()).toBeTruthy()
+        expect(wrapper.find('span[data-test="code-of-conduct-nuxt-link"]').exists()).toBeTruthy()
       })
 
       it('renders DATA_PRIVACY as nuxt-link', () => {
-        expect(wrapper.find('span[data-test="data-nuxt-link"]').exists()).toBeTruthy()
+        expect(wrapper.find('span[data-test="data-privacy-nuxt-link"]').exists()).toBeTruthy()
       })
 
       it('renders FAQ as nuxt-link', () => {
@@ -97,12 +99,22 @@ describe('PageFooter.vue', () => {
       beforeEach(async () => {
         const links = {
           ...linksDefault,
-          ORGANIZATION: 'https://ocelot.social',
-          IMPRINT: 'https://ocelot.social/IMPRINT',
-          TERMS_AND_CONDITIONS: 'https://ocelot.social/TERMS_AND_CONDITIONS',
-          CODE_OF_CONDUCT: 'https://ocelot.social/CODE_OF_CONDUCT',
-          DATA_PRIVACY: 'https://ocelot.social/DATA_PRIVACY',
-          FAQ: 'https://ocelot.social/FAQ',
+          ORGANIZATION: linksDefault.ORGANIZATION.overwrite({
+            externalLink: 'https://ocelot.social',
+          }),
+          IMPRINT: linksDefault.IMPRINT.overwrite({
+            externalLink: 'https://ocelot.social/IMPRINT',
+          }),
+          TERMS_AND_CONDITIONS: linksDefault.TERMS_AND_CONDITIONS.overwrite({
+            externalLink: 'https://ocelot.social/TERMS_AND_CONDITIONS',
+          }),
+          CODE_OF_CONDUCT: linksDefault.CODE_OF_CONDUCT.overwrite({
+            externalLink: 'https://ocelot.social/CODE_OF_CONDUCT',
+          }),
+          DATA_PRIVACY: linksDefault.DATA_PRIVACY.overwrite({
+            externalLink: 'https://ocelot.social/DATA_PRIVACY',
+          }),
+          FAQ: linksDefault.FAQ.overwrite({ externalLink: 'https://ocelot.social/FAQ' }),
         }
         wrapper = Wrapper()
         wrapper.setData({ links })

webapp/components/PageFooter/PageFooter.vue

@@ -1,69 +1,12 @@
 <template>
   <div id="footer" class="ds-footer">
-    <!-- made with ❤️ -->
-    <nuxt-link
-      v-if="noLinkDefined(links.ORGANIZATION)"
-      to="/organization"
-      data-test="organization-nuxt-link"
-    >
-      {{ $t('site.made') }}
-    </nuxt-link>
-    <a v-else :href="links.ORGANIZATION" target="_blank" data-test="organization-link">
-      {{ $t('site.made') }}
-    </a>
-    <span>-</span>
-    <!-- imprint -->
-    <nuxt-link v-if="noLinkDefined(links.IMPRINT)" to="/imprint" data-test="imprint-nuxt-link">
-      {{ $t('site.imprint') }}
-    </nuxt-link>
-    <a v-else :href="links.IMPRINT" target="_blank">
-      {{ $t('site.imprint') }}
-    </a>
-    <span>-</span>
-    <!-- terms and conditions -->
-    <nuxt-link
-      v-if="noLinkDefined(links.TERMS_AND_CONDITIONS)"
-      to="/terms-and-conditions"
-      data-test="terms-nuxt-link"
-    >
-      {{ $t('site.termsAndConditions') }}
-    </nuxt-link>
-    <a v-else :href="links.TERMS_AND_CONDITIONS" target="_blank">
-      {{ $t('site.termsAndConditions') }}
-    </a>
-    <span>-</span>
-    <!-- code of conduct -->
-    <nuxt-link
-      v-if="noLinkDefined(links.CODE_OF_CONDUCT)"
-      to="/code-of-conduct"
-      data-test="code-nuxt-link"
-    >
-      {{ $t('site.code-of-conduct') }}
-    </nuxt-link>
-    <a v-else :href="links.CODE_OF_CONDUCT" target="_blank">
-      {{ $t('site.code-of-conduct') }}
-    </a>
-    <span>-</span>
-    <!-- data privacy -->
-    <nuxt-link
-      v-if="noLinkDefined(links.DATA_PRIVACY)"
-      to="/data-privacy"
-      data-test="data-nuxt-link"
-    >
-      {{ $t('site.data-privacy') }}
-    </nuxt-link>
-    <a v-else :href="links.DATA_PRIVACY" target="_blank">
-      {{ $t('site.data-privacy') }}
-    </a>
-    <span>-</span>
-    <!-- faq -->
-    <nuxt-link v-if="noLinkDefined(links.FAQ)" to="/faq" data-test="faq-nuxt-link">
-      {{ $t('site.faq') }}
-    </nuxt-link>
-    <a v-else :href="links.FAQ" target="_blank">
-      {{ $t('site.faq') }}
-    </a>
-    <span>-</span>
+    <!-- links to internal or external pages -->
+    <span v-for="pageParams in links.FOOTER_LINK_LIST" :key="pageParams.name">
+      <page-params-link :pageParams="pageParams">
+        {{ $t(pageParams.internalPage.footerIdent) }}
+      </page-params-link>
+      <span class="division-line">-</span>
+    </span>
     <!-- version -->
     <a
       href="https://github.com/Ocelot-Social-Community/Ocelot-Social/blob/master/CHANGELOG.md"
@@ -77,16 +20,15 @@
 
 <script>
 import links from '~/constants/links.js'
+import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
 
 export default {
+  components: {
+    PageParamsLink,
+  },
   data() {
     return { links, version: `v${this.$env.VERSION}` }
   },
-  methods: {
-    noLinkDefined(link) {
-      return !link || link.length === 0
-    },
-  },
 }
 </script>
 
@@ -101,7 +43,8 @@ export default {
   padding: 10px 10px;
   box-shadow: 0px -6px 12px -4px rgba(0, 0, 0, 0.1);
 }
-span {
+.division-line {
+  margin-left: 0.2rem;
   margin-right: 0.2rem;
 }
 </style>

webapp/components/PasswordReset/ChangePassword.vue

@@ -79,7 +79,7 @@ export default {
   data() {
     const passwordForm = PasswordForm({ translate: this.$t })
     return {
-      supportEmail: emails.SUPPORT,
+      supportEmail: emails.SUPPORT_EMAIL,
       formData: {
         ...passwordForm.formData,
       },

webapp/components/Registration/RegistrationSlideCreate.vue

@@ -142,7 +142,7 @@ export default {
     const passwordForm = PasswordForm({ translate: this.$t })
     return {
       links,
-      supportEmail: emails.SUPPORT,
+      supportEmail: emails.SUPPORT_EMAIL,
       formData: {
         name: '',
         ...passwordForm.formData,

webapp/components/Registration/RegistrationSlider.vue

@@ -2,9 +2,9 @@
   <section class="login-form">
     <base-card>
       <template #imageColumn>
-        <a :href="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)" target="_blank">
+        <page-params-link :pageParams="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)">
           <logo logoType="signup" />
-        </a>
+        </page-params-link>
       </template>
 
       <component-slider :sliderData="sliderData">
@@ -48,6 +48,7 @@ import metadata from '~/constants/metadata.js'
 import ComponentSlider from '~/components/ComponentSlider/ComponentSlider'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import Logo from '~/components/Logo/Logo'
+import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
 import RegistrationSlideCreate from './RegistrationSlideCreate'
 import RegistrationSlideEmail from './RegistrationSlideEmail'
 import RegistrationSlideInvite from './RegistrationSlideInvite'
@@ -60,6 +61,7 @@ export default {
     ComponentSlider,
     LocaleSwitch,
     Logo,
+    PageParamsLink,
     RegistrationSlideCreate,
     RegistrationSlideEmail,
     RegistrationSlideInvite,

webapp/components/_new/features/InternalPage/InternalPage.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <ds-space margin="small">
+      <ds-heading v-if="pageParams.internalPage.headlineIdent !== null" tag="h2">
+        {{ $t(pageParams.internalPage.headlineIdent) }}
+      </ds-heading>
+    </ds-space>
+    <ds-container v-if="pageParams.internalPage.hasContainer">
+      <div v-if="!pageParams.internalPage.hasBaseCard">
+        <br />
+        <div v-html="$t(pageParams.internalPage.htmlIdent)" />
+      </div>
+      <base-card v-else>
+        <div v-html="$t(pageParams.internalPage.htmlIdent)" />
+      </base-card>
+    </ds-container>
+    <div v-else-if="!pageParams.internalPage.hasBaseCard">
+      <br />
+      <div v-html="$t(pageParams.internalPage.htmlIdent)" />
+    </div>
+    <base-card v-else>
+      <div v-html="$t(pageParams.internalPage.htmlIdent)" />
+    </base-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InternalPage',
+  props: {
+    pageParams: { type: Object, required: true },
+  },
+}
+</script>

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

@@ -0,0 +1,21 @@
+<template>
+  <nuxt-link
+    v-if="pageParams.isInternalPage"
+    :to="pageParams.internalPage.pageRoute"
+    :data-test="pageParams.name + '-nuxt-link'"
+  >
+    <slot />
+  </nuxt-link>
+  <a v-else :href="pageParams.externalLink" target="_blank" :data-test="pageParams.name + '-link'">
+    <slot />
+  </a>
+</template>
+
+<script>
+export default {
+  name: 'PageParamsLink',
+  props: {
+    pageParams: { type: Object, required: true },
+  },
+}
+</script>

webapp/components/utils/InternalPages.js

@@ -0,0 +1,140 @@
+import { PageParams } from '~/components/utils/PageParams.js'
+
+export const defaultPageParamsPages = {
+  ORGANIZATION: new PageParams({
+    name: 'organization',
+
+    externalLink: null, // if string is defined and not empty it's dominating
+
+    internalPage: {
+      pageRoute: '/organization', // static, don't change! internal page in case no external is defined
+      footerIdent: 'site.made', // localized string identifier
+      headTitleIdent: 'site.made', // localized string identifier
+      headlineIdent: 'site.made', // localized string identifier. on null it's hidden, on empty string default is used
+      hasContainer: true,
+      hasBaseCard: true,
+      hasLoginInHeader: true,
+      // in case internal page content is here 'webapp/locales/html/'
+      htmlIdent: 'html.organization',
+    },
+  }),
+  DONATE: new PageParams({
+    name: 'donate',
+
+    externalLink: null, // if string is defined and not empty it's dominating
+
+    internalPage: {
+      pageRoute: '/donate', // static, don't change! internal page in case no external is defined
+      footerIdent: 'site.donate', // localized string identifier
+      headTitleIdent: 'site.donate', // localized string identifier
+      headlineIdent: 'site.donate', // localized string identifier. on null it's hidden, on empty string default is used
+      hasContainer: true,
+      hasBaseCard: true,
+      hasLoginInHeader: true,
+      // in case internal page content is here 'webapp/locales/html/'
+      htmlIdent: 'html.donate',
+    },
+  }),
+  IMPRINT: new PageParams({
+    name: 'imprint',
+
+    externalLink: null, // if string is defined and not empty it's dominating
+
+    internalPage: {
+      pageRoute: '/imprint', // static, don't change! internal page in case no external is defined
+      footerIdent: 'site.imprint', // localized string identifier
+      headTitleIdent: 'site.imprint', // localized string identifier
+      headlineIdent: 'site.imprint', // localized string identifier. on null it's hidden, on empty string default is used
+      hasContainer: true,
+      hasBaseCard: true,
+      hasLoginInHeader: true,
+      // in case internal page content is here 'webapp/locales/html/'
+      htmlIdent: 'html.imprint',
+    },
+  }),
+  TERMS_AND_CONDITIONS: new PageParams({
+    name: 'terms-and-conditions',
+
+    externalLink: null, // if string is defined and not empty it's dominating
+
+    internalPage: {
+      pageRoute: '/terms-and-conditions', // static, don't change! internal page in case no external is defined
+      footerIdent: 'site.termsAndConditions', // localized string identifier
+      headTitleIdent: 'site.termsAndConditions', // localized string identifier
+      headlineIdent: 'site.termsAndConditions', // localized string identifier. on null it's hidden, on empty string default is used
+      hasContainer: true,
+      hasBaseCard: true,
+      hasLoginInHeader: true,
+      // in case internal page content is here 'webapp/locales/html/'
+      htmlIdent: 'html.termsAndConditions',
+    },
+  }),
+  CODE_OF_CONDUCT: new PageParams({
+    name: 'code-of-conduct',
+
+    externalLink: null, // if string is defined and not empty it's dominating
+
+    internalPage: {
+      pageRoute: '/code-of-conduct', // static, don't change! internal page in case no external is defined
+      footerIdent: 'site.code-of-conduct', // localized string identifier
+      headTitleIdent: 'site.code-of-conduct', // localized string identifier
+      headlineIdent: 'site.code-of-conduct', // localized string identifier. on null it's hidden, on empty string default is used
+      hasContainer: true,
+      hasBaseCard: true,
+      hasLoginInHeader: true,
+      // in case internal page content is here 'webapp/locales/html/'
+      htmlIdent: 'html.codeOfConduct',
+    },
+  }),
+  DATA_PRIVACY: new PageParams({
+    name: 'data-privacy',
+
+    externalLink: null, // if string is defined and not empty it's dominating
+
+    internalPage: {
+      pageRoute: '/data-privacy', // static, don't change! internal page in case no external is defined
+      footerIdent: 'site.data-privacy', // localized string identifier
+      headTitleIdent: 'site.data-privacy', // localized string identifier
+      headlineIdent: 'site.data-privacy', // localized string identifier. on null it's hidden, on empty string default is used
+      hasContainer: true,
+      hasBaseCard: true,
+      hasLoginInHeader: true,
+      // in case internal page content is here 'webapp/locales/html/'
+      htmlIdent: 'html.dataPrivacy',
+    },
+  }),
+  FAQ: new PageParams({
+    name: 'faq',
+
+    externalLink: null, // if string is defined and not empty it's dominating
+
+    internalPage: {
+      pageRoute: '/faq', // static, don't change! internal page in case no external is defined
+      footerIdent: 'site.faq', // localized string identifier
+      headTitleIdent: 'site.faq', // localized string identifier
+      headlineIdent: 'site.faq', // localized string identifier. on null it's hidden, on empty string default is used
+      hasContainer: true,
+      hasBaseCard: true,
+      hasLoginInHeader: true,
+      // in case internal page content is here 'webapp/locales/html/'
+      htmlIdent: 'html.faq',
+    },
+  }),
+  SUPPORT: new PageParams({
+    name: 'support',
+
+    externalLink: null,
+
+    internalPage: {
+      pageRoute: '/support', // static, don't change '*/support'! internal page in case no external is defined
+      footerIdent: 'site.support', // localized string identifier
+      headTitleIdent: 'site.support', // localized string identifier
+      headlineIdent: 'site.support', // localized string identifier. on null it's hidden, on empty string default is used
+      hasContainer: true,
+      hasBaseCard: true,
+      hasLoginInHeader: true,
+      // in case internal page content is here 'webapp/locales/html/'
+      htmlIdent: 'html.support',
+    },
+  }),
+}

webapp/components/utils/PageParams.js

@@ -0,0 +1,41 @@
+export class PageParams {
+  constructor(pageParams) {
+    this.name = pageParams.name
+    this.externalLink = pageParams.externalLink
+    this.internalPage = pageParams.internalPage
+  }
+
+  overwrite(assignPageParams) {
+    const pageParams = this
+    if (assignPageParams.name !== undefined) {
+      pageParams.name = assignPageParams.name
+    }
+    if (assignPageParams.externalLink !== undefined) {
+      pageParams.externalLink = assignPageParams.externalLink
+    }
+    if (assignPageParams.internalPage !== undefined) {
+      pageParams.internalPage = { ...pageParams.internalPage, ...assignPageParams.internalPage }
+    }
+    return pageParams
+  }
+
+  noStringDefined(string) {
+    return !string || string.length === 0
+  }
+
+  get isInternalPage() {
+    return this.noStringDefined(this.externalLink)
+  }
+
+  get link() {
+    return this.isInternalPage ? this.internalPage.pageRoute : this.externalLink
+  }
+
+  redirectToPage(thisComponent) {
+    if (this.isInternalPage) {
+      thisComponent.$router.push(this.internalPage.pageRoute)
+    } else if (typeof window !== 'undefined') {
+      window.location.href = this.externalLink
+    }
+  }
+}

webapp/constants/emails.js

@@ -1,4 +1,8 @@
+// this file is duplicated in `backend/src/config/` and `webapp/constants/` and replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/constants/
 export default {
-  SUPPORT: 'devops@ocelot.social',
-  MODERATION: 'devops@ocelot.social',
+  SUPPORT_EMAIL: 'devops@ocelot.social',
+  MODERATION_EMAIL: 'devops@ocelot.social',
+  // ATTENTION: the following links have to be defined even for internal pages with full URLs as example like 'https://staging.ocelot.social/support', because they are used in e-mails!
+  ORGANIZATION_LINK: 'https://ocelot.social',
+  SUPPORT_LINK: 'https://ocelot.social',
 }

webapp/constants/links.js

@@ -1,17 +1,136 @@
-// this file is duplicated in `backend/src/config/links.js` and `webapp/constants/links.js` and replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/constants/
+// this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/constants/
+
+import { defaultPageParamsPages } from '~/components/utils/InternalPages.js'
+
+const ORGANIZATION = defaultPageParamsPages.ORGANIZATION.overwrite({
+  externalLink: 'https://ocelot.social', // if string is defined and not empty it's dominating
+
+  internalPage: {
+    // footerIdent: 'site.made', // localized string identifier, if undefined default is used
+    // headTitleIdent: 'site.made', // localized string identifier, if undefined default is used
+    // headlineIdent: 'site.made', // localized string identifier, on null it's hidden, if undefined default is used
+    hasContainer: true,
+    hasBaseCard: true,
+    hasLoginInHeader: true,
+    // in case internal page content is here 'webapp/locales/html/'
+  },
+})
+const DONATE = defaultPageParamsPages.DONATE.overwrite({
+  // we use 'ocelot-social.herokuapp.com' at the moment, because redirections of 'ocelot.social' subpages are not working correctly
+  externalLink: 'https://ocelot-social.herokuapp.com/donations', // if string is defined and not empty it's dominating
+
+  internalPage: {
+    // footerIdent: 'site.donate', // localized string identifier, if undefined default is used
+    // headTitleIdent: 'site.donate', // localized string identifier, if undefined default is used
+    // headlineIdent: 'site.donate', // localized string identifier, on null it's hidden, if undefined default is used
+    hasContainer: true,
+    hasBaseCard: true,
+    hasLoginInHeader: true,
+    // in case internal page content is here 'webapp/locales/html/'
+  },
+})
+const IMPRINT = defaultPageParamsPages.IMPRINT.overwrite({
+  // we use 'ocelot-social.herokuapp.com' at the moment, because redirections of 'ocelot.social' subpages are not working correctly
+  externalLink: 'https://ocelot-social.herokuapp.com/imprint', // if string is defined and not empty it's dominating
+
+  internalPage: {
+    // footerIdent: 'site.imprint', // localized string identifier, if undefined default is used
+    // headTitleIdent: 'site.imprint', // localized string identifier, if undefined default is used
+    // headlineIdent: 'site.imprint', // localized string identifier, on null it's hidden, if undefined default is used
+    hasContainer: true,
+    hasBaseCard: true,
+    hasLoginInHeader: true,
+    // in case internal page content is here 'webapp/locales/html/'
+  },
+})
+const TERMS_AND_CONDITIONS = defaultPageParamsPages.TERMS_AND_CONDITIONS.overwrite({
+  // externalLink: null, // if string is defined and not empty it's dominating
+
+  internalPage: {
+    // footerIdent: 'site.termsAndConditions', // localized string identifier, if undefined default is used
+    // headTitleIdent: 'site.termsAndConditions', // localized string identifier, if undefined default is used
+    // headlineIdent: 'site.termsAndConditions', // localized string identifier, on null it's hidden, if undefined default is used
+    hasContainer: true,
+    hasBaseCard: true,
+    hasLoginInHeader: true,
+    // in case internal page content is here 'webapp/locales/html/'
+  },
+})
+const CODE_OF_CONDUCT = defaultPageParamsPages.CODE_OF_CONDUCT.overwrite({
+  // externalLink: null, // if string is defined and not empty it's dominating
+
+  internalPage: {
+    // footerIdent: 'site.code-of-conduct', // localized string identifier, if undefined default is used
+    // headTitleIdent: 'site.code-of-conduct', // localized string identifier, if undefined default is used
+    // headlineIdent: 'site.code-of-conduct', // localized string identifier, on null it's hidden, if undefined default is used
+    hasContainer: true,
+    hasBaseCard: true,
+    hasLoginInHeader: true,
+    // in case internal page content is here 'webapp/locales/html/'
+  },
+})
+const DATA_PRIVACY = defaultPageParamsPages.DATA_PRIVACY.overwrite({
+  // externalLink: null, // if string is defined and not empty it's dominating
+
+  internalPage: {
+    // footerIdent: 'site.data-privacy', // localized string identifier, if undefined default is used
+    // headTitleIdent: 'site.data-privacy', // localized string identifier, if undefined default is used
+    // headlineIdent: 'site.data-privacy', // localized string identifier, on null it's hidden, if undefined default is used
+    hasContainer: true,
+    hasBaseCard: true,
+    hasLoginInHeader: true,
+    // in case internal page content is here 'webapp/locales/html/'
+  },
+})
+const FAQ = defaultPageParamsPages.FAQ.overwrite({
+  externalLink: 'https://ocelot.social', // if string is defined and not empty it's dominating
+
+  internalPage: {
+    // footerIdent: 'site.faq', // localized string identifier, if undefined default is used
+    // headTitleIdent: 'site.faq', // localized string identifier, if undefined default is used
+    // headlineIdent: 'site.faq', // on null default is used, on empty string it's hidden
+    hasContainer: true,
+    hasBaseCard: true,
+    hasLoginInHeader: true,
+    // in case internal page content is here 'webapp/locales/html/'
+  },
+})
+const SUPPORT = defaultPageParamsPages.SUPPORT.overwrite({
+  externalLink: 'https://ocelot.social', // if string is defined and not empty it's dominating
+
+  internalPage: {
+    // footerIdent: 'site.support', // localized string identifier, if undefined default is used
+    // headTitleIdent: 'site.support', // localized string identifier, if undefined default is used
+    // headlineIdent: 'site.support', // on null default is used, on empty string it's hidden
+    hasContainer: true,
+    hasBaseCard: true,
+    hasLoginInHeader: true,
+    // in case internal page content is here 'webapp/locales/html/'
+  },
+})
+
 export default {
   LANDING_PAGE: '/login', // examples: '/login', '/registration', '/organization', or external 'https://ocelot.social'
 
-  // you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/
+  // you can find and store templates for 👇🏼 at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/
 
-  SUPPORT: 'https://ocelot.social', // example for internal support page: 'https://staging.ocelot.social/support'. set a full URL please, because it is used in e-mails as well!
+  ORGANIZATION,
+  DONATE,
+  IMPRINT,
+  TERMS_AND_CONDITIONS,
+  CODE_OF_CONDUCT,
+  DATA_PRIVACY,
+  FAQ,
+  SUPPORT,
 
-  // on null or empty strings internal pages are used, see 'webapp/locales/html/'
-  ORGANIZATION: 'https://ocelot.social',
-  DONATE: 'https://ocelot-social.herokuapp.com/donations', // we use 'ocelot-social.herokuapp.com' at the moment, because redirections of 'ocelot.social' subpages are not working correctly
-  IMPRINT: 'https://ocelot-social.herokuapp.com/imprint', // we use 'ocelot-social.herokuapp.com' at the moment, because redirections of 'ocelot.social' subpages are not working correctly
-  TERMS_AND_CONDITIONS: null,
-  CODE_OF_CONDUCT: null,
-  DATA_PRIVACY: null,
-  FAQ: 'https://ocelot.social',
+  FOOTER_LINK_LIST: [
+    ORGANIZATION,
+    TERMS_AND_CONDITIONS,
+    CODE_OF_CONDUCT,
+    DATA_PRIVACY,
+    FAQ,
+    DONATE,
+    IMPRINT,
+    // SUPPORT,
+  ],
 }

webapp/layouts/basic.spec.js

@@ -1,3 +1,4 @@
+import Vuex from 'vuex'
 import { config, shallowMount } from '@vue/test-utils'
 import Basic from './basic.vue'
 
@@ -8,16 +9,23 @@ config.stubs.nuxt = '<span><slot /></span>'
 describe('basic.vue', () => {
   let wrapper
   let mocks
+  let store
 
   beforeEach(() => {
     mocks = {
       $t: jest.fn(),
     }
+    store = new Vuex.Store({
+      getters: {
+        'auth/isLoggedIn': () => true,
+      },
+    })
   })
 
   describe('shallow mount', () => {
     const Wrapper = () => {
       return shallowMount(Basic, {
+        store,
         mocks,
         localVue,
       })

webapp/layouts/basic.vue

@@ -10,7 +10,14 @@
             </a>
           </ds-flex-item>
           <ds-flex-item width="20%" style="flex-grow: 0">
-            <locale-switch class="topbar-locale-switch" placement="top" offset="16" />
+            <div class="main-navigation-right" style="flex-basis: auto">
+              <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
+              <template v-if="!isLoggedIn">
+                <client-only>
+                  <login-button placement="top" />
+                </client-only>
+              </template>
+            </div>
           </ds-flex-item>
         </ds-flex>
       </ds-container>
@@ -26,18 +33,26 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+import seo from '~/mixins/seo'
 import Logo from '~/components/Logo/Logo'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
-import seo from '~/mixins/seo'
+import LoginButton from '~/components/LoginButton/LoginButton'
 import PageFooter from '~/components/PageFooter/PageFooter'
 
 export default {
   components: {
     Logo,
     LocaleSwitch,
+    LoginButton,
     PageFooter,
   },
   mixins: [seo],
+  computed: {
+    ...mapGetters({
+      isLoggedIn: 'auth/isLoggedIn',
+    }),
+  },
   methods: {
     redirectToRoot() {
       this.$router.replace('/')
@@ -45,3 +60,13 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.main-navigation-right {
+  display: flex;
+  justify-content: flex-end;
+}
+.main-navigation-right .desktop-view {
+  float: right;
+}
+</style>

webapp/locales/de.json

@@ -781,6 +781,7 @@
     "contact": "Kontakt",
     "data-privacy": "Datenschutzerklärung",
     "director": "Geschäftsführer",
+    "donate": "Spenden",
     "error-occurred": "Ein Fehler ist aufgetreten.",
     "faq": "FAQ",
     "germany": "Deutschland",

webapp/locales/en.json

@@ -781,6 +781,7 @@
     "contact": "Contact",
     "data-privacy": "Data privacy",
     "director": "Managing Director",
+    "donate": "Donate",
     "error-occurred": "An error occurred.",
     "faq": "FAQ",
     "germany": "Germany",

webapp/locales/html/de/code-of-conduct.html

@@ -1,5 +1,4 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<br>
 <p>Ich bin der Inhalt vom Verhaltenskodex.</p>

webapp/locales/html/de/data-privacy.html

@@ -1,5 +1,4 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<br>
 <p>Das hier wäre der Inhalt der Datenschutzbestimmungen.</p>

webapp/locales/html/de/donate.html

@@ -0,0 +1,4 @@
+<!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
+<!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
+
+<p>Hier steht was zu den Spenden.</p>

webapp/locales/html/de/faq.html

@@ -1,5 +1,4 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<br>
 <p>Hier stehen die FAQs.</p>

webapp/locales/html/de/imprint.html

@@ -1,5 +1,4 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<br>
 <p>Ich bin das Impressum.</p>

webapp/locales/html/de/index.js

@@ -5,6 +5,7 @@ import codeOfConduct from './code-of-conduct.html'
 import dataPrivacy from './data-privacy.html'
 import faq from './faq.html'
 import imprint from './imprint.html'
+import donate from './donate.html'
 
 export default {
   organization,
@@ -14,4 +15,5 @@ export default {
   dataPrivacy,
   faq,
   imprint,
+  donate,
 }

webapp/locales/html/de/organization.html

@@ -1,5 +1,4 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<br>
 <p>Hier wird das Netzwerk beschrieben.</p>

webapp/locales/html/de/support.html

@@ -1,5 +1,4 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<br>
 <p>Ich bin der Inhalt vom Support.</p>

webapp/locales/html/de/terms-and-conditions.html

@@ -1,5 +1,4 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<br>
 <p>Ich bin der Inhalt der Seite "Nutzungsbedingungen".</p>

webapp/locales/html/en/code-of-conduct.html

@@ -1,5 +1,4 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<br>
 <p>I am the content of the code of conduct.</p>

webapp/locales/html/en/data-privacy.html

@@ -1,5 +1,4 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<br>
 <p>This would be our data privacy section.</p>

webapp/locales/html/en/donate.html

@@ -0,0 +1,4 @@
+<!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
+<!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
+
+<p>Here's what it says about donations.</p>

webapp/locales/html/en/faq.html

@@ -1,5 +1,4 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<br>
 <p>Here are the FAQs.</p>

webapp/locales/html/en/imprint.html

@@ -1,5 +1,4 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<br>
 <p>I am the imprint.</p>

webapp/locales/html/en/index.js

@@ -5,6 +5,7 @@ import codeOfConduct from './code-of-conduct.html'
 import dataPrivacy from './data-privacy.html'
 import faq from './faq.html'
 import imprint from './imprint.html'
+import donate from './donate.html'
 
 export default {
   organization,
@@ -14,4 +15,5 @@ export default {
   dataPrivacy,
   faq,
   imprint,
+  donate,
 }

webapp/locales/html/en/organization.html

@@ -1,5 +1,4 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<br>
 <p>Here the network is described.</p>

webapp/locales/html/en/support.html

@@ -1,5 +1,4 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<br>
 <p>I am the content of the support.</p>

webapp/locales/html/en/terms-and-conditions.html

@@ -1,5 +1,4 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<br>
 <p>I am the content of the page "Terms And Conditions".<p>

webapp/maintenance/source/pages/index.vue

@@ -8,9 +8,19 @@
         <ds-flex>
           <ds-flex-item :width="{ base: '100%', sm: 1, md: 1 }">
             <ds-space>
-              <a :href="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)" target="_blank">
-                <img class="image" alt="Under maintenance" src="/img/custom/logo-squared.svg" />
-              </a>
+              <!-- QUESTION: could we have internal page or even all internal pages here as well with PageParamsLink by having the footer underneath? -->
+              <!--   I tried this out, but only could get the nginx page displayed. I guees the there were nuxt errors, because the nuxt config file 'webapp/maintenance/source/nuxt.config.maintenance.js' would have to be refactored for that as well and may be the missing folder `components/_new/generic/` plays a role, see https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/4619 -->
+              <!-- <page-params-link :pageParams="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)">
+                <logo type="maintenance" />
+              </page-params-link> -->
+              <!-- BUT: not the logo and not even the a-tag is working at the moment -->
+              <!-- <a
+                :href="emails.ORGANIZATION_LINK"
+                :title="$t('login.moreInfo', metadata)"
+                target="_blank"
+              > -->
+              <img class="image" alt="Under maintenance" src="/img/custom/logo-squared.svg" />
+              <!-- </a> -->
             </ds-space>
           </ds-flex-item>
           <ds-flex-item :width="{ base: '100%', sm: 1, md: 1 }">
@@ -35,17 +45,20 @@
 
 <script>
 import emails from '~/constants/emails.js'
-import links from '~/constants/links.js'
+// import links from '~/constants/links.js'
 import metadata from '~/constants/metadata.js'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
+// import Logo from '~/components/Logo/Logo'
 
 export default {
   layout: 'blank',
   components: {
     LocaleSwitch,
+    // Logo,
   },
   data() {
-    return { links, metadata, supportEmail: emails.SUPPORT }
+    // return { links, metadata, supportEmail: emails.SUPPORT_EMAIL }
+    return { metadata, supportEmail: emails.SUPPORT_EMAIL }
   },
 }
 </script>

webapp/mixins/internalPageMixins.js

@@ -0,0 +1,26 @@
+import InternalPage from '~/components/_new/features/InternalPage/InternalPage.vue'
+
+export function internalPageMixins(pageParams) {
+  return {
+    layout: 'basic',
+    components: {
+      InternalPage,
+    },
+    data() {
+      return { pageParams }
+    },
+    head() {
+      return {
+        title: this.$t(this.pageParams.internalPage.headTitleIdent),
+      }
+    },
+    created() {
+      if (!this.pageParams.isInternalPage) {
+        // to avoid possible errors, because 'window' is only defined on browser side but not in NodeJS on client side. check for 'typeof window' is neccessary, because if it's not defined at all you can't check for 'window !== undefined' without the same error 'window is undefined'
+        if (typeof window !== 'undefined') {
+          window.location.href = this.pageParams.externalLink
+        }
+      }
+    },
+  }
+}

webapp/nuxt.config.js

@@ -45,6 +45,7 @@ export default {
       'imprint',
       'data-privacy',
       'faq',
+      'donate',
     ],
     // pages to keep alive
     keepAlivePages: ['index'],

webapp/pages/code-of-conduct.spec.js

@@ -5,6 +5,11 @@ import VueMeta from 'vue-meta'
 const localVue = global.localVue
 localVue.use(VueMeta, { keyName: 'head' })
 
+// avoid: 'Error: Not implemented: navigation (except hash changes)', see https://stackoverflow.com/questions/54090231/how-to-fix-error-not-implemented-navigation-except-hash-changes
+const assignMock = jest.fn()
+delete window.location
+window.location = { assign: assignMock }
+
 describe('code-of-conduct.vue', () => {
   let wrapper
   let mocks
@@ -28,7 +33,7 @@ describe('code-of-conduct.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('div')).toBe(true)
+      expect(wrapper.is('div')).toBeTruthy()
     })
 
     it('has correct <head> content', () => {

webapp/pages/code-of-conduct.vue

@@ -1,21 +1,12 @@
 <template>
-  <div>
-    <ds-space margin="small">
-      <ds-heading tag="h2">{{ $t('site.code-of-conduct') }}</ds-heading>
-    </ds-space>
-    <ds-container>
-      <div v-html="$t('html.codeOfConduct')" />
-    </ds-container>
-  </div>
+  <internal-page :pageParams="pageParams" />
 </template>
 
 <script>
+import links from '~/constants/links.js'
+import { internalPageMixins } from '~/mixins/internalPageMixins'
+
 export default {
-  layout: 'basic',
-  head() {
-    return {
-      title: this.$t('site.code-of-conduct'),
-    }
-  },
+  mixins: [internalPageMixins(links.CODE_OF_CONDUCT)],
 }
 </script>

webapp/pages/data-privacy.spec.js

@@ -5,6 +5,11 @@ import VueMeta from 'vue-meta'
 const localVue = global.localVue
 localVue.use(VueMeta, { keyName: 'head' })
 
+// avoid: 'Error: Not implemented: navigation (except hash changes)', see https://stackoverflow.com/questions/54090231/how-to-fix-error-not-implemented-navigation-except-hash-changes
+const assignMock = jest.fn()
+delete window.location
+window.location = { assign: assignMock }
+
 describe('data-privacy.vue', () => {
   let wrapper
   let mocks
@@ -28,7 +33,7 @@ describe('data-privacy.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('div')).toBe(true)
+      expect(wrapper.is('div')).toBeTruthy()
     })
 
     it('has correct <head> content', () => {

webapp/pages/data-privacy.vue

@@ -1,21 +1,12 @@
 <template>
-  <div>
-    <ds-space margin="small">
-      <ds-heading tag="h2">{{ $t('site.data-privacy') }}</ds-heading>
-    </ds-space>
-    <ds-container>
-      <div v-html="$t('html.dataPrivacy')" />
-    </ds-container>
-  </div>
+  <internal-page :pageParams="pageParams" />
 </template>
 
 <script>
+import links from '~/constants/links.js'
+import { internalPageMixins } from '~/mixins/internalPageMixins'
+
 export default {
-  layout: 'basic',
-  head() {
-    return {
-      title: this.$t('site.data-privacy'),
-    }
-  },
+  mixins: [internalPageMixins(links.DATA_PRIVACY)],
 }
 </script>

webapp/pages/donate.spec.js

@@ -0,0 +1,43 @@
+import { mount } from '@vue/test-utils'
+import Donate from './donate.vue'
+import VueMeta from 'vue-meta'
+
+const localVue = global.localVue
+localVue.use(VueMeta, { keyName: 'head' })
+
+// avoid: 'Error: Not implemented: navigation (except hash changes)', see https://stackoverflow.com/questions/54090231/how-to-fix-error-not-implemented-navigation-except-hash-changes
+const assignMock = jest.fn()
+delete window.location
+window.location = { assign: assignMock }
+
+describe('donate.vue', () => {
+  let wrapper
+  let mocks
+
+  beforeEach(() => {
+    mocks = {
+      $t: (t) => t,
+    }
+  })
+
+  describe('mount', () => {
+    const Wrapper = () => {
+      return mount(Donate, {
+        mocks,
+        localVue,
+      })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders', () => {
+      expect(wrapper.is('div')).toBeTruthy()
+    })
+
+    it('has correct <head> content', () => {
+      expect(wrapper.vm.$metaInfo.title).toBe('site.donate')
+    })
+  })
+})

webapp/pages/donate.vue

@@ -0,0 +1,12 @@
+<template>
+  <internal-page :pageParams="pageParams" />
+</template>
+
+<script>
+import links from '~/constants/links.js'
+import { internalPageMixins } from '~/mixins/internalPageMixins'
+
+export default {
+  mixins: [internalPageMixins(links.DONATE)],
+}
+</script>

webapp/pages/faq.spec.js

@@ -5,6 +5,11 @@ import VueMeta from 'vue-meta'
 const localVue = global.localVue
 localVue.use(VueMeta, { keyName: 'head' })
 
+// avoid: 'Error: Not implemented: navigation (except hash changes)', see https://stackoverflow.com/questions/54090231/how-to-fix-error-not-implemented-navigation-except-hash-changes
+const assignMock = jest.fn()
+delete window.location
+window.location = { assign: assignMock }
+
 describe('faq.vue', () => {
   let wrapper
   let mocks
@@ -28,7 +33,7 @@ describe('faq.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('div')).toBe(true)
+      expect(wrapper.is('div')).toBeTruthy()
     })
 
     it('has correct <head> content', () => {

webapp/pages/faq.vue

@@ -1,21 +1,12 @@
 <template>
-  <div>
-    <ds-space margin="small">
-      <ds-heading tag="h2">{{ $t('site.faq') }}</ds-heading>
-    </ds-space>
-    <ds-container>
-      <div v-html="$t('html.faq')" />
-    </ds-container>
-  </div>
+  <internal-page :pageParams="pageParams" />
 </template>
 
 <script>
+import links from '~/constants/links.js'
+import { internalPageMixins } from '~/mixins/internalPageMixins'
+
 export default {
-  layout: 'basic',
-  head() {
-    return {
-      title: this.$t('site.faq'),
-    }
-  },
+  mixins: [internalPageMixins(links.FAQ)],
 }
 </script>

webapp/pages/imprint.spec.js

@@ -5,6 +5,11 @@ import VueMeta from 'vue-meta'
 const localVue = global.localVue
 localVue.use(VueMeta, { keyName: 'head' })
 
+// avoid: 'Error: Not implemented: navigation (except hash changes)', see https://stackoverflow.com/questions/54090231/how-to-fix-error-not-implemented-navigation-except-hash-changes
+const assignMock = jest.fn()
+delete window.location
+window.location = { assign: assignMock }
+
 describe('imprint.vue', () => {
   let wrapper
   let mocks
@@ -28,7 +33,7 @@ describe('imprint.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('div')).toBe(true)
+      expect(wrapper.is('div')).toBeTruthy()
     })
 
     it('has correct <head> content', () => {

webapp/pages/imprint.vue

@@ -1,21 +1,12 @@
 <template>
-  <div>
-    <ds-space margin="small">
-      <ds-heading tag="h2">{{ $t('site.imprint') }}</ds-heading>
-    </ds-space>
-    <ds-container>
-      <div v-html="$t('html.imprint')" />
-    </ds-container>
-  </div>
+  <internal-page :pageParams="pageParams" />
 </template>
 
 <script>
+import links from '~/constants/links.js'
+import { internalPageMixins } from '~/mixins/internalPageMixins'
+
 export default {
-  layout: 'basic',
-  head() {
-    return {
-      title: this.$t('site.imprint'),
-    }
-  },
+  mixins: [internalPageMixins(links.IMPRINT)],
 }
 </script>

webapp/pages/index.vue

@@ -5,11 +5,11 @@
         <hashtags-filter :hashtag="hashtag" @clearSearch="clearSearch" />
       </ds-grid-item>
       <ds-grid-item :row-span="2" column-span="fullWidth" class="top-info-bar">
-        <!--<donation-info /> -->
+        <!-- <donation-info /> -->
         <div>
-          <a target="_blank" :href="links.DONATE">
-            <base-button filled>{{ $t('donations.donate-now') }}</base-button>
-          </a>
+          <base-button filled @click="redirectToPage(links.DONATE)">
+            {{ $t('donations.donate-now') }}
+          </base-button>
         </div>
         <div class="sorting-dropdown">
           <ds-select
@@ -172,6 +172,9 @@ export default {
       this.resetPostList()
       this.$apollo.queries.Post.refetch()
     },
+    redirectToPage(pageParams) {
+      pageParams.redirectToPage(this)
+    },
   },
   apollo: {
     Post: {

webapp/pages/organization.spec.js

@@ -5,6 +5,11 @@ import VueMeta from 'vue-meta'
 const localVue = global.localVue
 localVue.use(VueMeta, { keyName: 'head' })
 
+// avoid: 'Error: Not implemented: navigation (except hash changes)', see https://stackoverflow.com/questions/54090231/how-to-fix-error-not-implemented-navigation-except-hash-changes
+const assignMock = jest.fn()
+delete window.location
+window.location = { assign: assignMock }
+
 describe('organization.vue', () => {
   let wrapper
   let mocks
@@ -28,7 +33,7 @@ describe('organization.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('div')).toBe(true)
+      expect(wrapper.is('div')).toBeTruthy()
     })
 
     it('has correct <head> content', () => {

webapp/pages/organization.vue

@@ -1,21 +1,12 @@
 <template>
-  <div>
-    <ds-space margin="small">
-      <ds-heading tag="h2">{{ $t('site.made') }}</ds-heading>
-    </ds-space>
-    <ds-container>
-      <div v-html="$t('html.organization')" />
-    </ds-container>
-  </div>
+  <internal-page :pageParams="pageParams" />
 </template>
 
 <script>
+import links from '~/constants/links.js'
+import { internalPageMixins } from '~/mixins/internalPageMixins'
+
 export default {
-  layout: 'basic',
-  head() {
-    return {
-      title: this.$t('site.made'),
-    }
-  },
+  mixins: [internalPageMixins(links.ORGANIZATION)],
 }
 </script>

webapp/pages/password-reset.vue

@@ -2,9 +2,9 @@
   <ds-container width="small" class="password-reset">
     <base-card>
       <template #imageColumn>
-        <a :href="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)" target="_blank">
+        <page-params-link :pageParams="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)">
           <logo logoType="passwordReset" />
-        </a>
+        </page-params-link>
       </template>
       <nuxt-child />
       <template #topMenu>
@@ -19,11 +19,13 @@ import links from '~/constants/links.js'
 import metadata from '~/constants/metadata.js'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import Logo from '~/components/Logo/Logo'
+import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
 
 export default {
   components: {
     LocaleSwitch,
     Logo,
+    PageParamsLink,
   },
   layout: 'no-header',
   data() {

webapp/pages/post/_id/_slug/index.vue

@@ -80,7 +80,9 @@
           {{ $t('settings.blocked-users.explanation.commenting-disabled') }}
           <br />
           {{ $t('settings.blocked-users.explanation.commenting-explanation') }}
-          <a :href="links.FAQ" target="_blank">FAQ</a>
+          <page-params-link :pageParams="links.FAQ">
+            {{ $t('site.faq') }}
+          </page-params-link>
         </ds-placeholder>
       </ds-section>
     </base-card>
@@ -95,6 +97,7 @@ import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import HcShoutButton from '~/components/ShoutButton.vue'
 import CommentForm from '~/components/CommentForm/CommentForm'
 import CommentList from '~/components/CommentList/CommentList'
+import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
 import {
   postMenuModalsData,
   deletePostMutation,
@@ -111,13 +114,14 @@ export default {
     mode: 'out-in',
   },
   components: {
-    HcHashtag,
-    UserTeaser,
-    HcShoutButton,
     ContentMenu,
     CommentForm,
     CommentList,
     ContentViewer,
+    HcHashtag,
+    HcShoutButton,
+    PageParamsLink,
+    UserTeaser,
   },
   head() {
     return {

webapp/pages/settings/my-email-address/verify.vue

@@ -60,7 +60,7 @@ export default {
   },
   data() {
     return {
-      supportEmail: emails.SUPPORT,
+      supportEmail: emails.SUPPORT_EMAIL,
     }
   },
   async asyncData(context) {

webapp/pages/support.spec.js

@@ -5,6 +5,11 @@ import VueMeta from 'vue-meta'
 const localVue = global.localVue
 localVue.use(VueMeta, { keyName: 'head' })
 
+// avoid: 'Error: Not implemented: navigation (except hash changes)', see https://stackoverflow.com/questions/54090231/how-to-fix-error-not-implemented-navigation-except-hash-changes
+const assignMock = jest.fn()
+delete window.location
+window.location = { assign: assignMock }
+
 describe('support.vue', () => {
   let wrapper
   let mocks
@@ -28,7 +33,7 @@ describe('support.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('div')).toBe(true)
+      expect(wrapper.is('div')).toBeTruthy()
     })
 
     it('has correct <head> content', () => {

webapp/pages/support.vue

@@ -1,21 +1,12 @@
 <template>
-  <div>
-    <ds-space margin="small">
-      <ds-heading tag="h2">{{ $t('site.support') }}</ds-heading>
-    </ds-space>
-    <ds-container>
-      <div v-html="$t('html.support')" />
-    </ds-container>
-  </div>
+  <internal-page :pageParams="pageParams" />
 </template>
 
 <script>
+import links from '~/constants/links.js'
+import { internalPageMixins } from '~/mixins/internalPageMixins'
+
 export default {
-  layout: 'basic',
-  head() {
-    return {
-      title: this.$t('site.support'),
-    }
-  },
+  mixins: [internalPageMixins(links.SUPPORT)],
 }
 </script>

webapp/pages/terms-and-conditions.spec.js

@@ -5,6 +5,11 @@ import VueMeta from 'vue-meta'
 const localVue = global.localVue
 localVue.use(VueMeta, { keyName: 'head' })
 
+// avoid: 'Error: Not implemented: navigation (except hash changes)', see https://stackoverflow.com/questions/54090231/how-to-fix-error-not-implemented-navigation-except-hash-changes
+const assignMock = jest.fn()
+delete window.location
+window.location = { assign: assignMock }
+
 describe('terms-and-conditions.vue', () => {
   let wrapper
   let mocks
@@ -28,7 +33,7 @@ describe('terms-and-conditions.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('div')).toBe(true)
+      expect(wrapper.is('div')).toBeTruthy()
     })
 
     it('has correct <head> content', () => {

webapp/pages/terms-and-conditions.vue

@@ -1,21 +1,12 @@
 <template>
-  <div>
-    <ds-space margin="small">
-      <ds-heading tag="h2">{{ $t('site.termsAndConditions') }}</ds-heading>
-    </ds-space>
-    <ds-container>
-      <div v-html="$t('html.termsAndConditions')" />
-    </ds-container>
-  </div>
+  <internal-page :pageParams="pageParams" />
 </template>
 
 <script>
+import links from '~/constants/links.js'
+import { internalPageMixins } from '~/mixins/internalPageMixins'
+
 export default {
-  layout: 'basic',
-  head() {
-    return {
-      title: this.$t('site.termsAndConditions'),
-    }
-  },
+  mixins: [internalPageMixins(links.TERMS_AND_CONDITIONS)],
 }
 </script>