Integrate core config section

src/api/tenants/index.ts

@@ -34,6 +34,14 @@ export const useTenantCreateService = () => {
 		  }
 		| undefined
 	> => {
+		// TODO: Temporary mock data
+		await new Promise((resolve) => setTimeout(resolve, 1000));
+
+		return {
+			status: "OK",
+			createdNew: true,
+		};
+
 		const response = await fetchData({
 			url: getApiUrl("/api/tenant"),
 			method: "PUT",
@@ -70,6 +78,72 @@ export const useTenantGetService = () => {
 		  }
 		| undefined
 	> => {
+		// TODO: Temporary mock data
+		await new Promise((resolve) => setTimeout(resolve, 10));
+
+		return {
+			status: "OK",
+			tenant: {
+				tenantId,
+				thirdParty: {
+					providers: [],
+				},
+				firstFactors: [],
+				requiredSecondaryFactors: [],
+				userCount: 12,
+				coreConfig: [
+					{
+						key: "password_reset_token_lifetime",
+						valueType: "number",
+						value: 3600000,
+						description: "The time in milliseconds for which the password reset token is valid.",
+						isSaaSProtected: false,
+						isDifferentAcrossTenants: true,
+						isModifyableOnlyViaConfigYaml: false,
+						defaultValue: 3600000,
+						isNullable: false,
+						isPluginProperty: false,
+					},
+					{
+						key: "access_token_blacklisting",
+						valueType: "boolean",
+						value: false,
+						description: "Whether to blacklist access tokens or not.",
+						isSaaSProtected: false,
+						isDifferentAcrossTenants: true,
+						isModifyableOnlyViaConfigYaml: false,
+						defaultValue: false,
+						isNullable: false,
+						isPluginProperty: false,
+					},
+					{
+						key: "ip_allow_regex",
+						valueType: "string",
+						value: null,
+						description: "The regex to match the IP address of the user.",
+						isSaaSProtected: false,
+						isDifferentAcrossTenants: true,
+						isModifyableOnlyViaConfigYaml: false,
+						defaultValue: null,
+						isNullable: true,
+						isPluginProperty: false,
+					},
+					{
+						key: "postgresql_emailpassword_users_table_name",
+						valueType: "string",
+						value: null,
+						description: "The name of the table where the emailpassword users are stored.",
+						isSaaSProtected: false,
+						isDifferentAcrossTenants: true,
+						isModifyableOnlyViaConfigYaml: false,
+						defaultValue: 3600000,
+						isNullable: true,
+						isPluginProperty: true,
+					},
+				],
+			},
+		};
+
 		const response = await fetchData({
 			url: getApiUrl("/api/tenant", tenantId),
 			method: "GET",
@@ -95,6 +169,13 @@ export const useTenantDeleteService = () => {
 			method: "DELETE",
 		});
 
+		// TODO: Temporary mock data
+		await new Promise((resolve) => setTimeout(resolve, 1000));
+
+		return {
+			status: "OK",
+		};
+
 		if (response.ok) {
 			return {
 				status: "OK",
@@ -119,6 +200,13 @@ export const useUpdateFirstFactorsService = () => {
 		| { status: "RECIPE_NOT_CONFIGURED_ON_BACKEND_SDK"; message: string }
 		| { status: "UNKNOWN_TENANT_ERROR" }
 	> => {
+		// TODO: Temporary mock data
+		await new Promise((resolve) => setTimeout(resolve, 1000));
+
+		return {
+			status: "OK",
+		};
+
 		const response = await fetchData({
 			url: getApiUrl("/api/tenant/first-factor", tenantId),
 			method: "PUT",
@@ -156,6 +244,13 @@ export const useUpdateSecondaryFactorsService = () => {
 		| { status: "MFA_REQUIREMENTS_FOR_AUTH_OVERRIDDEN" }
 		| { status: "UNKNOWN_TENANT_ERROR" }
 	> => {
+		// TODO: Temporary mock data
+		await new Promise((resolve) => setTimeout(resolve, 1000));
+
+		return {
+			status: "OK",
+		};
+
 		const response = await fetchData({
 			url: getApiUrl("/api/tenant/secondary-factor", tenantId),
 			method: "PUT",
@@ -179,6 +274,47 @@ export const useUpdateSecondaryFactorsService = () => {
 	return updateSecondaryFactors;
 };
 
+export const useUpdateCoreConfigService = () => {
+	const fetchData = useFetchData();
+
+	const updateCoreConfig = async (
+		tenantId: string,
+		name: string,
+		value: string | number | boolean | null
+	): Promise<
+		{ status: "OK" } | { status: "UNKNOWN_TENANT_ERROR" } | { status: "INVALID_CONFIG"; message: string }
+	> => {
+		// TODO: Temporary mock data
+		await new Promise((resolve) => setTimeout(resolve, 1000));
+
+		return {
+			status: "INVALID_CONFIG",
+			message: "Invalid config",
+		};
+
+		const response = await fetchData({
+			url: getApiUrl("/api/tenant/core-config", tenantId),
+			method: "PUT",
+			config: {
+				body: JSON.stringify({
+					name,
+					value,
+				}),
+			},
+		});
+
+		if (response.ok) {
+			return {
+				status: "OK",
+			};
+		}
+
+		throw new Error("Unknown error");
+	};
+
+	return updateCoreConfig;
+};
+
 export const useThirdPartyService = () => {
 	const fetchData = useFetchData();
 

src/images.ts

@@ -73,6 +73,7 @@ import "./assets/provider-google.svg";
 import "./assets/provider-linkedin.svg";
 import "./assets/provider-okta.png";
 import "./assets/provider-twitter.svg";
+import "./assets/question-mark.svg";
 import "./assets/refresh.svg";
 import "./assets/right_arrow_icon.svg";
 import "./assets/roles-and-permissions.svg";

src/ui/components/checkbox/Checkbox.tsx

@@ -0,0 +1,44 @@
+/* Copyright (c) 2024, VRAI Labs and/or its affiliates. All rights reserved.
+ *
+ * This software is licensed under the Apache License, Version 2.0 (the
+ * "License") as published by the Apache Software Foundation.
+ *
+ * You may not use this file except in compliance with the License. You may
+ * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+import { ChangeEvent } from "react";
+import "./checkbox.scss";
+
+export const Checkbox = ({
+	id,
+	label,
+	onChange,
+	checked,
+	disabled,
+}: {
+	id: string;
+	label: string;
+	onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+	checked: boolean;
+	disabled?: boolean;
+}) => {
+	return (
+		<div className={`checkbox-container ${disabled ? "checkbox-container--disabled" : ""}`}>
+			<input
+				type="checkbox"
+				id={id}
+				name={id}
+				onChange={onChange}
+				checked={checked}
+				disabled={disabled}
+			/>
+			<label htmlFor={id}>{label}</label>
+		</div>
+	);
+};

src/ui/components/checkbox/checkbox.scss

@@ -0,0 +1,33 @@
+/* Copyright (c) 2024, VRAI Labs and/or its affiliates. All rights reserved.
+ *
+ * This software is licensed under the Apache License, Version 2.0 (the
+ * "License") as published by the Apache Software Foundation.
+ *
+ * You may not use this file except in compliance with the License. You may
+ * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
+.checkbox-container {
+	display: flex;
+	gap: 6px;
+	align-items: center;
+
+	label {
+		font-family: inherit;
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 14px;
+		color: var(--color-secondary);
+	}
+
+	&--disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+}