From 8135d2f6cea4e030aa39b4e38bedb198009f6be3 Mon Sep 17 00:00:00 2001 From: ryanwong Date: Fri, 15 Nov 2024 05:24:27 -0500 Subject: [PATCH] working export of roles and routes --- src/components/RoleModal.tsx | 179 +++++++++++++++++++++++--------- src/components/SettingsForm.tsx | 25 ++++- 2 files changed, 155 insertions(+), 49 deletions(-) diff --git a/src/components/RoleModal.tsx b/src/components/RoleModal.tsx index 0beb137..6d7ef34 100644 --- a/src/components/RoleModal.tsx +++ b/src/components/RoleModal.tsx @@ -1,6 +1,23 @@ -import React, { useState, useEffect } from 'react'; -import { X, Trash2 } from 'lucide-react'; -import { useFlowStore } from '../store/flowStore'; +import React, { useState, useEffect } from "react"; +import { X, Trash2 } from "lucide-react"; +import { useFlowStore } from "../store/flowStore"; + +interface Permissions { + authRequired: boolean; + routes: string[]; + canCreateUsers: boolean; + canEditUsers: boolean; + canDeleteUsers: boolean; + canManageRoles: boolean; + canLogin: boolean; + canRegister: boolean; + canGoogleLogin: boolean; + canAppleLogin: boolean; + canMicrosoftLogin: boolean; + canMagicLinkLogin: boolean; + needs2FA: boolean; + canSetPermissions: boolean; +} interface RoleModalProps { isOpen: boolean; @@ -9,21 +26,14 @@ interface RoleModalProps { id: string; name: string; slug: string; - permissions: { - authRequired: boolean; - routes: string[]; - canCreateUsers: boolean; - canEditUsers: boolean; - canDeleteUsers: boolean; - canManageRoles: boolean; - }; + permissions: Permissions; }; } const createInitialFormData = () => ({ id: `role_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`, - name: '', - slug: '', + name: "", + slug: "", permissions: { authRequired: false, routes: [], @@ -31,6 +41,14 @@ const createInitialFormData = () => ({ canEditUsers: false, canDeleteUsers: false, canManageRoles: false, + canLogin: false, + canRegister: false, + canGoogleLogin: false, + canAppleLogin: false, + canMicrosoftLogin: false, + canMagicLinkLogin: false, + needs2FA: false, + canSetPermissions: false, }, }); @@ -48,9 +66,9 @@ export function RoleModal({ isOpen, onClose, role }: RoleModalProps) { const handleChange = (e: React.ChangeEvent) => { const { name, value, type, checked } = e.target; - if (type === 'checkbox') { - if (name.startsWith('permissions.')) { - const permissionKey = name.split('.')[1]; + if (type === "checkbox") { + if (name.startsWith("permissions.")) { + const permissionKey = name.split(".")[1]; setFormData({ ...formData, permissions: { @@ -63,13 +81,13 @@ export function RoleModal({ isOpen, onClose, role }: RoleModalProps) { setFormData({ ...formData, [name]: value, - ...(name === 'name' && !role + ...(name === "name" && !role ? { slug: value .toLowerCase() - .replace(/[^a-z0-9]/g, '-') - .replace(/-+/g, '-') - .replace(/^-|-$/g, ''), + .replace(/[^a-z0-9]/g, "-") + .replace(/-+/g, "-") + .replace(/^-|-$/g, ""), } : {}), }); @@ -121,12 +139,9 @@ export function RoleModal({ isOpen, onClose, role }: RoleModalProps) {

- {role ? 'Edit Role' : 'Add New Role'} + {role ? "Edit Role" : "Add New Role"}

-
@@ -134,7 +149,9 @@ export function RoleModal({ isOpen, onClose, role }: RoleModalProps) {
- +
- +
-

Permissions

-
- -
-

Accessible Routes

+

Permissions

+
+

+ Authentication Management +

+
+ + + + + + +
+
+
); -} \ No newline at end of file +} diff --git a/src/components/SettingsForm.tsx b/src/components/SettingsForm.tsx index 34d3f6e..8487497 100644 --- a/src/components/SettingsForm.tsx +++ b/src/components/SettingsForm.tsx @@ -4,7 +4,7 @@ import { useFlowStore } from "../store/flowStore"; import { TranslationService } from "../services/TranslationService"; export function SettingsForm() { - const { settings, updateSettings } = useFlowStore(); + const { settings, updateSettings, routes } = useFlowStore(); const handleChange = ( e: React.ChangeEvent @@ -21,8 +21,29 @@ export function SettingsForm() { const handleExportConfiguration = () => { const models = useFlowStore.getState().models; + const roles = useFlowStore.getState().roles; + const routes = useFlowStore.getState().routes; + const configuration = { models: models.map((model) => TranslationService.translateModel(model)), + roles: roles.map((role) => ({ + name: role.name, + slug: role.slug, + permissions: { + ...role.permissions, + routes: role.permissions.routes + .map((routeId) => { + const route = routes.find((r) => r.id === routeId); + return route + ? { + method: route.method, + url: route.url, + } + : null; + }) + .filter(Boolean), + }, + })), }; const blob = new Blob([JSON.stringify(configuration, null, 2)], { @@ -31,7 +52,7 @@ export function SettingsForm() { const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; - a.download = "model-configuration.json"; + a.download = "configuration.json"; document.body.appendChild(a); a.click(); document.body.removeChild(a);