add submit disable logic over validation

This commit is contained in:
ogerly 2023-03-03 10:57:54 +01:00
parent d8cabca2b4
commit 11161441ee
2 changed files with 35 additions and 14 deletions

View File

@ -2,7 +2,7 @@
<div class="login-form"> <div class="login-form">
<b-container v-if="enterData"> <b-container v-if="enterData">
<div class="pb-5" align="center">{{ $t('gdd_per_link.isFree') }}</div> <div class="pb-5" align="center">{{ $t('gdd_per_link.isFree') }}</div>
<validation-observer ref="observer" v-slot="{ handleSubmit }"> <validation-observer ref="observer" v-slot="{ handleSubmit, valid }">
<b-form @submit.stop.prevent="handleSubmit(onSubmit)"> <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
<b-row> <b-row>
<b-col sm="12" md="12" lg="6"> <b-col sm="12" md="12" lg="6">
@ -31,7 +31,14 @@
</b-row> </b-row>
<b-row> <b-row>
<b-col cols="12" lg="6"> <b-col cols="12" lg="6">
<b-button type="submit" variant="gradido" block>{{ $t('login') }}</b-button> <b-button
type="submit"
:variant="valid ? 'gradido' : 'gradido-disable'"
block
:disabled="!valid"
>
{{ $t('login') }}
</b-button>
</b-col> </b-col>
</b-row> </b-row>
</b-form> </b-form>

View File

@ -1,20 +1,24 @@
<template> <template>
<div v-if="enterData" class="resetpwd-form"> <div v-if="enterData" class="resetpwd-form">
<div class="pb-5">{{ $t('site.resetPassword.heading') }}</div> <div class="pb-5">{{ $t('site.resetPassword.heading') }}</div>
<validation-observer ref="observer" v-slot="{ handleSubmit }"> <validation-observer ref="observer" v-slot="{ handleSubmit, valid }">
<b-form role="form" @submit.prevent="handleSubmit(onSubmit)"> <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
<input-password-confirmation v-model="form" /> <input-password-confirmation v-model="form" />
<div class="text-center"> <b-row>
<b-button <b-col cols="12" lg="6">
type="submit" <b-button
variant="gradido" block
class="mt-4" type="submit"
data-test="submit-new-password-btn" :variant="valid ? 'gradido' : 'gradido-disable'"
> class="mt-4"
<!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys--> data-test="submit-new-password-btn"
{{ $t(displaySetup.button) }} :disabled="!valid"
</b-button> >
</div> <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
{{ $t(displaySetup.button) }}
</b-button>
</b-col>
</b-row>
</b-form> </b-form>
</validation-observer> </validation-observer>
</div> </div>
@ -149,3 +153,13 @@ export default {
}, },
} }
</script> </script>
<style scoped>
.btn-gradido {
padding-right: 0px;
padding-left: 0px;
}
.btn-gradido-disable {
padding-right: 0px;
padding-left: 0px;
}
</style>