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

Disable the form button with a slot scope

Browse Source
This commit is contained in:
Robert Schäfer 2019-07-08 18:13:24 +02:00
parent 813a6b5c50
commit 90aa1822b5
3 changed files with 80 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
webapp/components/Password/Change.vue
View File

@ -3,10 +3,8 @@
v-model="formData" v-model="formData"
:schema="formSchema" :schema="formSchema"
@submit="handleSubmit" @submit="handleSubmit"
@input="handleInput"
@input-valid="handleInputValid"
> >
<template> <template slot-scope="{ errors }">
<ds-input <ds-input
id="oldPassword" id="oldPassword"
model="oldPassword" model="oldPassword"
@ -30,7 +28,7 @@
/> />
<password-strength :password="formData.newPassword" /> <password-strength :password="formData.newPassword" />
<ds-space margin-top="base"> <ds-space margin-top="base">
<ds-button :loading="loading" :disabled="disabled" primary> <ds-button :loading="loading" :disabled="errors" primary>
{{ $t('settings.security.change-password.button') }} {{ $t('settings.security.change-password.button') }}
</ds-button> </ds-button>
</ds-space> </ds-space>
@ -81,12 +79,6 @@ export default {
} }
}, },
methods: { methods: {
async handleInput(data) {
this.disabled = true
},
async handleInputValid(data) {
this.disabled = false
},
async handleSubmit(data) { async handleSubmit(data) {
this.loading = true this.loading = true
const mutation = gql` const mutation = gql`

62
webapp/components/PasswordReset/ChangePassword.vue
View File

@ -1,16 +1,14 @@
<template> <template>
<ds-card class="verify-code"> <ds-card class="verify-code">
<ds-space margin="large"> <ds-space margin="large">
<template> <ds-form
<ds-form v-if="!changePasswordResult"
v-if="!changePasswordResult" v-model="formData"
v-model="formData" :schema="formSchema"
:schema="formSchema" @submit="handleSubmitPassword"
@submit="handleSubmitPassword" class="change-password"
@input="handleInput" >
@input-valid="handleInputValid" <template slot-scope="{ errors }">
class="change-password"
>
<ds-input <ds-input
id="newPassword" id="newPassword"
model="newPassword" model="newPassword"
@ -27,28 +25,28 @@
/> />
<password-strength :password="formData.newPassword" /> <password-strength :password="formData.newPassword" />
<ds-space margin-top="base"> <ds-space margin-top="base">
<ds-button :loading="$apollo.loading" :disabled="disabled" primary> <ds-button :loading="$apollo.loading" :disabled="errors" primary>
{{ $t('settings.security.change-password.button') }} {{ $t('settings.security.change-password.button') }}
</ds-button> </ds-button>
</ds-space> </ds-space>
</ds-form> </template>
<ds-text v-else> </ds-form>
<template v-if="changePasswordResult === 'success'"> <ds-text v-else>
<sweetalert-icon icon="success" /> <template v-if="changePasswordResult === 'success'">
<ds-text> <sweetalert-icon icon="success" />
{{ $t(`verify-code.form.change-password.success`) }} <ds-text>
</ds-text> {{ $t(`verify-code.form.change-password.success`) }}
</template> </ds-text>
<template v-else> </template>
<sweetalert-icon icon="error" /> <template v-else>
<ds-text align="left"> <sweetalert-icon icon="error" />
{{ $t(`verify-code.form.change-password.error`) }} <ds-text align="left">
{{ $t('verify-code.form.change-password.help') }} {{ $t(`verify-code.form.change-password.error`) }}
</ds-text> {{ $t('verify-code.form.change-password.help') }}
<a href="mailto:support@human-connection.org">support@human-connection.org</a> </ds-text>
</template> <a href="mailto:support@human-connection.org">support@human-connection.org</a>
</ds-text> </template>
</template> </ds-text>
</ds-space> </ds-space>
</ds-card> </ds-card>
</template> </template>
@ -95,12 +93,6 @@ export default {
} }
}, },
methods: { methods: {
async handleInput() {
this.disabled = true
},
async handleInputValid() {
this.disabled = false
},
async handleSubmitPassword() { async handleSubmitPassword() {
const mutation = gql` const mutation = gql`
mutation($code: String!, $email: String!, $newPassword: String!) { mutation($code: String!, $email: String!, $newPassword: String!) {

108
webapp/components/Registration/CreateUserAccount.vue
View File

@ -10,61 +10,61 @@
<ds-form <ds-form
v-else v-else
class="create-user-account" class="create-user-account"
@input="handleInput"
@input-valid="handleInputValid"
v-model="formData" v-model="formData"
:schema="formSchema" :schema="formSchema"
@submit="submit" @submit="submit"
> >
<ds-card :header="$t('registration.create-user-account.title')"> <template slot-scope="{ errors }">
<ds-input <ds-card :header="$t('registration.create-user-account.title')">
id="name" <ds-input
model="name" id="name"
icon="user" model="name"
:label="$t('settings.data.labelName')" icon="user"
:placeholder="$t('settings.data.namePlaceholder')" :label="$t('settings.data.labelName')"
/> :placeholder="$t('settings.data.namePlaceholder')"
<ds-input />
id="bio" <ds-input
model="about" id="bio"
type="textarea" model="about"
rows="3" type="textarea"
:label="$t('settings.data.labelBio')" rows="3"
:placeholder="$t('settings.data.labelBio')" :label="$t('settings.data.labelBio')"
/> :placeholder="$t('settings.data.labelBio')"
<ds-input />
id="password" <ds-input
model="password" id="password"
type="password" model="password"
autocomplete="off" type="password"
:label="$t('settings.security.change-password.label-new-password')" autocomplete="off"
/> :label="$t('settings.security.change-password.label-new-password')"
<ds-input />
id="confirmPassword" <ds-input
model="confirmPassword" id="confirmPassword"
type="password" model="confirmPassword"
autocomplete="off" type="password"
:label="$t('settings.security.change-password.label-new-password-confirm')" autocomplete="off"
/> :label="$t('settings.security.change-password.label-new-password-confirm')"
<password-strength :password="formData.password" /> />
<template slot="footer"> <password-strength :password="formData.password" />
<ds-space class="errors" v-if="errors"> <template slot="footer">
<ds-text align="center" bold color="danger"> <ds-space class="errors" v-if="errors">
{{ errors.message }} <ds-text align="center" bold color="danger">
</ds-text> {{ errors.message }}
</ds-space> </ds-text>
<ds-button </ds-space>
style="float: right;" <ds-button
icon="check" style="float: right;"
type="submit" icon="check"
:loading="$apollo.loading" type="submit"
:disabled="disabled" :loading="$apollo.loading"
primary :disabled="errors"
> primary
{{ $t('actions.save') }} >
</ds-button> {{ $t('actions.save') }}
</template> </ds-button>
</ds-card> </template>
</ds-card>
</template>
</ds-form> </ds-form>
</template> </template>
@ -131,12 +131,6 @@ export default {
email: { type: String, required: true }, email: { type: String, required: true },
}, },
methods: { methods: {
async handleInput() {
this.disabled = true
},
async handleInputValid() {
this.disabled = false
},
async submit() { async submit() {
const { name, password, about } = this.formData const { name, password, about } = this.formData
const { email, nonce } = this const { email, nonce } = this