Merge branch 'develop' into chore/load-reply-message

app/javascript/v3/components/Form/Input.vue

@@ -1,8 +1,11 @@
 <script setup>
-import { defineProps, defineModel } from 'vue';
+import { defineProps, defineModel, computed } from 'vue';
+import { useToggle } from '@vueuse/core';
+
+import Button from 'dashboard/components-next/button/Button.vue';
 import WithLabel from './WithLabel.vue';
 
-defineProps({
+const props = defineProps({
   label: {
     type: String,
     required: true,
@@ -31,6 +34,11 @@ defineProps({
   },
 });
 
+const FIELDS = {
+  TEXT: 'text',
+  PASSWORD: 'password',
+};
+
 defineOptions({
   inheritAttrs: false,
 });
@@ -39,6 +47,17 @@ const model = defineModel({
   type: [String, Number],
   required: true,
 });
+
+const [isPasswordVisible, togglePasswordVisibility] = useToggle();
+
+const isPasswordField = computed(() => props.type === FIELDS.PASSWORD);
+
+const currentInputType = computed(() => {
+  if (isPasswordField.value) {
+    return isPasswordVisible.value ? FIELDS.TEXT : FIELDS.PASSWORD;
+  }
+  return props.type;
+});
 </script>
 
 <template>
@@ -56,7 +75,7 @@ const model = defineModel({
       v-bind="$attrs"
       v-model="model"
       :name="name"
-      :type="type"
+      :type="currentInputType"
       class="block w-full border-none rounded-md shadow-sm bg-n-alpha-black2 appearance-none outline outline-1 focus:outline focus:outline-1 text-n-slate-12 placeholder:text-n-slate-10 sm:text-sm sm:leading-6 px-3 py-3"
       :class="{
         'error outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9 disabled:outline-n-ruby-8 dark:disabled:outline-n-ruby-8':
@@ -66,7 +85,20 @@ const model = defineModel({
         'px-3 py-3': spacing === 'base',
         'px-3 py-2 mb-0': spacing === 'compact',
         'pl-9': icon,
+        'pr-10': isPasswordField,
       }"
     />
+    <Button
+      v-if="isPasswordField"
+      type="button"
+      slate
+      sm
+      link
+      :icon="isPasswordVisible ? 'i-lucide-eye-off' : 'i-lucide-eye'"
+      class="absolute inset-y-0 right-0 pr-3"
+      :aria-label="isPasswordVisible ? 'Hide password' : 'Show password'"
+      :aria-pressed="isPasswordVisible"
+      @click="togglePasswordVisibility()"
+    />
   </WithLabel>
 </template>