From 69d15e4998017e419fd51a078361dc031c07fcbc Mon Sep 17 00:00:00 2001
From: rohanharikr <rohanharikumar80@gmail.com>
Date: Wed, 4 Dec 2024 15:37:26 +0000
Subject: [PATCH] more ui fixes

---
 src/App.svelte                                   | 16 +++++++++++++---
 src/lib/components/AuthorizationResponse.svelte  |  3 ++-
 src/lib/components/Notification.svelte           |  7 +++++--
 src/lib/components/Request/ProtocolParams.svelte |  2 +-
 src/lib/components/Request/ScopeParam.svelte     | 10 +++++-----
 src/lib/utils.js                                 |  8 +++++++-
 6 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index ab05332..ac5ccbf 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -12,7 +12,8 @@
 		handleLegacyState,
 		removeLoader,
 		generatePkce,
-		sendPlausibleEvent
+		sendPlausibleEvent,
+		focusAuthzResponseSection
 	} from '$lib/utils.js';
 	import { makeAuthzUrl, makeInviteUrl } from '$lib/request.js';
 	import { parseToken, validateToken } from '@hellocoop/helper-browser';
@@ -29,7 +30,7 @@
 	let customScope = $state('');
 	let isHelloMode = $state(true); // this only matters if hello dev flag is set
 	let mounted = $state(false);
-	let showErrorNotification = $state(false);
+	let showErrorNotification = $state(true);
 	let authzResponse = $state({
 		url: null,
 		token: null,
@@ -89,7 +90,7 @@
 		if (params.has('id_token')) await processIdToken(params);
 		else if (params.has('code')) await processCode(params);
 		else if (params.has('error')) processError(params);
-		else if (params.has('beta')) selectedAuthzServer = BETA_SERVER;
+		else if (params.has('beta')) selectBetaServer();
 
 		cleanUrl();
 		removeLoader();
@@ -229,6 +230,8 @@
 		} catch (err) {
 			console.error(err);
 			showErrorNotification = true;
+		} finally {
+			focusAuthzResponseSection();
 		}
 	}
 
@@ -251,6 +254,8 @@
 		} catch (err) {
 			console.error(err);
 			showErrorNotification = true;
+		} finally {
+			focusAuthzResponseSection();
 		}
 	}
 
@@ -258,6 +263,11 @@
 		authzResponse.url = params.toString();
 		showErrorNotification = true;
 	}
+
+	function selectBetaServer() {
+		selectedAuthzServer = BETA_SERVER;
+		dropdowns.server = true; // expand to show selected beta server
+	}
 </script>
 
 {#if mounted}
diff --git a/src/lib/components/AuthorizationResponse.svelte b/src/lib/components/AuthorizationResponse.svelte
index 24ed2d1..3df1ccc 100644
--- a/src/lib/components/AuthorizationResponse.svelte
+++ b/src/lib/components/AuthorizationResponse.svelte
@@ -6,7 +6,8 @@
 </script>
 
 <section
-	class="relative border border-charcoal dark:border-gray-800 rounded-sm w-full px-4 pb-4 pt-6"
+	id="authz-response-container"
+	class="relative border border-charcoal dark:border-gray-800 rounded-sm w-full px-4 pb-4 pt-6 scroll-mt-5"
 >
 	<span
 		class="absolute -mt-8 bg-white dark:bg-[#151515] px-2 -mx-2 text-charcoal/70 dark:text-[#d4d4d4]/70 uppercase text-xs font-mono"
diff --git a/src/lib/components/Notification.svelte b/src/lib/components/Notification.svelte
index 3e68ce0..ee959c7 100644
--- a/src/lib/components/Notification.svelte
+++ b/src/lib/components/Notification.svelte
@@ -5,10 +5,13 @@
 </script>
 
 <div
-	class="bg-red-500 px-2.5 h-9 text-center text-white flex items-center justify-center"
+	class="bg-red-500 px-2.5 h-11 md:h-9 text-center text-white flex items-center justify-center"
 	out:slide
 >
-	<span class="text-sm">Authorization Error - Please see Response section below</span>
+	<span class="text-sm"
+		>Authorization Error <span class="hidden md:inline">-</span><br class="md:hidden" /> Please see Response
+		section below</span
+	>
 	<button class="absolute right-4" onclick={close} aria-label="close">
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
diff --git a/src/lib/components/Request/ProtocolParams.svelte b/src/lib/components/Request/ProtocolParams.svelte
index 4e5e657..c1e54cd 100644
--- a/src/lib/components/Request/ProtocolParams.svelte
+++ b/src/lib/components/Request/ProtocolParams.svelte
@@ -60,7 +60,7 @@
 					</div>
 					{#if Array.isArray(param.POSSIBLE_VALUE)}
 						<ul
-							class="xl:h-8 p-1 space-y-0.5 xl:space-y-0 xl:space-x-1 w-full ring-1 ring-charcoal dark:ring-gray-800 flex flex-col xl:flex-row items-center rounded-sm"
+							class="xl:h-8 p-1 gap-1 w-full ring-1 ring-charcoal dark:ring-gray-800 flex flex-col xl:flex-row items-center rounded-sm"
 							class:opacity-50={!selected}
 						>
 							{#each param.POSSIBLE_VALUE as value}
diff --git a/src/lib/components/Request/ScopeParam.svelte b/src/lib/components/Request/ScopeParam.svelte
index 77e94cc..78cb1d1 100644
--- a/src/lib/components/Request/ScopeParam.svelte
+++ b/src/lib/components/Request/ScopeParam.svelte
@@ -14,7 +14,7 @@
 	} = $props();
 
 	// scope input selected in protocol params
-	const isOverwritten = $derived(selectedProtocolParams.includes('scope'));
+	const isOverridden = $derived(selectedProtocolParams.includes('scope'));
 </script>
 
 <section class="break-inside-avoid-column">
@@ -27,9 +27,9 @@
 		<Tooltip content="Scope Parameter Docs" , href="https://www.hello.dev/docs/scopes/" />
 	</button>
 
-	{#if isOverwritten}
+	{#if isOverridden}
 		<p class="opacity-70 text-xs italic mt-1">
-			Overwritten with 'scope' in Protocol Parameters section
+			Overridden with 'scope' in Protocol Parameters section
 		</p>
 	{/if}
 
@@ -45,8 +45,8 @@
 		<div
 			class="flex mt-2 space-x-2"
 			transition:slide={{ duration: 150 }}
-			class:opacity-50={isOverwritten}
-			class:pointer-events-none={isOverwritten}
+			class:opacity-50={isOverridden}
+			class:pointer-events-none={isOverridden}
 		>
 			<ul class="space-y-2 w-40 md:w-48">
 				{#each ALL_STANDARD_SCOEPS as stdScope}
diff --git a/src/lib/utils.js b/src/lib/utils.js
index a4ea9e9..d18a104 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -78,6 +78,11 @@ async function sendPlausibleEvent() {
 	}
 }
 
+function focusAuthzResponseSection() {
+	const ele = document.querySelector('#authz-response-container');
+	if (ele) ele.scrollIntoView();
+}
+
 export {
 	cleanUrl,
 	removeLoader,
@@ -85,5 +90,6 @@ export {
 	reset,
 	handleLegacyState,
 	generatePkce,
-	sendPlausibleEvent
+	sendPlausibleEvent,
+	focusAuthzResponseSection
 };