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

Ken John

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!

Ken John

This is the result when I load the page

PitaJ

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

Ken John

@PitaJ Nice!