@rebasepro/app 0.0.1-canary.4829d6e

package/src/components/UserSettingsView.tsx

@@ -0,0 +1,318 @@
+
+import React, { useEffect, useState } from "react";
+import {
+    Avatar,
+    Button,
+    Card,
+    Chip,
+    CircularProgress,
+    cls,
+    IconButton,
+    Tab,
+    Tabs,
+    TextField,
+    Trash2Icon,
+    Typography
+} from "@rebasepro/ui";
+import { useAuthController, useTranslation } from "../hooks";
+
+interface SessionInfo {
+    id: string;
+    userAgent?: string;
+    ipAddress?: string;
+    createdAt: string;
+    isCurrentSession?: boolean;
+}
+
+interface ExtendedAuthController {
+    user: { displayName?: string | null; photoURL?: string | null; email?: string | null } | null;
+    updateProfile?: (displayName: string, photoURL: string) => Promise<void>;
+    changePassword?: (oldPassword: string, newPassword: string) => Promise<void>;
+    fetchSessions?: () => Promise<SessionInfo[]>;
+    revokeSession?: (id: string) => Promise<void>;
+    revokeAllSessions?: () => Promise<void>;
+    signOut: () => Promise<void>;
+}
+
+type ActiveTab = "profile" | "security" | "sessions";
+
+export function UserSettingsView() {
+    const authController = useAuthController() as ExtendedAuthController;
+    const user = authController.user;
+    const { t } = useTranslation();
+
+    const hasPasswordChange = !!authController.changePassword;
+    const [activeTab, setActiveTab] = useState<ActiveTab>("profile");
+
+    // Profile state
+    const [displayName, setDisplayName] = useState(user?.displayName || "");
+    const [photoURL, setPhotoURL] = useState(user?.photoURL || "");
+    const [savingProfile, setSavingProfile] = useState(false);
+    const [profileError, setProfileError] = useState<string | null>(null);
+
+    // Password change state
+    const [currentPassword, setCurrentPassword] = useState("");
+    const [newPassword, setNewPassword] = useState("");
+    const [confirmPassword, setConfirmPassword] = useState("");
+    const [changingPassword, setChangingPassword] = useState(false);
+    const [passwordError, setPasswordError] = useState<string | null>(null);
+    const [passwordSuccess, setPasswordSuccess] = useState<string | null>(null);
+
+    // Sessions state
+    const [sessions, setSessions] = useState<SessionInfo[]>([]);
+    const [loadingSessions, setLoadingSessions] = useState(false);
+    const [sessionsError, setSessionsError] = useState<string | null>(null);
+    const [revokingSessionId, setRevokingSessionId] = useState<string | null>(null);
+    const [revokingAll, setRevokingAll] = useState(false);
+
+    useEffect(() => {
+        setDisplayName(user?.displayName || "");
+        setPhotoURL(user?.photoURL || "");
+        if (activeTab === "sessions") {
+            loadSessions();
+        }
+    }, [activeTab, user]);
+
+    const handleSaveProfile = async () => {
+        setSavingProfile(true);
+        setProfileError(null);
+        try {
+            if (authController.updateProfile) {
+                await authController.updateProfile(displayName, photoURL);
+            } else {
+                throw new Error("updateProfile not implemented in this auth controller.");
+            }
+        } catch (e: unknown) {
+            setProfileError(e instanceof Error ? e.message : String(e));
+        } finally {
+            setSavingProfile(false);
+        }
+    };
+
+    const handleChangePassword = async () => {
+        setPasswordError(null);
+        setPasswordSuccess(null);
+
+        // Validate
+        if (newPassword.length < 8) {
+            setPasswordError(t("password_too_short"));
+            return;
+        }
+        if (newPassword !== confirmPassword) {
+            setPasswordError(t("passwords_dont_match"));
+            return;
+        }
+
+        setChangingPassword(true);
+        try {
+            if (authController.changePassword) {
+                await authController.changePassword(currentPassword, newPassword);
+                setPasswordSuccess(t("password_changed"));
+                setCurrentPassword("");
+                setNewPassword("");
+                setConfirmPassword("");
+                // Backend invalidates all sessions on password change,
+                // so the user will be logged out shortly
+                setTimeout(() => {
+                    authController.signOut();
+                }, 2000);
+            }
+        } catch (e: unknown) {
+            setPasswordError(e instanceof Error ? e.message : String(e));
+        } finally {
+            setChangingPassword(false);
+        }
+    };
+
+    const loadSessions = async () => {
+        setLoadingSessions(true);
+        setSessionsError(null);
+        try {
+            if (authController.fetchSessions) {
+                const fetchedSessions = await authController.fetchSessions();
+                const sortedSessions = (fetchedSessions || []).sort((a: SessionInfo, b: SessionInfo) =>
+                    new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+                );
+                setSessions(sortedSessions);
+            } else {
+                throw new Error("fetchSessions not implemented in this auth controller.");
+            }
+        } catch (e: unknown) {
+            setSessionsError(e instanceof Error ? e.message : String(e));
+        } finally {
+            setLoadingSessions(false);
+        }
+    };
+
+    const handleRevokeSession = async (id: string, isCurrentSession?: boolean) => {
+        setRevokingSessionId(id);
+        try {
+            if (authController.revokeSession) {
+                await authController.revokeSession(id);
+                setSessions(sessions.filter(s => s.id !== id));
+                if (isCurrentSession) {
+                    await authController.signOut();
+                }
+            } else {
+                throw new Error("revokeSession not implemented in this auth controller.");
+            }
+        } catch (e: unknown) {
+            setSessionsError(e instanceof Error ? e.message : String(e));
+        } finally {
+            setRevokingSessionId(null);
+        }
+    };
+
+    const handleRevokeAll = async () => {
+        setRevokingAll(true);
+        try {
+            if (authController.revokeAllSessions) {
+                await authController.revokeAllSessions();
+            } else {
+                throw new Error("revokeAllSessions not implemented in this auth controller.");
+            }
+        } catch (e: unknown) {
+            setSessionsError(e instanceof Error ? e.message : String(e));
+        } finally {
+            setRevokingAll(false);
+        }
+    };
+
+    if (!user) return null;
+
+    return (
+        <div className="flex-grow max-w-4xl w-full mx-auto p-4 sm:p-6 md:p-12">
+            <Typography variant="h4" className="mb-8">{t("account_settings")}</Typography>
+
+            <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as ActiveTab)} className="mb-8">
+                <Tab value="profile">{t("profile")}</Tab>
+                {hasPasswordChange && <Tab value="security">{t("security")}</Tab>}
+                <Tab value="sessions">{t("sessions")}</Tab>
+            </Tabs>
+
+            {activeTab === "profile" && (
+                <div className="flex flex-col gap-6 max-w-xl">
+                    <div className="flex items-center gap-6 mb-2">
+                        <Avatar src={photoURL || undefined} className="w-24 h-24 text-3xl">
+                            {displayName ? displayName[0].toUpperCase() : (user.email ? user.email[0].toUpperCase() : "A")}
+                        </Avatar>
+                    </div>
+                    <TextField
+                        label={t("display_name")}
+                        value={displayName}
+                        onChange={(e) => setDisplayName(e.target.value)}
+                    />
+                    <TextField
+                        label={t("photo_url")}
+                        value={photoURL}
+                        onChange={(e) => setPhotoURL(e.target.value)}
+                    />
+                    {profileError && <Typography color="error">{profileError}</Typography>}
+                    <div className="mt-4">
+                        <Button variant="filled" onClick={handleSaveProfile} disabled={savingProfile}>
+                            {savingProfile ? t("saving") : t("save_profile")}
+                        </Button>
+                    </div>
+                </div>
+            )}
+
+            {activeTab === "security" && hasPasswordChange && (
+                <div className="flex flex-col gap-6 max-w-xl">
+                    <Typography variant="h6" className="mb-2">{t("change_password")}</Typography>
+
+                    <TextField
+                        label={t("current_password")}
+                        type="password"
+                        value={currentPassword}
+                        onChange={(e) => setCurrentPassword(e.target.value)}
+                        autoComplete="current-password"
+                    />
+                    <TextField
+                        label={t("new_password")}
+                        type="password"
+                        value={newPassword}
+                        onChange={(e) => setNewPassword(e.target.value)}
+                        autoComplete="new-password"
+                    />
+                    <TextField
+                        label={t("confirm_password")}
+                        type="password"
+                        value={confirmPassword}
+                        onChange={(e) => setConfirmPassword(e.target.value)}
+                        autoComplete="new-password"
+                    />
+
+                    {passwordError && (
+                        <Typography color="error">{passwordError}</Typography>
+                    )}
+                    {passwordSuccess && (
+                        <Typography className="text-emerald-600 dark:text-emerald-400">{passwordSuccess}</Typography>
+                    )}
+
+                    <div className="mt-4">
+                        <Button
+                            variant="filled"
+                            onClick={handleChangePassword}
+                            disabled={changingPassword || !currentPassword || !newPassword || !confirmPassword}
+                        >
+                            {changingPassword ? t("changing_password") : t("change_password")}
+                        </Button>
+                    </div>
+                </div>
+            )}
+
+            {activeTab === "sessions" && (
+                <div className="flex flex-col gap-4 max-w-3xl">
+                    {loadingSessions ? (
+                        <div className="flex justify-center p-8"><CircularProgress/></div>
+                    ) : sessionsError ? (
+                        <Typography color="error">{sessionsError}</Typography>
+                    ) : sessions.length === 0 ? (
+                        <Typography>{t("no_active_sessions")}</Typography>
+                    ) : (
+                        <div className="flex flex-col gap-4">
+                            <div className="flex justify-end mb-2">
+                                <Button
+                                    variant="text"
+                                    color="error"
+                                    onClick={handleRevokeAll}
+                                    disabled={revokingAll}
+                                >
+                                    {revokingAll ? t("revoking") : t("revoke_all_sessions")}
+                                </Button>
+                            </div>
+                            {sessions.map(session => (
+                                <Card key={session.id} className="flex justify-between items-center p-4">
+                                    <div className="flex flex-col">
+                                        <div className="flex items-center gap-2 mb-1">
+                                            <Typography variant="body1">
+                                                {session.userAgent || t("unknown_device")}
+                                            </Typography>
+                                            {session.isCurrentSession && (
+                                                <Chip colorScheme="blue" size="small">
+                                                    {t("current")}
+                                                </Chip>
+                                            )}
+                                        </div>
+                                        <Typography variant="caption" color="secondary">
+                                            IP: {session.ipAddress || "Unknown"} • Created: {new Date(session.createdAt).toLocaleString()}
+                                        </Typography>
+                                    </div>
+                                    <div className="ml-4">
+                                        {revokingSessionId === session.id ? (
+                                            <CircularProgress size="small"/>
+                                        ) : (
+                                            <IconButton onClick={() => handleRevokeSession(session.id, session.isCurrentSession)} aria-label="Revoke Session">
+                                                <Trash2Icon/>
+                                            </IconButton>
+                                        )}
+                                    </div>
+                                </Card>
+                            ))}
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}

package/src/components/common/index.ts

@@ -0,0 +1,6 @@
+export * from "./types";
+export * from "./useDebouncedData";
+export * from "./useColumnsIds";
+export * from "./useDataTableController";
+export * from "./useScrollRestoration";
+export * from "./table_height";

package/src/components/common/table_height.tsx

@@ -0,0 +1,21 @@
+/**
+ * @group Components
+ */
+export type TableSize = "xs" | "s" | "m" | "l" | "xl";
+
+export function getRowHeight(size: TableSize): number {
+    switch (size) {
+        case "xl":
+            return 400;
+        case "l":
+            return 280;
+        case "m":
+            return 140;
+        case "s":
+            return 80;
+        case "xs":
+            return 54;
+        default:
+            throw Error("Missing mapping for collection size -> height");
+    }
+}

package/src/components/common/types.tsx

@@ -0,0 +1,66 @@
+import type { Property, Entity } from "@rebasepro/types";
+import { CollectionSize, SelectedCellProps } from "@rebasepro/types";
+
+export type DataCollectionTableController<M extends Record<string, unknown>> = {
+
+    /**
+     * This cell is displayed as selected
+     */
+    selectedCell?: SelectedCellProps;
+    /**
+     * Store used to sync selection state across cells efficiently.
+     */
+    selectionStore?: { getEntity: () => SelectedCellProps | undefined; subscribe: (cb: () => void) => () => void };
+    /**
+     * Select a table cell
+     * @param cell
+     */
+    select: (cell?: SelectedCellProps<M>) => void;
+    /**
+     * The cell that is displayed as a popup view.
+     * @param cell
+     */
+    setPopupCell?: (cell?: SelectedCellProps<M>) => void;
+    /**
+     * Callback used when the value of a cell has changed.
+     * @param params
+     */
+    onValueChange?: (params: OnCellValueChangeParams<unknown, Entity<M>>) => void;
+    /**
+     * Size of the elements in the collection
+     */
+    size: CollectionSize;
+}
+
+/**
+ * Props passed in a callback when the content of a cell in a table has been edited
+ * @group Collection components
+ */
+export interface OnCellValueChangeParams<T = unknown, D = unknown> {
+    value: T,
+    propertyKey: string,
+    data?: D,
+    onValueUpdated: () => void
+    setError: (e: Error | undefined) => void
+}
+
+/**
+ * @group Collection components
+ */
+export type UniqueFieldValidator = (props: {
+    name: string,
+    value: unknown,
+    property: Property,
+    entityId?: string | number
+}) => Promise<boolean>;
+
+/**
+ * Callback when a cell has changed in a table
+ * @group Collection components
+ */
+export type OnCellValueChange<T, M extends Record<string, unknown>> = (params: OnCellValueChangeParams<T, Entity<M>>) => Promise<void> | void;
+
+/**
+ * @group Collection components
+ */
+export type OnColumnResizeParams = { width: number, key: string };

package/src/components/common/useColumnsIds.tsx

@@ -0,0 +1,222 @@
+import type { CollectionConfig, Property, MapProperty, Properties } from "@rebasepro/types";
+import { useMemo } from "react";
+;
+import { getSubcollections } from "@rebasepro/common";
+
+/**
+ * Get a property in a property tree from a dot-path like `address.street`.
+ * Inlined here to avoid importing property-aware utilities from the CMS layer.
+ */
+function getPropertyInPath(properties: Properties, path: string): Property | undefined {
+    if (typeof properties === "object") {
+        if (path in properties) {
+            return (properties as Record<string, Property>)[path];
+        }
+        if (path.includes(".")) {
+            const pathSegments = path.split(".");
+            const childProperty = (properties as Record<string, Property>)[pathSegments[0]];
+            if (typeof childProperty === "object" && childProperty.type === "map" && childProperty.properties) {
+                return getPropertyInPath(childProperty.properties, pathSegments.slice(1).join("."));
+            }
+        }
+    }
+    return undefined;
+}
+
+export type PropertyColumnConfig = {
+    key: string;
+    disabled: boolean;
+};
+
+export function getSubcollectionColumnId(collection: CollectionConfig<any>) {
+    return `subcollection:${collection.slug}`;
+}
+export function useColumnIds<M extends Record<string, any>>(collection: CollectionConfig<M>, includeSubcollections: boolean): PropertyColumnConfig[] {
+    return useMemo(() => {
+        if (collection.propertiesOrder) {
+            return hideAndExpandKeys(collection, collection.propertiesOrder);
+        }
+        return getDefaultColumnKeys(collection, includeSubcollections);
+    }, [collection, includeSubcollections]);
+}
+
+function hideAndExpandKeys<M extends Record<string, any>>(collection: CollectionConfig<M>, keys: string[]): PropertyColumnConfig[] {
+
+    // First, figure out which spread map roots have individual child keys in the order
+    // If so, we should NOT auto-expand them - just use the explicit child keys
+    const rootsWithExplicitChildren = new Set<string>();
+    for (const key of keys) {
+        if (key.includes(".")) {
+            const rootKey = key.split(".")[0];
+            const rootProperty = collection.properties[rootKey];
+            if (rootProperty && rootProperty.type === "map" && rootProperty.ui?.spreadChildren && rootProperty.properties) {
+                rootsWithExplicitChildren.add(rootKey);
+            }
+        }
+    }
+
+    // Track processed keys to avoid duplicates
+    const processedPropertyKeys = new Set<string>();
+
+    const result = keys.flatMap((key) => {
+        // Skip if already processed (handles duplicates in propertiesOrder)
+        if (processedPropertyKeys.has(key)) return [null];
+
+        // Check if it's a top-level property
+        const property = collection.properties[key];
+        if (property) {
+            processedPropertyKeys.add(key);
+            if (property.ui?.hideFromCollection)
+                return [null];
+            if (property.ui?.disabled && typeof property.ui?.disabled === "object" && property.ui?.disabled.hidden)
+                return [null];
+
+            if (property.type === "map" && property.ui?.spreadChildren && property.properties) {
+                // Check if this spread map has explicit child keys in propertiesOrder
+                if (rootsWithExplicitChildren.has(key)) {
+                    // DON'T auto-expand - the children are explicitly listed elsewhere
+                    return [null];
+                }
+                // Auto-expand all children
+                const childConfigs = getColumnKeysForProperty(property, key);
+                childConfigs.forEach(c => processedPropertyKeys.add(c.key));
+                return childConfigs;
+            }
+            return [{
+                key,
+                disabled: Boolean(property.ui?.disabled) || Boolean(property.ui?.readOnly)
+            }];
+        }
+
+        // Check if it's a nested key like "data.mode" (for spread map properties)
+        if (key.includes(".")) {
+            const rootKey = key.split(".")[0];
+            const rootProperty = collection.properties[rootKey];
+
+            if (rootProperty && rootProperty.type === "map" && rootProperty.properties) {
+                const nestedProperty = getPropertyInPath(collection.properties, key) as Property | undefined;
+                if (nestedProperty) {
+                    processedPropertyKeys.add(key);
+                    // Mark root as seen
+                    processedPropertyKeys.add(rootKey);
+
+                    if (nestedProperty.ui?.hideFromCollection)
+                        return [null];
+                    if (nestedProperty.ui?.disabled && typeof nestedProperty.ui?.disabled === "object" && nestedProperty.ui?.disabled.hidden)
+                        return [null];
+
+                    return [{
+                        key,
+                        disabled: Boolean(rootProperty.ui?.disabled) || Boolean(rootProperty.ui?.readOnly) ||
+                            Boolean(nestedProperty.ui?.disabled) || Boolean(nestedProperty.ui?.readOnly)
+                    }];
+                }
+            }
+        }
+
+        // Check additional fields
+        const additionalField = collection.additionalFields?.find(field => field.key === key);
+        if (additionalField) {
+            return [{
+                key,
+                disabled: true
+            }];
+        }
+
+        // Check subcollections
+        const subcollections = getSubcollections(collection);
+        if (subcollections) {
+            const subCollection = subcollections
+                .find(subCol => getSubcollectionColumnId(subCol) === key);
+            if (subCollection) {
+                return [{
+                    key,
+                    disabled: true
+                }];
+            }
+        }
+
+        return [null];
+    }).filter(Boolean) as PropertyColumnConfig[];
+
+    // Add any missing properties that weren't in propertiesOrder
+    // This ensures properties NEVER disappear
+    for (const propKey of Object.keys(collection.properties)) {
+        // Skip if already processed
+        if (processedPropertyKeys.has(propKey)) continue;
+
+        const property = collection.properties[propKey];
+        if (!property) continue;
+        if (property.ui?.hideFromCollection) continue;
+        if (property.ui?.disabled && typeof property.ui?.disabled === "object" && property.ui?.disabled.hidden) continue;
+
+        if (property.type === "map" && property.ui?.spreadChildren && property.properties) {
+            // For spread maps, add all children that weren't already added
+            const allChildConfigs = getColumnKeysForProperty(property as MapProperty, propKey);
+            for (const childConfig of allChildConfigs) {
+                if (!processedPropertyKeys.has(childConfig.key)) {
+                    result.push(childConfig);
+                    processedPropertyKeys.add(childConfig.key);
+                }
+            }
+        } else {
+            result.push({
+                key: propKey,
+                disabled: Boolean(property.ui?.disabled) || Boolean(property.ui?.readOnly)
+            });
+            processedPropertyKeys.add(propKey);
+        }
+    }
+
+    return result;
+}
+
+function getDefaultColumnKeys<M extends Record<string, any> = any>(collection: CollectionConfig<M>, includeSubCollections: boolean) {
+    const propertyKeys = Object.keys(collection.properties);
+
+    const additionalFields = collection.additionalFields ?? [];
+    const subCollections: CollectionConfig[] = getSubcollections(collection) ?? [];
+
+    const columnIds: string[] = [
+        ...propertyKeys,
+        // Filter out additional fields whose key already exists in propertyKeys to avoid duplicate column keys
+        ...additionalFields.filter((field) => !propertyKeys.includes(field.key)).map((field) => field.key)
+    ];
+
+    if (includeSubCollections) {
+        const subCollectionIds = subCollections
+            .map((collection) => getSubcollectionColumnId(collection));
+        columnIds.push(...subCollectionIds.filter((subColId) => !columnIds.includes(subColId)));
+    }
+
+    return hideAndExpandKeys(collection, columnIds);
+}
+
+export function getColumnKeysForProperty(property: Property, key: string, disabled?: boolean): PropertyColumnConfig[] {
+    if (property.type === "map" && property.ui?.spreadChildren && property.properties) {
+        return Object.entries(property.properties)
+            .flatMap(([childKey, childProperty]) => getColumnKeysForProperty(
+                childProperty as Readonly<Property>,
+                `${key}.${childKey}`,
+                disabled || Boolean(property.ui?.disabled) || Boolean(property.ui?.readOnly))
+            );
+    }
+    return [{
+        key,
+        disabled: disabled || Boolean(property.ui?.disabled) || Boolean(property.ui?.readOnly)
+    }];
+}
+
+export function getFormFieldKeys(collection: CollectionConfig): string[] {
+    const propertyKeys = collection.properties ? Object.keys(collection.properties) : [];
+    const additionalFields = collection.additionalFields ?? [];
+    const allKeys = [
+        ...propertyKeys,
+        ...additionalFields.map((field) => field.key)
+    ];
+
+    if (collection.propertiesOrder) {
+        return collection.propertiesOrder.filter(key => allKeys.includes(key));
+    }
+    return allKeys;
+}