Merge pull request #3745 from EifonUser/SHARE-539

SHARE-539 Improve feedback for download project button
Catrobat · Feb 17, 2023 · 5bb5f36 · 5bb5f36
2 parents f025a76 + edff54f
commit 5bb5f36
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 4 deletions.
diff --git a/assets/js/custom/Program.js b/assets/js/custom/Program.js
@@ -45,6 +45,13 @@ export const Program = function (projectId, projectName, userRole, myProgram, st
     )
   })
 
+  $($('.js-btn-project-download-disabled').on('click', (e) => {
+    downloadDisabled(
+      $(e.currentTarget).data('redirect-url')
+      // $(e.currentTarget).data('alert-text')
+    )
+  }))
+
   $('.js-btn-project-apk-download').on('click', (e) => {
     download(
       $(e.currentTarget).data('path-url'),
@@ -120,6 +127,25 @@ export const Program = function (projectId, projectName, userRole, myProgram, st
       })
   }
 
+  function downloadDisabled (redirectUrl) {
+    /* Swal.fire({
+      icon: 'error',
+      title: 'Login',
+      text: text,
+      customClass: {
+        confirmButton: 'btn btn-primary'
+      },
+      buttonsStyling: false,
+      allowOutsideClick: false,
+      timer: 5000,
+    }).then((result) => {
+      if (result.value) {
+        window.location.replace(redirectUrl)
+      }
+    }); */
+    window.location.replace(redirectUrl)
+  }
+
   function resetDownloadButtonIcon (icon, spinner) {
     icon.classList.remove('d-none')
     icon.classList.add('d-inline-block')

diff --git a/src/Application/Controller/Project/ProgramController.php b/src/Application/Controller/Project/ProgramController.php
@@ -89,6 +89,7 @@ public function projectAction(Request $request, string $id): Response
     $active_like_types = $this->program_manager->findProgramLikeTypes($project->getId());
     $total_like_count = $this->program_manager->totalLikeCount($project->getId());
     $program_comments = $this->findCommentsById($project->getId());
+    $login_redirect = $this->generateUrl('login', [], UrlGeneratorInterface::ABSOLUTE_URL);
 
     foreach ($program_comments as $program_comment) {
       $program_comment->setNumberOfReplies($this->countByParentId($program_comment->getId()));
@@ -101,6 +102,7 @@ public function projectAction(Request $request, string $id): Response
 
     return $this->render('Program/program.html.twig', [
       'program' => $project,
+      'login_redirect' => $login_redirect,
       'program_details' => $program_details,
       'my_program' => $my_program,
       'logged_in' => $logged_in,
@@ -143,7 +145,7 @@ public function projectLikeAction(Request $request, string $id): Response
     $user = $this->getUser();
     if (!$user) {
       if ($request->isXmlHttpRequest()) {
-        return new JsonResponse(['statusCode' => 601], Response::HTTP_UNAUTHORIZED);
+        return new JsonResponse(['statusCode' => 401], Response::HTTP_UNAUTHORIZED);
       }
 
       $request->getSession()->set('catroweb_login_redirect', $this->generateUrl(

diff --git a/templates/Program/program.html.twig b/templates/Program/program.html.twig
@@ -83,7 +83,11 @@
     </div>
 
     <div class="d-none d-lg-block col-lg-4 mt-4 ">
-      {% include 'Program/program_download_button.html.twig' %}
+      {% if logged_in %}
+        {% include 'Program/program_download_button.html.twig' %}
+      {% else %}
+        {% include 'Program/program_download_disabled_button.html.twig' %}
+      {% endif %}
       {% if not isIOS() %}
         <div class="mt-3">
           {% include 'Program/program_apk_generation_buttons.html.twig' %}
@@ -110,7 +114,11 @@
       </div>
     </div>
     <div class="col-7 col-sm-8 mt-3" style="padding-left: 0;">
-      {% include 'Program/program_download_button.html.twig' with {'suffix': '-small'} %}
+      {% if logged_in %}
+        {% include 'Program/program_download_button.html.twig' with {'suffix': '-small'} %}
+      {% else %}
+        {% include 'Program/program_download_disabled_button.html.twig' with {'suffix': '-small'} %}
+      {% endif %}
     </div>
   </div>
 

diff --git a/templates/Program/program_download_disabled_button.html.twig b/templates/Program/program_download_disabled_button.html.twig
@@ -0,0 +1,18 @@
+<button id="projectDownloadDisabledButton{{ suffix|default('') }}" class="btn btn-primary btn-block js-btn-project-download-disabled"
+        data-redirect-url='{{ login_redirect }}'
+        data-alert-text="{{ 'downloadDisabledAlert'|trans({}, 'catroweb')}}"
+
+>
+
+  {# Loading spinner during download #}
+  <i id="projectDownloadDisabledButton__loadingSpinner{{ suffix|default('') }}" class="material-icons text-start d-none">
+    {% include 'components/loading_spinner.html.twig' with {'spinner_id': 'download-disabled-progressbar' ~ suffix|default(), 'size': 'small'} only %}
+  </i>
+
+  {# Icon #}
+  <i id="projectDownloadDisabledButton__icon{{ suffix|default('') }}" class="material-icons align-bottom">lock</i>
+
+  {# Text #}
+  <span>{{ "download"|trans({}, "catroweb") }}</span>
+
+</button>
diff --git a/tests/BehatFeatures/web/project-details/project_download.feature b/tests/BehatFeatures/web/project-details/project_download.feature
@@ -5,13 +5,15 @@ Feature: As a visitor I want to be able to download projects
     Given there are users:
       | id | name     |
       | 1  | Catrobat |
+      | 2  | User     |
     And there are projects:
       | id | name      | downloads | owned by | apk_ready |
       | 1  | project 1 | 5         | Catrobat | true      |
       | 2  | project 2 | 5         | Catrobat | true      |
 
   Scenario: I want to download a project via the button
-    When I am on "/app/project/1"
+    Given I log in as "Catrobat"
+    And I am on "/app/project/1"
     And I wait for the page to be loaded
     Then the element "#projectDownloadButton-small" should be visible
     And I click "#projectDownloadButton-small"

diff --git a/tests/BehatFeatures/web/project-details/project_download_disabled.feature b/tests/BehatFeatures/web/project-details/project_download_disabled.feature
@@ -0,0 +1,25 @@
+@web @project_page
+Feature: As a visitor I need to login to be able to download projects
+
+  Background:
+    Given there are users:
+      | id | name     |
+      | 1  | Catrobat |
+    And there are projects:
+      | id | name      | downloads | owned by | apk_ready |
+      | 1  | project 1 | 5         | Catrobat | true      |
+      | 2  | project 2 | 5         | Catrobat | true      |
+
+Scenario: I want to download a project via the button
+    When I am on "/app/project/1"
+    And I wait for the page to be loaded
+    Then the element "#projectDownloadDisabledButton-small" should be visible
+    And I click "#projectDownloadDisabledButton-small"
+    Then I am on "/app/login"
+    And I wait for the page to be loaded
+    And I fill in "_username" with "Catrobat"
+    And I fill in "_password" with "123456"
+    Then I press "Login"
+    And I wait for the page to be loaded
+    Then I should be logged in
+    And I am on "/app/project/1"
diff --git a/translations/catroweb.en.yaml b/translations/catroweb.en.yaml
@@ -27,6 +27,7 @@ reportIt: Yes, report it!
 areYouSure:  Are you sure?
 noWayOfReturn: There is no way to restore your actions!
 download: Download
+downloadDisabledAlert: You must be logged in to download this project
 name: Name
 description: Description
 noDescription: No description available.