From 4ee8d290a5d45ce93419c819a6e7544d3a009b99 Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Thu, 20 Feb 2020 07:29:58 -0800
Subject: Create password visibility toggle

Reusable component to show/hide password input fields,
added to local user form.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I90fb865e51d99788a225812b057f4d8bacad1bc8
---
 .../LocalUserManagement/ModalUser.vue              | 80 ++++++++++++----------
 1 file changed, 43 insertions(+), 37 deletions(-)

(limited to 'src/views/AccessControl/LocalUserManagement/ModalUser.vue')

diff --git a/src/views/AccessControl/LocalUserManagement/ModalUser.vue b/src/views/AccessControl/LocalUserManagement/ModalUser.vue
index d156c3da..448276b5 100644
--- a/src/views/AccessControl/LocalUserManagement/ModalUser.vue
+++ b/src/views/AccessControl/LocalUserManagement/ModalUser.vue
@@ -77,48 +77,52 @@
                 <!-- TODO: Should be dynamic values -->
                 Password must between 8 – 20 characters
               </b-form-text>
-              <b-form-input
-                id="password"
-                v-model="form.password"
-                type="password"
-                aria-describedby="password-help-block"
-                :state="getValidationState($v.form.password)"
-                @input="$v.form.password.$touch()"
-              />
-              <b-form-invalid-feedback role="alert">
-                <template v-if="!$v.form.password.required">
-                  Field required
-                </template>
-                <template
-                  v-if="
-                    !$v.form.password.minLength || !$v.form.password.maxLength
-                  "
-                >
-                  Length must be between 8 – 20 characters
-                </template>
-              </b-form-invalid-feedback>
+              <input-password-toggle>
+                <b-form-input
+                  id="password"
+                  v-model="form.password"
+                  type="password"
+                  aria-describedby="password-help-block"
+                  :state="getValidationState($v.form.password)"
+                  @input="$v.form.password.$touch()"
+                />
+                <b-form-invalid-feedback role="alert">
+                  <template v-if="!$v.form.password.required">
+                    Field required
+                  </template>
+                  <template
+                    v-if="
+                      !$v.form.password.minLength || !$v.form.password.maxLength
+                    "
+                  >
+                    Length must be between 8 – 20 characters
+                  </template>
+                </b-form-invalid-feedback>
+              </input-password-toggle>
             </b-form-group>
             <b-form-group
               label="Confirm user password"
               label-for="password-confirmation"
             >
-              <b-form-input
-                id="password-confirmation"
-                v-model="form.passwordConfirmation"
-                type="password"
-                :state="getValidationState($v.form.passwordConfirmation)"
-                @input="$v.form.passwordConfirmation.$touch()"
-              />
-              <b-form-invalid-feedback role="alert">
-                <template v-if="!$v.form.passwordConfirmation.required">
-                  Field required
-                </template>
-                <template
-                  v-else-if="!$v.form.passwordConfirmation.sameAsPassword"
-                >
-                  Passwords do not match
-                </template>
-              </b-form-invalid-feedback>
+              <input-password-toggle>
+                <b-form-input
+                  id="password-confirmation"
+                  v-model="form.passwordConfirmation"
+                  type="password"
+                  :state="getValidationState($v.form.passwordConfirmation)"
+                  @input="$v.form.passwordConfirmation.$touch()"
+                />
+                <b-form-invalid-feedback role="alert">
+                  <template v-if="!$v.form.passwordConfirmation.required">
+                    Field required
+                  </template>
+                  <template
+                    v-else-if="!$v.form.passwordConfirmation.sameAsPassword"
+                  >
+                    Passwords do not match
+                  </template>
+                </b-form-invalid-feedback>
+              </input-password-toggle>
             </b-form-group>
           </b-col>
         </b-row>
@@ -145,8 +149,10 @@ import {
   requiredIf
 } from 'vuelidate/lib/validators';
 import VuelidateMixin from '../../../components/Mixins/VuelidateMixin.js';
+import InputPasswordToggle from '../../../components/Global/InputPasswordToggle';
 
 export default {
+  components: { InputPasswordToggle },
   mixins: [VuelidateMixin],
   props: {
     user: {
-- 
cgit v1.2.3