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

   1 <style>
   2
   3 .checkbox .skin {
   4     left: 0px;
   5     top: 0px;
   6 }
   7
   8 .add-label-right{
   9     float: right;
  10     margin-top: -17px;
  11 }
  12
  13 .endpoint-item-left{
  14 width:75%;
  15 padding-bottom:10px;
  16 }
  17 .icon-circle-action-remove {
  18  float: right;
  19     margin-top: -27px;
  20 }
  21 .item{
  22 padding-bottom:15px;
  23 }
  24 .account-property{
  25 padding-top:10px;
  26 }
  27 </style>
  28
  29 <div>
  30
  31                 <div class="b2b-modal-header">
  32                         <h2 class="account-details-title" id="account-add-details-title">Account Details</h2>
  33
  34                         <div class="corner-button in">
  35                                 <button type="button" class="close" aria-label="Close" id="accountdetails-button-cancel"
  36                                         ng-click="$dismiss('cancel')"></button>
  37                         </div>
  38                 </div>
  39
  40                 <div class="b2b-modal-body">
  41                                 <div class="account-properties-main"
  42                         scroll-top="accountAddDetails.scrollApi">
  43                         <form id="accounts-details-form" name="serviceForm" novalidate
  44                                 autocomplete="off">
  45                                 <div class="item required">
  46                                         <div class="item-label">Account Name</div>
  47                                         <input id="account-details-input-name"
  48                                                 type="text" name="name" ng-pattern="/^[\w -]*$/" maxlength="100"
  49                                                 ng-model="accountAddDetails.account.applicationName"
  50                                                 ng-change="accountAddDetails.updateAccountName()" required />
  51
  52                                         <div class="error-container"
  53                                                 ng-show="(accountAddDetails.emptyAccountName || serviceForm.name.$dirty)">
  54                                                 <div ng-messages="serviceForm.name.$error" class="error-container">
  55                                                         <small id="accounts-details-input-name-required"
  56                                                                 class="err-message" ng-message="required">account Name
  57                                                                 is required</small> <small id="accounts-details-input-name-pattern"
  58                                                                 class="err-message" ng-message="pattern">account Name
  59                                                                 must be letters, numbers, or underscore</small>
  60                                                 </div>
  61                                         </div>
  62
  63                                         <div class="error-container"
  64                                                 ng-show="accountAddDetails.dupliateName == true">
  65                                                 <small id="accounts-details-input-name-dupliated"
  66                                                         class="err-message">Name not available - choose different
  67                                                         name </small>
  68                                         </div>
  69                                 </div>
  70
  71                                 <div class="item required">
  72                                         <div class="item-label">Username</div>
  73                                         <input id="account-details-input-username"
  74                                                 type="text" name="username" maxlength="100"
  75                                                 ng-model="accountAddDetails.account.username"
  76                                                 ng-change="accountAddDetails.updateUsername()" autocomplete="off" />
  77
  78                                         <div class="error-container"
  79                                                 ng-show="(accountAddDetails.emptyAccountUsername
  80                                         || (serviceForm.username.$dirty && accountAddDetails.account.username == ''))">
  81                                                 <small id="account-details-input-username-required"
  82                                                         class="err-message">Username is required</small>
  83                                         </div>
  84
  85                                 </div>
  86
  87                                 <div class="item">
  88                                         <div class="item-label">Password</div>
  89                                         <input id="account-details-input-password"
  90                                                 type="password" name="password" maxlength="100"
  91                                                 ng-model="accountAddDetails.account.password" autocomplete="off"/>
  92                                 </div>
  93
  94                                 <div class="item">
  95                                         <div class="item-label">Retype Password</div>
  96                                         <input id="account-details-input-repassword"
  97                                                 type="password" name="repassword" maxlength="100"
  98                                                 ng-model="accountAddDetails.account.repassword"
  99                                                 ng-change="accountAddDetails.confirmPassword()" />
 100
 101                                         <div class="error-container"
 102                                                 ng-show="accountAddDetails.passwordMatched == false">
 103                                                 <small id="accounts-details-input-name-dupliated"
 104                                                         class="err-message">Password does not match the confirm
 105                                                         password</small>
 106                                         </div>
 107                                 </div>
 108
 109
 110                                 <div class="add-endpoint-item">
 111                                         <div class="item-label add-label-left">Add Endpoint</div>
 112                                         <div class="icon-add add-label-right" id="accountAddDetails-button-accordion"
 113                                                 ng-click="accountAddDetails.addEndpoint()"></div>
 114                                 </div>
 115                                 <div class="item">
 116                                         <div class="item-label"
 117                                                 ng-show="accountAddDetails.account.endpointList.length > 0">
 118                                                 Account endpoint</div>
 119
 120                                         <div id="account-details-user-paramters"
 121                                                 ng-repeat="endpoint in accountAddDetails.account.endpointList">
 122
 123                                                 <div class="endpoint-item-left">
 124                                                         <input id="account-details-input-endpoint-name"
 125                                                                 type="text" name="endpointName"
 126                                                                 maxlength="200" ng-model="endpoint.name"
 127                                                                 ng-change="accountAddDetails.updateAccountEndpoint(endpoint)"/>
 128                                                 </div>
 129
 130                                                 <div class="icon-circle-action-remove endpoint-item-middle"
 131                                                         ng-click="accountAddDetails.removeEndpointItem(endpoint)"></div>
 132
 133                                                 <div class="error-container endpoint-item-right"
 134                                                                 ng-show="endpoint.valid == false">
 135                                                                 <small id="accounts-details-input-invalid-endpoint"
 136                                                                         class="err-message">Invalid end point format</small>
 137                                                 </div>
 138
 139                                         </div>
 140
 141                                         <div class="account-property">
 142                                                 <div class="property-label checkbox-label">
 143                                                         <label for="accounts-checkbox-app-is-enabled" class="checkbox">
 144                                                 <input type="checkbox" ng-model="accountAddDetails.account.active" id="accounts-checkbox-app-is-enabled"/>
 145                                                 <i class="skin"></i>
 146                                                 <span>Active</span>
 147                                         </label>
 148                                                 </div>
 149                                         </div>
 150
 151                                 </div>
 152
 153                         </form>
 154                 </div>
 155                         </div>
 156                         <br>
 157                         <div class="b2b-modal-footer">
 158                                 <div class="cta-button-group cta-modal-footer-flex">
 159                                         <div class="item">
 160                                                 <div id="account-details-next-button" class="btn btn-alt btn-small" ng-click="$dismiss('cancel')">Close</div>
 161                                                 <div id="account-details-next-button" class="btn btn-alt btn-small" ng-click="accountAddDetails.saveChanges()">Save</div>
 162                                         </div>
 163                                 </div>
 164                         </div>
 165
 166 </div>
 167
 168 <script>
 169 $(document).ready(function(){
 170     $(".ngdialog-close").attr('id','dialog-close');
 171 });
 172 </script>