Skip to content
This repository was archived by the owner on Apr 19, 2023. It is now read-only.

Commit 19b9e0e

Browse files
AnandChowdharyAnandChowdhary
committed
✨ Show/hide API keys
1 parent d3fdc6e commit 19b9e0e

File tree

8 files changed

+70
-30
lines changed

8 files changed

+70
-30
lines changed

‎pages/manage/_team/api-keys/index.vue

Lines changed: 70 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,7 @@
1111
class="button button--type-icon"
1212
@click="load"
1313
>
14-
<font-awesome-icon
15-
title="Refresh"
16-
class="icon"
17-
icon="sync"
18-
fixed-width
19-
/>
14+
<font-awesome-icon class="icon" icon="sync" fixed-width />
2015
</button>
2116
</div>
2217
</div>
@@ -44,20 +39,44 @@
4439
<code>{{ apiKey.apiKey }}</code>
4540
</td>
4641
<td>
47-
<code>{{ apiKey.secretKey }}</code>
42+
<code v-if="!revealed.includes(apiKey.apiKey)"
43+
>····················</code
44+
>
45+
<code v-else>{{ apiKey.secretKey }}</code>
4846
</td>
4947
<td>{{ apiKey.access ? "Full access" : "Read-only access" }}</td>
5048
<td class="text text--align-right">
49+
<button
50+
v-if="!revealed.includes(apiKey.apiKey)"
51+
aria-label="Reveal secret key"
52+
data-balloon-pos="up"
53+
class="button button--type-icon"
54+
@click="() => (showReveal = apiKey)"
55+
>
56+
<font-awesome-icon class="icon" icon="eye" fixed-width />
57+
</button>
58+
<button
59+
v-else
60+
aria-label="Hide secret key"
61+
data-balloon-pos="up"
62+
class="button button--type-icon"
63+
@click="hideApiKey(apiKey.apiKey)"
64+
>
65+
<font-awesome-icon
66+
class="icon"
67+
icon="eye-slash"
68+
fixed-width
69+
/>
70+
</button>
5171
<router-link
5272
:to="
5373
`/manage/${$route.params.team}/api-keys/${apiKey.apiKey}`
5474
"
55-
aria-label="Details"
75+
aria-label="Edit"
5676
data-balloon-pos="up"
5777
class="button button--type-icon"
5878
>
5979
<font-awesome-icon
60-
title="Details"
6180
class="icon"
6281
icon="pencil-alt"
6382
fixed-width
@@ -69,12 +88,7 @@
6988
class="button button--type-icon button--color-danger"
7089
@click="() => (showDelete = apiKey)"
7190
>
72-
<font-awesome-icon
73-
title="Delete"
74-
class="icon"
75-
icon="trash"
76-
fixed-width
77-
/>
91+
<font-awesome-icon class="icon" icon="trash" fixed-width />
7892
</button>
7993
</td>
8094
</tr>
@@ -95,7 +109,6 @@
95109
/>
96110
<font-awesome-icon
97111
v-else
98-
title="Available"
99112
class="icon icon--ml-2 icon--color-light"
100113
icon="sync"
101114
spin
@@ -144,6 +157,29 @@
144157
</button>
145158
</Confirm>
146159
</transition>
160+
<transition name="modal">
161+
<Confirm v-if="showReveal" :on-close="() => (showReveal = null)">
162+
<h2>Are you sure you want to reveal this secret key?</h2>
163+
<p>
164+
Your secret key is like your password. Anyone with access to it can
165+
make changes to your account including charging your credit card.
166+
</p>
167+
<button
168+
class="button button--color-primary"
169+
@click="
170+
() => {
171+
revealed.push(showReveal.apiKey);
172+
showReveal = null;
173+
}
174+
"
175+
>
176+
Yes, reveal secret key
177+
</button>
178+
<button type="button" class="button" @click="showReveal = null">
179+
No, don't reveal
180+
</button>
181+
</Confirm>
182+
</transition>
147183
</main>
148184
</template>
149185

@@ -165,11 +201,12 @@ import {
165201
faPencilAlt,
166202
faArrowDown,
167203
faSync,
168-
faCloudDownloadAlt,
169-
faTrash
204+
faTrash,
205+
faEye,
206+
faEyeSlash
170207
} from "@fortawesome/free-solid-svg-icons";
171208
import { ApiKeys, emptyPagination, ApiKey } from "../../../../types/manage";
172-
library.add(faPencilAlt, faCloudDownloadAlt, faArrowDown, faSync, faTrash);
209+
library.add(faPencilAlt, faArrowDown, faSync, faTrash, faEye, faEyeSlash);
173210
174211
@Component({
175212
components: {
@@ -187,6 +224,8 @@ library.add(faPencilAlt, faCloudDownloadAlt, faArrowDown, faSync, faTrash);
187224
export default class ManageSettings extends Vue {
188225
apiKeys: ApiKeys = emptyPagination;
189226
showDelete: ApiKey | null = null;
227+
showReveal: ApiKey | null = null;
228+
revealed: string[] = [];
190229
loadingMore = false;
191230
loading = "";
192231
newApiKeyAccess = 0;
@@ -245,7 +284,10 @@ export default class ManageSettings extends Vue {
245284
.catch(error => {
246285
throw new Error(error);
247286
})
248-
.finally(() => (this.loading = ""));
287+
.finally(() => {
288+
this.loading = "";
289+
this.newApiKeyAccess = 0;
290+
});
249291
}
250292
251293
private deleteApiKey(key: string) {
@@ -264,6 +306,14 @@ export default class ManageSettings extends Vue {
264306
})
265307
.finally(() => (this.loading = ""));
266308
}
309+
310+
private hideApiKey(apiKey: string) {
311+
const index = this.revealed.indexOf(apiKey);
312+
if (index > -1) {
313+
this.revealed.splice(index, 1);
314+
}
315+
this.showReveal = null;
316+
}
267317
}
268318
</script>
269319

‎pages/manage/_team/billing/invoices/index.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,6 @@
126126
/>
127127
<font-awesome-icon
128128
v-else
129-
title="Available"
130129
class="icon icon--ml-2 icon--color-light"
131130
icon="sync"
132131
spin

‎pages/manage/_team/billing/sources/index.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,6 @@
8383
/>
8484
<font-awesome-icon
8585
v-else
86-
title="Available"
8786
class="icon icon--ml-2 icon--color-light"
8887
icon="sync"
8988
spin

‎pages/manage/_team/members/index.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,6 @@
7878
<font-awesome-icon v-if="!loadingMore" class="icon" icon="arrow-down" />
7979
<font-awesome-icon
8080
v-else
81-
title="Available"
8281
class="icon icon--ml-2 icon--color-light"
8382
icon="sync"
8483
spin

‎pages/manage/_team/subscription/index.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -244,7 +244,6 @@
244244
/>
245245
<font-awesome-icon
246246
v-else
247-
title="Available"
248247
class="icon icon--ml-2 icon--color-light"
249248
icon="sync"
250249
spin

‎pages/settings/emails.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,6 @@
102102
/>
103103
<font-awesome-icon
104104
v-else
105-
title="Available"
106105
class="icon icon--ml-2 icon--color-light"
107106
icon="sync"
108107
spin

‎pages/settings/organizations.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,6 @@
9090
/>
9191
<font-awesome-icon
9292
v-else
93-
title="Available"
9493
class="icon icon--ml-2 icon--color-light"
9594
icon="sync"
9695
spin

‎pages/settings/security.vue

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@
4545
<span>Enable 2FA</span>
4646
<font-awesome-icon
4747
v-if="enabling"
48-
title="Available"
4948
class="icon icon--ml-2 icon--color-light"
5049
icon="sync"
5150
spin
@@ -72,7 +71,6 @@
7271
data-balloon-pos="up"
7372
>
7473
<font-awesome-icon
75-
title="Available"
7674
class="icon icon--ml-2 icon--color-success"
7775
icon="check-circle"
7876
/>
@@ -98,7 +96,6 @@
9896
data-balloon-pos="up"
9997
>
10098
<font-awesome-icon
101-
title="Available"
10299
class="icon icon--ml-2 icon--color-success"
103100
icon="check-circle"
104101
/>
@@ -187,7 +184,6 @@
187184
/>
188185
<font-awesome-icon
189186
v-else
190-
title="Available"
191187
class="icon icon--ml-2 icon--color-light"
192188
icon="sync"
193189
spin

0 commit comments

Comments
 (0)