PasswordInput.vue 1.49 KB
Newer Older
1
<template>
2
  <div class="ui fluid action input">
3
4
    <input
    required
5
    name="password"
6
7
8
9
    :tabindex="index"
    :type="passwordInputType"
    @input="$emit('input', $event.target.value)"
    :value="value">
Eliot Berriot's avatar
Eliot Berriot committed
10
    <span @click="showPassword = !showPassword" :title="labels.title" class="ui icon button">
11
12
      <i class="eye icon"></i>
    </span>
13
14
15
    <button v-if="copyButton" @click.prevent="copy" class="ui icon button" :title="labels.copy">
      <i class="copy icon"></i>
    </button>
16
17
18
  </div>
</template>
<script>
19
20
21
22
23
24
25
26
27
28
29
30
31

function copyStringToClipboard (str) {
  // cf https://techoverflow.net/2018/03/30/copying-strings-to-the-clipboard-using-pure-javascript/
  let el = document.createElement('textarea');
  el.value = str;
  el.setAttribute('readonly', '');
  el.style = {position: 'absolute', left: '-9999px'};
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
}

32
export default {
33
  props: ['value', 'index', 'defaultShow', 'copyButton'],
34
35
  data () {
    return {
36
      showPassword: this.defaultShow || false,
37
38
39
    }
  },
  computed: {
Eliot Berriot's avatar
Eliot Berriot committed
40
41
    labels () {
      return {
42
43
        title: this.$pgettext('Content/Settings/Button.Tooltip/Verb', 'Show/hide password'),
        copy: this.$pgettext('*/*/Button.Label/Short, Verb', 'Copy')
Eliot Berriot's avatar
Eliot Berriot committed
44
45
      }
    },
46
47
48
49
50
51
    passwordInputType () {
      if (this.showPassword) {
        return 'text'
      }
      return 'password'
    }
52
53
54
55
56
  },
  methods: {
    copy () {
      copyStringToClipboard(this.value)
    }
57
58
59
  }
}
</script>