bf81b79241ef542fcab636e95a21af0fcb33d33d
[motion-next.git] /
1 <md-dialog class="cloudProvider-dialog" aria-label="New CloudProvider">
2   <form name="cloudProviderForm" class="md-inline-form" novalidate>
3     <md-toolbar class="md-accent md-hue-2">
4       <div
5         class="md-toolbar-tools"
6         layout="row"
7         layout-align="space-between center"
8       >
9         <span class="title">{{ vm.title | translate }}</span>
10         <md-button class="md-icon-button" ng-click="vm.closeDialog()">
11           <md-icon
12             md-font-icon="icon-close"
13             aria-label="Close dialog"
14           ></md-icon>
15         </md-button>
16       </div>
17     </md-toolbar>
18
19     <md-dialog-content ms-scroll>
20       <div class="error-list">
21         <div
22           ng-repeat="error in vm.errors"
23           class="error"
24           layout="row"
25           layout-align="space-between center"
26         >
27           <div>
28             <span class="message">{{error.message}}</span>
29             <span class="type">({{error.type}})</span>
30           </div>
31           <md-button class="md-icon-button">
32             <md-icon
33               md-font-icon="icon-alert-box"
34               aria-label="alert error"
35               class="s16"
36             ></md-icon>
37           </md-button>
38         </div>
39       </div>
40       <md-input-container class="md-block">
41         <label translate="SETTINGS.NAME">Name</label>
42         <input
43           type="text"
44           name="name"
45           ng-model="vm.cloudProvider.name"
46           ng-required="true"
47           autofocus
48         />
49
50         <div
51           ng-messages="cloudProviderForm['name'].$error"
52           ng-show="cloudProviderForm['name'].$touched"
53           role="alert"
54         >
55           <div ng-message="required">
56             <span translate="SETTINGS.ERRORS.NAME_REQUIRED"
57               >Name field is required</span
58             >
59           </div>
60         </div>
61       </md-input-container>
62       <md-input-container class="md-block">
63         <label translate="SETTINGS.SERVICE">Service</label>
64         <md-select
65           name="service"
66           ng-model="vm.cloudProvider.service"
67           required
68           ng-disabled="!vm.newCloudProvider"
69         >
70           <md-option ng-value="'AmazonAWS'">AmazonAWS</md-option>
71         </md-select>
72         <div
73           ng-messages="cloudProviderForm['service'].$error"
74           ng-show="cloudProviderForm['service'].$touched"
75           role="alert"
76         >
77           <div ng-message="required">
78             <span translate="SETTINGS.ERRORS.SERVICE_REQUIRED"
79               >Service field is required</span
80             >
81           </div>
82         </div>
83       </md-input-container>
84       <md-input-container
85         ng-if="vm.cloudProvider.service == 'AmazonAWS'"
86         class="md-block"
87       >
88         <label translate="SETTINGS.ACCESSKEY">AccessKey</label>
89         <input
90           type="text"
91           name="data2"
92           ng-model="vm.cloudProvider.data2"
93           ng-required="true"
94         />
95
96         <div
97           ng-messages="cloudProviderForm['data2'].$error"
98           ng-show="cloudProviderForm['data2'].$touched"
99           role="alert"
100         >
101           <div ng-message="required">
102             <span translate="SETTINGS.ERRORS.ACCESSKEY_REQUIRED"
103               >AccessKey field is required</span
104             >
105           </div>
106         </div>
107       </md-input-container>
108       <md-input-container
109         ng-if="vm.cloudProvider.service == 'AmazonAWS'"
110         class="md-block"
111       >
112         <label translate="SETTINGS.SECRETACCESSKEY">SecretAccesskey</label>
113         <input
114           type="text"
115           name="data1"
116           ng-model="vm.cloudProvider.data1"
117           ng-required="true"
118         />
119
120         <div
121           ng-messages="cloudProviderForm['data1'].$error"
122           ng-show="cloudProviderForm['data1'].$touched"
123           role="alert"
124         >
125           <div ng-message="required">
126             <span translate="SETTINGS.ERRORS.SECRETACCESSKEY_REQUIRED"
127               >SecretAccesskey field is required</span
128             >
129           </div>
130         </div>
131       </md-input-container>
132
133       <div class="error-list">
134         <div
135           ng-repeat="error in vm.errors"
136           class="error"
137           layout="row"
138           layout-align="space-between center"
139         >
140           <div>
141             <span class="message">{{error.message}}</span>
142             <span class="type">({{error.type}})</span>
143           </div>
144           <md-button class="md-icon-button">
145             <md-icon
146               md-font-icon="icon-alert-box"
147               aria-label="alert error"
148               class="s16"
149             ></md-icon>
150           </md-button>
151         </div>
152       </div>
153     </md-dialog-content>
154
155     <md-dialog-actions layout="row" layout-align="space-between center">
156       <div layout="row" layout-align="start center">
157         <md-button
158           type="submit"
159           ng-if="!vm.newCloudProvider"
160           ng-click="vm.saveCloudProvider()"
161           class="send-button md-accent md-raised"
162           ng-disabled="cloudProviderForm.$invalid || cloudProviderForm.$pristine"
163           aria-label="SAVE"
164           translate="SETTINGS.SAVE"
165           translate-attr-aria-label="SETTINGS.SAVE"
166         >
167           SAVE
168         </md-button>
169
170         <md-button
171           type="submit"
172           ng-if="vm.newCloudProvider"
173           ng-click="vm.addNewCloudProvider()"
174           class="send-button md-accent md-raised"
175           ng-disabled="cloudProviderForm.$invalid"
176           aria-label="ADD"
177           translate="SETTINGS.ADD_CLOUDPROVIDER"
178           translate-attr-aria-label="SETTINGS.ADD_CLOUDPROVIDER"
179         >
180           ADD CLOUDPROVIDER
181         </md-button>
182       </div>
183       <div layout="row">
184         <md-button
185           class="md-icon-button"
186           ng-click="vm.deleteCloudProvider($event)"
187           aria-label="DELETE"
188           translate
189           translate-attr-aria-label="SETTINGS.DELETE"
190         >
191           <md-icon md-font-icon="icon-delete"></md-icon>
192           <md-tooltip
193             ><span translate="SETTINGS.DELETE">DELETE</span></md-tooltip
194           >
195         </md-button>
196       </div>
197     </md-dialog-actions>
198   </form>
199 </md-dialog>