add user management widget (#45)

* add user management widget

* bump UMW

* CR fix

.gitignore

@@ -22,4 +22,5 @@ pnpm-debug.log*
 *.sln
 *.sw?
 .history
-coverage/
+coverage/
+.env

example/components/App.vue

@@ -2,6 +2,7 @@
 	<header>
 		<div class="routes">
 			<router-link to="/">Home</router-link>
+			<router-link to="/manage-users">Manage Users</router-link>
 			<router-link to="/login">Login</router-link>
 		</div>
 		<button v-if="isAuthenticated" @click="logout()">Logout</button>
@@ -21,7 +22,6 @@ const { logout } = useDescope();
 	font-family: Avenir, Helvetica, Arial, sans-serif;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
-	text-align: center;
 	color: #2c3e50;
 }
 

example/components/ManageUsers.vue

@@ -0,0 +1,19 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+	<div class="wrapper">
+		<h1>Manage Users</h1>
+		<UserManagement :tenant="tenant" />
+	</div>
+</template>
+
+<script setup>
+import { UserManagement } from '../../src';
+
+const tenant = process.env.VUE_APP_DESCOPE_TENANT;
+</script>
+
+<style>
+.wrapper {
+	margin: 20px;
+}
+</style>

example/router.ts

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import Home from './components/Home.vue';
 import Login from './components/Login.vue';
+import ManageUsers from './components/ManageUsers.vue';
 import { routeGuard } from '../src';
 
 const router = createRouter({
@@ -32,6 +33,11 @@ const router = createRouter({
 			path: '/login',
 			name: 'login',
 			component: Login
+		},
+		{
+			path: '/manage-users',
+			name: 'manage-users',
+			component: ManageUsers
 		}
 	]
 });

package.json

@@ -37,6 +37,7 @@
 		]
 	},
 	"dependencies": {
+		"@descope/user-management-widget": "0.0.7",
 		"@descope/web-component": "3.7.0"
 	},
 	"peerDependencies": {

src/UserManagement.vue

@@ -0,0 +1,32 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+	<div>
+		<descope-user-management-widget
+			:project-id="projectId"
+			:base-url="baseUrl"
+			:theme.attr="theme"
+			:tenant.attr="tenant"
+			:debug.attr="debug"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import '@descope/user-management-widget';
+import { useOptions } from './hooks';
+
+defineProps({
+	tenant: {
+		type: String,
+		required: true
+	},
+	theme: {
+		type: String
+	},
+	debug: {
+		type: Boolean
+	}
+});
+
+const { projectId, baseUrl } = useOptions();
+</script>

src/index.ts

@@ -1,4 +1,5 @@
 export { default as Descope } from './Descope.vue';
+export { default as UserManagement } from './UserManagement.vue';
 export { useDescope, useSession, useUser } from './hooks';
 export { default, routeGuard, getSdk } from './plugin';
 export {

tests/Descope.test.ts

@@ -1,5 +1,5 @@
 import { shallowMount, mount } from '@vue/test-utils';
-import { Descope } from '../src';
+import Descope from '../src/Descope.vue';
 
 jest.mock('../src/hooks', () => ({
 	useOptions: () => ({ projectId: 'project1', baseUrl: 'baseUrl' }),