refactor(front): new password input

front/src/components/forms/PasswordInput.vue

@@ -26,16 +26,12 @@ const props = withDefaults(defineProps<Props>(), {
 
 const value = useVModel(props, 'modelValue', emit)
 
-const showPassword = ref(props.defaultShow)
-
 const { t } = useI18n()
 const labels = computed(() => ({
   title: t('components.forms.PasswordInput.title'),
   copy: t('components.forms.PasswordInput.button.copy')
 }))
 
-const passwordInputType = computed(() => showPassword.value ? 'text' : 'password')
-
 const store = useStore()
 const { isSupported: canCopy, copy } = useClipboard({ source: value })
 const copyPassword = () => {
@@ -49,28 +45,36 @@ const copyPassword = () => {
 
 <template>
   <div>
-    <Input
+    <Input password
       :id="fieldId"
       v-model="value"
       required
-      name="password"
-      :type="passwordInputType"
     >
       <template #input-right>
-        <Button
+        <button
-          :title="labels.title"
-          icon="bi-eye"
-          @click.prevent="showPassword = !showPassword"
-        >
-        </Button>
-        <Button
           v-if="copyButton && canCopy"
-          icon="bi-copy"
+          role="switch"
+          type="button"
+          class="input-right copy"
           :title="labels.copy"
           @click.prevent="copyPassword"
         >
-        </Button>
+          <i class="bi bi-copy" />
+        </button>
       </template>
     </Input>
   </div>
 </template>
+
+<style lang="scss" scoped>
+  .funkwhale.input .input-right.copy {
+    position: absolute;
+    background:transparent;
+    border:none;
+    appearance:none;
+    right: 40px;
+    bottom: 12px;
+    font-size: 18px;
+    color: var(--fw-placeholder-color);
+  }
+</style>