mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
Implement ResistrationEnterInvite.vue, start
This commit is contained in:
Wolfgang Huß
parent
1ffcb0f077
commit
e062cbaa0c
@ -1,12 +1,18 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2 class="subTitle">{{ $t('login.login') + ' XXX' }}</h2>
|
||||
<!-- <slot /> -->
|
||||
<!-- <div v-for="(item, index) in $slots.default" :key="index" :slot="item"> -->
|
||||
<div v-for="(item, index) in $slots.default" :key="item.id">
|
||||
{{ index }}
|
||||
<slot v-bind:person="item" />
|
||||
<!-- <slot :slot="item" /> -->
|
||||
<div class="Slider">
|
||||
<!-- <h2 class="subTitle">{{ $t('login.login') + ' XXX' }}</h2> -->
|
||||
<div
|
||||
v-for="sliderName in sliders"
|
||||
:key="sliderName"
|
||||
:class="[
|
||||
'Slider__component',
|
||||
activeSliderName === sliderName && '--visible',
|
||||
activeSliderName !== sliderName && '--hidden',
|
||||
]"
|
||||
:data-test="sliderName + '-component'"
|
||||
@validation="validation(sliderName)"
|
||||
>
|
||||
<slot :name="sliderName" />
|
||||
</div>
|
||||
<base-button
|
||||
style="float: right"
|
||||
@ -14,9 +20,11 @@
|
||||
type="submit"
|
||||
filled
|
||||
:loading="false"
|
||||
:disabled="false"
|
||||
:disabled="disabled"
|
||||
@click="nextComponent"
|
||||
>
|
||||
<!-- {{ $t('actions.save') }} -->
|
||||
<!-- Wolle {{ $t('components.enter-nonce.form.next') }} -->
|
||||
Next
|
||||
</base-button>
|
||||
</div>
|
||||
@ -26,138 +34,54 @@
|
||||
export default {
|
||||
name: 'ComponentSlider',
|
||||
components: {
|
||||
// LocaleSwitch,
|
||||
// Wolle LocaleSwitch,
|
||||
},
|
||||
props: {
|
||||
sliders: { type: Array, required: true },
|
||||
},
|
||||
// props: {
|
||||
// id: { type: String },
|
||||
// loading: { type: Boolean, default: false },
|
||||
// options: { type: Array, default: () => [] },
|
||||
// },
|
||||
data() {
|
||||
return {
|
||||
// links,
|
||||
// metadata,
|
||||
// searchValue: '',
|
||||
// value: '',
|
||||
// unprocessedSearchInput: '',
|
||||
// searchProcess: null,
|
||||
// previousSearchTerm: '',
|
||||
// delay: 300,
|
||||
sliderIndex: 0,
|
||||
activeSliderName: this.sliders[0],
|
||||
disabled: true,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// emptyText() {
|
||||
// return this.isActive && !this.loading ? this.$t('search.failed') : this.$t('search.hint')
|
||||
// },
|
||||
// isActive() {
|
||||
// Wolle isActive() {
|
||||
// return !isEmpty(this.previousSearchTerm)
|
||||
// },
|
||||
},
|
||||
methods: {
|
||||
// isFirstOfType(option) {
|
||||
// return (
|
||||
// this.options.findIndex((o) => o === option) ===
|
||||
// this.options.findIndex((o) => o.__typename === option.__typename)
|
||||
// )
|
||||
// },
|
||||
// onFocus(event) {
|
||||
// clearTimeout(this.searchProcess)
|
||||
// },
|
||||
// handleInput(event) {
|
||||
// clearTimeout(this.searchProcess)
|
||||
// this.value = event.target ? event.target.value.replace(/\s+/g, ' ').trim() : ''
|
||||
// this.unprocessedSearchInput = this.value
|
||||
// if (isEmpty(this.value) || this.value.replace(/\s+/g, '').length < 3) {
|
||||
// return
|
||||
// }
|
||||
// this.searchProcess = setTimeout(() => {
|
||||
// this.previousSearchTerm = this.value
|
||||
// this.$emit('query', this.value)
|
||||
// }, this.delay)
|
||||
// },
|
||||
// /**
|
||||
// * TODO: on enter we should go to a dedicated search page!?
|
||||
// */
|
||||
// onEnter(event) {
|
||||
// clearTimeout(this.searchProcess)
|
||||
// if (!this.loading) {
|
||||
// this.previousSearchTerm = this.unprocessedSearchInput
|
||||
// this.$emit('query', this.unprocessedSearchInput)
|
||||
// }
|
||||
// },
|
||||
// onDelete(event) {
|
||||
// clearTimeout(this.searchProcess)
|
||||
// const value = event.target ? event.target.value.trim() : ''
|
||||
// if (isEmpty(value)) {
|
||||
// this.clear()
|
||||
// } else {
|
||||
// this.handleInput(event)
|
||||
// }
|
||||
// },
|
||||
// clear() {
|
||||
// this.unprocessedSearchInput = ''
|
||||
// this.previousSearchTerm = ''
|
||||
// this.searchValue = ''
|
||||
// this.$emit('clearSearch')
|
||||
// clearTimeout(this.searchProcess)
|
||||
// },
|
||||
// onBlur(event) {
|
||||
// this.searchValue = this.previousSearchTerm
|
||||
// clearTimeout(this.searchProcess)
|
||||
// },
|
||||
// onSelect(item) {
|
||||
// this.goToResource(item)
|
||||
// this.$nextTick(() => {
|
||||
// this.searchValue = this.previousSearchTerm
|
||||
// })
|
||||
// },
|
||||
// isPost(item) {
|
||||
// return item.__typename === 'Post'
|
||||
// },
|
||||
// isTag(item) {
|
||||
// return item.__typename === 'Tag'
|
||||
// },
|
||||
// goToResource(item) {
|
||||
// this.$nextTick(() => {
|
||||
// if (!this.isTag(item)) {
|
||||
// this.$router.push({
|
||||
// name: this.isPost(item) ? 'post-id-slug' : 'profile-id-slug',
|
||||
// params: { id: item.id, slug: item.slug },
|
||||
// })
|
||||
// } else {
|
||||
// this.$router.push('?hashtag=' + item.id)
|
||||
// }
|
||||
// })
|
||||
// },
|
||||
validation(sliderName) {
|
||||
console.log('validation !!!')
|
||||
disabled = false
|
||||
},
|
||||
nextComponent() {
|
||||
if (this.sliderIndex < this.sliders.length - 1) {
|
||||
this.sliderIndex++
|
||||
this.activeSliderName = this.sliders[this.sliderIndex]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// .searchable-input {
|
||||
// position: relative;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// width: 100%;
|
||||
|
||||
// .ds-form-item {
|
||||
// flex-basis: 100%;
|
||||
// margin-bottom: 0;
|
||||
// Wolle .pointer {
|
||||
// cursor: pointer;
|
||||
// }
|
||||
|
||||
// .ds-select-dropdown {
|
||||
// max-height: 70vh;
|
||||
// box-shadow: $box-shadow-x-large;
|
||||
.Slider {
|
||||
&__component {
|
||||
// Wolle &:hover {
|
||||
// border-bottom: 2px solid #c9c6ce;
|
||||
// }
|
||||
|
||||
// .option-with-heading {
|
||||
// margin-top: $space-x-small;
|
||||
// padding-top: $space-xx-small;
|
||||
// }
|
||||
|
||||
// .base-button {
|
||||
// position: absolute;
|
||||
// right: $space-xx-small;
|
||||
// }
|
||||
// Wolle &.--visible {
|
||||
// }
|
||||
&.--hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -138,6 +138,7 @@ import { SignupVerificationMutation } from '~/graphql/Registration.js'
|
||||
import emails from '~/constants/emails'
|
||||
|
||||
export default {
|
||||
name: 'RegistrationItemCreateUserAccount',
|
||||
components: {
|
||||
PasswordStrength,
|
||||
SweetalertIcon,
|
||||
|
||||
@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<ds-form
|
||||
class="enter-nonce"
|
||||
v-model="formData"
|
||||
:schema="formSchema"
|
||||
@submit="handleSubmitVerify"
|
||||
@input="handleInput"
|
||||
@input-valid="handleInputValid"
|
||||
>
|
||||
<ds-input
|
||||
:placeholder="$t('components.enter-nonce.form.nonce')"
|
||||
model="nonce"
|
||||
name="nonce"
|
||||
id="nonce"
|
||||
icon="question-circle"
|
||||
/>
|
||||
<ds-text>
|
||||
{{ $t('components.enter-nonce.form.description') }}
|
||||
</ds-text>
|
||||
<!-- Wolle <base-button :disabled="disabled" filled name="submit" type="submit">
|
||||
{{ $t('components.enter-nonce.form.next') }}
|
||||
</base-button> -->
|
||||
<slot></slot>
|
||||
</ds-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RegistrationItemEnterInvite',
|
||||
props: {
|
||||
email: { type: String, required: true },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
nonce: '',
|
||||
},
|
||||
formSchema: {
|
||||
nonce: {
|
||||
type: 'string',
|
||||
min: 6,
|
||||
max: 6,
|
||||
required: true,
|
||||
message: this.$t('components.enter-nonce.form.validations.length'),
|
||||
},
|
||||
},
|
||||
disabled: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async handleInput() {
|
||||
this.disabled = true
|
||||
},
|
||||
async handleInputValid() {
|
||||
console.log('handleInputValid !!!')
|
||||
// Wolle this.disabled = false
|
||||
const { nonce } = this.formData
|
||||
const email = this.email
|
||||
// Wolle this.$emit('nonceEntered', { email, nonce })
|
||||
this.$emit('validation', { email, nonce })
|
||||
},
|
||||
handleSubmitVerify() {
|
||||
// const { nonce } = this.formData
|
||||
// const email = this.email
|
||||
// Wolle this.$emit('nonceEntered', { email, nonce })
|
||||
// this.$emit('validation', { email, nonce })
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.enter-nonce {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: $space-large 0 $space-xxx-small 0;
|
||||
}
|
||||
</style>
|
||||
@ -7,57 +7,18 @@
|
||||
</a>
|
||||
</template>
|
||||
<h1 class="title">{{ $t('components.registration.signup.title', metadata) }}</h1>
|
||||
<component-slider>
|
||||
<registration-item-create-user-account />
|
||||
<!-- <registration-item-create-user-account /> -->
|
||||
<base-button
|
||||
style="float: right"
|
||||
icon="check"
|
||||
type="submit"
|
||||
filled
|
||||
:loading="false"
|
||||
:disabled="false"
|
||||
>
|
||||
Test!!!
|
||||
</base-button>
|
||||
<component-slider :sliders="sliders">
|
||||
<template #enter-nonce>
|
||||
<registration-item-enter-invite email="user@example.org">
|
||||
<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>
|
||||
<registration-item-create-user-account nonce="AAAAAA" email="user@example.org" />
|
||||
</template>
|
||||
</component-slider>
|
||||
<!-- <form :disabled="pending" @submit.prevent="onSubmit">
|
||||
<ds-input
|
||||
v-model="form.email"
|
||||
:disabled="pending"
|
||||
:placeholder="$t('login.email')"
|
||||
type="email"
|
||||
name="email"
|
||||
icon="envelope"
|
||||
/>
|
||||
<div class="password-wrapper">
|
||||
<ds-input
|
||||
v-model="form.password"
|
||||
:disabled="pending"
|
||||
:placeholder="$t('login.password')"
|
||||
icon="lock"
|
||||
name="password"
|
||||
class="password-field"
|
||||
ref="password"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
/>
|
||||
<span class="click-wrapper" @click="toggleShowPassword">
|
||||
<span class="icon-wrapper" :data-test="iconName">
|
||||
<base-icon class="toggle-icon" :name="iconName" />
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<nuxt-link to="/password-reset/request">
|
||||
{{ $t('login.forgotPassword') }}
|
||||
</nuxt-link>
|
||||
<base-button :loading="pending" filled name="submit" type="submit" icon="sign-in">
|
||||
{{ $t('login.login') }}
|
||||
</base-button>
|
||||
<p>
|
||||
{{ $t('login.no-account') }}
|
||||
<nuxt-link to="/registration/signup">{{ $t('login.register') }}</nuxt-link>
|
||||
</p>
|
||||
</form> -->
|
||||
<template #topMenu>
|
||||
<locale-switch offset="5" />
|
||||
</template>
|
||||
@ -68,6 +29,7 @@
|
||||
<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'
|
||||
@ -77,9 +39,10 @@ export default {
|
||||
components: {
|
||||
LocaleSwitch,
|
||||
ComponentSlider,
|
||||
RegistrationItemEnterInvite,
|
||||
RegistrationItemCreateUserAccount,
|
||||
},
|
||||
// props: {
|
||||
// Wolle props: {
|
||||
// id: { type: String },
|
||||
// loading: { type: Boolean, default: false },
|
||||
// options: { type: Array, default: () => [] },
|
||||
@ -88,127 +51,25 @@ export default {
|
||||
return {
|
||||
links,
|
||||
metadata,
|
||||
// searchValue: '',
|
||||
// value: '',
|
||||
// unprocessedSearchInput: '',
|
||||
// searchProcess: null,
|
||||
// previousSearchTerm: '',
|
||||
// delay: 300,
|
||||
sliders: ['enter-nonce', 'create-user-account'],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// emptyText() {
|
||||
// Wolle emptyText() {
|
||||
// return this.isActive && !this.loading ? this.$t('search.failed') : this.$t('search.hint')
|
||||
// },
|
||||
// isActive() {
|
||||
// return !isEmpty(this.previousSearchTerm)
|
||||
// },
|
||||
},
|
||||
methods: {
|
||||
// isFirstOfType(option) {
|
||||
// return (
|
||||
// this.options.findIndex((o) => o === option) ===
|
||||
// this.options.findIndex((o) => o.__typename === option.__typename)
|
||||
// )
|
||||
// },
|
||||
// onFocus(event) {
|
||||
// clearTimeout(this.searchProcess)
|
||||
// },
|
||||
// handleInput(event) {
|
||||
// clearTimeout(this.searchProcess)
|
||||
// this.value = event.target ? event.target.value.replace(/\s+/g, ' ').trim() : ''
|
||||
// this.unprocessedSearchInput = this.value
|
||||
// if (isEmpty(this.value) || this.value.replace(/\s+/g, '').length < 3) {
|
||||
// return
|
||||
// }
|
||||
// this.searchProcess = setTimeout(() => {
|
||||
// this.previousSearchTerm = this.value
|
||||
// this.$emit('query', this.value)
|
||||
// }, this.delay)
|
||||
// },
|
||||
// /**
|
||||
// * TODO: on enter we should go to a dedicated search page!?
|
||||
// */
|
||||
// onEnter(event) {
|
||||
// clearTimeout(this.searchProcess)
|
||||
// if (!this.loading) {
|
||||
// this.previousSearchTerm = this.unprocessedSearchInput
|
||||
// this.$emit('query', this.unprocessedSearchInput)
|
||||
// }
|
||||
// },
|
||||
// onDelete(event) {
|
||||
// clearTimeout(this.searchProcess)
|
||||
// const value = event.target ? event.target.value.trim() : ''
|
||||
// if (isEmpty(value)) {
|
||||
// this.clear()
|
||||
// } else {
|
||||
// this.handleInput(event)
|
||||
// }
|
||||
// },
|
||||
// clear() {
|
||||
// Wolle clear() {
|
||||
// this.unprocessedSearchInput = ''
|
||||
// this.previousSearchTerm = ''
|
||||
// this.searchValue = ''
|
||||
// this.$emit('clearSearch')
|
||||
// clearTimeout(this.searchProcess)
|
||||
// },
|
||||
// onBlur(event) {
|
||||
// this.searchValue = this.previousSearchTerm
|
||||
// clearTimeout(this.searchProcess)
|
||||
// },
|
||||
// onSelect(item) {
|
||||
// this.goToResource(item)
|
||||
// this.$nextTick(() => {
|
||||
// this.searchValue = this.previousSearchTerm
|
||||
// })
|
||||
// },
|
||||
// isPost(item) {
|
||||
// return item.__typename === 'Post'
|
||||
// },
|
||||
// isTag(item) {
|
||||
// return item.__typename === 'Tag'
|
||||
// },
|
||||
// goToResource(item) {
|
||||
// this.$nextTick(() => {
|
||||
// if (!this.isTag(item)) {
|
||||
// this.$router.push({
|
||||
// name: this.isPost(item) ? 'post-id-slug' : 'profile-id-slug',
|
||||
// params: { id: item.id, slug: item.slug },
|
||||
// })
|
||||
// } else {
|
||||
// this.$router.push('?hashtag=' + item.id)
|
||||
// }
|
||||
// })
|
||||
// },
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// .searchable-input {
|
||||
// position: relative;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// width: 100%;
|
||||
|
||||
// .ds-form-item {
|
||||
// flex-basis: 100%;
|
||||
// margin-bottom: 0;
|
||||
// }
|
||||
|
||||
// .ds-select-dropdown {
|
||||
// max-height: 70vh;
|
||||
// box-shadow: $box-shadow-x-large;
|
||||
// }
|
||||
|
||||
// .option-with-heading {
|
||||
// margin-top: $space-x-small;
|
||||
// padding-top: $space-xx-small;
|
||||
// }
|
||||
|
||||
// .base-button {
|
||||
// position: absolute;
|
||||
// right: $space-xx-small;
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user