<div class="row"
     v-bind:class="{
            'errorWrap showError': hasField('errors.cardholder_password')
        }"
>

    <label for="cardholder_password_field">
        Password
    </label>

    <div class="inputWrap">
        <input type="password"
            autocomplete="off"
            name="cardholder_password"
            v-show="!cardholder_password_check"
            v-model="cardholder_password"
            id="cardholder_password_field"
            value="{{ def.cardholder_password }}"
            class="text {{ cls.cardholder_password }}"
        />
        <input type="text"
            v-show="cardholder_password_check"
            v-model="cardholder_password"
            name="password_text"
            id="password_text"
            value=""
            class="text"
        />
    </div> <!-- .inputWrap -->

    <div class="validationMessage" v-if="hasField('errors.cardholder_password')">
        <span>[% errors.cardholder_password %]</span>
    </div> <!-- .validationMessage -->

</div>

<div class="row">
    <input type="checkbox"
        name="reveal_password"
        id="reveal_password"
        v-model="cardholder_password_check"
    />
    <label for="reveal_password">
        Click To Check Your Password
    </label>
</div>
