Component error handling

app/assets/javascripts/app/directives/views/componentView.js

@@ -64,9 +64,17 @@ class ComponentView {
       $scope.reloading = true;
       let previouslyValid = $scope.componentValid;
 
-      $scope.offlineRestricted = component.offlineOnly && !isDesktopApplication();
+      var expired, offlineRestricted, urlError;
 
-      $scope.componentValid = !$scope.offlineRestricted && (!component.valid_until || (component.valid_until && component.valid_until > new Date()));
+      offlineRestricted = component.offlineOnly && !isDesktopApplication();
+      urlError = !isDesktopApplication() && (!component.url || component.hosted_url);
+      expired = component.valid_until && component.valid_until <= new Date();
+
+      $scope.componentValid = !offlineRestricted && !urlError && !expired;
+
+      if(offlineRestricted) $scope.error = 'offline-restricted';
+      if(urlError) $scope.error = 'url-missing';
+      if(expired) $scope.error = 'expired';
 
       if($scope.componentValid !== previouslyValid) {
         if($scope.componentValid) {

app/assets/templates/directives/component-modal.html.haml

@@ -6,6 +6,5 @@
       .header
         %h1.title
           {{component.name}}
-          %span.subtle.subtitle{"ng-if" => "component.runningLocally"} | Desktop Mode
         %a.close-button.info{"ng-click" => "dismiss()"} Close
       %component-view.component-view{"component" => "component"}

app/assets/templates/directives/component-view.html.haml

@@ -1,4 +1,4 @@
-.sn-component{"ng-if" => "!componentValid && !offlineRestricted"}
+.sn-component{"ng-if" => "error == 'expired'"}
   .panel.static
     .content
       .panel-section.stretch
@@ -32,7 +32,7 @@
               %a{"href" => "https://standardnotes.org/help", "target" => "_blank"} Help
               page.
 
-.sn-component{"ng-if" => "offlineRestricted"}
+.sn-component{"ng-if" => "error == 'offline-restricted'"}
   .panel.static
     .content
       .panel-section.stretch
@@ -50,8 +50,15 @@
             .label Reload
           .spinner.info.small{"ng-if" => "reloading"}
 
+.sn-component{"ng-if" => "error == 'url-missing'"}
+  .panel.static
+    .content
+      .panel-section.stretch
+        %h2.title This extension is not installed correctly.
+        %p Please uninstall {{component.name}}, then re-install it.
 
-%iframe{"ng-if" => "component && componentValid && !offlineRestricted",
+
+%iframe{"ng-if" => "component && componentValid",
   "ng-attr-id" => "component-{{component.uuid}}",
   "ng-src" => "{{getUrl() | trusted}}", "frameBorder" => "0",
   "sandbox" => "allow-scripts allow-top-navigation-by-user-activation allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-modals allow-forms",