article

Tuesday, February 8, 2022

AngularJS Show Password

AngularJS Show Password

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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
//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>

Posted by ednalan at 12:44 AM . Under .

Related Post