From 798d28d92d0fd001342e2e1c07a1dd516d731720 Mon Sep 17 00:00:00 2001
From: David Baldwynn <shorerydr10@live.com>
Date: Tue, 31 Oct 2017 10:36:01 -0700
Subject: [PATCH] added routable tabs for configure panel

---
 .../forms/admin/config/i18n/english.js        |   2 +-
 .../admin-form.client.controller.js           |   2 +-
 .../configure-form.client.directive.js        |  29 ++-
 .../adminTabs/configureTabs/general.html      | 165 ++++++++++++++++
 .../respondent-notifications.html             | 164 ++++++++++++++++
 .../configureTabs/self-notifications.html     | 165 ++++++++++++++++
 .../form/configure-form.client.view.html      | 182 +-----------------
 .../forms/config/forms.client.routes.js       |  18 +-
 8 files changed, 540 insertions(+), 187 deletions(-)
 create mode 100644 public/modules/forms/admin/views/adminTabs/configureTabs/general.html
 create mode 100644 public/modules/forms/admin/views/adminTabs/configureTabs/respondent-notifications.html
 create mode 100644 public/modules/forms/admin/views/adminTabs/configureTabs/self-notifications.html

diff --git a/public/modules/forms/admin/config/i18n/english.js b/public/modules/forms/admin/config/i18n/english.js
index c6189d9f..20e4a966 100644
--- a/public/modules/forms/admin/config/i18n/english.js
+++ b/public/modules/forms/admin/config/i18n/english.js
@@ -20,7 +20,7 @@ angular.module('forms').config(['$translateProvider', function ($translateProvid
 		EMAIL_NOTIFICATION_RECIPIENTS: 'Email Notification Recipients',
 		GENERAL_TAB: 'General',
 		SELF_NOTIFICATIONS_TAB: 'Self notifications',
-		RESPONDANT_NOTIFICATIONS_TAB: 'Respondent notifications',
+		RESPONDENT_NOTIFICATIONS_TAB: 'Respondent notifications',
 
 		//List Forms View
 		CREATE_A_NEW_FORM: 'Create a new form',
diff --git a/public/modules/forms/admin/controllers/admin-form.client.controller.js b/public/modules/forms/admin/controllers/admin-form.client.controller.js
index 1743e623..82a0be1a 100644
--- a/public/modules/forms/admin/controllers/admin-form.client.controller.js
+++ b/public/modules/forms/admin/controllers/admin-form.client.controller.js
@@ -50,7 +50,7 @@ angular.module('forms').controller('AdminFormController', ['$rootScope', '$windo
             },
             {
                 heading: $filter('translate')('CONFIGURE_TAB'),
-                route: 'viewForm.configure'
+                route: 'viewForm.configure.general'
             },
             {
                 heading: $filter('translate')('ANALYZE_TAB'),
diff --git a/public/modules/forms/admin/directives/configure-form.client.directive.js b/public/modules/forms/admin/directives/configure-form.client.directive.js
index fe60f778..2f929bc3 100644
--- a/public/modules/forms/admin/directives/configure-form.client.directive.js
+++ b/public/modules/forms/admin/directives/configure-form.client.directive.js
@@ -1,23 +1,36 @@
 'use strict';
 
-angular.module('forms').directive('configureFormDirective', ['$rootScope', '$http', 'Upload', 'CurrentForm',
-    function ($rootScope, $http, Upload, CurrentForm) {
+angular.module('forms').directive('configureFormDirective', ['$rootScope', '$filter',
+    function ($rootScope, $filter) {
         return {
             templateUrl: 'modules/forms/admin/views/directiveViews/form/configure-form.client.view.html',
             restrict: 'E',
             scope: {
-                myform:'=',
-                user:'=',
-                pdfFields:'@',
-                formFields:'@'
+                myform:'='
             },
             controller: function($scope){
-                $scope.log = '';
                 $scope.languages = $rootScope.languages;
-
                 $scope.resetForm = $rootScope.resetForm;
                 $scope.update = $rootScope.update;
 
+                $scope.configureTabs = [
+                    {
+                        heading: $filter('translate')('GENERAL_TAB'),
+                        route: 'viewForm.configure.general'
+                    },
+                    {
+                        heading: $filter('translate')('SELF_NOTIFICATIONS_TAB'),
+                        route: 'viewForm.configure.self_notifications'
+                    },
+                    {
+                        heading: $filter('translate')('RESPONDENT_NOTIFICATIONS_TAB'),
+                        route: 'viewForm.configure.respondent_notifications'
+                    }
+                ];
+
+                $scope.go = function(route){
+                    $state.go(route);
+                };
             }
         };
     }
diff --git a/public/modules/forms/admin/views/adminTabs/configureTabs/general.html b/public/modules/forms/admin/views/adminTabs/configureTabs/general.html
new file mode 100644
index 00000000..a20176b9
--- /dev/null
+++ b/public/modules/forms/admin/views/adminTabs/configureTabs/general.html
@@ -0,0 +1,165 @@
+<!-- Settings -->
+<div class="row">
+    <div class="col-sm-offset-2 col-sm-4">
+        <div class="row field">
+            <div class="field-title col-sm-12">
+                <h5>{{ 'FORM_NAME' | translate }}</h5>
+            </div>
+
+            <div class="col-sm-12">
+                <input class="form-control"
+				    type="text"
+                    ng-model="myform.title"
+                    value="{{myform.title}}"
+                    style="width: 100%;"
+                    ng-minlength="4"
+                    ng-pattern="/^[a-zA-Z0-9 \-.]*$/">
+            </div>
+        </div>
+
+        <div class="row field">
+            <div class="field-title col-sm-12">
+                <h5>{{ 'FORM_STATUS' | translate }}</h5>
+            </div>
+
+            <div class="field-input col-sm-12">
+
+                <label style="display: inline-block;">
+                    <input type="radio" data-ng-value="true" ng-model="myform.isLive"  ng-required="true" style="background-color:#33CC00;"/>
+                    &nbsp;<span>{{ 'PUBLIC' | translate }}</span>
+                </label>
+
+                <label style="display: inline-block;">
+                    <input type="radio" data-ng-value="false" ng-model="myform.isLive"  ng-required="true" />
+                    &nbsp;<span>{{ 'PRIVATE' | translate }}</span>
+                </label>
+
+            </div>
+        </div>
+
+         <div class="row field">
+            <div class="field-title col-sm-12">
+                <h5>{{ 'ENABLE_EMAIL_NOTIFICATIONS' | translate }}</h5>
+            </div>
+
+            <div class="field-input col-sm-12">
+
+                <label style="display: inline-block;">
+                    <input type="radio" data-ng-value="true" ng-model="myform.emailNotifications.enabled"  ng-required="true" style="background-color:#33CC00;"/>
+                    &nbsp;<span>{{ 'YES' | translate }}</span>
+                </label>
+
+                <label style="display: inline-block;">
+                    <input type="radio" data-ng-value="false" ng-model="myform.emailNotifications.enabled"  ng-required="true" />
+                    &nbsp;<span>{{ 'NO' | translate }}</span>
+                </label>
+                
+            </div>
+        </div>
+
+        <div class="row field" ng-if="myform.emailNotifications.enabled">
+			<div class="field-title col-sm-12">
+				<h5>{{ 'EMAIL_NOTIFICATION_RECIPIENTS' | translate }}</h5>
+			</div>
+
+			<div class="col-sm-12">
+				<input class="form-control"
+					   type="text"
+					   ng-model="myform.emailNotifications.recipients"
+					   value="{{myform.emailNotifications.recipients}}"
+					   style="width: 100%;"
+					   placeholder="email@domain.com,email2@domain2.com,etc">
+			</div>
+		</div>
+
+
+        <div class="row field">
+            <div class="col-sm-12 field-title">{{ 'LANGUAGE' | translate }}</div>
+            <div class="col-sm-12 field-input">
+                <select ng-model="myform.language">
+                    <option ng-repeat="language in languages"
+                            ng-selected="language == myform.language"
+                            value="{{language}}">
+                        {{language}}
+                    </option>
+                </select>
+                <span class="required-error" ng-show="field.required && !field.fieldValue">* {{ 'REQUIRED_FIELD' | translate }}</span>
+            </div>
+        </div>
+    </div>
+	<div class="col-sm-4">
+		<div class="row field">
+			<div class="field-title col-sm-12">
+				<h5>{{ 'GA_TRACKING_CODE' | translate }}</h5>
+			</div>
+
+			<div class="col-sm-12">
+				<input class="form-control"
+					   type="text"
+					   ng-model="myform.analytics.gaCode"
+					   value="{{myform.analytics.gaCode}}"
+					   style="width: 100%;"
+					   ng-minlength="4"
+					   placeholder="UA-XXXXX-Y"
+					   ng-pattern="/\bUA-\d{4,10}-\d{1,4}\b/">
+			</div>
+		</div>
+		<div class="row field">
+			<div class="field-title col-sm-12">
+				<h5>{{ 'DISPLAY_FOOTER' | translate }}</h5>
+			</div>
+
+			<div class="field-input col-sm-12">
+				<label style="display: inline-block;">
+					<input type="radio" data-ng-value="false" ng-model="myform.hideFooter"  ng-required="true" />
+					&nbsp;<span>{{ 'YES' | translate }}</span>
+				</label>
+
+				<label style="display: inline-block;">
+					<input type="radio" data-ng-value="true" ng-model="myform.hideFooter"  ng-required="true" />
+					&nbsp;<span>{{ 'NO' | translate }}</span>
+				</label>
+			</div>
+		</div>
+
+		<div class="row field">
+			<div class="field-title col-sm-12">
+				<h5>{{ 'DISPLAY_START_PAGE' | translate }}</h5>
+			</div>
+
+			<div class="field-input col-sm-12">
+
+				<label style="display: inline-block;">
+					<input type="radio" data-ng-value="true" ng-model="myform.startPage.showStart"  ng-required="true" style="background-color:#33CC00;"/>
+					&nbsp;<span>{{ 'YES' | translate }}</span>
+				</label>
+
+				<label style="display: inline-block;">
+					<input type="radio" data-ng-value="false" ng-model="myform.startPage.showStart"  ng-required="true" />
+					&nbsp;<span>{{ 'NO' | translate }}</span>
+				</label>
+
+			</div>
+		</div>
+
+		<div class="row field">
+			<div class="field-title col-sm-12">
+				<h5>{{ 'DISPLAY_END_PAGE' | translate }}</h5>
+			</div>
+
+			<div class="field-input col-sm-12">
+
+				<label style="display: inline-block;">
+					<input type="radio" data-ng-value="true" ng-model="myform.endPage.showEnd"  ng-required="true" style="background-color:#33CC00;"/>
+					&nbsp;<span>{{ 'YES' | translate }}</span>
+				</label>
+
+				<label style="display: inline-block;">
+					<input type="radio" data-ng-value="false" ng-model="myform.endPage.showEnd"  ng-required="true" />
+					&nbsp;<span>{{ 'NO' | translate }}</span>
+				</label>
+
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/public/modules/forms/admin/views/adminTabs/configureTabs/respondent-notifications.html b/public/modules/forms/admin/views/adminTabs/configureTabs/respondent-notifications.html
new file mode 100644
index 00000000..161faedb
--- /dev/null
+++ b/public/modules/forms/admin/views/adminTabs/configureTabs/respondent-notifications.html
@@ -0,0 +1,164 @@
+<div class="row">
+    <div class="col-sm-offset-2 col-sm-4">
+        <div class="row field">
+            <div class="field-title col-sm-12">
+                <h5>{{ 'FORM_NAME' | translate }}</h5>
+            </div>
+
+            <div class="col-sm-12">
+                <input class="form-control"
+				    type="text"
+                    ng-model="myform.title"
+                    value="{{myform.title}}"
+                    style="width: 100%;"
+                    ng-minlength="4"
+                    ng-pattern="/^[a-zA-Z0-9 \-.]*$/">
+            </div>
+        </div>
+
+        <div class="row field">
+            <div class="field-title col-sm-12">
+                <h5>{{ 'FORM_STATUS' | translate }}</h5>
+            </div>
+
+            <div class="field-input col-sm-12">
+
+                <label style="display: inline-block;">
+                    <input type="radio" data-ng-value="true" ng-model="myform.isLive"  ng-required="true" style="background-color:#33CC00;"/>
+                    &nbsp;<span>{{ 'PUBLIC' | translate }}</span>
+                </label>
+
+                <label style="display: inline-block;">
+                    <input type="radio" data-ng-value="false" ng-model="myform.isLive"  ng-required="true" />
+                    &nbsp;<span>{{ 'PRIVATE' | translate }}</span>
+                </label>
+
+            </div>
+        </div>
+
+         <div class="row field">
+            <div class="field-title col-sm-12">
+                <h5>{{ 'ENABLE_EMAIL_NOTIFICATIONS' | translate }}</h5>
+            </div>
+
+            <div class="field-input col-sm-12">
+
+                <label style="display: inline-block;">
+                    <input type="radio" data-ng-value="true" ng-model="myform.emailNotifications.enabled"  ng-required="true" style="background-color:#33CC00;"/>
+                    &nbsp;<span>{{ 'YES' | translate }}</span>
+                </label>
+
+                <label style="display: inline-block;">
+                    <input type="radio" data-ng-value="false" ng-model="myform.emailNotifications.enabled"  ng-required="true" />
+                    &nbsp;<span>{{ 'NO' | translate }}</span>
+                </label>
+                
+            </div>
+        </div>
+
+        <div class="row field" ng-if="myform.emailNotifications.enabled">
+			<div class="field-title col-sm-12">
+				<h5>{{ 'EMAIL_NOTIFICATION_RECIPIENTS' | translate }}</h5>
+			</div>
+
+			<div class="col-sm-12">
+				<input class="form-control"
+					   type="text"
+					   ng-model="myform.emailNotifications.recipients"
+					   value="{{myform.emailNotifications.recipients}}"
+					   style="width: 100%;"
+					   placeholder="email@domain.com,email2@domain2.com,etc">
+			</div>
+		</div>
+
+
+        <div class="row field">
+            <div class="col-sm-12 field-title">{{ 'LANGUAGE' | translate }}</div>
+            <div class="col-sm-12 field-input">
+                <select ng-model="myform.language">
+                    <option ng-repeat="language in languages"
+                            ng-selected="language == myform.language"
+                            value="{{language}}">
+                        {{language}}
+                    </option>
+                </select>
+                <span class="required-error" ng-show="field.required && !field.fieldValue">* {{ 'REQUIRED_FIELD' | translate }}</span>
+            </div>
+        </div>
+    </div>
+	<div class="col-sm-4">
+		<div class="row field">
+			<div class="field-title col-sm-12">
+				<h5>{{ 'GA_TRACKING_CODE' | translate }}</h5>
+			</div>
+
+			<div class="col-sm-12">
+				<input class="form-control"
+					   type="text"
+					   ng-model="myform.analytics.gaCode"
+					   value="{{myform.analytics.gaCode}}"
+					   style="width: 100%;"
+					   ng-minlength="4"
+					   placeholder="UA-XXXXX-Y"
+					   ng-pattern="/\bUA-\d{4,10}-\d{1,4}\b/">
+			</div>
+		</div>
+		<div class="row field">
+			<div class="field-title col-sm-12">
+				<h5>{{ 'DISPLAY_FOOTER' | translate }}</h5>
+			</div>
+
+			<div class="field-input col-sm-12">
+				<label style="display: inline-block;">
+					<input type="radio" data-ng-value="false" ng-model="myform.hideFooter"  ng-required="true" />
+					&nbsp;<span>{{ 'YES' | translate }}</span>
+				</label>
+
+				<label style="display: inline-block;">
+					<input type="radio" data-ng-value="true" ng-model="myform.hideFooter"  ng-required="true" />
+					&nbsp;<span>{{ 'NO' | translate }}</span>
+				</label>
+			</div>
+		</div>
+
+		<div class="row field">
+			<div class="field-title col-sm-12">
+				<h5>{{ 'DISPLAY_START_PAGE' | translate }}</h5>
+			</div>
+
+			<div class="field-input col-sm-12">
+
+				<label style="display: inline-block;">
+					<input type="radio" data-ng-value="true" ng-model="myform.startPage.showStart"  ng-required="true" style="background-color:#33CC00;"/>
+					&nbsp;<span>{{ 'YES' | translate }}</span>
+				</label>
+
+				<label style="display: inline-block;">
+					<input type="radio" data-ng-value="false" ng-model="myform.startPage.showStart"  ng-required="true" />
+					&nbsp;<span>{{ 'NO' | translate }}</span>
+				</label>
+
+			</div>
+		</div>
+
+		<div class="row field">
+			<div class="field-title col-sm-12">
+				<h5>{{ 'DISPLAY_END_PAGE' | translate }}</h5>
+			</div>
+
+			<div class="field-input col-sm-12">
+
+				<label style="display: inline-block;">
+					<input type="radio" data-ng-value="true" ng-model="myform.endPage.showEnd"  ng-required="true" style="background-color:#33CC00;"/>
+					&nbsp;<span>{{ 'YES' | translate }}</span>
+				</label>
+
+				<label style="display: inline-block;">
+					<input type="radio" data-ng-value="false" ng-model="myform.endPage.showEnd"  ng-required="true" />
+					&nbsp;<span>{{ 'NO' | translate }}</span>
+				</label>
+
+			</div>
+		</div>
+					</div>
+			    </div>
\ No newline at end of file
diff --git a/public/modules/forms/admin/views/adminTabs/configureTabs/self-notifications.html b/public/modules/forms/admin/views/adminTabs/configureTabs/self-notifications.html
new file mode 100644
index 00000000..a20176b9
--- /dev/null
+++ b/public/modules/forms/admin/views/adminTabs/configureTabs/self-notifications.html
@@ -0,0 +1,165 @@
+<!-- Settings -->
+<div class="row">
+    <div class="col-sm-offset-2 col-sm-4">
+        <div class="row field">
+            <div class="field-title col-sm-12">
+                <h5>{{ 'FORM_NAME' | translate }}</h5>
+            </div>
+
+            <div class="col-sm-12">
+                <input class="form-control"
+				    type="text"
+                    ng-model="myform.title"
+                    value="{{myform.title}}"
+                    style="width: 100%;"
+                    ng-minlength="4"
+                    ng-pattern="/^[a-zA-Z0-9 \-.]*$/">
+            </div>
+        </div>
+
+        <div class="row field">
+            <div class="field-title col-sm-12">
+                <h5>{{ 'FORM_STATUS' | translate }}</h5>
+            </div>
+
+            <div class="field-input col-sm-12">
+
+                <label style="display: inline-block;">
+                    <input type="radio" data-ng-value="true" ng-model="myform.isLive"  ng-required="true" style="background-color:#33CC00;"/>
+                    &nbsp;<span>{{ 'PUBLIC' | translate }}</span>
+                </label>
+
+                <label style="display: inline-block;">
+                    <input type="radio" data-ng-value="false" ng-model="myform.isLive"  ng-required="true" />
+                    &nbsp;<span>{{ 'PRIVATE' | translate }}</span>
+                </label>
+
+            </div>
+        </div>
+
+         <div class="row field">
+            <div class="field-title col-sm-12">
+                <h5>{{ 'ENABLE_EMAIL_NOTIFICATIONS' | translate }}</h5>
+            </div>
+
+            <div class="field-input col-sm-12">
+
+                <label style="display: inline-block;">
+                    <input type="radio" data-ng-value="true" ng-model="myform.emailNotifications.enabled"  ng-required="true" style="background-color:#33CC00;"/>
+                    &nbsp;<span>{{ 'YES' | translate }}</span>
+                </label>
+
+                <label style="display: inline-block;">
+                    <input type="radio" data-ng-value="false" ng-model="myform.emailNotifications.enabled"  ng-required="true" />
+                    &nbsp;<span>{{ 'NO' | translate }}</span>
+                </label>
+                
+            </div>
+        </div>
+
+        <div class="row field" ng-if="myform.emailNotifications.enabled">
+			<div class="field-title col-sm-12">
+				<h5>{{ 'EMAIL_NOTIFICATION_RECIPIENTS' | translate }}</h5>
+			</div>
+
+			<div class="col-sm-12">
+				<input class="form-control"
+					   type="text"
+					   ng-model="myform.emailNotifications.recipients"
+					   value="{{myform.emailNotifications.recipients}}"
+					   style="width: 100%;"
+					   placeholder="email@domain.com,email2@domain2.com,etc">
+			</div>
+		</div>
+
+
+        <div class="row field">
+            <div class="col-sm-12 field-title">{{ 'LANGUAGE' | translate }}</div>
+            <div class="col-sm-12 field-input">
+                <select ng-model="myform.language">
+                    <option ng-repeat="language in languages"
+                            ng-selected="language == myform.language"
+                            value="{{language}}">
+                        {{language}}
+                    </option>
+                </select>
+                <span class="required-error" ng-show="field.required && !field.fieldValue">* {{ 'REQUIRED_FIELD' | translate }}</span>
+            </div>
+        </div>
+    </div>
+	<div class="col-sm-4">
+		<div class="row field">
+			<div class="field-title col-sm-12">
+				<h5>{{ 'GA_TRACKING_CODE' | translate }}</h5>
+			</div>
+
+			<div class="col-sm-12">
+				<input class="form-control"
+					   type="text"
+					   ng-model="myform.analytics.gaCode"
+					   value="{{myform.analytics.gaCode}}"
+					   style="width: 100%;"
+					   ng-minlength="4"
+					   placeholder="UA-XXXXX-Y"
+					   ng-pattern="/\bUA-\d{4,10}-\d{1,4}\b/">
+			</div>
+		</div>
+		<div class="row field">
+			<div class="field-title col-sm-12">
+				<h5>{{ 'DISPLAY_FOOTER' | translate }}</h5>
+			</div>
+
+			<div class="field-input col-sm-12">
+				<label style="display: inline-block;">
+					<input type="radio" data-ng-value="false" ng-model="myform.hideFooter"  ng-required="true" />
+					&nbsp;<span>{{ 'YES' | translate }}</span>
+				</label>
+
+				<label style="display: inline-block;">
+					<input type="radio" data-ng-value="true" ng-model="myform.hideFooter"  ng-required="true" />
+					&nbsp;<span>{{ 'NO' | translate }}</span>
+				</label>
+			</div>
+		</div>
+
+		<div class="row field">
+			<div class="field-title col-sm-12">
+				<h5>{{ 'DISPLAY_START_PAGE' | translate }}</h5>
+			</div>
+
+			<div class="field-input col-sm-12">
+
+				<label style="display: inline-block;">
+					<input type="radio" data-ng-value="true" ng-model="myform.startPage.showStart"  ng-required="true" style="background-color:#33CC00;"/>
+					&nbsp;<span>{{ 'YES' | translate }}</span>
+				</label>
+
+				<label style="display: inline-block;">
+					<input type="radio" data-ng-value="false" ng-model="myform.startPage.showStart"  ng-required="true" />
+					&nbsp;<span>{{ 'NO' | translate }}</span>
+				</label>
+
+			</div>
+		</div>
+
+		<div class="row field">
+			<div class="field-title col-sm-12">
+				<h5>{{ 'DISPLAY_END_PAGE' | translate }}</h5>
+			</div>
+
+			<div class="field-input col-sm-12">
+
+				<label style="display: inline-block;">
+					<input type="radio" data-ng-value="true" ng-model="myform.endPage.showEnd"  ng-required="true" style="background-color:#33CC00;"/>
+					&nbsp;<span>{{ 'YES' | translate }}</span>
+				</label>
+
+				<label style="display: inline-block;">
+					<input type="radio" data-ng-value="false" ng-model="myform.endPage.showEnd"  ng-required="true" />
+					&nbsp;<span>{{ 'NO' | translate }}</span>
+				</label>
+
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/public/modules/forms/admin/views/directiveViews/form/configure-form.client.view.html b/public/modules/forms/admin/views/directiveViews/form/configure-form.client.view.html
index a85814f4..c203ec0f 100644
--- a/public/modules/forms/admin/views/directiveViews/form/configure-form.client.view.html
+++ b/public/modules/forms/admin/views/directiveViews/form/configure-form.client.view.html
@@ -1,180 +1,12 @@
 <div class="config-form container">
 
-	<uib-tabset active="activePill" vertical="true" type="pills">
-		<uib-tab index="0" heading="{{ 'GENERAL_TAB' | translate }}">
-			<!-- Settings -->
-			<div class="row">
-		        <div class="col-sm-offset-2 col-sm-4">
-		            <div class="row field">
-		                <div class="field-title col-sm-12">
-		                    <h5>{{ 'FORM_NAME' | translate }}</h5>
-		                </div>
-
-		                <div class="col-sm-12">
-		                    <input class="form-control"
-							    type="text"
-		                        ng-model="myform.title"
-		                        value="{{myform.title}}"
-		                        style="width: 100%;"
-		                        ng-minlength="4"
-		                        ng-pattern="/^[a-zA-Z0-9 \-.]*$/">
-		                </div>
-		            </div>
-
-		            <div class="row field">
-		                <div class="field-title col-sm-12">
-		                    <h5>{{ 'FORM_STATUS' | translate }}</h5>
-		                </div>
-
-		                <div class="field-input col-sm-12">
-
-		                    <label style="display: inline-block;">
-		                        <input type="radio" data-ng-value="true" ng-model="myform.isLive"  ng-required="true" style="background-color:#33CC00;"/>
-		                        &nbsp;<span>{{ 'PUBLIC' | translate }}</span>
-		                    </label>
-
-		                    <label style="display: inline-block;">
-		                        <input type="radio" data-ng-value="false" ng-model="myform.isLive"  ng-required="true" />
-		                        &nbsp;<span>{{ 'PRIVATE' | translate }}</span>
-		                    </label>
-
-		                </div>
-		            </div>
-
-		             <div class="row field">
-		                <div class="field-title col-sm-12">
-		                    <h5>{{ 'ENABLE_EMAIL_NOTIFICATIONS' | translate }}</h5>
-		                </div>
-
-		                <div class="field-input col-sm-12">
-
-		                    <label style="display: inline-block;">
-		                        <input type="radio" data-ng-value="true" ng-model="myform.emailNotifications.enabled"  ng-required="true" style="background-color:#33CC00;"/>
-		                        &nbsp;<span>{{ 'YES' | translate }}</span>
-		                    </label>
-
-		                    <label style="display: inline-block;">
-		                        <input type="radio" data-ng-value="false" ng-model="myform.emailNotifications.enabled"  ng-required="true" />
-		                        &nbsp;<span>{{ 'NO' | translate }}</span>
-		                    </label>
-		                    
-		                </div>
-		            </div>
-
-		            <div class="row field" ng-if="myform.emailNotifications.enabled">
-						<div class="field-title col-sm-12">
-							<h5>{{ 'EMAIL_NOTIFICATION_RECIPIENTS' | translate }}</h5>
-						</div>
-
-						<div class="col-sm-12">
-							<input class="form-control"
-								   type="text"
-								   ng-model="myform.emailNotifications.recipients"
-								   value="{{myform.emailNotifications.recipients}}"
-								   style="width: 100%;"
-								   placeholder="email@domain.com,email2@domain2.com,etc">
-						</div>
-					</div>
-
-
-		            <div class="row field">
-		                <div class="col-sm-12 field-title">{{ 'LANGUAGE' | translate }}</div>
-		                <div class="col-sm-12 field-input">
-		                    <select ng-model="myform.language">
-		                        <option ng-repeat="language in languages"
-		                                ng-selected="language == myform.language"
-		                                value="{{language}}">
-		                            {{language}}
-		                        </option>
-		                    </select>
-		                    <span class="required-error" ng-show="field.required && !field.fieldValue">* {{ 'REQUIRED_FIELD' | translate }}</span>
-		                </div>
-		            </div>
-		        </div>
-				<div class="col-sm-4">
-					<div class="row field">
-						<div class="field-title col-sm-12">
-							<h5>{{ 'GA_TRACKING_CODE' | translate }}</h5>
-						</div>
-
-						<div class="col-sm-12">
-							<input class="form-control"
-								   type="text"
-								   ng-model="myform.analytics.gaCode"
-								   value="{{myform.analytics.gaCode}}"
-								   style="width: 100%;"
-								   ng-minlength="4"
-								   placeholder="UA-XXXXX-Y"
-								   ng-pattern="/\bUA-\d{4,10}-\d{1,4}\b/">
-						</div>
-					</div>
-					<div class="row field">
-						<div class="field-title col-sm-12">
-							<h5>{{ 'DISPLAY_FOOTER' | translate }}</h5>
-						</div>
-
-						<div class="field-input col-sm-12">
-							<label style="display: inline-block;">
-								<input type="radio" data-ng-value="false" ng-model="myform.hideFooter"  ng-required="true" />
-								&nbsp;<span>{{ 'YES' | translate }}</span>
-							</label>
-
-							<label style="display: inline-block;">
-								<input type="radio" data-ng-value="true" ng-model="myform.hideFooter"  ng-required="true" />
-								&nbsp;<span>{{ 'NO' | translate }}</span>
-							</label>
-						</div>
-					</div>
-
-					<div class="row field">
-						<div class="field-title col-sm-12">
-							<h5>{{ 'DISPLAY_START_PAGE' | translate }}</h5>
-						</div>
-
-						<div class="field-input col-sm-12">
-
-							<label style="display: inline-block;">
-								<input type="radio" data-ng-value="true" ng-model="myform.startPage.showStart"  ng-required="true" style="background-color:#33CC00;"/>
-								&nbsp;<span>{{ 'YES' | translate }}</span>
-							</label>
-
-							<label style="display: inline-block;">
-								<input type="radio" data-ng-value="false" ng-model="myform.startPage.showStart"  ng-required="true" />
-								&nbsp;<span>{{ 'NO' | translate }}</span>
-							</label>
-
-						</div>
-					</div>
-
-					<div class="row field">
-						<div class="field-title col-sm-12">
-							<h5>{{ 'DISPLAY_END_PAGE' | translate }}</h5>
-						</div>
-
-						<div class="field-input col-sm-12">
-
-							<label style="display: inline-block;">
-								<input type="radio" data-ng-value="true" ng-model="myform.endPage.showEnd"  ng-required="true" style="background-color:#33CC00;"/>
-								&nbsp;<span>{{ 'YES' | translate }}</span>
-							</label>
-
-							<label style="display: inline-block;">
-								<input type="radio" data-ng-value="false" ng-model="myform.endPage.showEnd"  ng-required="true" />
-								&nbsp;<span>{{ 'NO' | translate }}</span>
-							</label>
-
-						</div>
-					</div>
-				</div>
-		    </div>
-		</uib-tab>
-
-		<uib-tab index="1" heading="{{ 'SELF_NOTIFICATIONS' | translate }}">
-		</uib-tab>
-
-		<uib-tab index="2" heading="{{ 'RESPONDANT_NOTIFICATIONS' | translate }}">
-		</uib-tab>
-	</uib-tabset>
+	<div class="row">
+		<uib-tabset active="activePill" type="pills">
+			<uib-tab ng-repeat="tab in configureTabs" index="$index" heading="{{tab.heading}}" select="go(tab.route)">
+				<div ui-view></div>
+			</uib-tab>
+		</uib-tabset>
+	</div>
 
     <div class="row">
 		<div class="col-sm-offset-4 col-sm-2">
diff --git a/public/modules/forms/config/forms.client.routes.js b/public/modules/forms/config/forms.client.routes.js
index 70cabd59..fd5aeb3f 100644
--- a/public/modules/forms/config/forms.client.routes.js
+++ b/public/modules/forms/config/forms.client.routes.js
@@ -64,10 +64,24 @@ angular.module('forms').config(['$stateProvider',
 		}).state('viewForm.create', {
 			url: '/create',
 			templateUrl: 'modules/forms/admin/views/adminTabs/create.html'
-		}).state('viewForm.configure', {
+		})
+
+		.state('viewForm.configure', {
+			abstract: true,
 			url: '/configure',
 			templateUrl: 'modules/forms/admin/views/adminTabs/configure.html'
-	    }).state('viewForm.design', {
+	    }).state('viewForm.configure.general', {
+			url: '/general',
+			templateUrl: 'modules/forms/admin/views/adminTabs/configureTabs/general.html'
+	    }).state('viewForm.configure.self_notifications', {
+			url: '/self_notifications',
+			templateUrl: 'modules/forms/admin/views/adminTabs/configureTabs/self_notifications.html'
+	    }).state('viewForm.configure.respondent_notifications', {
+			url: '/respondent_notifications',
+			templateUrl: 'modules/forms/admin/views/adminTabs/configureTabs/respondent_notifications.html'
+	    })
+
+	    .state('viewForm.design', {
 			url: '/design',
 			templateUrl: 'modules/forms/admin/views/adminTabs/design.html'
 		}).state('viewForm.share', {