<template>
  <div class="ui-mask left-center">
    <p><span>{{ prefix }}</span>: <span>{{ display }}</span></p>
    <UiIcon @click="show = !show" class="pointer" v-if="enabled">visibility</UiIcon>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
    prefix: string,
    enabled: boolean,
    value: string
}>();

const show = ref(false);

const display = computed(() => {
    if (props.enabled && show.value === false)
    {
        const length = props.value.length;
        return "*".repeat(length);
    }
    return props.value;
})
</script>

<style scoped>
.ui-mask {
    gap: 1rem;
}
</style>