Login URl

[MattFox]

Under the mango UI Settings, there's an option to set the login page URL. Does this mean I can write and apply my own custom login page? I've got issues with localStorage not working for iOS users with safari so autologin doesn't work for them... It's frustrating a lot of my customers so it seems like the only solution I have is to write a new login page and hope it works...
I still haven't upgraded to 3.7.7 but since this is a browser issue I'm dubious if upgrading will solve my problem...

Fox

[guetteluis]

Hey @mattfox,

Yes, you can add custom login page. Probably, you will need to create a custom AngularJS component, depending on how much you want to customize it. Here is an example:

HTML

<div class="login-container" flex="100" layout="row" layout-wrap>

    <div flex="100" flex-gt-sm="50">
        <img class="rc-login-img" src="/rest/v2/file-stores/public/img/school-login.jpg" alt="Login">
    </div>
    
    <div flex="100" flex-gt-sm="50" layout="row" layout-wrap layout-align="center center" md-colors="::{background: 'blue-800'}">
        <div flex="100" layout="row" layout-wrap layout-align="center center">
            <img class="mt-10" src="../../resources/svg/logo.svg" alt="Logo" height="70">
        </div>

        <div flex="100" class="mt-10" layout="row" layout-wrap layout-align="center center">
            <md-card flex="100" flex-gt-sm="60" flex-gt-md="50">
                <md-card-title>
                    <md-card-title-text>
                        <span class="md-headline">Login</span>
                    </md-card-title-text>
                </md-card-title>
                <md-card-content layout="column">
                    <ma-login on-success="$ctrl.onSuccess($user, $state)">
                        <ma-logged-in class="already-logged-in" ng-if="$ctrl.User.current && $ctrl.User.current.username !== 'guest'">
                            <span ma-tr="login.aleadyLoggedIn" ma-tr-args="[$ctrl.User.current.username]"></span>
                            <a ui-sref="actions">Go to Action Submission</a>
                        </ma-logged-in>

                        <a ui-sref="customRegister" tabindex="5" ma-tr="login.emailVerification.registerUser"></a>
                        <a ui-sref="forgotPassword({username: username})" tabindex="4" ma-tr="login.forgotYourPassword"></a>
                    </ma-login>
                </md-card-content>
            </md-card>
        </div>
    </div>
</div>

Javascript

define(['angular', 'require'], function(angular, require) {
    'use strict';
    
customLogin.$inject = ['maUser', '$injector'];
function customLogin(maUser, $injector) {

    this.maUiLoginRedirector = $injector.has('maUiLoginRedirector') && $injector.get('maUiLoginRedirector');

    this.onSuccess = (user, state) => {
        if (state.params.redirectTo) {
            state.go(state.params.redirectTo, JSON.parse(state.params.withParams));
        } else {
            return this.maUiLoginRedirector.redirect(user);
        }
    };

}

return {
    bindings: {
    },
    controller: customLogin,
    templateUrl: require.toUrl('./login.html')
};

});

You need to create a custom route for this component in the User Module:

define([
    'angular',
    'require',
    './components/customLogin.js',
    ],
function(angular, require, customLogin) {
'use strict';

var dukeEnergyModule = angular.module('dukeEnergyModule', ['maUiApp'])
    .component('customLogin', customLogin)

dukeEnergyModule.config(['maUiMenuProvider', function(maUiMenuProvider) {
    maUiMenuProvider.registerMenuItems([
        {
            name: 'customLogin',
            url: '/user-login?redirectTo=&withParams=',
            template: '<custom-login></custom-login>',
            menuIcon: 'fa-certificate',
            menuText: 'Login',
            weight: 100,
            menuHidden: true,
            params: {
                noPadding: false,
                hideFooter: false,
            },
        }
    ])
}]);

Finally, you need to add this url in administration > System setting > UI module settings

If you need more details, I will be happy to help

Luis

[MattFox]

Thanks for the bones @guetteluis, I'll see what I can come up with. Am thinking of using store.js for my autologin needs since the $localStorage provider doesn't seem to like safari.

[JoelHaggar]

Hey Matt, Can you describe the issue you are having a bit more? I just tested with Safari on my iPhone and the auto-login seems to work.

[MattFox]

From what I gather, the login fields don't auto fill. Customers who save the page to the homescreen still constantly have to relogin and despite telling safari to save their password on login, the fields still don't auto fill and thus they have to constantly re-enter their login details.

I read that angular JS in a git request had an issue where localStorage doesn't work in the instance that a private tab is open which doesn't help developers in the slightest. I'm considering having to rewrite my entire dashboard into a different library since angularjs has only a year left on support before it becomes legacy now as well...

[JoelHaggar]

Ok, interesting, I'll have to test that a bit more. There is an actual feature called Auto Login under the Admin menu that allows the user to save their login in local storage. They will never see the login page after they set that up.

[guetteluis]

I've tested in a local Mango 3.7.1, with Safari, in my iPhone, and it is working fine. What I see is that, when you enter the first time, you will get redirected to the login page, but it still says that you already logged in. But then, if you try again, you get redirected to the correct page. I think this problem was solved in later versions.

Luis

[MattFox]

@guetteluis said in Login URl:

I've tested in a local Mango 3.7.1, with Safari, in my iPhone, and it is working fine. What I see is that, when you enter the first time, you will get redirected to the login page, but it still says that you already logged in. But then, if you try again, you get redirected to the correct page. I think this problem was solved in later versions.

Luis

This is exactly what I'm trying to solve won't work at the moment. I may need some assistance with someone to spend a few minutes logging in to my system to see if there's something not happening that should be. I'll see how I get on...

Fox

[MattFox]

Looks like I actually have to kill the safari session/close the tab window in order to make it work.