When user visits login.html page, localStorage is used to check if a user is logged in. The page should redirect to profile.html and display notofication message.
The message is displayed, but the page (login.html) is the same..
if( localStorage.user_login ) {
mainView.router.loadPage({url:'profile.html', ignoreCache:true, reload:true });
myApp.addNotification( {
message: 'Welcome '+ localStorage.user_username +'!'
} );
}
How can i make the page redirect if the user is logged in?
put this before myApp framework7 initialization.
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
if (page.name === 'index') {
try{
var storedData = window.localStorage['f7form-'+ 'idofyourloginform'];
if(storedData) {
//do your ajax login request here
// if successful do your login redirect
mainView.router.loadPage({url:'profile.html', ignoreCache:true, reload:true });
}
}
);
Inside your Login page, use like this codes:
HTML
Log In
JavaScript
return {
methods: {
signIn: function () {
var $ = this.$;
var app = this.$app;
var username = $('input#demo-username-1').val();
var password = $('input#demo-password-2').val();
app.request.post('http://localhost:4103/api/User/Login?username='+username+'&password='+password, function (data) {
var obj = JSON.parse(data);
console.log(obj);
console.log(obj.success);
if (obj.success) {
app.data.IsLogin=true;
app.data.UserName='salman';
app.views.main.router.navigate(obj.RedirectUrl);
} else {
app.dialog.alert(obj.Message , function () {});
}
});
}
}
}
Try calling
myApp.closeModal('.login-screen.modal-in')
before
mainView.router.loadPage({url:'profile.html', ignoreCache:true, reload:true })
That should solve the problem.
login page ajax post and response in Framework7 with jquery
inside your my-app.js file use like this codes
myApp.onPageInit('sign-in', function(page) {
$('#loginb').click(function() {
$('#loginb').html('Please Wait...');
var fuid = $('#uid').val();
var fpass = $('#pass').val();
$.ajax({
url: 'chklogin.php',
data: {
"uid": fuid,
"pass": fpass
},
type: 'post',
success: function(returnedData) {
$('#loginb').html(returnedData);
if (returnedData == "Success") {
mainView.router.load({
url: 'deshboard.php',
ignoreCache: true
});
} else {
mainView.router.load({
url: 'login.php',
ignoreCache: true
});
}
}
});
});
});
Use this function with route name:
app.views.main.router.navigate('/profile');
But make sure app is which you initialize project such as:
var app = new Framework7({....});
Related
could someone help me with one problem? I want to add a process bar when you waiting for a response from the server (Django 3.x).
Step to reproduce:
On the page 'A' we have the form.
Enter data to form.
Submit POST request by clicking to button on the page 'A'.
Waiting for getting the result on the page 'A'.
Get the result on the page 'A'.
So, I want to add process bar after 4th and before 5th points on the page 'A'. When you will get the result on the page 'A' it should disappear.
Python 3.7
Django 3.x
You can use nprogress, it's a library used for progress bars. Use this inside the interceptor where you can config it for displaying only when request is in progress until finished.
There are lots of ways to do this. I think using jquery would be easier. Basically you just need to prevent submitting the page and do an Ajax request to server. something like
<script type='text/javascript'>
$(document).ready(function () {
$("form").submit(function (e) {
// prevent page loading
e.preventDefault(e);
$('#loadinAnimation').show();
// preapre formdata
$.ajax({
type: "yourRequestType",
url: "yourUrlEndpoint",
data: formdata,
success: function (data) {
$('#loadinAnimation').hide();
// do rest of the work with data
}
});
});
});
</script>
and show appropriate loading animation in your html part
<div id='loadinAnimation' style='display:none'>
<div>loading gif</div>
</div>
You can also do it using UiKit Library in Javascript on your Django Template Page.
Below code is when a file is Uploaded
In your template file (template.html)
<body>
..
<form>
<progress id="js-progressbar" class="uk-progress" value="0" max="100" hidden></progress>
...
<div class="uk-alert-danger uk-margin-top uk-hidden" id="upload_error" uk-alert></div>
...
</form>
</head>
<script type="text/javascript">
$(document).ready(function(){
var bar = document.getElementById('js-progressbar');
UIkit.upload('.js-upload-list', {
url: '',
name : "customer-docs",
params :{
"csrfmiddlewaretoken":"{{csrf_token}}"
},
method : "POST",
concurrent:1,
allow:'*.(csv|xlsx)',
beforeSend: function (environment) {
console.log('beforeSend', arguments);
// The environment object can still be modified here.
// var {data, method, headers, xhr, responseType} = environment;
},
beforeAll: function (args,files) {
console.log('beforeAll', arguments);
},
load: function () {
console.log('load', arguments);
},
error: function (files) {
console.log("---------------")
},
complete: function () {
console.log('complete', arguments);
},
loadStart: function (e) {
console.log('loadStart', arguments);
bar.removeAttribute('hidden');
bar.max = e.total;
bar.value = e.loaded;
},
progress: function (e) {
console.log('progress', arguments);
bar.max = e.total;
bar.value = e.loaded;
},
loadEnd: function (e) {
console.log('loadEnd', arguments);
bar.max = e.total;
bar.value = e.loaded;
},
completeAll: function (data) {
console.log('completeAll', arguments);
console.log('completeAll', data);
let redirect_loc = ""
setTimeout(function () {
bar.setAttribute('hidden', 'hidden');
}, 1000);
// This is the response from your POST method of views.py
data.responseText = JSON.parse(data.responseText)
if(data.responseText.status == 201){
// swal is another library to show sweet alert pop ups
swal({
icon: data.responseText.status_icon,
closeOnClickOutside: true,
text: data.responseText.message,
buttons: {
Done: true
},
}).then((value) => {
switch (value) {
case "Done":
window.location.href = ""
break;
}
});
}
else if(data.responseText.status == 500){
swal({
icon: data.responseText.status_icon,
closeOnClickOutside: true,
text: data.responseText.message,
buttons: {
Ok: true
},
}).then((value) => {
switch (value) {
case "Ok":
window.location.href = ""
break;
}
});
}
}
});
// This block of code is to restrict user to upload only specific FILE formats (below example is for CSV & XLSX files)
(function() {
var _old_alert = window.alert;
window.alert = function(e) {
console.log(e)
if(e.includes("csv|xlsx") || e.includes("Invalid file type")) {
$("#upload_error").html("Invalid file format. Valid formats are CSV, XLSX").removeClass('uk-hidden')
}else if(e.includes("Internal Server Error")) {
$("#upload_error").html("Internal Server Error Kindly upload Documents again").removeClass('uk-hidden')
}
else {
_old_alert.apply(window,arguments);
$("#upload_error").addClass('uk-hidden').html("")
}
};
})();
});
</script>
On your views.py you can do your computation and once done, you can return a response like below
resp_json = {
"status" : 201,
"status_icon" : "success",
"url" : "/",
"message": message
}
return HttpResponse(json.dumps(resp_json))
For more info on SWAL (Sweet Alerts), visit https://sweetalert.js.org/guides/
I am not sure what exact keywords to search for this. So I decided to ask here for help.
I think this is more a JavaScript related question rather than angular. Anyways here is my problem.
I am in a DRY situation (don't repeat yourself). I am trying to merge the two of my $http.put and $http.delete methods' success and error function under single one, because they share the same functionalities.
Here is my current code
// Delete permanenty button action
$scope.delete_donor = function(form) {
$http.delete(url)
.success(function() {
// #TODO DRY? DELETE UPDATE delete_donor update_donor
response.ipv4 = INT_TO_STR_IP(response.ipv4)
// Show deleted data to user after operation
$scope.donor.saved_data = response.saved_data
$location.path("/")
})
.error(function(response) {
$scope.donor.validation_errors = SERVER_VALIDATION_ERROR(response)
})
}
// Save changes button action
$scope.update_donor = function(form) {
var body = $scope.donor.data
delete body.ipv4
$http.put(url, body)
.success(function(response) {
// #TODO DRY? DELETE UPDATE delete_donor update_donor
response.ipv4 = INT_TO_STR_IP(response.ipv4)
// Show new updated data to user after operation
$scope.donor.saved_data = response.saved_data
$location.path("/")
})
.error(function(response) {
$scope.donor.validation_errors = SERVER_VALIDATION_ERROR(response)
})
As you can see $http.delete().success().error() and $http.put().success().error() methods are same.
I am trying to do something like
WHATSTHIS unify(response) {
WOOT .success(function(response) { // SAME CODE BODY })
WOOT .error(function(response) { // SAME CODE BODY })
}
// Delete permanenty button action
$scope.delete_donor = function(form) {
$http.delete(url)
.unify(response)
}
// Save changes button action
$scope.update_donor = function(form) {
var body = $scope.donor.data
delete body.ipv4
$http.put(url, body)
.unify(response)
I just know one way to achieve something similiar which is:
var unifySuccess = function(response) {
// DO
}
var unifySuccess = function(response) {
// DO
}
// Delete permanenty button action
$scope.delete_donor = function(form) {
$http.delete(url)
.sucesss(unifySuccess)
.error(unifyError)
But maybe there is an other clever way to do this?
Thanks for your help.
what you could do is create your own http request service that will do these functionalities and return the promise as a response
something like this
angular.module('myApp')
.service('proxyHttp', function($http) {
return function(options) {
return $http(options)
.then(
function() {
// success callback
},
function() {
// error callback
});
}
})
Update: For example
angular.module('myApp', [])
.service('proxyHttp', function($http, $q) {
return function(options) {
console.log('Run proxy http');
return $http(options)
.then(
function(response, status) {
console.log('always do this on success');
// success callback
return response;
// here we return the response or what ever you want,
// and we can continue handling it
})
.catch(function() {
console.log('we failed!');
// error callback
return $q.reject();
})
}
})
.controller('testController', function($scope, proxyHttp) {
$scope.testError = function() {
console.log('Run test error method');
proxyHttp({
url: 'http://www.google.com',
method: 'GET'
})
.then(
function() {})
.catch(function() {
console.log('we continue handling our error here...');
});
}
$scope.testSuccess = function() {
console.log('Run test success method');
proxyHttp({
url: 'http://httpbin.org/ip',
method: 'GET'
})
.then(
function(response) {
console.log('continue chaining after success for the original promise');
console.log('Response data: '
response.data.origin);
console.log('read more about pomise and chaining here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise');
})
.catch(function() {
console.log('error');
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="testController">
<button ng-click="testError()">Click Me for error!</button>
<br/>
<br/>
<button ng-click="testSuccess()">Click Me for success!</button>
</div>
</div>
Depending on your actual use case, this may end up sacrificing too much readability to be helpful, but since you asked specifically for cleverness:
function attachHttpResponseHandling(httpPromise) {
httpPromise
.success(function(response) {
response.ipv4 = INT_TO_STR_IP(response.ipv4);
// Show new updated data to user after operation
$scope.donor.saved_data = response.saved_data;
$location.path("/");
})
.error(function(response) {
$scope.donor.validation_errors = SERVER_VALIDATION_ERROR(response);
})
;
}
// Delete permanenty button action
$scope.delete_donor = function(form) {
attachHttpResponseHandling($http.delete(url));
};
// Save changes button action
$scope.update_donor = function(form) {
var body = $scope.donor.data;
delete body.ipv4;
attachHttpResponseHandling($http.put(url, body));
};
I need to run function that takes an input from user and routes to that value. For example inserted value is
https://www.youtube.com/watch?v=_ZiN_NqT-Us
And it should route to the url:
download?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D_ZiN_NqT-Us
I get the value and Set.session to get Session back in Router, the following way but it doesn't get any value.
Template.inputBar.events({
'click #download':function(event, template) {
var url = template.find('.url').value;
if (url.value != "") {
Session.set('url', url);
}
else {
alert('paste link');
}
}
});
Routes to inserted value and executes call to server:
Router.map(function(){
this.route('frontPage', {path: '/'} );
this.route('downloadLinks', {
path: '/download?link=:url',
data: function() {
var url = Session.get('url');
Meteor.call('command', url, function(error, result) {
if(result.stdout) {
console.log(result.stdout)
}
else {
alert("Not supported site");
}
});
}
});
});
Docs for Router.go
Template.inputBar.events({
'click #download':function(event, template) {
var url = template.find('.url').value;
if (url.value != "") {
Router.go(url.value);
} else {
alert('paste link');
}
}
});
This will redirect to the route you want.
I hope someone can help me with this.
I have a Backbone based SPA for a responsive website with a .net WebAPI providing all of the data.
I've recently found a weird problem. I've added a search box, which searches one of the catalogues on the system. This works fine on desktop browsers and on Android. On iOS, executing a search seems to take you back to the sign in page.
You can execute a search in various ways, you can either hit enter or you can click the search icon. Both of these then trigger a method that navigates the router to the URL for the search result.
My first thought was that it was some button weirdness, but I don't think that's the problem as both methods of search execution are causing the same problem.
The search results are displayed in a view that is secured (It requires a username to be present - this is stored in a hidden field on the page). There are two search boxes on the site - one on the home page and one on the search results page itself (it shows a default set when you load it first time - which it does load first time fine). Both search boxes are exhibiting the same behaviour.
My site is set up in such a way that when Backbone pulls back a model, if it gets a 401 back from the API then it will send you back to the login page, so I can only think it's happening here.
Here's my view code...
function (SiansPlan, ErrorManager, RecipeSearchResult, Header, Components, TemplateSource) {
var recipeSearchView = SiansPlan.SecureView.extend({
name: 'Recipe Search',
sectionName: 'Recipes',
queryText: '',
template: Handlebars.compile(TemplateSource),
headerView: new Header({ text: 'Recipes', swatch: 'e' }),
searchBoxRegion: undefined,
$searchWrapper: undefined,
$queryHeaderMobile: undefined,
$queryHeaderDesktop: undefined,
$searchButton: undefined,
$searchInput: undefined,
$recipeSearch : undefined,
events: {
'click .link-container': 'showRecipe',
'click #searchWrapper': 'showSearch',
'click #searchButton': 'showOrPerformSearch',
'keydown #searchButton': 'performSearchOnEnter',
'keydown #recipeSearch': 'performSearchOnEnter'
},
initialize: function (options) {
this.options = options || {};
SiansPlan.SecureView.prototype.initialize.call(this, options);
this.queryText = Object.exists(this.options.query) ? this.options.query : '';
},
bindData: function () {
this.$el.html(this.template({ results: this.collection.toJSON() }));
},
render: function () {
var that = this;
if (this.isSecured()) {
this.trigger('rendering');
var params = {
success: function () {
that.bindData();
that.trigger('rendered');
},
error: function (model, xhr) {
if (Object.exists(xhr) && xhr.status == 401) {
that.applyTimedOutSecureLoginPrompt();
} else {
that.$el.html('Unable to fetch search results');
ErrorManager.handleXhr('Search failed', xhr);
}
that.trigger('rendered');
}
};
if (!Object.exists(this.collection)) {
this.collection = new RecipeSearchResult.Collection({ username: SiansPlanApp.session.username(), query: this.queryText });
}
this.collection.fetch(params);
} else {
this.applySecureLoginPrompt();
}
return this;
},
postRender: function () {
var that = this;
var queryHeader = "All recipes";
if (Object.hasValue(this.queryText)) {
queryHeader = this.collection.length + " results for '" + this.queryText + "'";
}
this.$searchWrapper = $('#searchWrapper');
this.$queryHeaderMobile = $('#queryHeaderMobile');
this.$queryHeaderDesktop = $('#queryHeaderDesktop');
this.$searchButton = $('#searchWrapper');
this.$searchInput = $('#searchInput');
this.$recipeSearch = $('#recipeSearch');
this.$queryHeaderMobile.html(queryHeader);
this.$queryHeaderDesktop.html(queryHeader);
this.$recipeSearch.val(this.queryText);
SiansPlanApp.session.waitForLoad(30, function () {
that.searchBoxRegion = new SiansPlan.Region({ el: '.recipe-search-box-container' });
that.searchBoxRegion.renderView(new Components.RecipeSearchBox({ username: SiansPlanApp.session.username(), query: that.queryText, title: 'Search' }));
});
},
performSearchOnEnter: function (e) {
if (e.keyCode == 13) {
this.showOrPerformSearch(e);
}
},
showOrPerformSearch: function (e) {
if (!this.$searchInput.is(':visible')) {
this.showSearch(e);
} else {
e.preventDefault();
var url = '/recipes/search/' + this.$recipeSearch.val();
window.SiansPlanApp.router.navigate(url, true);
}
return false;
},
showRecipe: function (e) {
e.preventDefault();
var url = $(e.target).find('a').first().attr('href');
window.SiansPlanApp.router.navigate(url, true);
},
showSearch: function (e) {
e.preventDefault();
if (!this.$searchInput.is(':visible')) {
this.$queryHeaderMobile.hide();
this.$searchInput.show();
this.$recipeSearch.focus();
this.$recipeSearch.select();
}
return false;
}
});
return recipeSearchView;
});
UPDATES
I've set up some alerts as follows in the script to see what's going on and I've discovered the following...
render: function () {
var that = this;
if (this.isSecured()) {
this.trigger('rendering');
var params = {
success: function () {
alert('Bind has succeeded!');
that.bindData();
that.trigger('rendered');
},
error: function (model, xhr) {
alert('Bind has failed!');
if (Object.exists(xhr) && xhr.status == 401) {
that.applyTimedOutSecureLoginPrompt();
} else {
that.$el.html('Unable to fetch search results');
ErrorManager.handleXhr('Search failed', xhr);
}
that.trigger('rendered');
alert(xhr.status + ' ' + xhr.responseText);
}
};
if (!Object.exists(this.collection)) {
alert('Binding new collection: ' + SiansPlanApp.session.username() + ' - ' + this.queryText);
this.collection = new RecipeSearchResult.Collection({ username: SiansPlanApp.session.username(), query: this.queryText });
}
alert('About to fetch using ' + this.collection.url());
this.collection.fetch(params);
} else {
alert('I dont appear to be secured??');
this.applySecureLoginPrompt();
}
return this;
},
When I first load the page (to show all the results) it loads fine and 'Bind Succeeded!' appears. The API call made is /api/recipes/search/{username}/
When I submit search criteria it fails ('Bind failed!') with the API call of /api/recipes/search/{username}/{query} and returns a 401.
This has me even more befuddled than before as this now looks like an API issue, but other devices are working fine and if I submit the same queries into Fiddler everything is, as expected, fine.
I've found the answer in the smallest place...
The issue was that the search criteria had an upper case letter. So, for example, when searching with 'Fish', The API generated a 301 which redirected to /api/recipes/search/{username}/fish. iOS didn't like that and reported it as a 401 (Which truly sucks!)
I'd like to use Linkedin share functionality with my custom button, but the callback function won't be called on success, any idea?
This is my code:
var sh = IN.UI.Share().params(
{
url: "someUrl"
});
sh.success(function(){console.log('Linkedin share success')});
sh.place();
Created a mini-pen which you can view here https://codepen.io/craigiswayne/pen/Bqqbjz
Documentation on this subject can be found here: https://developer.linkedin.com/docs/share-on-linkedin
IN.Event.on(IN, 'systemReady', function() {
var shareLink = document.getElementById('shareLink');
shareLink.onclick = function(){
event.preventDefault();
var params = {
"comment": "Check out developer.linkedin.com! https://www.example.com",
"visibility": {
"code": "anyone"
}
};
IN.API.Raw("/people/~/shares?format=json")
.method("POST")
.body(JSON.stringify(params))
.result(function(xhrResult){
alert('success :)');
})
.error(function(errorObj){
alert('Error');
alert(errorObj.errorMessage);
});
};
});