Skip to content

Commit 6fffd34

Browse files
taylordolantaylordolan
authored
Merge pull request #2194 from CodeNow/SAN-6011-SSH-keys
ssh keys
2 parents ce7f4c5 + d0750e4 commit 6fffd34

11 files changed

Lines changed: 263 additions & 7 deletions

File tree

‎client/assets/styles/scss/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,7 @@
152152
@import "modals/modals-repository-details";
153153
@import "modals/modals-server-select";
154154
@import "modals/modals-settings";
155+
@import "modals/modals-ssh-auth";
155156

156157
// popovers
157158
@import "popover/popover";

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

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,3 +138,100 @@
138138
}
139139
}
140140
}
141+
142+
.form-ssh {
143+
144+
.list-item {
145+
font-size: 13px;
146+
min-height: 90px;
147+
padding: $sm;
148+
149+
@include media(xxs) {
150+
align-items: flex-start;
151+
flex-direction: column;
152+
min-height: 0;
153+
}
154+
155+
&.recently-added {
156+
background-color: $blue-lighter;
157+
border-color: transparent;
158+
box-shadow: inset 0 0 0 $input-border-lg $blue-light;
159+
margin: -$input-border;
160+
min-height: 90px + $input-border * 2;
161+
padding: $sm + $input-border;
162+
z-index: 1;
163+
164+
@include media(xxs) {
165+
.icons-key {
166+
bottom: $sm + $input-border;
167+
right: $sm + $input-border;
168+
}
169+
}
170+
}
171+
172+
> .icons-key,
173+
> .spinner-wrapper {
174+
height: 24px;
175+
padding: 3px;
176+
width: 24px;
177+
178+
@include media(xxs) {
179+
bottom: $sm;
180+
position: absolute;
181+
right: $sm;
182+
}
183+
}
184+
}
185+
186+
.p {
187+
padding: 0 $sm;
188+
189+
@include media(xxs) {
190+
max-width: 100%;
191+
padding: 0;
192+
}
193+
}
194+
195+
.btn-xs:not(.btn-create-key) {
196+
flex: 0 0 114px;
197+
198+
@include media(xxs) {
199+
flex: 0 0 auto;
200+
margin-top: 9px;
201+
}
202+
}
203+
204+
// a.btn.gray
205+
.gray {
206+
color: $gray-dark;
207+
208+
.spinner-wrapper {
209+
height: 12px;
210+
margin-right: 3px;
211+
width: 12px;
212+
}
213+
}
214+
215+
.btn-authorized {
216+
background-color: transparent;
217+
border-color: transparent;
218+
color: $gray;
219+
pointer-events: none;
220+
221+
@include media(xxs) {
222+
padding: 0;
223+
}
224+
}
225+
226+
.icons-check,
227+
.icons-octicons-github {
228+
flex: 0 0 18px;
229+
margin-right: 2px;
230+
}
231+
232+
.icons-link-external-alt {
233+
height: 9px;
234+
margin-left: 4px;
235+
width: 9px;
236+
}
237+
}

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.modal-ssh-auth {
2+
3+
.padding-md {
4+
@include media(xxs) {
5+
padding: $sm;
6+
}
7+
}
8+
9+
.runnabear {
10+
left: 0;
11+
margin: 0 auto;
12+
position: absolute;
13+
right: 0;
14+
top: -119px;
15+
z-index: 1;
16+
}
17+
}

‎client/directives/accountsSelect/popoverAccountMenu/viewPopoverAccountMenu.jade‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,15 @@
6262
width = "24"
6363
)
6464
| Slack Integration
65+
li.list-item.popover-list-item(
66+
ng-click = "actions.openSettingsModal('SSHKeys')"
67+
ng-if = "$root.featureFlags.composeSSHKeys"
68+
)
69+
svg.iconnables
70+
use(
71+
xlink:href = "#icons-key"
72+
)
73+
| SSH Keys
6574
li.list-item.popover-list-item(
6675
ng-click = "actions.openSettingsModal('teamManagement')"
6776
)
@@ -162,3 +171,8 @@
162171
ng-if = "flag === 'gitHubScope'"
163172
style = "position: absolute; right: 9px; top: 6px;"
164173
) Go
174+
button.btn.btn-xs.gray(
175+
internal-modal-helper = "composeSSHAuthView"
176+
ng-if = "flag === 'composeSSHAuthView'"
177+
style = "position: absolute; right: 9px; top: 6px;"
178+
) Go

‎client/directives/modals/composeSSHAuthView/composeSSHAuthView.jade‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.grid-block.align-center.justify-center.modal-backdrop.modal-ssh-auth
2+
.modal-dialog.modal-sm
3+
img.grid-block.shrink.img.runnabear(
4+
height = "130"
5+
src = "/build/images/runnabear-waving-1.png"
6+
width = "230"
7+
)
8+
header.modal-header
9+
h1.modal-heading Authorized!
10+
section.modal-body
11+
p.text-center.text-gray.padding-md You successfully authorized with GitHub. 👍
12+
br.hidden-xs
13+
|  We’ll automatically close this window.

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
svg.iconnables.icons-octicons-github(
2+
ng-if = "!state.authorized"
3+
)
4+
use(
5+
xlink:href = "#icons-octicons-github"
6+
)
7+
svg.iconnables.icons-check(
8+
ng-if = "state.authorized"
9+
)
10+
use(
11+
xlink:href = "#icons-check"
12+
)
13+
| {{state.authorized ? 'Authorized' : "Authorize"}}
14+
svg.iconnables.icons-link-external-alt(
15+
ng-if = "!state.authorized"
16+
)
17+
use(
18+
xlink:href = "#icons-link-external-alt"
19+
)

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.spinner-wrapper.spinner-sm.spinner-gray(
2+
ng-if = "state.creatingKey"
3+
ng-include = "'spinner'"
4+
)
5+
| {{state.creatingKey ? 'Creating…' : 'Create Key'}}

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
section.label-description
2+
.label-col SSH Keys
3+
.small.text-gray Keys will be added to containers at build and run time 
4+
a.link(
5+
href = "#"
6+
target = "_blank"
7+
) using ssh-agent
8+
| , and can be 
9+
a.link(
10+
href = "https://github.com/settings/keys"
11+
target = "_blank"
12+
) managed on GitHub
13+
| .
14+
15+
ol.list-bordered(
16+
ng-init = "\
17+
keys = [\
18+
{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'},\
19+
{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'}\
20+
];\
21+
currentOrg = 'CodeNow'\
22+
"
23+
)
24+
25+
//- if no key exists for the current user
26+
li.grid-block.align-center.list-item(
27+
ng-if = "!state.authorized"
28+
ng-init = "state.listening = false"
29+
)
30+
svg.grid-block.shrink.iconnables.icons-key(
31+
ng-if = "!state.listening"
32+
)
33+
use(
34+
xlink:href = "#icons-key-empty"
35+
)
36+
.grid-block.shrink.align-center.justify-center.spinner-wrapper.spinner-sm.spinner-gray(
37+
ng-if = "state.listening"
38+
ng-include = "'spinner'"
39+
)
40+
p.grid-block.p.text-gray(
41+
ng-if = "state.listening"
42+
) Listening for authorization…
43+
p.p.text-gray(
44+
ng-if = "!state.listening"
45+
) Add a user key for 
46+
span.weight-strong runnabro
47+
|  so your project can access private dependencies.
48+
a.grid-block.shrink.noscroll.align-center.btn.gray.btn-xs(
49+
ng-click = "state.listening = !state.listening"
50+
ng-if = "!state.everAuthorized"
51+
ng-include = "'SSHAuthorizeButton'"
52+
)
53+
a.grid-block.shrink.noscroll.align-center.btn.gray.btn-xs.btn-create-key(
54+
ng-click = "state.creatingKey = !state.creatingKey"
55+
ng-disabled = "state.creatingKey"
56+
ng-if = "state.everAuthorized && !state.authorized"
57+
ng-include = "'SSHCreateButton'"
58+
ng-init = "state.creatingKey = false"
59+
)
60+
61+
//- all user keys; if current user's key exists, list it at the top
62+
li.grid-block.align-center.list-item(
63+
ng-repeat = "key in keys"
64+
)
65+
svg.grid-block.shrink.iconnables.icons-key
66+
use(
67+
xlink:href = "#icons-key"
68+
)
69+
.grid-block.vertical.p
70+
p.strong.text-overflow(
71+
title = "{{key.username}} User Key for {{currentOrg}}"
72+
) {{key.username}} User Key for {{currentOrg}}
73+
p.monospace.text-gray.text-overflow {{key.fingerprint}}
74+
a.grid-block.shrink.noscroll.align-center.btn.gray.btn-xs.btn-authorized(
75+
ng-include = "'SSHAuthorizeButton'"
76+
ng-init = "state.authorized = true"
77+
)

‎client/directives/modals/settingsModal/settingsModalView.jade‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,16 @@
6161
width = "24"
6262
)
6363
.btn-text.grid-content Slack Integration
64+
button.btn.btn-radio.grid-block.vertical(
65+
ng-class = "{'active': SEMC.currentTab === 'SSHKeys'}"
66+
ng-click = "SEMC.currentTab = 'SSHKeys'"
67+
ng-if = "$root.featureFlags.composeSSHKeys"
68+
)
69+
svg.iconnables.grid-content
70+
use(
71+
xlink:href = "#icons-key"
72+
)
73+
.btn-text.grid-content SSH Keys
6474
button.btn.btn-radio.grid-block.vertical(
6575
ng-class = "{'active': SEMC.currentTab === 'teamManagement'}"
6676
ng-click = "SEMC.currentTab = 'teamManagement'"
@@ -92,6 +102,11 @@
92102
ng-if = "SEMC.currentTab === 'slackIntegration'"
93103
)
94104

105+
.modal-form.form-ssh(
106+
ng-if = "SEMC.currentTab === 'SSHKeys'"
107+
ng-include = "'SSHKeysFormView'"
108+
)
109+
95110
team-management-form(
96111
ng-if = "SEMC.currentTab === 'teamManagement'"
97112
)

‎client/services/featureFlagService.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ function featureFlags(
1919
composeNav: true,
2020
composeNewService: true,
2121
composeHistory: true,
22+
composeSSHKeys: false,
23+
composeSSHAuthView: false,
2224
composeTestingUpdate: false,
2325
connections: false,
2426
contingencyPlan: false,

0 commit comments

Comments
 (0)