personae/app/components/PasswordField.vue

<template>
  <Password
    :feedback="false"
    fluid
    toggleMask
  >
    <template #maskicon="{ toggleCallback }">
      <Icon
        class="absolute inset-e-3 top-1/2 -mt-2 h-4 w-4 text-surface-500
          dark:text-surface-400"
        name="ph:eye-slash-bold"
        @click="toggleCallback"
      />
    </template>

    <template #unmaskicon="{ toggleCallback }">
      <Icon
        class="absolute inset-e-3 top-1/2 -mt-2 h-4 w-4 text-surface-500
          dark:text-surface-400"
        name="ph:eye-bold"
        @click="toggleCallback"
      />
    </template>
  </Password>
</template>

<script setup></script>

<style scoped></style>