How to get ride of admin navigation bar from my custom page

NodeBB Development
  • Hi there. I'm creating a plugin to add a custom page.

    When I access route directly as 127.0.0.1/roboout from my browser, admin navigation bar (like dashboard etc) appears on my page and on every link I click.

    But it works well when I just click my route icon in the site and shows normal user navigation bar (like unread, tag etc...).

    How do I show normal user navigation bar after I access my route directly?

    Error from my browser:

    admin.js:101 Uncaught TypeError: Cannot read property '1' of null
        at admin.js:101
        at Object.execCb (require.js:29)
        at _.check (require.js:18)
        at _.<anonymous> (require.js:22)
        at require.js:7
        at require.js:23
        at y (require.js:6)
        at _.emit (require.js:23)
        at _.check (require.js:19)
        at _.enable (require.js:23)
    (anonymous) @ acp.min.js?v=dt4v0jt0490:1
    execCb @ acp.min.js?v=dt4v0jt0490:1
    check @ acp.min.js?v=dt4v0jt0490:1
    (anonymous) @ acp.min.js?v=dt4v0jt0490:1
    (anonymous) @ acp.min.js?v=dt4v0jt0490:1
    (anonymous) @ acp.min.js?v=dt4v0jt0490:1
    y @ acp.min.js?v=dt4v0jt0490:1
    emit @ acp.min.js?v=dt4v0jt0490:1
    check @ acp.min.js?v=dt4v0jt0490:1
    enable @ acp.min.js?v=dt4v0jt0490:1
    init @ acp.min.js?v=dt4v0jt0490:1
    h @ acp.min.js?v=dt4v0jt0490:1
    completeLoad @ acp.min.js?v=dt4v0jt0490:1
    onScriptLoad @ acp.min.js?v=dt4v0jt0490:1
    load (async)
    g.load @ acp.min.js?v=dt4v0jt0490:1
    load @ acp.min.js?v=dt4v0jt0490:1
    load @ acp.min.js?v=dt4v0jt0490:1
    fetch @ acp.min.js?v=dt4v0jt0490:1
    check @ acp.min.js?v=dt4v0jt0490:1
    enable @ acp.min.js?v=dt4v0jt0490:1
    enable @ acp.min.js?v=dt4v0jt0490:1
    (anonymous) @ acp.min.js?v=dt4v0jt0490:1
    (anonymous) @ acp.min.js?v=dt4v0jt0490:1
    y @ acp.min.js?v=dt4v0jt0490:1
    enable @ acp.min.js?v=dt4v0jt0490:1
    init @ acp.min.js?v=dt4v0jt0490:1
    (anonymous) @ acp.min.js?v=dt4v0jt0490:1
    setTimeout (async)
    g.nextTick @ acp.min.js?v=dt4v0jt0490:1
    l @ acp.min.js?v=dt4v0jt0490:1
    requirejs @ acp.min.js?v=dt4v0jt0490:1
    (anonymous) @ acp.min.js?v=dt4v0jt0490:1
    search.js:52 
    
    Uncaught {message: "[[error:no-privileges]]"}
    (anonymous) @ search.js:1
    i.onack @ acp.min.js?v=dt4v0jt0490:1
    i.onpacket @ acp.min.js?v=dt4v0jt0490:1
    (anonymous) @ acp.min.js?v=dt4v0jt0490:1
    i.emit @ acp.min.js?v=dt4v0jt0490:1
    i.ondecoded @ acp.min.js?v=dt4v0jt0490:1
    (anonymous) @ acp.min.js?v=dt4v0jt0490:1
    i.emit @ acp.min.js?v=dt4v0jt0490:1
    a.add @ acp.min.js?v=dt4v0jt0490:1
    i.ondata @ acp.min.js?v=dt4v0jt0490:1
    (anonymous) @ acp.min.js?v=dt4v0jt0490:1
    i.emit @ acp.min.js?v=dt4v0jt0490:1
    i.onPacket @ acp.min.js?v=dt4v0jt0490:1
    (anonymous) @ acp.min.js?v=dt4v0jt0490:1
    i.emit @ acp.min.js?v=dt4v0jt0490:1
    i.onPacket @ acp.min.js?v=dt4v0jt0490:1
    n @ acp.min.js?v=dt4v0jt0490:1
    t.decodePayload @ acp.min.js?v=dt4v0jt0490:1
    i.onData @ acp.min.js?v=dt4v0jt0490:1
    (anonymous) @ acp.min.js?v=dt4v0jt0490:1
    i.emit @ acp.min.js?v=dt4v0jt0490:1
    s.onData @ acp.min.js?v=dt4v0jt0490:1
    s.onLoad @ acp.min.js?v=dt4v0jt0490:1
    hasXDR.t.onreadystatechange @ acp.min.js?v=dt4v0jt0490:1
    XMLHttpRequest.send (async)
    s.create @ acp.min.js?v=dt4v0jt0490:1
    s @ acp.min.js?v=dt4v0jt0490:1
    r.request @ acp.min.js?v=dt4v0jt0490:1
    r.doPoll @ acp.min.js?v=dt4v0jt0490:1
    i.poll @ acp.min.js?v=dt4v0jt0490:1
    i.onData @ acp.min.js?v=dt4v0jt0490:1
    (anonymous) @ acp.min.js?v=dt4v0jt0490:1
    i.emit @ acp.min.js?v=dt4v0jt0490:1
    s.onData @ acp.min.js?v=dt4v0jt0490:1
    s.onLoad @ acp.min.js?v=dt4v0jt0490:1
    hasXDR.t.onreadystatechange @ acp.min.js?v=dt4v0jt0490:1
    XMLHttpRequest.send (async)
    s.create @ acp.min.js?v=dt4v0jt0490:1
    s @ acp.min.js?v=dt4v0jt0490:1
    r.request @ acp.min.js?v=dt4v0jt0490:1
    r.doPoll @ acp.min.js?v=dt4v0jt0490:1
    i.poll @ acp.min.js?v=dt4v0jt0490:1
    i.onData @ acp.min.js?v=dt4v0jt0490:1
    (anonymous) @ acp.min.js?v=dt4v0jt0490:1
    i.emit @ acp.min.js?v=dt4v0jt0490:1
    s.onData @ acp.min.js?v=dt4v0jt0490:1
    s.onLoad @ acp.min.js?v=dt4v0jt0490:1
    hasXDR.t.onreadystatechange @ acp.min.js?v=dt4v0jt0490:1
    XMLHttpRequest.send (async)
    s.create @ acp.min.js?v=dt4v0jt0490:1
    s @ acp.min.js?v=dt4v0jt0490:1
    r.request @ acp.min.js?v=dt4v0jt0490:1
    r.doPoll @ acp.min.js?v=dt4v0jt0490:1
    i.poll @ acp.min.js?v=dt4v0jt0490:1
    i.doOpen @ acp.min.js?v=dt4v0jt0490:1
    i.open @ acp.min.js?v=dt4v0jt0490:1
    i.open @ acp.min.js?v=dt4v0jt0490:1
    i @ acp.min.js?v=dt4v0jt0490:1
    i @ acp.min.js?v=dt4v0jt0490:1
    i.open.i.connect @ acp.min.js?v=dt4v0jt0490:1
    i @ acp.min.js?v=dt4v0jt0490:1
    i @ acp.min.js?v=dt4v0jt0490:1
    i @ acp.min.js?v=dt4v0jt0490:1
    (anonymous) @ acp.min.js?v=dt4v0jt0490:1
    (anonymous) @ acp.min.js?v=dt4v0jt0490:1
    

    Error from Nodejs

    Missing translation "global:header.roboout"
    Missing translation "global:header.roboout"
    2020-06-19T00:27:12.193Z [4567/23184] - warn: [socket.io] Call to admin method ( admin.getSearchDict ) blocked (accessed by uid 0)
    2020-06-19T00:30:18.399Z [4567/23184] - warn: [socket.io] Call to admin method ( admin.getSearchDict ) blocked (accessed by uid 0)
    2020-06-19T00:30:23.857Z [4567/23184] - warn: [socket.io] Call to admin method ( admin.getSearchDict ) blocked (accessed by uid 0)
    

    My Code are the following:

    Plugin.json:
    	"library": "./library.js",
    	"hooks": [
    		{
    			"hook": "static:app.load", "method": "init"
    		},
    		{
    			"hook": "filter:widgets.getAreas", "method": "defineWidgetAreas"
    		}
    	],
    
    roboout.tpl
    <div class="roboout">
      <ul id="messages"></ul>
      <form action="">
        <input id="m" autocomplete="off" /><button>Send</button>
      </form>
    </div>
    
    library.js:
    plugin.init = async function (params) {
    	const router = params.router;
    	const hostMiddleware = params.middleware;
    	router.get('/roboout', hostMiddleware.admin.buildHeader, controllers.renderRoboOUT);
    	router.get('/api/roboout', controllers.renderRoboOUT);
    }
    
    plugin.defineWidgetAreas = async function(areas) {
    	areas = areas.concat([
    		{
    			name: "RoboOUT Header",
    			template: "roboout.tpl",
    			location: "header"
    		},
    		{
    			name: "RoboOUT Sidebar",
    			template: "roboout.tpl",
    			location: "sidebar"
    		},
    		{
    			name: "RoboOUT Footer",
    			template: "roboout.tpl",
    			location: "footer"
    		}
    	]);
    
    	return areas;
    };
    
    controller.js:
    var Controllers = {};
    Controllers.renderRoboOUT = function (req, res/* , next */) {
    	res.render('roboout', {});
    };
    
    main.js (client side):
    $(document).ready(function () {
    	$(window).on('action:ajaxify.end', function(ev, data) {
    		if ( data.url = 'roboout') { //My client-side code is here }
    });
    

    Thanks a lot for solving my problem!

  • This is the result when I load the page
    fae14a06-fed8-42bb-9b05-1609ab7f3983-image.png

  • It's because you have hostMiddleware.admin.buildHeader. You should instead have hostMiddleware.buildHeader, without the admin part.

  • @PitaJ Nice!


Suggested Topics