summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/vue_shared/components/confirmation_input.vue
blob: 1aa03ea631798f9bc14a1885771a5bc1d0da3590 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<script>
  import _ from 'underscore';
  import { __, sprintf } from '~/locale';

  export default {
    props: {
      inputId: {
        type: String,
        required: true,
      },
      confirmationKey: {
        type: String,
        required: true,
      },
      confirmationValue: {
        type: String,
        required: true,
      },
      shouldEscapeConfirmationValue: {
        type: Boolean,
        required: false,
        default: true,
      },
    },
    computed: {
      inputLabel() {
        let value = this.confirmationValue;
        if (this.shouldEscapeConfirmationValue) {
          value = _.escape(value);
        }

        return sprintf(
          __('Type %{value} to confirm:'),
          { value: `<code>${value}</code>` },
          false,
        );
      },
    },
    methods: {
      hasCorrectValue() {
        return this.$refs.enteredValue.value === this.confirmationValue;
      },
    },
  };
</script>

<template>
  <div>
    <label
      v-html="inputLabel"
      :for="inputId"
    >
    </label>
    <input
      :id="inputId"
      :name="confirmationKey"
      type="text"
      ref="enteredValue"
      class="form-control"
    />
  </div>
</template>