User profile widget RELEASE (#75)

Author: nirgur

README.md

@@ -252,7 +252,7 @@ Important Note:
 
 #### User Management
 
-The `UserManagement` widget will let you embed a user table in your site to view and take action.
+The `UserManagement` widget lets you embed a user table in your site to view and take action.
 
 The widget lets you:
 
@@ -284,7 +284,7 @@ Example:
 
 #### Role Management
 
-The `RoleManagement` widget will let you embed a role table in your site to view and take action.
+The `RoleManagement` widget lets you embed a role table in your site to view and take action.
 
 The widget lets you:
 
@@ -314,7 +314,7 @@ Example:
 
 #### Access Key Management
 
-The `AccessKeyManagement` widget will let you embed an access key table in your site to view and take action.
+The `AccessKeyManagement` widget lets you embed an access key table in your site to view and take action.
 
 The widget lets you:
 
@@ -349,7 +349,7 @@ Example:
 
 #### Audit Management
 
-The `AuditManagement` widget will let you embed an audit table in your site.
+The `AuditManagement` widget lets you embed an audit table in your site.
 
 ###### Usage
 
@@ -366,6 +366,34 @@ import { AuditManagement } from '@descope/vue-sdk';
 Example:
 [Manage Audit](./example/components/ManageAudit.vue)
 
+#### User Profile
+
+The `UserProfile` widget lets you embed a user profile component in your app and let the logged in user update his profile.
+
+The widget lets you:
+
+- Update user profile picture
+- Update user personal information
+- Update authentication methods
+- Logout
+
+###### Usage
+
+```vue
+<template>
+	<UserProfile widget-id="user-profile-widget" @logout="onLogout" />
+</template>
+
+<script setup>
+import { UserProfile } from '@descope/vue-sdk';
+
+const onLogout = () => (window.location.href = '/login');
+</script>
+```
+
+Example:
+[User Profile](./example/components/MyUserProfile.vue)
+
 ## Code Example
 
 You can find an example Vue app in the [example folder](./example).

example/components/App.vue

@@ -6,6 +6,7 @@
 			<router-link to="/manage-roles">Manage Roles</router-link>
 			<router-link to="/manage-access-keys">Manage Access Keys</router-link>
 			<router-link to="/manage-audit">Manage Audit</router-link>
+			<router-link to="/user-profile">User Profile</router-link>
 			<router-link to="/login">Login</router-link>
 		</div>
 		<button v-if="isAuthenticated" @click="logout()">Logout</button>

example/components/MyUserProfile.vue

@@ -0,0 +1,19 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+	<div class="user-profile-wrapper">
+		<h1>User Profile</h1>
+		<UserProfile @logout="onLogout" widget-id="user-profile-widget" />
+	</div>
+</template>
+
+<script setup>
+import { UserProfile } from '../../src';
+
+const onLogout = () => (window.location.href = '/login');
+</script>
+
+<style>
+.manage-users-wrapper {
+	margin: 20px;
+}
+</style>

example/router.ts

@@ -6,6 +6,7 @@ import ManageAccessKeys from './components/ManageAccessKeys.vue';
 import ManageAudit from './components/ManageAudit.vue';
 import ManageRoles from './components/ManageRoles.vue';
 import ManageUsers from './components/ManageUsers.vue';
+import MyUserProfile from './components/MyUserProfile.vue';
 
 const router = createRouter({
 	history: createWebHistory(),
@@ -56,6 +57,11 @@ const router = createRouter({
 			path: '/manage-audit',
 			name: 'manage-audit',
 			component: ManageAudit
+		},
+		{
+			path: '/user-profile',
+			name: 'user-profile',
+			component: MyUserProfile
 		}
 	]
 });