[NEW] E2E Encryption

__tests__/__snapshots__/Storyshots.test.js.snap

@@ -3333,6 +3333,165 @@ exports[`Storyshots Message list message 1`] = `
     >
       Edited
     </Text>
+    <Text
+      style={
+        Array [
+          Object {
+            "fontSize": 20,
+            "fontWeight": "300",
+            "marginLeft": 10,
+            "marginVertical": 30,
+          },
+          Object {
+            "color": "#0d0e12",
+          },
+          Object {
+            "marginBottom": 0,
+            "marginTop": 30,
+          },
+        ]
+      }
+    >
+      Encrypted
+    </Text>
+    <View>
+      <View
+        style={
+          Array [
+            Object {
+              "flexDirection": "column",
+              "paddingHorizontal": 14,
+              "paddingVertical": 4,
+              "width": "100%",
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          style={
+            Object {
+              "flexDirection": "row",
+            }
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                },
+                Object {
+                  "marginTop": 4,
+                },
+              ]
+            }
+          />
+          <View
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "marginLeft": 46,
+                },
+                Object {
+                  "marginLeft": 10,
+                },
+              ]
+            }
+          >
+            <View
+              style={
+                Object {
+                  "alignItems": "center",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "System",
+                      "fontSize": 12,
+                      "fontWeight": "300",
+                      "lineHeight": 22,
+                      "paddingLeft": 10,
+                    },
+                    Object {
+                      "color": "#9ca2a8",
+                    },
+                  ]
+                }
+              >
+                10:00 AM
+              </Text>
+            </View>
+            <View>
+              <View
+                style={
+                  Object {
+                    "flexDirection": "row",
+                  }
+                }
+              >
+                <View
+                  style={
+                    Object {
+                      "flex": 1,
+                    }
+                  }
+                >
+                  <Text
+                    numberOfLines={0}
+                    style={
+                      Array [
+                        undefined,
+                        Object {
+                          "color": "#2f343d",
+                        },
+                      ]
+                    }
+                  >
+                    <Text
+                      accessibilityLabel="This message has error and is encrypted"
+                      numberOfLines={0}
+                      style={
+                        Array [
+                          Object {
+                            "backgroundColor": "transparent",
+                            "fontFamily": "System",
+                            "fontSize": 16,
+                            "fontWeight": "400",
+                          },
+                          Array [
+                            Object {},
+                            Object {
+                              "alignItems": "flex-start",
+                              "flexDirection": "row",
+                              "flexWrap": "wrap",
+                              "justifyContent": "flex-start",
+                              "marginBottom": 0,
+                              "marginTop": 0,
+                            },
+                          ],
+                        ]
+                      }
+                    >
+                      This message has error and is encrypted
+                    </Text>
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
     <Text
       style={
         Array [

app/actions/actionsTypes.js

@@ -67,3 +67,4 @@ export const INVITE_LINKS = createRequestTypes('INVITE_LINKS', [
 export const SETTINGS = createRequestTypes('SETTINGS', ['CLEAR', 'ADD']);
 export const APP_STATE = createRequestTypes('APP_STATE', ['FOREGROUND', 'BACKGROUND']);
 export const ENTERPRISE_MODULES = createRequestTypes('ENTERPRISE_MODULES', ['CLEAR', 'SET']);
+export const ENCRYPTION = createRequestTypes('ENCRYPTION', ['INIT', 'STOP', 'DECODE_KEY', 'SET_BANNER']);

app/actions/encryption.js

@@ -0,0 +1,27 @@
+import * as types from './actionsTypes';
+
+export function encryptionInit() {
+	return {
+		type: types.ENCRYPTION.INIT
+	};
+}
+
+export function encryptionStop() {
+	return {
+		type: types.ENCRYPTION.STOP
+	};
+}
+
+export function encryptionSetBanner(banner) {
+	return {
+		type: types.ENCRYPTION.SET_BANNER,
+		banner
+	};
+}
+
+export function encryptionDecodeKey(password) {
+	return {
+		type: types.ENCRYPTION.DECODE_KEY,
+		password
+	};
+}

app/constants/settings.js

@@ -68,6 +68,9 @@ export default {
 	DirectMesssage_maxUsers: {
 		type: 'valueAsNumber'
 	},
+	E2E_Enable: {
+		type: 'valueAsBoolean'
+	},
 	Accounts_Directory_DefaultView: {
 		type: 'valueAsString'
 	},

app/containers/message/Content.js

@@ -9,6 +9,8 @@ import Markdown from '../markdown';
 import { getInfoMessage } from './utils';
 import { themes } from '../../constants/colors';
 import MessageContext from './Context';
+import Encrypted from './Encrypted';
+import { E2E_MESSAGE_TYPE } from '../../lib/encryption/constants';
 
 const Content = React.memo((props) => {
 	if (props.isInfo) {
@@ -22,10 +24,13 @@ const Content = React.memo((props) => {
 		);
 	}
 
+	const isPreview = props.tmid && !props.isThreadRoom;
 	let content = null;
 
 	if (props.tmid && !props.msg) {
 		content = <Text style={[styles.text, { color: themes[props.theme].bodyText }]}>{I18n.t('Sent_an_attachment')}</Text>;
+	} else if (props.isEncrypted) {
+		content = <Text style={[styles.textInfo, { color: themes[props.theme].auxiliaryText }]}>{I18n.t('Encrypted_message')}</Text>;
 	} else {
 		const { baseUrl, user } = useContext(MessageContext);
 		content = (
@@ -35,8 +40,8 @@ const Content = React.memo((props) => {
 				getCustomEmoji={props.getCustomEmoji}
 				username={user.username}
 				isEdited={props.isEdited}
-				numberOfLines={(props.tmid && !props.isThreadRoom) ? 1 : 0}
-				preview={props.tmid && !props.isThreadRoom}
+				numberOfLines={isPreview ? 1 : 0}
+				preview={isPreview}
 				channels={props.channels}
 				mentions={props.mentions}
 				navToRoomInfo={props.navToRoomInfo}
@@ -47,6 +52,21 @@ const Content = React.memo((props) => {
 		);
 	}
 
+	// If this is a encrypted message and is not a preview
+	if (props.type === E2E_MESSAGE_TYPE && !isPreview) {
+		content = (
+			<View style={styles.flex}>
+				<View style={styles.contentContainer}>
+					{content}
+				</View>
+				<Encrypted
+					type={props.type}
+					theme={props.theme}
+				/>
+			</View>
+		);
+	}
+
 	return (
 		<View style={props.isTemp && styles.temp}>
 			{content}
@@ -59,9 +79,15 @@ const Content = React.memo((props) => {
 	if (prevProps.msg !== nextProps.msg) {
 		return false;
 	}
+	if (prevProps.type !== nextProps.type) {
+		return false;
+	}
 	if (prevProps.theme !== nextProps.theme) {
 		return false;
 	}
+	if (prevProps.isEncrypted !== nextProps.isEncrypted) {
+		return false;
+	}
 	if (!equal(prevProps.mentions, nextProps.mentions)) {
 		return false;
 	}
@@ -79,11 +105,13 @@ Content.propTypes = {
 	msg: PropTypes.string,
 	theme: PropTypes.string,
 	isEdited: PropTypes.bool,
+	isEncrypted: PropTypes.bool,
 	getCustomEmoji: PropTypes.func,
 	channels: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
 	mentions: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
 	navToRoomInfo: PropTypes.func,
-	useRealName: PropTypes.bool
+	useRealName: PropTypes.bool,
+	type: PropTypes.string
 };
 Content.displayName = 'MessageContent';
 

app/containers/message/Encrypted.js

@@ -0,0 +1,29 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+
+import Touchable from './Touchable';
+import { E2E_MESSAGE_TYPE } from '../../lib/encryption/constants';
+import { CustomIcon } from '../../lib/Icons';
+import { themes } from '../../constants/colors';
+import { BUTTON_HIT_SLOP } from './utils';
+import MessageContext from './Context';
+import styles from './styles';
+
+const Encrypted = React.memo(({ type, theme }) => {
+	if (type !== E2E_MESSAGE_TYPE) {
+		return null;
+	}
+
+	const { onEncryptedPress } = useContext(MessageContext);
+	return (
+		<Touchable onPress={onEncryptedPress} style={styles.encrypted} hitSlop={BUTTON_HIT_SLOP}>
+			<CustomIcon name='encrypted' size={16} color={themes[theme].auxiliaryText} />
+		</Touchable>
+	);
+});
+Encrypted.propTypes = {
+	type: PropTypes.string,
+	theme: PropTypes.string
+};
+
+export default Encrypted;

app/containers/message/RepliedThread.js

@@ -8,9 +8,10 @@ import { CustomIcon } from '../../lib/Icons';
 import DisclosureIndicator from '../DisclosureIndicator';
 import styles from './styles';
 import { themes } from '../../constants/colors';
+import I18n from '../../i18n';
 
 const RepliedThread = React.memo(({
-	tmid, tmsg, isHeader, fetchThreadName, id, theme
+	tmid, tmsg, isHeader, fetchThreadName, id, isEncrypted, theme
 }) => {
 	if (!tmid || !isHeader) {
 		return null;
@@ -24,6 +25,10 @@ const RepliedThread = React.memo(({
 	let msg = shortnameToUnicode(tmsg);
 	msg = removeMarkdown(msg);
 
+	if (isEncrypted) {
+		msg = I18n.t('Encrypted_message');
+	}
+
 	return (
 		<View style={styles.repliedThread} testID={`message-thread-replied-on-${ msg }`}>
 			<CustomIcon name='threads' size={20} style={styles.repliedThreadIcon} color={themes[theme].tintColor} />
@@ -38,6 +43,9 @@ const RepliedThread = React.memo(({
 	if (prevProps.tmsg !== nextProps.tmsg) {
 		return false;
 	}
+	if (prevProps.isEncrypted !== nextProps.isEncrypted) {
+		return false;
+	}
 	if (prevProps.isHeader !== nextProps.isHeader) {
 		return false;
 	}
@@ -53,7 +61,8 @@ RepliedThread.propTypes = {
 	id: PropTypes.string,
 	isHeader: PropTypes.bool,
 	theme: PropTypes.string,
-	fetchThreadName: PropTypes.func
+	fetchThreadName: PropTypes.func,
+	isEncrypted: PropTypes.bool
 };
 RepliedThread.displayName = 'MessageRepliedThread';