From a3d3656bf156a637524b7473e7cd385084f160a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 2 Aug 2021 16:17:35 +0200
Subject: [PATCH] Implement login-button

---
 .../LoginButton/LoginButton.spec.js           | 53 ++++++++++++++
 webapp/components/LoginButton/LoginButton.vue | 54 ++++++++++++++
 .../features/InternalPage/InternalPage.vue    |  1 -
 webapp/layouts/basic.vue                      | 70 ++++++++++++++++++-
 webapp/locales/html/de/organization.html      |  5 +-
 webapp/locales/html/en/organization.html      | 18 +++--
 webapp/pages/organization.vue                 |  3 +-
 7 files changed, 189 insertions(+), 15 deletions(-)
 create mode 100644 webapp/components/LoginButton/LoginButton.spec.js
 create mode 100644 webapp/components/LoginButton/LoginButton.vue

diff --git a/webapp/components/LoginButton/LoginButton.spec.js b/webapp/components/LoginButton/LoginButton.spec.js
new file mode 100644
index 000000000..f28045612
--- /dev/null
+++ b/webapp/components/LoginButton/LoginButton.spec.js
@@ -0,0 +1,53 @@
+import { config, mount } from '@vue/test-utils'
+import InviteButton from './InviteButton.vue'
+
+config.stubs['v-popover'] = '<span><slot /></span>'
+
+describe('InviteButton.vue', () => {
+  let wrapper
+  let mocks
+  let propsData
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn(),
+      navigator: {
+        clipboard: {
+          writeText: jest.fn(),
+        },
+      },
+    }
+    propsData = {}
+  })
+
+  describe('mount', () => {
+    const Wrapper = () => {
+      return mount(InviteButton, { mocks, propsData })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders', () => {
+      expect(wrapper.contains('.invite-button')).toBe(true)
+    })
+
+    it('open popup', () => {
+      wrapper.find('.base-button').trigger('click')
+      expect(wrapper.contains('.invite-button')).toBe(true)
+    })
+
+    it('invite codes not available', async () => {
+      wrapper.find('.base-button').trigger('click') // open popup
+      wrapper.find('.invite-button').trigger('click') // click copy button
+      expect(mocks.$t).toHaveBeenCalledWith('invite-codes.not-available')
+    })
+
+    it.skip('invite codes copied to clipboard', async () => {
+      wrapper.find('.base-button').trigger('click') // open popup
+      wrapper.find('.invite-button').trigger('click') // click copy button
+      expect(mocks.$t).toHaveBeenCalledWith('invite-codes.not-available')
+    })
+  })
+})
diff --git a/webapp/components/LoginButton/LoginButton.vue b/webapp/components/LoginButton/LoginButton.vue
new file mode 100644
index 000000000..39f0fa4ae
--- /dev/null
+++ b/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>
diff --git a/webapp/components/_new/features/InternalPage/InternalPage.vue b/webapp/components/_new/features/InternalPage/InternalPage.vue
index 0d071c3f1..389ecc01c 100644
--- a/webapp/components/_new/features/InternalPage/InternalPage.vue
+++ b/webapp/components/_new/features/InternalPage/InternalPage.vue
@@ -34,7 +34,6 @@ export default {
       title: this.$t(this.pageParams.internalPage.headTitleIdent),
     }
   },
-  // layout: 'basic',
   // components: {
   //   Logo,
   // },
diff --git a/webapp/layouts/basic.vue b/webapp/layouts/basic.vue
index 01872868e..a14ae4f3c 100644
--- a/webapp/layouts/basic.vue
+++ b/webapp/layouts/basic.vue
@@ -10,7 +10,17 @@
             </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 +36,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 +63,51 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+// Wolle .topbar-locale-switch {
+//   display: flex;
+//   margin-right: $space-xx-small;
+//   align-self: center;
+//   display: inline-flex;
+// }
+// .main-container {
+//   padding-top: 6rem;
+//   padding-bottom: 5rem;
+// }
+
+// .main-navigation-flex {
+//   align-items: center;
+// }
+
+// .main-navigation {
+//   a {
+//     color: $text-color-soft;
+//   }
+// }
+.main-navigation-right {
+  display: flex;
+  justify-content: flex-end;
+}
+.main-navigation-right .desktop-view {
+  float: right;
+}
+// Wolle .ds-flex-item.mobile-hamburger-menu {
+//   margin-left: auto;
+//   text-align: right;
+// }
+// @media only screen and (min-width: 730px) {
+//   .mobile-hamburger-menu {
+//     display: none;
+//   }
+// }
+// @media only screen and (max-width: 730px) {
+//   #nav-search-box,
+//   .main-navigation-right {
+//     margin: 10px 0px;
+//   }
+//   .hide-mobile-menu {
+//     display: none;
+//   }
+// }
+</style>
diff --git a/webapp/locales/html/de/organization.html b/webapp/locales/html/de/organization.html
index c1eec4273..2ffdd90b5 100644
--- a/webapp/locales/html/de/organization.html
+++ b/webapp/locales/html/de/organization.html
@@ -24,7 +24,7 @@
 <br>
 <h3 class="h3-headline">
   Sende-Wochenplan
-</h4>
+</h3>
 <iframe class="weekly-plan" height="802px" width="550px" scrolling="yes" frameborder="0" src=https://senderfm.airtime.pro/embed/weekly-program></iframe>
 <br>
 <br>
@@ -83,7 +83,4 @@ https://senderfm.out.airtime.pro/senderfm_a -->
     margin-bottom: 0px;
     margin-left: -20px;
   }
-  .schedule.current, .schedule_content {
-    max-height: 900px;
-  }
 </style>
diff --git a/webapp/locales/html/en/organization.html b/webapp/locales/html/en/organization.html
index 19e9ebf9a..7a3316eb2 100644
--- a/webapp/locales/html/en/organization.html
+++ b/webapp/locales/html/en/organization.html
@@ -15,17 +15,17 @@
   </a><br>
 </p>
 <br> -->
-<h3 class="h3-headline">
+<h1 class="h1-headline">
   Our Radio Stream
-</h3>
+</h1>
 <br>
 <!-- <iframe id="embed_player" frameborder="0" width="280" height="216" src="https://senderfm.airtime.pro/embed/player?stream=s1&skin=1"></iframe> -->
 <iframe class="player" id="embed_player" frameborder="0" width="350" height="396" src="https://senderfm.airtime.pro/embed/player?stream=s1&skin=2"></iframe>
 <br>
-<h4 class="h4-headline">
+<h3 class="h3-headline">
   Radio Weekly Plan
-</h4>
-<iframe class="weekly-plan" height="400px" width="550px" scrolling="yes" frameborder="0" src=https://senderfm.airtime.pro/embed/weekly-program></iframe>
+</h3>
+<iframe class="weekly-plan" height="802px" width="550px" scrolling="yes" frameborder="0" src=https://senderfm.airtime.pro/embed/weekly-program></iframe>
 <br>
 <br>
 
@@ -38,6 +38,12 @@ https://senderfm.out.airtime.pro/senderfm_a -->
     margin-bottom: 48px;
   }
 
+  .h1-headline {
+    font-size: 48px;
+    margin-top: 12px;
+    margin-bottom: 8px;
+  }
+
   .h3-headline-big {
     font-size: 64px;
     margin-top: 12px;
@@ -45,7 +51,7 @@ https://senderfm.out.airtime.pro/senderfm_a -->
   }
 
   .h3-headline {
-    font-size: 24px;
+    font-size: 32px;
     margin-top: 12px;
     margin-bottom: 8px;
   }
diff --git a/webapp/pages/organization.vue b/webapp/pages/organization.vue
index 6478caca3..0447fff4f 100644
--- a/webapp/pages/organization.vue
+++ b/webapp/pages/organization.vue
@@ -17,11 +17,10 @@ import links from '~/constants/links.js'
 import InternalPage from '~/components/_new/features/InternalPage/InternalPage.vue'
 
 export default {
+  layout: 'basic',
   components: {
     InternalPage,
   },
-  // Wolle 
-  layout: 'basic',
   data() {
     // Wolle console.log(links.ORGANIZATION)
     return { links }