mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
Add ComponentSlider and RegistrationSlider, as well as story, starting
This commit is contained in:
Wolfgang Huß
parent
da041db83a
commit
1ffcb0f077
128
webapp/components/ComponentSlider/ComponentSlider.story.js
Normal file
128
webapp/components/ComponentSlider/ComponentSlider.story.js
Normal file
@ -0,0 +1,128 @@
|
||||
import { storiesOf } from '@storybook/vue'
|
||||
import { withA11y } from '@storybook/addon-a11y'
|
||||
import ComponentSlider from './ComponentSlider.vue'
|
||||
import helpers from '~/storybook/helpers'
|
||||
|
||||
helpers.init()
|
||||
|
||||
// export const searchResults = [
|
||||
// {
|
||||
// id: 'post-by-jenny',
|
||||
// __typename: 'Post',
|
||||
// slug: 'user-post-by-jenny',
|
||||
// title: 'User Post by Jenny',
|
||||
// value: 'User Post by Jenny',
|
||||
// shoutedCount: 0,
|
||||
// commentsCount: 4,
|
||||
// createdAt: '2019-11-13T03:03:16.155Z',
|
||||
// author: {
|
||||
// id: 'u3',
|
||||
// name: 'Jenny Rostock',
|
||||
// slug: 'jenny-rostock',
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// id: 'f48f00a0-c412-432f-8334-4276a4e15d1c',
|
||||
// __typename: 'Post',
|
||||
// slug: 'eum-quos-est-molestiae-enim-magni-consequuntur-sed-commodi-eos',
|
||||
// title: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
|
||||
// value: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
|
||||
// shoutedCount: 0,
|
||||
// commentsCount: 0,
|
||||
// createdAt: '2019-11-13T03:00:45.478Z',
|
||||
// author: {
|
||||
// id: 'u6',
|
||||
// name: 'Louie',
|
||||
// slug: 'louie',
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// id: 'p7',
|
||||
// __typename: 'Post',
|
||||
// slug: 'this-is-post-7',
|
||||
// title: 'This is post #7',
|
||||
// value: 'This is post #7',
|
||||
// shoutedCount: 1,
|
||||
// commentsCount: 1,
|
||||
// createdAt: '2019-11-13T03:00:23.098Z',
|
||||
// author: {
|
||||
// id: 'u6',
|
||||
// name: 'Louie',
|
||||
// slug: 'louie',
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// id: 'p12',
|
||||
// __typename: 'Post',
|
||||
// slug: 'this-is-post-12',
|
||||
// title: 'This is post #12',
|
||||
// value: 'This is post #12',
|
||||
// shoutedCount: 0,
|
||||
// commentsCount: 12,
|
||||
// createdAt: '2019-11-13T03:00:23.098Z',
|
||||
// author: {
|
||||
// id: 'u6',
|
||||
// name: 'Louie',
|
||||
// slug: 'louie',
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// id: 'u1',
|
||||
// __typename: 'User',
|
||||
// avatar: {
|
||||
// url:
|
||||
// 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
|
||||
// },
|
||||
// name: 'Peter Lustig',
|
||||
// slug: 'peter-lustig',
|
||||
// },
|
||||
// {
|
||||
// id: 'cdbca762-0632-4564-b646-415a0c42d8b8',
|
||||
// __typename: 'User',
|
||||
// avatar: {
|
||||
// url:
|
||||
// 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
|
||||
// },
|
||||
// name: 'Herbert Schultz',
|
||||
// slug: 'herbert-schultz',
|
||||
// },
|
||||
// {
|
||||
// id: 'u2',
|
||||
// __typename: 'User',
|
||||
// avatar: {
|
||||
// url:
|
||||
// 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
|
||||
// },
|
||||
// name: 'Bob der Baumeister',
|
||||
// slug: 'bob-der-baumeister',
|
||||
// },
|
||||
// {
|
||||
// id: '7b654f72-f4da-4315-8bed-39de0859754b',
|
||||
// __typename: 'User',
|
||||
// avatar: {
|
||||
// url:
|
||||
// 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
|
||||
// },
|
||||
// name: 'Tonya Mohr',
|
||||
// slug: 'tonya-mohr',
|
||||
// },
|
||||
// {
|
||||
// id: 'Hashtag',
|
||||
// __typename: 'Tag',
|
||||
// },
|
||||
// ]
|
||||
|
||||
storiesOf('ComponentSlider', module)
|
||||
.addDecorator(withA11y)
|
||||
.addDecorator(helpers.layout)
|
||||
.add('standard', () => ({
|
||||
components: { ComponentSlider },
|
||||
store: helpers.store,
|
||||
data: () => ({
|
||||
// searchResults,
|
||||
}),
|
||||
template: `
|
||||
<component-slider>
|
||||
</component-slider>
|
||||
`,
|
||||
}))
|
||||
163
webapp/components/ComponentSlider/ComponentSlider.vue
Normal file
163
webapp/components/ComponentSlider/ComponentSlider.vue
Normal file
@ -0,0 +1,163 @@
|
||||
<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>
|
||||
<base-button
|
||||
style="float: right"
|
||||
icon="check"
|
||||
type="submit"
|
||||
filled
|
||||
:loading="false"
|
||||
:disabled="false"
|
||||
>
|
||||
<!-- {{ $t('actions.save') }} -->
|
||||
Next
|
||||
</base-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ComponentSlider',
|
||||
components: {
|
||||
// LocaleSwitch,
|
||||
},
|
||||
// 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,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 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() {
|
||||
// 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>
|
||||
@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<div v-if="response === 'success'">
|
||||
<transition name="ds-transition-fade">
|
||||
<sweetalert-icon icon="success" />
|
||||
</transition>
|
||||
<ds-text align="center" bold color="success">
|
||||
{{ $t('components.registration.create-user-account.success') }}
|
||||
</ds-text>
|
||||
</div>
|
||||
<div v-else-if="response === 'error'">
|
||||
<transition name="ds-transition-fade">
|
||||
<sweetalert-icon icon="error" />
|
||||
</transition>
|
||||
<ds-text align="center" bold color="danger">
|
||||
{{ $t('components.registration.create-user-account.error') }}
|
||||
</ds-text>
|
||||
<ds-text align="center">
|
||||
{{ $t('components.registration.create-user-account.help') }}
|
||||
<a :href="'mailto:' + supportEmail">{{ supportEmail }}</a>
|
||||
</ds-text>
|
||||
<ds-space centered>
|
||||
<nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
|
||||
</ds-space>
|
||||
</div>
|
||||
<div v-else class="create-account-card">
|
||||
<ds-space margin-top="large">
|
||||
<ds-heading size="h3">
|
||||
{{ $t('components.registration.create-user-account.title') }}
|
||||
</ds-heading>
|
||||
</ds-space>
|
||||
|
||||
<ds-form class="create-user-account" v-model="formData" :schema="formSchema" @submit="submit">
|
||||
<template v-slot="{ errors }">
|
||||
<ds-input
|
||||
id="name"
|
||||
model="name"
|
||||
icon="user"
|
||||
:label="$t('settings.data.labelName')"
|
||||
:placeholder="$t('settings.data.namePlaceholder')"
|
||||
/>
|
||||
<ds-input
|
||||
id="about"
|
||||
model="about"
|
||||
type="textarea"
|
||||
rows="3"
|
||||
:label="$t('settings.data.labelBio')"
|
||||
:placeholder="$t('settings.data.labelBio')"
|
||||
/>
|
||||
<ds-input
|
||||
id="password"
|
||||
model="password"
|
||||
type="password"
|
||||
autocomplete="off"
|
||||
:label="$t('settings.security.change-password.label-new-password')"
|
||||
/>
|
||||
<ds-input
|
||||
id="passwordConfirmation"
|
||||
model="passwordConfirmation"
|
||||
type="password"
|
||||
autocomplete="off"
|
||||
:label="$t('settings.security.change-password.label-new-password-confirm')"
|
||||
/>
|
||||
<password-strength :password="formData.password" />
|
||||
|
||||
<ds-text>
|
||||
<input
|
||||
id="checkbox0"
|
||||
type="checkbox"
|
||||
v-model="termsAndConditionsConfirmed"
|
||||
:checked="termsAndConditionsConfirmed"
|
||||
/>
|
||||
<label for="checkbox0">
|
||||
{{ $t('termsAndConditions.termsAndConditionsConfirmed') }}
|
||||
<br />
|
||||
<nuxt-link to="/terms-and-conditions">{{ $t('site.termsAndConditions') }}</nuxt-link>
|
||||
</label>
|
||||
</ds-text>
|
||||
<ds-text>
|
||||
<input id="checkbox1" type="checkbox" v-model="dataPrivacy" :checked="dataPrivacy" />
|
||||
<label for="checkbox1">
|
||||
{{ $t('components.registration.signup.form.data-privacy') }}
|
||||
<br />
|
||||
<nuxt-link to="/data-privacy">
|
||||
{{ $t('site.data-privacy') }}
|
||||
</nuxt-link>
|
||||
</label>
|
||||
</ds-text>
|
||||
<ds-text>
|
||||
<input id="checkbox2" type="checkbox" v-model="minimumAge" :checked="minimumAge" />
|
||||
<label
|
||||
for="checkbox2"
|
||||
v-html="$t('components.registration.signup.form.minimum-age')"
|
||||
></label>
|
||||
</ds-text>
|
||||
<ds-text>
|
||||
<input id="checkbox3" type="checkbox" v-model="noCommercial" :checked="noCommercial" />
|
||||
<label
|
||||
for="checkbox3"
|
||||
v-html="$t('components.registration.signup.form.no-commercial')"
|
||||
></label>
|
||||
</ds-text>
|
||||
<ds-text>
|
||||
<input id="checkbox4" type="checkbox" v-model="noPolitical" :checked="noPolitical" />
|
||||
<label
|
||||
for="checkbox4"
|
||||
v-html="$t('components.registration.signup.form.no-political')"
|
||||
></label>
|
||||
</ds-text>
|
||||
<base-button
|
||||
style="float: right"
|
||||
icon="check"
|
||||
type="submit"
|
||||
filled
|
||||
:loading="$apollo.loading"
|
||||
:disabled="
|
||||
errors ||
|
||||
!termsAndConditionsConfirmed ||
|
||||
!dataPrivacy ||
|
||||
!minimumAge ||
|
||||
!noCommercial ||
|
||||
!noPolitical
|
||||
"
|
||||
>
|
||||
{{ $t('actions.save') }}
|
||||
</base-button>
|
||||
</template>
|
||||
</ds-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import links from '~/constants/links'
|
||||
import PasswordStrength from '../Password/Strength'
|
||||
import { SweetalertIcon } from 'vue-sweetalert-icons'
|
||||
import PasswordForm from '~/components/utils/PasswordFormHelper'
|
||||
import { VERSION } from '~/constants/terms-and-conditions-version.js'
|
||||
import { SignupVerificationMutation } from '~/graphql/Registration.js'
|
||||
import emails from '~/constants/emails'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PasswordStrength,
|
||||
SweetalertIcon,
|
||||
},
|
||||
data() {
|
||||
const passwordForm = PasswordForm({ translate: this.$t })
|
||||
return {
|
||||
links,
|
||||
supportEmail: emails.SUPPORT,
|
||||
formData: {
|
||||
name: '',
|
||||
about: '',
|
||||
...passwordForm.formData,
|
||||
},
|
||||
formSchema: {
|
||||
name: {
|
||||
type: 'string',
|
||||
required: true,
|
||||
min: 3,
|
||||
},
|
||||
about: {
|
||||
type: 'string',
|
||||
required: false,
|
||||
},
|
||||
...passwordForm.formSchema,
|
||||
},
|
||||
disabled: true,
|
||||
response: null,
|
||||
// TODO: Our styleguide does not support checkmarks.
|
||||
// Integrate termsAndConditionsConfirmed into `this.formData` once we
|
||||
// have checkmarks available.
|
||||
termsAndConditionsConfirmed: false,
|
||||
dataPrivacy: false,
|
||||
minimumAge: false,
|
||||
noCommercial: false,
|
||||
noPolitical: false,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
nonce: { type: String, required: true },
|
||||
email: { type: String, required: true },
|
||||
},
|
||||
methods: {
|
||||
async submit() {
|
||||
const { name, password, about } = this.formData
|
||||
const { email, nonce } = this
|
||||
const termsAndConditionsAgreedVersion = VERSION
|
||||
const locale = this.$i18n.locale()
|
||||
try {
|
||||
await this.$apollo.mutate({
|
||||
mutation: SignupVerificationMutation,
|
||||
variables: {
|
||||
name,
|
||||
password,
|
||||
about,
|
||||
email,
|
||||
nonce,
|
||||
termsAndConditionsAgreedVersion,
|
||||
locale,
|
||||
},
|
||||
})
|
||||
this.response = 'success'
|
||||
setTimeout(() => {
|
||||
this.$emit('userCreated', {
|
||||
email,
|
||||
password,
|
||||
})
|
||||
}, 3000)
|
||||
} catch (err) {
|
||||
this.response = 'error'
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.create-account-image {
|
||||
width: 50%;
|
||||
max-width: 200px;
|
||||
}
|
||||
</style>
|
||||
127
webapp/components/Registration/RegistrationSlider.story.js
Normal file
127
webapp/components/Registration/RegistrationSlider.story.js
Normal file
@ -0,0 +1,127 @@
|
||||
import { storiesOf } from '@storybook/vue'
|
||||
import { withA11y } from '@storybook/addon-a11y'
|
||||
import RegistrationSlider from './RegistrationSlider.vue'
|
||||
import helpers from '~/storybook/helpers'
|
||||
|
||||
helpers.init()
|
||||
|
||||
// export const searchResults = [
|
||||
// {
|
||||
// id: 'post-by-jenny',
|
||||
// __typename: 'Post',
|
||||
// slug: 'user-post-by-jenny',
|
||||
// title: 'User Post by Jenny',
|
||||
// value: 'User Post by Jenny',
|
||||
// shoutedCount: 0,
|
||||
// commentsCount: 4,
|
||||
// createdAt: '2019-11-13T03:03:16.155Z',
|
||||
// author: {
|
||||
// id: 'u3',
|
||||
// name: 'Jenny Rostock',
|
||||
// slug: 'jenny-rostock',
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// id: 'f48f00a0-c412-432f-8334-4276a4e15d1c',
|
||||
// __typename: 'Post',
|
||||
// slug: 'eum-quos-est-molestiae-enim-magni-consequuntur-sed-commodi-eos',
|
||||
// title: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
|
||||
// value: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
|
||||
// shoutedCount: 0,
|
||||
// commentsCount: 0,
|
||||
// createdAt: '2019-11-13T03:00:45.478Z',
|
||||
// author: {
|
||||
// id: 'u6',
|
||||
// name: 'Louie',
|
||||
// slug: 'louie',
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// id: 'p7',
|
||||
// __typename: 'Post',
|
||||
// slug: 'this-is-post-7',
|
||||
// title: 'This is post #7',
|
||||
// value: 'This is post #7',
|
||||
// shoutedCount: 1,
|
||||
// commentsCount: 1,
|
||||
// createdAt: '2019-11-13T03:00:23.098Z',
|
||||
// author: {
|
||||
// id: 'u6',
|
||||
// name: 'Louie',
|
||||
// slug: 'louie',
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// id: 'p12',
|
||||
// __typename: 'Post',
|
||||
// slug: 'this-is-post-12',
|
||||
// title: 'This is post #12',
|
||||
// value: 'This is post #12',
|
||||
// shoutedCount: 0,
|
||||
// commentsCount: 12,
|
||||
// createdAt: '2019-11-13T03:00:23.098Z',
|
||||
// author: {
|
||||
// id: 'u6',
|
||||
// name: 'Louie',
|
||||
// slug: 'louie',
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// id: 'u1',
|
||||
// __typename: 'User',
|
||||
// avatar: {
|
||||
// url:
|
||||
// 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
|
||||
// },
|
||||
// name: 'Peter Lustig',
|
||||
// slug: 'peter-lustig',
|
||||
// },
|
||||
// {
|
||||
// id: 'cdbca762-0632-4564-b646-415a0c42d8b8',
|
||||
// __typename: 'User',
|
||||
// avatar: {
|
||||
// url:
|
||||
// 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
|
||||
// },
|
||||
// name: 'Herbert Schultz',
|
||||
// slug: 'herbert-schultz',
|
||||
// },
|
||||
// {
|
||||
// id: 'u2',
|
||||
// __typename: 'User',
|
||||
// avatar: {
|
||||
// url:
|
||||
// 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
|
||||
// },
|
||||
// name: 'Bob der Baumeister',
|
||||
// slug: 'bob-der-baumeister',
|
||||
// },
|
||||
// {
|
||||
// id: '7b654f72-f4da-4315-8bed-39de0859754b',
|
||||
// __typename: 'User',
|
||||
// avatar: {
|
||||
// url:
|
||||
// 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
|
||||
// },
|
||||
// name: 'Tonya Mohr',
|
||||
// slug: 'tonya-mohr',
|
||||
// },
|
||||
// {
|
||||
// id: 'Hashtag',
|
||||
// __typename: 'Tag',
|
||||
// },
|
||||
// ]
|
||||
|
||||
storiesOf('RegistrationSlider', module)
|
||||
.addDecorator(withA11y)
|
||||
.addDecorator(helpers.layout)
|
||||
.add('standard', () => ({
|
||||
components: { RegistrationSlider },
|
||||
store: helpers.store,
|
||||
data: () => ({
|
||||
// searchResults,
|
||||
}),
|
||||
template: `
|
||||
<registration-slider />
|
||||
`,
|
||||
}))
|
||||
214
webapp/components/Registration/RegistrationSlider.vue
Normal file
214
webapp/components/Registration/RegistrationSlider.vue
Normal file
@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<section class="login-form">
|
||||
<base-card>
|
||||
<template #imageColumn>
|
||||
<a :href="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)" target="_blank">
|
||||
<img class="image" alt="Welcome" src="/img/custom/welcome.svg" />
|
||||
</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>
|
||||
<!-- <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>
|
||||
</base-card>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
|
||||
import ComponentSlider from '~/components/ComponentSlider/ComponentSlider'
|
||||
import RegistrationItemCreateUserAccount from './RegistrationItemCreateUserAccount'
|
||||
import links from '~/constants/links.js'
|
||||
import metadata from '~/constants/metadata.js'
|
||||
|
||||
export default {
|
||||
name: 'RegistrationSlider',
|
||||
components: {
|
||||
LocaleSwitch,
|
||||
ComponentSlider,
|
||||
RegistrationItemCreateUserAccount,
|
||||
},
|
||||
// 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,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 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() {
|
||||
// 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