strapi-plugin-keycloak-realm-users 1.0.0

package/admin/src/pages/RealmsPage/RealmListPage.jsx

@@ -0,0 +1,231 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useIntl } from 'react-intl';
+import {
+  Button,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  Typography,
+  Badge,
+  IconButton,
+  Flex,
+  Box,
+  Dialog,
+  Loader,
+  EmptyStateLayout,
+} from '@strapi/design-system';
+import { Layouts } from '@strapi/strapi/admin';
+import { Plus, Pencil, Trash, User, Play } from '@strapi/icons';
+
+import { getTrad } from '../../constants';
+import useRealms from '../../hooks/useRealms';
+import pluginId from '../../pluginId';
+
+const RealmListPage = () => {
+  const { formatMessage } = useIntl();
+  const navigate = useNavigate();
+  const { realms, isLoading, remove, testConnection } = useRealms();
+
+  const [deleteId, setDeleteId] = useState(null);
+  const [testingId, setTestingId] = useState(null);
+  const [testResults, setTestResults] = useState({});
+
+  const handleDelete = async () => {
+    if (deleteId) {
+      await remove(deleteId);
+      setDeleteId(null);
+    }
+  };
+
+  const handleTest = async (id) => {
+    setTestingId(id);
+    const result = await testConnection(id);
+    setTestResults((prev) => ({ ...prev, [id]: result }));
+    setTestingId(null);
+  };
+
+  if (isLoading) {
+    return (
+      <Layouts.Root>
+        <Layouts.Content>
+          <Flex justifyContent="center" padding={8}>
+            <Loader />
+          </Flex>
+        </Layouts.Content>
+      </Layouts.Root>
+    );
+  }
+
+  return (
+    <Layouts.Root>
+      <Layouts.Header
+        title={formatMessage({ id: getTrad('realms.title'), defaultMessage: 'Keycloak Realms' })}
+        subtitle={formatMessage({
+          id: getTrad('realms.subtitle'),
+          defaultMessage: 'Configure Keycloak realm connections',
+        })}
+        primaryAction={
+          <Button startIcon={<Plus />} onClick={() => navigate(`/settings/${pluginId}/realms/create`)}>
+            {formatMessage({ id: getTrad('realms.create'), defaultMessage: 'Add Realm' })}
+          </Button>
+        }
+      />
+
+      <Layouts.Content>
+        {realms.length === 0 ? (
+          <EmptyStateLayout
+            icon={<User width="10rem" height="10rem" />}
+            content={formatMessage({
+              id: getTrad('realms.empty.description'),
+              defaultMessage: 'Add your first Keycloak realm to start managing users.',
+            })}
+            action={
+              <Button
+                variant="secondary"
+                startIcon={<Plus />}
+                onClick={() => navigate(`/settings/${pluginId}/realms/create`)}
+              >
+                {formatMessage({ id: getTrad('realms.create'), defaultMessage: 'Add Realm' })}
+              </Button>
+            }
+          />
+        ) : (
+          <Table colCount={6} rowCount={realms.length + 1}>
+            <Thead>
+              <Tr>
+                <Th>
+                  <Typography variant="sigma">
+                    {formatMessage({ id: getTrad('realm.displayName'), defaultMessage: 'Display Name' })}
+                  </Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma">
+                    {formatMessage({ id: getTrad('realm.name'), defaultMessage: 'Name' })}
+                  </Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma">
+                    {formatMessage({ id: getTrad('realm.realmName'), defaultMessage: 'Realm Name' })}
+                  </Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma">
+                    {formatMessage({ id: getTrad('realm.enabled'), defaultMessage: 'Enabled' })}
+                  </Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma">Status</Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma">Actions</Typography>
+                </Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {realms.map((realm) => (
+                <Tr key={realm.documentId}>
+                  <Td>
+                    <Flex alignItems="center" gap={2}>
+                      <Box
+                        width="12px"
+                        height="12px"
+                        borderRadius="50%"
+                        background={realm.color || 'primary600'}
+                      />
+                      <Typography textColor="neutral800" fontWeight="bold">
+                        {realm.displayName}
+                      </Typography>
+                    </Flex>
+                  </Td>
+                  <Td>
+                    <Typography textColor="neutral600">{realm.name}</Typography>
+                  </Td>
+                  <Td>
+                    <Typography textColor="neutral600">{realm.realmName}</Typography>
+                  </Td>
+                  <Td>
+                    <Badge backgroundColor={realm.enabled ? 'success100' : 'neutral150'}>
+                      {realm.enabled ? 'Enabled' : 'Disabled'}
+                    </Badge>
+                  </Td>
+                  <Td>
+                    {testResults[realm.documentId] ? (
+                      <Badge
+                        backgroundColor={testResults[realm.documentId].success ? 'success100' : 'danger100'}
+                      >
+                        {testResults[realm.documentId].success ? 'Connected' : 'Failed'}
+                      </Badge>
+                    ) : (
+                      <Typography textColor="neutral400">-</Typography>
+                    )}
+                  </Td>
+                  <Td>
+                    <Flex gap={1}>
+                      <IconButton
+                        withTooltip={false}
+                        label="Test Connection"
+                        onClick={() => handleTest(realm.documentId)}
+                        loading={testingId === realm.documentId}
+                      >
+                        <Play />
+                      </IconButton>
+                      <IconButton
+                        withTooltip={false}
+                        label="Manage Users"
+                        onClick={() => navigate(`/settings/${pluginId}/realms/${realm.documentId}/users`)}
+                      >
+                        <User />
+                      </IconButton>
+                      <IconButton
+                        withTooltip={false}
+                        label="Edit"
+                        onClick={() => navigate(`/settings/${pluginId}/realms/${realm.documentId}`)}
+                      >
+                        <Pencil />
+                      </IconButton>
+                      <IconButton
+                        withTooltip={false}
+                        label="Delete"
+                        onClick={() => setDeleteId(realm.documentId)}
+                      >
+                        <Trash />
+                      </IconButton>
+                    </Flex>
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        )}
+      </Layouts.Content>
+
+      <Dialog.Root open={!!deleteId} onOpenChange={() => setDeleteId(null)}>
+        <Dialog.Content>
+          <Dialog.Header>Delete Realm</Dialog.Header>
+          <Dialog.Body>
+            {formatMessage({
+              id: getTrad('realm.delete.confirm'),
+              defaultMessage: 'Are you sure you want to delete this realm configuration?',
+            })}
+          </Dialog.Body>
+          <Dialog.Footer>
+            <Dialog.Cancel>
+              <Button variant="tertiary">Cancel</Button>
+            </Dialog.Cancel>
+            <Dialog.Action>
+              <Button variant="danger-light" onClick={handleDelete}>
+                Delete
+              </Button>
+            </Dialog.Action>
+          </Dialog.Footer>
+        </Dialog.Content>
+      </Dialog.Root>
+    </Layouts.Root>
+  );
+};
+
+export default RealmListPage;

package/admin/src/pages/RealmsPage/index.jsx

@@ -0,0 +1,7 @@
+import RealmListPage from './RealmListPage';
+import RealmEditPage from './RealmEditPage';
+
+export default {
+  List: RealmListPage,
+  Edit: RealmEditPage,
+};

package/admin/src/pages/UsersPage/UserEditPage.jsx

@@ -0,0 +1,313 @@
+import { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useIntl } from 'react-intl';
+import {
+  Button,
+  Box,
+  Grid,
+  TextInput,
+  Toggle,
+  Typography,
+  Flex,
+  Loader,
+  MultiSelect,
+  MultiSelectOption,
+  Field,
+} from '@strapi/design-system';
+import { Layouts } from '@strapi/strapi/admin';
+import { ArrowLeft, Check } from '@strapi/icons';
+
+import { getTrad } from '../../constants';
+import useRealms from '../../hooks/useRealms';
+import useKeycloakUsers from '../../hooks/useKeycloakUsers';
+import useKeycloakRoles from '../../hooks/useKeycloakRoles';
+import pluginId from '../../pluginId';
+
+const UserEditPage = () => {
+  const { realmId, userId } = useParams();
+  const navigate = useNavigate();
+  const { formatMessage } = useIntl();
+
+  const { fetchOne: fetchRealm } = useRealms();
+  const { getUser, createUser, updateUser } = useKeycloakUsers(realmId);
+  const { roles, getUserRoles, assignRoles, removeRoles } = useKeycloakRoles(realmId);
+
+  const isEditMode = !!userId;
+
+  const [realm, setRealm] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [formData, setFormData] = useState({
+    username: '',
+    email: '',
+    firstName: '',
+    lastName: '',
+    enabled: true,
+    emailVerified: false,
+  });
+  const [selectedRoles, setSelectedRoles] = useState([]);
+  const [originalRoles, setOriginalRoles] = useState([]);
+  const [errors, setErrors] = useState({});
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        const realmData = await fetchRealm(realmId);
+        setRealm(realmData);
+
+        if (isEditMode) {
+          const [userData, userRoles] = await Promise.all([
+            getUser(userId),
+            getUserRoles(userId),
+          ]);
+
+          setFormData({
+            username: userData.username || '',
+            email: userData.email || '',
+            firstName: userData.firstName || '',
+            lastName: userData.lastName || '',
+            enabled: userData.enabled !== false,
+            emailVerified: userData.emailVerified === true,
+          });
+
+          const roleNames = userRoles.map((r) => r.name);
+          setSelectedRoles(roleNames);
+          setOriginalRoles(roleNames);
+        }
+      } catch {
+        navigate(`/settings/${pluginId}/realms/${realmId}/users`);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadData();
+  }, [realmId, userId, isEditMode, fetchRealm, getUser, getUserRoles, navigate]);
+
+  const handleChange = (field) => (e) => {
+    const value = e.target ? e.target.value : e;
+    setFormData((prev) => ({ ...prev, [field]: value }));
+    setErrors((prev) => ({ ...prev, [field]: null }));
+  };
+
+  const handleToggle = (field) => () => {
+    setFormData((prev) => ({ ...prev, [field]: !prev[field] }));
+  };
+
+  const validate = () => {
+    const newErrors = {};
+
+    if (!formData.username) {
+      newErrors.username = 'Username is required';
+    }
+
+    if (formData.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+      newErrors.email = 'Invalid email format';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async () => {
+    if (!validate()) return;
+
+    setIsSaving(true);
+
+    try {
+      if (isEditMode) {
+        await updateUser(userId, formData);
+
+        const rolesToAssign = selectedRoles.filter((r) => !originalRoles.includes(r));
+        const rolesToRemove = originalRoles.filter((r) => !selectedRoles.includes(r));
+
+        if (rolesToAssign.length > 0) {
+          const roleObjects = roles
+            .filter((r) => rolesToAssign.includes(r.name))
+            .map((r) => ({ id: r.id, name: r.name }));
+          await assignRoles(userId, roleObjects);
+        }
+
+        if (rolesToRemove.length > 0) {
+          const roleObjects = roles
+            .filter((r) => rolesToRemove.includes(r.name))
+            .map((r) => ({ id: r.id, name: r.name }));
+          await removeRoles(userId, roleObjects);
+        }
+      } else {
+        const newUser = await createUser(formData);
+
+        if (selectedRoles.length > 0 && newUser?.id) {
+          const roleObjects = roles
+            .filter((r) => selectedRoles.includes(r.name))
+            .map((r) => ({ id: r.id, name: r.name }));
+          await assignRoles(newUser.id, roleObjects);
+        }
+      }
+
+      navigate(`/settings/${pluginId}/realms/${realmId}/users`);
+    } catch {
+      // Error handled by hook
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <Layouts.Root>
+        <Layouts.Content>
+          <Flex justifyContent="center" padding={8}>
+            <Loader />
+          </Flex>
+        </Layouts.Content>
+      </Layouts.Root>
+    );
+  }
+
+  return (
+    <Layouts.Root>
+      <Layouts.Header
+        title={isEditMode ? 'Edit User' : 'Create User'}
+        subtitle={
+          <Flex alignItems="center" gap={2}>
+            <Box
+              width="12px"
+              height="12px"
+              borderRadius="50%"
+              background={realm?.color || 'primary600'}
+            />
+            <Typography textColor="neutral600">{realm?.displayName}</Typography>
+          </Flex>
+        }
+        navigationAction={
+          <Button
+            startIcon={<ArrowLeft />}
+            variant="ghost"
+            onClick={() => navigate(`/settings/${pluginId}/realms/${realmId}/users`)}
+          >
+            {formatMessage({ id: getTrad('common.back'), defaultMessage: 'Back' })}
+          </Button>
+        }
+        primaryAction={
+          <Button startIcon={<Check />} onClick={handleSubmit} loading={isSaving}>
+            {formatMessage({ id: getTrad('common.save'), defaultMessage: 'Save' })}
+          </Button>
+        }
+      />
+
+      <Layouts.Content>
+        <Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
+          <Grid.Root gap={4}>
+            <Grid.Item col={6} s={12}>
+              <Field.Root error={errors.username}>
+                <Field.Label required>
+                  {formatMessage({ id: getTrad('user.username'), defaultMessage: 'Username' })}
+                </Field.Label>
+                <TextInput
+                  name="username"
+                  value={formData.username}
+                  onChange={handleChange('username')}
+                  disabled={isEditMode}
+                />
+                <Field.Error />
+              </Field.Root>
+            </Grid.Item>
+
+            <Grid.Item col={6} s={12}>
+              <Field.Root error={errors.email}>
+                <Field.Label>
+                  {formatMessage({ id: getTrad('user.email'), defaultMessage: 'Email' })}
+                </Field.Label>
+                <TextInput
+                  name="email"
+                  type="email"
+                  value={formData.email}
+                  onChange={handleChange('email')}
+                />
+                <Field.Error />
+              </Field.Root>
+            </Grid.Item>
+
+            <Grid.Item col={6} s={12}>
+              <Field.Root>
+                <Field.Label>
+                  {formatMessage({ id: getTrad('user.firstName'), defaultMessage: 'First Name' })}
+                </Field.Label>
+                <TextInput
+                  name="firstName"
+                  value={formData.firstName}
+                  onChange={handleChange('firstName')}
+                />
+              </Field.Root>
+            </Grid.Item>
+
+            <Grid.Item col={6} s={12}>
+              <Field.Root>
+                <Field.Label>
+                  {formatMessage({ id: getTrad('user.lastName'), defaultMessage: 'Last Name' })}
+                </Field.Label>
+                <TextInput
+                  name="lastName"
+                  value={formData.lastName}
+                  onChange={handleChange('lastName')}
+                />
+              </Field.Root>
+            </Grid.Item>
+
+            <Grid.Item col={6} s={12}>
+              <Flex direction="column" gap={1}>
+                <Typography variant="pi" fontWeight="bold">
+                  {formatMessage({ id: getTrad('user.enabled'), defaultMessage: 'Enabled' })}
+                </Typography>
+                <Toggle
+                  checked={formData.enabled}
+                  onChange={handleToggle('enabled')}
+                  onLabel="Yes"
+                  offLabel="No"
+                />
+              </Flex>
+            </Grid.Item>
+
+            <Grid.Item col={6} s={12}>
+              <Flex direction="column" gap={1}>
+                <Typography variant="pi" fontWeight="bold">
+                  {formatMessage({ id: getTrad('user.emailVerified'), defaultMessage: 'Email Verified' })}
+                </Typography>
+                <Toggle
+                  checked={formData.emailVerified}
+                  onChange={handleToggle('emailVerified')}
+                  onLabel="Yes"
+                  offLabel="No"
+                />
+              </Flex>
+            </Grid.Item>
+
+            {roles.length > 0 && (
+              <Grid.Item col={12}>
+                <Field.Root>
+                  <Field.Label>
+                    {formatMessage({ id: getTrad('user.roles'), defaultMessage: 'Roles' })}
+                  </Field.Label>
+                  <MultiSelect
+                    value={selectedRoles}
+                    onChange={setSelectedRoles}
+                    placeholder="Select roles..."
+                  >
+                    {roles.map((role) => (
+                      <MultiSelectOption key={role.id} value={role.name}>
+                        {role.name}
+                      </MultiSelectOption>
+                    ))}
+                  </MultiSelect>
+                </Field.Root>
+              </Grid.Item>
+            )}
+          </Grid.Root>
+        </Box>
+      </Layouts.Content>
+    </Layouts.Root>
+  );
+};
+
+export default UserEditPage;