Moving UI assets to OSS

ui/app/components/form-field.js

@@ -0,0 +1,110 @@
+import Ember from 'ember';
+import { capitalize } from 'vault/helpers/capitalize';
+import { humanize } from 'vault/helpers/humanize';
+import { dasherize } from 'vault/helpers/dasherize';
+const { computed } = Ember;
+
+export default Ember.Component.extend({
+  'data-test-field': true,
+  classNames: ['field'],
+
+  /*
+   * @public Function
+   * called whenever a value on the model changes via the component
+   *
+   */
+  onChange() {},
+
+  /*
+   * @public
+   * @param Object
+   * in the form of
+   * {
+   *   name: "foo",
+   *   options: {
+   *     label: "Foo",
+   *     defaultValue: "",
+   *     editType: "ttl",
+   *     helpText: "This will be in a tooltip"
+   *   },
+   *   type: "boolean"
+   * }
+   *
+   * this is usually derived from ember model `attributes` lookup,
+   * and all members of `attr.options` are optional
+   *
+   */
+  attr: null,
+
+  /*
+   * @private
+   * @param string
+   * Computed property used in the label element next to the form element
+   *
+   */
+  labelString: computed('attr.name', 'attr.options.label', function() {
+    const label = this.get('attr.options.label');
+    const name = this.get('attr.name');
+    if (label) {
+      return label;
+    }
+    if (name) {
+      return capitalize([humanize([dasherize([name])])]);
+    }
+  }),
+
+  // both the path to mutate on the model, and the path to read the value from
+  /*
+   * @private
+   * @param string
+   *
+   * Computed property used to set values on the passed model
+   *
+   */
+  valuePath: computed('attr.name', 'attr.options.fieldValue', function() {
+    return this.get('attr.options.fieldValue') || this.get('attr.name');
+  }),
+
+  /*
+   *
+   * @public
+   * @param DS.Model
+   *
+   * the Ember Data model that `attr` is defined on
+   */
+  model: null,
+
+  /*
+   * @private
+   * @param object
+   *
+   * Used by the pgp-file component when an attr is editType of 'file'
+   */
+  file: { value: '' },
+  emptyData: '{\n}',
+
+  actions: {
+    setFile(_, keyFile) {
+      const path = this.get('valuePath');
+      const { value } = keyFile;
+      this.get('model').set(path, value);
+      this.get('onChange')(path, value);
+      this.set('file', keyFile);
+    },
+
+    setAndBroadcast(path, value) {
+      this.get('model').set(path, value);
+      this.get('onChange')(path, value);
+    },
+
+    codemirrorUpdated(path, value, codemirror) {
+      codemirror.performLint();
+      const hasErrors = codemirror.state.lint.marked.length > 0;
+
+      if (!hasErrors) {
+        this.get('model').set(path, JSON.parse(value));
+        this.get('onChange')(path, JSON.parse(value));
+      }
+    },
+  },
+});