@ethora/chat-component-rn 26.8.6 → 26.8.8

package/src/components/Modals/SettingsModals/ChangePassword/ChangePasswordModal.tsx

@@ -0,0 +1,316 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import ModalHeaderComponent from '../../ModalHeaderComponent';
+import { ModalContainerFullScreen } from '../../styledModalComponents';
+import { useTheme } from '../../../../hooks/useTheme';
+import type { ChatTheme } from '../../../../theme/theme';
+import { useT } from '../../../../i18n/useT';
+import { useToast } from '../../../../context/ToastContext';
+import { useChatSettingState } from '../../../../hooks/useChatSettingState';
+import { changePassword } from '../../../../networking/api-requests/user.api';
+import { chatTextStyle } from '../../../../helpers/typography';
+
+/** What the backend asks of a password at sign-up. */
+export const MIN_PASSWORD_LENGTH = 8;
+
+/** The reason a backend gave, or nothing - never an axios dump. */
+const serverReason = (error: any): string => {
+  const data = error?.response?.data;
+  const text =
+    (typeof data === 'string' && data) ||
+    data?.message ||
+    data?.error ||
+    (Array.isArray(data?.errors) && data.errors.map((e: any) => e?.message || e).join(', ')) ||
+    '';
+  return typeof text === 'string' ? text.trim() : '';
+};
+
+interface FieldProps {
+  testID: string;
+  label: string;
+  value: string;
+  onChangeText: (value: string) => void;
+  error?: string;
+  editable: boolean;
+  newPassword?: boolean;
+  onSubmitEditing?: () => void;
+  styles: ReturnType<typeof createStyles>;
+  theme: ChatTheme;
+}
+
+/** One labelled password field: label above, error (if any) below. */
+const Field: React.FC<FieldProps> = ({
+  testID,
+  label,
+  value,
+  onChangeText,
+  error,
+  editable,
+  newPassword,
+  onSubmitEditing,
+  styles,
+  theme,
+}) => (
+  <View style={styles.field}>
+    <Text style={styles.fieldLabel}>{label}</Text>
+    <TextInput
+      testID={testID}
+      style={[styles.input, error ? styles.inputError : null]}
+      value={value}
+      onChangeText={onChangeText}
+      placeholder={label}
+      placeholderTextColor={theme.textMuted}
+      keyboardAppearance={theme.dark ? 'dark' : 'light'}
+      secureTextEntry
+      autoCapitalize="none"
+      autoCorrect={false}
+      textContentType={newPassword ? 'newPassword' : 'password'}
+      editable={editable}
+      returnKeyType={onSubmitEditing ? 'done' : 'next'}
+      onSubmitEditing={onSubmitEditing}
+      blurOnSubmit={!!onSubmitEditing}
+    />
+    {error ? <Text style={styles.fieldError}>{error}</Text> : null}
+  </View>
+);
+
+interface ChangePasswordModalProps {
+  handleCloseModal: () => void;
+}
+
+/**
+ * Change the account password: the current one, the new one twice. Nothing
+ * is sent until the form is complete and the two match; what the backend
+ * refuses is shown as it said it. Laid out like the Settings screen it is
+ * reached from: one card on the list ground.
+ */
+const ChangePasswordModal: React.FC<ChangePasswordModalProps> = ({ handleCloseModal }) => {
+  const theme = useTheme();
+  const t = useT();
+  const { showToast } = useToast();
+  const { config } = useChatSettingState();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  const [current, setCurrent] = useState('');
+  const [next, setNext] = useState('');
+  const [again, setAgain] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+
+  const mismatch = again.length > 0 && next !== again;
+  const tooShort = next.length > 0 && next.length < MIN_PASSWORD_LENGTH;
+  const sameAsCurrent = next.length > 0 && next === current;
+  const ready =
+    current.length > 0 &&
+    next.length >= MIN_PASSWORD_LENGTH &&
+    next === again &&
+    !sameAsCurrent &&
+    !busy;
+
+  const submit = useCallback(async () => {
+    if (!ready) {return;}
+    setBusy(true);
+    setError('');
+    try {
+      await changePassword(current, next);
+      showToast({
+        id: Date.now().toString(),
+        title: t('settings.password.title'),
+        message: t('settings.password.changed'),
+        type: 'success',
+      });
+      handleCloseModal();
+    } catch (err) {
+      const status = (err as any)?.response?.status;
+      setError(
+        serverReason(err) ||
+          (status === 400 || status === 401 || status === 403
+            ? t('settings.password.wrongCurrent')
+            : t('settings.password.failed'))
+      );
+      setBusy(false);
+    }
+  }, [current, handleCloseModal, next, ready, showToast, t]);
+
+  const newError = tooShort
+    ? t('settings.password.tooShort', { min: MIN_PASSWORD_LENGTH })
+    : sameAsCurrent
+      ? t('settings.password.sameAsCurrent')
+      : undefined;
+
+  return (
+    <ModalContainerFullScreen style={styles.screen}>
+      <ModalHeaderComponent
+        handleCloseModal={handleCloseModal}
+        headerTitle={t('settings.password.title')}
+        titleStyle={chatTextStyle(config?.typography?.profile?.screenTitle)}
+      />
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        style={styles.fill}
+      >
+        <ScrollView
+          style={styles.fill}
+          contentContainerStyle={styles.body}
+          keyboardShouldPersistTaps="handled"
+        >
+          <View style={styles.card} testID="settings-change-password">
+            <Field
+              testID="password-current"
+              label={t('settings.password.current')}
+              value={current}
+              onChangeText={setCurrent}
+              editable={!busy}
+              styles={styles}
+              theme={theme}
+            />
+            <Field
+              testID="password-new"
+              label={t('settings.password.new')}
+              value={next}
+              onChangeText={setNext}
+              error={newError}
+              editable={!busy}
+              newPassword
+              styles={styles}
+              theme={theme}
+            />
+            <Field
+              testID="password-again"
+              label={t('settings.password.again')}
+              value={again}
+              onChangeText={setAgain}
+              error={mismatch ? t('settings.password.mismatch') : undefined}
+              editable={!busy}
+              newPassword
+              onSubmitEditing={submit}
+              styles={styles}
+              theme={theme}
+            />
+            <Text style={styles.hint}>{t('settings.password.hint')}</Text>
+          </View>
+
+          {!!error && (
+            <Text testID="password-error" style={styles.error}>
+              {error}
+            </Text>
+          )}
+
+          <TouchableOpacity
+            testID="password-submit"
+            accessibilityRole="button"
+            accessibilityState={{ disabled: !ready }}
+            activeOpacity={0.8}
+            disabled={!ready}
+            onPress={submit}
+            style={[styles.button, !ready ? styles.buttonDisabled : null]}
+          >
+            {busy ? (
+              <ActivityIndicator color={theme.textOnPrimary} />
+            ) : (
+              <Text style={[styles.buttonText, !ready ? styles.buttonTextDisabled : null]}>
+                {t('settings.password.submit')}
+              </Text>
+            )}
+          </TouchableOpacity>
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </ModalContainerFullScreen>
+  );
+};
+
+export default ChangePasswordModal;
+
+const createStyles = (theme: ChatTheme) =>
+  StyleSheet.create({
+    screen: {
+      backgroundColor: theme.listBackground,
+    },
+    fill: {
+      flex: 1,
+      width: '100%',
+    },
+    body: {
+      padding: 12,
+      gap: 12,
+      paddingBottom: 32,
+    },
+    // Same surface as the Settings cards this screen is reached from.
+    card: {
+      backgroundColor: theme.surface,
+      borderRadius: 20,
+      paddingHorizontal: 20,
+      paddingVertical: 22,
+      gap: 18,
+      shadowColor: theme.shadow,
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.06,
+      shadowRadius: 12,
+      elevation: 3,
+    },
+    field: {
+      gap: 8,
+    },
+    fieldLabel: {
+      fontSize: 14,
+      fontWeight: '500',
+      color: theme.textSecondary,
+    },
+    input: {
+      height: 48,
+      paddingHorizontal: 16,
+      borderRadius: 12,
+      borderWidth: 1,
+      borderColor: theme.border,
+      backgroundColor: theme.surfaceSecondary,
+      fontSize: 16,
+      color: theme.text,
+    },
+    inputError: {
+      borderColor: theme.danger,
+    },
+    fieldError: {
+      fontSize: 13,
+      lineHeight: 18,
+      color: theme.danger,
+    },
+    hint: {
+      fontSize: 13,
+      lineHeight: 18,
+      color: theme.textSecondary,
+    },
+    error: {
+      fontSize: 14,
+      lineHeight: 19,
+      paddingHorizontal: 8,
+      color: theme.danger,
+    },
+    button: {
+      minHeight: 48,
+      borderRadius: 14,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingHorizontal: 20,
+      backgroundColor: theme.primary,
+    },
+    buttonDisabled: {
+      backgroundColor: theme.surfaceSecondary,
+    },
+    buttonText: {
+      fontSize: 16,
+      fontWeight: '600',
+      color: theme.textOnPrimary,
+    },
+    buttonTextDisabled: {
+      color: theme.textMuted,
+    },
+  });

package/src/components/Modals/SettingsModals/ManageDataModal/ManageDataModal.tsx

@@ -21,6 +21,7 @@ import {
 } from '../SharedStyledComponents';
 import { View } from 'react-native';
 import { useTheme } from '../../../../hooks/useTheme';
+import { useT } from '../../../../i18n/useT';
 
 interface ManageDataModalProps {
   handleCloseModal: any;
@@ -39,6 +40,7 @@ const ManageDataModal: React.FC<ManageDataModalProps> = ({
 }) => {
   const { config } = useSelector((state: RootState) => state.chatSettingStore);
   const theme = useTheme();
+  const t = useT();
 
   const handleDownloadClick = async () => {
     // const exportedData = await getExportMyData();
@@ -59,13 +61,13 @@ const ManageDataModal: React.FC<ManageDataModalProps> = ({
     <ModalContainerFullScreen>
       <ModalHeaderComponent
         handleCloseModal={handleCloseModal}
-        headerTitle={'Manage Data'}
+        headerTitle={t('settings.manageData.title')}
       />
       <SharedSettingsCenterContainer>
         <SharedSettingsColumnContainer>
           <SharedSettingsSectionContainer>
             <SharedSettingsStyledLabel>
-              Download your data
+              {t('settings.manageData.downloadLabel')}
             </SharedSettingsStyledLabel>
             <LabelData
               style={{
@@ -73,25 +75,23 @@ const ManageDataModal: React.FC<ManageDataModalProps> = ({
                 textAlign: 'left',
               }}
             >
-              You own your data. Tap the button below to download a copy of your
-              data
+              {t('settings.manageData.downloadDescription')}
             </LabelData>
           </SharedSettingsSectionContainer>
           <SharedSettingsStyledButton
             borderColor={theme.primary}
             onPress={handleDownloadClick}
-            text="Download your data"
+            text={t('settings.manageData.downloadLabel')}
             color={theme.primary}
           />
         </SharedSettingsColumnContainer>
         <SharedSettingsColumnContainer>
           <SharedSettingsSectionContainer>
             <SharedSettingsStyledLabel>
-              Download your data
+              {t('settings.manageData.deleteLabel')}
             </SharedSettingsStyledLabel>
             <SharedSettingsLabelData>
-              Use this only if you want to permanently delete your account &
-              data from our system.
+              {t('settings.manageData.deleteDescription')}
             </SharedSettingsLabelData>
           </SharedSettingsSectionContainer>
           <SharedSettingsInfoPanel
@@ -101,17 +101,12 @@ const ManageDataModal: React.FC<ManageDataModalProps> = ({
               <InfoIcon color={theme.primary} />
             </View>
             <SharedSettingsInfoText>
-              Due to the immutable nature of distributed ledger technology,
-              network nodes operated by the community may still retain
-              historical transactions generated by your account, however your
-              personally identifiable information such as your name, e-mail,
-              your key-value storage etc will be removed. Any of your digital
-              assets will be lost.
+              {t('settings.manageData.deleteDisclosure')}
             </SharedSettingsInfoText>
           </SharedSettingsInfoPanel>
           <SharedSettingsStyledButton
             borderColor={theme.danger}
-            text="Delete My Account"
+            text={t('action.deleteMyAccount')}
             color={theme.danger}
           />
         </SharedSettingsColumnContainer>

package/src/components/Modals/SettingsModals/Visibility/VisibilityModal.tsx

@@ -16,6 +16,7 @@ import {
 } from '../SharedStyledComponents';
 import { RadioInput } from './RadioInput';
 import { useTheme } from '../../../../hooks/useTheme';
+import { useT } from '../../../../i18n/useT';
 
 interface VisibilityModalProps {
   handleCloseModal: any;
@@ -27,6 +28,7 @@ const VisibilityModal: React.FC<VisibilityModalProps> = ({
   const dispatch = useDispatch();
   const { user } = useSelector((state: RootState) => state.chatSettingStore);
   const theme = useTheme();
+  const t = useT();
 
   const doUpdateUser = (user: User) => dispatch(setUser(user));
   const [isProfileOpen, setIsProfileOpen] = useState(user?.isProfileOpen);
@@ -67,17 +69,17 @@ const VisibilityModal: React.FC<VisibilityModalProps> = ({
     <ModalContainerFullScreen>
       <ModalHeaderComponent
         handleCloseModal={handleCloseModal}
-        headerTitle={'Visibility'}
+        headerTitle={t('settings.visibility.title')}
       />
       <SharedSettingsCenterContainer>
         <SharedSettingsColumnContainer>
           <SharedSettingsStyledLabel>
-            Profile Visiblility
+            {t('settings.visibility.profileLabel')}
           </SharedSettingsStyledLabel>
           <RadioGroup>
             <RadioLabel>
               <RadioInput
-                option={{ label: 'Open (default)', value: isProfileOpen }}
+                option={{ label: t('settings.visibility.open'), value: isProfileOpen }}
                 radioColor={theme.primary}
                 checked={isProfileOpen === true}
                 onChange={() => setIsProfileOpen(true)}
@@ -85,50 +87,47 @@ const VisibilityModal: React.FC<VisibilityModalProps> = ({
             </RadioLabel>
 
             <SharedSettingsLabelData>
-              Your profile can be viewed by anyone who follows your profile link
-              or QR code.
+              {t('settings.visibility.openDescription')}
             </SharedSettingsLabelData>
             <RadioLabel>
               <RadioInput
-                option={{ label: 'Restricted', value: isProfileOpen }}
+                option={{ label: t('settings.visibility.restricted'), value: isProfileOpen }}
                 radioColor={theme.primary}
                 checked={isProfileOpen === false}
                 onChange={() => setIsProfileOpen(false)}
               />
             </RadioLabel>
             <SharedSettingsLabelData>
-              Only users with your permission or temporary secure link can see
-              your profile.
+              {t('settings.visibility.restrictedDescription')}
             </SharedSettingsLabelData>
           </RadioGroup>
         </SharedSettingsColumnContainer>
         <SharedSettingsColumnContainer>
           <SharedSettingsStyledLabel>
-            Documents Visibility
+            {t('settings.visibility.documentsLabel')}
           </SharedSettingsStyledLabel>
           <RadioGroup>
             <RadioLabel>
               <RadioInput
-                option={{ label: 'Full (default)', value: isAssetsOpen }}
+                option={{ label: t('settings.visibility.full'), value: isAssetsOpen }}
                 radioColor={theme.primary}
                 checked={isAssetsOpen === true}
                 onChange={() => setIsAssetsOpen(true)}
               />
             </RadioLabel>
             <SharedSettingsLabelData>
-              Show all Documents to those who can see your profile.
+              {t('settings.visibility.fullDescription')}
             </SharedSettingsLabelData>
             <RadioLabel>
               <RadioInput
-                option={{ label: 'InViewidual', value: isAssetsOpen }}
+                option={{ label: t('settings.visibility.individual'), value: isAssetsOpen }}
                 radioColor={theme.primary}
                 checked={isAssetsOpen === false}
                 onChange={() => setIsAssetsOpen(false)}
               />
             </RadioLabel>
             <SharedSettingsLabelData>
-              You need to share each document inViewidually before others can
-              see them.
+              {t('settings.visibility.individualDescription')}
             </SharedSettingsLabelData>
           </RadioGroup>
         </SharedSettingsColumnContainer>

package/src/components/Modals/UserProfileModal/UserProfileModal.tsx

@@ -17,6 +17,7 @@ import {
   EditIcon,
   IconDoc,
   LeaveIcon,
+  LockIcon,
   LogoutIcon,
   ProfileIcon,
   ShareIcon,
@@ -38,12 +39,26 @@ import { MODAL_TYPES } from '../../../helpers/constants/MODAL_TYPES';
 import {
   setActiveFile,
   setActiveModal,
-  setLangSource,
 } from '../../../roomStore/chatSettingsSlice';
 import { addRoomViaApi, setCurrentRoom } from '../../../roomStore/roomsSlice';
 import { runLogoutFlow } from '../../Menu/HeaderRoomListMenu';
 import { useLogout } from '../../../hooks/useLogout';
-import { ApiRoom, postPrivateRoom } from '../../../networking/api-requests/rooms.api';
+import {
+  ApiRoom,
+  ownAppId,
+  postPrivateRoom,
+} from '../../../networking/api-requests/rooms.api';
+import EncryptionCard from '../../MainComponents/EncryptionCard';
+import { accountNameOf } from '../../../helpers/accountName';
+import { setChatLanguage } from '../../../services/languageSettings';
+import { composeName } from '../../../helpers/displayName';
+import { isUnresolvedSenderId } from '../../../helpers/isUnresolvedSenderId';
+
+/** A name, unless it is only the account's id standing in for one. */
+const nameOrNothing = (name?: string | null): string => {
+  const trimmed = String(name ?? '').trim();
+  return isUnresolvedSenderId(trimmed) ? '' : trimmed;
+};
 import {
   getUserFiles,
   isMediaFile,
@@ -51,7 +66,7 @@ import {
 } from '../../../networking/api-requests/user.api';
 import { createRoomFromApi } from '../../../helpers/createRoomFromApi';
 import { walletToUsername } from '../../../helpers/walletUsername';
-import { Iso639_1Codes } from '../../../types/types';
+import {  } from '../../../types/types';
 import {
   ProfileHero,
   ProfileTopBar,
@@ -191,13 +206,17 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
   // AsyncStorage), including the host's confirm copy and callbacks.
   const performLogout = useLogout();
   const handleLogout = useCallback(() => {
-    runLogoutFlow(config?.logout ?? { enabled: true }, performLogout).catch(() => {});
-  }, [config?.logout, performLogout]);
+    runLogoutFlow(config?.logout ?? { enabled: true }, performLogout, {
+      label: t('menu.logout'),
+      message: t('menu.logoutConfirm'),
+      cancel: t('action.cancel'),
+    }).catch(() => {});
+  }, [config?.logout, performLogout, t]);
 
   const handleShare = useCallback(async () => {
     const name =
-      profileUser?.name ||
-      `${profileUser?.firstName ?? ''} ${profileUser?.lastName ?? ''}`.trim();
+      nameOrNothing(profileUser?.name) ||
+      composeName(profileUser?.firstName, profileUser?.lastName);
     const id =
       profileUser?.userJID ||
       profileUser?.defaultWallet?.walletAddress ||
@@ -228,8 +247,8 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
 
       showToast({
         id: Date.now().toString(),
-        title: 'Success!',
-        message: 'Room created succusfully!',
+        title: t('toast.success'),
+        message: t('toast.roomCreatedSuccess'),
         type: 'success',
         duration: 3000,
       });
@@ -238,17 +257,18 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
     }
   };
 
-  const handlePrivateMessage = useCallback(async () => {
+  const openPrivateRoom = useCallback(async (e2ee: boolean) => {
     showToast({
       id: Date.now().toString(),
-      title: 'Room creation',
-      message: 'Room is being created...',
+      title: t('toast.roomCreationTitle'),
+      message: t('toast.roomCreating'),
       type: 'info',
       duration: 3000,
     });
     if (config?.newArch) {
       const newRoom = await postPrivateRoom(
-        selectedUser?.userJID ?? (selectedUser?.id || '')
+        selectedUser?.userJID ?? (selectedUser?.id || ''),
+        e2ee
       );
       handleRoomCreation(newRoom, 2);
     } else {
@@ -281,7 +301,18 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
     }
 
     dispatch(setActiveModal(undefined));
-  }, [selectedUser]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [selectedUser, t]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handlePrivateMessage = useCallback(
+    () => openPrivateRoom(false),
+    [openPrivateRoom]
+  );
+  const handleEncryptedPrivateMessage = useCallback(
+    () => openPrivateRoom(true),
+    [openPrivateRoom]
+  );
+  const canStartEncrypted =
+    config?.e2ee?.enabled === true && !!config?.newArch;
 
   const openFile = (file: UserFile) => {
     dispatch(
@@ -333,6 +364,16 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
                     icon: (color: string) => <ChatIcon color={color} />,
                     onPress: handlePrivateMessage,
                   },
+                  ...(canStartEncrypted
+                    ? [
+                        {
+                          key: 'encrypted-message',
+                          label: t('action.encryptedMessage'),
+                          icon: (color: string) => <LockIcon color={color} />,
+                          onPress: handleEncryptedPrivateMessage,
+                        },
+                      ]
+                    : []),
                 ]),
             {
               key: 'share',
@@ -341,7 +382,7 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
               onPress: handleShare,
             },
           ],
-    [isOwnProfile, t, handleShare, handlePrivateMessage, handleLogout] // eslint-disable-line react-hooks/exhaustive-deps
+    [isOwnProfile, t, handleShare, handlePrivateMessage, handleEncryptedPrivateMessage, canStartEncrypted, handleLogout] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
   // Collapsed, the hero's round buttons are gone — the "…" menu carries
@@ -373,8 +414,8 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
   }
 
   const displayName =
-    profileUser?.name ||
-    `${profileUser?.firstName ?? ''} ${profileUser?.lastName ?? ''}`.trim() ||
+    nameOrNothing(profileUser?.name) ||
+    composeName(profileUser?.firstName, profileUser?.lastName) ||
     t('modal.profile.title');
   const heroImage =
     appendFileToken(profileUser?.profileImage, fileToken) || null;
@@ -393,9 +434,12 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
                 testID={`${PREFIX}-language-${option.id}`}
                 activeOpacity={0.7}
                 style={styles.languageRow}
-                onPress={() =>
-                  dispatch(setLangSource(option.id as Iso639_1Codes))
-                }
+                // The same choice Settings offers as "chat language": kept
+                // on the device, and written to the profile when the host
+                // turned that on.
+                onPress={() => {
+                  setChatLanguage(option.id).catch(() => {});
+                }}
               >
                 <Text style={styles.languageLabel}>{option.name}</Text>
                 {selected && (
@@ -529,6 +573,14 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
             </Text>
           </View>
 
+          {!isOwnProfile && config?.e2ee?.enabled === true && (
+            <EncryptionCard
+              account={accountNameOf(profileUser, ownAppId())}
+              style={styles.card}
+              testID="user-profile-e2ee"
+            />
+          )}
+
           {tabs.length > 0 && (
             <View style={styles.card}>
               <View style={styles.tabsRow}>