Can enroll keys

src/helpers/AccountHelper.ts

@@ -4,6 +4,10 @@
  * @author Pierre Hubert
  */
 
+import {
+	ArrayBufferToBase64,
+	base64NoPaddingToUint8Array,
+} from "../utils/Base64Utils";
 import { serverRequest } from "./APIHelper";
 
 export interface AuthOptions {
@@ -133,4 +137,49 @@ export class AccountHelper {
 			email: s.email,
 		});
 	}
+
+	/**
+	 * First step of access key enrollment
+	 */
+	static async GetKeyRegistrationChallenge(): Promise<any> {
+		const res = await serverRequest("accounts/challenge_register_key");
+		res.publicKey.challenge = base64NoPaddingToUint8Array(
+			res.publicKey.challenge
+		);
+		res.publicKey.user.id = base64NoPaddingToUint8Array(
+			res.publicKey.user.id
+		);
+
+		return res;
+	}
+
+	/**
+	 * Register key
+	 *
+	 * @param name The name of the key to create
+	 * @param cred The credentials to register
+	 */
+	static async RegisterKey(name: string, cred: any): Promise<void> {
+		const res = {
+			id: cred.id,
+			rawId: ArrayBufferToBase64(cred.rawId),
+			type: cred.type,
+			response: {
+				attestationObject: ArrayBufferToBase64(
+					cred.response.attestationObject
+				),
+				clientDataJSON: ArrayBufferToBase64(
+					cred.response.clientDataJSON
+				),
+			},
+		};
+
+		console.info(cred);
+		console.info(res);
+
+		await serverRequest("accounts/register_key", {
+			name: name,
+			key: JSON.stringify(res),
+		});
+	}
 }

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}>

src/ui/widgets/PageTitle.tsx

@@ -1,4 +1,4 @@
-import { Paper, Typography } from "@material-ui/core";
+import { Typography } from "@material-ui/core";
 
 /**
  * Page title widget

src/utils/Base64Lib.ts

@@ -0,0 +1,200 @@
+/*
+MIT License
+
+Copyright (c) 2020 Egor Nepomnyaschih
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
+/*
+// This constant can also be computed with the following algorithm:
+const base64abc = [],
+	A = "A".charCodeAt(0),
+	a = "a".charCodeAt(0),
+	n = "0".charCodeAt(0);
+for (let i = 0; i < 26; ++i) {
+	base64abc.push(String.fromCharCode(A + i));
+}
+for (let i = 0; i < 26; ++i) {
+	base64abc.push(String.fromCharCode(a + i));
+}
+for (let i = 0; i < 10; ++i) {
+	base64abc.push(String.fromCharCode(n + i));
+}
+base64abc.push("+");
+base64abc.push("/");
+*/
+const base64abc = [
+	"A",
+	"B",
+	"C",
+	"D",
+	"E",
+	"F",
+	"G",
+	"H",
+	"I",
+	"J",
+	"K",
+	"L",
+	"M",
+	"N",
+	"O",
+	"P",
+	"Q",
+	"R",
+	"S",
+	"T",
+	"U",
+	"V",
+	"W",
+	"X",
+	"Y",
+	"Z",
+	"a",
+	"b",
+	"c",
+	"d",
+	"e",
+	"f",
+	"g",
+	"h",
+	"i",
+	"j",
+	"k",
+	"l",
+	"m",
+	"n",
+	"o",
+	"p",
+	"q",
+	"r",
+	"s",
+	"t",
+	"u",
+	"v",
+	"w",
+	"x",
+	"y",
+	"z",
+	"0",
+	"1",
+	"2",
+	"3",
+	"4",
+	"5",
+	"6",
+	"7",
+	"8",
+	"9",
+	"+",
+	"/",
+];
+
+/*
+// This constant can also be computed with the following algorithm:
+const l = 256, base64codes = new Uint8Array(l);
+for (let i = 0; i < l; ++i) {
+	base64codes[i] = 255; // invalid character
+}
+base64abc.forEach((char, index) => {
+	base64codes[char.charCodeAt(0)] = index;
+});
+base64codes["=".charCodeAt(0)] = 0; // ignored anyway, so we just need to prevent an error
+*/
+const base64codes = [
+	255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
+	255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
+	255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 62, 255,
+	255, 255, 63, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 255, 255, 255, 0, 255,
+	255, 255, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
+	19, 20, 21, 22, 23, 24, 25, 255, 255, 255, 255, 255, 255, 26, 27, 28, 29,
+	30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48,
+	49, 50, 51,
+];
+
+function getBase64Code(charCode: any) {
+	if (charCode >= base64codes.length) {
+		throw new Error("Unable to parse base64 string.");
+	}
+	const code = base64codes[charCode];
+	if (code === 255) {
+		throw new Error("Unable to parse base64 string.");
+	}
+	return code;
+}
+
+export function bytesToBase64(bytes: any): string {
+	let result = "",
+		i,
+		l = bytes.length;
+	for (i = 2; i < l; i += 3) {
+		result += base64abc[bytes[i - 2] >> 2];
+		result += base64abc[((bytes[i - 2] & 0x03) << 4) | (bytes[i - 1] >> 4)];
+		result += base64abc[((bytes[i - 1] & 0x0f) << 2) | (bytes[i] >> 6)];
+		result += base64abc[bytes[i] & 0x3f];
+	}
+	if (i === l + 1) {
+		// 1 octet yet to write
+		result += base64abc[bytes[i - 2] >> 2];
+		result += base64abc[(bytes[i - 2] & 0x03) << 4];
+		result += "==";
+	}
+	if (i === l) {
+		// 2 octets yet to write
+		result += base64abc[bytes[i - 2] >> 2];
+		result += base64abc[((bytes[i - 2] & 0x03) << 4) | (bytes[i - 1] >> 4)];
+		result += base64abc[(bytes[i - 1] & 0x0f) << 2];
+		result += "=";
+	}
+	return result;
+}
+
+export function base64ToBytes(str: string): Uint8Array {
+	if (str.length % 4 !== 0) {
+		throw new Error("Unable to parse base64 string.");
+	}
+	const index = str.indexOf("=");
+	if (index !== -1 && index < str.length - 2) {
+		throw new Error("Unable to parse base64 string.");
+	}
+	let missingOctets = str.endsWith("==") ? 2 : str.endsWith("=") ? 1 : 0,
+		n = str.length,
+		result = new Uint8Array(3 * (n / 4)),
+		buffer;
+	for (let i = 0, j = 0; i < n; i += 4, j += 3) {
+		buffer =
+			(getBase64Code(str.charCodeAt(i)) << 18) |
+			(getBase64Code(str.charCodeAt(i + 1)) << 12) |
+			(getBase64Code(str.charCodeAt(i + 2)) << 6) |
+			getBase64Code(str.charCodeAt(i + 3));
+		result[j] = buffer >> 16;
+		result[j + 1] = (buffer >> 8) & 0xff;
+		result[j + 2] = buffer & 0xff;
+	}
+	return result.subarray(0, result.length - missingOctets);
+}
+
+export function base64encode(str: string, encoder = new TextEncoder()): string {
+	return bytesToBase64(encoder.encode(str));
+}
+
+export function base64decode(str: string, decoder = new TextDecoder()): string {
+	return decoder.decode(base64ToBytes(str));
+}

src/utils/Base64Utils.ts

@@ -0,0 +1,44 @@
+/**
+ * Base 64 utilities
+ *
+ * @author Pierre Hubert
+ */
+
+import { bytesToBase64 } from "./Base64Lib";
+
+/**
+ * Add padding to base64 string
+ *
+ * Based on : https://gist.github.com/catwell/3046205
+ *
+ * @param input Input base64, without padding
+ */
+export function base64AddPadding(input: string): string {
+	const remainder = input.length % 4;
+
+	if (remainder === 2) input += "==";
+	else if (remainder === 3) input += "=";
+
+	return input.replaceAll("-", "+").replaceAll("_", "/");
+}
+
+/**
+ * Turn a base64 string without padding into Uint8Array
+ *
+ * @param input Input base64 (without padding) string
+ */
+export function base64NoPaddingToUint8Array(input: string): Uint8Array {
+	return Uint8Array.from(atob(base64AddPadding(input)), (c) =>
+		c.charCodeAt(0)
+	);
+}
+
+/**
+ * Convert a buffer to a base64-encoded string
+ *
+ * @param buff Buffer to convert
+ */
+export function ArrayBufferToBase64(buff: ArrayBuffer): string {
+	const arr = new Uint8Array(buff);
+	return bytesToBase64(arr);
+}