|
| Re: Custom login on scout [message #1752568 is a reply to message #1752488] |
Wed, 25 January 2017 08:31   |
 Paolo Bazzi
Messages: 33
Registered: January 2017
Location: Switzerland |
Member |
|
|
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
Eclipse Scout Homepage | Documentation | GitHub
[Updated on: Wed, 25 January 2017 11:41] Report message to a moderator |
|
|
|
|
|
| Re: Custom login on scout [message #1779536 is a reply to message #1752488] |
Tue, 09 January 2018 11:45 |
Stéphane Levy
Messages: 6
Registered: July 2017 |
Junior Member |
|
|
With Oxygen, I have found this piece of very useful code in the Spring boot/eclipse scout archetypes in SpringSecurityLoginBox.js :
tasks.SpringSecurityLoginBox.prototype.render = function($parent) {
tasks.SpringSecurityLoginBox.parent.prototype.render.call(this, $parent);
this.$user.attr('name', 'username');
this.$password.attr('name', 'password');
// Here is my custom registration link
this.$register = $('<a>')
.attr('href', 'user/registration')
.text( 'Sign up' )
.appendTo(this.$form);
this.$user.focus();
};
[Updated on: Tue, 09 January 2018 11:46] Report message to a moderator |
|
|
| Re: Custom login on scout [message #1779538 is a reply to message #1779536] |
Tue, 09 January 2018 12:12 |
Paolo Bazzi
Messages: 33
Registered: January 2017
Location: Switzerland |
Member |
|
|
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
Eclipse Scout Homepage | Documentation | GitHub
|
|
|
Powered by
FUDForum. Page generated in 0.02256 seconds
] 
Search
Help
Register
Login
Home
