add ready event (#50)

Author: asafshen

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).
 

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 {

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>

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>

package-lock.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"

package.json

@@ -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>

src/Descope.vue

@@ -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();
+	});
 });