What I'm trying to achieve: Firebase email and password based authentication (user register) using Knockout.js in a game environment.
Issue: While retrieving and writing to the database works, I'm facing difficulties implementing user registration. The response returns following error: "This browser is not supported".
What are the requirements in order to perform an authentication process, issues might arise due to not using a regular browser but a game built-in one.
Edit: html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<noloc><title>UberBar</title></noloc>
<link href="bundle://boot/boot.css" rel="stylesheet" type="text/css" />
<link href="uberbar.css" rel="stylesheet" type="text/css" />
<script src="https://www.gstatic.com/firebasejs/5.0.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "*************************************",
authDomain: "**************.firebaseapp.com",
databaseURL: "https://**********.firebaseio.com",
projectId: "**************",
storageBucket: "****************.appspot.com",
messagingSenderId: "**********"
};
firebase.initializeApp(config);
</script>
<script src="bundle://boot/boot.js" type="text/javascript"></script>
<script src="coui://ui/main/shared/js/jabber.js" type="text/javascript"></script>
<script src="coui://ui/main/shared/js/leaderboard_utility.js" type="text/javascript"></script>
<script src="uberbar.js" type="text/javascript"></script>
</head>
<body data-bind="click: hideContextMenu">
<div id="social-wrapper">
<!-- ko if: (model.showUberBar()) -->
<div id="uberbar_watermark">
<loc>Offline</loc>
</div>
<!-- /ko -->
<!-- ko if: (model.showUberBar() && model.hasJabber()) -->
<!-- ko if: showUserDetails -->
<!-- File continues here... -->
Edit: js
var model;
var handlers;
$(document).ready(function () {
function PaChatModel() {
var self = this;
self.setColor = ko.observable(false);
self.setVisibility = ko.observable(false);
self.verificationStatus = ko.observable();
var chat_auth_status = 0;
self.verificationStatus('PA Community Chat (Authentication Required)');
self.awaitPermissionClose = function() {
self.verificationStatus('PA Community Chat (Authentication Required)');
self.setVisibility(false);
chat_auth_status = 0;
}
self.chatVerificationStatus = function() {
switch(chat_auth_status) {
case 0:
self.verificationStatus('Authentication in progress: Awaiting permission...');
self.setVisibility(true);
chat_auth_status = 1;
break;
}
}
}
PaChatModel();
function AwaitPermissionSubmit() {
var self = this;
self.mailValue = ko.observable();
self.pswValue = ko.observable();
self.awaitPermissionError = ko.observable();
var firebaseRef = firebase.database().ref();
self.awaitPermissionSubmitBtn = function() {
console.log(self.pswValue().length);
if(!validateEmail(self.mailValue()) && self.pswValue().length < 8) {
self.awaitPermissionError("Wrong E-Mail and Password format");
} else if(self.pswValue().length < 8) {
self.awaitPermissionError("Password must be at least 8 characters long");
} else if(!validateEmail(self.mailValue())) {
self.awaitPermissionError("Invalid E-Mail format");
}
else {
firebase.auth().createUserWithEmailAndPassword(self.mailValue(), self.pswValue()).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// [START_EXCLUDE]
if (errorCode == 'auth/weak-password') {
self.awaitPermissionError("The password is too weak.");
} else {
self.awaitPermissionError(errorMessage);
}
console.log(error);
// [END_EXCLUDE]
});
}
}
}
function validateEmail(email) {
var type = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return type.test(email);
}
AwaitPermissionSubmit();
Related
Following is the code I am trying for vis.js .I am trying to visualize data present on my server in json format through xmlhttprequest. But all it shows is blank screen as output. I am running the following code on server. Reponse shows status 200 and blank screen
<html>
<head>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"
></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.js"
></script>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.css"
rel="stylesheet"
type="text/css"
/>
<style type="text/css">
#mynetwork {
width: 800px;
height: 800px;
border: 1px solid rgb(134, 29, 29);
}
</style>
</head>
<body>
<div id="testdiv"></div>
<div id="mynetwork"></div>
<script type="text/javascript">
// function loadXMLDoc() {
var xhttp = new XMLHttpRequest();
//var xhttp = new ActiveXObject("MSXML2.XMLHTTP");
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//var data1 = this.responseText;
console.log(xhttp.responseText);
var data1 = JSON.parse(xhttp.responseText);
document.getElementById("testdiv").innerHTML =
"<h1>Data Export Successful</h1>";
}
//};
xhttp.open("GET", "http://127.0.0.1:5000/neo4j/export", true);
xhttp.setRequestHeader("Access-Control-Allow-Origin", "*");
xttp.setRequestHeader(
"Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type,Accept"
);
//loadXMLDoc();
xhttp.send();
};
var data = {};
var options = {};
var container = document.getElementById("mynetwork");
var network = new vis.Network(container, data, options);
</script>
</body>
</html>
I'm trying to implement a websocket-server with Progress OpenEdge. I still didn't get it working.
I've successfully created a socket-server with the example i-sktsv1.p from here.
When I run my html-page, which looks like:
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title>WebSocket Client</title>
<script language="javascript" type="text/javascript">
var wsUri = "ws://localhost:3333/";
var output;
function init() {
output = document.getElementById("output");
testWebSocket();
}
function testWebSocket() {
websocket = new WebSocket(wsUri);
websocket.onopen = function(evt) { onOpen(evt) };
// websocket.onclose = function(evt) { onClose(evt) };
websocket.onmessage = function(evt) { onMessage(evt) };
websocket.onerror = function(evt) { onError(evt) };
}
function onOpen(evt) {
writeToScreen("CONNECTED");
doSend("WebSocket rocks");
}
function onClose(evt) {
writeToScreen("DISCONNECTED");
}
function onMessage(evt) {
writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data+'</span>');
websocket.close();
}
function onError(evt) {
writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
}
function doSend(message) {
writeToScreen("SENT: " + message);
websocket.send(message);
}
function writeToScreen(message) {
var pre = document.createElement("p");
pre.style.wordWrap = "break-word";
pre.innerHTML = message;
output.appendChild(pre);
}
window.addEventListener("load", init, false);
</script>
<body>
<h2>WebSocket Test</h2>
<div id="output"></div>
</body>
</html>
I getting a error that the websocket connection could not be established.
The problem is (I think) that Progress offers a socket, not a websocket. Do you know how to get this working?
I am trying to implement manifest for one page. i don't have any idea how to implement the manifest, using below reference i implemented. but its not working.
http://www.codemag.com/Article/1112051.
My doubt: In local after implementing manifest even if visual studio not in debug mode, after refresh the page it should show the page right? here its not showing.
Please help how to implement manifest in mvc.
Here is the my code:
Home Controller:
public ActionResult Index()
{
Response.Cache.SetCacheability(
System.Web.HttpCacheability.NoCache);
ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";
return View();
}
public ActionResult Manifest()
{
Response.ContentType = "text/cache-manifest";
Response.ContentEncoding = System.Text.Encoding.UTF8;
Response.Cache.SetCacheability(
System.Web.HttpCacheability.NoCache);
return View();
}
Index.cshtml:
<html manifest="#Url.Action("Manifest", "Home")">
<head>
<title></title>
<link href="~/Content/kendo/2014.2.903/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2014.2.903/kendo.default.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2014.2.903/kendo.dataviz.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2014.2.903/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="~/Scripts/kendo/2014.2.903/jquery.min.js"></script>
<script src="~/Scripts/kendo/2014.2.903/kendo.angular.min.js"></script>
<script src="~/Scripts/kendo/2014.2.903/kendo.all.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div id="grid"></div>
<button type="button" id="btnOfflineMode">Offline</button>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "Name" },
{ field: "Age" },
{ field: "NewCol" }
],
dataSource: [
{ Name: "John Doe", Age: 33 }
],
batch: true,
}).on('focus', function (e) {
var offset = $(this).offset();
var textarea = $("<textarea>");
textarea.css({
position: 'absolute',
opacity: 0,
top: offset.top,
left: offset.left,
border: 'none',
width: $(this).width(),
height: $(this).height()
})
.appendTo('body')
.on('paste', function () {
setTimeout(function () {
var value = $.trim(textarea.val());
var grid = $("#grid").data("kendoGrid");
var rows = value.split('\n');
var data = [];
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].split('\t');
grid.dataSource.add({
Name: cells[0],
Age: cells[1],
NewCol: cells[2]
});
}
});
}).on('blur', function () {
});
setTimeout(function () {
textarea.focus();
});
});
$("#grid").attr("tabindex", -1).focus();
</script>
</body>
</html>
Manifest.cshtml:
CACHE MANIFEST
# version 1
CACHE:
/
/Content/kendo/2014.2.903/kendo.common.min.css
/Content/kendo/2014.2.903/kendo.default.min.css
/Content/kendo/2014.2.903/kendo.dataviz.min.css
/Content/kendo/2014.2.903/kendo.dataviz.default.min.css
/Scripts/kendo/2014.2.903/jquery.min.js
/Scripts/kendo/2014.2.903/kendo.all.min.js
/scripts/modernizr-2.6.2.js
FALLBACK:
/events /events.htm
NETWORK:
*
#{
Layout = null;
}
events.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Events</title>
<link rel="Stylesheet" href="/Content/style.css"
type="text/css" />
</head>
<body>
<section>
<h1>Events</h1>
<p>
The event listings are only available when
you are connected to the internet.
</p>
<div id="version">Version 1</div>
</section>
</body>
</html>
Try to create file site.maifest in the root folder of your site. And reference it in your html.
Like this
<html manifest="site.manifest">
Looks that it will be better to create your _Layout.cshtml logic and place common markup there.
I create an example where everything works good. Here it is on GitHub
I want to browse image from client computer as soon as image is uploaded, it will display preview and when client(I) saves details, it will be saved in the database.
as well as that image will be displayed in page
I have fileuploader
<style type="text/css">
#newPreview
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
</style>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css "
rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js "></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js "></script>
<script language="javascript" type="text/javascript">
function PreviewImg(imgFile) {
if (navigator.appName != "Netscape") {
var newPreview = document.getElementById("newPreview");
newPreview.style.display = "";
newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
newPreview.style.width = "250px";
newPreview.style.height = "200px";
}
else {
if (imgFile.files && imgFile.files[0]) {
var reader = new FileReader();
$('[id*=divFirfox]').css("display", "block");
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result)
.width(250)
.height(200);
};
reader.readAsDataURL(imgFile.files[0]);
}
}
}
</script>
now what should i do to retrive image from database?
something like link
I am trying to get nowelium / socket.io-titanium to work i have it working on the device but on website i get the following error in my console
XMLHttpRequest cannot load http://127.0.0.1:8080/socket.io/1/?t=1345807417891. Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true.
I am using socket.io here is the chat.js server
var io = require('socket.io').listen(8080);
var archiveMessages = {};
var channels = ['foo channel', 'bar channel'];
var chat = io.of('/chat');
chat.on('connection', function(socket){
console.log('connected: %s', socket.id);
// push available channel list
socket.emit('available_channel', channels);
socket.on('join', function(value){
console.log('%s joined channel: %s', socket.id, value.channelId);
socket.join(value.channelId);
socket.set('channel_id', value.channelId, function(){
var messages = archiveMessages[value.channelId] || [];
socket.emit('joined', messages);
socket.broadcast.to(value.channelId).emit('user:join', {
id: socket.id
});
});
});
socket.on('post', function(message){
socket.get('channel_id', function(err, channelId){
console.log('%s says<%s channel>: %s', socket.id, channelId, message);
if(!(channelId in archiveMessages)){
archiveMessages[channelId] = [];
}
archiveMessages[channelId].push(message);
socket.emit('posted', {
message: message
});
socket.broadcast.to(channelId).emit('user:message', {
id: socket.id,
message: message
});
});
});
socket.on('disconnect', function(){
console.log('%s disconnected', socket.id);
socket.get('channel_id', function(channelId){
socket.leave(channelId);
socket.broadcast.to(channelId).emit('user:leave', {
id: socket.id
});
});
});
});
var image = io.of('/image');
image.on('connection', function(socket){
socket.on('upload', function(param){
console.log('upload base64 size: %d', param.base64.length);
if(param.download){
socket.emit('download', {
base64: 's' + new Array(65534).join('0') + 'e'
});
}
});
});
and here is the index.html i am running
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>chat sample</title>
<style>
#rooms button {
display: block;
}
</style>
<script type="text/javascript" src="http://localhost:8080/socket.io/dist/socket.io.js"></script>
<script type="text/javascript">
var $ = function(id){
return document.getElementById(id);
};
window.addEventListener('load', function (){
var socket = io.connect('127.0.0.1:8080');
var chat = socket.of('/chat');
console.log(chat);
chat.on('available_channel', function(channels){
channels.forEach(function (channelId){
var button = document.createElement('button');
button.appendChild(document.createTextNode(channelId));
$('rooms').appendChild(button);
button.addEventListener('click', function(){
$('chat').style.display = '';
chat.emit('join', {
channelId: channelId
});
});
});
});
var addMessage = function(message){
var li = document.createElement('li');
li.appendChild(document.createTextNode(message));
$('messages').appendChild(li);
};
chat.on('joined', function(messages){
messages.forEach(function(message){
var li = document.createElement('li');
li.appendChild(document.createTextNode(message));
$('archives').appendChild(li);
});
});
chat.on('posted', function(value){
return addMessage('you posted: ' + value.message);
});
chat.on('user:join', function(value){
return addMessage(value.id + ' joined this channel');
});
chat.on('user:leave', function(value){
return addMessage(value.id + ' leaved this channel');
});
chat.on('user:message', function(value){
return addMessage(value.id + ' says ' + value.message);
});
$('submit').addEventListener('click', function (){
var messageValue = $('message').value;
if(/^\s+$/.test(messageValue)){
return;
}
chat.emit('post', messageValue);
$('message').value = '';
});
});
</script>
</head>
<body>
<div id="rooms">
</div>
<div id="chat" style="display:none">
<input type="text" id="message" value="" placeholder="message here" />
<input type="submit" id="submit" value="send" />
<p>archives</p>
<ul id="archives" style="color: #999"></ul>
<p>messages</p>
<ul id="messages"></ul>
</div>
</body>
</html>
CAn anyone tell me why this might be happening???
I wonder if switching it to localhost would fix that.
I researched into Access-Control-Allow-Origin and traced it to the web browser as the culprit if I remember correctly. I eventually started looking for a way to disable the browser from checking for that. In Chrome this is my shortcut path.
...Chrome\Application\chrome.exe --allow-file-access-from-files --disable-web-security
See if that works. I don't know if it really remedies the issue as much as it just suppresses the problem. If you were calling the web page from the host you were trying to access I don't think you'd have this problem at all. For example, when I attempt to access my web service on mydomain.com using the web page mydomain.com/myprogram.html it doesn't complain about cross domain access.