mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-12 23:35:58 +00:00
b1c19d0c94
* - fixed nowrap for button - restyled bullets for slider - relocated back links - removed icons * - removed icon from RegistrationSlideEmail too * - added media query for padding * - fixed missing constants * - fixed padding in no-header layout * - fixed sticky footer in registration flow * - removed icons from inputs * - set fixed height for back link * - fixed invite code placeholder * - added auto submit to invite and email code forms - fixed layout password inputs - added layout to checkboxes (create) - removed unnecessary texts - moved backLink for password-reset - tidied up create layout * fixed margin * - fixed nonceLength * lint fixes * corrected path --------- Co-authored-by: Sebastian Stein <sebastian@codepassion.de> Co-authored-by: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
103 lines
2.3 KiB
Vue
103 lines
2.3 KiB
Vue
<template>
|
|
<ds-form
|
|
v-if="!submitted"
|
|
@input="handleInput"
|
|
@input-valid="handleInputValid"
|
|
v-model="formData"
|
|
:schema="formSchema"
|
|
@submit="handleSubmit"
|
|
>
|
|
<ds-space margin="small">
|
|
<ds-input
|
|
:placeholder="$t('login.email')"
|
|
type="email"
|
|
id="email"
|
|
model="email"
|
|
name="email"
|
|
icon="envelope"
|
|
/>
|
|
</ds-space>
|
|
<ds-space margin-botton="large">
|
|
<ds-text align="left">{{ $t('components.password-reset.request.form.description') }}</ds-text>
|
|
</ds-space>
|
|
<base-button
|
|
:disabled="disabled"
|
|
:loading="$apollo.loading"
|
|
filled
|
|
padding
|
|
name="submit"
|
|
type="submit"
|
|
>
|
|
{{ $t('components.password-reset.request.form.submit') }}
|
|
</base-button>
|
|
<slot></slot>
|
|
</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" align="left" />
|
|
</div>
|
|
</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.email
|
|
return this.$t('components.password-reset.request.form.submitted', { email })
|
|
},
|
|
},
|
|
methods: {
|
|
handleInput() {
|
|
this.disabled = true
|
|
},
|
|
handleInputValid() {
|
|
this.disabled = false
|
|
},
|
|
async handleSubmit() {
|
|
const mutation = gql`
|
|
mutation ($email: String!, $locale: String!) {
|
|
requestPasswordReset(email: $email, locale: $locale)
|
|
}
|
|
`
|
|
try {
|
|
const email = this.formData.email
|
|
await this.$apollo.mutate({ mutation, variables: { email, locale: this.$i18n.locale() } })
|
|
this.submitted = true
|
|
|
|
setTimeout(() => {
|
|
this.$emit('handleSubmitted', { email })
|
|
}, 3000)
|
|
} catch (err) {
|
|
this.$toast.error(err.message)
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|