<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body></body>
$(document).ready(function(){
confirmation = sessionStorage.getItem('confirm');
var counter = 0;
var displayInfo = function(){
if(confirmation == null || confirmation == false){
$('footer').remove();
$('body').append($('<footer/>'));
$('footer').append($('<div/>',{'class':'modal fade','id':'myModal','role':'dialog'}));
$('#myModal').append($('<div/>',{'class':'modal-dialog'}));
$('.modal-dialog').append($('<div/>',{'class':'modal-content'}));
$('.modal-content').append($('<div/>',{'class':'modal-header'}));
$('.modal-header').append($('<button/>',{'class':'close','data-dismiss':'modal','aria-label':'Close'}));
$('.close').append($('<span/>',{'aria-hidden':true,text:'X'}));
$('.modal-header').append($('<h2/>',{'class':'modal-title',html:'<label class="label label-lg label-danger">' + "Warning" + '<label/>','style':'font-size:1.7em;font-family: "Gill Sans Extrabold", Helvetica, sans-serif;'}));
$('.modal-content').append($('<div/>',{'class':'modal-body'}));
$('.modal-body').append($('<p/>',{text:'Please leave this page if you are not invited by the author of this project to view content of this project. In other circumstances your IP will be recorded and blocked!' }));
$('.modal-body').append($('<article/>',{text:'This is the Raspbbery Pi project, server and all services runs on Raspberry pi 3, this is a Testing ground for different services and ideas, at this moment this is a personal Home Network Project built on Bootstrap, Jquery and Dynamic IP, that includes access to the multiple files on users PC.'}));
$('.modal-body').append($('<img/>',{'src':"http://www.quickanddirtytips.com/sites/default/files/styles/insert_small/public/images/2706/no_tresspass.jpg?itok=BiAA_ukU",'class':'img-responsive','width':'250px','height':'280px','id':'poster-image'})).append('<br />');
$('.modal-body').append($('<article/>',{html:'<strong>Press Stay button to confirm that you are invited to view the content of this website by the author of this project</strong><br />'}));
$('.modal-body').append($('<a/>',{'href':'#','type':'button','class':'btn btn-primary',text:"Linked In",'data-container':'body','data-toggle':'popover','data-placement':'right','data-content':""})).append('<br><br />');
$('.modal-body').append($('<div/>',{'class':'modal-footer'}));
$('.modal-footer').append($('<div/>',{'class':'btn btn-info btn-md',text:'Stay','id':'confirm','data-info':'stay'}));
$('#confirm').bind({
click: function(){
var confirm = $(this).attr('data-info');
if(confirm == "stay"){
loginForm();
sessionStorage.setItem('confirm','true');
clearInterval();
}else{
sessionStorage.setItem('confirm','false');
}
}
});
}else{
return;
}
$('#myModal').modal("toggle");
};
/*
*Get User Confirmation Status if he is allowed to stay on page
*/
var askQuestion = function(){
var confirmation = sessionStorage.getItem('confirm');
if(confirmation == null || confirmation == false){
displayInfo();
}else{
clearInterval();
return;
}
}//end askQuestion
setInterval(function(){
askQuestion();
},5000);
/*
*Validate email & password functions
*/
var validEmail = function(email){
var filter = /^(([^<>()\[\]\\.,;:\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,100}))$/;
if (filter.test(email)) {
return true;
}
else {
return false;
}
};
var validPassword = function(pass){
var filter = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,16}$/;
if(filter.test(pass)){
return true;
}else{
return false;
}
};
/*
*Registration Form
*/
var registrationForm = function(){
$('#myModal').html("");
$('footer').remove();
$('body').append($('<footer/>'));
$('footer').append($('<div/>',{'class':'modal fade','id':'myModal','role':'dialog'}));
$('#myModal').append($('<div/>',{'class':'modal-dialog'}));
$('.modal-dialog').append($('<div/>',{'class':'modal-content'}));
$('.modal-content').append($('<div/>',{'class':'modal-header'}));
$('.modal-header').append($('<button/>',{'class':'close','data-dismiss':'modal','aria-label':'Close'}));
$('.close').append($('<span/>',{'aria-hidden':true,text:'X'}));
$('.modal-header').append($('<h2/>',{'class':'modal-title',html:'<label class="label label-lg label-info">' + "Registration Form" + '<label/>','style':'font-size:1.7em;font-family: "Gill Sans Extrabold", Helvetica, sans-serif;'}));
$('.modal-content').append($('<div/>',{'class':'modal-body'}));
$('.modal-body').append($('<form/>',{'id':'user-form'}));
$('#user-form').append($('<div/>',{'class':'form-group'}));
var data = [
{
name: "username",
type: "text"
},
{
name: "name",
type: "text"
},
{
name:"surname",
type:"text"
},
{
name:"address",
type:"text"
},
{
name:"email",
type:"email"
},
{
name:"password",
type:"password"
}
];
for(var z in data){
if(data[z].name !== "password"){
$('.form-group').append($('<label/>',{'type':data[z].type,'for':data[z].name,text:data[z].name.toUpperCase()}));
$('.form-group').append($('<input/>',{'type':data[z].type,'class':'form-control','id':data[z].name,'placeholder':data[z].name.toUpperCase(),'name':data[z].name}));
}else{
var count = 0;
while(count < 1){
count++;
$('.form-group').append($('<label/>',{'type':data[z].type,'for':data[z].name,text:data[z].name.toUpperCase()}));
$('.form-group').append($('<input/>',{'type':data[z].type,'class':'form-control','id':data[z].name,'placeholder':data[z].name.toUpperCase(),'name':data[z].name}));
if(count == 1){
$('.form-group').append($('<label/>',{'type':data[z].type,'for':data[z].name,text:'REPEAT '+ data[z].name.toUpperCase()}));
$('.form-group').append($('<input/>',{'type':data[z].type,'class':'form-control','id':'repeat','placeholder':data[z].name.toUpperCase(),'name':'REPEAT' + data[z].name}));
}
}
}
}
$('.modal-content').append($('<div/>',{'class':'modal-footer'}));
$('.modal-footer').append($('<button/>',{'class':'btn btn-md btn-primary pull-right','id':'submitREGISTRATION',text:'Register'}));
$('#submitREGISTRATION').click(function(){
var nick = $('#username').val();
var nameUser = $('#name').val();
var surnameUser = $('#surname').val();
var address = $('#address').val();
var emailUser = $('#email').val();
var passwordUser = $('#password').val();
var repeatPassword = $('#repeat').val();
var login = "login";
if(nick == "" || nameUser == "" || surnameUser == "" || addressUser == "" || emailUser == "" || passwordUser == ""){
alert("Please Fill Missing Information!");
}else if(password !== repeatPassword){
alert("Passwords Don't match!");
}else{
$.post(
"../registration.php",
{
username : nick,
name : nameUser,
surname : surnameUser,
email: emailUser,
password: passwordUser,
login: login
},
function(response,status){
alert("*----Received Data----*\n\nResponse : " + response+"\n\nStatus : " + status);
$('#myModal').modal("toggle");
}
);
}
//$('#myModal').modal("toggle");
});
$('#myModal').modal("toggle");
};//end Registration Form
var loginForm = function(){
$('#myModal').html("");
$('footer').remove();
$('body').append($('<footer/>'));
$('footer').append($('<div/>',{'class':'modal fade','id':'myModal','role':'dialog'}));
$('#myModal').append($('<div/>',{'class':'modal-dialog'}));
$('.modal-dialog').append($('<div/>',{'class':'modal-content'}));
$('.modal-content').append($('<div/>',{'class':'modal-header'}));
$('.modal-header').append($('<button/>',{'class':'close','data-dismiss':'modal','aria-label':'Close'}));
$('.close').append($('<span/>',{'aria-hidden':true,text:'X'}));
$('.modal-header').append($('<h2/>',{'class':'modal-title',html:'<label class="label label-lg label-danger">' + "Warning" + '<label/>','style':'font-size:1.7em;font-family: "Gill Sans Extrabold", Helvetica, sans-serif;'}));
$('.modal-content').append($('<div/>',{'class':'modal-body'}));
$('.modal-body').append($('<form/>',{'id':'user-form'}));
$('#user-form').append($('<div/>',{'class':'form-group'}));
$('.form-group').append($('<label/>',{'type':'text','for':'user',text:'User'}));
$('.form-group').append($('<input/>',{'type':'email','class':'form-control','id':'email','placeholder':'User','name':'email'}));
$('.form-group').append($('<label/>',{'type':'text','for':'password',text:'Password'}));
$('.form-group').append($('<input/>',{'type':'password','class':'form-control','id':'password','placeholder':'Password','name':'password'}));
$('.modal-content').append($('<div/>',{'class':'modal-footer'}));
$('.modal-footer').append($('<button/>',{'class':'btn btn-md btn-primary pull-right','id':'submit',text:'Submit'}));
$('.modal-footer').append($('<button/>',{'class':'btn btn-md btn-primary pull-left','id':'registration',text:'Registration'}));
$('#registration').click(function(){
registrationForm();
});
$('#submit').click(function(){
counter++;
var userEmail = $('#email').val();
var userPass = $('#password').val();
if(counter > 2){
sessionStorage.clear();
location.replace("http://google.com");
}
if(!userEmail || !userPass){
alert('Email and Passwords Fields can not be empty!');
}
switch(true){
case(validEmail(userEmail) == true && validPassword(userPass) == true):
userEmail = userEmail;
userPass = userPass;
$.post(
"../users.php",
{
email: userEmail,
password: userPass,
},
function(response,status){
var res = $.trim(response);
if(userEmail === res){
sessionStorage.setItem('session',res);
sessionStorage.setItem('confirm','true');
clearInterval();
$('#myModal').modal("toggle");
setTimeout(function(){
var page = window.location.pathname;
window.location.replace(page);
}, 300);
}else{
loginForm();
}
}
);//end POST
break;
case(validEmail(userEmail) == false || validPassword(userPass) == false):
var userEmail = '';
var userPass = '';
alert('Check Password or Email Format');
return;
break;
default:
sessionStorage.clear();
location.replace("http://www.w3schools.com");
}
/*
if(userEmail == "" || userPass == ""){
alert("Enter username and password");
}else{
$.post(
"../users.php",
{
email: userEmail,
password: userPass
},
function(response,status){
/*
*User Code goes here => sample of execution code below
*
var email = $.trim(response);
if(userEmail == email){
counter++;
alert('Welcome '+ email);
$('#myModal').modal("toggle");
}else if(counter <= 3){
loginForm();
counter++;
}else{
sessionStorage.clear();
location.replace("http://www.w3schools.com");
}
}
);
}
//$('#myModal').modal("toggle");
/*/
});
$('#myModal').modal("toggle");
};//end login
});
