@robosystems/core 0.6.2 → 0.6.3

package/auth-components/AuthProvider.d.ts

@@ -6,4 +6,11 @@ interface AuthProviderProps {
 }
 export declare function AuthProvider({ children, apiUrl, }: AuthProviderProps): import("react").JSX.Element;
 export declare function useAuth(): AuthContextType;
+/**
+ * Like `useAuth`, but returns `null` outside an `AuthProvider` instead of
+ * throwing. For components that integrate with auth when it is present but must
+ * still render without it — design-system previews and isolated component tests
+ * mount components with no provider around them.
+ */
+export declare function useOptionalAuth(): AuthContextType | null;
 export {};

package/auth-components/AuthProvider.js

@@ -562,3 +562,12 @@ export function useAuth() {
     }
     return context;
 }
+/**
+ * Like `useAuth`, but returns `null` outside an `AuthProvider` instead of
+ * throwing. For components that integrate with auth when it is present but must
+ * still render without it — design-system previews and isolated component tests
+ * mount components with no provider around them.
+ */
+export function useOptionalAuth() {
+    return useContext(AuthContext);
+}

package/auth-components/SignInForm.d.ts

@@ -17,4 +17,10 @@ export interface SignInFormProps {
  * auth body) stays "Invalid email or password"; 5xx gets its own message.
  */
 export declare function loginErrorMessage(error: unknown): string;
+/**
+ * Messages for the `?reason=` a redirect into the login page can carry. The
+ * producer is `AuthProvider`'s `logout(reason)`, which sends the user to
+ * `/login?reason=<reason>`; without this the redirect arrives unexplained.
+ */
+export declare const SIGN_IN_NOTICES: Record<string, string>;
 export declare function SignInForm({ onSuccess, onRedirect, redirectTo, className, apiUrl, enableSSO, currentApp, }: SignInFormProps): React.JSX.Element;

package/auth-components/SignInForm.js

@@ -26,6 +26,16 @@ export function loginErrorMessage(error) {
     }
     return 'Invalid email or password';
 }
+/**
+ * Messages for the `?reason=` a redirect into the login page can carry. The
+ * producer is `AuthProvider`'s `logout(reason)`, which sends the user to
+ * `/login?reason=<reason>`; without this the redirect arrives unexplained.
+ */
+export const SIGN_IN_NOTICES = {
+    password_changed: 'Your password was updated. Please sign in with your new password.',
+    session_expired: 'Your session expired. Please sign in again.',
+    session_invalid: 'Your session is no longer valid. Please sign in again.',
+};
 export function SignInForm({ onSuccess, onRedirect, redirectTo = '/home', className = '', apiUrl, enableSSO = true, currentApp, }) {
     const [formData, setFormData] = useState({
         email: '',
@@ -35,6 +45,17 @@ export function SignInForm({ onSuccess, onRedirect, redirectTo = '/home', classN
     const [error, setError] = useState('');
     const [ssoChecking, setSSOChecking] = useState(enableSSO);
     const [redirecting, setRedirecting] = useState(false);
+    const [notice, setNotice] = useState('');
+    // Read via window.location rather than useSearchParams(): the latter forces
+    // the consuming app to wrap this component in a Suspense boundary during
+    // static prerender, and the login pages render it bare. Runs before the SSO
+    // effect below, which strips its own params from the URL.
+    useEffect(() => {
+        const reason = new URLSearchParams(window.location.search).get('reason');
+        if (reason && SIGN_IN_NOTICES[reason]) {
+            setNotice(SIGN_IN_NOTICES[reason]);
+        }
+    }, []);
     const authClient = useMemo(() => new RoboSystemsAuthClient(apiUrl), [apiUrl]);
     const { checkSSOAuthentication, handleSSOLogin } = useSSO(apiUrl);
     // Check for existing authentication or SSO login on mount
@@ -131,7 +152,7 @@ export function SignInForm({ onSuccess, onRedirect, redirectTo = '/home', classN
     if (ssoChecking || redirecting) {
         return (_jsx("div", { className: "via-primary-950 flex min-h-screen items-center justify-center bg-linear-to-br from-black to-zinc-900 p-6", children: _jsx("div", { className: "w-full max-w-md", children: _jsxs("div", { className: "text-center", children: [_jsx(LogoBadge, { animate: "loop", className: "mx-auto h-16 w-16" }), _jsx("h1", { className: "font-heading mt-4 text-center text-2xl font-semibold tracking-tight text-white", children: appName })] }) }) }));
     }
-    return (_jsx("div", { className: "via-primary-950 flex min-h-screen items-center justify-center bg-linear-to-br from-black to-zinc-900 px-4 py-12 sm:px-6 lg:px-8", children: _jsxs("div", { className: "w-full max-w-lg space-y-8", children: [_jsxs("div", { className: "text-center", children: [_jsx(LogoBadge, { animate: "once", className: "mx-auto h-14 w-14" }), _jsx("h1", { className: "font-heading mt-4 text-center text-2xl font-semibold tracking-tight text-white", children: appName }), _jsx("h2", { className: "mt-2 text-center text-xl font-semibold tracking-tight text-gray-300", children: "Sign in to your account" })] }), _jsxs("form", { className: ['mt-8 space-y-6', className].filter(Boolean).join(' '), onSubmit: handleSubmit, children: [error && (_jsx("div", { className: "rounded-md border border-red-800 bg-red-900/50 p-4", children: _jsx("div", { className: "text-sm text-red-300", children: error }) })), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "email", className: "sr-only", children: "Email address" }), _jsx("input", { id: "email", name: "email", type: "email", autoComplete: "email", required: true, value: formData.email, onChange: handleInputChange, className: "focus:ring-primary-500 relative block w-full rounded-md border-0 bg-gray-800 px-5 py-4 text-base leading-7 text-white ring-1 ring-gray-600 ring-inset placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset", placeholder: "Email address", disabled: loading || redirecting })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "password", className: "sr-only", children: "Password" }), _jsx("input", { id: "password", name: "password", type: "password", autoComplete: "current-password", required: true, value: formData.password, onChange: handleInputChange, className: "focus:ring-primary-500 relative block w-full rounded-md border-0 bg-gray-800 px-5 py-4 text-base leading-7 text-white ring-1 ring-gray-600 ring-inset placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset", placeholder: "Password", disabled: loading || redirecting })] })] }), _jsx("div", { children: _jsxs("button", { type: "submit", disabled: loading || redirecting, className: "group bg-primary-600 hover:bg-primary-700 focus-visible:outline-primary-500 relative flex w-full justify-center rounded-md px-4 py-3 text-sm font-semibold text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid disabled:cursor-not-allowed disabled:opacity-50", children: [loading && _jsx(Spinner, { size: "sm", className: "mr-2 text-white" }), redirecting
+    return (_jsx("div", { className: "via-primary-950 flex min-h-screen items-center justify-center bg-linear-to-br from-black to-zinc-900 px-4 py-12 sm:px-6 lg:px-8", children: _jsxs("div", { className: "w-full max-w-lg space-y-8", children: [_jsxs("div", { className: "text-center", children: [_jsx(LogoBadge, { animate: "once", className: "mx-auto h-14 w-14" }), _jsx("h1", { className: "font-heading mt-4 text-center text-2xl font-semibold tracking-tight text-white", children: appName }), _jsx("h2", { className: "mt-2 text-center text-xl font-semibold tracking-tight text-gray-300", children: "Sign in to your account" })] }), _jsxs("form", { className: ['mt-8 space-y-6', className].filter(Boolean).join(' '), onSubmit: handleSubmit, children: [error && (_jsx("div", { className: "rounded-md border border-red-800 bg-red-900/50 p-4", children: _jsx("div", { className: "text-sm text-red-300", children: error }) })), notice && !error && (_jsx("div", { className: "border-primary-800 bg-primary-900/50 rounded-md border p-4", children: _jsx("div", { className: "text-primary-200 text-sm", children: notice }) })), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "email", className: "sr-only", children: "Email address" }), _jsx("input", { id: "email", name: "email", type: "email", autoComplete: "email", required: true, value: formData.email, onChange: handleInputChange, className: "focus:ring-primary-500 relative block w-full rounded-md border-0 bg-gray-800 px-5 py-4 text-base leading-7 text-white ring-1 ring-gray-600 ring-inset placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset", placeholder: "Email address", disabled: loading || redirecting })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "password", className: "sr-only", children: "Password" }), _jsx("input", { id: "password", name: "password", type: "password", autoComplete: "current-password", required: true, value: formData.password, onChange: handleInputChange, className: "focus:ring-primary-500 relative block w-full rounded-md border-0 bg-gray-800 px-5 py-4 text-base leading-7 text-white ring-1 ring-gray-600 ring-inset placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset", placeholder: "Password", disabled: loading || redirecting })] })] }), _jsx("div", { children: _jsxs("button", { type: "submit", disabled: loading || redirecting, className: "group bg-primary-600 hover:bg-primary-700 focus-visible:outline-primary-500 relative flex w-full justify-center rounded-md px-4 py-3 text-sm font-semibold text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid disabled:cursor-not-allowed disabled:opacity-50", children: [loading && _jsx(Spinner, { size: "sm", className: "mr-2 text-white" }), redirecting
                                         ? 'Redirecting...'
                                         : loading
                                             ? 'Signing in...'

package/auth-components/index.d.ts

@@ -1,6 +1,6 @@
 export { AppSwitcher } from './AppSwitcher';
 export { AuthGuard } from './AuthGuard';
-export { AuthProvider, useAuth } from './AuthProvider';
+export { AuthProvider, useAuth, useOptionalAuth } from './AuthProvider';
 export { SignInForm } from './SignInForm';
 export { SignUpForm } from './SignUpForm';
 export { TurnstileWidget, useTurnstile } from './TurnstileWidget';

package/auth-components/index.js

@@ -1,6 +1,6 @@
 export { AppSwitcher } from './AppSwitcher';
 export { AuthGuard } from './AuthGuard';
-export { AuthProvider, useAuth } from './AuthProvider';
+export { AuthProvider, useAuth, useOptionalAuth } from './AuthProvider';
 export { SignInForm } from './SignInForm';
 export { SignUpForm } from './SignUpForm';
 export { TurnstileWidget, useTurnstile } from './TurnstileWidget';

package/auth-core/types.d.ts

@@ -71,7 +71,7 @@ export interface AuthContextType {
     };
     login: (email: string, password: string) => Promise<AuthUser>;
     register: (email: string, password: string, name?: string) => Promise<AuthUser>;
-    logout: () => Promise<void>;
+    logout: (reason?: string) => Promise<void>;
     refreshUser: () => Promise<AuthUser | null>;
     refreshSession: (force?: boolean) => Promise<void>;
     forgotPassword: (email: string) => Promise<{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robosystems/core",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "Shared RoboSystems frontend core library (auth, contexts, task monitoring, UI components) for the RoboSystems Next.js apps",
   "license": "MIT",
   "private": false,

package/ui-components/settings/PasswordInformationCard.js

@@ -4,6 +4,8 @@ import * as SDK from '@robosystems/client';
 import { Button } from 'flowbite-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { HiLockClosed } from 'react-icons/hi';
+import { useOptionalAuth } from '../../auth-components/AuthProvider';
+import { ConfirmModal } from '../ConfirmModal';
 import { Spinner } from '../Spinner';
 import { SettingsCard } from '../forms/SettingsCard';
 import { SettingsFormField } from '../forms/SettingsFormField';
@@ -15,7 +17,10 @@ export const PasswordInformationCard = ({ theme, onUpdate = undefined, onSuccess
     const [newPassword, setNewPassword] = useState('');
     const [passwordStrength, setPasswordStrength] = useState(null);
     const [checkingPassword, setCheckingPassword] = useState(false);
+    const [pendingUpdate, setPendingUpdate] = useState(null);
     const debounceRef = useRef(null);
+    const formRef = useRef(null);
+    const auth = useOptionalAuth();
     const checkPassword = useCallback(async (password) => {
         if (password.length < 4) {
             setPasswordStrength(null);
@@ -57,8 +62,7 @@ export const PasswordInformationCard = ({ theme, onUpdate = undefined, onSuccess
                 clearTimeout(debounceRef.current);
         };
     }, [newPassword, checkPassword]);
-    const handleSubmit = async (event) => {
-        var _a, _b, _c;
+    const handleSubmit = (event) => {
         event.preventDefault();
         setError(null);
         setSuccess(false);
@@ -95,18 +99,25 @@ export const PasswordInformationCard = ({ theme, onUpdate = undefined, onSuccess
             }
             return;
         }
+        // A password change ends every session, this one included, so take an
+        // explicit confirmation before doing something the user can't walk back.
+        setPendingUpdate(updateData);
+    };
+    const handleConfirm = async () => {
+        var _a, _b, _c, _d;
+        if (!pendingUpdate)
+            return;
         setIsLoading(true);
-        const form = event.currentTarget;
         try {
             if (onUpdate) {
-                await onUpdate(updateData);
+                await onUpdate(pendingUpdate);
             }
             else {
                 const response = await SDK.updateUserPassword({
                     body: {
-                        current_password: updateData.currentPassword,
-                        new_password: updateData.newPassword,
-                        confirm_password: updateData.confirmPassword,
+                        current_password: pendingUpdate.currentPassword,
+                        new_password: pendingUpdate.newPassword,
+                        confirm_password: pendingUpdate.confirmPassword,
                     },
                 });
                 if (response.error) {
@@ -116,14 +127,28 @@ export const PasswordInformationCard = ({ theme, onUpdate = undefined, onSuccess
                     throw new Error(typeof detail === 'string' ? detail : 'Failed to update password.');
                 }
             }
+            setPendingUpdate(null);
             if (onSuccess) {
                 onSuccess('Password updated successfully.');
             }
             else {
                 setSuccess(true);
             }
+            // The server invalidates every session on a password change, so the token
+            // this app holds is already dead. Sign out deliberately instead of
+            // letting it fail on the next request as an unexplained error.
+            if (auth) {
+                try {
+                    await auth.logout('password_changed');
+                    return; // navigating away — leave the card as-is
+                }
+                catch (_e) {
+                    // The password did change; only the redirect failed. Fall through so
+                    // the card resets rather than sitting on a spinner.
+                }
+            }
             // Clear form fields and strength state
-            form.reset();
+            (_d = formRef.current) === null || _d === void 0 ? void 0 : _d.reset();
             setNewPassword('');
             setPasswordStrength(null);
             setTimeout(() => {
@@ -141,6 +166,7 @@ export const PasswordInformationCard = ({ theme, onUpdate = undefined, onSuccess
             else {
                 setError(msg);
             }
+            setPendingUpdate(null);
             setIsLoading(false);
         }
     };
@@ -162,6 +188,6 @@ export const PasswordInformationCard = ({ theme, onUpdate = undefined, onSuccess
                 : passwordStrength.score < 80
                     ? 'text-primary-300'
                     : 'text-green-400';
-    return (_jsxs(SettingsCard, { title: "Password information", description: "Update your password to keep your account secure", icon: HiLockClosed, theme: theme === null || theme === void 0 ? void 0 : theme.card, className: className, children: [_jsxs("div", { className: "space-y-4", children: [error && (_jsx(StatusAlert, { type: "error", message: error, theme: theme === null || theme === void 0 ? void 0 : theme.alert })), success && (_jsx(StatusAlert, { type: "success", message: "Password updated successfully.", theme: theme === null || theme === void 0 ? void 0 : theme.alert }))] }), _jsx("form", { onSubmit: handleSubmit, children: _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "grid gap-4 md:grid-cols-2", children: _jsx(SettingsFormField, { id: "currentPassword", label: "Current password", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", theme: theme }) }), _jsxs("div", { className: "grid items-start gap-4 md:grid-cols-2", children: [_jsxs("div", { children: [_jsx(SettingsFormField, { id: "newPassword", label: "New password", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", theme: theme, onChange: (e) => setNewPassword(e.target.value) }), _jsx("div", { className: "mt-2 min-h-[2.75rem]", children: passwordStrength && (_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-1.5 flex-1 overflow-hidden rounded-full bg-gray-700", children: _jsx("div", { className: `h-full rounded-full transition-all duration-300 ${strengthBarColor}`, style: { width: `${passwordStrength.score}%` } }) }), _jsx("span", { className: `text-xs font-medium capitalize ${strengthTextColor}`, children: passwordStrength.strength.replace('-', ' ') })] }), passwordStrength.errors.length > 0 && (_jsx("p", { className: "text-xs text-red-400", children: passwordStrength.errors[0] })), passwordStrength.errors.length === 0 &&
-                                                        passwordStrength.suggestions.length > 0 && (_jsx("p", { className: "text-xs text-gray-400", children: passwordStrength.suggestions[0] }))] })) })] }), _jsx(SettingsFormField, { id: "confirmPassword", label: "Confirm password", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", theme: theme })] }), _jsx("div", { className: "flex justify-end pt-2", children: _jsx(Button, { theme: theme === null || theme === void 0 ? void 0 : theme.button, color: "blue", type: "submit", disabled: isLoading || checkingPassword, children: isLoading ? (_jsx(Spinner, { size: "sm", className: "text-white" })) : ('Update Password') }) })] }) })] }));
+    return (_jsxs(SettingsCard, { title: "Password information", description: "Update your password to keep your account secure", icon: HiLockClosed, theme: theme === null || theme === void 0 ? void 0 : theme.card, className: className, children: [_jsxs("div", { className: "space-y-4", children: [error && (_jsx(StatusAlert, { type: "error", message: error, theme: theme === null || theme === void 0 ? void 0 : theme.alert })), success && (_jsx(StatusAlert, { type: "success", message: "Password updated successfully.", theme: theme === null || theme === void 0 ? void 0 : theme.alert }))] }), _jsx("form", { ref: formRef, onSubmit: handleSubmit, children: _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "grid gap-4 md:grid-cols-2", children: _jsx(SettingsFormField, { id: "currentPassword", label: "Current password", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", theme: theme }) }), _jsxs("div", { className: "grid items-start gap-4 md:grid-cols-2", children: [_jsxs("div", { children: [_jsx(SettingsFormField, { id: "newPassword", label: "New password", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", theme: theme, onChange: (e) => setNewPassword(e.target.value) }), _jsx("div", { className: "mt-2 min-h-[2.75rem]", children: passwordStrength && (_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-1.5 flex-1 overflow-hidden rounded-full bg-gray-700", children: _jsx("div", { className: `h-full rounded-full transition-all duration-300 ${strengthBarColor}`, style: { width: `${passwordStrength.score}%` } }) }), _jsx("span", { className: `text-xs font-medium capitalize ${strengthTextColor}`, children: passwordStrength.strength.replace('-', ' ') })] }), passwordStrength.errors.length > 0 && (_jsx("p", { className: "text-xs text-red-400", children: passwordStrength.errors[0] })), passwordStrength.errors.length === 0 &&
+                                                        passwordStrength.suggestions.length > 0 && (_jsx("p", { className: "text-xs text-gray-400", children: passwordStrength.suggestions[0] }))] })) })] }), _jsx(SettingsFormField, { id: "confirmPassword", label: "Confirm password", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", theme: theme })] }), _jsx("div", { className: "flex justify-end pt-2", children: _jsx(Button, { theme: theme === null || theme === void 0 ? void 0 : theme.button, color: "blue", type: "submit", disabled: isLoading || checkingPassword, children: isLoading ? (_jsx(Spinner, { size: "sm", className: "text-white" })) : ('Update Password') }) })] }) }), _jsx(ConfirmModal, { show: pendingUpdate !== null, onClose: () => setPendingUpdate(null), onConfirm: handleConfirm, loading: isLoading, title: "Change password", confirmLabel: "Change password", loadingLabel: "Changing\u2026", confirmColor: "blue", confirmIcon: HiLockClosed, children: _jsx("p", { className: "text-sm text-gray-300", children: "Changing your password signs you out everywhere, including on this device. You'll need to sign in again with your new password." }) })] }));
 };