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