@oxy.so/services 12.3.0 → 12.5.0

package/src/ui/screens/AccountSecurityPanelScreen.tsx

@@ -1,6 +1,6 @@
 /**
  * The frame the account's own security panels render in when presented as a
- * surface (`showBottomSheet('DeleteAccount' | 'LinkCommons' | 'SignInPassword'
+ * surface (`showBottomSheet('DeleteAccount' | 'LinkCommons' | 'SignInEmail' | 'SignInPassword'
  * | 'SignInAuthenticator')`): the panel draws its own large header, so the bar
  * holds only the way back, and the body keeps the dialog's screen gutter.
  */

package/src/ui/screens/AccountSettingsScreen.tsx

@@ -1,9 +1,4 @@
 import type React from 'react';
-import {
-  ORGANIZATION_NAME_MAX_LENGTH,
-  organizationNameCheck,
-  checkContract,
-} from '@oxy.so/contracts/client';
 import { OrganizationSettings } from '../components/organizations/OrganizationSettings';
 import { useCallback, useMemo, useState } from 'react';
 import { View } from 'react-native';
@@ -16,10 +11,11 @@ import { Button } from '@oxy.so/bloom/button';
 import { TextField, TextFieldInput } from '@oxy.so/bloom/text-field';
 import { GroupedSection, GroupedSectionItem } from '@oxy.so/bloom/grouped-section';
 import {
-  DISPLAY_NAME_INVALID_MESSAGE,
+  accountNameInvalidKey,
+  accountNameInvalidMessage,
+  accountNameMaxLength,
   getNormalizedUserHandle,
-  isValidDisplayName,
-  MAX_DISPLAY_NAME_LENGTH,
+  isValidAccountName,
   type UpdateAccountInput,
 } from '@oxy.so/core';
 import type { BaseScreenProps } from '../types/navigation';
@@ -29,7 +25,6 @@ import { useI18n } from '../hooks/useI18n';
 import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { clearedFieldsFromAccountUpdate, upsertCachedUser } from '../hooks/queries/userCache';
 
-const DISPLAY_NAME_MAX = MAX_DISPLAY_NAME_LENGTH;
 const BIO_MAX = 160;
 
 const errorMessage = (error: unknown, fallback: string): string =>
@@ -158,22 +153,12 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
         setDisplayNameError('');
         return;
       }
-      if (node?.account.kind === 'organization') {
-        setDisplayNameError(
-          checkContract(organizationNameCheck, trimmed) !== null
-            ? ''
-            : t('organizationDirectory.invalidName'),
-        );
-        return;
-      }
-      const nameParts = trimmed.split(/\s+/).filter(Boolean);
-      const first = nameParts[0] || '';
-      const last = nameParts.length > 1 ? nameParts.slice(1).join(' ') : '';
-      const invalidPart = [first, last].find((part) => part && !isValidDisplayName(part));
+      const kind = node?.account.kind;
       setDisplayNameError(
-        invalidPart
-          ? t('accounts.settings.displayName.invalidChars') || DISPLAY_NAME_INVALID_MESSAGE
-          : '',
+        isValidAccountName(trimmed, kind)
+          ? ''
+          : t(`accounts.settings.displayName.${accountNameInvalidKey(kind)}`) ||
+              accountNameInvalidMessage(kind),
       );
     },
     [node?.account.kind, t],
@@ -235,11 +220,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                       value={displayName}
                       onChangeText={handleDisplayNameChange}
                       isInvalid={Boolean(displayNameError)}
-                      maxLength={
-                        node?.account.kind === 'organization'
-                          ? ORGANIZATION_NAME_MAX_LENGTH
-                          : DISPLAY_NAME_MAX
-                      }
+                      maxLength={accountNameMaxLength(node?.account.kind)}
                     />
                   </TextField>
                   {displayNameError ? (

package/src/ui/screens/CreateAccountScreen.tsx

@@ -1,10 +1,5 @@
 import type React from 'react';
 import type { OrganizationType } from '@oxy.so/contracts';
-import {
-  ORGANIZATION_NAME_MAX_LENGTH,
-  organizationNameCheck,
-  checkContract,
-} from '@oxy.so/contracts/client';
 import { OrganizationDirectorySearch } from '../components/organizations/OrganizationDirectorySearch';
 import { OrganizationTypePicker } from '../components/organizations/OrganizationTypePicker';
 import { useState, useCallback, useRef, useEffect } from 'react';
@@ -13,10 +8,11 @@ import Ionicons from '../icons/Ionicons';
 import type { AccountCategoryId, AccountKind, CreateAccountInput } from '@oxy.so/core';
 import {
   accountCategoryLabel,
-  DISPLAY_NAME_INVALID_MESSAGE,
-  isValidDisplayName,
+  accountNameInvalidKey,
+  accountNameInvalidMessage,
+  accountNameMaxLength,
+  isValidAccountName,
   MAX_ACCOUNT_CATEGORIES,
-  MAX_DISPLAY_NAME_LENGTH,
   SELECTABLE_ACCOUNT_CATEGORY_IDS,
 } from '@oxy.so/core';
 import {
@@ -61,7 +57,6 @@ type UsernameStatus = 'idle' | 'checking' | 'available' | 'taken' | 'invalid';
 type CreatableAccountKind = Extract<AccountKind, 'organization' | 'project' | 'bot'>;
 
 const DEBOUNCE_MS = 400;
-const DISPLAY_NAME_MAX = MAX_DISPLAY_NAME_LENGTH;
 const BIO_MAX = 160;
 
 interface KindOption {
@@ -286,22 +281,11 @@ const CreateAccountScreen: React.FC<BaseScreenProps> = ({
         setDisplayNameError('');
         return;
       }
-      if (kind === 'organization') {
-        setDisplayNameError(
-          checkContract(organizationNameCheck, trimmed) !== null
-            ? ''
-            : t('organizationDirectory.invalidName'),
-        );
-        return;
-      }
-      const nameParts = trimmed.split(/\s+/);
-      const firstName = nameParts[0] || '';
-      const lastName = nameParts.length > 1 ? nameParts.slice(1).join(' ') : '';
-      const invalidPart = [firstName, lastName].find((part) => part && !isValidDisplayName(part));
       setDisplayNameError(
-        invalidPart
-          ? t('accounts.create.displayName.invalidChars') || DISPLAY_NAME_INVALID_MESSAGE
-          : '',
+        isValidAccountName(trimmed, kind)
+          ? ''
+          : t(`accounts.create.displayName.${accountNameInvalidKey(kind)}`) ||
+              accountNameInvalidMessage(kind),
       );
     },
     [kind, t],
@@ -548,9 +532,7 @@ const CreateAccountScreen: React.FC<BaseScreenProps> = ({
                     value={displayName}
                     onChangeText={handleDisplayNameChange}
                     isInvalid={Boolean(displayNameError)}
-                    maxLength={
-                      kind === 'organization' ? ORGANIZATION_NAME_MAX_LENGTH : DISPLAY_NAME_MAX
-                    }
+                    maxLength={accountNameMaxLength(kind)}
                   />
                 </TextField>
                 {displayNameError ? (

package/src/ui/screens/EditProfileFieldScreen.tsx

@@ -22,7 +22,7 @@ import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { useOxy } from '../context/oxyRuntimeContext';
 import { useProfileEditing } from '../hooks/useProfileEditing';
 import { toast } from '@oxy.so/bloom/toast';
-import { DISPLAY_NAME_INVALID_MESSAGE, isValidDisplayName } from '@oxy.so/core';
+import { accountNameInvalidKey, accountNameInvalidMessage, isValidAccountName } from '@oxy.so/core';
 import { getLinkTitle, getLinkDescription, linksToListItems } from './linkFormat';
 
 /**
@@ -217,6 +217,12 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
     fieldType === 'username',
   );
 
+  // The name policy is the account's kind's: an organization a person switched
+  // into is named by the title policy, not held to a person's.
+  const kind = user?.kind;
+  const invalidNameMessage =
+    t(`editProfile.items.displayName.${accountNameInvalidKey(kind)}`) ||
+    accountNameInvalidMessage(kind);
   // Get field configuration based on fieldType
   const fieldConfig = useMemo((): FieldConfig => {
     switch (fieldType) {
@@ -233,9 +239,7 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
               placeholder:
                 t('editProfile.items.displayName.firstNamePlaceholder') || 'Enter first name',
               validation: (value) =>
-                isValidDisplayName(value)
-                  ? undefined
-                  : t('editProfile.items.displayName.invalidChars') || DISPLAY_NAME_INVALID_MESSAGE,
+                isValidAccountName(value, kind) ? undefined : invalidNameMessage,
             },
             {
               key: 'lastName',
@@ -244,9 +248,7 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
                 t('editProfile.items.displayName.lastNamePlaceholder') ||
                 'Enter last name (optional)',
               validation: (value) =>
-                isValidDisplayName(value)
-                  ? undefined
-                  : t('editProfile.items.displayName.invalidChars') || DISPLAY_NAME_INVALID_MESSAGE,
+                isValidAccountName(value, kind) ? undefined : invalidNameMessage,
             },
           ],
         };
@@ -360,7 +362,7 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
           fields: [],
         };
     }
-  }, [fieldType, t]);
+  }, [fieldType, t, kind, invalidNameMessage]);
 
   // Field change handler
   const handleFieldChange = useCallback(

package/src/ui/screens/ManageAccountScreen.tsx

@@ -4,7 +4,6 @@ import { SpinnerIcon } from '@oxy.so/bloom/loading';
 import type React from 'react';
 import { useCallback, useMemo, useState } from 'react';
 import { View, StyleSheet, Linking, Platform } from 'react-native';
-import Ionicons from '../icons/Ionicons';
 import { toast } from '@oxy.so/bloom/toast';
 import { surfaces } from '@oxy.so/bloom/surfaces';
 import { useTheme } from '@oxy.so/bloom/theme';
@@ -16,7 +15,6 @@ import {
   getNormalizedUserHandle,
   logger as loggerUtil,
   packageInfo,
-  type DeviceLinkedSession,
 } from '@oxy.so/core';
 import type { BaseScreenProps } from '../types/navigation';
 import ProfileSummaryCard from '../components/ProfileSummaryCard';
@@ -29,46 +27,14 @@ import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { isWebBrowser } from '../utils/isWebBrowser';
 import { useCurrentUser } from '../hooks/queries/useAccountQueries';
 import { useUserSubscription } from '../hooks/queries/usePaymentQueries';
-import { useDeviceSessions } from '../hooks/queries/useServicesQueries';
-import { deviceSessionTitle } from '../utils/deviceSessionTitle';
-
-type DeviceSessionRow = DeviceLinkedSession;
-
-const formatRelative = (dateString?: string): string => {
-  if (!dateString) {
-    return '—';
-  }
-  const date = new Date(dateString);
-  const now = new Date();
-  const diffMs = date.getTime() - now.getTime();
-  const absMin = Math.abs(diffMs) / 60000;
-  const isFuture = diffMs > 0;
-  if (absMin < 1) {
-    return isFuture ? 'in moments' : 'just now';
-  }
-  if (absMin < 60) {
-    const v = Math.floor(absMin);
-    return isFuture ? `in ${v}m` : `${v}m ago`;
-  }
-  const hrs = absMin / 60;
-  if (hrs < 24) {
-    const v = Math.floor(hrs);
-    return isFuture ? `in ${v}h` : `${v}h ago`;
-  }
-  const days = hrs / 24;
-  if (days < 7) {
-    const v = Math.floor(days);
-    return isFuture ? `in ${v}d` : `${v}d ago`;
-  }
-  return date.toLocaleDateString();
-};
 
 /**
  * Unified "Manage your Oxy Account" screen.
  *
  * Replaces AccountOverview + AccountSettings + the per-account half of
- * SessionManagement. Lists ONLY the active user's profile, sessions on this
- * device, and security/destructive actions for THIS account. Multi-account
+ * SessionManagement. Lists ONLY the active user's profile, its sign-in and
+ * security page (`SignInSecurity`: methods and sessions), and the destructive
+ * actions for THIS account. Multi-account
  * surface lives in the unified `OxyAccountDialogScreen` — keep these concerns separate.
  */
 interface ManageAccountScreenProps extends BaseScreenProps {
@@ -91,7 +57,6 @@ const ManageAccountScreen: React.FC<ManageAccountScreenProps> = ({
     user: contextUser,
     isAuthenticated,
     oxyServices,
-    activeSessionId,
     logout,
     openAvatarPicker,
     accounts,
@@ -110,14 +75,6 @@ const ManageAccountScreen: React.FC<ManageAccountScreenProps> = ({
   const user = userFromQuery ?? contextUser;
 
   const { data: subscription } = useUserSubscription({ enabled: isAuthenticated });
-  const {
-    data: deviceSessions,
-    isLoading: deviceSessionsLoading,
-    refetch: refetchDeviceSessions,
-  } = useDeviceSessions({ enabled: isAuthenticated && !!activeSessionId });
-
-  const [removingDeviceId, setRemovingDeviceId] = useState<string | null>(null);
-  const [signingOutAllDevices, setSigningOutAllDevices] = useState(false);
   const [signingOut, setSigningOut] = useState(false);
 
   const displayName = useMemo(
@@ -159,91 +116,6 @@ const ManageAccountScreen: React.FC<ManageAccountScreenProps> = ({
     }
   }, [signingOut, logout, t, onClose]);
 
-  const confirmRemoveDevice = useCallback(
-    async (device: DeviceSessionRow) => {
-      if (!activeSessionId) {
-        return;
-      }
-      const confirmed = await surfaces.confirm({
-        title: t('manageAccount.confirms.removeDeviceTitle') || 'Remove device',
-        description: t('manageAccount.confirms.removeDevice', {
-          name: deviceSessionTitle(device, t),
-        }),
-        confirmLabel: t('common.remove') || 'Remove',
-        cancelLabel: t('common.cancel') || 'Cancel',
-        destructive: true,
-      });
-      if (!confirmed) {
-        return;
-      }
-      setRemovingDeviceId(device.sessionId);
-      try {
-        await oxyServices.session.logout(activeSessionId, device.sessionId);
-        await refetchDeviceSessions();
-        toast.success(
-          t('manageAccount.toasts.deviceRemoved', { name: deviceSessionTitle(device, t) }),
-        );
-      } catch (error) {
-        loggerUtil.warn(
-          'Remove device failed',
-          { component: 'ManageAccountScreen' },
-          error as unknown,
-        );
-        toast.error(t('manageAccount.toasts.deviceRemoveFailed') || 'Failed to remove device');
-      } finally {
-        setRemovingDeviceId(null);
-      }
-    },
-    [activeSessionId, oxyServices, refetchDeviceSessions, t],
-  );
-
-  const handleSignOutAllDevices = useCallback(async () => {
-    if (!activeSessionId || signingOutAllDevices) {
-      return;
-    }
-    const otherDeviceCount = ((deviceSessions ?? []) as DeviceSessionRow[]).filter(
-      (device) => !device.isCurrent,
-    ).length;
-    const confirmed = await surfaces.confirm({
-      title: t('manageAccount.confirms.signOutAllDevicesTitle') || 'Sign out of all other devices',
-      description:
-        t('manageAccount.confirms.signOutAllDevices', { count: otherDeviceCount }) ||
-        `End ${otherDeviceCount} other device session(s)? This won't sign you out here.`,
-      confirmLabel: t('common.actions.signOut') || 'Sign out',
-      cancelLabel: t('common.cancel') || 'Cancel',
-      destructive: true,
-    });
-    if (!confirmed) {
-      return;
-    }
-    setSigningOutAllDevices(true);
-    try {
-      await oxyServices.devices.logoutAll(activeSessionId);
-      await refetchDeviceSessions();
-      toast.success(
-        t('manageAccount.toasts.allDevicesSignedOut') || 'Signed out from all other devices',
-      );
-    } catch (error) {
-      loggerUtil.warn(
-        'Sign out all devices failed',
-        { component: 'ManageAccountScreen' },
-        error as unknown,
-      );
-      toast.error(
-        t('manageAccount.toasts.allDevicesFailed') || 'Failed to sign out from other devices',
-      );
-    } finally {
-      setSigningOutAllDevices(false);
-    }
-  }, [
-    activeSessionId,
-    signingOutAllDevices,
-    deviceSessions,
-    oxyServices,
-    refetchDeviceSessions,
-    t,
-  ]);
-
   // The signed, open-format export (`GET /users/me/export`): one JSON bundle
   // carrying Oxy's provenance attestation — the "credible exit" snapshot.
   const handleDownloadData = useCallback(async () => {
@@ -347,9 +219,6 @@ const ManageAccountScreen: React.FC<ManageAccountScreenProps> = ({
     );
   }
 
-  const deviceRows: DeviceSessionRow[] = (deviceSessions ?? []) as DeviceSessionRow[];
-  const otherDevices = deviceRows.filter((d) => !d.isCurrent);
-
   return (
     <>
       <View className="px-screen-margin pb-space-24">
@@ -432,117 +301,15 @@ const ManageAccountScreen: React.FC<ManageAccountScreenProps> = ({
               </GroupedSection>
             ) : null}
 
-            {/* Sessions section */}
-            <GroupedSection title={t('manageAccount.sections.sessions') || 'Sessions & devices'}>
-              {deviceSessionsLoading ? (
-                <GroupedSectionItem
-                  icon={<SettingsIcon name="sync" color={bloomTheme.colors.primary} />}
-                  title={t('manageAccount.sessions.loading') || 'Loading sessions…'}
-                  rightElement={null}
-                  showChevron={false}
-                  disabled
-                />
-              ) : deviceRows.length === 0 ? (
-                <GroupedSectionItem
-                  icon={<SettingsIcon name="cellphone" color={bloomTheme.colors.textTertiary} />}
-                  title={t('manageAccount.sessions.empty') || 'No active sessions'}
-                  showChevron={false}
-                  disabled
-                />
-              ) : (
-                deviceRows.map((device) => (
-                  <GroupedSectionItem
-                    key={`device-${device.sessionId}`}
-                    icon={
-                      <SettingsIcon
-                        name={device.isCurrent ? 'cellphone' : 'cellphone-basic'}
-                        color={
-                          device.isCurrent ? bloomTheme.colors.success : bloomTheme.colors.primary
-                        }
-                      />
-                    }
-                    title={deviceSessionTitle(device, t)}
-                    description={
-                      t('manageAccount.sessions.lastActive', {
-                        relative: formatRelative(device.lastActive),
-                      }) || `Last active ${formatRelative(device.lastActive)}`
-                    }
-                    onPress={device.isCurrent ? undefined : () => confirmRemoveDevice(device)}
-                    disabled={device.isCurrent || removingDeviceId === device.sessionId}
-                    rightElement={
-                      !device.isCurrent ? (
-                        removingDeviceId === device.sessionId ? (
-                          <SpinnerIcon color={bloomTheme.colors.error} size={16} />
-                        ) : (
-                          <Ionicons
-                            name="log-out-outline"
-                            size={18}
-                            color={bloomTheme.colors.error}
-                          />
-                        )
-                      ) : undefined
-                    }
-                    showChevron={false}
-                  />
-                ))
-              )}
-              {otherDevices.length > 0 ? (
-                <GroupedSectionItem
-                  icon={<SettingsIcon name="logout" color={bloomTheme.colors.error} />}
-                  title={
-                    t('manageAccount.sessions.signOutAllOnThisDevice') ||
-                    'Sign out of all other devices'
-                  }
-                  description={
-                    t('manageAccount.sessions.signOutAllSubtitle', {
-                      count: otherDevices.length,
-                    }) || `End ${otherDevices.length} other device session(s)`
-                  }
-                  onPress={handleSignOutAllDevices}
-                  destructive
-                  showChevron={false}
-                  disabled={signingOutAllDevices}
-                  rightElement={
-                    signingOutAllDevices ? (
-                      <SpinnerIcon color={bloomTheme.colors.error} size={16} />
-                    ) : undefined
-                  }
-                />
-              ) : null}
-            </GroupedSection>
-
-            {/* Security section */}
+            {/* Security: one page for how the account signs in and where. */}
             <GroupedSection title={t('manageAccount.sections.security') || 'Security'}>
               <GroupedSectionItem
                 icon={<SettingsIcon name="shield-check" color={bloomTheme.colors.primary} />}
-                title={t('manageAccount.items.security.title') || 'Security settings'}
-                description={
-                  t('manageAccount.items.security.subtitle') || 'Password, 2FA, recovery'
-                }
-                onPress={() => navigate?.('PrivacySettings')}
+                title={t('signInSecurity.title')}
+                description={t('signInSecurity.subtitle')}
+                onPress={() => navigate?.('SignInSecurity')}
+                testID="manage-account-sign-in-security"
               />
-              {user && !user.publicKey ? (
-                <>
-                  <GroupedSectionItem
-                    icon={<SettingsIcon name="key" color={bloomTheme.colors.primary} />}
-                    title={t('signInSecurity.password.title')}
-                    description={t('signInSecurity.password.row')}
-                    onPress={() => navigate?.('SignInPassword')}
-                  />
-                  <GroupedSectionItem
-                    icon={<SettingsIcon name="shield-check" color={bloomTheme.colors.primary} />}
-                    title={t('signInSecurity.totp.title')}
-                    description={t('signInSecurity.totp.row')}
-                    onPress={() => navigate?.('SignInAuthenticator')}
-                  />
-                  <GroupedSectionItem
-                    icon={<SettingsIcon name="link" color={bloomTheme.colors.primary} />}
-                    title={t('linkCommons.title')}
-                    description={t('linkCommons.row')}
-                    onPress={() => navigate?.('LinkCommons')}
-                  />
-                </>
-              ) : null}
               {user?.isPremium || subscription?.status === 'active' ? (
                 <GroupedSectionItem
                   icon={<SettingsIcon name="credit-card" color={bloomTheme.colors.success} />}

package/src/ui/screens/SignInEmailScreen.tsx

@@ -0,0 +1,13 @@
+import type React from 'react';
+import { OxyEmailPanel } from '../components/signIn/OxyEmailPanel';
+import type { BaseScreenProps } from '../types/navigation';
+import { AccountSecurityPanelFrame } from './AccountSecurityPanelScreen';
+
+/** `SignInEmail`: add, change or remove the account's email. */
+const SignInEmailScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) => (
+  <AccountSecurityPanelFrame>
+    <OxyEmailPanel onDone={goBack ?? onClose} />
+  </AccountSecurityPanelFrame>
+);
+
+export default SignInEmailScreen;

package/src/ui/screens/SignInSecurityScreen.tsx

@@ -0,0 +1,19 @@
+import type React from 'react';
+import { View } from 'react-native';
+import { OxySignInSecurityPanel } from '../components/signIn/OxySignInSecurityPanel';
+import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
+import type { BaseScreenProps } from '../types/navigation';
+
+/** `SignInSecurity`: how the account signs in, and where it is signed in. */
+const SignInSecurityScreen: React.FC<BaseScreenProps> = ({ navigate }) => {
+  const { t } = useI18n();
+  useSurfaceHeader({ title: t('signInSecurity.title') });
+  return (
+    <View className="px-screen-margin pb-space-24">
+      <OxySignInSecurityPanel onOpen={navigate ? (route) => navigate(route) : undefined} />
+    </View>
+  );
+};
+
+export default SignInSecurityScreen;