ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Split PasswordResetPage into subcomponents

Browse Source
This commit is contained in:
Robert Schäfer 2019-06-17 14:53:28 +02:00
parent de9ed55738
commit 0e3eb43276
3 changed files with 109 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
webapp/pages/password-reset.spec.js → webapp/components/PasswordReset/PasswordReset.spec.js
View File

@ -1,5 +1,5 @@
import { mount, createLocalVue } from '@vue/test-utils'
import PasswordResetPage from './password-reset.vue'
import PasswordReset from './PasswordReset'
import Styleguide from '@human-connection/styleguide'
const localVue = createLocalVue()
@ -27,7 +27,7 @@ describe('ProfileSlug', () => {
describe('mount', () => {
Wrapper = () => {
return mount(PasswordResetPage, {
return mount(PasswordReset, {
mocks,
localVue,
})

103
webapp/components/PasswordReset/PasswordReset.vue Normal file
View File

@ -0,0 +1,103 @@
<template>
<ds-card class="password-reset-card">
<ds-space margin="large">
<ds-form
v-if="!submitted"
@input="handleInput"
@input-valid="handleInputValid"
v-model="formData"
:schema="formSchema"
@submit="handleSubmit"
>
<ds-input
:placeholder="$t('login.email')"
type="email"
id="email"
model="email"
name="email"
icon="envelope"
/>
<ds-space margin-botton="large">
<ds-text>
{{ $t('password-reset.form.description') }}
</ds-text>
</ds-space>
<ds-button
:disabled="disabled"
:loading="$apollo.loading"
primary
fullwidth
name="submit"
type="submit"
icon="envelope"
>
{{ $t('password-reset.form.submit') }}
</ds-button>
</ds-form>
<div v-else>
<transition name="ds-transition-fade">
<ds-flex centered>
<sweetalert-icon icon="success" />
</ds-flex>
</transition>
<ds-text v-html="submitMessage" />
</div>
</ds-space>
</ds-card>
</template>
<script>
import gql from 'graphql-tag'
import { SweetalertIcon } from 'vue-sweetalert-icons'
export default {
components: {
SweetalertIcon,
},
data() {
return {
formData: {
email: '',
},
formSchema: {
email: {
type: 'email',
required: true,
message: this.$t('common.validations.email'),
},
},
disabled: true,
submitted: false,
}
},
computed: {
submitMessage() {
const { email } = this.formData
return this.$t('password-reset.form.submitted', { email })
},
},
methods: {
handleInput() {
this.disabled = true
},
handleInputValid() {
this.disabled = false
},
async handleSubmit() {
const mutation = gql`
mutation($email: String!) {
requestPasswordReset(email: $email)
}
`
const variables = this.formData
try {
await this.$apollo.mutate({ mutation, variables })
this.submitted = true
} catch (err) {
this.$toast.error(err.message)
}
},
},
}
</script>

96
webapp/pages/password-reset.vue
View File

@ -3,51 +3,7 @@
<ds-flex>
<ds-flex-item :width="{ base: '100%' }" centered>
<ds-space style="text-align: center;" margin-top="small" margin-bottom="xxx-small" centered>
<ds-card class="password-reset-card">
<ds-space margin="large">
<ds-form
v-if="!submitted"
@input="handleInput"
@input-valid="handleInputValid"
v-model="formData"
:schema="formSchema"
@submit="handleSubmit"
>
<ds-input
:placeholder="$t('login.email')"
type="email"
id="email"
model="email"
name="email"
icon="envelope"
/>
<ds-space margin-botton="large">
<ds-text>
{{ $t('password-reset.form.description') }}
</ds-text>
</ds-space>
<ds-button
:disabled="disabled"
:loading="$apollo.loading"
primary
fullwidth
name="submit"
type="submit"
icon="envelope"
>
{{ $t('password-reset.form.submit') }}
</ds-button>
</ds-form>
<div v-else>
<transition name="ds-transition-fade">
<ds-flex centered>
<sweetalert-icon icon="success" />
</ds-flex>
</transition>
<ds-text v-html="submitMessage" />
</div>
</ds-space>
</ds-card>
<password-reset />
</ds-space>
</ds-flex-item>
</ds-flex>
@ -55,58 +11,12 @@
</template>
<script>
import gql from 'graphql-tag'
import { SweetalertIcon } from 'vue-sweetalert-icons'
import PasswordReset from '~/components/PasswordReset/PasswordReset'
export default {
layout: 'default',
components: {
SweetalertIcon,
},
data() {
return {
formData: {
email: '',
},
formSchema: {
email: {
type: 'email',
required: true,
message: this.$t('common.validations.email'),
},
},
disabled: true,
submitted: false,
PasswordReset,
}
},
computed: {
submitMessage() {
const { email } = this.formData
return this.$t('password-reset.form.submitted', { email })
},
},
methods: {
handleInput() {
this.disabled = true
},
handleInputValid() {
this.disabled = false
},
async handleSubmit() {
const mutation = gql`
mutation($email: String!) {
requestPasswordReset(email: $email)
}
`
const variables = this.formData
try {
await this.$apollo.mutate({ mutation, variables })
this.submitted = true
} catch (err) {
this.$toast.error(err.message)
}
},
},
}
</script>