From 10afbd9777a47a0f339da7acc833acb85bad6aae Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Tue, 23 May 2023 10:17:15 -0700
Subject: [PATCH] Update the OAuth2 success and failure pages

1. Update design to be more consistent with other pages, while still
unbranded
2. Update sizing to be more mobile friendly as the original heading
size was truncated on mobile
3. Show a different message when redirecting back to the app to clarify
the login was successful
4. Close the window after redirecting so the user doesn't have to
---
 src/routes/auth/oauth2/failure/+page.svelte | 60 ++++++++++++++++-----
 src/routes/auth/oauth2/success/+page.svelte | 60 ++++++++++++++++-----
 2 files changed, 96 insertions(+), 24 deletions(-)

diff --git a/src/routes/auth/oauth2/failure/+page.svelte b/src/routes/auth/oauth2/failure/+page.svelte
index 359c6ffdca..928ad82c4e 100644
--- a/src/routes/auth/oauth2/failure/+page.svelte
+++ b/src/routes/auth/oauth2/failure/+page.svelte
@@ -2,20 +2,56 @@
     import { goto } from '$app/navigation';
     import { page } from '$app/stores';
     import { Heading } from '$lib/components';
-    import { onMount } from 'svelte';
 
-    onMount(async () => {
-        const project = $page.url.searchParams.get('project');
-        if (project) {
-            await goto(`appwrite-callback-${project}://${$page.url.search}`);
+    const project = $page.url.searchParams.get('project');
+    const link = `appwrite-callback-${project}://${$page.url.search}`;
+
+    const redirect = new Promise((resolve, reject) => {
+        if (!project) {
+            reject('no-project');
         }
+        // this timeout is needed because goto does not
+        // throw an exception if the redirect does not work
+        setTimeout(() => reject('timeout'), 500);
+        // goto will resolve on successful redirect
+        goto(link).then(resolve);
     });
 </script>
 
-<Heading tag="h1" size="1">Missing Redirect URL</Heading>
-<p class="text">
-    Your OAuth login flow is missing a proper redirect URL. Please check the
-    <a class="link" href="https://appwrite.io/docs/client/account?sdk=web#createOAuth2Session"
-        >OAuth docs</a>
-    and send request for new session with a valid callback URL.
-</p>
+{#await redirect then}
+    <article class="card u-padding-16">
+        <div class="u-flex u-flex-vertical u-gap-16">
+            <Heading tag="h1" size="4">Login failed</Heading>
+            <p class="text">You will be automatically redirected back to your app shortly.</p>
+            <p class="text">
+                If you are not redirected, please click on the following
+                <a class="link" href={`appwrite-callback-${project}://${$page.url.search}`}>link</a
+                >.
+            </p>
+        </div>
+    </article>
+{:catch}
+    <article class="card u-padding-16">
+        <div class="u-flex u-flex-vertical u-gap-16">
+            <Heading tag="h1" size="4">Missing Redirect URL</Heading>
+            <p class="text">
+                Your OAuth login flow is missing a proper redirect URL. Please check the
+                <a
+                    class="link"
+                    href="https://appwrite.io/docs/client/account?sdk=web#createOAuth2Session"
+                    >OAuth docs</a>
+                and send request for new session with a valid callback URL.
+            </p>
+        </div>
+    </article>
+{/await}
+
+<style lang="scss">
+    @import '@appwrite.io/pink/src/abstract/variables/_devices.scss';
+    // override padding for screens bigger than mobile
+    @media #{$break2open} {
+        article.card {
+            padding: 2rem !important;
+        }
+    }
+</style>
diff --git a/src/routes/auth/oauth2/success/+page.svelte b/src/routes/auth/oauth2/success/+page.svelte
index 359c6ffdca..b67ad0ce6f 100644
--- a/src/routes/auth/oauth2/success/+page.svelte
+++ b/src/routes/auth/oauth2/success/+page.svelte
@@ -2,20 +2,56 @@
     import { goto } from '$app/navigation';
     import { page } from '$app/stores';
     import { Heading } from '$lib/components';
-    import { onMount } from 'svelte';
 
-    onMount(async () => {
-        const project = $page.url.searchParams.get('project');
-        if (project) {
-            await goto(`appwrite-callback-${project}://${$page.url.search}`);
+    const project = $page.url.searchParams.get('project');
+    const link = `appwrite-callback-${project}://${$page.url.search}`;
+
+    const redirect = new Promise((resolve, reject) => {
+        if (!project) {
+            reject('no-project');
         }
+        // this timeout is needed because goto does not
+        // throw an exception if the redirect does not work
+        setTimeout(() => reject('timeout'), 500);
+        // goto will resolve on successful redirect
+        goto(link).then(resolve);
     });
 </script>
 
-<Heading tag="h1" size="1">Missing Redirect URL</Heading>
-<p class="text">
-    Your OAuth login flow is missing a proper redirect URL. Please check the
-    <a class="link" href="https://appwrite.io/docs/client/account?sdk=web#createOAuth2Session"
-        >OAuth docs</a>
-    and send request for new session with a valid callback URL.
-</p>
+{#await redirect then}
+    <article class="card u-padding-16">
+        <div class="u-flex u-flex-vertical u-gap-16">
+            <Heading tag="h1" size="4">You're now logged in</Heading>
+            <p class="text">You will be automatically redirected back to your app shortly.</p>
+            <p class="text">
+                If you are not redirected, please click on the following
+                <a class="link" href={`appwrite-callback-${project}://${$page.url.search}`}>link</a
+                >.
+            </p>
+        </div>
+    </article>
+{:catch}
+    <article class="card u-padding-16">
+        <div class="u-flex u-flex-vertical u-gap-16">
+            <Heading tag="h1" size="4">Missing Redirect URL</Heading>
+            <p class="text">
+                Your OAuth login flow is missing a proper redirect URL. Please check the
+                <a
+                    class="link"
+                    href="https://appwrite.io/docs/client/account?sdk=web#createOAuth2Session"
+                    >OAuth docs</a>
+                and send request for new session with a valid callback URL.
+            </p>
+        </div>
+    </article>
+{/await}
+
+<style lang="scss">
+    @import '@appwrite.io/pink/src/abstract/variables/_devices.scss';
+    // override padding for screens bigger than mobile
+    @media #{$break2open} {
+        article.card {
+            padding: 2rem !important;
+        }
+    }
+</style>