- Pasword alanları için şifreyi görüntüle-gizle özelliği

src/assets/images/icons.svg

@@ -251,4 +251,14 @@
             d="M14.3272 17.4867H5.66513C5.33609 17.4867 5.07048 17.7574 5.07048 18.0928C5.07048 18.4281 5.33609 18.6989 5.66513 18.6989H14.3232C14.6522 18.6989 14.9179 18.4281 14.9179 18.0928C14.9179 17.7574 14.6522 17.4867 14.3232 17.4867H14.3272Z"
         />
     </symbol>
+    <symbol id="eyeclose" viewBox="0 0 59 22">
+        <path
+            d="M56.61,11.89l2.55-1.57L52.83.03l-2.55,1.57h0s-11.76,7.25-11.76,7.25c-.94.58-1.91,1.05-2.91,1.43l-2.61.74v.02c-2.43.5-4.94.45-7.36-.14l-1.2-.34c-1.28-.41-2.53-.98-3.72-1.71L7.68.82h0s-1.35-.82-1.35-.82L0,10.28l2.55,1.57,4.76-7.73,6.18,3.81-4.79,7.77,2.55,1.57,4.79-7.77,3.09,1.9c1.15.71,2.35,1.28,3.58,1.74l-2.48,8.78,2.89.82,2.48-8.76c1.32.27,2.66.41,4.01.41,1.41,0,2.82-.16,4.2-.46l2.46,8.7,2.89-.82-2.48-8.75c1.16-.44,2.3-.99,3.39-1.66l3.12-1.92,4.79,7.77,2.55-1.57-4.79-7.77,6.08-3.75,4.75,7.72Z" />
+    </symbol>
+    <symbol id="eye" viewBox="0 0 51 24">
+        <path
+            d="M25.59,24.58c-3.62,0-7.24-.99-10.47-2.98L0,12.29,15.11,2.98c6.46-3.98,14.48-3.98,20.94,0l15.11,9.31-15.11,9.31c-3.23,1.99-6.85,2.98-10.47,2.98ZM5.72,12.29l10.97,6.75c5.49,3.38,12.31,3.38,17.8,0l10.97-6.75-10.97-6.75c-5.49-3.38-12.31-3.38-17.8,0l-10.97,6.75Z" />
+        <path
+            d="M25.59,21.71c-5.19,0-9.42-4.23-9.42-9.42S20.39,2.87,25.59,2.87s9.42,4.23,9.42,9.42-4.23,9.42-9.42,9.42ZM25.59,5.87c-3.54,0-6.42,2.88-6.42,6.42s2.88,6.42,6.42,6.42,6.42-2.88,6.42-6.42-2.88-6.42-6.42-6.42Z" />
+    </symbol>
 </svg>

src/assets/style/default.css

@@ -454,6 +454,7 @@ label {
   flex-wrap: wrap;
   width: 100%;
   padding: 2px;
+  position: relative;
 }
 
 label>span {

src/components/global/FormInput.vue

@@ -11,7 +11,7 @@
         </span>
         <input
           :value="modelValue"
-          :type="type"
+          :type="inputType"
           :placeholder="placeholder"
           :disabled="disabled"
           @input="OnInput"
@@ -22,12 +22,24 @@
           @keyup="OnKeyUp"
           :class="[
             invalidText !== undefined && invalidText !== '' ? 'invalid' : '',
-            iclass || ''
+            iclass || '',
+            isPasswordVisible || props.type === 'password' ? 'password-visible' : ''
           ]"
           :min="min"
           :max="max"
           :minlength="minlength"
           :maxlength="maxlength" />
+        <i
+          class="ico-c ico-password-visible"
+          v-if="props.type === 'password'"
+          @click="PasswordVisibleToggle">
+          <svg>
+            <use
+              :href="
+                '/src/assets/images/icons.svg#' + (isPasswordVisible ? 'eye' : 'eyeclose')
+              "></use>
+          </svg>
+        </i>
         <span
           class="form-item-alert"
           v-if="InvalidMessages.length > 0 && InvalidMessages !== ''">
@@ -82,9 +94,18 @@
     'keydown',
     'keyup'
   ])
-  const localValue = ref<any>()
+  const isPasswordVisible = ref<boolean>(false)
   const InvalidMessageText = reactive<Record<string, any>>({})
 
+  const inputType = computed(() => {
+    if (props.type !== 'password') {
+      return props.type
+    } else {
+      if (isPasswordVisible.value) return 'text'
+      else return 'password'
+    }
+  })
+
   const InvalidMessages = computed<string>(() => {
     let text = ''
     Object.keys(InvalidMessageText).forEach((k: string, i: number) => {
@@ -138,7 +159,9 @@
     emit('update:modelValue', (e.target as HTMLInputElement).value)
     emit('keyup', e)
   }
-  
+  const PasswordVisibleToggle = () => {
+    if (props.type === 'password') isPasswordVisible.value = !isPasswordVisible.value
+  }
   watch(
     () => props.invalidText,
     () => {
@@ -151,3 +174,16 @@
     }
   )
 </script>
+<style scoped>
+  .ico-password-visible {
+    position: absolute;
+    right: 8px;
+    top: 32px;
+    min-width: 32px;
+    min-height: 32px;
+    cursor: pointer;
+  }
+  .password-visible {
+    padding: 8px 40px 8px 8px;
+  }
+</style>