From 8e7bbc279d08a82854417c15fbfcd3bb2fb0a25a Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 15 Dec 2023 22:24:41 +0100
Subject: [PATCH] fix: some design

---
 .../auth/security/+page.svelte                |  5 ++
 .../auth/security/updatePwnd.svelte           | 40 ---------
 .../auth/security/updatePwned.svelte          | 81 +++++++++++++++++++
 3 files changed, 86 insertions(+), 40 deletions(-)
 delete mode 100644 src/routes/console/project-[project]/auth/security/updatePwnd.svelte
 create mode 100644 src/routes/console/project-[project]/auth/security/updatePwned.svelte

diff --git a/src/routes/console/project-[project]/auth/security/+page.svelte b/src/routes/console/project-[project]/auth/security/+page.svelte
index f69b91395..dd2a63c66 100644
--- a/src/routes/console/project-[project]/auth/security/+page.svelte
+++ b/src/routes/console/project-[project]/auth/security/+page.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
     import { Container } from '$lib/layout';
+    import { isCloud } from '$lib/system';
     import UpdatePasswordDictionary from './updatePasswordDictionary.svelte';
     import UpdatePasswordHistory from './updatePasswordHistory.svelte';
     import UpdatePersonalDataCheck from './updatePersonalDataCheck.svelte';
+    import UpdatePwned from './updatePwned.svelte';
     import UpdateSessionLength from './updateSessionLength.svelte';
     import UpdateSessionsLimit from './updateSessionsLimit.svelte';
     import UpdateUsersLimit from './updateUsersLimit.svelte';
@@ -15,4 +17,7 @@
     <UpdatePasswordHistory />
     <UpdatePasswordDictionary />
     <UpdatePersonalDataCheck />
+    {#if isCloud}
+        <UpdatePwned />
+    {/if}
 </Container>
diff --git a/src/routes/console/project-[project]/auth/security/updatePwnd.svelte b/src/routes/console/project-[project]/auth/security/updatePwnd.svelte
deleted file mode 100644
index cc819e3aa..000000000
--- a/src/routes/console/project-[project]/auth/security/updatePwnd.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<script>
-    import { CardGrid, Heading } from '$lib/components';
-    import { Button, FormList, InputSwitch } from '$lib/elements/forms';
-</script>
-
-<CardGrid>
-    <Heading tag="h6" size="7">Services</Heading>
-    <p class="text">
-        Choose services you wish to enable or disable for the client API. When disabled, the
-        services are not accessible to client SDKs but remain accessible to server SDKs.
-    </p>
-    <svelte:fragment slot="aside">
-        <div>
-            <ul class="buttons-list u-main-end">
-                <li class="buttons-list-item">
-                    <Button text={true} on:click={() => toggleAllServices(true)}>Enable all</Button>
-                </li>
-                <li class="buttons-list-item">
-                    <Button text={true} on:click={() => toggleAllServices(false)}>
-                        Disable all
-                    </Button>
-                </li>
-            </ul>
-            <div class="u-sep-block-start u-padding-block-8 u-margin-block-start-8" />
-            <form class="form">
-                <FormList class="is-multiple">
-                    {#each $services.list as service}
-                        <InputSwitch
-                            label={service.label}
-                            id={service.method}
-                            bind:value={service.value}
-                            on:change={() => {
-                                serviceUpdate(service);
-                            }} />
-                    {/each}
-                </FormList>
-            </form>
-        </div>
-    </svelte:fragment>
-</CardGrid>
diff --git a/src/routes/console/project-[project]/auth/security/updatePwned.svelte b/src/routes/console/project-[project]/auth/security/updatePwned.svelte
new file mode 100644
index 000000000..1efd11837
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/security/updatePwned.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+    import { Alert, CardGrid, Heading } from '$lib/components';
+    import { Button, FormList, InputSwitch } from '$lib/elements/forms';
+    import { organization } from '$lib/stores/organization';
+    import { wizard } from '$lib/stores/wizard';
+    import { isCloud } from '$lib/system';
+    import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
+
+    let value = false;
+</script>
+
+<CardGrid>
+    <Heading tag="h6" size="7">Password Pwned</Heading>
+    <p class="text">
+        Check if your users' password has been compromised in a data breach using the
+        <Button href="https://haveibeenpwned.com/API/v3#PwnedPasswords" link external
+            >Have I Been Pwned</Button> API.
+    </p>
+    <svelte:fragment slot="aside">
+        {#if isCloud && $organization.billingPlan === 'tier-0'}
+            <Alert type="warning">
+                <p class="text">
+                    You have 234 users with compromised passwords. To view the full list of
+                    compromised users, upgrade you plan.
+                </p>
+                <svelte:fragment slot="buttons">
+                    <Button text on:click={() => wizard.start(ChangeOrganizationTierCloud)}>
+                        Upgrade plan
+                    </Button>
+                </svelte:fragment>
+            </Alert>
+        {:else}
+            <div>
+                <div class="u-flex u-flex-vertical-mobile u-main-space-between u-gap-16">
+                    <ul class="buttons-list">
+                        <li class="buttons-list-item">
+                            <Button text={true} on:click>Send notification</Button>
+                        </li>
+                        <li class="buttons-list-item">
+                            <Button text={true} on:click>Force password reset</Button>
+                        </li>
+                    </ul>
+                    <Button secondary on:click>
+                        <span class="text">View list</span>
+                    </Button>
+                </div>
+                <div class="u-sep-block-start u-padding-block-8 u-margin-block-start-8" />
+
+                <Alert type="info">
+                    <p class="text">You have 234 users with compromised passwords.</p>
+                </Alert>
+                <form class="form u-margin-block-start-24">
+                    <FormList>
+                        <InputSwitch
+                            label="Enable pwned password check"
+                            id="pwned-password"
+                            bind:value
+                            on:change={() => {
+                                console.log('w');
+                            }}>
+                            <svelte:fragment slot="description">
+                                <p>
+                                    Enable password check using the <a
+                                        href="https://haveibeenpwned.com/API/v3#PwnedPasswords"
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        class="link">Have I Been Pwned</a> API.
+                                </p>
+                            </svelte:fragment>
+                        </InputSwitch>
+                    </FormList>
+                </form>
+            </div>
+        {/if}
+    </svelte:fragment>
+    <svelte:fragment slot="actions">
+        {#if $organization.billingPlan === 'tier-0'}
+            <Button>Update</Button>
+        {/if}
+    </svelte:fragment>
+</CardGrid>