akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: Update the edit password screen input

Browse Source
This commit is contained in:
iamsivin
2025-11-07 17:40:48 +05:30
parent 1f60548020
commit 8b05825681
2 changed files with 60 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/components-next/input/Input.vue
+46 -42
View File
@@ -133,48 +133,52 @@ onMounted(() => {
</label>
<!-- Added prefix slot to allow adding icons to the input -->
<slot name="prefix" />
<input
:id="uniqueId"
v-bind="$attrs"
ref="inputRef"
:value="modelValue"
:class="[
customInputClass,
inputOutlineClass,
sizeClass,
{
error: messageType === 'error',
focus: isFocused,
'ltr:!pr-10 rtl:!pl-10': isPasswordField,
},
]"
:type="currentInputType"
:placeholder="placeholder"
:disabled="disabled"
:min="['date', 'datetime-local', 'time'].includes(type) ? min : undefined"
:max="
['date', 'datetime-local', 'time', 'number'].includes(type)
? max
: undefined
"
class="block w-full reset-base text-sm !mb-0 outline outline-1 border-none border-0 outline-offset-[-1px] rounded-lg bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
@input="handleInput"
@focus="handleFocus"
@blur="handleBlur"
@keyup.enter="handleEnter"
/>
<Button
v-if="isPasswordField"
type="button"
slate
sm
link
class="absolute inset-y-0 ltr:right-3.5 rtl:left-3.5"
:icon="isPasswordVisible ? 'i-lucide-eye-off' : 'i-lucide-eye'"
:aria-label="isPasswordVisible ? 'Hide password' : 'Show password'"
:aria-pressed="isPasswordVisible"
@click="togglePasswordVisibility()"
/>
<div class="relative">
<input
:id="uniqueId"
v-bind="$attrs"
ref="inputRef"
:value="modelValue"
:class="[
customInputClass,
inputOutlineClass,
sizeClass,
{
error: messageType === 'error',
focus: isFocused,
'ltr:!pr-10 rtl:!pl-10': isPasswordField,
},
]"
:type="currentInputType"
:placeholder="placeholder"
:disabled="disabled"
:min="
['date', 'datetime-local', 'time'].includes(type) ? min : undefined
"
:max="
['date', 'datetime-local', 'time', 'number'].includes(type)
? max
: undefined
"
class="block w-full reset-base text-sm !mb-0 outline outline-1 border-none border-0 outline-offset-[-1px] rounded-lg bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
@input="handleInput"
@focus="handleFocus"
@blur="handleBlur"
@keyup.enter="handleEnter"
/>
<Button
v-if="isPasswordField"
type="button"
slate
sm
link
class="absolute inset-y-0 ltr:right-3.5 rtl:left-3.5"
:icon="isPasswordVisible ? 'i-lucide-eye-off' : 'i-lucide-eye'"
:aria-label="isPasswordVisible ? 'Hide password' : 'Show password'"
:aria-pressed="isPasswordVisible"
@click="togglePasswordVisibility()"
/>
</div>
<p
v-if="message"
class="min-w-0 mt-0.5 mb-0 text-xs truncate transition-all duration-500 ease-in-out"
app/javascript/v3/views/auth/password/Edit.vue
+14 -8
View File
@@ -2,7 +2,7 @@
import { useVuelidate } from '@vuelidate/core';
import { required, minLength } from '@vuelidate/validators';
import { useAlert } from 'dashboard/composables';
import FormInput from '../../../components/Form/Input.vue';
import FormInput from 'dashboard/components-next/input/Input.vue';
import NextButton from 'dashboard/components-next/button/Button.vue';
import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
import { setNewPassword } from '../../../api/auth';
@@ -99,24 +99,30 @@ export default {
{{ $t('SET_NEW_PASSWORD.TITLE') }}
</h1>
<div class="space-y-5">
<div class="space-y-6 mt-5">
<FormInput
v-model="credentials.password"
class="mt-3"
name="password"
type="password"
:has-error="v$.credentials.password.$error"
:error-message="$t('SET_NEW_PASSWORD.PASSWORD.ERROR')"
:message-type="v$.credentials.password.$error ? 'error' : ''"
:message="
v$.credentials.password.$error
? $t('SET_NEW_PASSWORD.PASSWORD.ERROR')
: ''
"
:placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
@blur="v$.credentials.password.$touch"
/>
<FormInput
v-model="credentials.confirmPassword"
class="mt-3"
name="confirm_password"
type="password"
:has-error="v$.credentials.confirmPassword.$error"
:error-message="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR')"
:message-type="v$.credentials.confirmPassword.$error ? 'error' : ''"
:message="
v$.credentials.confirmPassword.$error
? $t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR')
: ''
"
:placeholder="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
@blur="v$.credentials.confirmPassword.$touch"
/>