add form fields and added loading animation to form submissions

app/controllers/forms.server.controller.js

@@ -107,6 +107,10 @@ exports.createSubmission = function(req, res) {
 	submission.form = form;
 	submission.pdf = form.pdf;
 	submission.title = form.title;
+	if(req.headers['x-forwarded-for'] || req.connection.remoteAddress){
+		var ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
+		console.log('ip address of client is: '+ip);
+	}
 	// submission.ipAddr = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
 
 	if(form.autofillPDFs){
@@ -302,7 +306,7 @@ exports.formByID = function(req, res, next, id) {
 			if(!form.admin.username){
 				form.admin = req.user;
 			}
-			console.log(form.admin);
+			// console.log(form.admin);
 
 			//Remove sensitive information from User object
 			form.admin.password = null;

app/models/form.server.model.js

@@ -85,6 +85,17 @@ var FormSchema = new Schema({
 	saveCount: {
 		type: Number,
 		default: 0,
+	},
+	design: {
+		colors:{
+			backgroundColor: String,
+			questionColor: String,
+			answerColor: String,
+			buttonColor: String,
+
+		},
+		font: String,
+		backgroundImage: { type: Schema.Types.Mixed }
 	}
 });
 

app/models/form_field.server.model.js

@@ -16,7 +16,6 @@ function validateFormFieldType(value) {
     'email',
     'legal',
     'url',
-    'number',
     'textarea',
     'statement',
     'welcome',
@@ -28,6 +27,7 @@ function validateFormFieldType(value) {
     'radio',
     'checkbox',
     'hidden',
+    'yes_no',
   ];
 
   if (validTypes.indexOf(value) > -1) { 

app/models/form_submission.server.model.js

@@ -57,6 +57,9 @@ var FormSubmissionSchema = new Schema({
 	timeElapsed: { //time (in seconds) it took for user to submit form
 		type: Number,
 	}, 
+	percentageComplete: {
+		type: Number,
+	}
 
 });
 
@@ -67,7 +70,7 @@ var FormSubmissionSchema = new Schema({
 //Check for IP Address of submitting person 
 FormSubmissionSchema.pre('save', function (next){
 	if(this.ipAddr){
-		if(this.ipAddr.modified){
+		if(this.isModified('ipAddr')){
 			satelize.satelize({ip: this.ipAddr}, function(err, geoData){
 				if (err) next( new Error(err.message) );
 

app/views/layout.server.view.html

@@ -39,6 +39,8 @@
 	{% for bowerCssFile in bowerCssFiles %}
 		<link rel="stylesheet" href="{{bowerCssFile}}">
 	{% endfor %}
+	<link rel="stylesheet" href="/lib/angular-input-stars/angular-input-stars.css">
+	<link rel="stylesheet" href="/lib/jquery-ui/themes/flick/jquery-ui.css"/>
 	<!-- end Bower CSS dependencies-->
 
 	<!--Application CSS Files-->

public/dist/application.js

@@ -442,6 +442,66 @@ angular.module('forms').config(['$stateProvider',
 ]);
 'use strict';
 
+// Forms controller
+angular.module('forms').controller('ListFormsController', ['$rootScope', '$scope', '$stateParams', '$state', 'Forms', 'CurrentForm','$http',
+	function($rootScope, $scope, $stateParams, $state, Forms, CurrentForm, $http) {
+        
+        $scope = $rootScope;
+        $rootScope.showCreateModal = false;
+
+        // Return all user's Forms
+        $scope.findAll = function() {
+            if(!$scope.myforms){
+                Forms.query(function(_forms){
+                    $scope.myforms = _forms;
+                });
+            }
+        };
+
+        //Modal functions
+        $scope.openCreateModal = function(){
+            if(!$rootScope.showCreateModal){
+                $rootScope.showCreateModal = true;
+            }
+        };
+        $scope.closeCreateModal = function(){
+            if($rootScope.showCreateModal){
+                $rootScope.showCreateModal = false;
+            }
+        };
+
+        $scope.setForm = function (form) {
+            $scope.myform = form;
+        };
+
+        // Create new Form
+        $scope.createNew = function(){
+            var form = {};
+            form.title = $scope.myform.name.$modelValue;
+            form.language = $scope.myform.language.$modelValue;
+            console.log(form);
+            $rootScope.showCreateModal = true;
+
+            console.log($scope.myform);
+            if($scope.myform.$valid && $scope.myform.$dirty){
+                $http.post('/forms', {form: form})
+                .success(function(data, status, headers){
+                    console.log('form created');
+
+                    // Clear form fields
+                   $scope.myform = {};
+                    // Redirect after save 
+                    $scope.goToWithId('viewForm', data._id+'');
+                }).error(function(errorResponse){
+                    console.log(errorResponse);
+                    $scope.error = errorResponse.data.message;
+                });
+            }
+        };
+    }
+]);
+'use strict';
+
 // Forms controller
 angular.module('forms').controller('SubmitFormController', ['$scope', '$rootScope', '$stateParams', '$state', 'Forms', 'CurrentForm',
 	function($scope, $rootScope, $stateParams, $state, Forms, CurrentForm) {
@@ -482,21 +542,11 @@ angular.module('forms').controller('ViewFormController', ['$rootScope', '$scope'
         $scope.myform = CurrentForm.getForm();
         $rootScope.saveInProgress = false;
         $scope.viewSubmissions = false;
-        $rootScope.showCreateModal = false;
         $scope.table = {
             masterChecker: false,
             rows: []
         };
 
-        // Return all user's Forms
-        $scope.findAll = function() {
-            if(!$scope.myforms){
-                Forms.query(function(_forms){
-                    $scope.myforms = _forms;
-                });
-            }
-        };
-
         // Find a specific Form
         $scope.findOne = function() {
             $scope.myform = Forms.get({
@@ -513,18 +563,6 @@ angular.module('forms').controller('ViewFormController', ['$rootScope', '$scope'
             $scope.myform = form;
         };
 
-        //Modal functions
-        $scope.openCreateModal = function(){
-            if(!$rootScope.showCreateModal){
-                $rootScope.showCreateModal = true;
-            }
-        };
-        $scope.closeCreateModal = function(){
-            if($rootScope.showCreateModal){
-                $rootScope.showCreateModal = false;
-            }
-        };
-
         /*
         * Table Functions
         */
@@ -664,31 +702,6 @@ angular.module('forms').controller('ViewFormController', ['$rootScope', '$scope'
                 });
         };
 
-        // Create new Form
-        $scope.createNew = function(){
-            var form = {};
-            form.title = $scope.myform.name.$modelValue;
-            form.language = $scope.myform.language.$modelValue;
-            console.log(form);
-            $rootScope.showCreateModal = true;
-
-            console.log($scope.myform);
-            if($scope.myform.$valid && $scope.myform.$dirty){
-                $http.post('/forms', {form: form})
-                .success(function(data, status, headers){
-                    console.log('form created');
-
-                    // Clear form fields
-                   $scope.myform = {};
-                    // Redirect after save 
-                    $scope.goToWithId('viewForm', data._id+'');
-                }).error(function(errorResponse){
-                    console.log(errorResponse);
-                    $scope.error = errorResponse.data.message;
-                });
-            }
-        };
-
 
         // Update existing Form
         $scope.update = $rootScope.update = function(cb) {
@@ -1181,7 +1194,9 @@ angular.module('forms').directive('fieldDirective', function($http, $compile) {
             'password',
             'radio',
             'legal',
-            'statement'
+            'statement',
+            'rating',
+            'yes_no'
         ];
         if (__indexOf.call(supported_fields, type) >= 0) {
             return templateUrl += type + '.html';
@@ -1266,14 +1281,15 @@ angular.module('forms').directive('formDirective', ['$http', '$timeout', 'timeCo
                     $scope.authentication = Auth;
                     console.log($scope.authentication.isAuthenticated());
 
-                    $http.post('/forms/'+$scope.form._id,$scope.form).
+                    $scope.submitPromise = $http.post('/forms/'+$scope.form._id,$scope.form).
                     success(function(data, status, headers){
                         console.log('form submitted successfully');
-                        alert('Form submitted..');
+                        // alert('Form submitted..');
                         $scope.form.submitted = true;
                     })
                     .error(function(error){
                         console.log(error);
+                        $scope.error = error.message;
                     });
                 };
 
@@ -1377,7 +1393,7 @@ angular.module('forms').service('FormFields', [
 		        value : 'Checkbox'
 		    },
 		    {
-		        name : 'yes-no',
+		        name : 'yes_no',
 		        value : 'Yes or No'
 		    },
 		    {

public/modules/forms/controllers/list-forms.client.controller.js

@@ -0,0 +1,61 @@
+'use strict';
+
+// Forms controller
+angular.module('forms').controller('ListFormsController', ['$rootScope', '$scope', '$stateParams', '$state', 'Forms', 'CurrentForm','$http',
+	function($rootScope, $scope, $stateParams, $state, Forms, CurrentForm, $http) {
+        
+        $scope = $rootScope;
+        $rootScope.showCreateModal = false;
+
+        // Return all user's Forms
+        $scope.findAll = function() {
+            Forms.query(function(_forms){
+                $scope.myforms = _forms;
+            });
+        };
+
+        //Modal functions
+        $scope.openCreateModal = function(){
+            if(!$rootScope.showCreateModal){
+                $rootScope.showCreateModal = true;
+            }
+        };
+        $scope.closeCreateModal = function(){
+            if($rootScope.showCreateModal){
+                $rootScope.showCreateModal = false;
+            }
+        };
+
+        $scope.setForm = function (form) {
+            $scope.myform = form;
+        };
+        $scope.goToWithId = function(route, id) {
+            $state.go(route, {'formId': id}, {reload: true});
+        };
+
+        // Create new Form
+        $scope.createNew = function(){
+            var form = {};
+            form.title = $scope.myform.name.$modelValue;
+            form.language = $scope.myform.language.$modelValue;
+            console.log(form);
+            $rootScope.showCreateModal = true;
+
+            console.log($scope.myform);
+            if($scope.myform.$valid && $scope.myform.$dirty){
+                $http.post('/forms', {form: form})
+                .success(function(data, status, headers){
+                    console.log('form created');
+
+                    // Clear form fields
+                   $scope.myform = {};
+                    // Redirect after save 
+                    $scope.goToWithId('viewForm', data._id+'');
+                }).error(function(errorResponse){
+                    console.log(errorResponse);
+                    $scope.error = errorResponse.data.message;
+                });
+            }
+        };
+    }
+]);

public/modules/forms/controllers/view-form.client.controller.js

@@ -1,28 +1,19 @@
 'use strict';
 
 // Forms controller
-angular.module('forms').controller('ViewFormController', ['$rootScope', '$scope', '$stateParams', '$state', 'Forms', 'CurrentForm','$http',
+angular.module('forms').controller('ViewFormController', ['$rootScope', '$scope', '$stateParams', '$state', 'Forms', 'CurrentForm', '$http', '$modal',
-	function($rootScope, $scope, $stateParams, $state, Forms, CurrentForm, $http) {
+	function($rootScope, $scope, $stateParams, $state, Forms, CurrentForm, $http, $modal) {
 
         $scope = $rootScope;
+        var deleteModal;
         $scope.myform = CurrentForm.getForm();
         $rootScope.saveInProgress = false;
         $scope.viewSubmissions = false;
-        $rootScope.showCreateModal = false;
         $scope.table = {
             masterChecker: false,
             rows: []
         };
 
-        // Return all user's Forms
-        $scope.findAll = function() {
-            if(!$scope.myforms){
-                Forms.query(function(_forms){
-                    $scope.myforms = _forms;
-                });
-            }
-        };
-
         // Find a specific Form
         $scope.findOne = function() {
             $scope.myform = Forms.get({
@@ -31,26 +22,10 @@ angular.module('forms').controller('ViewFormController', ['$rootScope', '$scope'
             CurrentForm.setForm($scope.myform);
         };
 
-        $scope.goToWithId = function(route, id) {
-            $state.go(route, {'formId': id}, {reload: true});
-        };
-
         $scope.setForm = function (form) {
             $scope.myform = form;
         };
 
-        //Modal functions
-        $scope.openCreateModal = function(){
-            if(!$rootScope.showCreateModal){
-                $rootScope.showCreateModal = true;
-            }
-        };
-        $scope.closeCreateModal = function(){
-            if($rootScope.showCreateModal){
-                $rootScope.showCreateModal = false;
-            }
-        };
-
         /*
         * Table Functions
         */
@@ -161,57 +136,56 @@ angular.module('forms').controller('ViewFormController', ['$rootScope', '$scope'
         	$scope.viewSubmissions = false;
         };
 
-        // Remove existing Form
+        /* 
-        $scope.remove = function(form_id) {
+        ** DeleteModal Functions 
-            var form = {};
+        */
-            if(!form_id){
+        $scope.openDeleteModal = function() {
-                form = CurrentForm.getForm();
+
-                if(!form) form = $scope.myform;
+            deleteModal = $modal.open({
-            }else {
+              animation: $scope.animationsEnabled,
-                form._id = form_id;
+              templateUrl: 'myModalContent.html',
+              controller: 'ViewFormController',
+            });
+        };
+        $scope.cancelDeleteModal = function(){
+            if(deleteModal){
+                deleteModal.dismiss('cancel');
             }
-    
-            $http.delete('/forms/'+form._id)
-                .success(function(data, status, headers){
-                    console.log('form deleted successfully');
-
-                    if(!form_id){
-                        $state.go('listForms');
-                    }
-                    if($scope.myforms.length > 0){
-                        $scope.myforms = _.filter($scope.myforms, function(myform){
-                            return myform._id !== form._id; 
-                        });
-                    }
-
-                }).error(function(error){
-                    console.log('ERROR: Form could not be deleted.');
-                    console.error(error);
-                });
         };
 
-        // Create new Form
+        // Remove existing Form
-        $scope.createNew = function(){
+        $scope.remove = function(form_id) {
-            var form = {};
+            if(deleteModal && deleteModal.opened){
-            form.title = $scope.myform.name.$modelValue;
-            form.language = $scope.myform.language.$modelValue;
-            console.log(form);
-            $rootScope.showCreateModal = true;
 
-            console.log($scope.myform);
+                deleteModal.close();
-            if($scope.myform.$valid && $scope.myform.$dirty){
+            
-                $http.post('/forms', {form: form})
+                var form = {};
-                .success(function(data, status, headers){
+                if(!form_id){
-                    console.log('form created');
+                    form = CurrentForm.getForm();
+                    if(!form) form = $scope.myform;
+                }else {
+                    form._id = form_id;
+                }
+        
+                $http.delete('/forms/'+form._id)
+                    .success(function(data, status, headers){
+                        console.log('form deleted successfully');
 
-                    // Clear form fields
+                        if(!form_id){
-                   $scope.myform = {};
+                            $state.go('listForms', {}, {reload: true}); 
-                    // Redirect after save 
+                        }
-                    $scope.goToWithId('viewForm', data._id+'');
+                        if($scope.myforms.length > 0){
-                }).error(function(errorResponse){
+                            $scope.myforms = _.filter($scope.myforms, function(myform){
-                    console.log(errorResponse);
+                                return myform._id !== form._id; 
-                    $scope.error = errorResponse.data.message;
+                            });
-                });
+                        }
+
+                    }).error(function(error){
+                        console.log('ERROR: Form could not be deleted.');
+                        console.error(error);
+                    }).finally(function(){
+
+                    });
             }
         };
 

public/modules/forms/css/form.css

@@ -6,28 +6,78 @@
     padding: 0.35em 1.2em 0.35em 1.2em;
 }
 
+/*
+** Modal CSS Styles 
+*/
+.modal-header {
+    padding: 15px;
+    border-bottom: 1px solid #e5e5e5;
+    font-size: 18px;
+    font-weight: normal;
+}
+.input-block {
+    display: block;
+    width: 100%;
+}
+.modal-footer input[type='text'] {
+    min-height: 34px;
+    padding: 7px 8px;
+    font-size: 13px;
+    color: #333;
+    vertical-align: middle;
+    background-color: #fff;
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    outline: none;
+    box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
+}
+.modal-body > .modal-body-alert {
+    color: #796620;
+    background-color: #f8eec7;
+    border-color: #f2e09a;
+    margin: -16px -15px 15px;
+    padding: 10px 15px;
+    border-style: solid;
+    border-width: 1px 0;
+}
+
+div.form-submitted > .field.row {
+    padding-bottom: 10%;
+    padding-top: 2%;
+}
+div.form-submitted > .field.row > div {
+    font-size: 1.7em;
+}
+
+/* Styles for accordion */
+form .accordion-edit {
+    width: inherit;
+}
+
 /* Styles for form submission view (/forms/:formID) */
 form .row.field {
     padding: 1em 0 3em 0;
 }
     form .row.field > .field-title {
         margin-top:0.5em;
-        font-size:1.5em;
+        font-size:1.2em;
+        padding-bottom: 1.8em;
+    }
+    form .row.field > .field-input {
+        font-size: 1.4em;
+        color: #777;
     }
     form.submission-form .row.field.statement > .field-title {
         font-size:1.7em;
     }
     form.submission-form .row.field.statement > .field-input {
-        font-size:1.2em;
+        font-size:1em;
         color:#ddd;
     }
 
-        form.submission-form .select.radio > .field-input input {
+        form.submission-form .select.radio > .field-input input, form.submission-form .select > .field-input input {
-            width:20%;
-        }
-
-
-        form.submission-form .select > .field-input input {
             width:20%;
         }
         form.submission-form .select > .field-input .btn {
@@ -38,18 +88,30 @@ form .row.field {
             font-size: 1.10em;
         }
 
-
+        /*form.submission-form .row.field > .field-input > input:focus {
-        form.submission-form .row.field > .field-input input {
-            width:100%;
-        }
-        form.submission-form .row.field .field-input > input:focus {
             font-size:1em;
+        }*/
+
+        form .row.field > .field-input > textarea{
+            padding: 0.45em 0.9em;
+            width: 100%;
+            line-height: 160%;
+            border: 2px dashed #ddd;
         }
 
-        form .row.field.textfield > .field-input > input{
+
-            padding:0.45em 0.9em;
+        form .row.field > .field-input > input.text-field-input{
-            width:100%;
+            padding: 0.45em 0.9em;
-            line-height:160%;
+            width: 100%;
+            line-height: 160%;
+            border: 2px dashed #ddd;
+        }
+        form .row.field > .field-input > input.text-field-input:focus{
+            border: 0;
+        }
+        form .required-error{
+            color: #ddd;
+            font-size:0.8em;
         }
 
     form .row.field.dropdown > .field-input {
@@ -152,6 +214,8 @@ div.config-form > .row {
 /*Styles for add fields tab*/
 .admin-form .add-field {
     background-color: #ddd;
+    padding: 0 2% 0 2%;
+    border-radius: 3px;
 }
     .admin-form .add-field .col-xs-6 {
         padding: 0.25em 0.4em;

public/modules/forms/directives/field-icon.client.directive.js

@@ -3,7 +3,7 @@
 angular.module('forms').directive('fieldIconDirective', function($http, $compile) {
     
     return {
-        templateUrl: './modules/forms/views/directiveViews/form/fieldIcon.html',
+        template: '<i class="{{typeIcon}}"></i>',
         restrict: 'E',
         scope: {
             typeName: '@'
@@ -24,6 +24,7 @@ angular.module('forms').directive('fieldIconDirective', function($http, $compile
 				'scale': 'fa fa-sliders',
 				'stripe': 'fa fa-credit-card',
 				'statement': 'fa fa-quote-left',
+				'yes_no': 'fa fa-toggle-on'
 			}
 			$scope.typeIcon = iconTypeMap[$scope.typeName];
         },

public/modules/forms/directives/field.client.directive.js

@@ -26,7 +26,9 @@ angular.module('forms').directive('fieldDirective', function($http, $compile) {
             'password',
             'radio',
             'legal',
-            'statement'
+            'statement',
+            'rating',
+            'yes_no'
         ];
         if (__indexOf.call(supported_fields, type) >= 0) {
             return templateUrl += type + '.html';

public/modules/forms/directives/submit-form.client.directive.js

@@ -1,7 +1,7 @@
 'use strict';
 
-angular.module('forms').directive('formDirective', ['$http', '$timeout', 'timeCounter', 'Auth',
+angular.module('forms').directive('formDirective', ['$http', '$timeout', 'timeCounter', 'Auth', '$filter',
-    function ($http, $timeout, timeCounter, Auth) {
+    function ($http, $timeout, timeCounter, Auth, $filter) {
         return {
             controller: function($scope){
                 timeCounter.startClock();
@@ -10,18 +10,21 @@ angular.module('forms').directive('formDirective', ['$http', '$timeout', 'timeCo
                     var _timeElapsed = timeCounter.stopClock();
                     $scope.form.timeElapsed = _timeElapsed;
 
-                    // console.log($scope.form.timeElapsed);
+                    $scope.form.percentageComplete = $filter('formValidity')($scope.form.visible_form_fields)/$scope.visible_form_fields.length;
-                    $scope.authentication = Auth;
+                    delete $scope.form.visible_form_fields;
-                    console.log($scope.authentication.isAuthenticated());
 
-                    $http.post('/forms/'+$scope.form._id,$scope.form).
+                    $scope.authentication = Auth;
+                    // console.log($scope.authentication.isAuthenticated());
+
+                    $scope.submitPromise = $http.post('/forms/'+$scope.form._id,$scope.form).
                     success(function(data, status, headers){
                         console.log('form submitted successfully');
-                        alert('Form submitted..');
+                        // alert('Form submitted..');
                         $scope.form.submitted = true;
                     })
                     .error(function(error){
                         console.log(error);
+                        $scope.error = error.message;
                     });
                 };
 
@@ -31,7 +34,7 @@ angular.module('forms').directive('formDirective', ['$http', '$timeout', 'timeCo
                         field.fieldValue = '';
                         return field;
                     }).value();
-                }
+                };
 
             },
             templateUrl: './modules/forms/views/directiveViews/form/submit-form.html',

public/modules/forms/services/form-fields.client.service.js

@@ -32,8 +32,8 @@ angular.module('forms').service('FormFields', [
 		        value : 'Checkbox'
 		    },
 		    {
-		        name : 'yes-no',
+		        name : 'yes_no',
-		        value : 'Yes or No'
+		        value : 'Yes/No'
 		    },
 		    {
 		        name : 'legal',

public/modules/forms/views/directiveViews/field/checkbox.html

@@ -1,7 +1,12 @@
-<div class="field row">
+<div class="field row" ng-if="field.fieldOptions.length > 0">
-	<div class="col-xs-5 field-title field-title">{{field.title}} </div>
+	<div class="col-xs-12 field-title field-title">{{field.title}} </div>
-    <div class="col-xs-7 field-input field-input">
+    <div class="col-xs-12 field-input">
-		<input ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" type="checkbox" ng-init="field.fieldValue = false" ng-required="field.required" ng-disabled="field.disabled"/>
+		<div ng-repeat="option in field.fieldOptions" class="row-fluid">
+            <label class="btn btn-info col-xs-3">
+                <input type="checkbox" value="{{option.option_value}}" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled" ng-init="field.fieldValue = field.fieldOptions[0].option_value"/>
+                <span ng-bind="option.option_title"></span>
+            </label>
+        </div>
 		<span class="required-error" ng-show="field.required && field.fieldValue == 0">(* required)</span>
 	</div>
 <div class="field row">

public/modules/forms/views/directiveViews/field/date.html

@@ -1,10 +1,14 @@
 <div class="field row">
-    <div class="col-xs-5 field-title">{{field.title}} </div>
+    <div class="col-xs-12 field-title">
-    <span class="required-error" ng-show="field.required && !field.fieldValue">* required </span>
+    	<h3>
-    <div class="col-xs-7 field-input">
+    		<span class="fa fa-angle-double-right"></span> 
+    		{{field.title}} 
+    		<span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span>
+    	</h3>
+    </div>
+    <div class="col-xs-12 field-input">
         <div class="control-group input-append">
             <input ui-date="dateOptions" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled">
-            <button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button>
         </div>
     </div>
 </div>

public/modules/forms/views/directiveViews/field/dropdown.html

@@ -1,6 +1,6 @@
 <div class="field row dropdown" ng-if="field.fieldOptions.length > 0">
-    <div class="col-xs-5 field-title">{{field.title}} </div>
+    <div class="col-xs-12 field-title"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3></div>
-    <div class="col-xs-7 field-input ">
+    <div class="col-xs-12 field-input ">
 		<select ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }"  ng-required="field.required" ng-disabled="field.disabled">
 			<option ng-repeat="option in field.fieldOptions" 
 					ng-selected="option.option_value == field.fieldValue"

public/modules/forms/views/directiveViews/field/email.html

@@ -1,7 +1,14 @@
 <div class="field row">
-    <div class="col-xs-5 field-title">{{field.title}} </div>
+    <div class="col-xs-12 field-title"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3></div>
-    <div class="col-xs-7 field-input">
+    <div class="col-xs-12 field-input">
-        <input type="email" placeholder="Email" value="{{field.fieldValue}}" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }"  ng-required="field.required" ng-disabled="field.disabled"/>
+        <input type="email" 
+        		class="text-field-input" 
+        		placeholder="email@example.com" 
+        		value="{{field.fieldValue}}" 
+        		ng-model="field.fieldValue" 
+        		ng-model-options="{ debounce: 250 }"  
+        		ng-required="field.required" 
+        		ng-disabled="field.disabled"/>
         <span class="required-error" ng-show="field.required && !field.fieldValue">* required</span>
     </div>
 </div>

public/modules/forms/views/directiveViews/field/legal.html

@@ -1,21 +1,21 @@
 <div class="field row radio legal">
     <div class="col-xs-12 field-title">    	
-    	{{field.title}}
+    	<h3>{{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3>
     	<br>
-    	<p>{{field.description}}</p>
+    	<p style="color:#ddd;">{{field.description}}</p>
     </div>
-    <div class="col-xs-3 field-input container">
+    <div class="col-xs-6 field-input container">
 		<div class="row-fluid">
-            <label class="btn col-xs-12">
+            <label class="btn col-xs-4">
                 <input type="radio" value="true" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }"   ng-required="field.required" ng-disabled="field.disabled"/>
                 <span> I accept </span>
             </label>
-            <label class="btn col-xs-12">
+            <label class="btn col-xs-5 col-xs-offset-1">
                 <input type="radio" value="false" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }"   ng-required="field.required" ng-disabled="field.disabled"/>
                 <span>I don't accept </span>
             </label>
         </div>
-        <span class="required-error" ng-show="field.required && !field.fieldValue">* required</span>
+       
     </div>
 </div>
 <br>

public/modules/forms/views/directiveViews/field/link.html

@@ -1,7 +1,7 @@
 <div class="field row">
-    <div class="col-xs-5 field-title">{{field.title}} </div>
+    <div class="col-xs-12 field-title"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3></div>
-    <div class="col-xs-7 field-input">
+    <div class="col-xs-12 field-input">
-        <input type="url" placeholder="https://example.com/something" value="{{field.fieldValue}}" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }"  ng-required="field.required" ng-disabled="field.disabled"/>
+        <input type="url" class="text-field-input" placeholder="https://example.com/something" value="{{field.fieldValue}}" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }"  ng-required="field.required" ng-disabled="field.disabled"/>
         <span class="required-error" ng-show="field.required && !field.fieldValue">* required</span>
     </div>
 </div>

public/modules/forms/views/directiveViews/field/password.html

@@ -1,7 +1,7 @@
 <div class="field row">
-    <div class="col-xs-5 field-title">{{field.title}} </div>
+    <div class="col-xs-12 field-title"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3></div>
-    <div class="col-xs-7 field-input">
+    <div class="col-xs-12 field-input">
-        <input type="password" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }"  value="{{field.fieldValue}}"  ng-required="field.required" ng-disabled="field.disabled">
+        <input type="password" class="text-field-input" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }"  value="{{field.fieldValue}}"  ng-required="field.required" ng-disabled="field.disabled">
         <span class="required-error" ng-show="field.required && !field.fieldValue">* required</span>
     </div>
 </div>

public/modules/forms/views/directiveViews/field/radio.html

@@ -1,8 +1,8 @@
 <div class="field row radio" ng-if="field.fieldOptions.length > 0">
-    <div class="col-xs-5 field-title">{{field.title}} </div>
+    <div class="col-xs-12 field-title"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3></div>
-    <div class="col-xs-7 field-input">
+    <div class="col-xs-12 field-input">
         <div ng-repeat="option in field.fieldOptions" class="row-fluid">
-            <label class="btn col-xs-12">
+            <label class="btn btn-info col-xs-3">
                 <input type="radio" value="{{option.option_value}}" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled" ng-init="field.fieldValue = field.fieldOptions[0].option_value"/>
                 <span ng-bind="option.option_title"></span>
             </label>

public/modules/forms/views/directiveViews/field/rating.html

@@ -1,12 +1,21 @@
 <div class="textfield field row">
-    <div class="col-xs-5 field-title">{{field.title}} </div>
+    <div class="col-xs-12 field-title">
-    <div class="col-xs-7 field-input">
+	    <h3>
+	    	<span class="fa fa-angle-double-right"></span> 
+	    	{{field.title}} 
+	    	<span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span>
+	    </h3>
+    </div>
+    <div class="col-xs-12 field-input">
 		<input-stars max="5"
-			ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }"  
+			icon-full="fa-star" icon-base="fa fa-3x" icon-empty="fa-star-o"
+			ng-init="field.fieldValue = 1"
+			ng-model="field.fieldValue" 
+			ng-model-options="{ debounce: 250 }"  
 			value="field.fieldValue" 
 			ng-required="field.required"
-			ng-disabled="field.disabled">
+			ng-disabled="field.disabled"
+			class="angular-input-stars">
 		</input-stars>
-        <span class="required-error" ng-show="field.required && !field.fieldValue">* required</span>
     </div>
 </div>

public/modules/forms/views/directiveViews/field/statement.html

@@ -1,12 +1,15 @@
-<div class="statement field row">
+<div class="statement field row container">
     <div class="col-xs-12 row field-title field-title">
-    	<i class="fa fa-quote-left fa-3 col-xs-10 col-xs-offset-2"></i>
+    	<i class="fa fa-quote-left fa-3 col-xs-1"></i>
-    	<h2 class="text-center col-xs-6 col-xs-offset-3">{{field.title}} </h2>
+    	<h2 class="text-center col-xs-8 ">{{field.title}} </h2>
-    	<i class="fa fa-quote-right fa-3 col-xs-offset-10"></i>
+    	<i class="fa fa-quote-right fa-3 col-xs-1"></i>
     </div>
-    <div class="col-xs-8 col-xs-offset-2 field-title field-input">
+    <div class="col-xs-10row field-title field-input">
-    	
-    	<p>{{field.description}} </p>
     	
+    	<p class="col-sm-12">{{field.description}} </p>
+    	<!-- <br>
+        <button class="btn btn-info col-sm-2" style="font-size: 1.3em;">
+                Continue 
+        </button> -->
     </div>
 </div>

public/modules/forms/views/directiveViews/field/textarea.html

@@ -1,7 +1,7 @@
 <div class="field row">
-    <div class="col-xs-5 field-title">{{field.title}} </div>
+    <div class="col-xs-12 field-title"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3></div>
-    <div class="col-xs-7 field-input">
+    <div class="col-xs-12 field-input">
         <textarea type="text" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }"  value="{{field.fieldValue}}" ng-required="field.required" ng-disabled="field.disabled"></textarea>
-        <span class="required-error" ng-show="field.required && !field.fieldValue">* required</span>
+       
     </div>
 </div>

public/modules/forms/views/directiveViews/field/textfield.html

@@ -1,7 +1,8 @@
 <div class="textfield field row">
-    <div class="col-xs-5 field-title">{{field.title}} </div>
+    <div class="col-xs-12 field-title"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3></div>
-    <div class="col-xs-7 field-input">
+    <div class="col-xs-12 field-input">
 		<input type="text" 
+			class="text-field-input" 
 			ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }"  
 			value="field.fieldValue" 
 			ng-required="field.required"

public/modules/forms/views/directiveViews/field/yes_no.html

@@ -0,0 +1,18 @@
+<div class="field row radio">
+    <div class="col-xs-12 field-title"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3></div>
+    <div class="col-xs-12 field-input">
+        <div class="row-fluid">
+            <label class="btn btn-success col-xs-3">
+                <input type="radio" value="true" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled" ng-init="field.fieldValue = true"/>
+                <span>Yes</span>
+            </label>
+
+            <label class="btn btn-danger col-xs-3">
+                <input type="radio" value="false" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled"/>
+                <span>No</span>
+            </label>
+        </div>
+        <span class="required-error" ng-show="field.required && !field.fieldValue">* required</span>
+    </div>
+</div>
+<br>

public/modules/forms/views/directiveViews/form/edit-form.html

@@ -7,7 +7,6 @@
         </button> -->
         <div class="row add-field-title">
             <h3 class="col-xs-12">Add New Field</h3>
-            <span ng-if="form.$dirty && form.$valid" class="help-block">Updating ...</span>
         </div>
         <div class="panel-group row" class="draggable" ng-model="addField.types">
             <div class="col-xs-6" ng-repeat="type in addField.types">
@@ -54,73 +53,77 @@
                                 </div>
                             </div>
                             <div class="row">
-                                <ul class="col-xs-4 container" style="list-style:none;border:2px lightgray solid;">
+                                <ul class="col-xs-12 container" style="list-style:none;border:2px lightgray solid;">
                                     <field-directive field="field">
                                     </field-directive>
                                 </ul>
                             </div>
 
-                            <div class="clear"></div> <hr>
+                            <div class="row"> 
+                                <hr>
+                            </div> 
+
 
                             <div class="row">
-                                <div class="col-xs-2">Field Type:</div>
+                                <div class="col-xs-5">Field Title:</div>
-                                <div class="col-xs-4">{{field.fieldType}}</div>
+                                <div class="col-xs-7">
+                                <input type="text" ng-model="field.title" value="{{field.title}}" required></div>
                             </div>
+                            <br>
                             <div class="row">
-                                <div class="col-xs-2">Field Title:</div>
+                                <div class="col-xs-5">Field Decription:</div>
-                                <div class="col-xs-4"><input type="text" ng-model="field.title" value="{{field.title}}" required></div>
+                                <div class="col-xs-7"><textarea type="text" ng-model="field.description" value="{{field.description}}"></textarea> </div>
                             </div>
-                            <div class="row">
+
-                                <div class="col-xs-2">Field Decription:</div>
+                            <div class="row" ng-show="showAddOptions(field)"><hr></div>
-                                <div class="col-xs-4"><textarea type="text" ng-model="field.title" value="{{field.description}}"></textarea> </div>
-                            </div>
-                            <br><br>
-                            <hr>
                             <div class="row" ng-show="showAddOptions(field)">
-                                <div class="col-xs-2">Field Options:</div>
+                                <div class="col-xs-4">Field Options:</div>
-                                <div class="col-xs-6 container">
+                                <div class="col-xs-8 container">
                                     <div ng-repeat="option in field.fieldOptions" class="row">
-                                        <input type="text" name="{{option.option_title}}" ng-model="option.option_title" value="{{option.option_title}}" class="col-xs-4">
+                                        <input type="text" name="{{option.option_title}}" ng-model="option.option_title" value="{{option.option_title}}" class="col-xs-5">
 
-                                        <a class="btn btn-danger btn-mini right" type="button" ng-click="deleteOption(field, option)" class="col-xs-3"><i  class="fa fa-trash-o"></i></a>
+                                        <a class="btn btn-danger btn-mini right" type="button" ng-click="deleteOption(field, option)" class="col-xs-3">
-                                        <span class="label label-inverse">Value: {{ option.option_value }}</span>
+                                            <i class="fa fa-trash-o"></i>
+                                        </a>
+                                        <span class="label label-inverse col-xs-4">
+                                            Value: {{ option.option_value }}
+                                        </span>
                                     </div>
                                     <button class="btn btn-primary btn-small" type="button" ng-click="addOption(field)"><i class="icon-plus icon-white"></i> Add Option</button>
                                 </div>
                             </div>
 
-                            <div class="clear"></div> <hr>
+                            <div class="row"> <hr></div> 
 
                             <div class="row">
-                                <div class="col-xs-2">Required:</div>
+                                <div class="col-xs-5 field-title">Required:</div>
-                                <div class="col-xs-4">
+                                <div class="col-xs-7 field-input">
-                                    <label>
+                                    <label class="btn col-xs-5">
-                                        <input type="radio" ng-value="true" ng-selected ng-model="field.required"/>
+                                        <input type="radio" value="true" ng-model="field.fieldValue" required />
-                                        &nbsp; Yes
+                                        <span> &nbsp; Yes</span>
                                     </label>
-                                    <label>
+
-                                        <input type="radio" ng-value="false" ng-model="field.required"/>
+                                    <label class="btn col-xs-5 col-xs-offset-1">
-                                        &nbsp; No
+                                        <input type="radio" value="false" ng-model="field.fieldValue" required />
+                                        <span> &nbsp; No</span>
                                     </label>
                                 </div>
                             </div>
-                            
+                            <br>
-                            <div class="clear"></div> <hr>
-
                             <div class="row">
-                                <div class="col-xs-2">Disabled:</div>
+                                <div class="col-xs-5 field-input">Disabled:</div>
-                                <div class="col-xs-4">
+                                <div class="col-xs-7 field-input">
-                                    <label>
+                                    <label class="btn col-xs-5">
-                                        <input type="radio" ng-value="true" ng-selected ng-model="field.disabled"/>
+                                        <input type="radio" value="true" ng-model="field.fieldValue" required />
-                                        &nbsp; Yes
+                                        <span> &nbsp; Yes</span>
                                     </label>
-                                    <label>
+
-                                        <input type="radio" ng-value="false" ng-model="field.disabled"/>
+                                    <label class="btn col-xs-5 col-xs-offset-1">
-                                        &nbsp; No
+                                        <input type="radio" value="false" ng-model="field.fieldValue" required />
+                                        <span> &nbsp; No</span>
                                     </label>
                                 </div>
-                            </div>
+                            </div>  
-                            <hr>   
                         </div>
                     </accordion-group>
 

public/modules/forms/views/directiveViews/form/fieldIcon.html

@@ -1 +0,0 @@
-<i class="{{typeIcon}}"></i>

public/modules/forms/views/directiveViews/form/submit-form.html

@@ -1,5 +1,5 @@
+<div cg-busy="{promise:submitPromise,message:'Submitting form...',backdrop:true}"></div>
 <div ng-hide="form.submitted">
-
     <div class="field row" style="padding-bottom:5em;">
         <div class="col-sm-10 col-sm-offset-1">
             <h1>{{ form.title }}</h1>
@@ -15,35 +15,32 @@
     <hr>
     <div class="row form-actions">
         <button class="btn btn-success col-sm-2 col-sm-offset-5" type="button" ng-disabled="myForm.$valid" ng-click="submit()" style="font-size: 1.6em;">
-                <i class="icon-edit icon-white"></i> submit 
+            Submit
         </button>
     </div>
 </div>
 
-<div ng-show="form.submitted">
+<div ng-show="form.submitted" class="form-submitted">
 
-    <div class="field row">
+    <!-- <div class="field row">
         <div class="col-sm-11 col-sm-offset-1"><h1>{{ form.title }}</h1>
         <hr>
         </div>
-    </div>
+    </div> -->
 
-    <br>
-    <br>
     <div class="field row text-center">
-    <h4 class="col-xs-6 col-xs-offset-1 text-left">Form entry successfully submitted!<br> What would you like to do next?</h4>
+        <div class="col-xs-6 col-xs-offset-3 text-center">Form entry successfully submitted!<br><br> Please take a seat and wait for your number to be called!</div>
     </div>
-    <br><br><br><br><br>
     <div class="row form-actions">
-        <p class="text-center col-xs-3 col-xs-offset-4">
+        <p class="text-center col-xs-4 col-xs-offset-4">
-            <button class="btn btn-success left" type="button">
+            <button class="btn btn-info" type="button">
-                <a href="#" ng-click="reloadForm()" style="color:white;"> Submit again?</a>
+                <a href="#" ng-click="reloadForm()" style="color:white; font-size: 1.6em; text-decoration: none;" > Go back to Form</a>
             </button>
         </p>
-        <p class="text-center col-xs-2" ng-if="authentication.isAuthenticated()">
+        <!-- <p class="text-center col-xs-2" ng-if="authentication.isAuthenticated()">
             <button class="btn btn-caution left" type="button">
-                <a href="/#!/forms/{{form._id}}/admin" style="color:white;">Edit Form</a>
+                <a href="/#!/forms/{{form._id}}/admin" style="color:white; font-size: 1.6em; text-decoration: none;">Edit Form</a>
             </button>
-        </p>
+        </p> -->
     </div>
 </div>

public/modules/forms/views/list-forms.client.view.html

@@ -1,11 +1,12 @@
 <section class="overlay" ng-if="showCreateModal" ng-click="closeCreateModal()"></section>
-<section data-ng-controller="ViewFormController as ctrl" data-ng-init="findAll()" class="container">
+<section data-ng-controller="ListFormsController as ctrl" data-ng-init="findAll()" class="container">
 
-	<div class="row">
+	<!-- div class="row">
 		<div class="page-header col-xs-10 col-xs-offset-1">
 			<h1>My MedForms</h1>
 		</div>
-	</div>
+	</div> -->
+	<br>
 	<div class="row">
 		<div ng-click="openCreateModal()" class="col-xs-2 col-xs-offset-1 form-item row create-new">
 			<div class="title-row col-xs-12">
@@ -21,32 +22,32 @@
 		</div>
 
 		<form name="createForm" class="col-xs-2 col-xs-offset-1 form-item row create-new new-form" ng-show="showCreateModal">
-		<div ng-init="setForm(createForm);" style="display:none;"></div>
+			<div ng-init="setForm(createForm);" style="display:none;"></div>
-			<div class="title-row row">
+				<div class="title-row row">
-				    <div class="col-xs-5 field-title">Name </div>
+					    <div class="col-xs-5 field-title">Name </div>
-				    <div class="col-xs-8 field-input">
+					    <div class="col-xs-8 field-input">
-						<input type="text" name="name" ng-model="name" required style="color:black; border:none;" ng-pattern="/^[a-zA-Z0-9 ]*$/"/>
+							<input type="text" name="name" ng-model="name" required style="color:black; border:none;" ng-pattern="/^[a-zA-Z0-9 ]*$/"/>
+					    </div>
+				</div>
+				<div class="details-row row">			
+				    <div class="col-xs-5 field-title text-left">
+				    	Language
 				    </div>
-			</div>
+				    <div class="col-xs-5 field-input">
-			<div class="details-row row">			
+						<select style="color:black;" name="language" required ng-model="formLanguage" ng-init="formLanguage = user.language">
-			    <div class="col-xs-5 field-title text-left">
+							<option ng-repeat="language in languages" value="{{language}}">
-			    	Language
+								{{language}}
-			    </div>
+							</option>
-			    <div class="col-xs-5 field-input">
+				        </select>      
-					<select style="color:black;" name="language" required ng-model="formLanguage" ng-init="formLanguage = user.language">
+				    </div>
-						<option ng-repeat="language in languages" value="{{language}}">
+				</div>
-							{{language}}
+				<div class="details-row row">			
-						</option>
+				    <div class="col-xs-12 field-title text-center">
-			        </select>      
+				    	<button class="btn btn-primary" ng-disabled="myForm.$invalid" ng-click="createNew()">
-			    </div>
+				    		Create Form
-			</div>
+				    	</button>
-			<div class="details-row row">			
+				    </div>
-			    <div class="col-xs-12 field-title text-center">
+				</div>		
-			    	<button class="btn btn-primary" ng-disabled="myForm.$invalid" ng-click="createNew()">
-			    		Create Form
-			    	</button>
-			    </div>
-			</div>		
 		</form>
 
 		<div data-ng-repeat="form in myforms" class="col-xs-2 col-xs-offset-1 form-item row">
@@ -69,7 +70,4 @@
 			
 		</div>
 	</div>
-<!-- 	<div class="alert alert-warning text-center" data-ng-if="forms.$resolved && !forms.length">
-		No forms yet, why don't you <a href="/#!/forms/create">create one</a>?
-	</div> -->
 </section>

public/modules/forms/views/view-form.client.view.html

@@ -1,11 +1,32 @@
 <section data-ng-controller="ViewFormController" data-ng-init="findOne()" class="container admin-form">
+
+	<!-- Modal Delete Dialog Template -->
+    <script type="text/ng-template" id="myModalContent.html">
+        <div class="modal-header">
+            <h2 class="modal-title">Are you ABSOLUTELY sure?</h3>
+        </div>
+        <div class="modal-body">
+        	<div class="modal-body-alert">
+			    Unexpected bad things will happen if you don’t read this!
+			  </div>
+       		 <p>This action <strong>CANNOT</strong> be undone. This will permanently delete the <strong>{{myform.title}}</strong> form, form submissions and remove all associated pdfs.</p>
+            <p>Please type in the name of the repository to confirm.</p>
+        </div>
+        <div class="modal-footer">
+        <p>
+			<input type="text" data-ng-model="deleteConfirm" class="input-block" autofocus required aria-label="Type in the name of the form to confirm that you want to delete this form.">
+		</p>
+            <button type="submit" ng-click="remove()" class="btn btn-block btn-danger" ng-disabled="myform.title != deleteConfirm">I understand the consequences, delete this form</button>
+        </div>
+    </script>
+
 	<div class="page-header row" style="padding-bottom: 0px;">
 		<div class="col-xs-6">
 			<h1 data-ng-bind="myform.title" style="margin-bottom: 0px;"></h1>
 		</div>
 		<div class="col-xs-2 col-xs-offset-2">
 			<small class=" pull-right">			
-				<button class="btn btn-danger" ng-click="remove()"><i class="fa fa-trash-o"></i> Delete Form</button>
+				<button class="btn btn-danger" ng-click="openDeleteModal()"><i class="fa fa-trash-o"></i> Delete Form</button>
 			</small>
 		</div>
 		<div class="col-xs-2">

public/modules/forms/views/view-public-form.client.view.html

@@ -1,7 +1,8 @@
-<link rel="stylesheet" href="./modules/forms/css/form.css">
+<!-- <link rel="stylesheet" href="./modules/forms/css/form.css">
+ -->
 
 <section data-ng-controller="SubmitFormController" class="public-form">
-
+   
 	<form-directive form="form"></form-directive>
 
 	<section ng-if="!form.hideFooter" class="navbar navbar-fixed-bottom" style="background-color:rgba(242,242,242,0.5); padding-top:15px;">
@@ -14,16 +15,16 @@
                 </ul>
                 <ul class="nav navbar-nav navbar-right">
                     <li style="padding-right:20px" >
-                        <a href="/#!/forms" class="btn btn-default" ng-hide="authentication.isAuthenticated()">create a Medform</a>
+                        <a href="/#!/forms" class="btn btn-default" ng-hide="authentication.isAuthenticated()">Create a Medform</a>
                     </li>
-                    <li style="padding-right:20px" ng-show="authentication.isAuthenticated()">
+                    <li style="padding-right:20px; padding-bottom:10px;" ng-show="authentication.isAuthenticated()">
-                        <a href="/#!/forms/{{form._id}}/admin" class="btn btn-default">edit this Medform</a>
+                        <a href="/#!/forms/{{form._id}}/admin" class="btn btn-default">Edit this Medform</a>
                     </li>
                     <li style="padding-left:5px">
-                        <div class="btn btn-info" id="focusDownButton">\/</div>
+                        <div class="btn btn-info" id="focusDownButton" style="padding: 15px;">\/</div>
                     </li>
                     <li style="padding-left:5px">
-                        <div class="btn btn-info" id="focusUpButton">/\</div>
+                        <div class="btn btn-info" id="focusUpButton" style="padding: 15px">/\</div>
                     </li>
                 </ul>
             </nav>

public/modules/users/css/users.css

@@ -1,3 +1,12 @@
+.row.auth form .field-input select {
+    padding: 0.45em 0.9em;
+    width: 100%;
+    background: transparent;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    height: 34px;
+}
+
 @media (min-width: 992px) {
 	.nav-users {
 		position: fixed;

public/modules/users/views/settings/edit-profile.client.view.html

@@ -1,6 +1,6 @@
 <section class="row auth" data-ng-controller="SettingsController" >
-	<h3 class="col-md-12 text-center">Edit your profile</h3>
+	<h3 class="col-xs-offset-1 col-xs-10 text-center">Edit your profile</h3>
-	<div class="col-xs-offset-2 col-xs-8 col-md-offset-3 col-md-6">
+	<div class="col-xs-offset-3 col-xs-6">
 		<form name="userForm" data-ng-submit="updateUserProfile(userForm.$valid)" class="signin form-horizontal" autocomplete="off">
 			<fieldset>
 				<div data-ng-show="success" class="text-center text-success">
@@ -10,18 +10,31 @@
 					Couldn't Save Your Profile.<br>
 					Error: <strong data-ng-bind="error"></strong>
 				</div>
-				<div class="form-group">
+				
-					<label for="firstName">First Name</label>
+				<div class="form-group row">
-					<input type="text" id="firstName" name="firstName" class="form-control" data-ng-model="user.firstName" placeholder="First Name">
+					<div class="col-xs-7 field-title">
+						<b>First Name</b>
+				    </div>
+					<div class="col-xs-12 field-input">
+						<input type="text" id="firstName" name="firstName" class="form-control" data-ng-model="user.firstName" placeholder="First Name">
+					</div>
 				</div>
-				<div class="form-group">
+				<div class="form-group row">
-					<label for="lastName">Last Name</label>
+					<div class="col-xs-7 field-title">
+						<b>Last Name</b>
+				    </div>
+					<div class="col-xs-12 field-input">
 					<input type="text" id="lastName" name="lastName" class="form-control" data-ng-model="user.lastName" placeholder="Last Name">
+					</div>
 				</div>
-
+				<div class="row">
-				<div class="field row form-group">
+					<hr>
-				    <div class="col-xs-7 field-title">Language </div>
+				</div>
-				    <div class="col-xs-5 field-input">
+				<div class="row form-group">
+				    <div class="col-xs-7 field-title">
+				    	<b>Language</b> 
+				    </div>
+				    <div class="col-xs-12 field-input">
 						<select ng-model="user.language" required>
 							<option ng-repeat="language in languages" 
 									ng-selected="language == user.language"
@@ -31,12 +44,19 @@
 				        </select>    
 				    </div>
 				</div>
-				<div class="form-group">
+
-					<label for="email">Email (also your username)</label>
+				<div class="row form-group">
-					<input type="email" id="email" name="email" class="form-control" data-ng-model="user.email" placeholder="Email">
+				    <div class="col-xs-7 field-title">
+				    	<b>Email</b> 
+				    	<small>(also your username)</small> 
+				    </div>
+				    <div class="col-xs-12 field-input">
+						<input type="email" id="email" name="email" class="form-control" data-ng-model="user.email" placeholder="Email">
+				    </div>
 				</div>
+
 				<div class="text-center form-group">
-					<button type="submit" class="btn btn-large btn-primary">Update Profile</button>
+					<button type="submit" class="btn btn-large btn-primary" style="font-size:1.6em;">Update Profile</button>
 				</div>
 
 			</fieldset>