ABP - How does abp.auth being evaluated when starting a project? - asp.net-boilerplate

I added a side-bar menu and maybe twisted a little, somehow the abp.auth isn't working anymore.
I checked the abp.js, all I found is
abp.auth = abp.auth || {};
abp.auth.allPermissions = abp.auth.allPermissions || {};
So where does abp.auth or abp get the value in the first place?
I checked the role application service, no breakpoint is entered.
Then how can I trace this? Is it done inside the ABP framework? If so , how can I debug the abp.dll or whatever abp.XXX.dll in the template?
Many thanks!

abp.auth is initialized in ~/lib/abp-web-resources/Abp/Framework/scripts/abp.js.
That's included in _Layout.cshtml
by default:
<environment names="Development">
<script src="~/lib/abp-web-resources/Abp/Framework/scripts/abp.js" asp-append-version="true"></script>
</environment>
<environment names="Staging,Production">
<script src="~/view-resources/Views/_Bundles/shared-layout.min.js" asp-append-version="true"></script>
</environment>
Since it's a JavaScript library and not a .dll, it can be updated in package.json using yarn/npm.
abp = abp || {}. So where does the abp at the right come from?
It doesn't necessarily come from anywhere. It's done like this so that you can define abp and add your properties to the object even before abp.js loads, and this avoids replacing it.
Where does abp.auth get its value then?
abp.auth is just a JavaScript object. If you mean the allPermissions property, see #2569.
It's populated in AuthorizationScriptManager.
how to debug this library?
To enable debugging, change Visual Studio (2017+) Debugging options like in the docs:
Uncheck "Enable Just My Code"
Check "Enable source server support"
Check "Enable source link support"

abp.auth is being set after successful login. It makes GET request to http://mywebsite.com/AbpUserConfiguration/GetAll
The result of AbpUserConfiguration/GetAll action is AbpUserConfigurationDto.
There's Auth property in this result.
Search your solution for GetAll. You can find the client-side code.

Related

Modernizer is not defined

I have included this code in my script. Can someone tell me step by step how to install Modernizer in a page, in English layman point of view?
if(Modernizer.geolocation){
alert("geolocation is supported");
}
"Modernizr is not defined" happens when you try to reference it somewhere in a code but have not included it previously.
You may have your
if(Modernizer.geolocation)
call before Modernizr is included, or you have not included it at all. There is also a case when Modernizr is included but within asynchronous script (in that case, there might be something like <script src="modernizr.js" async></script>).
How to include Modernizr - the easiest way?
First choose your detects - a set of features your custom built version of Modernizr will test:
https://modernizr.com/download
Than save it as modernizer.js somewhere in your source tree, for example 'js/modernizr.rs'. Include it in a script tag before first Modernizr call. Like:
<script src="js/modernizr.rs"></script>
<script>
if(Modernizer.geolocation){
alert("geolocation is supported");
}
</script>

Polymer breaks with old version of Mootools

Latest Update (also updated post title)
So I tracked down the issue to the old version of Mootools (which I cannot upgrade or remove due to project restrictions).
Mootools does the following, which is the code that causes the issue:
/*
Class: Abstract
Abstract class, to be used as singleton. Will add .extend to any object
Arguments:
an object
Returns:
the object with an .extend property, equivalent to <$extend>.
*/
var Abstract = function(obj){
obj = obj || {};
obj.extend = $extend;
return obj;
};
//window, document
var Window = new Abstract(window);
var Document = new Abstract(document);
The new definitions of Window and Document is what's breaking Polymer imports. Any suggestions on updating the code above to gracefully extend the Document/Window objects without breaking existing functionality?
OLD description below before I discovered the issue lies with mootools
I've already included the webcomponents.js script.
Then, when I have the for polymer.html, the errors below start appearing, and my polymer components doesn't work.
The components works in isolation using the polymer-cli. Anyone know what may be causing this issue?
EDIT: So this is what I have in my <head>
<script src="/media/bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="/media/bower_components/polymer/polymer.html">
(...sorry I cannot show more, private company code and what-not)
That's literally all I need in my page to raise the error mentioned above.
I'm starting to think there is some other javascript library (there's a lot) that might be interfering with Polymer, since I cannot replicate the issue on a brand new site.
I should also note, there are no 404's. The polymer.html file does get loaded as expected in the browser, I verified this in my network panel in developer console.

HTML Imports with the Async flag - strange behaviour in Chrome

I am trying to optimise the loading of Polymer Elements in my Polymer based web app. In particular I am concentrating my effort around the initial start up screens. Users will have to log on if they don't have a valid jwt token held in a cookie.
index.html loads an application element <pas-app> which in turn loads an session manager (<pas-eession>). Since the normal startup will be when the user is already logged on the element that handles input of user name and password (<pas-logon>) is hidden behind a <template is="dom-if"> element inside of <pas-session>and I have added the async flag to its html import line in that element as well - thus :
<link rel="import" href="pas-logon.html" async>
However, in chrome (I don't experience this in firefox, where html imports are polyfilled) this async seems to flow over embedded <script> element inside the custom element. In particular I get a type error because the script to cause it to be regestered as a custom element thinks Polymer is not a function.
I suspect I am using the wrong kind of async flag - is there a way to specify that the html import should not block the current element, but should block the scripts inside itself when loaded.
I think I had the same problem today and found this question when searching for a solution. When using importHref async I get errors like [paper-radio-button::_flattenBehaviorsList]: behavior is null, check for missing or 404 import and dependencies are not loaded in the right order. When I change to async = false the error messages are gone.
It seems that this is a known bug of Polymer or probably Chrome https://github.com/Polymer/polymer/issues/2522

Chrome Packages app with JSRender and JSviews

Can I use JSRender and JSViews libraries(http://www.jsviews.com/) in building Chrome Packaged App? Does it violate the CSP policy?
This library syntax uses "script" tag to identify template definition in the HTML file...following is an example of it
<script id="theTmpl" type="text/x-jsrender"> <div> <em>Name:</em>
{{:name}} {{if showNickname && nickname}}
(Goes by <em>{{:nickname}}</em>) {{/if}} </div> </script>
I don't believe JsRender and JsViews are currently CSP compliant, because template compilation uses new Function(). However pre-compilation should be very easy. See jsrender/issues/30 and jsrender/issues/164 . A precompile tool is planned for V1 or V1.1.
In fact you can already do your own precompiling simply by writing:
var myTemplate = $.templates("myTemplateMarkupString");
As to the script tag, no, you don't have to use that approach to declaring templates. As shown above, you can compile from strings or precompile. See http://www.jsviews.com/#compiletmpl for more details and examples.

Javascript of external iwidget on IBM Connections 4 is retrieved but the events (onView) are not fired

I have an iWidget that is deployed outside the Connections environment.
This iWidget is working in WebSphere Portal 8, the iWidget Wrapper.
The iWidget can be added to a community and the initial text is loaded.
The onView() or other events are never invoked, resulting in the iWidget displaying the initial message and the 'div' never being replaced. I have change the src of the javascript in different ways, the ./javascript one, being the latest.
Firebug shows a succesful retrieval of the js (widget.xml) through the communities/proxy context root.
This is the iWidget XML:
<iw:iwidget id="365DocsWidget" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget" supportedModes="view edit" mode="view" lang="en" iScope="365DocsWidgetScope" sandbox="false" allowInstanceContent="true"><iw:itemSet id="pref"><iw:item id="documentlist" value="https://fire3ice.sharepoint.com/sites/demo4if/_api/Web/Lists(guid'cca56100-1f15-461b-92f3-d1da80ba1ca8')"/></iw:itemSet><iw:resource src="./javascript/365DocsWidget.js" /> <iw:content mode="view"><![CDATA[<div id="ROOT_DIV">Hello World, last time this widget was updated: 2013-01-04 16:07:17</div>]]></iw:content><iw:content mode="edit"><![CDATA[<div id="EDITMODE_DIV">Hello Edit World</div><div><input type="button" name="selectDocumentList" value="selectDocumentList" onclick="iContext.iScope().changeDocumentList()" /> </div> ]]></iw:content></iw:iwidget>
The widget.xml is publically accessible here:
https://eog-fire-ice.appspot.com/365DocsWidget.jsp
This might be caused by the Javascript resource for the iWidget not being recognised as Javascript and therefore not being loaded.
Can you set a Content-Type of application/javascript on the response for the JS file?
I've also seen this when I have a typo in the JavaScript file. Please go through the JavaScript file and make sure there are no missing commas or semi-colons.
There is a mismatch between your xml and js.
The iScope in your xml is "365DocsWidgetScope"
The Object declared in your js is "J365DocsWidgetScope" (in https://eog-fire-ice.appspot.com/javascript/365DocsWidget.js)
replace "J365DocsWidgetScope" to "365DocsWidgetScope" should be able to solve the problem.