From e53acfd9b451f37d37dc2d58ff9cced44d5309e6 Mon Sep 17 00:00:00 2001
From: loks0n <22452787+loks0n@users.noreply.github.com>
Date: Thu, 7 Nov 2024 16:16:53 +0100
Subject: [PATCH] feat: new design

---
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 10 +--
 src/lib/actions/analytics.ts                  |  2 +-
 .../auth/security/+page.svelte                |  4 +-
 .../security/updateMembershipPrivacy.svelte   | 85 +++++++++++++++++++
 .../updateTeamsSensitiveAttributes.svelte     | 59 -------------
 6 files changed, 94 insertions(+), 68 deletions(-)
 create mode 100644 src/routes/(console)/project-[project]/auth/security/updateMembershipPrivacy.svelte
 delete mode 100644 src/routes/(console)/project-[project]/auth/security/updateTeamsSensitiveAttributes.svelte

diff --git a/package.json b/package.json
index f55a38aa9..0e27a3ec7 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
         "e2e:ui": "playwright test tests/e2e --ui"
     },
     "dependencies": {
-        "@appwrite.io/console": "1.4.2",
+        "@appwrite.io/console": "1.4.4",
         "@appwrite.io/pink": "0.25.0",
         "@appwrite.io/pink-icons": "0.25.0",
         "@popperjs/core": "^2.11.8",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c1a0c7cd4..6c19bfd41 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       '@appwrite.io/console':
-        specifier: 1.4.2
-        version: 1.4.2
+        specifier: 1.4.4
+        version: 1.4.4
       '@appwrite.io/pink':
         specifier: 0.25.0
         version: 0.25.0
@@ -193,8 +193,8 @@ packages:
   '@analytics/type-utils@0.6.2':
     resolution: {integrity: sha512-TD+xbmsBLyYy/IxFimW/YL/9L2IEnM7/EoV9Aeh56U64Ify8o27HJcKjo38XY9Tcn0uOq1AX3thkKgvtWvwFQg==}
 
-  '@appwrite.io/console@1.4.2':
-    resolution: {integrity: sha512-2YQCjHGrgA2Nr5R83zQLsyDB7Pu8k5NUvzwQtutvG1S9K1AeIkDcuINm0QwJIwz8ZtfQbkfuvn88CXicI+I9Uw==}
+  '@appwrite.io/console@1.4.4':
+    resolution: {integrity: sha512-0B7PEHJIi0eS8+WQOs7RNwY+j3gffMTz6DKyvZAEJbe4550UnmTn4i8pxmyaiEVbhlqIVZ+QD8jVrjXqtkPK6Q==}
 
   '@appwrite.io/pink-icons@0.25.0':
     resolution: {integrity: sha512-0O3i2oEuh5mWvjO80i+X6rbzrWLJ1m5wmv2/M3a1p2PyBJsFxN8xQMTEmTn3Wl/D26SsM7SpzbdW6gmfgoVU9Q==}
@@ -3827,7 +3827,7 @@ snapshots:
 
   '@analytics/type-utils@0.6.2': {}
 
-  '@appwrite.io/console@1.4.2': {}
+  '@appwrite.io/console@1.4.4': {}
 
   '@appwrite.io/pink-icons@0.25.0': {}
 
diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
index 36b478f63..036cf56c8 100644
--- a/src/lib/actions/analytics.ts
+++ b/src/lib/actions/analytics.ts
@@ -196,7 +196,7 @@ export enum Submit {
     AuthPasswordDictionaryUpdate = 'submit_auth_password_dictionary_update',
     AuthPersonalDataCheckUpdate = 'submit_auth_personal_data_check_update',
     AuthSessionAlertsUpdate = 'submit_auth_session_alerts_update',
-    AuthTeamsSensitiveAttributesUpdate = 'submit_auth_teams_sensitive_attributes_update',
+    AuthMembershipPrivacyUpdate = 'submit_auth_membership_privacy_update',
     AuthMockNumbersUpdate = 'submit_auth_mock_numbers_update',
     SessionsLengthUpdate = 'submit_sessions_length_update',
     SessionsLimitUpdate = 'submit_sessions_limit_update',
diff --git a/src/routes/(console)/project-[project]/auth/security/+page.svelte b/src/routes/(console)/project-[project]/auth/security/+page.svelte
index 8c359da3e..279eadc8f 100644
--- a/src/routes/(console)/project-[project]/auth/security/+page.svelte
+++ b/src/routes/(console)/project-[project]/auth/security/+page.svelte
@@ -9,7 +9,7 @@
     import UpdateSessionAlerts from './updateSessionAlerts.svelte';
     import UpdateSessionLength from './updateSessionLength.svelte';
     import UpdateSessionsLimit from './updateSessionsLimit.svelte';
-    import UpdateTeamsSensitiveAttributes from './updateTeamsSensitiveAttributes.svelte';
+    import UpdateMembershipPrivacy from './updateMembershipPrivacy.svelte';
     import UpdateUsersLimit from './updateUsersLimit.svelte';
 </script>
 
@@ -23,6 +23,6 @@
     <UpdateSessionAlerts />
     <UpdateMockNumbers />
     {#if $organization.billingPlan !== BillingPlan.SCALE}
-        <UpdateTeamsSensitiveAttributes />
+        <UpdateMembershipPrivacy />
     {/if}
 </Container>
diff --git a/src/routes/(console)/project-[project]/auth/security/updateMembershipPrivacy.svelte b/src/routes/(console)/project-[project]/auth/security/updateMembershipPrivacy.svelte
new file mode 100644
index 000000000..98302081f
--- /dev/null
+++ b/src/routes/(console)/project-[project]/auth/security/updateMembershipPrivacy.svelte
@@ -0,0 +1,85 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { CardGrid, Heading } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, Form } from '$lib/elements/forms';
+    import { FormList } from '$lib/elements/forms';
+    import InputCheckbox from '$lib/elements/forms/inputCheckbox.svelte';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { project } from '../../store';
+
+    let authMembershipsUserName = $project?.authMembershipsUserName ?? true;
+    let authMembershipsUserEmail = $project?.authMembershipsUserEmail ?? true;
+    let authMembershipsMfa = $project?.authMembershipsMfa ?? true;
+
+    async function updateMembershipsPrivacy() {
+        try {
+            await sdk.forConsole.projects.updateMembershipsPrivacy(
+                $project.$id,
+                authMembershipsUserName,
+                authMembershipsUserEmail,
+                authMembershipsMfa
+            );
+            await invalidate(Dependencies.PROJECT);
+            addNotification({
+                type: 'success',
+                message: 'Updated memberships privacy'
+            });
+            trackEvent(Submit.AuthMembershipPrivacyUpdate);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.AuthMembershipPrivacyUpdate);
+        }
+    }
+</script>
+
+<Form onSubmit={updateMembershipsPrivacy}>
+    <CardGrid>
+        <Heading tag="h2" size="7" id="personal-data">Memberships privacy</Heading>
+        <p>
+            Set privacy preferences to manage which details team members can view about one another.
+        </p>
+        <svelte:fragment slot="aside">
+            <FormList>
+                <div class="u-flex-vertical u-gap-8 body-text-2">
+                    <InputCheckbox
+                        bind:checked={authMembershipsUserName}
+                        id="membershipsUserName"
+                        label="Name" />
+                    <p class="u-margin-inline-28">Display team members' usernames to to others</p>
+                </div>
+                <div class="u-flex-vertical u-gap-8 body-text-2">
+                    <InputCheckbox
+                        bind:checked={authMembershipsUserEmail}
+                        id="membershipsUserEmail"
+                        label="Email" />
+                    <p class="u-margin-inline-28">
+                        Allow team members to view each other's email addresses
+                    </p>
+                </div>
+                <div class="u-flex-vertical u-gap-8 body-text-2">
+                    <InputCheckbox
+                        bind:checked={authMembershipsMfa}
+                        id="membershipsMfa"
+                        label="MFA status" />
+                    <p class="u-margin-inline-28">
+                        Show if team members have multi-factor authentication enabled
+                    </p>
+                </div>
+            </FormList>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button
+                disabled={authMembershipsUserName === ($project?.authMembershipsUserName ?? true) &&
+                    authMembershipsUserEmail === ($project?.authMembershipsUserName ?? true) &&
+                    authMembershipsMfa === ($project?.authMembershipsMfa ?? true)}
+                submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
diff --git a/src/routes/(console)/project-[project]/auth/security/updateTeamsSensitiveAttributes.svelte b/src/routes/(console)/project-[project]/auth/security/updateTeamsSensitiveAttributes.svelte
deleted file mode 100644
index 370eb5edb..000000000
--- a/src/routes/(console)/project-[project]/auth/security/updateTeamsSensitiveAttributes.svelte
+++ /dev/null
@@ -1,59 +0,0 @@
-<script lang="ts">
-    import { invalidate } from '$app/navigation';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
-    import { Dependencies } from '$lib/constants';
-    import { Button, Form, InputSwitch } from '$lib/elements/forms';
-    import { FormList } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdk } from '$lib/stores/sdk';
-    import { project } from '../../store';
-
-    let authTeamsSensitiveAttributes = $project?.teamsSensitiveAttributes ?? true;
-
-    async function updateTeamsSensitiveAttributes() {
-        try {
-            await sdk.forConsole.projects.updatePersonalDataCheck(
-                $project.$id,
-                authTeamsSensitiveAttributes
-            );
-            await invalidate(Dependencies.PROJECT);
-            addNotification({
-                type: 'success',
-                message: 'Toggled teams sensitive attributes'
-            });
-            trackEvent(Submit.AuthTeamsSensitiveAttributesUpdate);
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.AuthTeamsSensitiveAttributesUpdate);
-        }
-    }
-</script>
-
-<Form onSubmit={updateTeamsSensitiveAttributes}>
-    <CardGrid>
-        <Heading tag="h2" size="7" id="personal-data">Teams sensitive attributes</Heading>
-        <svelte:fragment slot="aside">
-            <FormList>
-                <InputSwitch
-                    bind:value={authTeamsSensitiveAttributes}
-                    id="teamsSensitiveAttributes"
-                    label="Show sensitive attributes in teams" />
-            </FormList>
-            <p class="text">
-                When enabled, sensitive attributes are provided in team membership response model.
-                This includes the <code>userName</code>, <code>userEmail</code>, and
-                <code>mfa</code> attributes.
-            </p>
-        </svelte:fragment>
-
-        <svelte:fragment slot="actions">
-            <Button
-                disabled={authTeamsSensitiveAttributes === $project?.teamsSensitiveAttributes}
-                submit>Update</Button>
-        </svelte:fragment>
-    </CardGrid>
-</Form>