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'
Related
I'm trying to disable a button using AngularJS
<button
type="submit"
ng-disabled="emailConfig.$invalid"
ng-click="createEmailconfig()"
class="btn-sm btn btn-info waves-effect waves-light newbtn hvr-glow box-shadow-3 gradientbg"
name="submit"
id="submit"
>
<span class="btn-label"><img src="images/icon/submit.png" style="height: 18px;">
</span>Submit
</button>
If the form is invalid or a specific length isn't met, the button should be disabled. However, it's not working as it's supposed to.
Can someone help me out?
all you need to do is add ng-maxlength directive to the input fields and the form will be disabled with your current code, checkout this basic working example!
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
<form action="" name="emailConfig" novalidate>
<input name="input" ng-model="userType" ng-maxlength="5" required>
<button type="submit" ng-disabled="emailConfig.$invalid" ng-click="createEmailconfig()" class="btn-sm btn btn-info waves-effect waves-light newbtn hvr-glow box-shadow-3 gradientbg" name="submit" id="submit">
<span class="btn-label"><img src="images/icon/submit.png" style="height: 18px;">
</span>Submit
</button>
</form>
</div>
some addition to #Naren Murali answer
You have no ng-model and inputs in your example.
You can validate a field using the required attribute and ng-model.
Using ng-model:
<div ng-controller='MyController' ng-app="myApp">
<form action="" name="emailConfig" novalidate>
<label>validation: <input type="text" ng-model="modelName" ng-minlength="4" required></label>
<button ng-model="button" ng-disabled="modelName.$invalid">Button</button>
</form>
</div>
note: Set the novalidate attribute on the form-tag so the default HTML5 validation gets overwritten by Angular in your app.
You can validate a form using the required attribute and the form name.
For your example:
<div ng-controller='MyController' ng-app="myApp">
<form action="" name="emailConfig" novalidate>
<label>validation: <input type="text" ng-model="modelName" ng-minlength="4" required></label>
<button type="submit" ng-disabled="emailConfig.$invalid" ng-
click="createEmailconfig()" class="yourClass" name="submit" id="submit">Submit</button>
</form>
</div>
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>
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
I am checking if the username exists in firebase database and I am able to alert the user with a message if its already taken.
how do I disable submit button ?
<form ng-submit="validateForm()" style="margin-left:100px; margin-top:50px;">
<div class="form-group">
<label>User Name</label>
<input ng-model="user.userName" required type="text" class="form-control border-input" placeholder="userName">
<ul ng-repeat="(key,value) in userObject">
<span ng-if="user.userName == key" class="text-danger">User name already exists!</span>
</ul>
</div>
<button type="submit" class="btn btn btn-info btn-fill btn-wd">Save</button>
</form>
You need to change your code to this.
in your controller
if(user.userName == key)
{
$scope.chkuser= true;
}
else
{
$scope.chkuser= false;
}
and set this variable it to ngDisabled on submit button
<button type="submit" class="btn btn btn-info btn-fill btn-wd" ngDisabled="chkuser">Save</button>
I have two buttons on a simple login form in a dropdown on a header bar that is outside of the view/content part of my single page app. There are two buttons on the form:
EDIT: both buttons need to submit the form, but I have two different outcomes; one does new member sign-up, the other login existing members. I do not want to handle this on multiple partials.
My Website
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
Home
</li>
<li class="divider-vertical"></li>
<li>
<div class="btn-group btn-group-xs navbar-btn btn-pad">
NL
FR
EN
</div>
</li>
<li class="divider-vertical"></li>
<!-- Begin Login Section -->
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Signup/Login <strong class="caret"></strong></a>
<div class="dropdown-menu">
<div class="accountForm">
<!--form action="#" method="post" role="form"-->
<form name="loginForm" ng-submit="login()" ng-controller="homeController">
<div class="form-group">
<label class="control-label" for="username">Username</label>
<input type="text" ng-model="credentials.username" name="username" class="form-control input-sm" placeholder="username" required/>
</div>
<div class="form-group">
<label class="control-label" for="password">Password</label>
<input type="password" ng-model="credentials.password" name="password" class="form-control input-sm" placeholder="password" required/>
</div>
<div class="form-group">
<label class="control-label" for="remember">
<input type="checkbox" class"form-control" name="remember" value="1"/>Remember me</label>
</div>
<div class="form-group btn-group-justified">
<div class="btn-group">
<button button-id="join" type="submit" class="btn btn-default">New? Join us</button>
<input type="hidden" class="btn" />
</div>
<div class="btn-group inline">
<input type="hidden" class="btn" />
<button button-id="login" type="submit" class="btn btn-primary active">Log in</button>
</div>
</div>
</form>
</div>
</div>
</li>
<!-- End Login Section -->
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div id="page" ng-view>
The first button is intended to send the user to the login process (if they are already registered) and the second button is for new users to register.
The problem I have is that if I use the <form ng-submit="myFunction()"> directive, I haven't yet found a way to determine the button that was pressed.
I can alternatively create my own directive, where I can determine the button that was pressed, but this seems to be a lot of coding effort by comparison, and is this really the Angular way?
app.directive('buttonId', function() {
return {
restrict: "A",
link: function(scope, element, attributes) {
element.bind("click", function(){
// when attributes.buttonId = 'join'
//call the create script
// when attributes.buttonId = 'login'
//call the authenticate script
});
}
}
});
So my question is simply using ng-submit="myfunction()"can i determine which button was pressed?
I know I am answering my own question, but this seems to be the "correct" way to do this:
<form name="loginForm" ng-submit="login()" ng-controller="homeController">
<div class="form-group btn-group-justified">
<div class="btn-group">
<button type="submit" class="btn btn-default" button-id="join">New?Joinus</button>
<input type="hidden" class="btn" />
</div>
<div class="btn-group inline">
<input type="hidden" class="btn" />
<button type="submit" class="btn btn-primary active" button-id="login">Log in</button>
</div>
</div>
</form≥
The above is the section of the form that I'm interested in. Note that both buttons have type="submit"and not type="button" . This is important for two reasons:
1) you can use the standard HTML5 form validation options when you click the buttons
2) it forces the ng-submithandler.
First the controller
app.controller('homeController', function($scope){
$scope.buttons = { chosen: "" };
$scope.login = function (){
// can get the button that was clicked as it is now added to the scope
// by the directive
alert($scope.buttons.chosen);
};
});
... and now the directive.
Next I handle the click on either button using a directive. This has the purpose of allowing me to identify the button, and pass it to the $scope. This was actually the main purpose of the excercise, but I realised that I could now bind this to anything where I suspected a click and pass some data to the scope.
app.directive('buttonId', function() {
return {
restrict: "A",
link: function(scope, element, attributes) {
element.bind("click", function(){
// able to get the name of the button and pass it to the $scope
// this is executed on every click
scope.buttons.chosen = attributes.buttonId;
// alert(attributes.buttonId + scope.buttons.chosen);
});
}
}
});
I am not sure if i have understood your problem correct but you can differential based on
Calling different function for each ng-submit such as ng-submit="myFunction1()" and ng-submit="myFunction2()"
You can also do the same passing in context using a parameter ng-submit="myFunction(from)"
You can also pass in special $event object as parameter ng-submit="myFunction($event)". This object contains the target information.
You can get a handle to the $event in your ng-click, and get its target, and then get its id, but I wouldn't recommend that it is not the angular way of doing things:
<input type="submit" id="test" data-ng-click="showAlert($event)">
Click Me
</button>
$scope.showAlert = function(event){
alert(event.target.id);
}
Another way is to set property dirty for this button and then to check which of the buttons is dirty.
For example if you have a form named "myForm" you can write something like this:
<form name="myForm" id="myForm" ng-submit="save()" ng-model="myForm" novalidate>
<input type="submit" name="save" ng-model="btnSave" ng-click="(frmForm.save.$setDirty())" />
<input type="submit" name="saveOut" ng-model="btnSaveOut" ng-click="(frmForm.saveOut.$setDirty())" />
</form>
In Javascript file you can handle it by:
if ($scope.btnSave.$dirty){
alert("First was clicked)}
else{
alert("First was clicked)}
}