When posting a form in my web app I perform a couple of checks in javascript before validating the form in the backend. The js validation is dependent upon I18 messages and images.
If this was a scala template I would of course use #Messages and #routes.Assets.at but I don't want to mix the two(scala template and .js file).
E.g I have this check in my js file where currently the image routes is hardcoded:
$("form input[type=submit]").click(function (e) {
e.preventDefault();
var email = $("#username");
var emailPattern = /^([0-9a-zA-Z]([-\.\w]*[0-9a-zA-Z])*#([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/;
if (email.val() == "") {
email.css("background-image", "url('/assets/images/general/input-row-red.jpg')");
return e.preventDefault();
} else {
email.css("background-image", "url(/images/general/inputTextBg.png)");
}
});
I have tried to prepare the js files with the messages they need like this:
.js file:
/* Prepare messages*/
var messages = "";
$.getJSON("/messages/source", {
"keys": "sms.form.login.hide,sms.form.login"},
function (data) {
messages = data.messages;
});
MessageSource controller:
object MessageSource extends Controller {
def getMessages(keys : String) = Action { request =>
if(keys.isEmpty) {
BadRequest(Json.obj("status" -> "KO", "message" -> "key plix!"))
}
else {
var js = Map.empty[String, String]
for (k <- keys.split(",")) {
js = js + (k -> Messages(k))
}
Ok(Json.obj("status" -> "OK", "messages" -> js))
}
}
}
But I don't feel that this is the best solution. I have looked at http://www.playframework.com/documentation/2.1.0/ScalaRouting but I can't figure it out.
Maybe you have some nice solution for me?
Maybe this way?
jsfile:
#scripts = {
<script type="text/javascript" src="#routes.Application.javascriptRoutes"></script>
<script type="text/javascript">
jsRoutes.controllers.Application.messages("admin.venue.1,admin.venue.2,admin.venue.3" ).ajax({
type: 'GET',
success: function (data) {
console.log(data.messages);
},
error: function () {
console.log("error");
}
});
</script>
}
Controller:
object Application extends Controller {
def javascriptRoutes = Action {
implicit request =>
import routes.javascript._
Ok(
Routes.javascriptRouter("jsRoutes")
(
routes.javascript.Application.messages
)
).as("text/javascript")
}
def messages(keys : String) = Action {
implicit request => {
val messages = keys.split(",").map { key =>
key -> Messages(key)
}.toMap
Ok(Json.obj("status" -> "OK", "messages" -> messages))
}
}
}
routes:
# Javascript routes
GET /javascriptRoutes controllers.Application.javascriptRoutes
GET /messages controllers.Application.messages(keys: String)
Related
This will be a post where I ask the question and propose a solution
Since having had several trouble and having looked around a lot I decided to post my final solution for anyone else to take profit from it.
Question:
How to render google's reCaptcha v2.0 widget and verifying it in a Marionettejs app with a java back end.
After the common steps and following google guides to render the re captcha my captcha still didn't render, so here comes my solution:
Rendering the captcha and the inclusion of the script are both made inside the itemview onRender function:
'text!login/templates/form.html',
'app'
], function (app, Marionette, Backbone, _, $, Handlebars, FormTemplate) {
return Marionette.ItemView.extend({
template: Handlebars.compile(FormTemplate),
ui: {
form: '
},
events: {
'submit #ui.form': 'onSubmit'
},
onRender: function() {
this.loadCaptcha();
},
loadCaptcha: function() {
var self = this;
var getRecaptchaResponse = function(response) {
self.captchaResponse = response;
};
window.renderCaptcha = function () {
self.captchaWidgetId = grecaptcha.render('yourCaptchaDiv', {
sitekey: 'YourSiteKey',
callback: getRecaptchaResponse
});
};
$.getScript('https://www.google.com/recaptcha/api.js?onload=renderCaptcha&render=explicit', function() {});
},
...
}
I tried other ways of loading the script with several errors, like the script loaded before the div for it, or the browser says de Dom has completely loaded but the onRender gets called after
I had to include a div for the captcha widget to load in, this is in
form.html
<div id="reCaptcha" class="btn"></div>
That will have your widget rendered, now you need to both verify it has been filled and it is a valid user response with google, for this I use the same module and use the next function:
onSubmit: function (e) {
//only act if the captcha has been filled - This could be easily erased from a browser, but a back end verification takes place too
if (grecaptcha.getResponse() !== "") {
e.preventDefault();
var _view = this;
this.blockForm();
$.ajax({
url: 'yourLoginService',
type: 'POST',
data: {
userLogin: this.ui.user.val(),
userPassword: this.ui.password.val(),
//get the captcha response
captchaResponse: grecaptcha.getResponse()
}
}).done(function (data) {
app.router.navigate('', {trigger: true});
_view.destroy();
}).fail(function (jqXHR, textStatus, errorThrown) {
// your fail handling
});
}
},
Then comes the time to verify your captcha server side using the secret key provided by google (note this is a Java6 app, therefore the clumbersome exception Handling):
//some other imports ignored
import org.apache.commons.io.IOUtils;
import org.json.JSONException;
import org.json.JSONObject;
class Captcha {
private static final String CAPTCHA_SECRET_KEY = "YourSecretKey";
private static final Logger LOGGER = Logger.getLogger(Captcha.class);
static boolean isCaptchaValid(String response) {
try {
String url = "https://www.google.com/recaptcha/api/siteverify?"
+ "secret=" + CAPTCHA_SECRET_KEY
+ "&response=" + response;
InputStream res = new URL(url).openStream();
JSONObject json = new JSONObject(getJsonResponse(res));
res.close();
return json.getBoolean("success");
} catch (JSONException e) {
LOGGER.error("Can not parse captcha response Json: " + e);
return false;
} catch (MalformedURLException e) {
LOGGER.error("Malformed URL: " + e);
return false;
} catch (IOException e) {
LOGGER.error("Error reading response from captcha verification response: " + e);
return false;
}
}
private static String getJsonResponse(InputStream res) throws IOException {
BufferedReader rd = new BufferedReader(new InputStreamReader(res, Charset.forName("UTF-8")));
/*TODO in java 8+ use this and avoid using the external library
return rd.lines().collect(Collectors.joining());
*/
return IOUtils.toString(rd);
}
}
I have got to know toaster.js from this site and trying to implement it in my web app. I have done it according to the example but it doesn't work.
Here is my service where I Implemented:
function () {
angular
.module('FoursquareApp')
.factory('DataService', DataService);
DataService.$inject = ['$http','toaster'];
function DataService($http, toaster) {
.id,
venueName: venue.name,var serviceBase = '/api/places/';
var placesDataFactory = {};
var userInContext = null;
var _getUserInCtx = function () {
return userInContext;
};
var _setUserInCtx = function (userInCtx) {
userInContext = userInCtx;
};
var _savePlace = function (venue) {
//process venue to take needed properties
var minVenue = {
userName: userInContext,
venueID: venue
address: venue.location.address,
category: venue.categories[0].shortName,
rating: venue.rating
};
return $http.post(serviceBase, minVenue).then(
function (results) {
toaster.pop('success', "Bookmarked Successfully", "Place saved to your bookmark!");
},
function (results) {
if (results.status == 304) {
toaster.pop('note', "Faield to Bookmark", "Something went wrong while saving :-(");
}
else {
toaster.pop('error', "Failed to Bookmark", "Something went wrong while saving :-(");
}
return results;
});
};
I have called the library scripts in index.html and also the css files.
Any ideas of what I might be doing wrong?
Are you sure that you use toaster.js library? The popular one is toastr.js
Try to modify your code to
DataService.$inject = ['$http','toastr'];
function DataService($http, toastr) {
...
Also ensure, that you link this js file in you index.html and also refer this package in main app module definition as a second (dependency) parameter
I have a serious issue here. My application relies on SignalR functionality, but because of that I am unable to write unit tests. I am new to testing frameworks and have used Jasmine only in simple cases. SignalR has proven to be too much of a challenge for me, but I need to understand how I can successfully test it.
This is my CommsApp.ts file [typescript]:
/// <reference path="References.ts" />
var commsAnimationsModule = angular.module('forge.communications.animations', ['ngAnimate']);
var commsDirectivesModule = angular.module('forge.communications.directives', []);
var commsServicesModule = angular.module('forge.communications.services', []);
var commsFiltersModule = angular.module('forge.communications.filters', []);
var commsApp = angular.module('forge.communications.CommsApp',
[
'ngRoute',
'ngAnimate',
'cfValidation',
'ui.bootstrap',
'forge.communications.animations',
'forge.communications.directives',
'forge.communications.services',
'forge.communications.filters',
'angularFileUpload',
'timeRelative'
]);
commsApp.config(function ($routeProvider: ng.route.IRouteProvider, $locationProvider: any) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/scheduled-messages', {
templateUrl: '/forge/CommsApp/js/Controllers/ScheduledMessageList/ScheduledMessageList.html',
controller: 'ScheduledMessageListController'
}).
when('/geotriggered-messages', {
templateUrl: '/forge/CommsApp/js/Controllers/GeoMessageList/GeoMessageList.html',
controller: 'GeoMessageListController'
}).
when('/scheduled-message/create', {
templateUrl: '/forge/CommsApp/js/Controllers/CreateScheduledMessage/CreateScheduledMessage.html',
controller: 'CreateScheduledMessageController'
}).
when('/scheduled-message/edit/:id', {
templateUrl: '/forge/CommsApp/js/Controllers/EditScheduledMessage/EditScheduledMessage.html',
controller: 'EditScheduledMessageController'
}).
when('/geotriggered-message/create', {
templateUrl: '/forge/CommsApp/js/Controllers/CreateGeotriggeredMessage/CreateGeotriggeredMessage.html',
controller: 'CreateGeotriggeredMessageController'
}).
when('/geotriggered-message/edit/:id', {
templateUrl: '/forge/CommsApp/js/Controllers/EditGeotriggeredMessage/EditGeotriggeredMessage.html',
controller: 'EditGeotriggeredMessageController'
}).
otherwise({
redirectTo: '/scheduled-messages'
});
});
commsApp.run(function ($rootScope: ICommsRootScope, commsSignalrEventService: CommsSignalrEventService, commsMgmtHttpService: CommsMgmtHttpServiceClient) {
// set up the items on the root scope
$rootScope.SelectedLocale = 'en-ie';
$rootScope.ForgeApplicationKey = "9496B737-7AE2-4FBD-B271-A64160759177";
$rootScope.AppVersionString = "1.0.0";
$rootScope.SessionToken = getCookie("ForgeSessionToken");
commsSignalrEventService.initialize().done(() => {
// send any messages about a new user logging in to the application here.
});
// call this at app startup to pre-cache this data for the create and edit pages
commsMgmtHttpService.GetUpdateMessageEditorOptions();
});
function getCookie(name:string) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length == 2) return parts.pop().split(";").shift();
}
This is the test file (I removed most of the code since it's not working anyway, I have been chasing my own tail here):
describe('forge.communications.CommsApp', function () {
beforeEach(module('forge.communications.CommsApp'));
var route, rootScope, proxy, commsSignalrEventService;
beforeEach(inject(function (_$route_, _$rootScope_, _commsSignalrEventService_) {
route = _$route_,
rootScope = _$rootScope_;
commsSignalrEventService = _commsSignalrEventService_;
}));
describe("should map routes to controllers and templates", function () {
it("/scheduled-messages route should be mapped to ScheduledMessageListController", function () {
expect(2).toEqual(2);
expect(route.routes['/scheduled-messages'].controller).toBe('ScheduledMessageListController');
});
});
});
This is CommsSignalREventService.ts file:
var servicesModule: ng.IModule = angular.module('forge.communications.services');
servicesModule.factory('commsSignalrEventService', function ($rootScope): CommsSignalrEventService {
return new CommsSignalrEventService($rootScope);
});
class CommsSignalrEventService {
private $rootScope: ng.IScope;
private proxy:any = null;
constructor($rootScope) {
this.$rootScope = $rootScope;
}
public initialize(): JQueryPromise<any>{
this.proxy = $.connection['communicationsCenterHub'];
console.log('proxy',this.proxy);
//scheduled messages
this.proxy.client.broadcastScheduledMessageCreatedEvent = (messageId: number) => {
this.$rootScope.$broadcast('comms-message-created', { messageId: messageId });
};
this.proxy.client.broadcastScheduledMessageUpdatedEvent = (messageId: number) => {
this.$rootScope.$broadcast('comms-message-updated', { messageId: messageId });
};
this.proxy.client.broadcastScheduledMessageStateChangedEvent = (messageId: number) => {
this.$rootScope.$broadcast('comms-message-statechanged', { messageId: messageId });
};
this.proxy.client.broadcastScheduledMessageDeletedEvent = (messageId: number) => {
this.$rootScope.$broadcast('comms-message-deleted', { messageId: messageId });
};
//geotriggered messages
this.proxy.client.broadcastGeoMessageCreatedEvent = (messageId: number) => {
this.$rootScope.$broadcast('comms-geomessage-created', { messageId: messageId });
};
this.proxy.client.broadcastGeoMessageUpdatedEvent = (messageId: number) => {
this.$rootScope.$broadcast('comms-geomessage-updated', { messageId: messageId });
};
this.proxy.client.broadcastGeoMessageStateChangedEvent = (messageId: number) => {
this.$rootScope.$broadcast('comms-geomessage-statechanged', { messageId: messageId });
};
this.proxy.client.broadcastGeoMessageDeletedEvent = (messageId: number) => {
this.$rootScope.$broadcast('comms-geomessage-deleted', { messageId: messageId });
};
var promise = $.connection.hub.start();
promise.done(function () {
//console.log('comms signalr hub started');
});
return promise;
}
public RegisterScheduledMessageCreated(messageId: number): void{
this.proxy.server.registerScheduledMessageCreated(messageId);
}
public RegisterScheduledMessageUpdated(messageId: number): void {
this.proxy.server.registerScheduledMessageUpdated(messageId);
}
public RegisterScheduledMessageDeleted(messageId: number): void {
this.proxy.server.registerScheduledMessageDeleted(messageId);
}
public RegisterScheduledMessageStateChanged(messageId: number): void {
this.proxy.server.registerScheduledMessageStateChanged(messageId);
}
public RegisterGeoMessageCreated(messageId: number): void {
this.proxy.server.registerGeoMessageCreated(messageId);
}
public RegisterGeoMessageUpdated(messageId: number): void {
this.proxy.server.registerGeoMessageUpdated(messageId);
}
public RegisterGeoMessageDeleted(messageId: number): void {
this.proxy.server.registerGeoMessageDeleted(messageId);
}
public RegisterGeoMessageStateChanged(messageId: number): void {
this.proxy.server.registerGeoMessageStateChanged(messageId);
}
}
The error I am seeing constantly in the command line, whenever I run karma, is forge.communications.CommsApp encountered a declaration exception FAILED
TypeError: Cannot read property 'client' of undefined at CommsSignalREventService, meaning that the 'proxy' variable in CommsSignalREventService.ts file is undefined:
this.proxy = $.connection['communicationsCenterHub'];
console.log('proxy', this.proxy); //resolves to UNDEFINED in tests, works fine in the app
this.proxy.client.broadcastScheduledMessageCreatedEvent = function (messageId) {
_this.$rootScope.$broadcast('comms-message-created', { messageId: messageId });
};
I will appreciate any help, because the amount of time I have put trying to figure it out is beyond ridiculous at this stage.
I think your issue is that your actual app references JavaScript dynamically generated by SignalR at runtime. This script is generally found at "~/signalr/hubs" or "~/signalr/js".
This script is what creates the $.connection['communicationsCenterHub'] proxy for you. Without a reference to this script in your test, this proxy will be undefined.
I'm presuming that you are not running the SignalR server when you are running your Jasmine tests. If this is the case you have two options:
You can simply copy the script generated by SignalR at "~/signalr/hubs" to a file and reference that in your tests. You could manually do this by pointing your browser to the generated script URL and, but you would have to update this file anytime your hub changes. You can automate this by running signalr.exe ghp /path:[path to the .dll that contains your Hub class] as a post-build step which will generate this file for you.
You can just avoid using the generated proxy altogether. Look at the "Without the generated proxy" section of the SignalR JS API reference.
I am trying to build a simple app using Angular JS. Here I have two html files (Login.html & Dashboard.html). when I run the Login.html it works well And on the successful log in I need to show the user dashboard with the json data populated(from server) at Login time.
here is my code: (main.js)
var app = angular.module('NovaSchedular', []);
app.factory('MyService', function()
{
var savedData = {}
function set(data)
{
savedData = data;
}
function get()
{
return savedData;
}
return {
set: set,
get: get
}
});
function LoginController($scope,$http,MyService,$location)
{
$scope.login = function(str) {
console.log(".......... login called......");
var validEmail=validateEmail(email.value);
if(validEmail && password.value != ""){
$http.post('./nova/TaskManager/public/user/login?email='+email.value+'&password='+password.value).success(function(data, status)
{
console.log(data);
var result=data.response;
console.log(result);
if (result=="success")
{
$scope.userId=data.user_id;
$scope.email=data.email;
$scope.Name=data.name;
$scope.password=data.password;
$scope.Type=data.type;
console.log("........"+$scope.userId);
console.log("........"+$scope.email);
console.log("........"+$scope.Name);
console.log("........"+$scope.password);
console.log("........"+$scope.Type);
MyService.set(data);
console.log(data);
alert(data.message);
window.location.href='./Dashboard.html';
//$location.path('./Dashboard.html', data);
}
else
alert(data.message);
});
}
}
}
function DashboardController($scope,$http,MyService)
{
$scope.userInfo = MyService.get();
}
here after LOGIN successfully, I am getting the server response (json data) under the LoginController well. Now, further I need these data to be available on the Dashboard page so that dashboard would populate with the respective user data.
I am trying this by using:
window.location.href='./Dashboard.html';
//$location.path('./Dashboard.html', data);
but it didn't work for me. It's redirecting to the Dashboard.html well, but doesn't containing the data what I need to pass from the LoginController to the DashboardController. so, that it would available for the Dashboard.html page.
while seeing at the console for the Dashboard.html, it's empty json is showing there.
Don't know what's missing. why it's not passing the data.
Any suggestion would be appreciated.
try this controller code :
app.controller('LoginController' function($scope,$http,MyService,$location)
{
$scope.login = function(credential) {
console.log(".......... login called......");
var validEmail=validateEmail(credential.email);
if(validEmail && credential.password!= ""){
MyService.login(credential);
}
}
});
and this:
app.controller('DashboardController',function($scope,$http,MyService)
{
$scope.userInfo = MyService.getDashboardData();
});
MyService.js:
var app = angular.module('NovaSchedular', []);
app.factory('MyService', function()
{
var dashboardData;
var obj={
login:function(credential){
$http.post('./nova/TaskManager/public/user/login?email='+credential.email+'&password='+credential.password).success(function(data, status, headers) {
dashboardData=data;
window.location.href='./Dashboard.html';
})
.error(function(data, status, headers, config) {
console.error('error in loading');
});
},
getDashboardData:function(){
return dashboardData;
}
}
return {
login:obj.login,
getDashboardData:obj.getDashboardData
}
});
I want to pass string value from c# to JavaScript using JSON. So I created an example plugin name: Echo.cs (in CordovaWP namespace), and an "echo" method in Echo class. Like this tutorial.
In index.js, I called:
cordova.exec(function (result)
{
alert("OK");
}, function (error) {
alert("KO");
}, "CordovaWP.Echo", "echo", "ok");
But I can't get debug in echo method. And have nothing found!
Use as below:
cordova.exec(function (result)
{
alert("OK");
}, function (error) {
alert("KO");
}, "CordovaWP.Echo", "echo", ["ok"]);
Parameters should always be sent as an array from JS to cs
Please can you also post your CS code:
Check sample below SMS example:
JS:
var sendSMS = function(phoneNumber,smsBody){
cordova.exec(function(){console.log("success SMS");},function(){console.log("Error SMS");},"SMS", "sendSMS", [phoneNumber,smsBody]);
};
CS:
namespace Cordova.Extension.Commands{
public class SMS : BaseCommand
{
public void sendSMS(string arg)
{
string recipient = JsonHelper.Deserialize<string[]>(arg)[0];
string smsBody = JsonHelper.Deserialize<string[]>(arg)[1];
SmsComposeTask composeSMS = new SmsComposeTask();
composeSMS.Body = smsBody;
composeSMS.To = recipient;
composeSMS.Show();
this.DispatchCommandResult();
}
}
}