From a6420913234a32e21f8bc45f0686c8cd45d64b68 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 13 Jun 2022 14:12:47 +0200
Subject: [PATCH] feat: implemented new alert component

---
 .../[project]/users/_appleOAuth.svelte        | 24 +++++++++++++------
 .../[project]/users/_auth0OAuth.svelte        | 15 ++++++------
 .../console/[project]/users/_mainOAuth.svelte | 15 ++++++------
 .../[project]/users/_microsoftOAuth.svelte    | 15 ++++++------
 .../console/[project]/users/_oktaOAuth.svelte | 15 ++++++------
 5 files changed, 49 insertions(+), 35 deletions(-)

diff --git a/src/routes/console/[project]/users/_appleOAuth.svelte b/src/routes/console/[project]/users/_appleOAuth.svelte
index 580d1e87e..11b7cafca 100644
--- a/src/routes/console/[project]/users/_appleOAuth.svelte
+++ b/src/routes/console/[project]/users/_appleOAuth.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Modal, Copy, InfoSection } from '$lib/components';
+    import { Modal, Copy, Alert } from '$lib/components';
     import { Button, InputText, InputTextarea, InputSwitch, Form } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
@@ -31,6 +31,15 @@
 <Form on:submit={update}>
     <Modal bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+        <p>
+            To use Apple authentication in your application, first fill in this form. For more info
+            you can
+            <a
+                class="link"
+                href="https://developer.apple.com/"
+                target="_blank"
+                rel="noopener noreferrer">visit the docs.</a>
+        </p>
         <InputSwitch
             id="state"
             bind:value={provider.active}
@@ -64,15 +73,16 @@
             placeholder=""
             bind:value={provider.p8} />
 
-        <InfoSection>
+        <Alert type="info">
             <p>
                 To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
             </p>
-            <Copy
-                value={`${
-                    sdkForConsole.config.endpoint
-                }/account/session/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
-        </InfoSection>
+        </Alert>
+        <p>URI</p>
+        <Copy
+            value={`${
+                sdkForConsole.config.endpoint
+            }/account/session/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
         <svelte:fragment slot="footer">
             <Button secondary on:click={() => (showModal = false)}>Cancel</Button>
             <Button submit>Update</Button>
diff --git a/src/routes/console/[project]/users/_auth0OAuth.svelte b/src/routes/console/[project]/users/_auth0OAuth.svelte
index 537f9311b..0ce7715c4 100644
--- a/src/routes/console/[project]/users/_auth0OAuth.svelte
+++ b/src/routes/console/[project]/users/_auth0OAuth.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Modal, Copy, InfoSection } from '$lib/components';
+    import { Modal, Copy, Alert } from '$lib/components';
     import { Button, InputPassword, InputText, InputSwitch, Form } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
@@ -55,15 +55,16 @@
             autocomplete={false}
             placeholder="Your Auth0 domain"
             bind:value={provider.domain} />
-        <InfoSection>
+        <Alert type="info">
             <p>
                 To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
             </p>
-            <Copy
-                value={`${
-                    sdkForConsole.config.endpoint
-                }/account/session/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
-        </InfoSection>
+        </Alert>
+        <p>URI</p>
+        <Copy
+            value={`${
+                sdkForConsole.config.endpoint
+            }/account/session/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
         <svelte:fragment slot="footer">
             <Button secondary on:click={() => (showModal = false)}>Cancel</Button>
             <Button submit>Update</Button>
diff --git a/src/routes/console/[project]/users/_mainOAuth.svelte b/src/routes/console/[project]/users/_mainOAuth.svelte
index e62e4284f..bce1f5bbb 100644
--- a/src/routes/console/[project]/users/_mainOAuth.svelte
+++ b/src/routes/console/[project]/users/_mainOAuth.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Modal, Copy, InfoSection } from '$lib/components';
+    import { Modal, Copy, Alert } from '$lib/components';
     import { Button, InputPassword, InputText, InputSwitch, Form } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
@@ -48,15 +48,16 @@
             placeholder="Enter App Secret"
             meter={false}
             bind:value={provider.secret} />
-        <InfoSection>
+        <Alert type="info">
             <p>
                 To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
             </p>
-            <Copy
-                value={`${
-                    sdkForConsole.config.endpoint
-                }/account/session/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
-        </InfoSection>
+        </Alert>
+        <p>URI</p>
+        <Copy
+            value={`${
+                sdkForConsole.config.endpoint
+            }/account/session/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
         <svelte:fragment slot="footer">
             <Button secondary on:click={() => (showModal = false)}>Cancel</Button>
             <Button submit>Update</Button>
diff --git a/src/routes/console/[project]/users/_microsoftOAuth.svelte b/src/routes/console/[project]/users/_microsoftOAuth.svelte
index 21024b69a..5e97219ca 100644
--- a/src/routes/console/[project]/users/_microsoftOAuth.svelte
+++ b/src/routes/console/[project]/users/_microsoftOAuth.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Modal, Copy, InfoSection } from '$lib/components';
+    import { Modal, Copy, Alert } from '$lib/components';
     import { Button, InputPassword, InputText, InputSwitch, Form } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
@@ -55,15 +55,16 @@
             autocomplete={false}
             placeholder="'common','organizations','consumers' or your TenantID"
             bind:value={provider.id} />
-        <InfoSection>
+        <Alert type="info">
             <p>
                 To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
             </p>
-            <Copy
-                value={`${
-                    sdkForConsole.config.endpoint
-                }/account/session/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
-        </InfoSection>
+        </Alert>
+        <p>URI</p>
+        <Copy
+            value={`${
+                sdkForConsole.config.endpoint
+            }/account/session/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
         <svelte:fragment slot="footer">
             <Button secondary on:click={() => (showModal = false)}>Cancel</Button>
             <Button submit>Update</Button>
diff --git a/src/routes/console/[project]/users/_oktaOAuth.svelte b/src/routes/console/[project]/users/_oktaOAuth.svelte
index 1bdc765f5..3f0b11b29 100644
--- a/src/routes/console/[project]/users/_oktaOAuth.svelte
+++ b/src/routes/console/[project]/users/_oktaOAuth.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Modal, Copy, InfoSection } from '$lib/components';
+    import { Modal, Copy, Alert } from '$lib/components';
     import { Button, InputPassword, InputText, InputSwitch, Form } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
@@ -62,15 +62,16 @@
             autocomplete={false}
             placeholder="default"
             bind:value={provider.server} />
-        <InfoSection>
+        <Alert type="info">
             <p>
                 To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
             </p>
-            <Copy
-                value={`${
-                    sdkForConsole.config.endpoint
-                }/account/session/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
-        </InfoSection>
+        </Alert>
+        <p>URI</p>
+        <Copy
+            value={`${
+                sdkForConsole.config.endpoint
+            }/account/session/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
         <svelte:fragment slot="footer">
             <Button secondary on:click={() => (showModal = false)}>Cancel</Button>
             <Button submit>Update</Button>