chore: replace input with woot-input
This commit is contained in:
@@ -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: {
|
||||
|
||||
Reference in New Issue
Block a user