Can enroll keys

src/ui/routes/AccountSettingsRoute.tsx

@@ -16,7 +16,7 @@ import React from "react";
 import { useParams } from "react-router-dom";
 import { AccountHelper, AdminAccount } from "../../helpers/AccountHelper";
 import { AsyncWidget } from "../widgets/AsyncWidget";
-import { matAlert, snackbar } from "../widgets/DialogsProvider";
+import { input, matAlert, snackbar } from "../widgets/DialogsProvider";
 import { PageTitle } from "../widgets/PageTitle";
 
 export function AccountSettingsRoute() {
@@ -69,6 +69,8 @@ class AccountSettingsRouteInner extends React.Component<
 					<GeneralSettings
 						admin={this.state.account}
 					></GeneralSettings>
+
+					<KeySettingsSection></KeySettingsSection>
 				</Grid>
 			</div>
 		);
@@ -153,6 +155,42 @@ class GeneralSettings extends React.Component<
 	}
 }
 
+function KeySettingsSection() {
+	const registerNewKey = async () => {
+		try {
+			const challenge = await AccountHelper.GetKeyRegistrationChallenge();
+			const credential = await navigator.credentials.create(challenge);
+
+			if (credential == null) throw new Error("Operation aborted!");
+
+			const name = await input({
+				label: "Key name",
+				maxLength: 40,
+				minLength: 2,
+			});
+
+			await AccountHelper.RegisterKey(name, credential);
+
+			snackbar("Successfully enrolled a new key!");
+		} catch (e) {
+			console.error(e);
+			matAlert("Failed to register a new key!");
+		}
+	};
+
+	return (
+		<SettingsSection title="Key setttings">
+			<Button
+				style={{ alignSelf: "end", marginRight: "10px" }}
+				disabled={false /* TODO : adapt  if other admin*/}
+				onClick={registerNewKey}
+			>
+				Register a new key
+			</Button>
+		</SettingsSection>
+	);
+}
+
 function SettingsSection(p: { title: string; children?: React.ReactNode }) {
 	return (
 		<Grid item sm={6} spacing={2}>