src/components/common/VnChangePassword.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import VnRow from '../ui/VnRow.vue';
 import FetchData from '../FetchData.vue';
 import useNotify from 'src/composables/useNotify';
-import VnInputPassword from './VnInputPassword.vue';
+import VnInputPassword from 'VnInputPassword.vue';
 
 const props = defineProps({
     submitFn: { type: Function, default: () => {} },

src/pages/Login/LoginMain.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { Notify } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-
+import VnInputPassword from 'src/components/common/VnInputPassword.vue';
 import { useSession } from 'src/composables/useSession';
 import { useLogin } from 'src/composables/useLogin';
 
@@ -63,11 +63,10 @@ async function onSubmit() {
             :rules="[(val) => (val && val.length > 0) || t('login.fieldRequired')]"
             color="primary"
         />
-        <VnInput
-            type="password"
+        <VnInputPassword
             v-model="password"
             :label="t('login.password')"
-            lazy-rules
+            :toggle-visibility="true"
             :rules="[(val) => (val && val.length > 0) || t('login.fieldRequired')]"
             class="red"
         />

test/cypress/integration/outLogin/login.spec.js

@@ -19,6 +19,7 @@ describe('Login', () => {
     it('should fail to log in using wrong password', () => {
         cy.get('input[aria-label="Username"]').type('employee');
         cy.get('input[aria-label="Password"]').type('wrongPassword');
+        cy.get('.q-field__append > .q-icon');
         cy.get('button[type="submit"]').click();
         cy.get('.q-notification__message').should(
             'have.text',