angularjs CDN
https://angularjs.org/ Version 1.8.2 https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js
https://icons.getbootstrap.com/
CDN : https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css
https://getbootstrap.com/docs/5.1/getting-started/introduction/
index.html
//index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AngularJS Show Password</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
</head>
<body>
<div id="login">
<div class="container" ng-app="appshowpassword" ng-controller="CTR_showpass">
<br />
<h2 align="center">AngularJS Show Password</h2><br />
<div id="login-row" class="row justify-content-center align-items-center">
<div id="login-column" class="col-md-6">
<div id="login-box" class="col-md-12">
<div class="panel-heading">
<h3 class="panel-title">Login</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label>Enter Email</label>
<input type="text" name="email" class="form-control input-lg" ng-model="email_field" placeholder="Enter Email">
</div>
<div class="form-group">
<label>Enter Password</label>
<div class="input-group">
<input type="{{inputType}}" name="password" class="form-control input-lg" ng-model="password_field" placeholder="Enter Password" />
<span class="{{showHideClass}}" ng-click="showPassword()" style="cursor:pointer"></span>
</div>
</div>
<div class="form-group">
<label for="remember-me" class="text-info"><span>Remember me</span> <span><input id="remember-me" name="remember-me" type="checkbox"></span></label><br>
<input type="submit" name="submit" class="btn btn-info btn-lg" value="submit">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var app = angular.module('appshowpassword', []);
app.controller('CTR_showpass', function($scope){
$scope.inputType = 'password';
$scope.showHideClass = 'input-group-text bi bi-eye-slash-fill';
$scope.showPassword = function(){
if($scope.password_field != null) {
if($scope.inputType == 'password')
{
$scope.inputType = 'text';
$scope.showHideClass = 'input-group-text bi bi-eye-fill';
}
else
{
$scope.inputType = 'password';
$scope.showHideClass = 'input-group-text bi bi-eye-slash-fill';
}
}
};
});
</script>
<style>
body {
margin: 0;
padding: 0;
background-color: #17a2b8;
height: 100vh;
}
#login .container #login-row #login-column #login-box {
border: 1px solid #9C9C9C;
background-color: #EAEAEA;
padding: 20px;
}
#login .container #login-row #login-column #login-box #login-form {
padding: 20px;
}
</style>
</body>
</html>
