(function() {
  'use strict';

  angular.module('app.components')
    .config(userForm);

  /** @ngInject */
  function userForm(FormsProvider) {
    FormsProvider.register('userForm', {
      fields: [
        {
          className: 'forms__body',
          fieldGroup: [
            {
              key: 'first_name',
              type: 'text',
              templateOptions: {
                label: 'First Name',
                required: true
              },
              validation: {
                messages: {
                  required: '"A first name must be provided"'
                }
              }
            },
            {
              key: 'last_name',
              type: 'text',
              templateOptions: {
                label: 'Last Name',
                required: true
              },
              validation: {
                messages: {
                  required: '"A last name must be provided"'
                }
              }
            },
            {
              key: 'email',
              type: 'text',
              templateOptions: {
                label: 'Email',
                required: true
              },
              validation: {
                messages: {
                  required: '"A email address must be provided"'
                }
              }
            },
            {
              key: 'phone',
              type: 'text',
              templateOptions: {
                label: 'Phone Number',
                required: true
              },
              validation: {
                messages: {
                  required: '"A phone number must be provided"'
                }
              }
            },
            {
              key: 'password',
              type: 'password',
              templateOptions: {
                label: 'Password',
                required: false
              },
              validation: {
                messages: {
                  required: '"A password must be provided"'
                }
              }
            },
            {
              key: 'passwordConfirm',
              type: 'password',
              templateOptions: {
                label: 'Confirm Password',
                required: false
              },
              validation: {
                messages: {
                  required: '"A password confirmation must be provided"'
                }
              }
            },
            {
              key: 'role',
              type: 'select',
              templateOptions: {
                label: 'Role',
                options: [
                  {label: 'User', value: 'user'},
                  {label: 'Manager', value: 'manager'},
                  {label: 'Admin', value: 'admin'},
                ],
              }
            }
          ]
        }
      ]
    });
  }
})();

@@ -433,33 +433,85 @@
   required: true
+,%0A                placeholder: 'Enter a first name.'
 %0A
-
               %7D,
@@ -843,32 +843,83 @@
   required: true
+,%0A                placeholder: 'Enter a last name.'
 %0A              %7D
@@ -1243,32 +1243,93 @@
   required: true
+,%0A                placeholder: 'Enter a valid email address.'
 %0A              %7D
@@ -1672,16 +1672,76 @@
 ed: true
+,%0A                placeholder: 'Enter a valid phone number.'
 %0A       
@@ -2087,32 +2087,82 @@
  required: false
+,%0A                placeholder: 'Enter a password.'
 %0A              %7D
@@ -2480,32 +2480,32 @@
 firm Password',%0A
-
                 
@@ -2519,16 +2519,70 @@
 d: false
+,%0A                placeholder: 'Confirm the password.'
 %0A       

Create placeholders for the user form