fix: Add an option to view the masked information in the profile settings UI (#9343)

app/javascript/dashboard/components/widgets/forms/Input.vue

@@ -15,6 +15,7 @@
     <span v-if="error" class="message">
       {{ error }}
     </span>
+    <slot name="masked" />
   </label>
 </template>
 

app/javascript/dashboard/routes/dashboard/settings/personal/AccessToken.vue

@@ -2,17 +2,25 @@
   <div class="flex flex-row justify-between gap-4">
     <woot-input
       name="access_token"
-      class="flex-1 focus:[&>input]:!border-slate-200 focus:[&>input]:dark:!border-slate-600 [&>input]:cursor-not-allowed"
+      class="flex-1 [&>input]:!py-1.5 ltr:[&>input]:!pr-9 ltr:[&>input]:!pl-3 rtl:[&>input]:!pl-9 rtl:[&>input]:!pr-3 focus:[&>input]:!border-slate-200 focus:[&>input]:dark:!border-slate-600 [&>input]:cursor-not-allowed relative"
       :styles="{
         borderRadius: '12px',
-        padding: '6px 12px',
         fontSize: '14px',
         marginBottom: '2px',
       }"
-      type="password"
+      :type="inputType"
       :value="value"
       readonly
-    />
+    >
+      <template #masked>
+        <button
+          class="absolute top-1.5 ltr:right-0.5 rtl:left-0.5"
+          @click="toggleMasked"
+        >
+          <fluent-icon :icon="maskIcon" :size="16" />
+        </button>
+      </template>
+    </woot-input>
     <form-button
       type="submit"
       size="large"
@@ -26,6 +34,7 @@
   </div>
 </template>
 <script setup>
+import { ref, computed } from 'vue';
 import FormButton from 'v3/components/Form/Button.vue';
 const props = defineProps({
   value: {
@@ -34,6 +43,15 @@ const props = defineProps({
   },
 });
 const emit = defineEmits(['on-copy']);
+const inputType = ref('password');
+const toggleMasked = () => {
+  inputType.value = inputType.value === 'password' ? 'text' : 'password';
+};
+
+const maskIcon = computed(() => {
+  return inputType.value === 'password' ? 'eye-hide' : 'eye-show';
+});
+
 const onClick = () => {
   emit('on-copy', props.value);
 };