From c3e74077ae59533c585e5ac8ccd34ddc3c433851 Mon Sep 17 00:00:00 2001
From: Asaf Shen <asaf@descope.com>
Date: Thu, 15 Feb 2024 11:00:03 +0200
Subject: [PATCH] add ready event (#50)

---
 README.md                          | 21 +++++++++++++++++----
 example/components/App.vue         |  4 ++++
 example/components/Login.vue       | 17 +++++++++++++----
 example/components/ManageUsers.vue |  4 ++--
 package-lock.json                  | 14 +++++++-------
 package.json                       |  2 +-
 src/Descope.vue                    |  5 ++++-
 tests/Descope.test.ts              |  9 +++++++++
 8 files changed, 57 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index d7c5138..d921ac7 100644
--- a/README.md
+++ b/README.md
@@ -40,7 +40,13 @@ app.mount('#app');
 
 ```vue
 <template>
-	<Descope flowId="my-flow-id" @error="handleError" @success="handleSuccess" />
+	<p v-if="isFlowLoading">Loading...</p>
+	<Descope
+		flowId="my-flow-id"
+		@success="handleSuccess"
+		@error="handleError"
+		@ready="handleReady"
+	/>
 	<!-- additional props -->
 	<!-- theme="dark" theme can be "light", "dark" or "os", which auto select a theme based on the OS theme. Default is "light" -->
 	<!-- v-bind:debug="true" debug can be set to true to enable debug mode -->
@@ -55,13 +61,20 @@ app.mount('#app');
 
 <script setup>
 import { Descope } from '@descope/vue-sdk';
+import { ref } from 'vue';
+
+const isFlowLoading = ref(true);
+
+const handleSuccess = (e) => {
+	console.log('Logged in!', e);
+};
 
 const handleError = (e) => {
 	console.log('Could not log in', e);
 };
 
-const handleSuccess = (e) => {
-	console.log('Logged in!', e);
+const handleReady = () => {
+	isFlowLoading.value = false;
 };
 
 // let tenantId = '<tenantId>'; // replace with your tenant ID
@@ -215,7 +228,7 @@ You can find an example Vue app in the [example folder](./example).
 
 ### Setup
 
-To run the examples, set your `Project ID` by setting the `DESCOPE_PROJECT_ID` env var or directly
+To run the examples, set your `Project ID` by setting the `VUE_APP_DESCOPE_PROJECT_ID` env var or directly
 in the sample code.
 Find your Project ID in the [Descope console](https://app.descope.com/settings/project).
 
diff --git a/example/components/App.vue b/example/components/App.vue
index 77bd737..2eb0784 100644
--- a/example/components/App.vue
+++ b/example/components/App.vue
@@ -23,6 +23,10 @@ const { logout } = useDescope();
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	color: #2c3e50;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
 }
 
 .routes {
diff --git a/example/components/Login.vue b/example/components/Login.vue
index f7cb99c..10ef458 100644
--- a/example/components/Login.vue
+++ b/example/components/Login.vue
@@ -1,14 +1,15 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-	<div class="wrapper">
-		<p v-if="isLoading">Loading...</p>
+	<div class="login-wrapper">
+		<p v-if="isLoading || isFlowLoading">Loading...</p>
 		<div v-else-if="isAuthenticated">
 			<h1>You are authenticated</h1>
 		</div>
 		<Descope
 			:flowId="flowId"
-			@error="handleError"
 			@success="handleSuccess"
+			@error="handleError"
+			@ready="handleReady"
 			:errorTransformer="errorTransformer"
 			:form="form"
 			:client="client"
@@ -18,13 +19,19 @@
 
 <script setup>
 import { Descope, useSession } from '../../src';
+import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 const router = useRouter();
+const isFlowLoading = ref(true);
 
 const handleError = (e) => {
 	console.log('Got error', e);
 };
 
+const handleReady = () => {
+	isFlowLoading.value = false;
+};
+
 const handleSuccess = (e) => {
 	console.log('Logged in', e);
 	router.push({ path: '/' });
@@ -44,7 +51,9 @@ const client = { version: '1.0.1' }; // found in context key: client.version
 </script>
 
 <style>
-.wrapper {
+.login-wrapper {
 	margin: 20px;
+	align-self: center;
+	max-width: 500px;
 }
 </style>
diff --git a/example/components/ManageUsers.vue b/example/components/ManageUsers.vue
index bc5fa69..4502302 100644
--- a/example/components/ManageUsers.vue
+++ b/example/components/ManageUsers.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-	<div class="wrapper">
+	<div class="manage-users-wrapper">
 		<h1>Manage Users</h1>
 		<UserManagement :tenant="tenant" />
 	</div>
@@ -13,7 +13,7 @@ const tenant = process.env.VUE_APP_DESCOPE_TENANT;
 </script>
 
 <style>
-.wrapper {
+.manage-users-wrapper {
 	margin: 20px;
 }
 </style>
diff --git a/package-lock.json b/package-lock.json
index a39dace..e0a265f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
 			"license": "MIT",
 			"dependencies": {
 				"@descope/user-management-widget": "0.0.9",
-				"@descope/web-component": "3.8.1"
+				"@descope/web-component": "3.8.2"
 			},
 			"devDependencies": {
 				"@rollup/plugin-typescript": "^11.1.0",
@@ -1852,9 +1852,9 @@
 			}
 		},
 		"node_modules/@descope/web-component": {
-			"version": "3.8.1",
-			"resolved": "https://registry.npmjs.org/@descope/web-component/-/web-component-3.8.1.tgz",
-			"integrity": "sha512-9U9AXzifyWGeCm8VhaBcDRjC3eaJs6bcJ9as9nj2OAtMkHWMlICa850OJo0sJdNBhZeYBFM+JfCNg1+9MD30VQ==",
+			"version": "3.8.2",
+			"resolved": "https://registry.npmjs.org/@descope/web-component/-/web-component-3.8.2.tgz",
+			"integrity": "sha512-D9vOTuqMcwRZ1v/I7eWcIHVltdiEdFSl6+SBkONSfm8LBxkDd49whh1FG64kXuqIIB9joL//qBz1ujoFhTRuJw==",
 			"dependencies": {
 				"@descope/web-js-sdk": "1.10.0",
 				"tslib": "2.6.2"
@@ -19685,9 +19685,9 @@
 			}
 		},
 		"@descope/web-component": {
-			"version": "3.8.1",
-			"resolved": "https://registry.npmjs.org/@descope/web-component/-/web-component-3.8.1.tgz",
-			"integrity": "sha512-9U9AXzifyWGeCm8VhaBcDRjC3eaJs6bcJ9as9nj2OAtMkHWMlICa850OJo0sJdNBhZeYBFM+JfCNg1+9MD30VQ==",
+			"version": "3.8.2",
+			"resolved": "https://registry.npmjs.org/@descope/web-component/-/web-component-3.8.2.tgz",
+			"integrity": "sha512-D9vOTuqMcwRZ1v/I7eWcIHVltdiEdFSl6+SBkONSfm8LBxkDd49whh1FG64kXuqIIB9joL//qBz1ujoFhTRuJw==",
 			"requires": {
 				"@descope/web-js-sdk": "1.10.0",
 				"tslib": "2.6.2"
diff --git a/package.json b/package.json
index 52870a7..2392bd3 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
 	},
 	"dependencies": {
 		"@descope/user-management-widget": "0.0.9",
-		"@descope/web-component": "3.8.1"
+		"@descope/web-component": "3.8.2"
 	},
 	"peerDependencies": {
 		"vue": ">=3"
diff --git a/src/Descope.vue b/src/Descope.vue
index 29cad56..55f4c05 100644
--- a/src/Descope.vue
+++ b/src/Descope.vue
@@ -17,6 +17,7 @@
 			:client.attr="clientStr"
 			@success="onSuccess"
 			@error="onError"
+			@ready="onReady"
 		/>
 	</div>
 </template>
@@ -86,7 +87,7 @@ const props = defineProps({
 		type: Object
 	}
 });
-const emit = defineEmits(['success', 'error']);
+const emit = defineEmits(['success', 'error', 'ready']);
 const { projectId, baseUrl } = useOptions();
 const sdk = useDescope();
 
@@ -103,4 +104,6 @@ const onSuccess = async (e: CustomEvent) => {
 };
 
 const onError = (e: Event) => emit('error', e);
+
+const onReady = (e: Event) => emit('ready', e);
 </script>
diff --git a/tests/Descope.test.ts b/tests/Descope.test.ts
index 388a6ee..60c3dfd 100644
--- a/tests/Descope.test.ts
+++ b/tests/Descope.test.ts
@@ -109,4 +109,13 @@ describe('Descope.vue', () => {
 			detail: 'test-error-payload'
 		});
 	});
+
+	it('emits an ready event when the DescopeWc component emits an ready event', async () => {
+		const wrapper = mount(Descope);
+		const descopeWc = wrapper.find('descope-wc');
+
+		await descopeWc.trigger('ready', {});
+
+		expect(wrapper.emitted('ready')).toBeTruthy();
+	});
 });