ecomp-portal-FE-os/client/src/views/applications/application-details-dialog/application-details.modal.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
  39 <div class="b2b-modal-header">
  40         <h2 class="account-details-title" id="application-details-title">Application
  41                 Details</h2>
  42         <div class="corner-button in">
  43                 <button type="button" class="close" id="div-confirm-close-button"
  44                         aria-label="Close" ng-click="$dismiss('cancel')"></button>
  45         </div>
  46 </div>
  47 <div class="b2b-modal-body">
  48         <div class="application-details-modal">
  49                 <div class="app-properties-main" scroll-top="appDetails.scrollApi">
  50                         <form name="appForm" novalidate autocomplete="off">
  51                                 <div id="app-left-container" class="left-container">
  52                                         <div class="property-label checkbox-label">
  53                                                 <label for="checkbox-app-is-restricted" class="checkbox">
  54                                                         <input type="checkbox" ng-model="appDetails.app.restrictedApp"
  55                                                         id="checkbox-app-is-restricted"
  56                                                         ng-disabled="appDetails.isEditMode"
  57                                                         ng-checked="appDetails.app.restrictedApp" /> <i class="skin"></i>
  58                                                         <span>Hyperlink only application</span>
  59                                                 </label>
  60                                         </div>
  61                                         <div class="property required">
  62                                                 <div class="property-label">Application Name</div>
  63                                                 <input id="input-app-name" type="text"
  64                                                         ng-model="appDetails.app.name" maxlength="100" name="name"
  65                                                         ng-pattern="/^[a-zA-Z0-9_\-\s\&]*$/" required />
  66
  67                                                 <div id="error-container-conflict" class="error-container"
  68                                                         ng-show="appDetails.conflictMessages.name"
  69                                                         id="conflictMessages-name">
  70                                                         <small id="app-name-error-conflict" class="err-message"
  71                                                                 ng-bind="appDetails.conflictMessages.name"></small>
  72                                                 </div>
  73                                                 <div id="error-container-edit" class="error-container"
  74                                                         ng-show="appForm.name.$dirty || appDetails.isEditMode">
  75                                                         <div ng-messages="appForm.name.$error" class="error-container">
  76                                                                 <small id="app-name-error-required" class="err-message"
  77                                                                         ng-message="required">Application name is required</small> <small
  78                                                                         id="app-name-error-alpha-num" class="err-message"
  79                                                                         ng-message="pattern">Application name must be
  80                                                                         alphanumeric</small>
  81                                                         </div>
  82                                                 </div>
  83                                         </div>
  84                                         <div class="property required">
  85                                                 <div id="url-property-label" class="property-label">URL</div>
  86                                                 <input id="input-app-url" ng-model="appDetails.app.url"
  87                                                         maxlength="256" name="url" type="url" placeholder="https://"
  88                                                         ng-pattern="appDetails.ECOMP_URL_REGEX" required />
  89                                                 <div id="app-error-url" class="error-container"
  90                                                         ng-show="appDetails.conflictMessages.url"
  91                                                         id="div-app-name-err-url">
  92                                                         <small class="err-message"
  93                                                                 ng-bind="appDetails.conflictMessages.url"></small>
  94                                                 </div>
  95                                                 <div id="app-error-url-message" class="error-container"
  96                                                         ng-show="appForm.url.$dirty || appDetails.isEditMode">
  97                                                         <div ng-messages="appForm.url.$error" class="error-container">
  98                                                                 <small id="error-app-url-req" class="err-message"
  99                                                                         ng-message="required">Application URL is required</small>
 100                                                                 <!--<small id="error-app-url-invalid" class="err-message" ng-message="pattern">Application URL must be a valid URL</small>-->
 101                                                                 <small id="error-app-url-invalid" class="err-message"
 102                                                                         ng-show="appForm.url.$error.url">Application URL must
 103                                                                         be a valid URL</small>
 104                                                         </div>
 105                                                 </div>
 106                                                 <!--<span class="err-message" ng-show="appForm.url.$error.url"> Not valid URL!</span>-->
 107                                         </div>
 108
 109
 110                                         <div class="property required" ng-show="!appDetails.app.restrictedApp">
 111                                                 <div class="property-label">Rest API URL</div>
 112                                                 <input id="input-app-rest-url" ng-model="appDetails.app.restUrl"
 113                                                         name="restUrl" type="url" placeholder="https://"
 114                                                         ng-pattern="appDetails.ECOMP_URL_REGEX" maxlength="256"
 115                                                         ng-required="!appDetails.app.restrictedApp" />
 116                                                 <div id="app-error-rest-message" class="error-container"
 117                                                         ng-show="appForm.restUrl.$dirty || appDetails.isEditMode">
 118                                                         <div ng-messages="appForm.restUrl.$error" class="error-container">
 119                                                                 <small class="err-message" ng-show="appForm.restUrl.$error.url">Application
 120                                                                         REST URL must be a valid URL</small>
 121                                                         </div>
 122                                                 </div>
 123                                         </div>
 124
 125                                         <div class="property required"
 126                                                 ng-show="!appDetails.app.restrictedApp">
 127                                                 <div id="username-property-label" class="property-label">Username</div>
 128                                                 <input type="text" ng-model="appDetails.app.username"
 129                                                         name="username" maxlength="256"
 130                                                         ng-required="!appDetails.app.restrictedApp" />
 131                                                 <div id="app-error-username-container" class="error-container"
 132                                                         ng-show="appForm.username.$dirty || appDetails.isEditMode">
 133                                                         <div ng-messages="appForm.username.$error"
 134                                                                 class="error-container">
 135                                                                 <small id="error-appusername-reqd" class="err-message"
 136                                                                         ng-message="required">My Logins App Username is
 137                                                                         required</small>
 138                                                         </div>
 139                                                 </div>
 140                                         </div>
 141                                         <!-- <div class="property required"
 142                                                 ng-show="!appDetails.app.restrictedApp">
 143                                                 <div id="pwd-property-label" class="property-label">Password</div>
 144                                                 <input type="password" id="input-mylogins-password"
 145                                                         ng-model="appDetails.app.appPassword" autocomplete="new-password"
 146                                                         name="appPassword" maxlength="256"
 147                                                         ng-required="!appDetails.app.restrictedApp" />
 148                                                 <div id="app-error-password-container" class="error-container"
 149                                                         ng-show="appForm.appPassword.$dirty || appDetails.isEditMode">
 150                                                         <div ng-messages="appForm.appPassword.$error"
 151                                                                 class="error-container">
 152                                                                 <small id="error-mylogins-password-reqd" class="err-message"
 153                                                                         ng-message="required">My Logins App Password is
 154                                                                         required</small>
 155                                                         </div>
 156                                                 </div>
 157                                         </div> -->
 158                                         <div class="property" ng-show="!appDetails.app.restrictedApp">
 159                                                 <div id="pwd-property-label" class="property-label">Password</div>
 160                                                 <input type="password" id="input-mylogins-password"
 161                                                         ng-model="appDetails.app.appPassword" autocomplete="new-password"
 162                                                         name="appPassword" maxlength="256"/>
 163                                         </div>
 164                                         <div class="property" ng-show="!appDetails.app.restrictedApp">
 165                                                 <div id="pwd-property-label" class="property-label">Name
 166                                                         Space</div>
 167                                                 <input type="text" id="input-mylogins-auth-namespace"
 168                                                         ng-model="appDetails.app.nameSpace" name="appAuthNameSpace"
 169                                                         maxlength="256" />
 170                                         </div>
 171                                 </div>
 172                                 <div class="right-container">
 173                                         <div class="property">
 174                                                 <div class="property-label">Upload Image</div>
 175                                                 <input type="file" id="input-app-image-upload"
 176                                                         class="input-file-field" accept="image/*"
 177                                                         ng-model="appDetails.originalImage" name="appImage"
 178                                                         image-upload="appDetails.originalImage"
 179                                                         image-upload-resize-max-height="300"
 180                                                         image-upload-resize-max-width="360"
 181                                                         image-upload-resize-quality="0.7"
 182                                                         image-upload-api="appDetails.imageApi" style="height: 24px;"
 183                                                         file-change="appImageHandler($event,files)" />
 184                                                 <div id="app-error-image-upload-type" class="error-container"
 185                                                         ng-show="appImageTypeError" class="ng-hide">
 186                                                         <div class="error-container">
 187                                                                  <small id="error-app-invalid-image-size" class="err-message">File must be an image</small>
 188                                                         </div>
 189                                                 </div>
 190                                                         file-change="appImageHandler($event,files)" />
 191                                                 <div id="app-error-image-upload-type" class="error-container"
 192                                                         ng-show="appImageTypeError" class="ng-hide">
 193                                                         <div class="error-container">
 194                                                                  <small id="error-app-invalid-image-size" class="err-message">File must be an image</small>
 195                                                         </div>
 196                                                 </div>
 197
 198                                                 <div id="app-error-image-upload" class="error-container"
 199                                                         ng-show="appForm.appImage.$dirty">
 200                                                         <div ng-messages="appForm.appImage.$error"
 201                                                                 class="error-container">
 202                                                                 <small id="error-app-invalid-image-size" class="err-message"
 203                                                                         ng-message="imageSize">Image file must be smaller than
 204                                                                         1MB</small>
 205                                                         </div>
 206                                                 </div>
 207
 208                                                 <div class="property-label preview">
 209                                                         <span class="left-label">Preview</span> <span class="remove"
 210                                                                 ng-click="appDetails.removeImage()">Remove</span>
 211                                                 </div>
 212                                                 <img id="image-app-preview" class="image-preview"
 213                                                         ng-src="{{appDetails.app.imageLink || appDetails.app.thumbnail || appDetails.emptyImgForPreview}}" />
 214                                                 <div id="property-communication-inbox" class="property"
 215                                                         ng-show="!appDetails.app.restrictedApp">
 216                                                         <div id="property-communication-inbox-label"
 217                                                                 class="property-label">Communication Inbox</div>
 218                                                         <input type="text" id="input-UEB-topicname"
 219                                                                 ng-model="appDetails.app.uebTopicName" name="uebTopicName"
 220                                                                 readonly="readonly" />
 221                                                 </div>
 222
 223                                                 <div id="property-communication-key" class="property"
 224                                                         ng-show="!appDetails.app.restrictedApp">
 225                                                         <div id="property-communication-key-label" class="property-label">Communication
 226                                                                 Key</div>
 227                                                         <input type="text" id="input-UEB-communication-key"
 228                                                                 ng-model="appDetails.app.uebKey" name="uebKey"
 229                                                                 readonly="readonly" />
 230                                                 </div>
 231
 232                                                 <div id="property-communication-secret" class="property"
 233                                                         ng-show="!appDetails.app.restrictedApp">
 234                                                         <div id="property-communication-secret-label"
 235                                                                 class="property-label">Communication Secret</div>
 236                                                         <input type="text" id="input-UEB-communication-secret"
 237                                                                 ng-model="appDetails.app.uebSecret" name="uebSecret"
 238                                                                 readonly="readonly" />
 239                                                 </div>
 240
 241                                                 <div id="property-guest-access" class="property">
 242                                                         <label for="checkbox-app-is-open" class="checkbox"> <input
 243                                                                 type="checkbox" ng-model="appDetails.app.isOpen"
 244                                                                 id="checkbox-app-is-open"
 245                                                                 ng-checked="appDetails.app.isOpen || appDetails.app.restrictedApp"
 246                                                                 ng-disabled="appDetails.app.restrictedApp" /> <i class="skin"></i>
 247                                                                 <span>Allow guest access</span>
 248                                                         </label>
 249                                                 </div>
 250                                                 <div id="property-active" class="property">
 251                                                         <label for="checkbox-app-is-enabled" class="checkbox"> <input
 252                                                                 type="checkbox" ng-model="appDetails.app.isEnabled"
 253                                                                 id="checkbox-app-is-enabled" /> <i class="skin"></i> <span>Active</span>
 254                                                         </label>
 255                                                 </div>
 256                                                 <br />
 257                                                 <div id="property-is-central-auth" class="property"
 258                                                         ng-show="!appDetails.app.restrictedApp">
 259                                                         <label for="checkbox-app-is-central-auth" class="checkbox">
 260                                                                 <input type="checkbox" ng-model="appDetails.app.isCentralAuth"
 261                                                                 id="checkbox-app-is-central-auth" /> <i class="skin"></i> <span>Centralized</span>
 262                                                         </label>
 263                                                 </div>
 264
 265                                         </div>
 266
 267                                 </div>
 268                         </form>
 269                 </div>
 270         </div>
 271 </div>
 272 <div class="b2b-modal-footer">
 273         <div align="right">
 274                 <span class="ecomp-save-spinner" ng-show="appDetails.isSaving"></span>
 275                 <button id="button-save-app" class="btn btn-alt btn-small"
 276                         ng-class="{disabled: appForm.$invalid}"
 277                         ng-click="appDetails.saveChanges()">Save</button>
 278                 <button id="button-notification-cancel" class="btn btn-alt btn-small"
 279                         ng-click="$dismiss('cancel')" role="button" tabindex="0">Cancel</button>
 280         </div>
 281 </div>