diff options
Diffstat (limited to 'ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details')
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 |