Hello friends, Today we will learn “Show/Hide (toggle) password using AngularJS”. I hope here all visitors are aware about AngularJs. An angularJS is a JavaScript Framework. There are many versions are available for AngularJS Framework, if you want to get brief knowledge about AngularJs, visit the AngularJS professional site. It is important to know what AngularJs and how to work it, because here we make the solution using AngularJS. A password field is necessary in most of web application when you create account or login with existing account on particular web application. A credential (username or email and password) is most important for access web application and it is very sensitive data for users. If user knows another user’s credential may be this user access their account and use sensitive data like a (Personal, Finance, etc Details). Actually the unknown user focus on other user credential while his/her try to login or signup, for prevent this thing use input type is “password” because password field hide the password character like asterisk sign (****). But some time user can’t see or confused what password I have entered, so if user wants to see what password actual I have entered then user can see entered password by toggle functionality that we will create here.
Let’s start, first one we create new empty project using visual studio editor, it is not compulsory to use only visual studio, you can create new project in another editor which is better for you like visual studio code or any another. So create empty project, after created empty project we must create required folders that’s are ( bower_components, controller, scripts, views). First create bower_components folder and we will install the entire required bower component in this folder, first component is angular, second is angular-bootstrap, it is very useful for us because we use “$uibmodal” in this tutorial, third component is bootstrap, fourth component is jquery-ui, and last fifth one is jquery component. All components are useful for different task.
All bower components are installed then create modular file in scripts folder, if you don’t know how to create modular, controller and service in angularjs then you can visit this link “how to create modular, controller and service” and by this link post you can easily understand and create modular, controller and service file but in this tutorial we do not create service file, it’s not important for this tutorial. In above mention link post you can know what the use of modular, controller and service. After created modular file we have to inject “ui.bootstrap” in the modular file.
app.js
var app = angular.module('ShowHidePasswordModule', ['ui.bootstrap']);
Well modular file is created then create controllers file (indexController, loginController) in controller folder, indexController is used for index page and loginController is used for login page and login page call from index controller, actually we will open login bootstrap model page using “uibModal” from index controller while user click on Login button, we will create HTML pages in views folder then you will get more.
Create (index and login) HTML pages in views folder and in index page we add one login button and in login page we add login form. Index page is main page so we must inject the required files link and second inject the modular name in tag and inject controller name in tag.
Index.html
<!DOCTYPE html>
<html data-ng-app="ShowHidePasswordModule">
<head>
<title>Show/Hide Password</title>
<!-- Bootstrap -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<meta charset="utf-8" />
</head>
<body data-ng-controller="indexController">
<center><button type="button" class="btn btn-primary" style="margin:50px" ng-click="openLoginModel()">Login</button></center>
<!-- jQuery and Bootstrap -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/jqueri-ui/jquery-ui.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../scripts/app.js"></script>
<script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="../controller/indexController.js"></script>
<script src="../controller/loginController.js"></script>
</body>
</html>
In above code we have injected modular name and controller name and all the required files links. At the bottom of page we have injected modular and controller file and for the “uibModal” we must have inject “ui-bootstrap-tpls” file link from bower_components folder. In this page we added one “Login” button and call function “openLoginModal ()” while user click on login button then open login model page as Modal.
indexController.js
app.controller('indexController', ['$scope', '$uibModal', function ($scope, $uibModal) {
$scope.openLoginModel = function () {
openLoginModel();
}
function openLoginModel() {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: 'login.html',
controller: 'loginController',
size: 'xs',
resolve: {}
});
modalInstance.result.then(function () {
}, function () {
});
};
}]);
You can see above we have created index controller and inject ($scope, $uibModal). A $scope is global variable of angularjs, $uibModal is use for open modal as a Page and you can apply controller for modal page. So above we created openLoginModal() function and in this function we open login Modal with loginController. Now will see how to look Login Modal Page and what the code in loginController.
Login.html
<!DOCTYPE html>
<html>
<head>
<title>Show/Hide Password</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.modal-xs {
width: 400px;
}
@media (min-width: 768px) {
.omb_row-sm-offset-3 div:first-child[class*="col-"] {
margin-left: 25%;
}
}
.omb_login .omb_authTitle {
text-align: center;
line-height: 150%;
}
.omb_login .omb_socialButtons a {
color: white;
// In yourUse @body-bg opacity:0.9;
}
.omb_login .omb_socialButtons a:hover {
color: white;
opacity: 1;
}
.omb_login .omb_socialButtons .omb_btn-facebook {
background: #3b5998;
}
.omb_login .omb_socialButtons .omb_btn-twitter {
background: #00aced;
}
.omb_login .omb_socialButtons .omb_btn-google {
background: #c32f10;
}
.omb_login .omb_loginOr {
position: relative;
font-size: 1.5em;
color: #aaa;
margin-top: 1em;
margin-bottom: 1em;
//padding-top: 0.5em;
//padding-bottom: 0.5em;
}
.omb_login .omb_loginOr .omb_hrOr {
background-color: #cdcdcd;
height: 1px;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.omb_login .omb_loginOr .omb_spanOr {
display: block;
position: absolute;
left: 50%;
top: -0.6em;
margin-left: -1.5em;
background-color: white;
width: 3em;
text-align: center;
}
.omb_login .omb_loginForm .input-group.i {
width: 2em;
}
.omb_login .omb_loginForm .help-block {
color: red;
}
.form-group {
padding: 0px 0px !important;
}
@media (min-width: 768px) {
.omb_login .omb_forgotPwd {
text-align: right;
margin-top: 10px;
}
}
</style>
<meta charset="utf-8" />
</head>
<body ng-controller="loginController">
<div class="omb_login" style="margin-right:-100px;margin-left:-100px;">
<center><h3 class="omb_authTitle">Login</h3></center>
<div class="row omb_row-sm-offset-3">
<div class="col-xs-6 col-sm-6">
<form class="omb_loginForm" role="form" name="loginForm">
<div class="form-group">
<input type="text" class="form-control" placeholder="Username or Email">
</div>
<div class="form-group">
<div style="position:relative">
<input type="password" id="loginpassword" class="form-control" placeholder="Password" required name="password" ng-model="loginData.password">
<i id="showandhide" style="cursor: pointer; position: absolute; margin:auto; top: 10px; right: 12px;" class="fa fa-eye" title="Show/Hide Pasword" ng-click="showPassword('loginpassword','showandhide')"></i>
</div>
</div>
<button type="submit" class="btn buttonColorSet block full-width m-b">Login</button>
</form>
</div>
</div>
</div>
</body>
</html>
In above HTML page created one login form and bottom of password field we have added eye icon for show password and hide password. The eye icon will set in password control while it is on browser, we called the “showPassword” function while click on eye icon. We passed two parameters in function these are password field name and second parameter is icon name because we will use this parameters for show and hide password. We will create function in “loginController “.
loginController.js
app.controller('loginController', ['$scope', function ($scope) {
$scope.showPassword = function (passwordField, showhideICon) {
var pwd = angular.element(document.querySelector('#' + passwordField));
var showorhideIcon = angular.element(document.querySelector('#' + showhideICon));
if (pwd.attr('type') === 'password') {
showorhideIcon.removeClass('fa fa-eye');
showorhideIcon.addClass('fa fa-eye-slash');
pwd.attr('type', 'text');
} else {
showorhideIcon.removeClass('fa fa-eye-slash');
showorhideIcon.addClass('fa fa-eye');
pwd.attr('type', 'password');
}
}
}]);
Here inject the “$scope” global variable, by default password is hide, when user click on eye icon then above function will call with two parameters one is password field name and second is icon field name, by parameters we get the actual element using “angular.element” and then check if password field type is password then convert it in “text” type and second remove ‘fa fa-eye’ class and add ‘fa fa-eye-slash’ class either remove the ‘fa fa-eye-slash’ class and add ‘fa fa-eye’ class and set type attribute is ‘password’ for the password field.
This functionality you can use instead of confirm password, because confirm password confirmed to you that entered password is correct that you have entered but this is not important if you use show/hide password because user can see what he/she entered the actual password by click on icon and it is very easy to use and user will can’t make spelling mistakes while enter password, you can download this tutorial click on below button.
Hello, my name is Gautam Nagraj. I am one year old blogger.We create and find innovative solution.
Amazing Tutorial.
ReplyDelete