chore: replace input with woot-input

This commit is contained in:
Muhsin Keloth
2024-04-27 11:21:13 +05:30
parent eff116ce3b
commit 40b87d33d0
@@ -1,38 +1,52 @@
<template>
<form class="flex flex-col gap-6" @submit.prevent="updateUser('profile')">
<form-input
<form class="flex flex-col gap-2" @submit.prevent="updateUser('profile')">
<woot-input
v-model="userName"
type="text"
name="name"
:styles="{
borderRadius: '12px',
padding: '6px 12px',
fontSize: '14px',
}"
:class="{ error: $v.userName.$error }"
:label="$t('PROFILE_SETTINGS.FORM.NAME.LABEL')"
:placeholder="$t('PROFILE_SETTINGS.FORM.NAME.PLACEHOLDER')"
:has-error="$v.userName.$error"
:error-message="$t('PROFILE_SETTINGS.FORM.NAME.ERROR')"
@blur="$v.userName.$touch"
:error="`${
$v.userName.$error ? $t('PROFILE_SETTINGS.FORM.NAME.ERROR') : ''
}`"
@input="$v.userName.$touch"
/>
<form-input
<woot-input
v-model="userDisplayName"
type="text"
name="displayName"
:styles="{
borderRadius: '12px',
padding: '6px 12px',
fontSize: '14px',
}"
:class="{ error: $v.userDisplayName.$error }"
:label="$t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.LABEL')"
:placeholder="$t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.PLACEHOLDER')"
:has-error="$v.userDisplayName.$error"
:error-message="$t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.ERROR')"
@blur="$v.userDisplayName.$touch"
:error="`${
$v.userDisplayName.$error
? $t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.ERROR')
: ''
}`"
@input="$v.userDisplayName.$touch"
/>
<form-input
<woot-input
v-if="emailEnabled"
v-model="userEmail"
type="email"
name="email"
:styles="{
borderRadius: '12px',
padding: '6px 12px',
fontSize: '14px',
}"
:class="{ error: $v.userEmail.$error }"
:label="$t('PROFILE_SETTINGS.FORM.EMAIL.LABEL')"
:placeholder="$t('PROFILE_SETTINGS.FORM.EMAIL.PLACEHOLDER')"
:has-error="$v.userEmail.$error"
:error-message="$t('PROFILE_SETTINGS.FORM.EMAIL.ERROR')"
@blur="$v.userEmail.$touch"
:error="`${
$v.userEmail.$error ? $t('PROFILE_SETTINGS.FORM.EMAIL.ERROR') : ''
}`"
@input="$v.userEmail.$touch"
/>
<form-button
type="submit"
@@ -46,13 +60,11 @@
</template>
<script>
import FormButton from 'v3/components/Form/Button.vue';
import FormInput from 'v3/components/Form/Input.vue';
import { required, minLength, email } from 'vuelidate/lib/validators';
import alertMixin from 'shared/mixins/alertMixin';
export default {
components: {
FormButton,
FormInput,
},
mixins: [alertMixin],
props: {