ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details/account-add-details.html

   1 <!--
   2   ============LICENSE_START==========================================
   3   ONAP Portal
   4   ===================================================================
   5   Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   6   ===================================================================
   7
   8   Unless otherwise specified, all software contained herein is licensed
   9   under the Apache License, Version 2.0 (the "License");
  10   you may not use this software except in compliance with the License.
  11   You may obtain a copy of the License at
  12
  13               http://www.apache.org/licenses/LICENSE-2.0
  14
  15   Unless required by applicable law or agreed to in writing, software
  16   distributed under the License is distributed on an "AS IS" BASIS,
  17   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  18   See the License for the specific language governing permissions and
  19   limitations under the License.
  20
  21   Unless otherwise specified, all documentation contained herein is licensed
  22   under the Creative Commons License, Attribution 4.0 Intl. (the "License");
  23   you may not use this documentation except in compliance with the License.
  24   You may obtain a copy of the License at
  25
  26               https://creativecommons.org/licenses/by/4.0/
  27
  28   Unless required by applicable law or agreed to in writing, documentation
  29   distributed under the License is distributed on an "AS IS" BASIS,
  30   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  31   See the License for the specific language governing permissions and
  32   limitations under the License.
  33
  34   ============LICENSE_END============================================
  35
  36   ECOMP is a trademark and service mark of AT&T Intellectual Property.
  37   -->
  38   <style>
  39
  40 .checkbox .skin {
  41     left: 0px;
  42     top: 0px;
  43 }
  44
  45 .add-label-right{
  46     float: right;
  47     margin-top: -17px;
  48 }
  49
  50 .endpoint-item-left{
  51 width:75%;
  52 padding-bottom:10px;
  53 }
  54 .icon-circle-action-remove {
  55  float: right;
  56     margin-top: -27px;
  57 }
  58 .item{
  59 padding-bottom:15px;
  60 }
  61 .account-property{
  62 padding-top:10px;
  63 }
  64 </style>
  65
  66 <div>
  67
  68                 <div class="b2b-modal-header">
  69                         <h2 class="account-details-title" id="account-add-details-title">Account Details</h2>
  70
  71                         <div class="corner-button in">
  72                                 <button type="button" class="close" aria-label="Close" id="accountdetails-button-cancel"
  73                                         ng-click="$dismiss('cancel')"></button>
  74                         </div>
  75                 </div>
  76
  77                 <div class="b2b-modal-body">
  78                                 <div class="account-properties-main"
  79                         scroll-top="accountAddDetails.scrollApi">
  80                         <form id="accounts-details-form" name="serviceForm" novalidate
  81                                 autocomplete="off" method="post">
  82                                 <div class="item required">
  83                                         <div class="item-label">Account Name</div>
  84                                         <input id="account-details-input-name"
  85                                                 type="text" name="name" ng-pattern="/^[\w -]*$/" maxlength="100"
  86                                                 ng-model="accountAddDetails.account.applicationName"
  87                                                 ng-change="accountAddDetails.updateAccountName()" required />
  88
  89                                         <div class="error-container"
  90                                                 ng-show="(accountAddDetails.emptyAccountName || serviceForm.name.$dirty)">
  91                                                 <div ng-messages="serviceForm.name.$error" class="error-container">
  92                                                         <small id="accounts-details-input-name-required"
  93                                                                 class="err-message" ng-message="required">account Name
  94                                                                 is required</small> <small id="accounts-details-input-name-pattern"
  95                                                                 class="err-message" ng-message="pattern">account Name
  96                                                                 must be letters, numbers, or underscore</small>
  97                                                 </div>
  98                                         </div>
  99
 100                                         <div class="error-container"
 101                                                 ng-show="accountAddDetails.dupliateName == true">
 102                                                 <small id="accounts-details-input-name-dupliated"
 103                                                         class="err-message">Name not available - choose different
 104                                                         name </small>
 105                                         </div>
 106                                 </div>
 107
 108                                 <div class="item required">
 109                                         <div class="item-label">Username</div>
 110                                         <input id="account-details-input-username"
 111                                                 type="text" name="username" maxlength="100"
 112                                                 ng-model="accountAddDetails.account.username"
 113                                                 ng-change="accountAddDetails.updateUsername()" autocomplete="off" />
 114
 115                                         <div class="error-container"
 116                                                 ng-show="(accountAddDetails.emptyAccountUsername
 117                                         || (serviceForm.username.$dirty && accountAddDetails.account.username == ''))">
 118                                                 <small id="account-details-input-username-required"
 119                                                         class="err-message">Username is required</small>
 120                                         </div>
 121
 122                                 </div>
 123
 124                                 <div class="item">
 125                                         <div class="item-label">Password</div>
 126                                         <input id="account-details-input-password"
 127                                                 type="password" name="password" maxlength="100"
 128                                                 ng-model="accountAddDetails.account.password" autocomplete="off"/>
 129                                 </div>
 130
 131                                 <div class="item">
 132                                         <div class="item-label">Retype Password</div>
 133                                         <input id="account-details-input-repassword"
 134                                                 type="password" name="repassword" maxlength="100"
 135                                                 ng-model="accountAddDetails.account.repassword"
 136                                                 ng-change="accountAddDetails.confirmPassword()" />
 137
 138                                         <div class="error-container"
 139                                                 ng-show="accountAddDetails.passwordMatched == false">
 140                                                 <small id="accounts-details-input-name-dupliated"
 141                                                         class="err-message">Password does not match the confirm
 142                                                         password</small>
 143                                         </div>
 144                                 </div>
 145
 146
 147                                 <div class="add-endpoint-item">
 148                                         <div class="item-label add-label-left">Add Endpoint</div>
 149                                         <div class="icon-add add-label-right" id="accountAddDetails-button-accordion"
 150                                                 ng-click="accountAddDetails.addEndpoint()"><span class="icon-primary-accordion-plus"></span></div>
 151                                 </div>
 152                                 <div class="item">
 153                                         <div class="item-label"
 154                                                 ng-show="accountAddDetails.account.endpointList.length > 0">
 155                                                 Account endpoint</div>
 156
 157                                         <div id="account-details-user-paramters"
 158                                                 ng-repeat="endpoint in accountAddDetails.account.endpointList">
 159
 160                                                 <div class="endpoint-item-left">
 161                                                         <input id="account-details-input-endpoint-name"
 162                                                                 type="text" name="endpointName"
 163                                                                 maxlength="200" ng-model="endpoint.name"
 164                                                                 ng-change="accountAddDetails.updateAccountEndpoint(endpoint)"/>
 165                                                 </div>
 166
 167                                                 <div class="icon-circle-action-remove endpoint-item-middle"
 168                                                         ng-click="accountAddDetails.removeEndpointItem(endpoint)"><span class="icon-primary-accordion-minus"></span></div>
 169
 170                                                 <div class="error-container endpoint-item-right"
 171                                                                 ng-show="endpoint.valid == false">
 172                                                                 <small id="accounts-details-input-invalid-endpoint"
 173                                                                         class="err-message">Invalid end point format</small>
 174                                                 </div>
 175
 176                                         </div>
 177
 178                                         <div class="account-property">
 179                                                 <div class="property-label checkbox-label">
 180                                                         <label for="accounts-checkbox-app-is-enabled" class="checkbox">
 181                                                 <input type="checkbox" ng-model="accountAddDetails.account.active" id="accounts-checkbox-app-is-enabled"/>
 182                                                 <i class="skin"></i>
 183                                                 <span>Active</span>
 184                                         </label>
 185                                                 </div>
 186                                         </div>
 187
 188                                 </div>
 189
 190                         </form>
 191                 </div>
 192                         </div>
 193                         <br>
 194                         <div class="b2b-modal-footer">
 195                                 <div class="cta-button-group cta-modal-footer-flex">
 196                                         <div class="item">
 197                                                 <div id="account-details-next-button" class="btn btn-alt btn-small" ng-click="$dismiss('cancel')">Cancel</div>
 198                                                 <div id="account-details-next-button" class="btn btn-alt btn-small" ng-click="accountAddDetails.saveChanges()">Save</div>
 199                                         </div>
 200                                 </div>
 201                         </div>
 202
 203 </div>
 204
 205 <script>
 206 $(document).ready(function(){
 207     $(".ngdialog-close").attr('id','dialog-close');
 208 });
 209 </script>