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