Add latest changes from gitlab-org/gitlab@master

1 files changed, 59 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/components/form/index.js b/app/assets/javascripts/vue_shared/components/form/index.js
new file mode 100644
index 00000000000..65bc14dd807
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/form/index.js
@@ -0,0 +1,59 @@
+import Vue from 'vue';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import InputCopyToggleVisibility from './input_copy_toggle_visibility.vue';
+
+export function initInputCopyToggleVisibility() {
+  const els = document.getElementsByClassName('js-input-copy-visibility');
+
+  Array.from(els).forEach((el) => {
+    const {
+      name,
+      value,
+      initialVisibility,
+      showToggleVisibilityButton,
+      showCopyButton,
+      copyButtonTitle,
+      readonly,
+      formInputGroupProps,
+      formGroupAttributes,
+    } = el.dataset;
+
+    const parsedFormInputGroupProps = convertObjectPropsToCamelCase(
+      JSON.parse(formInputGroupProps || '{}'),
+    );
+    const parsedFormGroupAttributes = convertObjectPropsToCamelCase(
+      JSON.parse(formGroupAttributes || '{}'),
+    );
+
+    return new Vue({
+      el,
+      data() {
+        return {
+          value,
+        };
+      },
+      render(createElement) {
+        return createElement(InputCopyToggleVisibility, {
+          props: {
+            value: this.value,
+            initialVisibility,
+            showToggleVisibilityButton,
+            showCopyButton,
+            copyButtonTitle,
+            readonly,
+            formInputGroupProps: {
+              name,
+              ...parsedFormInputGroupProps,
+            },
+          },
+          attrs: parsedFormGroupAttributes,
+          on: {
+            input: (newValue) => {
+              this.value = newValue;
+            },
+          },
+        });
+      },
+    });
+  });
+}