[PORTAL-7] Rebase

This rebasing includes common libraries and common overlays projects
abstraction of components

Change-Id: I9a24a338665c7cd058978e8636bc412d9e2fdce8
Signed-off-by: st782s <statta@research.att.com>

3 files changed, 491 insertions, 0 deletions

diff --git a/ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details/account-add-details.html b/ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details/account-add-details.html
new file mode 100644
index 00000000..91027f9e
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details/account-add-details.html
@@ -0,0 +1,125 @@
+<div class="account-add-details-modal">
+	<div id="account-add-details-title" class="account-details-title">Account
+		Details</div>
+
+	<div id="accounts">
+		<div class="account-properties-main"
+			scroll-top="accountAddDetails.scrollApi">
+			<form id="accounts-details-form" name="serviceForm" novalidate
+				autocomplete="off">
+				<div class="item required">
+					<div class="item-label">Account Name</div>
+					<input id="account-details-input-name"
+						type="text" name="name" ng-pattern="/^[\w -]*$/" maxlength="100"
+						ng-model="accountAddDetails.account.applicationName"
+						ng-change="accountAddDetails.updateAccountName()" required />
+
+					<div class="error-container"
+						ng-show="(accountAddDetails.emptyAccountName || serviceForm.name.$dirty)">
+						<div ng-messages="serviceForm.name.$error" class="error-container">
+							<small id="accounts-details-input-name-required"
+								class="err-message" ng-message="required">account Name
+								is required</small> <small id="accounts-details-input-name-pattern"
+								class="err-message" ng-message="pattern">account Name
+								must be letters, numbers, or underscore</small>
+						</div>
+					</div>
+
+					<div class="error-container"
+						ng-show="accountAddDetails.dupliateName == true">
+						<small id="accounts-details-input-name-dupliated"
+							class="err-message">Name not available - choose different
+							name </small>
+					</div>
+				</div>
+
+				<div class="item required">
+					<div class="item-label">Username</div>
+					<input id="account-details-input-username" 
+						type="text" name="username" maxlength="100"
+						ng-model="accountAddDetails.account.username"
+						ng-change="accountAddDetails.updateUsername()" />
+
+					<div class="error-container"
+						ng-show="(accountAddDetails.emptyAccountUsername 
+					|| (serviceForm.username.$dirty && accountAddDetails.account.username == ''))">
+						<small id="account-details-input-username-required"
+							class="err-message">Username is required</small>
+					</div>
+
+				</div>
+
+				<div class="item">
+					<div class="item-label">Password</div>
+					<input id="account-details-input-password"
+						type="password" name="password" maxlength="100"
+						ng-model="accountAddDetails.account.password" />
+				</div>
+
+				<div class="item">
+					<div class="item-label">Retype Password</div>
+					<input id="account-details-input-repassword"
+						type="password" name="repassword" maxlength="100"
+						ng-model="accountAddDetails.account.repassword"
+						ng-change="accountAddDetails.confirmPassword()" />
+
+					<div class="error-container"
+						ng-show="accountAddDetails.passwordMatched == false">
+						<small id="accounts-details-input-name-dupliated"
+							class="err-message">Password does not match the confirm
+							password</small>
+					</div>
+				</div>
+
+
+				<div class="add-endpoint-item">
+					<div class="item-label add-label-left">Add Endpoint</div>
+					<div class="icon-add add-label-right"
+						ng-click="accountAddDetails.addEndpoint()"></div>
+				</div>
+				<div class="item">
+					<div class="item-label"
+						ng-show="accountAddDetails.account.endpointList.length > 0">
+						Account endpoint</div>
+
+					<div id="account-details-user-paramters"
+						ng-repeat="endpoint in accountAddDetails.account.endpointList">
+
+						<div class="endpoint-item-left">
+							<input id="account-details-input-endpoint-name"
+								type="text" name="endpointName"
+								maxlength="200" ng-model="endpoint.name" 
+								ng-change="accountAddDetails.updateAccountEndpoint(endpoint)"/>
+						</div>
+
+						<div class="icon-circle-action-remove endpoint-item-middle"
+							ng-click="accountAddDetails.removeEndpointItem(endpoint)"></div>
+							
+						<div class="error-container endpoint-item-right"
+								ng-show="endpoint.valid == false">
+								<small id="accounts-details-input-invalid-endpoint"
+									class="err-message">Invalid end point format</small>
+						</div>
+							
+					</div>
+
+					<div class="account-property">
+						<input id="accounts-checkbox-app-is-enabled" type="checkbox"
+							class="checkbox-field"
+							ng-model="accountAddDetails.account.active" />
+						<div class="property-label checkbox-label">Active</div>
+					</div>
+					<div class="item">
+						<div id="account-details-next-button" class="submit-button"
+							ng-click="accountAddDetails.closeThisDialog()">close</div>
+						<div id="account-details-next-button" class="submit-button"
+							ng-click="accountAddDetails.saveChanges()">Save</div>
+					</div>
+				</div>
+
+			</form>
+		</div>
+
+
+	</div>
+</div>
diff --git a/ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details/account-add-details.js b/ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details/account-add-details.js
new file mode 100644
index 00000000..ff89dce3
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details/account-add-details.js
@@ -0,0 +1,171 @@
+'use strict';
+(function () {
+    class AccountAddDetailsCtrl {
+        constructor($scope, $log, $interval, basicAuthAccountSerivce, errorMessageByCode, ECOMP_URL_REGEX, $window, confirmBoxService, $cookies) {
+     	    
+          
+           this.addEndpoint = () => {
+           	  this.account.endpointList.push({
+           		  valid: true
+           	  }); 
+           }
+        	
+            let init = () => {
+            	this.account = [];
+                this.account.endpointList = [];
+                this.passwordMatched = true;
+                this.dupliateName = false;
+                this.emptyAccountName = false;
+                this.emptyAccountUsername = false;
+                this.accountList = $scope.ngDialogData.list;
+                
+                if ($scope.ngDialogData && $scope.ngDialogData.account) {
+                    this.isEditMode = true;
+                    this.account = _.clone($scope.ngDialogData.account);
+                    this.account.repassword = this.account.password;
+                    this.account.endpointList = this.account.endpoints;
+                    if(this.account.isActive == 'Y')
+                    	this.account.active = true;
+                    else
+                    	this.account.active = false;
+                } else {
+                    this.isEditMode = false;
+                    this.account.active = true;
+                } 
+                console.log(this.account);
+            };
+            
+            let resetConflict = fieldName => {
+                delete this.conflictMessages[fieldName];
+                if($scope.widgetForm[fieldName]){
+                    $scope.widgetForm[fieldName].$setValidity('conflict', true);
+                }
+            };
+
+            
+            this.closeThisDialog = () => {
+            	$scope.closeThisDialog(true);
+            }
+            
+            this.removeEndpointItem = (endpoint) => {
+        		for(var i = 0; i < this.account.endpointList.length; i++){
+        			if(this.account.endpointList[i].name == endpoint.name){
+        				this.account.endpointList.splice(i, 1);
+        				return; 
+        			}
+        		}
+            }
+            
+            this.confirmPassword = () => {
+            	this.passwordMatched =  true;
+            }
+            
+            this.updateUsername = () => {
+            	this.emptyAccountUsername = false;
+            }
+            
+            this.updateAccountName = () => {
+            	this.dupliateName = false;
+            	for(var i = 0; i < this.accountList.length; i++){
+            		if(this.accountList[i].applicationName == this.account.applicationName){
+            			this.dupliateName = true;
+            			return;
+            		}
+            	}
+            }
+            
+            this.updateAccountEndpoint = (endpoint) => {
+            	endpoint.valid = true;
+            }
+           
+            this.saveChanges = () => {
+
+            	var isValid = true;
+            	var r = /\/[^ "]+$/;
+            	
+            	for(var i = 0; i < this.account.endpointList.length; i++){
+               		if(this.account.endpointList[i].name == undefined
+            		|| this.account.endpointList[i].name == null
+            		|| this.account.endpointList[i].name == ""){
+            			this.account.endpointList.splice(i, 1);
+            			i--;
+            		}else{
+            			if(!this.account.endpointList[i].name.startsWith("/")){
+            				this.account.endpointList[i].name = "/" + this.account.endpointList[i].name;
+            			}
+            			if(!r.test(this.account.endpointList[i].name)){
+            				this.account.endpointList[i].valid = false;
+            				isValid = false;
+            			}
+            			
+            		}
+            	}
+            	
+            	if(this.account.applicationName == ''
+                || this.account.applicationName == undefined){
+            		this.emptyAccountName = true;
+                	isValid = false;
+                }
+            	
+            	if(this.account.username == ''
+                || this.account.username == undefined){
+            		this.emptyAccountUsername = true;
+                    isValid = false;
+                }
+            	
+            	if(this.dupliateName == true){
+                   isValid = false;
+               	}
+            	
+            	if(this.account.password != this.account.repassword){
+            		this.passwordMatched =  false;
+            		isValid = false;
+            	}
+            	
+            	if(!isValid)
+            		return;
+            	
+               	
+            	
+            	var active = 'N';
+            	if(this.account.active == true)
+            		active = 'Y';
+            	
+            	var newAccount = {
+            			applicationName: this.account.applicationName,
+            			username: this.account.username,
+            			password: this.account.password,
+            			endpoints: this.account.endpointList,
+            			isActive: active
+            	};
+            	
+            	
+            	if(this.isEditMode){
+            		var message = "Are you sure you want to change '" + this.account.applicationName + "'?"
+            		confirmBoxService.editItem(message).then(isConfirmed => {
+	            		if(isConfirmed){
+	            			basicAuthAccountSerivce.updateAccount(this.account.id, newAccount).then(() => {
+	                			$scope.closeThisDialog(true);
+	                		});
+	           			}
+            		});
+            	}else{
+            		basicAuthAccountSerivce.createAccount(newAccount).then(() => {
+            			$scope.closeThisDialog(true);
+            		});
+            	}
+            	
+            	
+            
+            }
+            
+            
+            init();
+            $scope.$on('$stateChangeStart', e => {
+                e.preventDefault();
+            });
+        }
+    }
+    AccountAddDetailsCtrl.$inject = ['$scope', '$log', '$interval', 'basicAuthAccountSerivce', 'errorMessageByCode', 'ECOMP_URL_REGEX', '$window', 'confirmBoxService', '$cookies'];
+    angular.module('ecompApp').controller('AccountAddDetailsCtrl', AccountAddDetailsCtrl);
+})(); 
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details/account-add-details.less b/ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details/account-add-details.less
new file mode 100644
index 00000000..6a916d6c
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details/account-add-details.less
@@ -0,0 +1,195 @@
+.account-add-details-modal{
+	height: 550px;
+	
+	overflow-y: auto;
+
+	.account-details-title {
+	    color: #191919;
+	    font-family: "Omnes-ECOMP-W02", Arial;;
+	    font-size: 24px;
+	    padding-bottom: 15px;
+	    padding-top:30px;
+	    margin-left: 25px;
+	}
+	.account-properties-main {
+	    padding-top: 20px;
+	    padding-left: 20px;
+	    padding-right: 20px;
+	    margin-bottom: 50px;
+	    
+	    height: 100%;
+	    width:100%;
+	    
+	    .account-property{
+	      margin-top: 10px;
+	      position: relative;
+	      .property-label{
+	        .dGray14r;
+	      }
+	      .checkbox-label{
+	        display: inline-block;
+	        padding-left: 3px;
+	      }
+	      .checkbox-field{
+	        padding: 0;
+	        margin: 0;
+	        vertical-align: middle;
+	        position: relative;
+	        top: -1px;
+	      } 
+	    }
+		.add-endpoint-item{
+			position: relative;
+	        .add-label-left{
+	  	  	  line-height: 25px;
+	          height: 30px;
+	          vertical-align: middle;
+	          display:inline-block;
+	          margin-right: 10px;
+			  .dGray14r;
+	  	   }
+	  	   .add-label-right{
+	  	   	  height: 14px;
+	  	   	  width: 14px;
+	          display:inline-block;
+	  	   }
+		}
+		.item{
+	      position: relative;
+	      margin-bottom: 15px;
+	      width: 400px;
+	      .service-select{
+	 		  select{
+	 		  	cursor: pointer;
+			    position: relative;
+			    border: 1px solid #5a5a5a;
+			    white-space: nowrap;
+			    overflow: hidden;
+			    text-overflow: ellipsis;
+			    line-height: 15px;
+			    height: 32px;
+			    padding-left: 10px;
+			    padding-right: 10px;
+		      	border-radius: 0px;
+	 		  }
+	          display:inline-block;
+	          width: 100%;
+    	  }
+    	  .error-container{
+	        position: absolute;
+	        width: 280px;
+	        display: block;
+	        height: 12px;
+	        line-height: 12px;
+	
+	        .err-message{
+	          color: @funcRed;
+	          font-size: 9px;
+	        }
+	        .valid-message{
+	          color: @funcGreen;
+	          font-size: 9px;
+	        }
+	      }
+	      .auth-item-left{
+	          padding-top: 0;
+	          line-height: 30px;
+	          height: 30px;
+	          vertical-align: middle;
+	          display:inline-block;
+	          width: 15%;
+	          //border-radius: 2px;
+	          //border: 1px solid @attLGray;
+	          margin-right: 10px;
+	          //background: @attWhite;
+	          white-space: nowrap;
+			  .dGray14r;
+       	  }
+          .auth-item-right{
+	          display:inline-block;
+	          width: 45%;
+	          border-radius: 2px;
+	          border: 1px solid;
+	          //background: @attWhite;
+	          vertical-align: middle;
+          }
+          
+          .endpoint-item-left{
+	          line-height: 30px;
+	          height: 30px;
+	          vertical-align: middle;
+	          display:inline-block;
+	          width: 80%;
+	          //border-radius: 2px;
+	          //border: 1px solid;
+	          margin-right: 10px;
+	          //background: @attWhite;
+	          white-space: nowrap;
+			  .dGray14r;
+       	  }
+       	  .endpoint-item-middle{
+          	  margin-top: 10px;
+	          height: 14px;
+	          width: 14px;
+	          display:inline-block;
+          }
+          
+          .endpoint-item-right{
+          	  margin-left: 5px; 
+	          width: 15%;
+	          height: 30px;
+	          display:inline-block;
+          }
+          
+          .endpoint-label-item-left{
+	          line-height: 30px;
+	          height: 30px;
+	          vertical-align: middle;
+	          display:inline-block;
+	          width: 80%;
+	          margin-right: 10px;
+	          //background: @attWhite;
+	          white-space: nowrap;
+			  .dGray14r;
+       	  }
+          .endpoint-label-item-right{
+	          line-height: 30px;
+	          height: 30px;
+	          display:inline-block;
+	          width: 20%;
+	          //background: @attWhite;
+	          vertical-align: middle;
+	          white-space: nowrap;
+	          .dGray14r;
+          }
+
+	      
+	       .textarea-field{
+	      	position: relative;
+	      	.custom-input-field;
+	      	height:50px;
+      	    }
+	       .submit-button {
+	       	 margin-top: 25px;
+	  	 	 position: relative;
+	  	 	 float: right;
+	  	 	 width: 20%;
+	   		.btn-blue;
+	  	  }
+	  	  
+	  	 
+	  	  
+	  	  .add-endpoint-button{
+			height: 14px;
+	  	  	width: 14px;
+	  	  	float: right;
+	  	  }
+	  	  .item-label{
+        	.dGray14r;
+      	  }
+	    }
+	}
+}
+#account-scroll-end{
+	height: 20px;
+} 
\ No newline at end of file