Can delete auth keys

src/helpers/AccountHelper.ts

@@ -265,4 +265,17 @@ export class AccountHelper {
 			id: adminID,
 		});
 	}
+
+	/**
+	 * Delete an admin auth key
+	 *
+	 * @param adminID The id of the target admin
+	 * @param keyID The id of the key to delete
+	 */
+	static async DeleteAuthKey(adminID: number, keyID: number) {
+		return await serverRequest("accounts/delete_auth_key", {
+			adminID: adminID,
+			keyID: keyID,
+		});
+	}
 }

src/ui/routes/AccountSettingsRoute.tsx

@@ -8,6 +8,7 @@ import {
 	Button,
 	Divider,
 	Grid,
+	IconButton,
 	Paper,
 	Table,
 	TableBody,
@@ -17,6 +18,7 @@ import {
 	TextField,
 	Typography,
 } from "@material-ui/core";
+import { Delete } from "@material-ui/icons";
 import React from "react";
 import { useParams } from "react-router-dom";
 import {
@@ -25,7 +27,12 @@ import {
 	AdminAccountKey,
 } from "../../helpers/AccountHelper";
 import { AsyncWidget } from "../widgets/AsyncWidget";
-import { input, matAlert, snackbar } from "../widgets/DialogsProvider";
+import {
+	input,
+	matAlert,
+	matConfirm,
+	snackbar,
+} from "../widgets/DialogsProvider";
 import { PageTitle } from "../widgets/PageTitle";
 import { TimestampWidget } from "../widgets/TimestampWidget";
 
@@ -186,6 +193,7 @@ export class KeySettingsSection extends React.Component<
 		this.load = this.load.bind(this);
 		this.build = this.build.bind(this);
 		this.registerNewKey = this.registerNewKey.bind(this);
+		this.deleteKey = this.deleteKey.bind(this);
 	}
 
 	async load() {
@@ -216,6 +224,25 @@ export class KeySettingsSection extends React.Component<
 		}
 	}
 
+	async deleteKey(key: AdminAccountKey) {
+		try {
+			if (
+				!(await matConfirm(
+					"Do you really want to delete the key '" + key.name + "' ?"
+				))
+			)
+				return;
+
+			await AccountHelper.DeleteAuthKey(this.props.admin.id, key.id);
+
+			snackbar("The key was successfully deleted!");
+			this.setState({ counter: this.state.counter + 1 });
+		} catch (e) {
+			console.error(e);
+			matAlert("Failed to delete key!");
+		}
+	}
+
 	render() {
 		return (
 			<AsyncWidget
@@ -229,13 +256,13 @@ export class KeySettingsSection extends React.Component<
 
 	build() {
 		return (
-			<SettingsSection title="Key setttings">
+			<SettingsSection title="Security keys">
 				<Table aria-label="simple table">
 					<TableHead>
 						<TableRow>
 							<TableCell>Key name</TableCell>
 							<TableCell align="right">Date added</TableCell>
-							<TableCell align="right">Actions</TableCell>
+							<TableCell align="right"></TableCell>
 						</TableRow>
 					</TableHead>
 					<TableBody>
@@ -247,7 +274,15 @@ export class KeySettingsSection extends React.Component<
 								<TableCell align="right">
 									<TimestampWidget time={key.time_add} />
 								</TableCell>
-								<TableCell align="right">Delete</TableCell>
+								<TableCell align="right">
+									<IconButton
+										aria-label="delete"
+										size="small"
+										onClick={() => this.deleteKey(key)}
+									>
+										<Delete />
+									</IconButton>
+								</TableCell>
 							</TableRow>
 						))}
 					</TableBody>

src/ui/routes/MainRoute.tsx

@@ -146,7 +146,7 @@ export function MainRoute() {
 							<small>{AccountHelper.currentAccount.email}</small>
 						</Typography>
 
-						<IconButton aria-label="delete" onClick={signOut}>
+						<IconButton aria-label="Sign out" onClick={signOut}>
 							<CloseSharpIcon />
 						</IconButton>
 					</Toolbar>