added api key labels

Author: YannickFuereder

Assets/css/profile.css

@@ -338,13 +338,13 @@ th {
   overflow: hidden;
 }
 
-.apiKeysTable td:nth-child(2) {
+.apiKeysTable td:nth-child(4) {
   display: flex;
-  gap: 1em;
+  gap: .5em;
 }
 
-.apiKeysTable td:nth-child(2) button {
-  padding: .8em;
+.apiKeysTable td:nth-child(4) button {
+  padding: .5em;
 }
 
 .apiKeysTable td {
@@ -439,6 +439,7 @@ th {
 
 .thirdPartyApps-container > div > button {
   margin-left: auto;
+  padding: .5em 2em;
 }
 
 .thirdPartyApps-container > div > h1 {
@@ -476,6 +477,14 @@ a {
   margin-bottom: 1em;
 }
 
+.passkeys > div h1 {
+  font-size: 1.5em;
+}
+
+.passkeys > div p {
+  font-size: 0.9em;
+}
+
 .passkeys > div h1, .passkeys > div p {
   margin: 0;
 }
@@ -592,12 +601,12 @@ a {
     font-size: 0.85em;
   }
 
-  .apiKeysTable td:nth-child(2) {
+  .apiKeysTable td:nth-child(4) {
     flex-direction: column;
     gap: .5em;
   }
 
-  .apiKeysTable td:nth-child(2) button {
+  .apiKeysTable td:nth-child(4) button {
     padding: .5em;
     width: 100%;
   }

Assets/js/data/auth/createApiKey.js

@@ -1,12 +1,12 @@
-export async function createApiKey(scope) {
+export async function createApiKey(label, scope) {
   await LoginManager.validateToken();
   const req = await fetch(`https://api.login.${LoginManager.domain}/user/apikey`, {
     method: 'POST',
     headers: {
       Authorization: `Bearer ${LoginManager.getCookie('token')}`,
       'Content-Type': 'application/json',
     },
-    body: `"${scope}"`,
+    body: JSON.stringify({ label, scope }),
   });
 
   if (req.status === 401) {

Assets/js/profile.js

@@ -120,6 +120,7 @@ LoginManager.isLoggedIn().then(async (e) => {
       '2faType': 'App',
       api_keys: [
         {
+          label: 'Test API Key',
           clientId: '1234567890',
           scope: 'admin',
         },
@@ -251,7 +252,7 @@ LoginManager.isLoggedIn().then(async (e) => {
   });
 
   currentUser.api_keys.forEach((key) => {
-    document.getElementById('apiKeysTable').appendChild(createApiKeyRow(key.clientId, key.scope));
+    document.getElementById('apiKeysTable').appendChild(createApiKeyRow(key.label, key.clientId, key.scope));
   });
 
   if (currentUser.trusted_sso_clients.length > 0) document.getElementById('thirdPartyAppsContainer').innerHTML = '';
@@ -639,10 +640,10 @@ async function doubleClickButton(e, func) {
   }, 3000);
 }
 
-function createApiKeyRow(client_id, scope) {
+function createApiKeyRow(label, client_id, scope) {
   const row = document.createElement('tr');
   row.id = client_id;
-  row.innerHTML = `<td>${client_id}</td><td>${scope}</td>`;
+  row.innerHTML = `<td>${label}</td><td>${client_id}</td><td>${scope}</td>`;
   const td = document.createElement('td');
   const deleteBtn = document.createElement('button');
   const regenBtn = document.createElement('button');
@@ -660,6 +661,7 @@ function createApiKeyRow(client_id, scope) {
 }
 
 async function createApiKey() {
+  document.getElementById('label').value = '';
   document.getElementById('scope').value = '';
   document.getElementById('apiKeyDialog').show();
 
@@ -680,9 +682,10 @@ async function createApiKey() {
 
   if (!dialogRes) return false;
 
+  const label = document.getElementById('label').value;
   const scope = document.getElementById('scope').value;
 
-  if (scope.length === 0) {
+  if (label.length === 0 || scope.length === 0) {
     createDialog('Error', 'Please fill out all fields!', 'error');
     return;
   }
@@ -705,7 +708,7 @@ async function createApiKey() {
     }
   }
 
-  const req = await createApiKeyReq(scope);
+  const req = await createApiKeyReq(label, scope);
   const res = await req.json();
 
   if (res.statusCode !== 203) {
@@ -714,7 +717,7 @@ async function createApiKey() {
     return;
   }
 
-  document.getElementById('apiKeysTable').appendChild(createApiKeyRow(res.data.clientId, res.data.scope));
+  document.getElementById('apiKeysTable').appendChild(createApiKeyRow(res.data.label, res.data.clientId, res.data.scope));
 
   createDialog('Success', `Successfully created API key! Please save it now, as it will not be shown again! ${res.data.clientSecret}`, 'info');
 }

profile/index.html

@@ -266,6 +266,7 @@ <h1>Api Keys</h1>
 
         <table id="apiKeysTable" class="apiKeysTable">
           <tr>
+            <th>Label</th>
             <th>Key</th>
             <th>Scope</th>
             <th>Actions</th>
@@ -360,6 +361,7 @@ <h1>Danger Zone</h1>
   <button target-dialog target="createSSODialog" style="display: none;"></button>
   <button target-dialog target="apiKeyDialog" style="display: none;"></button>
   <div id="apiKeyDialog" class="custom-dialog">
+    <input id="label" placeholder="Label" type="text">
     <input id="scope" placeholder="Scope" type="text">
 
     <div class="flex end">