Implement 'no-public-registration' slider

This commit is contained in:
Wolfgang Huß 2021-03-02 12:33:47 +01:00
parent e057bbe80e
commit 393a05c358
10 changed files with 96 additions and 29 deletions

View File

@ -9,7 +9,7 @@
<slot :name="sliderData.sliders[sliderIndex].name" />
<ds-flex>
<ds-flex-item :centered="true">
<ds-flex-item v-if="sliderData.sliders.length > 1" :centered="true">
<div
v-for="(slider, index) in sliderData.sliders"
:key="slider.name"

View File

@ -180,6 +180,7 @@ export default {
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the entire view has been rendered
this.formData.name = this.sliderData.collectedInputData.name
? this.sliderData.collectedInputData.name
: ''

View File

@ -115,6 +115,7 @@ export default {
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the entire view has been rendered
this.formData.email = this.sliderData.collectedInputData.email
? this.sliderData.collectedInputData.email
: ''

View File

@ -53,6 +53,7 @@ export default {
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the entire view has been rendered
this.formData.inviteCode = this.sliderData.collectedInputData.inviteCode
? this.sliderData.collectedInputData.inviteCode
: ''

View File

@ -0,0 +1,35 @@
<template>
<ds-space centered>
<hc-empty icon="events" :message="$t('components.registration.signup.unavailable')" />
<slot></slot>
</ds-space>
</template>
<script>
import HcEmpty from '~/components/Empty/Empty'
export default {
name: 'RegistrationSlideNoPublic',
components: {
HcEmpty,
},
props: {
sliderData: { type: Object, required: true },
},
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the entire view has been rendered
this.sliderData.setSliderValuesCallback(true, {
sliderSettings: { buttonSliderCallback: this.onNextClick },
})
})
},
methods: {
onNextClick() {
this.$router.history.push('/login')
return true
},
},
}
</script>

View File

@ -52,7 +52,7 @@ export default {
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the entire view has been rendered
// console.log('mounted !!! ')
this.formData.nonce = this.sliderData.collectedInputData.nonce
? this.sliderData.collectedInputData.nonce
: ''

View File

@ -158,3 +158,11 @@ storiesOf('RegistrationSlider', module)
<registration-slider registrationType="invite-mail" :overwriteSliderData="overwriteSliderData" />
`,
}))
.add('no-public-registration', () => ({
components: { RegistrationSlider },
store: helpers.store,
data: () => ({}),
template: `
<registration-slider registrationType="no-public-registration" />
`,
}))

View File

@ -14,23 +14,19 @@
</ds-heading>
</template>
<template v-if="['invite-code'].includes(registrationType)" #enter-invite>
<template #no-public-registration>
<registration-slide-no-public :sliderData="sliderData" />
</template>
<template #enter-invite>
<registration-slide-invite :sliderData="sliderData" />
</template>
<template
v-if="['invite-code', 'public-registration'].includes(registrationType)"
#enter-email
>
<!-- Wolle !!! may create same source with 'webapp/pages/registration/signup.vue' -->
<!-- <signup v-if="publicRegistration" :invitation="false" @submit="handleSubmitted"> -->
<template #enter-email>
<registration-slide-email :sliderData="sliderData" :invitation="false" />
</template>
<template
v-if="['invite-code', 'public-registration', 'invite-mail'].includes(registrationType)"
#enter-nonce
>
<template #enter-nonce>
<registration-slide-nonce :sliderData="sliderData" />
</template>
@ -38,7 +34,7 @@
<registration-slide-create :sliderData="sliderData" />
</template>
<template #footer>
<template v-if="registrationType !== 'no-public-registration'" #footer>
<ds-space margin-bottom="xxx-small" margin-top="small" centered>
<nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
</ds-space>
@ -61,6 +57,7 @@ import RegistrationSlideCreate from './RegistrationSlideCreate'
import RegistrationSlideEmail from '~/components/Registration/RegistrationSlideEmail'
import RegistrationSlideInvite from './RegistrationSlideInvite'
import RegistrationSlideNonce from './RegistrationSlideNonce'
import RegistrationSlideNoPublic from './RegistrationSlideNoPublic'
export default {
name: 'RegistrationSlider',
@ -71,14 +68,28 @@ export default {
RegistrationSlideEmail,
RegistrationSlideInvite,
RegistrationSlideNonce,
RegistrationSlideNoPublic,
},
props: {
registrationType: { type: String, required: true },
overwriteSliderData: { type: Object, default: () => {} },
},
data() {
const slidersPortfolio = [
{
const slidersPortfolio = {
noPublicRegistration: {
name: 'no-public-registration',
// title: this.$t('components.registration.create-user-account.title'),
title: 'No Public Registration', // Wolle
validated: false,
data: { request: null, response: null },
button: {
title: this.$t('site.back-to-login'), // Wolle
icon: 'arrow-right',
callback: this.buttonCallback,
sliderCallback: null, // optional set by slot
},
},
enterInvite: {
name: 'enter-invite',
// title: this.$t('components.registration.create-user-account.title'),
title: 'Invitation', // Wolle
@ -91,7 +102,7 @@ export default {
sliderCallback: null, // optional set by slot
},
},
{
enterEmail: {
name: 'enter-email',
title: 'E-Mail', // Wolle
validated: false,
@ -103,7 +114,7 @@ export default {
sliderCallback: null, // optional set by slot
},
},
{
enterNonce: {
name: 'enter-nonce',
title: 'E-Mail Confirmation', // Wolle
validated: false,
@ -115,7 +126,7 @@ export default {
sliderCallback: null, // optional set by slot
},
},
{
createUserAccount: {
name: 'create-user-account',
title: this.$t('components.registration.create-user-account.title'),
validated: false,
@ -128,22 +139,29 @@ export default {
sliderCallback: null, // optional set by slot
},
},
]
}
let sliders = []
switch (this.registrationType) {
case 'no-public-registration':
sliders = [slidersPortfolio.noPublicRegistration]
break
case 'invite-code':
sliders = [
slidersPortfolio[0],
slidersPortfolio[1],
slidersPortfolio[2],
slidersPortfolio[3],
slidersPortfolio.enterInvite,
slidersPortfolio.enterEmail,
slidersPortfolio.enterNonce,
slidersPortfolio.createUserAccount,
]
break
case 'public-registration':
sliders = [slidersPortfolio[1], slidersPortfolio[2], slidersPortfolio[3]]
sliders = [
slidersPortfolio.enterEmail,
slidersPortfolio.enterNonce,
slidersPortfolio.createUserAccount,
]
break
case 'invite-mail':
sliders = [slidersPortfolio[2], slidersPortfolio[3]]
sliders = [slidersPortfolio.enterNonce, slidersPortfolio.createUserAccount]
break
}

View File

@ -22,5 +22,5 @@ export default async ({ store, env, route, redirect }) => {
params.path = route.path
}
return redirect('/registration/signup', params)
return redirect('/registration/signup', params) // Wolle
}

View File

@ -43,7 +43,10 @@ export default {
},
}
},
asyncData({ app }) {
asyncData({ app, store, redirect }) {
if (store.getters['auth/isLoggedIn']) {
redirect('/')
}
return {
publicRegistration: app.$env.PUBLIC_REGISTRATION === 'true',
inviteRegistration: app.$env.INVITE_REGISTRATION === 'true',
@ -54,7 +57,7 @@ export default {
if (this.method && ['invite-code', 'invite-mail'].includes(this.method)) {
return this.method
}
return this.publicRegistration ? 'public-registration' : false
return this.publicRegistration ? 'public-registration' : 'no-public-registration'
},
},
}