Merge pull request #2195 from CodeNow/SAN-6010-private-registry

runnabro · web-flow · commit ebf325939e1e · 2017-04-19T15:01:36.000-07:00
San 6010 private registry
diff --git a/client/assets/styles/scss/components/wells.scss b/client/assets/styles/scss/components/wells.scss
@@ -67,6 +67,11 @@
     box-shadow: inset 0 0 0 1px $red;
   }
 
+  &.invalid {
+    border-color: $red;
+    box-shadow: inset 0 0 0 1px $red;
+  }
+
   .label-checkbox {
     height: 36px;
     line-height: 36px;
diff --git a/client/assets/styles/scss/forms/forms-inputs.scss b/client/assets/styles/scss/forms/forms-inputs.scss
@@ -80,12 +80,13 @@ input {
 
   // placeholder
   &::placeholder {
-    color: $gray;
+    color: $gray-light;
   }
 }
 
 // sizes
 .input {
+  color: $gray-dark;
   height: $input-md;
   line-height: $input-line-height-md;
 
diff --git a/client/assets/styles/scss/forms/forms-payment.scss b/client/assets/styles/scss/forms/forms-payment.scss
@@ -4,7 +4,7 @@
   &.padding-md,
   > .padding-md {
     @include media(xxs) {
-      padding: 15px;
+      padding: $sm;
     }
 
     @include media(xxxs) {
@@ -15,17 +15,12 @@
   .well-payment {
 
     // if server side error
-    &.invalid {
-      border-color: $red;
-      box-shadow: inset 0 0 0 1px $red;
-
-      > .red {
-        margin-bottom: 15px;
-      }
+    &.invalid > .red {
+      margin-bottom: $sm;
     }
 
     > .grid-block + .grid-block {
-      margin-top: 15px;
+      margin-top: $sm;
     }
 
     // payment summary
diff --git a/client/assets/styles/scss/forms/forms-registry.scss b/client/assets/styles/scss/forms/forms-registry.scss
@@ -0,0 +1,24 @@
+.form-registry {
+
+  // error msg
+  .red {
+    padding: $sm $sm 0;
+  }
+
+  .well {
+    border-radius: $input-border-radius-lg;
+
+    > .label {
+      margin-bottom: 0;
+
+      + .label {
+        margin-top: 0;
+        padding-top: 0;
+      }
+    }
+  }
+
+  .footer {
+    border-top: 1px solid $gray-lighter;
+  }
+}
diff --git a/client/assets/styles/scss/index.scss b/client/assets/styles/scss/index.scss
@@ -107,6 +107,7 @@
 @import "forms/forms-github";
 @import "forms/forms-payment";
 @import "forms/forms-plan";
+@import "forms/forms-registry";
 @import "forms/forms-table-vars";
 @import "forms/forms-trial";
 @import "forms/forms-whitelist";
diff --git a/client/assets/styles/scss/modals/modals-settings.scss b/client/assets/styles/scss/modals/modals-settings.scss
@@ -10,13 +10,18 @@
     min-height: 32px;
   }
 
-  .modal-header .orange {
-    border: 0;
-    border-radius: 15px;
-    font-size: 11px;
-    font-weight: $weight-normal;
-    height: 15px;
-    padding: 0 5px;
+  .modal-header {
+    padding-left: 0;
+    padding-right: 0;
+
+    .orange {
+      border: 0;
+      border-radius: 15px;
+      font-size: 11px;
+      font-weight: $weight-normal;
+      height: 15px;
+      padding: 0 5px;
+    }
   }
 
   .modal-body {
@@ -89,7 +94,6 @@
   }
 
   .list-teammates-pending {
-    background-image: repeating-linear-gradient(60deg, #f9f9f9, #f9f9f9 18px, transparent 18px, transparent 36px);
 
     + .list-teammates-pending {
       margin-top: 15px;
diff --git a/client/assets/styles/scss/views/views-new-service.scss b/client/assets/styles/scss/views/views-new-service.scss
@@ -53,6 +53,10 @@
       border-top: 1px solid $gray-lighter;
     }
 
+    &:not(:first-child) + .label {
+      padding-top: 0;
+    }
+
     + .label {
       margin-top: 0;
     }
diff --git a/client/directives/accountsSelect/popoverAccountMenu/viewPopoverAccountMenu.jade b/client/directives/accountsSelect/popoverAccountMenu/viewPopoverAccountMenu.jade
@@ -37,21 +37,22 @@
               )
                 | {{data.currentOrg.poppa.trialDaysRemaining() + ' days left'}}
             li.list-item.popover-list-item(
-              ng-click = "actions.openSettingsModal('teamManagement')"
+              ng-click = "actions.openSettingsModal('githubIntegration')"
             )
               svg.iconnables
                 use(
-                  xlink:href = "#icons-team"
+                  xlink:href = "#icons-octicons-github-gray"
                 )
-              | Teammates
+              | PR Bot
             li.list-item.popover-list-item(
-              ng-click = "actions.openSettingsModal('githubIntegration')"
+              ng-click = "actions.openSettingsModal('privateRegistry')"
+              ng-if = "$root.featureFlags.privateRegistry"
             )
               svg.iconnables
                 use(
-                  xlink:href = "#icons-octicons-github-gray"
+                  xlink:href = "#icons-private-registry"
                 )
-              | PR Bot
+              | Private Registry
             li.list-item.popover-list-item(
               ng-click = "actions.openSettingsModal('slackIntegration')"
             )
@@ -61,6 +62,14 @@
                 width = "24"
               )
               | Slack Integration
+            li.list-item.popover-list-item(
+              ng-click = "actions.openSettingsModal('teamManagement')"
+            )
+              svg.iconnables
+                use(
+                  xlink:href = "#icons-team"
+                )
+              | Teammates
           ul.list.popover-list(
             ng-class = "{'list-secondary': !data.currentOrg.isPersonalAccount()}"
           )
diff --git a/client/directives/modals/settingsModal/forms/billingForm/billingForm.jade b/client/directives/modals/settingsModal/forms/billingForm/billingForm.jade
@@ -11,38 +11,37 @@
       name = "billingForm"
     )
       .grid-block.vertical.align-center.form-trial.padding-md.fade(
-        ng-class = "{'in': isActivePanel()}"
-        trial-form
         from-modal = 'true'
+        ng-class = "{'in': isActivePanel()}"
         ng-if = "currentOrg.poppa.isInTrial() && !currentOrg.poppa.attrs.hasPaymentMethod"
+        trial-form
       )
       .grid-block.vertical.form-plan.fade(
         ng-class = "{'in': isActivePanel()}"
+        ng-if = "currentOrg.poppa.isInTrial() && !currentOrg.poppa.attrs.hasPaymentMethod"
         ng-init = "state.hasDuration = false"
-        plan-status-form
         ng-show = "!$root.isLoading.billingForm"
-        ng-if = "currentOrg.poppa.isInTrial() && !currentOrg.poppa.attrs.hasPaymentMethod"
+        plan-status-form
       )
-
       .grid-block.vertical.form-plan.label.padding-sm.fade(
         ng-class = "{'in': isActivePanel()}"
-        show-plan-form
         ng-if = "!currentOrg.poppa.isInTrial() || (currentOrg.poppa.isInTrial() && currentOrg.poppa.attrs.hasPaymentMethod)"
+        show-plan-form
       )
       .grid-block.vertical.label.padding-sm.fade(
         ng-class = "{'in': isActivePanel()}"
-        show-payment-form
         ng-if = "!currentOrg.poppa.isInTrial() || (currentOrg.poppa.isInTrial() && currentOrg.poppa.attrs.hasPaymentMethod)"
+        show-payment-form
       )
       .grid-block.vertical.label.padding-sm.fade(
-        ng-class = "{'in': isActivePanel()}"
         billing-history-form
+        ng-class = "{'in': isActivePanel()}"
         ng-if = "!currentOrg.poppa.isInTrial() || (currentOrg.poppa.isInTrial() && currentOrg.poppa.attrs.hasPaymentMethod)"
       )
       .grid-block.vertical.label.padding-sm.fade(
         ng-class = "{'in': isActivePanel()}"
-        ng-include = "'disableOrgForm'"
         ng-if = "!currentOrg.poppa.isInTrial() || (currentOrg.poppa.isInTrial() && currentOrg.poppa.attrs.hasPaymentMethod)"
+        ng-include = "'disableOrgForm'"
       )
     animated-panel(
       name = "planStatusForm"
diff --git a/client/directives/modals/settingsModal/forms/billingForm/showPaymentForm/showPaymentForm.jade b/client/directives/modals/settingsModal/forms/billingForm/showPaymentForm/showPaymentForm.jade
@@ -1,7 +1,7 @@
 .clearfix
   .label-col.full-width Payment Info
 label.grid-block.vertical.well.well-summary(
-  ng-class = "{flash: hasUpdated}"
+  ng-class = "{'flash': hasUpdated}"
 )
   .grid-block.align-center.padding-sm
     .grid-block.vertical
diff --git a/client/directives/modals/settingsModal/forms/privateRegistryForm/privateRegistryFormView.jade b/client/directives/modals/settingsModal/forms/privateRegistryForm/privateRegistryFormView.jade
@@ -0,0 +1,86 @@
+section.label-description
+  .label-col Private Registry
+  .small.text-gray If you push your images to a private registry, you can safely store your credentials to use those images on Runnable.&#32;
+    a.link(
+      href = "//runnable.com/docs"
+      target = "_blank"
+    ) Learn more
+    | .
+
+form.grid-block.vertical.well.gray.ignore-margin(
+  name = "privateRegistryForm"
+  ng-class = "{'invalid': state.invalidCredentials}"
+  ng-if = "!state.authorized"
+  ng-init = "state.authorized = null"
+)
+  p.red.small.text-center(
+    ng-if = "state.invalidCredentials"
+  ) We couldn’t validate your credentials.
+    br
+    | Please check them and try again.
+  label.padding-sm.label
+    .padding-xxs.small.label-sm Registry URL
+    input.input.input-md.input-validate(
+      name = "data.url"
+      ng-disabled = "state.saving"
+      ng-model = "data.url"
+      ng-required = "true"
+      placeholder = "https://index.docker.io/v1/"
+      spellcheck = "false"
+      type = "url"
+    )
+    small.grid-block.padding-xxs.small Add the URL for the registry you use. This could be from Docker Hub or a private registry.
+  label.padding-sm.label
+    .padding-xxs.small.label-sm Username
+    input.input.input-md.input-validate(
+      name = "data.username"
+      ng-disabled = "state.saving"
+      ng-model = "data.username"
+      ng-required = "true"
+      spellcheck = "false"
+    )
+  label.padding-sm.label
+    .padding-xxs.small.label-sm Password
+    input.input.input-md.input-validate(
+      autocomplete = "new-password"
+      name = "data.password"
+      ng-disabled = "state.saving"
+      ng-model = "data.password"
+      ng-required = "true"
+      spellcheck = "false"
+      type = "password"
+    )
+  footer.margin-top-sm.padding-sm.grid-block.footer(
+    ng-class = "{\
+      'justify-justified': state.authorized,\
+      'justify-right': !state.authorized\
+    }"
+  )
+    button.btn.btn-md.gray.btn-cancel(
+      ng-if = "state.authorized"
+    ) Back
+    button.grid-block.shrink.align-center.btn.btn-md.green(
+      ng-click = "state.saving = true"
+      ng-disabled = "state.saving || privateRegistryForm.$invalid"
+      ng-init = "state.saving = null"
+    )
+      .spinner-wrapper.spinner-sm.spinner-white(
+        ng-if = "state.saving"
+        ng-include = "'spinner'"
+      )
+      span Verify & Save
+
+section.padding-sm.grid-block.align-center.well.white.ignore-margin(
+  ng-if = "state.authorized"
+  ng-init = "registryCredentials = [\
+    {username: 'dockerfan88', url: 'https://index.docker.io/v1/'}\
+  ]"
+)
+  svg.margin-right-xxs.text-green.grid-block.shrink.iconnables.icons-check
+    use(
+      xlink:href = "#icons-check"
+    )
+  .grid-block.vertical
+    p.small.weight-strong.text-overflow Authorized {{registryCredentials[0].username}}
+    small.small.text-gray.text-overflow {{registryCredentials[0].url}}
+  button.btn.btn-xs.gray.margin-left-xxs Change
diff --git a/client/directives/modals/settingsModal/settingsModalView.jade b/client/directives/modals/settingsModal/settingsModalView.jade
@@ -33,23 +33,24 @@
             )
           .btn-text.grid-content Billing
         button.btn.btn-radio.grid-block.vertical(
-          ng-class = "{'active': SEMC.currentTab === 'teamManagement'}"
-          ng-click = "SEMC.currentTab = 'teamManagement'"
+          ng-class = "{'active': SEMC.currentTab === 'githubIntegration'}"
+          ng-click = "SEMC.currentTab = 'githubIntegration'"
         )
           svg.iconnables.grid-content
             use(
-              xlink:href = "#icons-team"
+              xlink:href = "#icons-octicons-github-gray"
             )
-          .btn-text.grid-content Teammates
+          .btn-text.grid-content PR Bot
         button.btn.btn-radio.grid-block.vertical(
-          ng-class = "{'active': SEMC.currentTab === 'githubIntegration'}"
-          ng-click = "SEMC.currentTab = 'githubIntegration'"
+          ng-class = "{'active': SEMC.currentTab === 'privateRegistry'}"
+          ng-click = "SEMC.currentTab = 'privateRegistry'"
+          ng-if = "$root.featureFlags.privateRegistry"
         )
           svg.iconnables.grid-content
             use(
-              xlink:href = "#icons-octicons-github-gray"
+              xlink:href = "#icons-private-registry"
             )
-          .btn-text.grid-content PR Bot
+          .btn-text.grid-content Private Registry
         button.btn.btn-radio.grid-block.vertical(
           ng-class = "{'active': SEMC.currentTab === 'slackIntegration'}"
           ng-click = "SEMC.currentTab = 'slackIntegration'"
@@ -60,6 +61,15 @@
             width = "24"
           )
           .btn-text.grid-content Slack Integration
+        button.btn.btn-radio.grid-block.vertical(
+          ng-class = "{'active': SEMC.currentTab === 'teamManagement'}"
+          ng-click = "SEMC.currentTab = 'teamManagement'"
+        )
+          svg.iconnables.grid-content
+            use(
+              xlink:href = "#icons-team"
+            )
+          .btn-text.grid-content Teammates
 
     section.modal-body.js-animate
 
@@ -68,19 +78,24 @@
         billing-form
       )
 
-      team-management-form(
-        ng-if = "SEMC.currentTab === 'teamManagement'"
-      )
-
       div(
         ng-if = "SEMC.currentTab === 'githubIntegration'"
         ng-include = "'gitHubForm'"
       )
 
+      .grid-block.vertical.modal-form.no-border.form-registry(
+        ng-if = "$root.featureFlags.privateRegistry && SEMC.currentTab === 'privateRegistry'"
+        ng-include = "'privateRegistryFormView'"
+      )
+
       slack-integration-form(
         ng-if = "SEMC.currentTab === 'slackIntegration'"
       )
 
+      team-management-form(
+        ng-if = "SEMC.currentTab === 'teamManagement'"
+      )
+
     footer.modal-footer.clearfix.js-animate(
       ng-if = "SEMC.showFooter"
     )
diff --git a/client/services/featureFlagService.js b/client/services/featureFlagService.js
diff --git a/client/templates/svg/svgDefs.jade b/client/templates/svg/svgDefs.jade

Original file line number	Diff line number	Diff line change
`@@ -80,12 +80,13 @@ input {`
`80`	`80`
`81`	`81`	`// placeholder`
`82`	`82`	`&::placeholder {`
`83`		`- color: $gray;`
	`83`	`+ color: $gray-light;`
`84`	`84`	`}`
`85`	`85`	`}`
`86`	`86`
`87`	`87`	`// sizes`
`88`	`88`	`.input {`
	`89`	`+ color: $gray-dark;`
`89`	`90`	`height: $input-md;`
`90`	`91`	`line-height: $input-line-height-md;`
`91`	`92`
Original file line number	Diff line number	Diff line change
`@@ -53,6 +53,10 @@`
`53`	`53`	`border-top: 1px solid $gray-lighter;`
`54`	`54`	`}`
`55`	`55`
	`56`	`+ &:not(:first-child) + .label {`
	`57`	`+ padding-top: 0;`
	`58`	`+ }`
	`59`	`+`
`56`	`60`	`+ .label {`
`57`	`61`	`margin-top: 0;`
`58`	`62`	`}`
Original file line number	Diff line number	Diff line change
`@@ -37,21 +37,22 @@`
`37`	`37`	`)`
`38`	`38`	`\| {{data.currentOrg.poppa.trialDaysRemaining() + ' days left'}}`
`39`	`39`	`li.list-item.popover-list-item(`
`40`		`- ng-click = "actions.openSettingsModal('teamManagement')"`
	`40`	`+ ng-click = "actions.openSettingsModal('githubIntegration')"`
`41`	`41`	`)`
`42`	`42`	`svg.iconnables`
`43`	`43`	`use(`
`44`		`- xlink:href = "#icons-team"`
	`44`	`+ xlink:href = "#icons-octicons-github-gray"`
`45`	`45`	`)`
`46`		`- \| Teammates`
	`46`	`+ \| PR Bot`
`47`	`47`	`li.list-item.popover-list-item(`
`48`		`- ng-click = "actions.openSettingsModal('githubIntegration')"`
	`48`	`+ ng-click = "actions.openSettingsModal('privateRegistry')"`
	`49`	`+ ng-if = "$root.featureFlags.privateRegistry"`
`49`	`50`	`)`
`50`	`51`	`svg.iconnables`
`51`	`52`	`use(`
`52`		`- xlink:href = "#icons-octicons-github-gray"`
	`53`	`+ xlink:href = "#icons-private-registry"`
`53`	`54`	`)`
`54`		`- \| PR Bot`
	`55`	`+ \| Private Registry`
`55`	`56`	`li.list-item.popover-list-item(`
`56`	`57`	`ng-click = "actions.openSettingsModal('slackIntegration')"`
`57`	`58`	`)`
`@@ -61,6 +62,14 @@`
`61`	`62`	`width = "24"`
`62`	`63`	`)`
`63`	`64`	`\| Slack Integration`
	`65`	`+ li.list-item.popover-list-item(`
	`66`	`+ ng-click = "actions.openSettingsModal('teamManagement')"`
	`67`	`+ )`
	`68`	`+ svg.iconnables`
	`69`	`+ use(`
	`70`	`+ xlink:href = "#icons-team"`
	`71`	`+ )`
	`72`	`+ \| Teammates`
`64`	`73`	`ul.list.popover-list(`
`65`	`74`	`ng-class = "{'list-secondary': !data.currentOrg.isPersonalAccount()}"`
`66`	`75`	`)`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`.clearfix`
`2`	`2`	`.label-col.full-width Payment Info`
`3`	`3`	`label.grid-block.vertical.well.well-summary(`
`4`		`- ng-class = "{flash: hasUpdated}"`
	`4`	`+ ng-class = "{'flash': hasUpdated}"`
`5`	`5`	`)`
`6`	`6`	`.grid-block.align-center.padding-sm`
`7`	`7`	`.grid-block.vertical`