ssh keys

client/assets/styles/scss/index.scss

@@ -152,6 +152,7 @@
 @import "modals/modals-repository-details";
 @import "modals/modals-server-select";
 @import "modals/modals-settings";
+@import "modals/modals-ssh-auth";
 
 // popovers
 @import "popover/popover";

client/assets/styles/scss/modals/modals-settings.scss

@@ -138,3 +138,100 @@
     }
   }
 }
+
+.form-ssh {
+
+  .list-item {
+    font-size: 13px;
+    min-height: 90px;
+    padding: $sm;
+
+    @include media(xxs) {
+      align-items: flex-start;
+      flex-direction: column;
+      min-height: 0;
+    }
+
+    &.recently-added {
+      background-color: $blue-lighter;
+      border-color: transparent;
+      box-shadow: inset 0 0 0 $input-border-lg $blue-light;
+      margin: -$input-border;
+      min-height: 90px + $input-border * 2;
+      padding: $sm + $input-border;
+      z-index: 1;
+
+      @include media(xxs) {
+        .icons-key {
+          bottom: $sm + $input-border;
+          right: $sm + $input-border;
+        }
+      }
+    }
+
+    > .icons-key,
+    > .spinner-wrapper {
+      height: 24px;
+      padding: 3px;
+      width: 24px;
+
+      @include media(xxs) {
+        bottom: $sm;
+        position: absolute;
+        right: $sm;
+      }
+    }
+  }
+
+  .p {
+    padding: 0 $sm;
+
+    @include media(xxs) {
+      max-width: 100%;
+      padding: 0;
+    }
+  }
+
+  .btn-xs:not(.btn-create-key) {
+    flex: 0 0 114px;
+
+    @include media(xxs) {
+      flex: 0 0 auto;
+      margin-top: 9px;
+    }
+  }
+
+  // a.btn.gray
+  .gray {
+    color: $gray-dark;
+
+    .spinner-wrapper {
+      height: 12px;
+      margin-right: 3px;
+      width: 12px;
+    }
+  }
+
+  .btn-authorized {
+    background-color: transparent;
+    border-color: transparent;
+    color: $gray;
+    pointer-events: none;
+
+    @include media(xxs) {
+      padding: 0;
+    }
+  }
+
+  .icons-check,
+  .icons-octicons-github {
+    flex: 0 0 18px;
+    margin-right: 2px;
+  }
+
+  .icons-link-external-alt {
+    height: 9px;
+    margin-left: 4px;
+    width: 9px;
+  }
+}

client/assets/styles/scss/modals/modals-ssh-auth.scss

@@ -0,0 +1,17 @@
+.modal-ssh-auth {
+
+  .padding-md {
+    @include media(xxs) {
+      padding: $sm;
+    }
+  }
+
+  .runnabear {
+    left: 0;
+    margin: 0 auto;
+    position: absolute;
+    right: 0;
+    top: -119px;
+    z-index: 1;
+  }
+}

client/directives/accountsSelect/popoverAccountMenu/viewPopoverAccountMenu.jade

@@ -62,6 +62,15 @@
                 width = "24"
               )
               | Slack Integration
+            li.list-item.popover-list-item(
+              ng-click = "actions.openSettingsModal('SSHKeys')"
+              ng-if = "$root.featureFlags.composeSSHKeys"
+            )
+              svg.iconnables
+                use(
+                  xlink:href = "#icons-key"
+                )
+              | SSH Keys
             li.list-item.popover-list-item(
               ng-click = "actions.openSettingsModal('teamManagement')"
             )
@@ -162,3 +171,8 @@
               ng-if = "flag === 'gitHubScope'"
               style = "position: absolute; right: 9px; top: 6px;"
             ) Go
+            button.btn.btn-xs.gray(
+              internal-modal-helper = "composeSSHAuthView"
+              ng-if = "flag === 'composeSSHAuthView'"
+              style = "position: absolute; right: 9px; top: 6px;"
+            ) Go

client/directives/modals/composeSSHAuthView/composeSSHAuthView.jade

@@ -0,0 +1,13 @@
+.grid-block.align-center.justify-center.modal-backdrop.modal-ssh-auth
+  .modal-dialog.modal-sm
+    img.grid-block.shrink.img.runnabear(
+      height = "130"
+      src = "/build/images/runnabear-waving-1.png"
+      width = "230"
+    )
+    header.modal-header
+      h1.modal-heading Authorized!
+    section.modal-body
+      p.text-center.text-gray.padding-md You successfully authorized with GitHub. 👍
+        br.hidden-xs
+        |  We’ll automatically close this window.

client/directives/modals/settingsModal/forms/SSHKeysForm/SSHAuthorizeButton.jade

@@ -0,0 +1,19 @@
+svg.iconnables.icons-octicons-github(
+  ng-if = "!state.authorized"
+)
+  use(
+    xlink:href = "#icons-octicons-github"
+  )
+svg.iconnables.icons-check(
+  ng-if = "state.authorized"
+)
+  use(
+    xlink:href = "#icons-check"
+  )
+| {{state.authorized ? 'Authorized' : "Authorize"}}
+svg.iconnables.icons-link-external-alt(
+  ng-if = "!state.authorized"
+)
+  use(
+    xlink:href = "#icons-link-external-alt"
+  )

client/directives/modals/settingsModal/forms/SSHKeysForm/SSHCreateButton.jade

@@ -0,0 +1,5 @@
+.spinner-wrapper.spinner-sm.spinner-gray(
+  ng-if = "state.creatingKey"
+  ng-include = "'spinner'"
+)
+| {{state.creatingKey ? 'Creating…' : 'Create Key'}}

client/directives/modals/settingsModal/forms/SSHKeysForm/SSHKeysFormView.jade

@@ -0,0 +1,77 @@
+section.label-description
+  .label-col SSH Keys
+  .small.text-gray Keys will be added to containers at build and run time 
+    a.link(
+      href = "#"
+      target = "_blank"
+    ) using ssh-agent
+    | , and can be 
+    a.link(
+      href = "https://github.com/settings/keys"
+      target = "_blank"
+    ) managed on GitHub
+    | .
+
+ol.list-bordered(
+  ng-init = "\
+    keys = [\
+      {username: 'Myztiq', fingerprint: '40:71:04:a8:3b:ea:a8:90:f6:99:6c:7a:22:f7:c0:15', avatar: 'https://avatars1.githubusercontent.com/u/495765'},\
+      {username: 'podviaznikov', fingerprint: 'e2:81:ae:03:43:1a:ba:cf:4e:e0:79:37:69:40:58:56', avatar: 'https://avatars1.githubusercontent.com/u/429706'}\
+    ];\
+    currentOrg = 'CodeNow'\
+  "
+)
+
+  //- if no key exists for the current user
+  li.grid-block.align-center.list-item(
+    ng-if = "!state.authorized"
+    ng-init = "state.listening = false"
+  )
+    svg.grid-block.shrink.iconnables.icons-key(
+      ng-if = "!state.listening"
+    )
+      use(
+        xlink:href = "#icons-key-empty"
+      )
+    .grid-block.shrink.align-center.justify-center.spinner-wrapper.spinner-sm.spinner-gray(
+      ng-if = "state.listening"
+      ng-include = "'spinner'"
+    )
+    p.grid-block.p.text-gray(
+      ng-if = "state.listening"
+    ) Listening for authorization…
+    p.p.text-gray(
+      ng-if = "!state.listening"
+    ) Add a user key for 
+      span.weight-strong runnabro
+      |  so your project can access private dependencies.
+    a.grid-block.shrink.noscroll.align-center.btn.gray.btn-xs(
+      ng-click = "state.listening = !state.listening"
+      ng-if = "!state.everAuthorized"
+      ng-include = "'SSHAuthorizeButton'"
+    )
+    a.grid-block.shrink.noscroll.align-center.btn.gray.btn-xs.btn-create-key(
+      ng-click = "state.creatingKey = !state.creatingKey"
+      ng-disabled = "state.creatingKey"
+      ng-if = "state.everAuthorized && !state.authorized"
+      ng-include = "'SSHCreateButton'"
+      ng-init = "state.creatingKey = false"
+    )
+
+  //- all user keys; if current user's key exists, list it at the top
+  li.grid-block.align-center.list-item(
+    ng-repeat = "key in keys"
+  )
+    svg.grid-block.shrink.iconnables.icons-key
+      use(
+        xlink:href = "#icons-key"
+      )
+    .grid-block.vertical.p
+      p.strong.text-overflow(
+        title = "{{key.username}} User Key for {{currentOrg}}"
+      ) {{key.username}} User Key for {{currentOrg}}
+      p.monospace.text-gray.text-overflow {{key.fingerprint}}
+    a.grid-block.shrink.noscroll.align-center.btn.gray.btn-xs.btn-authorized(
+      ng-include = "'SSHAuthorizeButton'"
+      ng-init = "state.authorized = true"
+    )

client/directives/modals/settingsModal/settingsModalView.jade

@@ -61,6 +61,16 @@
             width = "24"
           )
           .btn-text.grid-content Slack Integration
+        button.btn.btn-radio.grid-block.vertical(
+          ng-class = "{'active': SEMC.currentTab === 'SSHKeys'}"
+          ng-click = "SEMC.currentTab = 'SSHKeys'"
+          ng-if = "$root.featureFlags.composeSSHKeys"
+        )
+          svg.iconnables.grid-content
+            use(
+              xlink:href = "#icons-key"
+            )
+          .btn-text.grid-content SSH Keys
         button.btn.btn-radio.grid-block.vertical(
           ng-class = "{'active': SEMC.currentTab === 'teamManagement'}"
           ng-click = "SEMC.currentTab = 'teamManagement'"
@@ -92,6 +102,11 @@
         ng-if = "SEMC.currentTab === 'slackIntegration'"
       )
 
+      .modal-form.form-ssh(
+        ng-if = "SEMC.currentTab === 'SSHKeys'"
+        ng-include = "'SSHKeysFormView'"
+      )
+
       team-management-form(
         ng-if = "SEMC.currentTab === 'teamManagement'"
       )

client/services/featureFlagService.js

@@ -19,6 +19,8 @@ function featureFlags(
     composeNav: true,
     composeNewService: true,
     composeHistory: true,
+    composeSSHKeys: false,
+    composeSSHAuthView: false,
     composeTestingUpdate: false,
     connections: false,
     contingencyPlan: false,

client/templates/svg/svgDefs.jade

@@ -229,13 +229,9 @@ svg(xmlns='http://www.w3.org/2000/svg')
     rect(x='6.397', y='8.385', fill='#AD8850', width='0.692', height='2.077')
     rect(x='8.474', y='11.846', fill='#AD8850', width='0.692', height='4.154')
   symbol#icons-key(viewBox='0 0 18 18')
-    path(fill='#FFF', opacity='0', d='M2.354,17.449c-0.499-0.002-0.965-0.196-1.313-0.549C0.69,16.546,0.498,16.078,0.5,15.581L0.549,2.355C0.553,1.332,1.388,0.5,2.411,0.5l13.235,0.05c0.497,0.002,0.964,0.198,1.315,0.551c0.35,0.353,0.541,0.821,0.539,1.318l-0.051,13.226c-0.004,1.022-0.838,1.854-1.858,1.854l0,0L2.354,17.449z')
-    path(fill='#F2C172', d='M12,4h-1V3H6v1H5v5h1v1h2v2H7v1h1v1H6v2h2h2v-6h1V9h1V4z M7,8V5h3v3H7z')
-    rect(x='11', y='9', fill='#AD8850', width='1', height='1')
-    rect(x='12', y='4', fill='#AD8850', width='1', height='5')
-    rect(x='11', y='3', fill='#AD8850', width='1', height='1')
-    rect(x='7', y='5', fill='#AD8850', width='1', height='3')
-    rect(x='10', y='10', fill='#AD8850', width='1', height='6')
+    path(d='M15.627,2.286A4.242,4.242,0,0,0,8.876,7.27L1.131,15.014,2.9,16.782l1.414-1.414L5.9,16.959l1.768-1.816L6.081,13.5l1.591,1.639,1.768-1.72L7.849,11.832l2.795-2.794a4.283,4.283,0,0,0,2,.5A4.2,4.2,0,0,0,15.627,8.3,4.257,4.257,0,0,0,15.627,2.286Zm-3,4.505a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,12.622,6.791Z', style='fill:#fec785;stroke:#cb9f6a')
+  symbol#icons-key-empty(viewBox='0 0 18 18')
+    path(d='M15.627,2.286A4.242,4.242,0,0,0,8.876,7.27L1.131,15.014,2.9,16.782l1.414-1.414L5.9,16.959l1.768-1.816L6.081,13.5l1.591,1.639,1.768-1.72L7.849,11.832l2.795-2.794a4.283,4.283,0,0,0,2,.5A4.2,4.2,0,0,0,15.627,8.3,4.257,4.257,0,0,0,15.627,2.286Zm-3,4.505a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,12.622,6.791Z', style='fill:#fff;stroke:#bbb')
   symbol#icons-launch(viewBox='0 0 12.523 12.533')
     path(d='M3.059,11.928c0.479-0.479,0.522-1.071-0.436-2.029s-1.55-0.915-2.029-0.436c-1,1.052-0.436,2.9-0.436,2.9S2.033,12.954,3.059,11.928z')
     path(d='M12.523,0C10.605,0,9.009,0.668,5.8,2.565c-2.433-0.818-3.983-0.344-5.298,0.97l1.857,1.857c-1.385,1.385-1.15,1.679,0.972,3.8c1.945,1.945,2.249,2.249,3.663,0.835l1.994,1.994c1.358-1.358,1.814-2.947,0.891-5.528C11.734,3.311,12.523,2.102,12.523,0z')