Make uninstall a separate view

src/views/app.html

@@ -31,20 +31,17 @@
     }
 </script>
 
-
 <!-- Modal uninstall app -->
 <div class="modal fade" id="uninstallModal" tabindex="-1" role="dialog">
   <div class="modal-dialog">
     <div class="modal-content">
-      <div class="modal-header">
-        <h4 class="modal-title">Really uninstall {{ app.fqdn }} ?</h4>
-      </div>
       <div class="modal-body">
-        <p>Deleting the app will also remove all it's data. App backups are not removed and will be cleaned up based on the backup policy.</p>
+        <br/>
+        <p>Really uninstall <b>{{ app.fqdn }}</b> ?</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-        <button type="button" class="btn btn-danger" ng-click="uninstall.submit()" ng-disabled="uninstall.busy"><i class="fa fa-circle-notch fa-spin" ng-show="uninstall.busy"></i> Uninstall</button>
+        <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
+        <button type="button" class="btn btn-danger" ng-click="uninstall.submit()" ng-disabled="uninstall.busy"><i class="fa fa-circle-notch fa-spin" ng-show="uninstall.busy"></i> Yes</button>
       </div>
     </div>
   </div>
@@ -132,8 +129,7 @@
       <h1 style="line-height: 0.7;">
         {{ app.label || app.fqdn }}
         <a class="btn btn-sm btn-outline btn-primary pull-right" ng-href="https://{{ app.fqdn }}" target="_blank"><i class="fas fa-external-link-alt"></i> Open App</a>
-        <a class="btn btn-sm btn-outline btn-info pull-right" ng-href="{{ app.manifest.documentationUrl }}" target="_blank">Documentation</a>
-        <button class="btn btn-sm btn-danger pull-right" ng-click="uninstall.show()">Uninstall</button>
+        <a class="btn btn-sm btn-outline btn-primary pull-right" ng-href="{{ app.manifest.documentationUrl }}" target="_blank">Documentation</a>
         <br/>
         <span class="text-small">
           {{ app | installationStateLabel:user }}
@@ -156,6 +152,7 @@
         <div ng-click="setView('updates')" ng-class="{ 'active': view === 'updates' }">Updates</div>
         <div ng-click="setView('backups')" ng-class="{ 'active': view === 'backups' }">Backups</div>
         <div ng-click="setView('debug')" ng-class="{ 'active': view === 'debug' }">Debug</div>
+        <div ng-click="setView('uninstall')" ng-class="{ 'active': view === 'uninstall' }">Uninstall</div>
       </div>
     </div>
     <div class="col-md-8">
@@ -550,6 +547,17 @@
         </div>
       </div>
 
+      <div class="card" ng-show="view === 'uninstall'">
+          <div class="row">
+            <div class="col-md-12">
+              <p class="text-danger">Deleting the app will also remove all it's data.</p>
+              <p>App backups are not removed and will be cleaned up based on the backup policy.</p>
+
+              <button class="btn btn-danger pull-right" ng-click="uninstall.ask()">Uninstall</button>
+            </div>
+          </div>
+        </div>
+
     </div>
   </div>
 </div>

src/views/app.js

@@ -505,6 +505,9 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
         error: {},
 
         show: function () {
+        },
+
+        ask: function () {
             $('#uninstallModal').modal('show');
         },