App Screen 1 (UI + Backend integration)

Blog post 4.1 | Hasura Internship

SIGNUP PAGE

$(document).ready(function(){
var dataUrl = ‘http://data.c100.hasura.me/v1/query';
var authUrl = ‘http://auth.c100.hasura.me/';
//var fileUrl = ‘https://filestore.straggle14.hasura-app.io/v1/file';
$(‘#signup_button’).click(function() {
var uname = $(‘#userName’).val();
var pass = $(‘#passWord’).val();
console.log(uname+” and “+pass);
$.ajax({
url: authUrl + ‘signup’,
method: ‘post’,
headers: {
‘Content-Type’: ‘application/json’
},
data: JSON.stringify({
“username”: $(‘#userName’).val(),
“password”: $(‘#passWord’).val(),
“email”: $(“#email”).val()
})
}).done(function(data) {
console.log(‘insering into profile’);
//user Register
$.ajax({
url: dataUrl,
method: ‘post’,
headers: {
‘Authorization’: ‘Bearer ‘ + data.auth_token,
‘Content-Type’: ‘application/json’
},
data: JSON.stringify({
“type”: “insert”,
“args”: {
“table”: “profile”,
“objects”: [{“user_id”: data.hasura_id,
“fullname”: $(‘#fullname’).val(),
“collegename”: $(‘#collegename’).val()}]
}
})
}).done(function(reg_status){
console.log(‘insert profile succes’);
$(‘#flash’).hide().html(‘<br><li><span class=”text-success”>Registration Success..Please Login</span></li>’).fadeIn(“slow”);
window.location =’/login’;
}).fail(function(reg_status){
console.log(‘insert profile failed’);
$(‘#flash’).hide().html(‘<br><li><span class=”text-danger”> Something Went Wrong! </span></li>’).fadeIn(“slow”);
})//query for enter in profile table;
}).fail(function(data) {
console.log(‘signup failed’);
var k = JSON.parse(data.responseText).message;
$(‘#flash’).hide().html(‘<br><li><span class=”text-danger”> ‘+ k +’ </span></li>’).fadeIn(“slow”);
//console.log(data.responseJSON.message);
});
});
});

If the Sign up process is success, then the profile table is updated by Full name and College name.

LOGIN PAGE

I have set up cookie to store user id and Authentication token. When a user clicks the login button the browser store the returned user id and token in cookie.

document.addEventListener(“DOMContentLoaded”, function(event) { 
if(document.cookie)
window.location = ‘/home’;
else
window.location =’/login’;
});

if there exists a cookie, then redirects to home page otherwise redirects to login page.

Screen 1

here the first screen show the updates from all the users who have signed up from different colleges. Latest updates are shown in top. The page refreshes after 15 secs.

function displaydata() {
// window.location = ‘/homepage.html’;
token = getCookie(“cookie_name”);
//alert(token);
$.ajax({
url: dataUrl,
method: ‘post’,
headers: {
‘Authorization’: ‘Bearer ‘ + token,
‘Content-Type’: ‘application/json’
},
data: JSON.stringify({
“type”: “select”,
“args”: {
“table”: “final_info”,
“columns”: [“id”, “description”, “file_id”, “user_id”, “fullname”, “collegename”]
}
})
}).done(function(data) {
var append_data = “”;
for (var i = data.length — 1; i >= 0; i — ) {
var append_data = append_data.concat(‘<article class=”timeline-entry”><div class=”timeline-entry-inner”><div class=”timeline-icon bg-success”><i class=”entypo-feather”></i></div><div class=”timeline-label”><h2><a href=”#”> ‘+data[i].fullname+’ </a><span>posted a new update from</span><strong> ‘+data[i].collegename+’ </strong></h2><h3>’+data[i].description+’</h3><div id=”image_div”></div></div></div></article>’);
//console.log(append_data);
}
$(“.timeline-centered”).html(append_data);
}).fail(function(k) {
console.log(k);
});
}
displaydata();
setInterval(function() {
displaydata()
}, 15000);