From 6e32a15cade7d350d1cdee3e6bfcdb68e6b92d19 Mon Sep 17 00:00:00 2001
From: Gung Wah <41157464+kresnaputra@users.noreply.github.com>
Date: Thu, 25 Feb 2021 00:33:39 +0800
Subject: [PATCH] [FIX] System message of e2e encryption is missing (#2888)

* [FIX] System message of e2e encryption missing

* add new encryption string

* add to stories

* Add pt-BR

* Move stories

Co-authored-by: Diego Mello <diegolmello@gmail.com>
---
 .../__snapshots__/Storyshots.test.js.snap     | 303 ++++++++++++++++++
 app/containers/message/utils.js               |   8 +-
 app/i18n/locales/en.js                        |   4 +-
 app/i18n/locales/pt-BR.js                     |   4 +-
 storybook/stories/Message.js                  |   4 +
 5 files changed, 320 insertions(+), 3 deletions(-)

diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap
index 17bfb4dd..0eb72257 100644
--- a/__tests__/__snapshots__/Storyshots.test.js.snap
+++ b/__tests__/__snapshots__/Storyshots.test.js.snap
@@ -44404,6 +44404,309 @@ exports[`Storyshots Message list message 1`] = `
         </View>
       </View>
     </View>
+    <Text
+      style={
+        Array [
+          Object {
+            "fontSize": 20,
+            "fontWeight": "300",
+            "marginLeft": 10,
+            "marginVertical": 30,
+          },
+          Object {
+            "color": "#0d0e12",
+          },
+          Object {
+            "marginBottom": 0,
+            "marginTop": 30,
+          },
+        ]
+      }
+    >
+      Toggle e2e encryption
+    </Text>
+    <View
+      accessible={true}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "opacity": 1,
+        }
+      }
+    >
+      <View>
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "column",
+                "paddingHorizontal": 14,
+                "paddingVertical": 4,
+                "width": "100%",
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Object {
+                "flexDirection": "row",
+              }
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderRadius": 2,
+                    "height": 20,
+                    "width": 20,
+                  },
+                  Object {
+                    "marginLeft": 16,
+                  },
+                ]
+              }
+            >
+              <View
+                accessible={true}
+                focusable={true}
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Object {
+                    "opacity": 1,
+                  }
+                }
+              >
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "overflow": "hidden",
+                      },
+                      Object {
+                        "borderRadius": 2,
+                        "height": 20,
+                        "width": 20,
+                      },
+                    ]
+                  }
+                >
+                  <FastImageView
+                    resizeMode="cover"
+                    source={
+                      Object {
+                        "headers": undefined,
+                        "priority": "high",
+                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=20",
+                      }
+                    }
+                    style={
+                      Object {
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  />
+                </View>
+              </View>
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "marginLeft": 46,
+                  },
+                  Object {
+                    "marginLeft": 10,
+                  },
+                ]
+              }
+            >
+              <Text
+                accessibilityLabel="This room's encryption has been disabled by diego.mello"
+                style={
+                  Array [
+                    Object {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "System",
+                      "fontSize": 16,
+                      "fontStyle": "italic",
+                      "fontWeight": "400",
+                      "textAlign": "left",
+                    },
+                    Object {
+                      "color": "#9ca2a8",
+                    },
+                  ]
+                }
+              >
+                This room's encryption has been disabled by diego.mello
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+    <View
+      accessible={true}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "opacity": 1,
+        }
+      }
+    >
+      <View>
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "column",
+                "paddingHorizontal": 14,
+                "paddingVertical": 4,
+                "width": "100%",
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Object {
+                "flexDirection": "row",
+              }
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderRadius": 2,
+                    "height": 20,
+                    "width": 20,
+                  },
+                  Object {
+                    "marginLeft": 16,
+                  },
+                ]
+              }
+            >
+              <View
+                accessible={true}
+                focusable={true}
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Object {
+                    "opacity": 1,
+                  }
+                }
+              >
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "overflow": "hidden",
+                      },
+                      Object {
+                        "borderRadius": 2,
+                        "height": 20,
+                        "width": 20,
+                      },
+                    ]
+                  }
+                >
+                  <FastImageView
+                    resizeMode="cover"
+                    source={
+                      Object {
+                        "headers": undefined,
+                        "priority": "high",
+                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=20",
+                      }
+                    }
+                    style={
+                      Object {
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  />
+                </View>
+              </View>
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "marginLeft": 46,
+                  },
+                  Object {
+                    "marginLeft": 10,
+                  },
+                ]
+              }
+            >
+              <Text
+                accessibilityLabel="This room's encryption has been enabled by diego.mello"
+                style={
+                  Array [
+                    Object {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "System",
+                      "fontSize": 16,
+                      "fontStyle": "italic",
+                      "fontWeight": "400",
+                      "textAlign": "left",
+                    },
+                    Object {
+                      "color": "#9ca2a8",
+                    },
+                  ]
+                }
+              >
+                This room's encryption has been enabled by diego.mello
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
     <Text
       style={
         Array [
diff --git a/app/containers/message/utils.js b/app/containers/message/utils.js
index 325d3d76..22f4d90c 100644
--- a/app/containers/message/utils.js
+++ b/app/containers/message/utils.js
@@ -37,7 +37,9 @@ export const SYSTEM_MESSAGES = [
 	'room_changed_privacy',
 	'room_changed_avatar',
 	'message_snippeted',
-	'thread-created'
+	'thread-created',
+	'room_e2e_enabled',
+	'room_e2e_disabled'
 ];
 
 export const SYSTEM_MESSAGE_TYPES = {
@@ -100,6 +102,10 @@ export const getInfoMessage = ({
 		return I18n.t('Room_changed_avatar', { userBy: username });
 	} else if (type === 'message_snippeted') {
 		return I18n.t('Created_snippet');
+	} else if (type === 'room_e2e_disabled') {
+		return I18n.t('This_room_encryption_has_been_disabled_by__username_', { username });
+	} else if (type === 'room_e2e_enabled') {
+		return I18n.t('This_room_encryption_has_been_enabled_by__username_', { username });
 	}
 	return '';
 };
diff --git a/app/i18n/locales/en.js b/app/i18n/locales/en.js
index c35da810..02adcb46 100644
--- a/app/i18n/locales/en.js
+++ b/app/i18n/locales/en.js
@@ -704,5 +704,7 @@ export default {
 	Direct_message: 'Direct message',
 	Message_Ignored: 'Message ignored. Tap to display it.',
 	Enter_workspace_URL: 'Enter workspace URL',
-	Workspace_URL_Example: 'Ex. your-company.rocket.chat'
+	Workspace_URL_Example: 'Ex. your-company.rocket.chat',
+	This_room_encryption_has_been_enabled_by__username_: 'This room\'s encryption has been enabled by {{username}}',
+	This_room_encryption_has_been_disabled_by__username_: 'This room\'s encryption has been disabled by {{username}}'
 };
diff --git a/app/i18n/locales/pt-BR.js b/app/i18n/locales/pt-BR.js
index 3819a3b3..e3dc8e10 100644
--- a/app/i18n/locales/pt-BR.js
+++ b/app/i18n/locales/pt-BR.js
@@ -651,5 +651,7 @@ export default {
 	Direct_message: 'Mensagem direta',
 	Message_Ignored: 'Mensagem ignorada. Toque para mostrar.',
 	Enter_workspace_URL: 'Digite a URL da sua workspace',
-	Workspace_URL_Example: 'Ex. sua-empresa.rocket.chat'
+	Workspace_URL_Example: 'Ex. sua-empresa.rocket.chat',
+	This_room_encryption_has_been_enabled_by__username_: 'A criptografia para essa sala foi habilitada por {{username}}',
+	This_room_encryption_has_been_disabled_by__username_: 'A criptografia para essa sala foi desabilitada por {{username}}'
 };
diff --git a/storybook/stories/Message.js b/storybook/stories/Message.js
index e2f67a46..7e8e0664 100644
--- a/storybook/stories/Message.js
+++ b/storybook/stories/Message.js
@@ -821,6 +821,10 @@ export default ({ theme }) => {
 			<Separator title='Changed type' theme={theme} />
 			<Message msg='public' type='room_changed_privacy' isInfo />
 
+			<Separator title='Toggle e2e encryption' theme={theme} />
+			<Message type='room_e2e_disabled' isInfo />
+			<Message type='room_e2e_enabled' isInfo />
+
 			<Separator title='Ignored' theme={theme} />
 			<Message isIgnored />