From ea9b03f8858cb126a9eda0b5c055e27261c8f69e Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Thu, 10 Nov 2022 17:44:11 +0100
Subject: [PATCH] Add initial community package confirm modal

---
 src/views/appstore.html | 26 ++++++++++++++++++++++----
 src/views/appstore.js   | 19 +++++++++++++++++--
 2 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/views/appstore.html b/src/views/appstore.html
index 6fa80820f..3d5cf1f57 100644
--- a/src/views/appstore.html
+++ b/src/views/appstore.html
@@ -211,6 +211,24 @@
   </div>
 </div>
 
+<!-- Modal select community repo -->
+<div class="modal fade" id="communityRepoModal" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title">Enable Community Repository</h4>
+      </div>
+      <div class="modal-body">
+        App packages from the community repository are not maintained by the Cloudron team. We cannot provide app packages specific help for those apps if they stop working or if data migration on update fails.
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.close' | tr }}</button>
+        <button type="button" class="btn btn-danger" ng-click="enableCommunityRepo.accept()">{{ 'main.dialog.yes' | tr }}</button>
+      </div>
+    </div>
+  </div>
+</div>
+
 <!-- Modal applinks add -->
 <div class="modal fade" id="applinksAddModal" tabindex="-1" role="dialog">
   <div class="modal-dialog">
@@ -356,12 +374,12 @@
     <div class="appstore-toolbar-content">
       <div class="dropdown">
         <button class="btn btn-outline dropdown-toggle" type="button" data-toggle="dropdown">
-          Repository
+          {{ repository | capitalize }} Packages
           <span class="caret"></span>
         </button>
         <ul class="dropdown-menu">
-          <li><a href="" ng-click="setRepository('core');">Core</a></li>
-          <li><a href="" ng-click="setRepository('community');">Community</a></li>
+          <li><a href="" ng-click="setCoreRepository();">Core</a></li>
+          <li><a href="" ng-click="enableCommunityRepo.show();">Community</a></li>
         </ul>
       </div>
 
@@ -407,7 +425,7 @@
     <div class="" ng-show="category === '' && popularApps.length">
       <div class="row-no-margin">
         <div class="col-sm-12">
-          <h2>{{ 'appstore.category.popular' | tr }} ({{ repository }})</h2>
+          <h2>{{ 'appstore.category.popular' | tr }}</h2>
         </div>
       </div>
       <div class="row-no-margin">
diff --git a/src/views/appstore.js b/src/views/appstore.js
index 2b76cc174..cacdd208e 100644
--- a/src/views/appstore.js
+++ b/src/views/appstore.js
@@ -30,12 +30,27 @@ angular.module('Application').controller('AppStoreController', ['$scope', '$tran
     $scope.memory = null; // { memory, swap }
     $scope.repository = 'core'; // core or community
 
-    $scope.setRepository = function (repository) {
-        $scope.repository = repository;
+    $scope.setCoreRepository = function () {
+        if ($scope.repository === 'core') return;
 
+        $scope.repository = 'core';
         $scope.showCategory($scope.category);
     };
 
+    $scope.enableCommunityRepo = {
+        show: function () {
+            if ($scope.repository === 'community') return;
+
+            $('#communityRepoModal').modal('show');
+        },
+
+        accept: function () {
+            $scope.repository = 'community';
+            $scope.showCategory($scope.category);
+            $('#communityRepoModal').modal('hide');
+        }
+    };
+
     $scope.showView = function (view) {
         // wait for dialog to be fully closed to avoid modal behavior breakage when moving to a different view already
         $('.modal').on('hidden.bs.modal', function () {