Add UI for viewing and changing trust setting in repo

static/css/directives/ui/repository-signing-config.css

@@ -0,0 +1,16 @@
+.repository-signing-config-element td {
+    vertical-align: top;
+}
+
+.repository-signing-config-element .status-icon {
+    font-size: 48px;
+    margin-right: 10px;
+}
+
+.repository-signing-config-element .status-icon.ci-shield-check-outline {
+    color: #2FC98E;
+}
+
+.repository-signing-config-element .status-icon.ci-shield-none {
+    color: #9B9B9B;
+}

static/directives/repo-view/repo-panel-settings.html

@@ -18,6 +18,11 @@
       </div>
     </div>
 
+    <!-- Signing and Trust -->
+    <div ng-if="repository.kind == 'image'">
+      <repository-signing-config repository="repository"></repository-signing-config>
+    </div>
+
     <!-- Events and Notifications -->
     <div ng-if="repository.kind == 'image'">
       <div class="repository-events-table" repository="repository"

static/js/directives/ui/repository-signing-config/repository-signing-config.component.html

@@ -0,0 +1,65 @@
+<div class="repository-signing-config-element" quay-require="['SIGNING']">
+  <div class="repository-events-table-element">
+    <div class="co-panel">
+      <div class="co-panel-heading">
+        <i class="fa ci-shield-check-full"></i> Trust and Signing
+      </div>
+      <div class="panel-body">
+        <table>
+        <tr>
+        <td>
+        <i class="fa status-icon"
+           ng-class="{'ci-shield-check-outline': $ctrl.repository.trust_enabled, 'ci-shield-none': !$ctrl.repository.trust_enabled}"></i>
+        </td>
+        <td>
+        <div ng-if="$ctrl.repository.trust_enabled">
+          <h4>Content Trust Enabled</h4>
+          <p>
+            Content Trust and Signing is enabled on this repository and all tag operations must be signed via Docker Content Trust.
+          </p>
+          <p>
+            Note that due to this feature being enabled, all UI-based tag operations and all build support is <strong>disabled on this repository</strong>.
+          </p>
+          <button class="btn btn-danger" ng-click="$ctrl.askChangeTrust(false)">Disable Content Trust</button>
+        </div>
+
+        <div ng-if="!$ctrl.repository.trust_enabled">
+          <h4>Content Trust Disabled</h4>
+          <p>
+            Content Trust and Signing is disabled on this repository.
+          </p>
+          <button class="btn btn-default" ng-click="$ctrl.askChangeTrust(true)">Enable Content Trust</button>
+        </div>
+        </td>
+        </tr>
+        </table>
+      </div>
+  </div>
+
+  <!-- Change trust dialogs -->
+  <div class="cor-confirm-dialog"
+     dialog-context="$ctrl.enableTrustInfo"
+     dialog-action="$ctrl.changeTrust(true, callback)"
+     dialog-title="Enable Content Trust"
+     dialog-action-title="Enable Trust">
+     <p>Click "Enable Trust" to enable content trust on this repository.</p>
+     <p>Please note that at this time, having content trust will <strong>disable</strong> the following
+        features under the repository:
+        <ul>
+          <li>Any tag operations in the UI (Add Tag, Delete Tag, Restore Tag)
+          <li>All build triggers and ability to invoke builds
+        </ul>
+     </p>
+  </div>
+
+  <div class="cor-confirm-dialog"
+     dialog-context="$ctrl.disableTrustInfo"
+     dialog-action="$ctrl.changeTrust(false, callback)"
+     dialog-title="Disable Content Trust"
+     dialog-action-title="Disable Trust and Delete Data">
+     <div class="co-alert co-alert-warning">
+      <strong>Warning:</strong> Disabling content trust will prevent users from pushing signed
+      manifests to this repository and will <strong>delete all existing signing and trust data</strong>.
+     </div>
+  </div>
+</div>

static/js/directives/ui/repository-signing-config/repository-signing-config.component.ts

@@ -0,0 +1,44 @@
+import { Input, Component, Inject } from 'ng-metadata/core';
+import { Repository } from '../../../types/common.types';
+
+/**
+ * A component that displays the configuration and options for repository signing.
+ */
+@Component({
+  selector: 'repository-signing-config',
+  templateUrl: '/static/js/directives/ui/repository-signing-config/repository-signing-config.component.html',
+})
+export class RepositorySigningConfigComponent {
+  @Input('<') public repository: Repository;
+
+  private enableTrustInfo: {[key: string]: string} = null;
+  private disableTrustInfo: {[key: string]: string} = null;
+
+  constructor (@Inject("ApiService") private ApiService: any) {
+
+  }
+
+  private askChangeTrust(newState: boolean) {
+    if (newState) {
+      this.enableTrustInfo = {};
+    } else {
+      this.disableTrustInfo = {};
+    }
+  }
+
+  private changeTrust(newState: boolean, callback: (success: boolean) => void) {
+    var params = {
+      'repository': this.repository.namespace + '/' + this.repository.name,
+    };
+
+    var data = {
+      'trust_enabled': newState,
+    };
+
+    var errorDisplay = this.ApiService.errorDisplay('Could not just change trust', callback);
+    this.ApiService.changeRepoTrust(data, params).then((resp) => {
+      this.repository.trust_enabled = newState;
+      callback(true);
+    }, errorDisplay);
+  }
+}

static/js/directives/ui/tag-signing-display/tag-signing-display.component.ts

@@ -1,25 +1,7 @@
 import { Input, Component, Inject } from 'ng-metadata/core';
+import { ApostilleSignatureDocument, ApostilleTagDocument } from '../../../types/common.types';
 import * as moment from "moment";
 
-interface ApostilleSignatureDocument {
-  // When the signed document expires.
-  expiration: string
-
-  // Object of information for each tag.
-  tags: {string: ApostilleTagDocument}
-
-  // If true, an error occurred while trying to load this document.
-  error: boolean
-}
-
-interface ApostilleTagDocument {
-  // The length of the document.
-  length: number
-
-  // The hashes for the tag.
-  hashes: {string: string}
-}
-
 /**
  * A component that displays the signing status of a tag in the repository view.
  */
@@ -29,14 +11,12 @@ interface ApostilleTagDocument {
 })
 export class TagSigningDisplayComponent {
   @Input('<') public tag: any;
-  @Input('=') public signatures: ApostilleSignatureDocument;
+  @Input('<') public signatures: ApostilleSignatureDocument;
 
   private signedDigest: string;
   private pushedDigest: string;
 
-  constructor (@Inject("$sanitize") private $sanitize: ng.sanitize.ISanitizeService) {
+  constructor(@Inject("$sanitize") private $sanitize: ng.sanitize.ISanitizeService) {}
-
-  }
 
   private base64ToHex(base64String: string): string {
     // Based on: http://stackoverflow.com/questions/39460182/decode-base64-to-hexadecimal-string-with-javascript

static/js/quay.module.ts

@@ -15,6 +15,7 @@ import { CorTableComponent } from './directives/ui/cor-table/cor-table.component
 import { CorTableColumn } from './directives/ui/cor-table/cor-table-col.component';
 import { ChannelIconComponent } from './directives/ui/channel-icon/channel-icon.component';
 import { TagSigningDisplayComponent } from './directives/ui/tag-signing-display/tag-signing-display.component';
+import { RepositorySigningConfigComponent } from './directives/ui/repository-signing-config/repository-signing-config.component';
 import { BuildServiceImpl } from './services/build/build.service.impl';
 import { AvatarServiceImpl } from './services/avatar/avatar.service.impl';
 import { DockerfileServiceImpl } from './services/dockerfile/dockerfile.service.impl';
@@ -46,6 +47,7 @@ import { QuayRequireDirective } from './directives/structural/quay-require/quay-
     ChannelIconComponent,
     QuayRequireDirective,
     TagSigningDisplayComponent,
+    RepositorySigningConfigComponent,
   ],
   providers: [
     ViewArrayImpl,

static/js/types/common.types.ts

@@ -79,6 +79,7 @@ export type Repository = {
   private: boolean;
   url: string;
   namespace?: string;
+  trust_enabled: boolean;
 }
 
 
@@ -101,4 +102,29 @@ export type Namespace = {
 export type Trigger = {
   id: number;
   service: any;
+};
+
+/**
+ * Represents an apostille signature document, with extra expiration information.
+ */
+export type ApostilleSignatureDocument = {
+  // When the signed document expires.
+  expiration: string
+
+  // Object of information for each tag.
+  tags: {string: ApostilleTagDocument}
+
+  // If true, an error occurred while trying to load this document.
+  error: boolean
+};
+
+/**
+ * An apostille document containing signatures for a tag.
+ */
+export type ApostilleTagDocument = {
+  // The length of the document.
+  length: number
+
+  // The hashes for the tag.
+  hashes: {string: string}
 };