Skip to content

Commit 6469d7c

Browse files
FiahbladeFiahblade
committed
Added ApiKeysCreatedPage
1 parent 892da7c commit 6469d7c

File tree

6 files changed

+105
-13
lines changed

6 files changed

+105
-13
lines changed

‎src/lib/code/api.ts‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1084,7 +1084,7 @@ export function getApiKeys(report: (apiKey: IApiKey[]) => void, completed: (wasS
10841084
})
10851085
}
10861086

1087-
export function createApiKey(newApiKey: INewApiKey, completed: (wasSuccess: boolean) => void) {
1087+
export function createApiKey(newApiKey: INewApiKey, completed: (wasSuccess: boolean, plainTextApiKey: string) => void) {
10881088
//formulate proper request
10891089
var requestBody: ICreateApiKeyRequest = {
10901090
name: newApiKey.name,
@@ -1103,13 +1103,16 @@ export function createApiKey(newApiKey: INewApiKey, completed: (wasSuccess: bool
11031103
}
11041104

11051105
log(response?.status);
1106-
log(response?.data);
1107-
completed(true);
1106+
// don't log the key!
1107+
// log(response?.data);
1108+
return response?.data ?? [];
1109+
})
1110+
.then((rawData) => {
1111+
completed(true, rawData.apiKey);
11081112
})
1109-
11101113
.catch((error) => {
11111114
console.error(`Failed to create API Key: ${newApiKey.name} Error: ${error}`)
1112-
completed(false);
1115+
completed(false, "");
11131116
})
11141117
}
11151118

‎src/lib/components/elements/warning.svelte‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { mdiAlertOctagram, mdiAlertRhombus, mdiInformation, mdiShieldLock } from '@mdi/js';
2+
import { mdiAlertOctagram, mdiAlertRhombus, mdiCheck, mdiInformation, mdiShieldLock } from '@mdi/js';
33
import Icon from './icon.svelte';
44
import { WarningType } from '../../../types';
55
@@ -17,6 +17,9 @@
1717
case WarningType.Info:
1818
return mdiInformation;
1919
20+
case WarningType.Success:
21+
return mdiCheck;
22+
2023
case WarningType.Error:
2124
default:
2225
return mdiAlertOctagram;
@@ -33,6 +36,9 @@
3336
case WarningType.Info:
3437
return 'text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-700 dark:text-blue-200';
3538
39+
case WarningType.Success:
40+
return 'text-green-500 bg-green-100 rounded-lg dark:bg-green-700 dark:text-green-200';
41+
3642
case WarningType.Error:
3743
default:
3844
return 'text-red-500 bg-red-100 rounded-lg dark:bg-red-700 dark:text-red-200';

‎src/lib/pages/apiKeys/create.svelte‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { mdiAccountMultiple, mdiArrowULeftTop, mdiKeyVariant } from '@mdi/js';
2+
import { mdiArrowULeftTop, mdiKeyChainVariant, mdiKeyVariant } from '@mdi/js';
33
import Icon from '$lib/components/elements/icon.svelte';
44
import PageTitleBanner from '$lib/components/page/pageTitleBanner.svelte';
55
import Breadcrumb from '$lib/components/navigation/breadcrumb.svelte';
@@ -27,10 +27,9 @@
2727
serverAccessDetails: serverAccessDetails
2828
};
2929
30-
createApiKey(newApiKey, (wasSuccess: boolean) => {
30+
createApiKey(newApiKey, (wasSuccess: boolean, plainApiKey: string) => {
3131
if (wasSuccess) {
32-
confirm(`API Key '${name}' was successfully created.`);
33-
navigateBack();
32+
navigateToPage(Page.ApiKeysCreated, plainApiKey);
3433
} else {
3534
confirm(`Failed to create API Key '${name}'.`);
3635
}
@@ -48,7 +47,7 @@
4847

4948
<section class="h-[calc(100vh-56px)] overflow-auto p-6 dark:bg-gray-900 dark:text-white">
5049
<Breadcrumb
51-
icon={mdiAccountMultiple}
50+
icon={mdiKeyChainVariant}
5251
items={[
5352
{ name: 'API Keys', page: Page.ApiKeysOverview, isClickable: true },
5453
{ name: 'Create', page: Page.Empty, isClickable: false }

‎src/lib/pages/apiKeys/created.svelte‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<script lang="ts">
2+
import { onDestroy, onMount } from 'svelte';
3+
import { get } from 'svelte/store';
4+
import { Button } from 'flowbite-svelte';
5+
import { Page, WarningType } from '../../../types';
6+
import { mdiArrowULeftTop, mdiClipboardTextMultiple, mdiKeyChainVariant } from '@mdi/js';
7+
import { navigateToPage, selectedPageProps } from '$lib/code/routing';
8+
import Icon from '$lib/components/elements/icon.svelte';
9+
import PageTitleBanner from '$lib/components/page/pageTitleBanner.svelte';
10+
import Breadcrumb from '$lib/components/navigation/breadcrumb.svelte';
11+
import Input from '$lib/components/elements/input.svelte';
12+
import BoxedContainer from '$lib/components/elements/boxedContainer.svelte';
13+
import Warning from '$lib/components/elements/warning.svelte';
14+
15+
let plainApiKey: string;
16+
17+
onMount(async () => {
18+
load();
19+
});
20+
21+
onDestroy(() => {
22+
selectedPageProps.set(null);
23+
});
24+
25+
function load() {
26+
plainApiKey = get(selectedPageProps) ?? '';
27+
}
28+
29+
function copyApiKey() {
30+
navigator.clipboard.writeText(plainApiKey);
31+
}
32+
33+
function navigateBack() {
34+
navigateToPage(Page.ApiKeysOverview);
35+
}
36+
</script>
37+
38+
<svelte:head>
39+
<title>MCSS Remote Panel | View API Key</title>
40+
</svelte:head>
41+
42+
<section class="h-[calc(100vh-56px)] overflow-auto p-6 dark:bg-gray-900 dark:text-white">
43+
<Breadcrumb
44+
icon={mdiKeyChainVariant}
45+
items={[
46+
{ name: 'API Keys', page: Page.ApiKeysOverview, isClickable: true },
47+
{ name: 'Create', page: Page.ApiKeysCreate, isClickable: true },
48+
{ name: 'View Key', page: Page.Empty, isClickable: false }
49+
]}
50+
/>
51+
52+
<PageTitleBanner title="Add API Key" caption="Create a new API Key for accessing the Remote API." />
53+
<Warning type={WarningType.Success}>Your API Key has been successfully created! Please ensure to copy and securely store it as it will only be visible once.</Warning>
54+
55+
<form on:submit|preventDefault={copyApiKey} class="space-y-3">
56+
<BoxedContainer class="space-y-3">
57+
<div class="flex relative">
58+
<div class="relative w-full">
59+
<Input bind:value={plainApiKey} label={'API Key'} placeholder="Unable to load key." readonly={true} class="mr-12" />
60+
</div>
61+
62+
<div class="absolute bottom-0 right-0">
63+
<form on:submit|preventDefault={copyApiKey}>
64+
<button type="submit" class="p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 focus:ring-2 focus:ring-blue-700 dark:focus:ring-blue-500">
65+
<Icon data={mdiClipboardTextMultiple} size={5} /> <span class="sr-only">Copy to clipboard</span>
66+
</button>
67+
</form>
68+
</div>
69+
</div>
70+
<p class="mt-3 text-sm empty:hidden text-gray-500 dark:text-gray-400">Remember to keep your API Key secure at all times to prevent unauthorized access!</p>
71+
</BoxedContainer>
72+
73+
<div class="flex space-x-3">
74+
<Button type="button" on:click={navigateBack} color="alternative">
75+
<Icon data={mdiArrowULeftTop} class="mr-2 -ml-1" />Return to Overview
76+
</Button>
77+
</div>
78+
</form>
79+
</section>

‎src/routes/+page.svelte‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
import SchedulerTaskEditPage from '$lib/pages/scheduler/edit.svelte';
3030
import ApiKeysOverviewPage from '$lib/pages/apiKeys/overview.svelte';
3131
import ApiKeysCreatePage from '$lib/pages/apiKeys/create.svelte';
32+
import ApiKeysCreatedPage from '$lib/pages/apiKeys/created.svelte';
3233
3334
let isAuthenticated: boolean = false;
3435
let isPageLoadedYet: boolean = false;
@@ -106,6 +107,8 @@
106107
<ApiKeysOverviewPage />
107108
{:else if $selectedPage == Page.ApiKeysCreate}
108109
<ApiKeysCreatePage />
110+
{:else if $selectedPage == Page.ApiKeysCreated}
111+
<ApiKeysCreatedPage />
109112
{/if}
110113
</div>
111114

‎src/types.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,8 @@ export enum Page {
113113
SchedulerTaskEdit,
114114
SchedulerHistory,
115115
ApiKeysOverview,
116-
ApiKeysCreate
116+
ApiKeysCreate,
117+
ApiKeysCreated
117118
}
118119

119120
export enum PanelTheme {
@@ -137,7 +138,8 @@ export enum WarningType {
137138
Error,
138139
Warning,
139140
Permission,
140-
Info
141+
Info,
142+
Success
141143
}
142144

143145
/* User */

0 commit comments

Comments
 (0)