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
  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
  65 .add-label-right{
  66 opacity: 0.6
  67 }
  68 </style>
  69
  70 <div>
  71
  72                 <div class="b2b-modal-header">
  73                         <h2 class="account-details-title" id="account-add-details-title">Account Details</h2>
  74
  75                         <div class="corner-button in">
  76                                 <button type="button" class="close" aria-label="Close" id="accountdetails-button-cancel"
  77                                         ng-click="$dismiss('cancel')"></button>
  78                         </div>
  79                 </div>
  80
  81                 <div class="b2b-modal-body">
  82                                 <div class="account-properties-main"
  83                         scroll-top="accountAddDetails.scrollApi">
  84                         <form id="accounts-details-form" name="serviceForm" novalidate
  85                                 autocomplete="off" method="post">
  86                                 <div class="item required">
  87                                         <div class="item-label">Account Name</div>
  88                                         <input id="account-details-input-name"
  89                                                 type="text" name="name" ng-pattern="/^[\w -]*$/" maxlength="100"
  90                                                 ng-model="accountAddDetails.account.applicationName"
  91                                                 ng-change="accountAddDetails.updateAccountName()" required />
  92
  93                                         <div class="error-container"
  94                                                 ng-show="(accountAddDetails.emptyAccountName || serviceForm.name.$dirty)">
  95                                                 <div ng-messages="serviceForm.name.$error" class="error-container">
  96                                                         <small id="accounts-details-input-name-required"
  97                                                                 class="err-message" ng-message="required">account Name
  98                                                                 is required</small> <small id="accounts-details-input-name-pattern"
  99                                                                 class="err-message" ng-message="pattern">account Name
 100                                                                 must be letters, numbers, or underscore</small>
 101                                                 </div>
 102                                         </div>
 103
 104                                         <div class="error-container"
 105                                                 ng-show="accountAddDetails.dupliateName == true">
 106                                                 <small id="accounts-details-input-name-dupliated"
 107                                                         class="err-message">Name not available - choose different
 108                                                         name </small>
 109                                         </div>
 110                                 </div>
 111
 112                                 <div class="item required">
 113                                         <div class="item-label">Username</div>
 114                                         <input id="account-details-input-username"
 115                                                 type="text" name="username" maxlength="100"
 116                                                 ng-model="accountAddDetails.account.username"
 117                                                 ng-change="accountAddDetails.updateUsername()" autocomplete="off" />
 118
 119                                         <div class="error-container"
 120                                                 ng-show="(accountAddDetails.emptyAccountUsername
 121                                         || (serviceForm.username.$dirty && accountAddDetails.account.username == ''))">
 122                                                 <small id="account-details-input-username-required"
 123                                                         class="err-message">Username is required</small>
 124                                         </div>
 125
 126                                 </div>
 127
 128                                 <div class="item">
 129                                         <div class="item-label">Password</div>
 130                                         <input id="account-details-input-password"
 131                                                 type="password" name="password" maxlength="100"
 132                                                 ng-model="accountAddDetails.account.password" autocomplete="off"/>
 133                                 </div>
 134
 135                                 <div class="item">
 136                                         <div class="item-label">Retype Password</div>
 137                                         <input id="account-details-input-repassword"
 138                                                 type="password" name="repassword" maxlength="100"
 139                                                 ng-model="accountAddDetails.account.repassword"
 140                                                 ng-change="accountAddDetails.confirmPassword()" />
 141
 142                                         <div class="error-container"
 143                                                 ng-show="accountAddDetails.passwordMatched == false">
 144                                                 <small id="accounts-details-input-name-dupliated"
 145                                                         class="err-message">Password does not match the confirm
 146                                                         password</small>
 147                                         </div>
 148                                 </div>
 149
 150
 151                                 <div class="add-endpoint-item">
 152                                         <div class="item-label add-label-left">Add Endpoint</div>
 153                                         <div class="icon-add add-label-right" id="accountAddDetails-button-accordion"
 154                                                 ng-click="accountAddDetails.addEndpoint()" ng-disabled="true"><span class="icon-primary-accordion-plus"></span></div>
 155                                 </div>
 156                                 <div class="item">
 157                                         <div class="item-label"
 158                                                 ng-show="accountAddDetails.account.endpointList.length > 0">
 159                                                 Account endpoint</div>
 160
 161                                         <div id="account-details-user-paramters"
 162                                                 ng-repeat="endpoint in accountAddDetails.account.endpointList">
 163
 164                                                 <div class="endpoint-item-left">
 165                                                         <input id="account-details-input-endpoint-name"
 166                                                                 type="text" name="endpointName"
 167                                                                 maxlength="200" ng-model="endpoint.name"
 168                                                                 ng-change="accountAddDetails.updateAccountEndpoint(endpoint)"/>
 169                                                 </div>
 170
 171                                                 <div class="icon-circle-action-remove endpoint-item-middle"
 172                                                         ng-click="accountAddDetails.removeEndpointItem(endpoint)"><span class="icon-primary-accordion-minus"></span></div>
 173
 174                                                 <div class="error-container endpoint-item-right"
 175                                                                 ng-show="endpoint.valid == false">
 176                                                                 <small id="accounts-details-input-invalid-endpoint"
 177                                                                         class="err-message">Invalid end point format</small>
 178                                                 </div>
 179
 180                                         </div>
 181
 182                                         <div class="account-property">
 183                                                 <div class="property-label checkbox-label">
 184                                                         <label for="accounts-checkbox-app-is-enabled" class="checkbox">
 185                                                 <input type="checkbox" ng-model="accountAddDetails.account.active" id="accounts-checkbox-app-is-enabled"/>
 186                                                 <i class="skin"></i>
 187                                                 <span>Active</span>
 188                                         </label>
 189                                                 </div>
 190                                         </div>
 191
 192                                 </div>
 193
 194                         </form>
 195                 </div>
 196                         </div>
 197                         <br>
 198                         <div class="b2b-modal-footer">
 199                                 <div class="cta-button-group cta-modal-footer-flex">
 200                                         <div class="item">
 201                                                 <div id="account-details-next-cancel" class="btn btn-alt btn-small" ng-click="$dismiss('cancel')">Cancel</div>
 202                                                 <div id="account-details-next-button" class="btn btn-alt btn-small" ng-click="accountAddDetails.saveChanges()">Save</div>
 203                                         </div>
 204                                 </div>
 205                         </div>
 206
 207 </div>
 208
 209 <script>
 210 $(document).ready(function(){
 211     $(".ngdialog-close").attr('id','dialog-close');
 212 });
 213 </script>