mirror of
https://github.com/n8n-io/n8n.git
synced 2026-05-12 16:10:30 +02:00
13659d036f
* ensure that eslint runs on all frontend code * remove tslint from `design-system` * enable prettier and eslint-prettier for `design-system` * Delete tslint.json * use a single editorconfig for the repo * enable prettier for all code in `design-system` * more linting fixes on design-system * ignore coverage for git and prettier * lintfix on editor-ui
108 lines
2.0 KiB
Vue
108 lines
2.0 KiB
Vue
<template>
|
|
<div class="ph-no-capture" :class="classes">
|
|
<div :class="$style.avatarContainer">
|
|
<n8n-avatar :firstName="firstName" :lastName="lastName" />
|
|
</div>
|
|
|
|
<div v-if="isPendingUser" :class="$style.pendingUser">
|
|
<n8n-text :bold="true">{{ email }}</n8n-text>
|
|
<span :class="$style.pendingBadge"><n8n-badge :bold="true">Pending</n8n-badge></span>
|
|
</div>
|
|
<div v-else :class="$style.infoContainer">
|
|
<div>
|
|
<n8n-text :bold="true" color="text-dark"
|
|
>{{ firstName }} {{ lastName }}
|
|
{{ isCurrentUser ? this.t('nds.userInfo.you') : '' }}</n8n-text
|
|
>
|
|
</div>
|
|
<div>
|
|
<n8n-text size="small" color="text-light">{{ email }}</n8n-text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import 'vue';
|
|
import N8nText from '../N8nText';
|
|
import N8nAvatar from '../N8nAvatar';
|
|
import N8nBadge from '../N8nBadge';
|
|
import Locale from '../../mixins/locale';
|
|
import mixins from 'vue-typed-mixins';
|
|
|
|
export default mixins(Locale).extend({
|
|
name: 'n8n-users-info',
|
|
components: {
|
|
N8nAvatar,
|
|
N8nText,
|
|
N8nBadge,
|
|
},
|
|
props: {
|
|
firstName: {
|
|
type: String,
|
|
},
|
|
lastName: {
|
|
type: String,
|
|
},
|
|
email: {
|
|
type: String,
|
|
},
|
|
isPendingUser: {
|
|
type: Boolean,
|
|
},
|
|
isCurrentUser: {
|
|
type: Boolean,
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
computed: {
|
|
classes(): Record<string, boolean> {
|
|
return {
|
|
[this.$style.container]: true,
|
|
[this.$style.disabled]: this.disabled,
|
|
};
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" module>
|
|
.container {
|
|
display: inline-flex;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.avatarContainer {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--color-text-light);
|
|
}
|
|
|
|
.infoContainer {
|
|
flex-grow: 1;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
margin-left: var(--spacing-xs);
|
|
}
|
|
|
|
.pendingUser {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: var(--spacing-xs);
|
|
}
|
|
|
|
.pendingBadge {
|
|
margin-left: var(--spacing-xs);
|
|
}
|
|
|
|
.disabled {
|
|
opacity: 0.5;
|
|
}
|
|
</style>
|