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">Name
 160                                                         Space</div>
 161                                                 <input type="text" id="input-mylogins-auth-namespace"
 162                                                         ng-model="appDetails.app.nameSpace" name="appAuthNameSpace"
 163                                                         maxlength="256" />
 164                                         </div>
 165                                 </div>
 166                                 <div class="right-container">
 167                                         <div class="property">
 168                                                 <div class="property-label">Upload Image</div>
 169                                                 <input type="file" id="input-app-image-upload"
 170                                                         class="input-file-field" accept="image/*"
 171                                                         ng-model="appDetails.originalImage" name="appImage"
 172                                                         image-upload="appDetails.originalImage"
 173                                                         image-upload-resize-max-height="300"
 174                                                         image-upload-resize-max-width="360"
 175                                                         image-upload-resize-quality="0.7"
 176                                                         image-upload-api="appDetails.imageApi" style="height: 24px;" />
 177
 178                                                 <div id="app-error-image-upload" class="error-container"
 179                                                         ng-show="appForm.appImage.$dirty">
 180                                                         <div ng-messages="appForm.appImage.$error"
 181                                                                 class="error-container">
 182                                                                 <small id="error-app-invalid-image" class="err-message"
 183                                                                         ng-message="mimeType">Uploaded file must be an image</small> <small
 184                                                                         id="error-app-invalid-image-size" class="err-message"
 185                                                                         ng-message="imageSize">Image file must be smaller than
 186                                                                         1MB</small>
 187                                                         </div>
 188                                                 </div>
 189
 190                                                 <div class="property-label preview">
 191                                                         <span class="left-label">Preview</span> <span class="remove"
 192                                                                 ng-click="appDetails.removeImage()">Remove</span>
 193                                                 </div>
 194                                                 <img id="image-app-preview" class="image-preview"
 195                                                         ng-src="{{appDetails.app.imageLink || appDetails.app.thumbnail || appDetails.emptyImgForPreview}}" />
 196                                                 <div id="property-communication-inbox" class="property"
 197                                                         ng-show="!appDetails.app.restrictedApp">
 198                                                         <div id="property-communication-inbox-label"
 199                                                                 class="property-label">Communication Inbox</div>
 200                                                         <input type="text" id="input-UEB-topicname"
 201                                                                 ng-model="appDetails.app.uebTopicName" name="uebTopicName"
 202                                                                 readonly="readonly" />
 203                                                 </div>
 204
 205                                                 <div id="property-communication-key" class="property"
 206                                                         ng-show="!appDetails.app.restrictedApp">
 207                                                         <div id="property-communication-key-label" class="property-label">Communication
 208                                                                 Key</div>
 209                                                         <input type="text" id="input-UEB-communication-key"
 210                                                                 ng-model="appDetails.app.uebKey" name="uebKey"
 211                                                                 readonly="readonly" />
 212                                                 </div>
 213
 214                                                 <div id="property-communication-secret" class="property"
 215                                                         ng-show="!appDetails.app.restrictedApp">
 216                                                         <div id="property-communication-secret-label"
 217                                                                 class="property-label">Communication Secret</div>
 218                                                         <input type="text" id="input-UEB-communication-secret"
 219                                                                 ng-model="appDetails.app.uebSecret" name="uebSecret"
 220                                                                 readonly="readonly" />
 221                                                 </div>
 222
 223                                                 <div id="property-guest-access" class="property">
 224                                                         <label for="checkbox-app-is-open" class="checkbox"> <input
 225                                                                 type="checkbox" ng-model="appDetails.app.isOpen"
 226                                                                 id="checkbox-app-is-open"
 227                                                                 ng-checked="appDetails.app.isOpen || appDetails.app.restrictedApp"
 228                                                                 ng-disabled="appDetails.app.restrictedApp" /> <i class="skin"></i>
 229                                                                 <span>Allow guest access</span>
 230                                                         </label>
 231                                                 </div>
 232                                                 <div id="property-active" class="property">
 233                                                         <label for="checkbox-app-is-enabled" class="checkbox"> <input
 234                                                                 type="checkbox" ng-model="appDetails.app.isEnabled"
 235                                                                 id="checkbox-app-is-enabled" /> <i class="skin"></i> <span>Active</span>
 236                                                         </label>
 237                                                 </div>
 238                                                 <br />
 239                                                 <div id="property-is-central-auth" class="property"
 240                                                         ng-show="!appDetails.app.restrictedApp">
 241                                                         <label for="checkbox-app-is-central-auth" class="checkbox">
 242                                                                 <input type="checkbox" ng-model="appDetails.app.isCentralAuth"
 243                                                                 id="checkbox-app-is-central-auth" /> <i class="skin"></i> <span>Centralized</span>
 244                                                         </label>
 245                                                 </div>
 246
 247                                         </div>
 248
 249                                 </div>
 250                         </form>
 251                 </div>
 252         </div>
 253 </div>
 254 <div class="b2b-modal-footer">
 255         <div align="right">
 256                 <span class="ecomp-save-spinner" ng-show="appDetails.isSaving"></span>
 257                 <button id="button-save-app" class="btn btn-alt btn-small"
 258                         ng-class="{disabled: appForm.$invalid}"
 259                         ng-click="appDetails.saveChanges()">Save</button>
 260                 <button id="button-notification-cancel" class="btn btn-alt btn-small"
 261                         ng-click="$dismiss('cancel')" role="button" tabindex="0">Cancel</button>
 262         </div>
 263 </div>