initial seed code commit VVP-9

Change-Id: I4d48180db7eba7cb7c299ab618f04d2092868085
Signed-off-by: Paul McGoldrick <paul.mcgoldrick@att.com>

6 files changed, 888 insertions, 0 deletions

diff --git a/d2ice.att.io/app/main/dashboard/get-started-modal/get-started-modal.directive.js b/d2ice.att.io/app/main/dashboard/get-started-modal/get-started-modal.directive.js
new file mode 100755
index 00000000..3676e51c
--- /dev/null
+++ b/d2ice.att.io/app/main/dashboard/get-started-modal/get-started-modal.directive.js
@@ -0,0 +1,308 @@
+//
+// ============LICENSE_START========================================== 
+// org.onap.vvp/portal
+// ===================================================================
+// Copyright © 2017 AT&T Intellectual Property. All rights reserved.
+// ===================================================================
+//
+// Unless otherwise specified, all software contained herein is licensed
+// under the Apache License, Version 2.0 (the “License”);
+// you may not use this software except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//          http:www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+//
+//
+// Unless otherwise specified, all documentation contained herein is licensed
+// under the Creative Commons License, Attribution 4.0 Intl. (the “License”);
+// you may not use this documentation except in compliance with the License.
+// You may obtain a copy of the License at
+// 
+//          https:creativecommons.org/licenses/by/4.0/
+//
+// Unless required by applicable law or agreed to in writing, documentation
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+// ============LICENSE_END============================================
+// 
+// ECOMP is a trademark and service mark of AT&T Intellectual Property.
+(function () {
+    'use strict';
+    angular
+        .module('ice.dashboard.get-started-modal')
+        .directive('getStartedModal', function () {
+            return {
+                restrict: 'AEC',
+                scope: {},
+                link: function (scope, elm, attrs) {
+                    scope.$emit('openGettingStartedWizardLoaded');
+                },
+                controller: ['$rootScope', '$scope', '$uibModal', 'toastService', '$log',
+                    function ($rootScope, $scope, $uibModal, toastService, $log) {
+
+                    var gm = this;
+                    gm.data = {};
+
+                    gm.openModal = function () {
+                        toastService.clearToast();
+                        var modalInstance = $uibModal.open({
+                            templateUrl: 'main/dashboard/get-started-modal/wizard/wizard-container.html',
+                            controller: 'ModalCtrl',
+                            controllerAs: 'wizard',
+                            resolve: {
+                                wizardData: function () {
+                                    return gm.wizardData;
+                                }
+                            },
+                            backdrop: 'static'
+                        });
+                    };
+
+                    $scope.$on('openGettingStartedWizard', function (event, args) {
+
+                        gm.wizardData = args;
+                        gm.openModal();
+                    });
+                }],
+                controllerAs: 'gm'
+            };
+        })
+        .controller('ModalCtrl', ['$rootScope', '$scope', '$uibModalInstance', 'vfService', 'usersService', 'localStorageService', 'wizardData', 'toastService', '$log', '$i18next',
+            function ($rootScope, $scope, $uibModalInstance, vfService, usersService, localStorageService, wizardData, toastService, $log, $i18next) {
+
+            var wizard = this;
+            wizard.steps = [];
+            wizard.data = {};
+            wizard.user = wizardData.user;
+            wizard.is_service_provider_internal = wizardData.is_service_provider_internal;
+            wizard.eng_uuid = wizardData.eng_uuid;
+            wizard.requiredStep = wizardData.requiredStep;
+            
+            var serviceProviderName = $i18next.t('serviceProvider.name');
+
+            var availableSteps = {
+                addVF: {name: 'addVF', title: 'Add a VF'},
+                addSponsor: {
+                    name: 'addContact',
+                    title: 'Add ' + serviceProviderName +' Sponsor',
+                    mode: 'sponsor',
+                    submitButton: 'Add ' + serviceProviderName + ' Sponsor'
+                },
+                addVendor: {
+                    name: 'addContact',
+                    title: 'Add Vendor Contact',
+                    mode: 'vendor',
+                    submitButton: 'Add Vendor Cotact',
+                },
+                inviteMembers: {name: 'inviteMembers', title: 'Invite Team Members'},
+                addSSH: {name: 'addSSH', title: 'Add SSH Key'}
+            };
+
+            wizard.setStep = function (step) {
+                wizard.currentStep = step
+                wizard.title = step.title;
+                step.completed = true;
+            };
+
+            function initWizard() {
+
+                $rootScope.ice.loader.show = true;
+
+                if (wizardData.showActivationMessage) {
+                    toastService.setToast('You have successfully activated your account!', 'success', {displayFor: 'modal'});
+                }
+
+                wizard.stepIndex = 0;
+
+                if (wizard.requiredStep) {
+                    wizard.steps.push(availableSteps[wizard.requiredStep]);
+                    wizard.setStep(wizard.steps[wizard.stepIndex]);
+                    $rootScope.ice.loader.show = false;
+                    return;
+                }
+
+                if (!wizard.eng_uuid || wizard.eng_uuid === "") {
+                    wizard.steps.push(availableSteps.addVF);
+                }
+                if (wizard.user.is_service_provider_contact === true && !wizard.is_service_provider_internal) {
+                    wizard.steps.push(availableSteps.addVendor);
+                } else if (!wizard.user.is_service_provider_contact) {
+                    wizard.steps.push(availableSteps.addSponsor);
+                }
+
+                getCompanies();
+
+                wizard.steps.push(availableSteps.inviteMembers);
+
+                var userData = usersService.getUserData() || {};
+                var ssh_public_key = userData.ssh_public_key;
+                if ((wizard.user.ssh_public_key === "" || wizard.user.ssh_public_key === null) &&
+                    (ssh_public_key === "" || ssh_public_key === null)) {
+                    wizard.steps.push(availableSteps.addSSH);
+                }
+
+                $rootScope.ice.loader.show = false;
+                wizard.setStep(wizard.steps[wizard.stepIndex]);
+            }
+
+            initWizard();
+
+            wizard.getCurrentStep = function () {
+                return wizard.currentStep.name;
+            };
+
+            wizard.nextStep = function () {
+                wizard.clearMessage();
+                wizard.stepIndex++;
+
+                if (wizard.stepIndex === (wizard.steps.length)) {
+                    wizard.closeWizard();
+                    return;
+                }
+
+                wizard.setStep(wizard.steps[wizard.stepIndex]);
+            };
+
+            wizard.closeWizard = function () {
+                wizard.clearMessage();
+                $uibModalInstance.close();
+
+            };
+
+            wizard.clearMessage = function () {
+                toastService.clearToast();
+            };
+
+            wizard.onAddContactSubmit = function () {
+                $rootScope.ice.loader.show = true;
+                wizard.data.addContact.eng_uuid = wizard.eng_uuid;
+
+                if (wizard.user.is_main_vendor_contact === true && !wizard.is_service_provider_internal) {
+                    wizard.data.addContact.company = wizard.data.addContact.company;
+                } else if (!wizard.user.is_main_vendor_contact) {
+                    wizard.data.addContact.company = wizard.data.attCompanyUuid;
+                }
+
+                usersService.addVendorContact(wizard.data.addContact)
+                    .then(function (response) {
+                        if (response.status === 200) {
+                            $rootScope.ice.loader.show = false;
+                            wizard.nextStep();
+                        }
+                    }, function	(error) {
+                        toastService.setToast(error.message, 'danger', {displayFor: 'modal'});
+                        $log.error(error.message);
+                        $rootScope.ice.loader.show = false;
+                    })
+                    .catch(function (error) {
+                        wizard.Msg = error.status + " : " + error.statusText;
+                        wizard.bgColor = "#FFEBEB"; // RED #FFEBEB green DFF0D9
+                        $log.error(error);
+                        $rootScope.ice.loader.show = false;
+                    });
+            };
+
+            wizard.onInviteSubmit = function () {
+                $rootScope.ice.loader.show = true;
+                var is_service_provider_internal;
+                var jsonInviteMembers = [];
+                angular.forEach(wizard.inviteMembers.choices, function (value, key) {
+                    wizard.item = [];
+                    var jsonItem = new Object();
+                    jsonItem.email = value.email;
+                    jsonItem.eng_uuid = wizard.eng_uuid;
+                    jsonInviteMembers.push(jsonItem);
+                });
+
+                vfService.inviteMembers(JSON.stringify(jsonInviteMembers))
+                    .then(function (response) {
+                        if (response.status === 200) {
+                            wizard.nextStep();
+                        }
+                        $rootScope.ice.loader.show = false;
+                    })
+                    .catch(function (error) {
+                        toastService.setToast(error.message.detail, 'danger', {displayFor: 'modal'});
+                        $rootScope.ice.loader.show = false;
+                        $log.error(error.message);
+                    });
+            };
+
+            wizard.inviteMembers = {
+                choices: [
+                    {
+                        email: '',
+                        eng_uuid: ''
+                    }]
+            };
+
+            wizard.addNewChoice = function () {
+                var newItemNo = wizard.inviteMembers.choices.length + 1;
+                wizard.inviteMembers.choices.push({'id': newItemNo});
+            };
+
+            wizard.removeChoice = function () {
+                var lastItem = wizard.inviteMembers.choices.length - 1;
+                wizard.inviteMembers.choices.splice(lastItem);
+            };
+
+            wizard.onAddSSHSubmit = function () {
+                $rootScope.ice.loader.show = true;
+                usersService.setSSHKey(wizard.user.uuid, wizard.data.addSSH)
+                    .then(function (response) {
+                        if (response.status === 200) {
+                            usersService.getIceUser()
+                                .then(function (response) {
+                                    if (response.status === 200 && response.data && response.data !== '') {
+                                        wizard.user = response.data;
+                                        $rootScope.ice.loader.show = false;
+                                        $scope.$emit('onUpdateEngagements');
+                                    }
+                                });
+                            wizard.nextStep();
+                        }
+
+                    }).catch(function (error) {
+                    toastService.setToast(error.message.detail, 'danger', {displayFor: 'modal'});
+                    $rootScope.ice.loader.show = false;
+                    $log.error(error.message.detail);
+                });
+            };
+
+            $scope.$on('moveWizardNextStep', function (event, args) {
+                wizard.is_service_provider_internal = args.is_service_provider_internal;
+                wizard.eng_uuid = args.engagement.uuid;
+                wizard.nextStep();
+            });
+
+            function getCompanies() {
+                vfService.getCompanies()
+                    .then(function (response) {
+                        if (response.status === 200) {
+                            wizard.companies = response.data;
+                            if(wizard.companies!=undefined){
+                                for(var i=0; i<wizard.companies.length; i++){
+                                    if(wizard.companies[i].name=="AT&T"){
+                                        wizard.data.attCompanyUuid=wizard.companies[i].uuid;
+                                        break;
+                                    }
+                                }
+                            }
+                        }
+                    })
+                    .catch(function (error) {
+                        $log.error(error);
+                    });
+            }
+        }]);
+})();
diff --git a/d2ice.att.io/app/main/dashboard/get-started-modal/get-started-modal.html b/d2ice.att.io/app/main/dashboard/get-started-modal/get-started-modal.html
new file mode 100755
index 00000000..13ccaa3d
--- /dev/null
+++ b/d2ice.att.io/app/main/dashboard/get-started-modal/get-started-modal.html
@@ -0,0 +1,38 @@
+<!--
+============LICENSE_START========================================== 
+org.onap.vvp/portal
+===================================================================
+Copyright © 2017 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the “License”);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+         http:www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+
+
+Unless otherwise specified, all documentation contained herein is licensed
+under the Creative Commons License, Attribution 4.0 Intl. (the “License”);
+you may not use this documentation except in compliance with the License.
+You may obtain a copy of the License at
+
+         https:creativecommons.org/licenses/by/4.0/
+
+Unless required by applicable law or agreed to in writing, documentation
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+============LICENSE_END============================================
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.-->
diff --git a/d2ice.att.io/app/main/dashboard/get-started-modal/get-started-modal.less b/d2ice.att.io/app/main/dashboard/get-started-modal/get-started-modal.less
new file mode 100755
index 00000000..81381198
--- /dev/null
+++ b/d2ice.att.io/app/main/dashboard/get-started-modal/get-started-modal.less
@@ -0,0 +1,47 @@
+//
+// ============LICENSE_START========================================== 
+// org.onap.vvp/portal
+// ===================================================================
+// Copyright © 2017 AT&T Intellectual Property. All rights reserved.
+// ===================================================================
+//
+// Unless otherwise specified, all software contained herein is licensed
+// under the Apache License, Version 2.0 (the “License”);
+// you may not use this software except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//          http:www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+//
+//
+// Unless otherwise specified, all documentation contained herein is licensed
+// under the Creative Commons License, Attribution 4.0 Intl. (the “License”);
+// you may not use this documentation except in compliance with the License.
+// You may obtain a copy of the License at
+// 
+//          https:creativecommons.org/licenses/by/4.0/
+//
+// Unless required by applicable law or agreed to in writing, documentation
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+// ============LICENSE_END============================================
+// 
+// ECOMP is a trademark and service mark of AT&T Intellectual Property.
+
+.getting-started-wizard {
+
+    ul.step-indication {
+        li {
+            display: inline;
+        }
+    }
+}
diff --git a/d2ice.att.io/app/main/dashboard/get-started-modal/get-started-modal.module.js b/d2ice.att.io/app/main/dashboard/get-started-modal/get-started-modal.module.js
new file mode 100755
index 00000000..6e54399a
--- /dev/null
+++ b/d2ice.att.io/app/main/dashboard/get-started-modal/get-started-modal.module.js
@@ -0,0 +1,48 @@
+//
+// ============LICENSE_START========================================== 
+// org.onap.vvp/portal
+// ===================================================================
+// Copyright © 2017 AT&T Intellectual Property. All rights reserved.
+// ===================================================================
+//
+// Unless otherwise specified, all software contained herein is licensed
+// under the Apache License, Version 2.0 (the “License”);
+// you may not use this software except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//          http:www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+//
+//
+// Unless otherwise specified, all documentation contained herein is licensed
+// under the Creative Commons License, Attribution 4.0 Intl. (the “License”);
+// you may not use this documentation except in compliance with the License.
+// You may obtain a copy of the License at
+// 
+//          https:creativecommons.org/licenses/by/4.0/
+//
+// Unless required by applicable law or agreed to in writing, documentation
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+// ============LICENSE_END============================================
+// 
+// ECOMP is a trademark and service mark of AT&T Intellectual Property.
+
+(function () {
+
+    'use strict';
+
+    angular
+        .module('ice.dashboard.get-started-modal', ['ngAnimate', 'ui.bootstrap', 'ice.activation.addVf']);
+
+  
+})();
diff --git a/d2ice.att.io/app/main/dashboard/get-started-modal/wizard/wizard-container.html b/d2ice.att.io/app/main/dashboard/get-started-modal/wizard/wizard-container.html
new file mode 100755
index 00000000..97628a62
--- /dev/null
+++ b/d2ice.att.io/app/main/dashboard/get-started-modal/wizard/wizard-container.html
@@ -0,0 +1,192 @@
+<!--
+============LICENSE_START========================================== 
+org.onap.vvp/portal
+===================================================================
+Copyright © 2017 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the “License”);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+         http:www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+
+
+Unless otherwise specified, all documentation contained herein is licensed
+under the Creative Commons License, Attribution 4.0 Intl. (the “License”);
+you may not use this documentation except in compliance with the License.
+You may obtain a copy of the License at
+
+         https:creativecommons.org/licenses/by/4.0/
+
+Unless required by applicable law or agreed to in writing, documentation
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+============LICENSE_END============================================
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.-->
+<ice-toast is-modal="true"></ice-toast>
+<div class="getting-started-wizard">
+    <ice-loader selector=".modal-content"></ice-loader>
+
+    <div class="modal-header">
+        <h2 name="{{wizard.title}}" class="modal-title">{{wizard.title}}</h2>
+        <ul class="step-indication" ng-if="wizard.steps.length > 1">
+            <li ng-repeat="step in wizard.steps" ng-class="{selected: step.completed}">{{$index + 1}}</li>
+        </ul>
+
+        <button id="close-wizard-button" type="button" ng-click="wizard.closeWizard()" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span></button>
+    </div>
+    <div class="modal-body">
+
+        <div ng-switch="wizard.getCurrentStep()" class="slide-frame">
+            <div ng-switch-when="addVF">
+                <add-vf is-modal="true"></add-vf>
+            </div>
+
+            <div ng-switch-when="addContact">
+                <div>
+                    Please take a couple of moments to provide some additional details around your virtual function to
+                    get the process started. Do note that you can exit this wizard at any time to complete these items.
+                </div>
+
+                <form name="addContactForm" ng-submit="wizard.onAddContactSubmit()" novalidate
+                      class="addVendorContact-form col-md-12">
+
+                    <div class="form-group" ng-if="wizard.currentStep.mode === 'vendor'"
+                         ng-class="{ 'has-error' : addContactForm.company.$invalid && !addContactForm.company.$pristine }">
+                        <label class="ice-form-label required">Company</label>
+                        <select style="width:100%" name="company" ng-model="wizard.data.addContact.company"
+                                ng-options="company.uuid as company.name for company in wizard.companies track by company.uuid"
+                                class="form-control" ng-required="wizard.currentStep.mode === 'vendor'"></select>
+                        <div class="ice-form-error" data-ng-show="addContactForm.company.$error">
+                            <span
+                                ng-show="addContactForm.company.$error.required && !addContactForm.company.$pristine"
+                                class="help-block">Please select a company</span>
+                        </div>
+                    </div>
+
+                    <div class="form-group"
+                         ng-class="{ 'has-error' : addContactForm.fullName.$invalid && !addContactForm.fullName.$pristine }">
+                        <label class="ice-form-label required">Full Name</label>
+                        <input type="text" name="fullname" class="form-control"
+                               ng-model="wizard.data.addContact.full_name"
+                               ng-minlength="3" ng-maxlength="50" maxlength="50" required>
+                        <div class="ice-form-error" data-ng-show="addContactForm.fullname.$error">
+                            <span
+                                ng-show="addContactForm.fullname.$error.required && !addContactForm.fullname.$pristine">Full Name is a required field.</span>
+                            <span ng-show="addContactForm.fullname.$error.minlength">Full Name is too short.</span>
+                            <span ng-show="addContactForm.fullname.$error.maxlength">Full Name is too long.</span>
+                        </div>
+                    </div>
+
+                    <div class="form-group"
+                         ng-class="{ 'has-error' : addContactForm.email.$invalid && !addContactForm.email.$pristine }">
+                        <label class="ice-form-label required">Email</label>
+                        <input type="email" name="email" class="form-control" ng-model="wizard.data.addContact.email"
+                        	ng-pattern='/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/'
+                               maxlength="254"
+                               required>
+                        <div class="ice-form-error" data-ng-show="addContactForm.email.$error">
+                            <span
+                                ng-show="addContactForm.email.$error.required && !addContactForm.email.$pristine">Email is a required field.</span>
+                            <span ng-show="addContactForm.email.$invalid && !addContactForm.email.$pristine"
+                                  class="help-block">Enter a valid email.</span>
+                        </div>
+                    </div>
+
+                    <div class="form-group"
+                         ng-class="{ 'has-error' : addContactForm.phone.$invalid && !addContactForm.phone.$pristine }">
+                        <label class="ice-form-label required">Phone</label>
+             		    <input type="text" name="phone" class="form-control" ng-intl-tel-input ng-model="wizard.data.addContact.phone_number" required ng-minlength="6" ng-maxlength="30">
+                        <div class="ice-form-error" data-ng-show="addContactForm.phone.$error">
+                            <span
+                                ng-show="addContactForm.phone.$error.required && !addContactForm.phone.$pristine">Phone is a required field.</span>
+                            <span ng-show="addContactForm.phone.$error.minlength"
+                                  class="help-block">Phone is too short.</span>
+                            <span ng-show="addContactForm.phone.$error.maxlength"
+                                  class="help-block">Phone is too long.</span>
+       		     		   <span ng-show="addContactForm.phone.$error.pattern" class="help-block">Phone must consist of numbers only.</span>
+    		       		   <span ng-show="addContactForm.phone.$invalid" class="help-block">Phone format invalid</span>
+
+                        </div>
+                    </div>
+                    <button class="btn btn-primary" type="submit" data-ng-disabled="!addContactForm.$valid">
+                        {{wizard.currentStep.submitButton}}
+                    </button>
+                </form>
+            </div>
+
+            <div ng-switch-when="inviteMembers">
+                <div>
+                    You can invite up to 10 team members at a time to collaborate around your virtual function as you would like.
+                    Please do remember that <em>anyone</em> who is invited to collaborate around the virtual function will have equal access.
+                </div>
+
+                <form name="inviteMembersForm" ng-submit="wizard.onInviteSubmit()" novalidate
+                      class="inviteMembers-form col-md-12">
+                    <div>
+                        <fieldset data-ng-repeat="choice in wizard.inviteMembers.choices|limitTo:10">
+                            <div id="containera" class="input-wrapper"><input type="email" name="email" class="form-control" ng-model="choice.email" maxlength="50" class="form-control" ng-pattern='/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/'  required></div>
+	                        <div class="ice-form-error" data-ng-show="inviteMembersForm.email.$error">
+	                            <span
+	                                ng-show="inviteMembersForm.email.$error.required && !inviteMembersForm.email.$pristine">Email is a required field.</span>
+	                            <span ng-show="inviteMembersForm.email.$invalid && !inviteMembersForm.email.$pristine"
+	                                  class="help-block">Enter a valid email.</span>
+	                        </div>
+                            <div class="remove-button" ng-click='wizard.removeChoice()' ng-show="$last"><span class="remove-icon"></span>Remove</div>
+                        </fieldset>
+                    </div>
+                    <a ng-if="wizard.inviteMembers.choices.length < 10" class="add-button" ng-click='wizard.addNewChoice()'>
+                        <span class="add-icon"></span>
+                        <span class="add-text">Invite another team member</span>
+                    </a>
+
+                    <button type="submit" class="btn btn-primary" data-ng-disabled="!inviteMembersForm.$valid">Send
+                        invitations
+                    </button>
+
+                </form>
+            </div>
+
+            <div ng-switch-when="addSSH">
+                <div>
+                    It looks like you have not yet added your SSH key to your profile. You can add one
+                    now. Please do remember that only team members who have added SSH keys to their
+                    profile can add files.
+                </div>
+                <form name="addSSHForm" ng-submit="wizard.onAddSSHSubmit()" novalidate class="addSsh-form col-md-12">
+
+                    <div class="form-group"
+                         ng-class="{ 'has-error' : addSSHForm.key.$invalid && !addSSHForm.key.$pristine }">
+                        <label class="ice-form-label required">SSH Key</label>
+                        <textarea type="text" name="key" class="form-control" ng-model="wizard.data.addSSH.ssh_key"
+                               ng-minlength="3" ng-maxlength="2048" required></textarea>
+                        <div class="ice-form-error" data-ng-show="addSSHForm.key.$error">
+                            <span
+                                ng-show="addSSHForm.key.$error.required && !addSSHForm.key.$pristine"
+                                class="help-block">Please enter your SSH key</span>
+                        </div>
+                    </div>
+
+                    <button class="btn btn-primary" data-ng-disabled="!addSSHForm.$valid" type="submit">Add SSH Key</button>
+                </form>
+            </div>
+        </div>
+    </div>
+    <div class="modal-footer">
+
+    </div>
+</div>
diff --git a/d2ice.att.io/app/main/dashboard/get-started-modal/wizard/wizard.less b/d2ice.att.io/app/main/dashboard/get-started-modal/wizard/wizard.less
new file mode 100755
index 00000000..4398d975
--- /dev/null
+++ b/d2ice.att.io/app/main/dashboard/get-started-modal/wizard/wizard.less
@@ -0,0 +1,255 @@
+//
+// ============LICENSE_START========================================== 
+// org.onap.vvp/portal
+// ===================================================================
+// Copyright © 2017 AT&T Intellectual Property. All rights reserved.
+// ===================================================================
+//
+// Unless otherwise specified, all software contained herein is licensed
+// under the Apache License, Version 2.0 (the “License”);
+// you may not use this software except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//          http:www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+//
+//
+// Unless otherwise specified, all documentation contained herein is licensed
+// under the Creative Commons License, Attribution 4.0 Intl. (the “License”);
+// you may not use this documentation except in compliance with the License.
+// You may obtain a copy of the License at
+// 
+//          https:creativecommons.org/licenses/by/4.0/
+//
+// Unless required by applicable law or agreed to in writing, documentation
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+// ============LICENSE_END============================================
+// 
+// ECOMP is a trademark and service mark of AT&T Intellectual Property.
+.dev-button {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.reject_large {
+    .actions-sprite;
+    .actions-sprite.reject_large;
+    cursor: pointer;
+}
+
+.modal-content {
+    .getting-started-wizard {
+        .modal-header {
+            display: flex;
+            flex-direction: row;
+
+            h2, h3 {
+                display: inline-block;
+                flex-grow: 10;
+            }
+        }
+
+        .modal-body {
+            .btn {
+                width: 100%;
+            }
+
+            .btn-primary {
+                border: 1px solid #8799A3;
+                border-radius: 6px;
+                background: #1E79B0; /* For browsers that do not support gradients */
+                background: -webkit-linear-gradient(#1E79B0, #62ADD5); /* For Safari 5.1 to 6.0 */
+                background: -o-linear-gradient(#1E79B0, #62ADD5); /* For Opera 11.1 to 12.0 */
+                background: -moz-linear-gradient(#1E79B0, #62ADD5); /* For Firefox 3.6 to 15 */
+                background: linear-gradient(#1E79B0, #62ADD5); /* Standard syntax (must be last) */
+            }
+        }
+    }
+}
+
+.getting-started-wizard {
+
+
+
+
+
+	 md-datepicker.btn.datepicker_btn {
+		 .md-datepicker-input {
+			  width: 100%;
+			  text-align: center;
+			  line-height: 32px;
+	  	}
+	}
+	#vf-name-title {
+		font-size: 16px;
+	}
+	#title-key-metadata{
+		font-size: 16px;
+		position: relative;
+	    top: 20px;
+	    left: 30px;
+	    background: white;
+	    padding: 0 20px;
+	    margin-top: -15px;
+	}
+	.fields_key_metadata{
+		border:1px solid #ccc;
+		padding: 26px 10px;
+	
+	}
+    /* Override addVf pages styles */
+    .container {
+        width: auto;
+
+        .col-md-2 { width: 0; }
+        .col-md-8 { width: 100%; }
+
+        .table-container-flex .flex-item {
+            padding: 5px 5px;
+        }
+
+        .remove-button {
+            display: none;
+        }
+    }
+
+    .table-container-flex {
+
+        .flex-item:nth-child(1) {
+            padding-left: 0;
+            flex-grow: 33;
+        }
+
+        .flex-item:nth-child(2) {
+            flex-grow: 33;
+        }
+
+        .flex-item:nth-child(3) {
+            flex-grow: 33;
+        }
+
+    }
+
+    ul.step-indication {
+        list-style: none;
+        display: inline-block;
+
+        li {
+            display: inline-block;
+            background-color: #DDDDDD;
+            width: 30px;
+            height: 30px;
+            margin-right: 10px;
+            padding: 6px 11px;
+            .m_14_m;
+
+            &.selected {
+                .p_14_m;
+                background-color: #1370A3;
+            }
+
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+
+    .addVendorContact-form {
+        padding: 20px 0 0 0;
+
+        button {
+            margin-top: 10px;
+        }
+    }
+
+    .inviteMembers-form {
+        padding: 20px 0 0 0;
+
+        button {
+            margin-top: 10px;
+        }
+
+        .add-button {
+            margin-top: 8px;
+            display: block;
+            .add-text {
+                .a_16_m;
+                vertical-align: top;
+                margin-left: 6px;
+            }
+            .add-icon {
+                .sprite;
+                .sprite.add;
+                display: inline-block;
+            }
+        }
+
+        .remove-button {
+            vertical-align:middle;
+            .a_16_m;
+            cursor: pointer;
+
+            .remove-icon {
+                display: inline-block;
+                vertical-align: text-top;
+                margin-right: 6px;
+                .sprite;
+                .sprite.delete-circle;
+                cursor: pointer;
+            }
+        }
+
+
+        .remove-button {
+            vertical-align:middle;
+            .a_16_m;
+            cursor: pointer;
+
+            .reject-large {
+                display: inline-block;
+                vertical-align: text-top;
+                margin-right: 6px;
+                .sprite;
+                .sprite.delete-circle;
+                cursor: pointer;
+            }
+        }
+
+        .input-wrapper {
+            margin-bottom: 10px;
+        }
+
+    }
+
+    .addVf-form {
+        padding: 0;
+    }
+
+    .addSsh-form {
+        padding: 0;
+
+        .form-group {
+            margin-top: 20px;
+        }
+
+        button {
+            margin-top: 10px;
+        }
+
+        textarea {
+            min-height: 80px;
+        }
+    }
+
+}