# User login info in toolbar/header

**URL:** <https://discourse.nodered.org/t/user-login-info-in-toolbar-header/98744>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, dashboard-1\
**Created:** [20 August 2025 09:37 UTC](https://discourse.nodered.org/t/user-login-info-in-toolbar-header/98744 "2025-08-20T09:37:06Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Felix](https://avatars.discourse-cdn.com/v4/letter/f/aeb1de/32.png) [@Felix](https://discourse.nodered.org/u/Felix)\
**Post date:** [20 August 2025 09:37 UTC](https://discourse.nodered.org/t/user-login-info-in-toolbar-header/98744/1 "2025-08-20T09:37:06Z")

</div>

Hi all,

in my labour, I’m not able to find answer for my question.

How is possible to add in toolbar/heade of dashboard(v1) logged user f.e. -  
Logged user : Jack\_Sparrow

At this moment I have only time and date in the toolbar, as was described in many forums.

```auto
<script id="titleScript" type="text/javascript">

$(function() {
    if($('.md-toolbar-tools').length != 0){
        loadClock();
    }else setTimeout(loadClock, 500)
});

function loadClock(){
    $('#clock').remove();
    var toolbar = $('.md-toolbar-tools');
    
    var div = $('<div/>');
    var p = $('<p/ id="clock">');
    
    div.append(p);
    div[0].style.margin = '5px 5px 5px auto';
    toolbar.append(div);
    
    
    function upTime() {
        var d = new Date();
        p.text(d.toLocaleString('sk-SK', { timeZone: 'Europe/Bratislava' }));
    }

    if(document.clockInterval){ 
            clearInterval(document.clockInterval);
            document.clockInterval = null;
    }
        
    document.clockInterval = setInterval(upTime,1000);
}

</script>

```

Thanks for help. Bobo

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [20 August 2025 10:36 UTC](https://discourse.nodered.org/t/user-login-info-in-toolbar-header/98744/2 "2025-08-20T10:36:58Z")

</div>

assuming that you have the required data in a msg.payload. you can try this below code

```flows
[{"id":"0ddff8334eeace04","type":"group","z":"f7896303b8f338aa","name":"Buttons/Clock/Logo in Toolbar Header","style":{"stroke":"#ffC000","fill":"#ffdf7f","label":true,"label-position":"n","color":"#3f93cf"},"nodes":["91670c03.c29ad","5065704ae7cce962","8ee9d70d108a5661","2f20553b4b37a60c","63d8e8fbf4884e2a","6b09f17994dc574b"],"x":84,"y":69,"w":562,"h":202},{"id":"91670c03.c29ad","type":"ui_template","z":"f7896303b8f338aa","g":"0ddff8334eeace04","group":"c536db49089f0a12","name":"Header Buttons","order":2,"width":"1","height":"1","format":"<script id=\"titleScript\" type=\"text/javascript\">\n(function(scope) {\n function createToolbarButtons() {\n var toolbar = $('.md-toolbar-tools');\n if (toolbar.length === 0) {\n setTimeout(createToolbarButtons, 50);\n return;\n }\n\n // Hide the default toolbar heading\n toolbar.find('h1').hide();\n\n // Remove existing custom elements to prevent duplicates on refresh\n $('#clock').remove();\n $('#button-container').remove();\n $('#logo').remove();\n $('#msg-payload-textbox').remove(); // --- NEW: Remove the old textbox as well ---\n\n var buttonDiv = $('<div/>', {\n id: 'button-container',\n css: {\n 'display': 'flex',\n 'align-items': 'center'\n }\n });\n\n // --- NEW: Create a textbox to display the msg.payload content ---\n var payloadTextbox = $('<div/>', {\n id: 'msg-payload-textbox',\n css: {\n 'margin-left': '10px',\n 'padding': '8px',\n 'border': '1px solid #ccc',\n 'border-radius': '5px',\n 'min-width': '200px',\n 'white-space': 'nowrap',\n 'overflow': 'hidden',\n 'text-overflow': 'ellipsis',\n 'background-color': '#f9f9f9',\n 'font-family': 'monospace',\n 'color': '#333'\n }\n });\n\n // --- Clock on the right ---\n var clockButton = $('<button/>', {\n id: 'clock',\n class: 'time_display',\n css: {\n 'margin-left': 'auto',\n 'margin-right': '5px',\n 'cursor': 'default'\n }\n });\n\n // --- Insert the Logo Here, after the clock ---\n var logo = $('<img/>', {\n id: 'logo',\n src: '/animated.gif',\n width: '65',\n height: '52',\n css: {\n 'margin-right': '5px',\n 'cursor': 'pointer'\n }\n });\n\n // Add a click event to the logo\n logo.on('click', function() {\n scope.send({ payload: 6 });\n $('.my-toolbar-button').removeClass('active');\n });\n\n // --- Build the buttons and append them to the button container ---\n var buttonLabels = ['LIVE DASHBOARD', 'BUTTON-2', 'BUTTON-3', 'BUTTON-4', 'BUTTON-5'];\n var lastClickedButton = null;\n\n for (let i = 0; i < buttonLabels.length; i++) {\n var button = $('<button/>', {\n text: buttonLabels[i],\n class: 'my-toolbar-button',\n 'data-button-id': i + 1\n });\n\n button.on('click', function() {\n var clickedButton = $(this);\n if (lastClickedButton) {\n lastClickedButton.removeClass('active');\n }\n clickedButton.addClass('active');\n lastClickedButton = clickedButton;\n var payloadValue = clickedButton.data('button-id');\n scope.send({ payload: payloadValue });\n });\n buttonDiv.append(button);\n }\n\n // --- Append the elements in the correct order ---\n toolbar.append(buttonDiv);\n toolbar.append(payloadTextbox); // --- NEW: Append the textbox to the toolbar ---\n toolbar.append(clockButton);\n toolbar.append(logo);\n\n // Ensure the toolbar uses flexbox\n toolbar.css({\n 'display': 'flex',\n 'align-items': 'center'\n });\n\n // --- Clock functionality ---\n function upTime() {\n var d = new Date();\n var formatter = new Intl.DateTimeFormat('en-US', {\n year: 'numeric', month: 'long', day: 'numeric', weekday: 'long',\n hour: '2-digit', minute: '2-digit', second: '2-digit', hourCycle: 'h23'\n });\n var formattedDate = formatter.format(d);\n var day = d.getDate();\n var suffix = (day >= 11 && day <= 13) ? 'th' : (['st', 'nd', 'rd', 'th'][day % 10] || 'th');\n formattedDate = formattedDate.replace(/(\\s\\d+)/, '$1' + suffix);\n clockButton.text(formattedDate);\n }\n\n upTime();\n setInterval(upTime, 1000);\n }\n\n // --- NEW: Watch for incoming messages and update the textbox ---\n scope.$watch('msg', function(msg) {\n if (msg && msg.payload !== undefined) {\n // Check if the payload is a simple type (string, number, boolean)\n // or a more complex object/array.\n var content = typeof msg.payload === 'object' ?\n JSON.stringify(msg.payload, null, 2) :\n msg.payload;\n $('#msg-payload-textbox').text(content);\n }\n });\n\n createToolbarButtons();\n})(scope);\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":200,"y":200,"wires":[["8ee9d70d108a5661","2f20553b4b37a60c"]]},{"id":"5065704ae7cce962","type":"ui_template","z":"f7896303b8f338aa","g":"0ddff8334eeace04","group":"c536db49089f0a12","name":"CSS","order":1,"width":"1","height":"2","format":"<style>\n .overflow-hidden {overflow: hidden;}\n .livedisplay {font-size: 2.5em;text-align: center;}\n\n\n .my-toolbar-button {\n background-color: #0078d0;\n border: 3px solid black;\n color: white;\n padding: 8px 16px;\n text-align: center;\n text-decoration: none;\n display: inline-block;\n font-size: 1.2em;\n margin: 4px 2px;\n cursor: pointer;\n border-radius: 28px;\n transition-duration: 0.4s;\n /* --- New CSS Rule for all buttons --- */\n white-space: nowrap;\n }\n\n .time_display {\n background-color: green;\n border: 3px solid black;\n color: white;\n padding: 8px 16px;\n text-align: center;\n text-decoration: none;\n display: inline-block;\n font-size: 1.2em;\n margin: 4px 2px;\n cursor: none;\n border-radius: 28px;\n transition-duration: 0.4s;\n /* --- New CSS Rule for all buttons --- */\n white-space: nowrap;\n }\n\n\n .my-toolbar-button:hover {\n background-color: white;\n color: #1B61E4;\n border: 3px solid #2196F3;\n }\n\n .my-toolbar-button.active {\n background-color: #d1e5fa;\n color: #005a9e;\n border: 3px solid #005a9e;\n font-weight: bold;\n }\n\n .my-toolbar-button.active:hover {\n background-color: #d1e5fa;\n color: #005a9e;\n cursor: default;\n }\n\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":170,"y":110,"wires":[[]]},{"id":"8ee9d70d108a5661","type":"switch","z":"f7896303b8f338aa","g":"0ddff8334eeace04","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"1","vt":"num"},{"t":"eq","v":"2","vt":"num"},{"t":"eq","v":"3","vt":"num"},{"t":"eq","v":"4","vt":"num"},{"t":"eq","v":"5","vt":"num"},{"t":"eq","v":"6","vt":"num"}],"checkall":"true","repair":false,"outputs":6,"x":360,"y":200,"wires":[["63d8e8fbf4884e2a"],["63d8e8fbf4884e2a"],["63d8e8fbf4884e2a"],["63d8e8fbf4884e2a"],["63d8e8fbf4884e2a"],["63d8e8fbf4884e2a"]]},{"id":"2f20553b4b37a60c","type":"debug","z":"f7896303b8f338aa","g":"0ddff8334eeace04","name":"debug 5","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":370,"y":120,"wires":[]},{"id":"63d8e8fbf4884e2a","type":"ui_toast","z":"f7896303b8f338aa","g":"0ddff8334eeace04","position":"dialog","displayTime":"3","highlight":"","sendall":true,"outputs":1,"ok":"OK","cancel":"","raw":false,"className":"","topic":"","name":"","x":550,"y":200,"wires":[[]]},{"id":"6b09f17994dc574b","type":"inject","z":"f7896303b8f338aa","g":"0ddff8334eeace04","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":200,"y":160,"wires":[["91670c03.c29ad"]]},{"id":"c536db49089f0a12","type":"ui_group","name":"ONE","tab":"fbe9cc4da47a8d17","order":1,"disp":false,"width":"50","collapse":false,"className":""},{"id":"fbe9cc4da47a8d17","type":"ui_tab","name":"DASH","icon":"fa-table","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Felix](https://avatars.discourse-cdn.com/v4/letter/f/aeb1de/32.png) [@Felix](https://discourse.nodered.org/u/Felix)\
**Post date:** [20 August 2025 17:24 UTC](https://discourse.nodered.org/t/user-login-info-in-toolbar-header/98744/3 "2025-08-20T17:24:15Z")

</div>

@smanjunath211 nice, but so sorry, I am not able to apply it to my project.

Example working for me, but after some editing actions is not valid. Also I am not specialist in javascript. Only have a starter programming.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [21 August 2025 01:18 UTC](https://discourse.nodered.org/t/user-login-info-in-toolbar-header/98744/4 "2025-08-21T01:18:15Z")

</div>

> [@Felix](#):
>
> after some editing actions is not valid

can you share the flow after your editing ?

> [@smanjunath211](#):
>
> assuming that you have the required data in a msg.payload

I hope my assumption is correct, my flow will not give you any information of a logged user, but it will display any payload that you pass on to the template node.

Regards  
Manjunath S

---

<div class="post-metadata">

**Author:** ![Felix](https://avatars.discourse-cdn.com/v4/letter/f/aeb1de/32.png) [@Felix](https://discourse.nodered.org/u/Felix)\
**Post date:** [21 August 2025 09:13 UTC](https://discourse.nodered.org/t/user-login-info-in-toolbar-header/98744/5 "2025-08-21T09:13:08Z")

</div>

@smanjunath211 I am sure, that your code was correct, I have tested it. But I am not able to adapt it to my flow.

So, based on new conditions. I am completely throw away this solution and trying to do this.  
After reinstalled DB1 to DB2 and completely renew all visual components, I would like to try put the clock to new DB2.

But still I haven’t be lucky.

There is my code, which I this has a good parts, because formattedTime gets correct value of time, which I need, but only static, not running. There is an error, which also I’m not able to solve.

```auto
<template>
    <Teleport v-if="loaded" to="#app-bar-actions">
        <div class="clock-display">{{formattedTime}}</div>
    </Teleport>
</template>

        <script>

            export default {
    data() {
        return {
            loaded: false,
        };
    },
    mounted() {
        this.loaded = true;
        this.startClock();
    },
    beforeUnmount() {
        clearInterval(this.clockInterval);
    },
    computed:{

formattedTime() {
            var d = new Date(); 
            var time_string = d.toLocaleString('sk-SK', { timeZone: 'Europe/Bratislava' });
            return time_string;
           
        }
    
    },
    methods:{
     startClock() {
            this.clockInterval = setInterval(formattedTime, 1000);
        }   
    }
};

        </script>

<style>
    .clock-display {
        margin: 5px 15px;
        font-size: 24px;
        font-weight: bold;
        color: #000000;
    }
</style>

```

Pleas, if is possible to help me, I will be glad. Thanks.

Bobo

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [21 August 2025 20:02 UTC](https://discourse.nodered.org/t/user-login-info-in-toolbar-header/98744/6 "2025-08-21T20:02:41Z")

</div>

This is what I use (with your date format). Make sure your widget is UI-scoped

```auto
<template>
    <Teleport v-if="mounted" to="#app-bar-actions">
            <p>{{ displayDateTime }}</p>

    </Teleport>

</template>

<script>

    export default {
        data() {
            return {
                mounted: false,
                currentTime: new Date(),
                timer: undefined,

            }

        },

        methods: {
            setDateTime: function() {
                this.currentTime = new Date()

            }

        },

        computed: {
            displayDateTime: function() {
                //return `${this.currentTime.toLocaleDateString()}, ${this.currentTime.toLocaleTimeString()}`
                return this.currentTime.toLocaleString('sk-SK', { timeZone: 'Europe/Bratislava' })

            }

        },
 
        mounted() {
            this.mounted = true,
            this.timer = setInterval(this.setDateTime, 1000)
        },

        unmounted() {
            clearInterval(this.timer)

        },

    }

</script>

```

---

<div class="post-metadata">

**Author:** ![Felix](https://avatars.discourse-cdn.com/v4/letter/f/aeb1de/32.png) [@Felix](https://discourse.nodered.org/u/Felix)\
**Post date:** [21 August 2025 20:30 UTC](https://discourse.nodered.org/t/user-login-info-in-toolbar-header/98744/7 "2025-08-21T20:30:57Z")

</div>

@Buckskin Thanks a lot sir. This is what I need.

So, at this moment I am looking for a new challenge …… user management in DB2.  
And this is so difficult, because I don’t want flowfuse cloud solution. Because, this network will be separated from any public, only based on RPi.

So once again, big thanks. Working like a charm. UI widget was set few hours back, at the first testing.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [4 September 2025 20:31 UTC](https://discourse.nodered.org/t/user-login-info-in-toolbar-header/98744/8 "2025-09-04T20:31:22Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.