fix: refs #7699 add icons and hint

@@ -42,9 +42,14 @@ const $props = defineProps({
         type: Number,
         default: null,
     },
+    toggleVisibility: {

@@ -125,3 +130,3 @@
             v-model="value"
             v-bind="{ ...$attrs, ...styleAttrs }"
-            :type="$attrs.type"
+            :type="toggleVisibility ? (showPassword ? 'text' : 'password') : $attrs.type"

@@ -138,3 +143,4 @@
                 <slot name="prepend" />
             </template>
             <template #append>
+                <QIcon

@@ -166,18 +167,3 @@ const handleInsertMode = (e) => {
         </QInput>
     </div>
 </template>
-<i18n>

@@ -135,3 +136,3 @@
             :data-cy="$attrs.dataCy ?? $attrs.label + '_input'"
         >
-            <template v-if="$slots.prepend" #prepend>
+            <template #prepend>

@@ -156,3 +157,3 @@
                         }
                     "
-                ></QIcon>
+                />

@@ -0,0 +7,4 @@
+        type: [String, Number],
+        default: null,
+    },
+    toggleVisibility: {

@@ -0,0 +14,4 @@
+});
+
+const showPassword = ref(false);
+const model = defineModel({ type: [Number, String] });

@@ -0,0 +23,4 @@
+        :type="
+            $props.toggleVisibility ? (showPassword ? 'text' : 'password') : $attrs.type
+        "
+        hint=""

@@ -82,7 +81,7 @@ async function onSubmit() {
                 <template #prepend>

@@ -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');