From 9bc02fd8c347e3861c86b7963ffa0a0da136c54e Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Mon, 20 Jan 2025 20:38:56 +0530
Subject: [PATCH] encryption - WIP

---
 src/app/features/settings/Settings.tsx        |  4 +
 .../settings/encryption/Encryption.tsx        | 77 +++++++++++++++++++
 src/app/features/settings/encryption/index.ts |  1 +
 3 files changed, 82 insertions(+)
 create mode 100644 src/app/features/settings/encryption/Encryption.tsx
 create mode 100644 src/app/features/settings/encryption/index.ts

diff --git a/src/app/features/settings/Settings.tsx b/src/app/features/settings/Settings.tsx
index 51597e7c..5dd954c6 100644
--- a/src/app/features/settings/Settings.tsx
+++ b/src/app/features/settings/Settings.tsx
@@ -12,6 +12,7 @@ import { UserAvatar } from '../../components/user-avatar';
 import { nameInitials } from '../../utils/common';
 import { Notifications } from './notifications';
 import { Sessions } from './sessions';
+import { Encryption } from './encryption';
 import { EmojisStickers } from './emojis-stickers';
 import { DeveloperTools } from './developer-tools';
 import { About } from './about';
@@ -175,6 +176,9 @@ export function Settings({ initialPage, requestClose }: SettingsProps) {
       {activePage === SettingsPages.SessionsPage && (
         <Sessions requestClose={handlePageRequestClose} />
       )}
+      {activePage === SettingsPages.EncryptionPage && (
+        <Encryption requestClose={handlePageRequestClose} />
+      )}
       {activePage === SettingsPages.EmojisStickersPage && (
         <EmojisStickers requestClose={handlePageRequestClose} />
       )}
diff --git a/src/app/features/settings/encryption/Encryption.tsx b/src/app/features/settings/encryption/Encryption.tsx
new file mode 100644
index 00000000..67407bd1
--- /dev/null
+++ b/src/app/features/settings/encryption/Encryption.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { Box, Text, IconButton, Icon, Icons, Scroll } from 'folds';
+import { Page, PageContent, PageHeader } from '../../../components/page';
+import { SequenceCard } from '../../../components/sequence-card';
+import { SequenceCardStyle } from '../styles.css';
+import { SettingTile } from '../../../components/setting-tile';
+
+type EncryptionProps = {
+  requestClose: () => void;
+};
+export function Encryption({ requestClose }: EncryptionProps) {
+  return (
+    <Page>
+      <PageHeader outlined={false}>
+        <Box grow="Yes" gap="200">
+          <Box grow="Yes" alignItems="Center" gap="200">
+            <Text size="H3" truncate>
+              Encryption
+            </Text>
+          </Box>
+          <Box shrink="No">
+            <IconButton onClick={requestClose} variant="Surface">
+              <Icon src={Icons.Cross} />
+            </IconButton>
+          </Box>
+        </Box>
+      </PageHeader>
+      <Box grow="Yes">
+        <Scroll hideTrack visibility="Hover">
+          <PageContent>
+            <Box direction="Column" gap="700">
+              <Box direction="Column" gap="100">
+                <Text size="L400">Online Backup</Text>
+                <SequenceCard
+                  className={SequenceCardStyle}
+                  variant="SurfaceVariant"
+                  direction="Column"
+                  gap="400"
+                >
+                  <SettingTile
+                    title="Messages Online Backup"
+                    description="Always keep secure backup of your encrypted messages data to decrypt messages later."
+                  />
+                </SequenceCard>
+              </Box>
+              <Box direction="Column" gap="100">
+                <Text size="L400">Local Backup</Text>
+                <SequenceCard
+                  className={SequenceCardStyle}
+                  variant="SurfaceVariant"
+                  direction="Column"
+                  gap="400"
+                >
+                  <SettingTile
+                    title="Export Messages Data"
+                    description="Save copy of encryption data on your device to decrypt messages later."
+                  />
+                </SequenceCard>
+                <SequenceCard
+                  className={SequenceCardStyle}
+                  variant="SurfaceVariant"
+                  direction="Column"
+                  gap="400"
+                >
+                  <SettingTile
+                    title="Import Messages Data"
+                    description="Load copy of encryption data from device to decrypt your messages."
+                  />
+                </SequenceCard>
+              </Box>
+            </Box>
+          </PageContent>
+        </Scroll>
+      </Box>
+    </Page>
+  );
+}
diff --git a/src/app/features/settings/encryption/index.ts b/src/app/features/settings/encryption/index.ts
new file mode 100644
index 00000000..8e1560ef
--- /dev/null
+++ b/src/app/features/settings/encryption/index.ts
@@ -0,0 +1 @@
+export * from './Encryption';