@dpa-it/dpa-id-partner-components-vue

DPA-ID Partner Components vue library

Vue wrapper for the DPA ID partnmer components.

Install

To add the package to your project run

npm install @dpa-it/dpa-id-partner-components-vue

Usage

You can import the component like any other vue component.

<template>
  <DpaIdAppswitcher></DpaIdAppswitcher>
  <DpaIdUsericon></DpaIdUsericon>
</template>

<script setup>
import { DpaIdAppswitcher, DpaIdUsericon } from '@dpa-it/dpa-id-partner-components-vue';

</script>

Properties

Appswitcher

Property	Attribute	Description	Type	Default
arrowDistanceRight	arrow-distance-right	Distance of the arrow from the right border	string	'1rem'
backgroundColor	background-color	Color of the background	string	'#fff'
fontColor	font-color	Color of the font	string	'rgb(33, 33, 33)'
iconColor	icon-color	Color of the icon	string	'rgb(33, 33, 33)'
outerSize	outer-size	Inner size of the icon	number	24
overlayRight	overlay-right	Distance of the overlay from the right border of the wrapper	string	'0'
overlayTop	overlay-top	Distance of the overlay from the bottom border of the wrapper	string	'30px'

UserIcon

Properties

Property	Attribute	Description	Type	Default
arrowDistanceRight	arrow-distance-right	Distance of the arrow from the right border	string	'1rem'
clientId	client-id	Auth0 client ID, needed for logout	string	''
firstname	firstname	User firstname	string	''
imgUrl	img-url	Profile picture of the user to be displayed	string	''
initials	initials	User initials	string	''
lastname	lastname	User lastname	string	''
logoutLabel	logout-label	Button label to logout	string	'Abmelden'
manageIdLabel	manage-id-label	Button label that links to the DPA ID management dashboard	string	'dpa ID verwalten'
overlayRight	overlay-right	Distance of the overlay from the right border of the wrapper	string	'0px'
overlayTop	overlay-top	Distance of the overlay from the bottom border of the wrapper	string	'30px'
service	service	Service name (reflected to Useradmin myprofile URL as a parameter, if specified and not empty)	string	''
size	size	Icon size	number	24
stageAuth0	stage-auth-0	Stage of auth0 to refer to	"dev" | "prod" | "staging"	'prod'
stageUseradmin	stage-useradmin	Stage of user-administration to refer to	"dev" | "prod" | "staging"	'prod'

Events

Event	Description	Type
logout	Event fired when clicking the logout button	CustomEvent<void>

Methods

redirectToAuth0() => Promise<void>

redirects to the correct logout url of auth0

Returns

Type: Promise<void>