mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
Implement login-button
This commit is contained in:
Wolfgang Huß
parent
df1e622094
commit
a3d3656bf1
53
webapp/components/LoginButton/LoginButton.spec.js
Normal file
53
webapp/components/LoginButton/LoginButton.spec.js
Normal file
@ -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')
|
||||
})
|
||||
})
|
||||
})
|
||||
54
webapp/components/LoginButton/LoginButton.vue
Normal file
54
webapp/components/LoginButton/LoginButton.vue
Normal file
@ -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>
|
||||
@ -34,7 +34,6 @@ export default {
|
||||
title: this.$t(this.pageParams.internalPage.headTitleIdent),
|
||||
}
|
||||
},
|
||||
// layout: 'basic',
|
||||
// components: {
|
||||
// Logo,
|
||||
// },
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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 }
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user