Login popup skinning


#1

How hard is it to modify login popup? What files are involved?


Canvas Log out
#2

Hi @aeremenko,

By “login popup” do you mean create your own pop-up login screen? Or modify the login page?

Our current login page is in html/login.html. So by default, if it is a 401, it gets redirected to that page. And if you look at that file, it only has these:

[code]




[/code]

So if you want to create your own login screen, either you create your own login prompt, then update the above page to make it ‘modal’ then use a function in $tm1Ui to login:

$tm1Ui.applicationLogin(instance, username, password, cam);

Do take note as well that you need to handle the redirect once the user has logged in successfully.

Then if you are looking to just update the login look and feel, check the Help section on <tm1-ui-login></tm1-ui-login> as this also has the tm1-class attribute for which you can add your own CSS class to add style to.

Let me know if this helps clarify.

Cheers!
Paul


#3

What would be the best way to intercept 401 response without interference with the default behavior?


#4

I replaced <tm1-ui-login></tm1-ui-login> in html/login.html with my own form and attached applicationLogin function to a button.
It does work.
A few things:

  1. When I click the button, it returns 403 error in console.
  2. How to find previous state? I.e. the state of the page from which I was redirected to the login page.
    Currently I can use $state.go(‘state-name’), when the user logs in successfully, but it is static.

#5

Hi @aeremenko,

  1. What was the exact error in the console?
  2. One of the ways possibly is to work it out to manage and to save the states

Cheers!
Paul


#6

Hi @aeremenko,

What is the reason for re-writing the login page? I think it should be avoided unless absolutely necessary.


#7

Hi All,

I have the same question. How to get a previous state?

I’m trying to use a code below (by pasting it into controller), but I see only null in console:

$rootScope.$on('$stateChangeSuccess', function(event, to, toParams, from, fromParams) {
    //save the previous state in a rootScope variable so that it's accessible from everywhere
    console.log(from);
    $rootScope.previousState = from;
});

Regards,
Eugene


#8

Is it in main controller?


#9

Not yet. let me test again.


#10

Hi @aeremenko,

No difference. It looks this event doesn’t fire.


#11

Solved by utilizing $transitions. From ui-router 1.0.0 rootScope.$on( … ) does not fire.


#12

This should work:

$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {

});

#13

Hi @aeremenko,

it doesn’t work for me. I use $transitions events instead.


#14

Weird. Canvas should be using 0.2.15, according to about page.


#15

Hi @aeremenko,

Some libraries have been upgraded, mainly related to memory management.

We are finalizing a few more items and awaiting final feedbacks from the upgraded version before it is officially released and documented.

He most probably is using an interim build found on our shared download folders under Canvas.

Your ui-router version should be correct as per your Canvas version.

Hi @eugene,

Just take note that interim builds are still undergoing tests and verification.


Paul


#16

I had to update a Canvas application from version 1.1.20170310 to the latest version 2.0.7. Like mentioned before in this thread the $stateChange events are deprecated and now you have to use $transitions.

This was the old code in js\controllers\system\main.js:

$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {

    if (toState.name === 'base') {
        $scope.landingPage = true;
        $scope.headerText = stateHeaders[toState.name];
    } else if (toState.name === 'create') {
        $scope.nav = 'create';
        $scope.landingPage = false;
    } else {
        $scope.headerText = stateHeaders['main'];
        $scope.nav = 'view';
        $scope.landingPage = false;
    }

To use $transitions you have to first inject it into the controller (in this case ‘MainCtrl’):

app.controller('MainCtrl', ['$scope', '$rootScope', '$interval', '$timeout', '$state', '$stateParams', '$http', '$location', 'Goodman', '$tm1Ui', '$transitions',
	function ($scope, $rootScope, $interval, $timeout, $state, $stateParams, $http, $location, Goodman, $tm1Ui, $transitions) {

The new code using $transitions:

$transitions.onStart({}, function ($transitions) {

    var newToState = $transitions.$to();

    if (newToState.name === 'base') {
        $scope.landingPage = true;
        $scope.headerText = stateHeaders[newToState.name];
    } else if (newToState.name === 'create') {
        $scope.nav = 'create';
        $scope.landingPage = false;
    } else {
        $scope.headerText = stateHeaders['main'];
        $scope.nav = 'view';
        $scope.landingPage = false;
    }