initial seed code commit VVP-9

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

2 files changed, 447 insertions, 0 deletions

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;
+        }
+    }
+
+}