How to launch a Uikit notification from AngularJS controller - angularjs

I want launch a uikit notification after login in my system or when I fail in the login by password or user incorrect. I think that I can to do it using AngularJS. In my project when I try login, first my data are send to a controller that send this data a django view.
login.html
<div class="input" ng-controller="conIngreso">
{% csrf_token %}
<div class="login-input-group spacer-field">
<span class="login-input-group-addon">
<i class="fa fa-at fa-fw"></i>
</span>
<input type="email" class="form-control" name="email" placeholder="Correo electrónico" ng-model="email">
</div>
<div class="login-input-group">
<span class="login-input-group-addon">
<i class="fa fa-key fa-fw"></i>
</span>
<input type="password" class="form-control" name="password" placeholder="Contraseña" ng-model="password">
</div>
<button class="btn btn-default btn-lg submit" type="submit" ng-click="ingresar(email, password)">Ingresar</button>
</div>
conIngreso.js
var app = angular.module('appLogin');
app.controller('conIngreso', ['$scope', '$http', function($scope, $http){
$scope.user={email:'',password:''}
$scope.ingresar=function(email,password){
$http({method:'POST',
url:'/cliente/ingreso/',
data:$.param({email: email, password: password})
}).then(
function(response2){
//UIkit.notification("...", {pos: 'top-right'});
window.location.href='javascript:history.back()';
},function(response2){
$scope.user = response2.data || 'Request failed';
}
);
}
}])
In the conIngreso.js file above I try to do it before window.location...
But does not work
Thanks

its
UIkit.notify
and you are using
UIkit.notification

Related

Angular object not binding

I have the following issue. I have 2 controllers defined for 2 separate functions.
The 1st controller handle my login and the second 1 handles forgot password.
Login controller binds well but forgot password controller does bind but not the object.
Controllers
var singlePageApp = angular.module('SinglePageApp',[]);
singlePageApp.controller('LoginController', function ($scope, $location, $window) {
$scope.isFormValid = false;
$scope.message = null;
$scope.login = null;
// Login object
$scope.Login = {
Email: '',
Password: '',
};
//check form validation
$scope.$watch('LoginForm.$valid', function (newValue) {
$scope.isFormValid = newValue;
});
$scope.submitForm = function () {
console.log('Form is submitted with:', $scope.login);
...
};
});
singlePageApp.controller('ForgotPasswordController', function ($scope, $location, $window) {
$scope.message = null;
$scope.password = null;
// Password object
$scope.Password = {
Email: '',
};
$scope.$watchGroup(['password', 'Password'], function (newValues, oldValues, scope) {
console.log(newValues);
});
$scope.forgotPassword = function () {
};
});
Login HTML
<div ng-controller="LoginController">
<form class="form-signin mt10" name="LoginForm">
<h2 class="form-signin-heading pwc">Please login</h2>
<div class="login-wrap">
<input ng-model="login.Email" id="tbEmail" name="Email" type="email" class="form-control" placeholder="Email" autofocus required>
<span class="error" ng-show="LoginForm.Email.$touched && LoginForm.Email.$error.required">Email is required</span>
<input ng-model="login.Password" id="tbPassword" name="Password" type="password" class="form-control" placeholder="Password" required>
<span class="error" ng-show="LoginForm.Password.$touched && LoginForm.Password.$error.required">Password is required</span>
<label class="checkbox">
<span class="pull-right">
#* Forgot Password?*#
Forgot Password?
</span>
</label>
<div class="clearfix"></div>
<button id="btnloginAdmin" type="button" ng-click="submitForm()" ng-disabled="LoginForm.$invalid && !!LoginForm.$error.email" class="btn btn-success btn-block">Login</button>
<div class="text-center">
<label style="color: red;" id="lblError" class="hasError-label clearfix">{{message}}</label>
<div class="error error-red"></div>
</div>
</div>
</form>
</div>
HTML Modal
<div ng-controller="ForgotPasswordController">
<div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="modalForgotPassword" class="modal fade">
<div class="modal-dialog">
<div class="modal-content" ng-form="fgForm">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Forgot Password ?</h4>
</div>
<div class="modal-body">
<p>Enter your e-mail address below to reset your password.</p>
<input type="email" name="Email" ng-model="password.Email"
placeholder="Email" autocomplete="off"
class="form-control placeholder-no-fix" required>
<span class="error" ng-show="fgForm.Email.$touched && fgForm.Email.$error.required">Email is required</span>
<div class="text-center">
<label style="color: red;" id="fError" class="hasError-label clearfix">{{message}}</label>
<div class="error error-red"></div>
</div>
</div>
<div class="modal-footer">
<a href="javascript:;" class="btn btn-success" ng-disabled="fgForm.$invalid && !fgForm.$error.email" ng-click="forgotPassword();">
<i class="fa fa-check"></i> | Submit
</a>
<a href="javascript:;" class="btn btn-danger" data-dismiss="modal">
<i class="fa fa-times"></i> | Cancel
</a>
</div>
</div>
</div>
</div>
I have tried changing to bind to a single object 'password' but it states its undefined. Then I changed it to 'Password.Email' but then it stays empty.
The 2 controllers are bind on the same page so not sure if that is the issue.
Thank you in advance.

How to disabled button when form fields is empty or invalid in Ionic 2

I am new in Ionic 2 and I creating a new form then I want to validation on
form fields I apply validation in home.ts
export class HomePage {
user: HomeUser[];
constructor(public fb: FormBuilder,private homeService: HomeService) {}
public loginForm = this.fb.group({
email: ["", Validators.required],
password: ["", Validators.required]
});
doLogin(event) {
var user1 =this.loginForm.value;
//var password = this.loginForm.controls.password.value;
this.homeService.doLogin(user1).subscribe(user =>this.user = user);
//console.log(user);
}
}
and my home.html file is:-
<form [formGroup]="loginForm" (ngSubmit)="doLogin($event)">
<div class="row responsive-md">
<div class="col col-50 col-offset-25">
<div class="list">
<label class="item item-input">
<i class="fa fa-user fa-6" aria-hidden="true"></i>
<input formControlName="email" type="email" placeholder="xyz#gmail.com">
</label>
<label class="item item-input">
<i class="fa fa-lock fa-6" aria-hidden="true"></i>
<input formControlName="password" type="password" placeholder="***********">
</label>
<button class="button button-block button-positive sign_in" type="submit" >
SIGN IN
</button>
<div class="signup"><span class="donaccount">Don't have an account ?</span>
SIGN UP
</div>
</div>
</div>
</div>
</form>
I want to disable button when input type is invalid or empty how can I do in ionic 2 App.
put a "disabled" attribute with the following condition.
<button type="button" [disabled]="!loginForm.valid">Save</button>
I think what you need is to provide required attribute for your input fields inside your form, so until the fields are filled in the form signInForm will be invalid. Similarly you could provide other validation attributes on the inputs as well.
Example:-
<form name="signInForm">
<input type="email" ng-model="email" name="email" required />
<button class="btn btn-success" ng-click="register()"
ng-disabled="signInForm.$invalid">Register</button>
</form>

Angular: how create a login/logout in a ng-include template?

I have a login JWT Auth with Angular and i want my template ng-include (header) hide my "login/subscribe link" and show my "logout" link.
But that's doesn't work... Or i need to refresh my webpage and i don't want.
how create a login/logout in a ng-include template ?
I have: ui.router, aclservice, jwt auth, angular 1.5.8
Thx
MY HEADER (NG-INCLUDE IN INDEX.HTML BEFORE THE VIEW)
<ul class="list-inline">
<li ng-hide="goLog"><i class="glyphicon glyphicon-user"></i> Sign up</li>
<li ng-hide="goLog">Sign in</li>
<li ng-show="goLog">Logout</li>
</ul>
PART OF MY CONTROLLER LOGIN
function login(username, password) {
auth.login(username, password).then(loginComplete);
function loginComplete() {
if (AclService.hasRole(ROLE_ADMIN)) {
$state.go('dashboard');
} else {
$state.go('home');
}
}
}
MY VIEW LOGIN
<form name="form" role="form" ng-submit="vm.login(vm.username, vm.password)">
<div class="form-group">
<input type="text" placeholder="e-mail" class="form-control input-lg" ng-model="vm.username" required autofocus>
</div>
<div class="form-group">
<input type="password" placeholder="Mot de passe" class="form-control input-lg" ng-model="vm.password" required>
</div>
<div class="form-group go-to">
<button type="submit" class="btn btn-lg btn-block" ng-disabled="form.$invalid || dataLoading">Login</button>
</div>
</form>
Try this link:
https://code.tutsplus.com/tutorials/token-based-authentication-with-angularjs-nodejs--cms-22543
Above link clearly explains signing up process using JWT token.
To hide and show login logout use:
<div class="form-group go-to">
<button type="submit" data-ng-show="!isLoggedIn" class="btn btn-lg btn-block" ngdisabled="form.$invalid||dataLoading">Login</button>
<button type="submit" data-ng-show="isLoggedIn" class="btn btn-lg btn-block" ngdisabled="form.$invalid ||dataLoading" ng-click="logOut()">Logout</button>
</div>
manage the 'isLoggedIn' variable in controller based on login status.
On successful login set 'isLoggedIn = true'

How to make Ionic app user login?

I have two text box for username and password, when each user enter data it should send to api. how can i make it work.
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-model="loginData.username">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="loginData.password">
</label>
<p style="text-align:center"ng-hide=myflag>wrong credentials</P>
<label class="item">
<button class="button button-block button-positive" type="submit">Log in</button>
</label>
You should read through the angular documentation for forms.
https://docs.angularjs.org/guide/forms
Here's a quick example of a template + controller.
html
<form action="submitLogin()">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-model="loginData.username">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="loginData.password">
</label>
<p style="text-align:center"ng-hide=myflag>wrong credentials</P>
<label class="item">
<button class="button button-block button-positive" type="submit">Log in</button>
</label>
</form>
controller
var example_app = angular.module("example_app ", []);
example_app.controller("LoginController", ['$scope', '$http', function($scope, $http) {
$scope.loginData = {};
$scope.submitLogin= function(){
var res = $http.post('http://login.com/postLogin', loginData);
res.success(function(data, status, headers, config) {
$scope.message = data;
// go to authorized page
});
res.error(function(data, status, headers, config) {
alert( "failure message: " + JSON.stringify({data: data}));
});
};
}]);
Documentation doesn't show the action= functionality, but shows a ng-click on the submit button instead. Both work fine.
Edit:
Was going to mention, but forgot to, that you should try to use angular services for instead of using $http directly in your controller.
https://docs.angularjs.org/guide/services
https://github.com/johnpapa/angular-styleguide

ng-click not working on submit button

I am learning how to use AngularJS, and I can't get a custom ng-click function to work. What I want to do is fire a $http.post request that contains data from my forms ($scope.email, $scope.username, $scope.password). So far I've tried only passing in email, but nothing happens when I click the submit button (there is no POST request fired, I am checking this with firebug). I tried passing it directly as $scope.email, or as a variable (as shown below).
I have a main page (index.html), that uses ng-view to load html using ngRoute. This the the route code:
.when('/register', {
templateUrl: 'views/register.html',
controller: 'RegisterCtrl'
})
Here is my register.html:
<div class="container">
<div class="col-xs-2 col-sm-3 col-md-4"></div>
<div class="col-xs-8 col-sm-6 col-md-4">
<h1>Sign Up:</h1>
<form>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" ng-model="email">
</div>
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" id="username" ng-model="username">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" ng-model="password">
</div>
<button type="submit" class="btn btn-primary col-xs-5" ng-click="register">Sign up</button>
<div class="col-xs-2"></div>
<button class="btn btn-info col-xs-5">Go to log in</button>
</form>
</div>
</div>
and my controller:
'use strict';
angular.module('angularApp')
.controller('RegisterCtrl', function ($scope, $http) {
$scope.email = '';
$scope.username = '';
$scope.password = '';
$scope.register = function() {
// TODO ADD VALIDATION
var email = $scope.email;
var username = $scope.username;
var password = $scope.password;
// $http request
$http.post('http://localhost/PTC/API/new_user.php', email).
success(function(data) {
console.log(data);
}).
error(function(data) {
console.log(data);
});
};
});
it should have function () brackets to call function like ng-click="register()"
OR for more better way rather than using ng-click on form you could replace it with ng-submit directive
Markup
<form name="myForm" ng-click="register()">
...fields here..
<button type="submit" class="btn btn-primary col-xs-5">Sign up</button>
<div class="col-xs-2"></div>
<button class="btn btn-info col-xs-5">Go to log in</button>
</form>
Additionally you need to give form name to your form, so that you could get better controller over form validation.

Resources