Better 404 (and 403) pages

Fixes #1819

static/css/pages/error-view.css

@@ -0,0 +1,25 @@
+.error-view-element {
+    text-align: center;
+}
+
+.error-view-element h2 {
+    font-size: 42px;
+    margin-bottom: 10px;
+}
+
+.error-view-element h3 {
+    font-size: 24px;
+}
+
+.error-view-element img {
+    margin-top: 20px;
+    width: 255px;
+    height: 235px;
+    margin-bottom: 40px;
+}
+
+.error-view-element .err403 img {
+    margin-top: 30px;
+    width: 225px;
+    height: 205px;
+}

static/img/40x/QE-logomark.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 203.92 187.45"><defs><style>.cls-1{fill:#05ce7c;}.cls-2{fill:#003764;}</style></defs><title>Artboard 1</title><polygon class="cls-1" points="159.61 0 203.92 93.72 159.61 187.45 121.89 187.45 166.2 93.72 121.89 0 159.61 0"/><polygon class="cls-2" points="121.9 187.45 77.59 93.72 121.9 0 159.62 0 115.31 93.72 159.62 187.45 121.9 187.45"/><polygon class="cls-1" points="101.96 42.17 82.02 0 44.3 0 83.1 82.06 101.96 42.17"/><polygon class="cls-1" points="83.1 105.38 44.3 187.45 82.02 187.45 101.96 145.27 83.1 105.38"/><polygon class="cls-2" points="44.31 187.45 0 93.72 44.31 0 82.03 0 37.72 93.72 82.03 187.45 44.31 187.45"/></svg>

static/img/40x/Quay-logomark.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 204 187.48"><defs><style>.cls-1{fill:#40b4e5;}.cls-2{fill:#003764;}</style></defs><title>Artboard 1</title><polygon class="cls-1" points="159.68 -0.04 204 93.72 159.68 187.48 121.94 187.48 166.27 93.72 121.94 -0.04 159.68 -0.04"/><polygon class="cls-2" points="121.94 187.48 77.62 93.72 121.94 -0.04 159.68 -0.04 115.35 93.72 159.68 187.48 121.94 187.48"/><polygon class="cls-1" points="102 42.15 82.06 -0.04 44.32 -0.04 83.13 82.06 102 42.15"/><polygon class="cls-1" points="83.13 105.39 44.32 187.48 82.06 187.48 102 145.29 83.13 105.39"/><polygon class="cls-2" points="44.33 187.48 0 93.72 44.33 -0.04 82.06 -0.04 37.73 93.72 82.06 187.48 44.33 187.48"/></svg>

static/js/app.js

@@ -207,8 +207,9 @@ quayApp.config(['$routeProvider', '$locationProvider', 'pages', function($routeP
     // Public Repo Experiments
     .route('/__exp/publicRepo', 'public-repo-exp')
 
-    // Default: Redirect to the landing page
-    .otherwise({redirectTo: '/'});
+    // 404/403
+    .route('/:catchall', 'error-view')
+    .route('/:catch/:all', 'error-view');
 }]);
 
 // Configure compile provider to add additional URL prefixes to the sanitization list. We use

static/js/pages/error-view.js

@@ -0,0 +1,17 @@
+(function() {
+  /**
+   * Error view page.
+   */
+  angular.module('quayPages').config(['pages', function(pages) {
+    pages.create('error-view', 'error-view.html', ErrorViewCtrl, {
+      'title': '{{code}}',
+      'description': 'Error',
+      'newLayout': false
+    });
+  }]);
+
+  function ErrorViewCtrl($scope, ApiService, $routeParams, UserService) {
+    $scope.info = window.__error_info;
+    $scope.code = window.__error_code;
+  }
+}());

static/js/pages/new-organization.js

@@ -13,6 +13,9 @@
   function NewOrgCtrl($scope, $routeParams, $timeout, $location, UserService, PlanService, ApiService, CookieService, Features) {
     $scope.Features = Features;
     $scope.holder = {};
+    $scope.org = {
+      'name': $routeParams['namespace'] || ''
+    };
 
     UserService.updateUserIn($scope);
 

static/js/pages/new-repo.js

@@ -10,7 +10,7 @@
     })
   }]);
 
-  function NewRepoCtrl($scope, $location, $http, $timeout, UserService, ApiService, PlanService, TriggerService, Features) {
+  function NewRepoCtrl($scope, $location, $http, $timeout, $routeParams, UserService, ApiService, PlanService, TriggerService, Features) {
     UserService.updateUserIn($scope);
 
     $scope.Features = Features;
@@ -19,7 +19,8 @@
     $scope.repo = {
       'is_public': 0,
       'description': '',
-      'initialize': ''
+      'initialize': '',
+      'name': $routeParams['name']
     };
 
     $scope.changeNamespace = function(namespace) {

static/partials/error-view.html

@@ -0,0 +1,33 @@
+<div class="error-view-element">
+    <!-- 404 -->
+    <div class="err404" ng-if="code == 404">
+        <h2>404: Not Found</h2>
+        <h3 ng-if="!info.for_repo && !info.namespace_exists">The resource you're looking for doesn't exists</h3>
+        <h3 ng-if="info && !info.namespace_exists">Namespace <strong>{{ info.namespace }}</strong> doesn't exists</h3>
+        <h3 ng-if="info && info.for_repo && info.namespace_exists">The repository you're looking for doesn't exists</h3>
+
+        <img src="/static/img/40x/quay-logo-404.svg">
+
+        <h4 ng-if="!info.for_repo && !info.namespace_exists">
+            Return to the <a href="/">main page</a>
+        </h4>
+        <h4 ng-if="info && !info.namespace_exists">
+            <a href="/organizations/new?namespace={{ info.namespace }}">Create this namespace</a> or return to the <a href="/">main page</a>
+        </h4>
+        <h4 ng-if="info && info.for_repo && info.namespace_exists">
+            <a href="/new?namespace={{ info.namespace }}&name={{ info.repo_name }}">Create this repository</a> or return to the <a href="/">main page</a>
+        </h4>
+    </div>
+
+    <!-- 403 -->
+    <div class="err403" ng-if="code == 403">
+        <h2>403: Unauthorized</h2>
+        <h3 ng-if="!info.for_repo">You are not authorized to view this resource</h3>
+        <h3 ng-if="info.for_repo">You are not authorized to view this repository</h3>
+        <img src="/static/img/40x/QE-logomark.svg" quay-show="!Features.BILLING">
+        <img src="/static/img/40x/Quay-logomark.svg" quay-show="Features.BILLING">
+
+        <h4 ng-if="info.for_repo">Contact the admin of the <strong>{{ info.namespace }}</strong> namespace for access to the repository or you can return to the <a href="/">main page</a></h4>
+        <h4 ng-if="!info.for_repo">Return to the <a href="/">main page</a></h4>
+    </div>
+</div>