| Custom login on scout [message #1752488] |
Tue, 24 January 2017 07:27  |
Eclipse User |
|
|
|
|
Good morning. I am creating an application that has as basic requirement that in the screen of login it is possible to recover the password of the user. The idea would be to create a button on the login screen I forgot my password and in recovery a temporary password will be sent by email to the user. How can I do this in scout? Create a button or a link on the login screen.
|
|
|
| Re: Custom login on scout [message #1752568 is a reply to message #1752488] |
Wed, 25 January 2017 03:31  |
| Eclipse User |
|
|
|
Hi Juliano
Quote:How can I do this in scout? Create a button or a link on the login screen.
You need to override and replace the Scout LoginBox with an own extended implementation. This is possible, using the current Scout version, but not very straightforward. We improved the extensibility of the LoginBox with the next Scout Oxygen release.
Steps:
Create a new LoginBox implementation extending the Scout LoginBox:
\helloworld.ui.html\src\main\js\helloworld\LoginBox.js
helloworld.LoginBox = function(opts) {
helloworld.LoginBox.parent.call(this, opts);
};
scout.inherits(helloworld.LoginBox, scout.LoginBox);
helloworld.LoginBox.prototype.init = function(opts) {
helloworld.LoginBox.parent.prototype.init.call(this, opts);
};
helloworld.LoginBox.prototype.render = function($parent) {
helloworld.LoginBox.parent.prototype.render.call(this, $parent);
this.$resetButton = $('<button>')
.addClass('button')
.text('Reset password')
.click(this._onResetPasswordButton.bind(this))
.appendTo(this.$content);
};
helloworld.LoginBox.prototype._onResetPasswordButton = function(event) {
alert('do something');
};
Use the _onResetPasswordButton method to perform a call to the server to send out the new password. Check out scout.LoginBox_onLoginFormSubmit() method for an example.
Then add your own login.js to create the new LoginBox instance:
helloworld.ui.html\src\main\js\helloworld\login.js
scout.login = {
init: function(opts) {
scout.prepareDOM();
var loginBox = new helloworld.LoginBox(opts);
loginBox.render($('body'));
}
};
Then to have your own JavaScript code loaded, create a new login-macro file:
helloworld.ui.html\src\main\resources\WebContent\res\application-all-login-macro.js
__include("scout-login-module.js");
__include("hello-world-login-module.js")
And finally, add your macro file to your login.html file:
\helloworld.ui.html\src\main\resources\WebContent\login.html
...
<scout:script src="res/jquery-all-macro.js" />
<scout:script src="res/application-all-login-macro.js" />
...
Cheers,
Paolo
[Updated on: Wed, 25 January 2017 06:41] by Moderator |
|
|
|
|
|
|
| Re: Custom login on scout [message #1779538 is a reply to message #1779536] |
Tue, 09 January 2018 07:12 |
| Eclipse User |
|
|
|
Hi Stéphane
Basically with the Oxygen Release the part which instanciates the custom Login Box was optimized.
Before Oxygen you had to write this code, as mentioned in my previous posting:
helloworld.ui.html\src\main\js\helloworld\login.js
scout.login = {
init: function(opts) {
scout.prepareDOM();
var loginBox = new helloworld.LoginBox(opts);
loginBox.render($('body'));
}
};
This code is no longer requred, because the Login Box instance is now created using the Scout object factory:
var loginBox = scout.create('LoginBox', options);
In order to override the originally registered LoginBox instance, you need to provide a custom object factory for your objects:
helloworld.ui.html\src\main\js\helloworld\objectFactories.js
scout.objectFactories = $.extend(scout.objectFactories, {
'LoginBox' : function() {
return new helloworld.LoginBox();
}
});
And do not forget to include all your custom java script files in your module file:
hello-world-login-module.js
(function(helloworld, scout, $, undefined) {
__include("helloworld/LoginBox.js");
__include("helloworld/objectFactories.js");
}(window.helloworld = window.helloworld || {}, scout, jQuery));
The other snippets remain the same.
The SpringSecurityLoginBox is a complete example of those snippets:
https://github.com/BSI-Business-Systems-Integration-AG/SpringBoot-and-EclipseScout/tree/bb97efde3490f37057b2a019f4b030bca3697db7/org.eclipse.scout.springboot/src/main/js
Cheers,
Paolo
|
|
|
Powered by
FUDForum. Page generated in 0.07061 seconds
Home