mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
Add enter e-mail, start
This commit is contained in:
Wolfgang Huß
parent
8a8a3832f4
commit
e57533fcec
@ -5,29 +5,29 @@
|
||||
<ds-flex>
|
||||
<ds-flex-item>
|
||||
<div
|
||||
v-for="componentName in sliderData.sliders"
|
||||
:key="componentName"
|
||||
v-for="slider in sliderData.sliders"
|
||||
:key="slider.name"
|
||||
class="selection-button"
|
||||
:class="[
|
||||
'Sliders__component-selection',
|
||||
]"
|
||||
:class="['Sliders__component-selection']"
|
||||
>
|
||||
<base-button
|
||||
:class="[sliderIndexByName(slider.name) >= sliderIndex && '--disabled']"
|
||||
style="float: left"
|
||||
:icon="slider.validated && slider.confirmed && 'check'"
|
||||
:circle="true"
|
||||
size="small"
|
||||
type="submit"
|
||||
filled
|
||||
:loading="false"
|
||||
:disabled="sliderIndexByName(componentName) >= sliderIndex"
|
||||
@click="sliderData.sliderSelectorCallback(componentName)"
|
||||
:disabled="!(slider.confirmed || sliderIndexByName(slider.name) === sliderIndex)"
|
||||
@click="sliderData.sliderSelectorCallback(slider.name)"
|
||||
/>
|
||||
</div>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item>
|
||||
<base-button
|
||||
style="float: right"
|
||||
icon="check"
|
||||
:icon="(sliderIndex < sliderData.sliders.length - 1 && 'arrow-right') || (sliderIndex === sliderData.sliders.length - 1 && 'check')"
|
||||
type="submit"
|
||||
filled
|
||||
:loading="false"
|
||||
@ -54,7 +54,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
sliderIndexByName(name) {
|
||||
return this.sliderData.sliders.findIndex((sliderName) => sliderName === name)
|
||||
return this.sliderData.sliders.findIndex((slider) => slider.name === name)
|
||||
},
|
||||
},
|
||||
}
|
||||
@ -88,12 +88,12 @@ export default {
|
||||
// &.--active {
|
||||
// border-bottom: 2px solid #17b53f;
|
||||
// }
|
||||
// &.--disabled {
|
||||
// opacity: $opacity-disabled;
|
||||
// &:hover {
|
||||
// border-bottom: none;
|
||||
// }
|
||||
// }
|
||||
&.--disabled {
|
||||
opacity: $opacity-disabled;
|
||||
// &:hover {
|
||||
// border-bottom: none;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -17,9 +17,6 @@
|
||||
<ds-text>
|
||||
{{ $t('components.enter-invite.form.description') }}
|
||||
</ds-text>
|
||||
<!-- Wolle <base-button :disabled="disabled" filled name="submit" type="submit">
|
||||
{{ $t('components.enter-invite.form.next') }}
|
||||
</base-button> -->
|
||||
<slot></slot>
|
||||
</ds-form>
|
||||
</template>
|
||||
@ -29,12 +26,12 @@ export default {
|
||||
name: 'RegistrationItemEnterInvite',
|
||||
props: {
|
||||
sliderData: { type: Object, required: true },
|
||||
email: { type: String, required: true },
|
||||
inviteCode: { type: String, required: false },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
inviteCode: '',
|
||||
inviteCode: this.inviteCode ? this.inviteCode : '',
|
||||
},
|
||||
formSchema: {
|
||||
inviteCode: {
|
||||
@ -45,20 +42,17 @@ export default {
|
||||
message: this.$t('components.enter-invite.form.validations.length'),
|
||||
},
|
||||
},
|
||||
disabled: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async handleInput() {
|
||||
// Wolle console.log('handleInput !!!')
|
||||
// console.log('email: ', this.email)
|
||||
this.sliderData.validateCallback(false)
|
||||
},
|
||||
async handleInputValid() {
|
||||
// Wolle console.log('handleInputValid !!!')
|
||||
const { inviteCode } = this.formData
|
||||
const email = this.email
|
||||
this.sliderData.validateCallback(true, { email, inviteCode })
|
||||
this.sliderData.validateCallback(true, { /* email, */inviteCode })
|
||||
},
|
||||
handleSubmitVerify() {
|
||||
// Wolle const { nonce } = this.formData
|
||||
|
||||
@ -6,15 +6,31 @@
|
||||
<img class="image" alt="Welcome" src="/img/custom/welcome.svg" />
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<h1 class="title">{{ $t('components.registration.signup.title', metadata) }}</h1>
|
||||
|
||||
<component-slider :sliderData="sliderData">
|
||||
<template #enter-invite>
|
||||
<registration-item-enter-invite :sliderData="sliderData" :email="'user@example.org'">
|
||||
<registration-item-enter-invite :sliderData="sliderData" :inviteCode="sliderData.collectedComponentData.inviteCode ? sliderData.collectedComponentData.inviteCode : ''" :email="sliderData.collectedComponentData.email ? sliderData.collectedComponentData.email : ''">
|
||||
<ds-space margin-bottom="xxx-small" margin-top="large" centered>
|
||||
<nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
|
||||
</ds-space>
|
||||
</registration-item-enter-invite>
|
||||
</template>
|
||||
|
||||
<template #create-user-account>
|
||||
<!-- Wolle !!! may create same source with 'webapp/pages/registration/signup.vue' -->
|
||||
<signup v-if="publicRegistration" :invitation="false" @submit="handleSubmitted">
|
||||
<ds-space centered margin-top="large">
|
||||
<nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
|
||||
</ds-space>
|
||||
</signup>
|
||||
<ds-space v-else centered>
|
||||
<hc-empty icon="events" :message="$t('components.registration.signup.unavailable')" />
|
||||
<nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
|
||||
</ds-space>
|
||||
</template>
|
||||
|
||||
<template #create-user-account>
|
||||
<registration-item-create-user-account
|
||||
:sliderData="sliderData"
|
||||
@ -23,6 +39,7 @@
|
||||
/>
|
||||
</template>
|
||||
</component-slider>
|
||||
|
||||
<template #topMenu>
|
||||
<locale-switch offset="5" />
|
||||
</template>
|
||||
@ -31,20 +48,24 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
|
||||
import ComponentSlider from '~/components/ComponentSlider/ComponentSlider'
|
||||
import RegistrationItemEnterInvite from './RegistrationItemEnterInvite'
|
||||
import RegistrationItemCreateUserAccount from './RegistrationItemCreateUserAccount'
|
||||
import links from '~/constants/links.js'
|
||||
import metadata from '~/constants/metadata.js'
|
||||
import ComponentSlider from '~/components/ComponentSlider/ComponentSlider'
|
||||
import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
|
||||
import Signup from '~/components/Registration/Signup'
|
||||
import HcEmpty from '~/components/Empty/Empty'
|
||||
import RegistrationItemEnterInvite from './RegistrationItemEnterInvite'
|
||||
import RegistrationItemCreateUserAccount from './RegistrationItemCreateUserAccount'
|
||||
|
||||
export default {
|
||||
name: 'RegistrationSlider',
|
||||
components: {
|
||||
LocaleSwitch,
|
||||
ComponentSlider,
|
||||
HcEmpty,
|
||||
LocaleSwitch,
|
||||
RegistrationItemEnterInvite,
|
||||
RegistrationItemCreateUserAccount,
|
||||
Signup,
|
||||
},
|
||||
// Wolle props: {
|
||||
// id: { type: String },
|
||||
@ -56,8 +77,24 @@ export default {
|
||||
links,
|
||||
metadata,
|
||||
sliderData: {
|
||||
collectedComponentData: {},
|
||||
sliders: ['enter-invite', 'create-user-account'],
|
||||
collectedComponentData: {
|
||||
inviteCode: null,
|
||||
email: null,
|
||||
},
|
||||
sliders: [
|
||||
{
|
||||
name: 'enter-invite',
|
||||
active: true,
|
||||
validated: false,
|
||||
confirmed: false,
|
||||
},
|
||||
{
|
||||
name: 'create-user-account',
|
||||
active: false,
|
||||
validated: false,
|
||||
confirmed: false,
|
||||
},
|
||||
],
|
||||
activeSliderName: 'enter-invite',
|
||||
sliderSelectorCallback: this.sliderSelectorCallback,
|
||||
validateCallback: this.validateCallback,
|
||||
@ -69,6 +106,11 @@ export default {
|
||||
},
|
||||
}
|
||||
},
|
||||
asyncData({ app }) {
|
||||
return {
|
||||
publicRegistration: app.$env.PUBLIC_REGISTRATION === 'true',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
sliderIndex() {
|
||||
return this.sliderIndexByName(this.sliderData.activeSliderName)
|
||||
@ -76,9 +118,11 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
sliderIndexByName(name) {
|
||||
return this.sliderData.sliders.findIndex((sliderName) => sliderName === name)
|
||||
return this.sliderData.sliders.findIndex((slider) => slider.name === name)
|
||||
},
|
||||
validateCallback(is, data = null) {
|
||||
this.sliderData.sliders[this.sliderIndex].validated = is
|
||||
|
||||
if (is) {
|
||||
this.sliderData.collectedComponentData = {
|
||||
...this.sliderData.collectedComponentData,
|
||||
@ -88,16 +132,26 @@ export default {
|
||||
this.sliderData.button.disabled = !is
|
||||
},
|
||||
sliderSelectorCallback(sliderName) {
|
||||
if (this.sliderIndexByName(sliderName) < this.sliderIndex) {
|
||||
// if (this.sliderIndexByName(sliderName) < this.sliderIndex) {
|
||||
// this.sliderData.activeSliderName = sliderName
|
||||
// }
|
||||
// console.log('sliderName: ', sliderName)
|
||||
// console.log('this.sliderIndexByName(sliderName): ', this.sliderIndexByName(sliderName))
|
||||
// console.log('this.sliderData.sliders[this.sliderIndexByName(sliderName)].active: ', this.sliderData.sliders[this.sliderIndexByName(sliderName)].active)
|
||||
if (this.sliderData.sliders[this.sliderIndexByName(sliderName)].active) {
|
||||
this.sliderData.activeSliderName = sliderName
|
||||
}
|
||||
},
|
||||
buttonCallback() {
|
||||
this.sliderData.sliders[this.sliderIndex].confirmed = true
|
||||
// this.sliderData.sliders[this.sliderIndex].active = true
|
||||
|
||||
if (this.sliderIndex === this.sliderData.sliders.length - 1) {
|
||||
// console.log('submit data: ', this.sliderData.collectedComponentData)
|
||||
} else {
|
||||
if (this.sliderIndex < this.sliderData.sliders.length - 1) {
|
||||
this.sliderData.activeSliderName = this.sliderData.sliders[this.sliderIndex + 1]
|
||||
this.sliderData.activeSliderName = this.sliderData.sliders[this.sliderIndex + 1].name
|
||||
this.sliderData.sliders[this.sliderIndex].active = true
|
||||
this.sliderData.button.disabled = true
|
||||
}
|
||||
if (this.sliderIndex === this.sliderData.sliders.length - 1) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user