mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
27163b8d79
Updating the package to `v4.0.0` still gives me this warning: ``` WARN Compiled with 1 warnings WARN in ./components/PasswordReset/ChangePassword.vue?vue&type=script&lang=js& "export 'SweetalertIcon' was not found in 'vue-sweetalert-icons' ``` According to this thread https://github.com/JorgenVatle/vue-sweetalert-icons/issues/3 I copy+pasted the example configuration: https://github.com/JorgenVatle/vue-sweetalert-icons-preview/blob/master/nuxt.config.js https://github.com/JorgenVatle/vue-sweetalert-icons-preview/blob/master/plugins/vue-sweetalert-icons.js And now the compile warnings are gone. I'm going to ask the maintainer if the local import is not possible with `v4.0.0` anymore.
104 lines
2.3 KiB
Vue
104 lines
2.3 KiB
Vue
<template>
|
|
<ds-card class="password-reset">
|
|
<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="info" />
|
|
</ds-flex>
|
|
</transition>
|
|
<ds-text v-html="submitMessage" />
|
|
</div>
|
|
</ds-space>
|
|
</ds-card>
|
|
</template>
|
|
|
|
<script>
|
|
import gql from 'graphql-tag'
|
|
|
|
export default {
|
|
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 { email } = this.formData
|
|
|
|
try {
|
|
await this.$apollo.mutate({ mutation, variables: { email } })
|
|
this.submitted = true
|
|
|
|
setTimeout(() => {
|
|
this.$emit('handleSubmitted', { email })
|
|
}, 3000)
|
|
} catch (err) {
|
|
this.$toast.error(err.message)
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|