Как показать пользовательское сообщение, основанное на надежности пароля

0

Привет У меня есть следующий фрагмент кода, который в основном проверяет силу пароля и показывает div с цветами, основанными на силе. Как измеритель силы. Как я могу мутировать содержимое div на основе силы пароля, например, если пароль слабый, цвет меняется на красный, а контент говорит "Слабый passwrd !!", если пароль умеренный, тогда контент должен быть "Умеренный пароль "и т.д. Также я хотел бы добавить флажок в div, поэтому, если условие выполнено, цвет флажка shud изменится на зеленый, если не красным. и т.п.

Мои коды:

HTML

<!doctype html>
<html lang="en" ng-app="myApp">


    <head>
        <meta charset="utf-8" />
        <title>My AngularJS App</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>

    <body ng-controller="stageController">
        <form name="myForm" novalidate>
          <label for="pw">Type a password</label><br/>
            <input type="password" ng-model="pw" name="pw" id="pw" />
            <li id="strength" check-strength="pw"></li>
        </form>        
    </body>

CSS:

input.ng-pristine + ul#strength {
    display:none;
}
ul#strength {
    display:inline;
    list-style:none;
    margin:0;
    margin-left:15px;
    padding:0;
    vertical-align:2px;
}
.point:last {
    margin:0 !important;
}
.point {
    background:#DDD;
    border-radius:2px;
    display:inline-block;
    height:5px;
    margin-right:1px;
    width:20px;
}
#footer {
    position:fixed;
    bottom:5px;
}

AngularJS:

'use strict';

angular.module('myApp', ['myApp.directives']);

/* Controllers */
function stageController($scope) {
    $scope.pw = '';
}

/* Directives */
angular.module('myApp.directives', []).

directive('checkStrength', function () {

    return {
        replace: false,
        restrict: 'EACM',
        link: function (scope, iElement, iAttrs) {

            var strength = {
                colors: ['#F00', '#F90', '#FF0', '#9F0', '#0F0'],
                mesureStrength: function (p) {

                    var _force = 0;                    
                    var _regex = /[$-/:-?{-~!"^_'\[\]]/g;

                    var _lowerLetters = /[a-z]+/.test(p);                    
                    var _upperLetters = /[A-Z]+/.test(p);
                    var _numbers = /[0-9]+/.test(p);
                    var _symbols = _regex.test(p);

                    var _flags = [_lowerLetters, _upperLetters, _numbers, _symbols];                    
                    var _passedMatches = $.grep(_flags, function (el) { return el === true; }).length;                                          

                    _force += 2 * p.length + ((p.length >= 10) ? 1 : 0);
                    _force += _passedMatches * 10;

                    // penality (short password)
                    _force = (p.length <= 6) ? Math.min(_force, 10) : _force;                                      

                    // penality (poor variety of characters)
                    _force = (_passedMatches == 1) ? Math.min(_force, 10) : _force;
                    _force = (_passedMatches == 2) ? Math.min(_force, 20) : _force;
                    _force = (_passedMatches == 3) ? Math.min(_force, 40) : _force;

                    return _force;

                },
                getColor: function (s) {

                    var idx = 0;
                    if (s <= 10) { idx = 0; }
                    else if (s <= 20) { idx = 1; }
                    else if (s <= 30) { idx = 2; }
                    else if (s <= 40) { idx = 3; }
                    else { idx = 4; }

                    return { idx: idx + 1, col: this.colors[idx] };

                }
            };

            scope.$watch(iAttrs.checkStrength, function () {
                if (scope.pw === '') {
                    iElement.css({ "display": "none"  });
                } else {
                    var c = strength.getColor(strength.mesureStrength(scope.pw));
                    iElement.css({ "display": "inline" });
                    iElement.children('div')
                        .css({ "background": "#DDD" })
                        .slice(0, c.idx)
                        .css({ "background": c.col });
                }
            });

        },
        template: '<div class="alert alert-success"><strong>Success!</strong> Indicates a successful or positive action.</div>'
    };

});

1 ответ

0

Я нашел код, связанный с вашим сообщением, это может вам очень помочь

http://codepen.io/yukulele/pen/xbRpRa

var app = angular.module('app',[]);

app.controller('ctrl', function($scope){
  $scope.pass="abc123456";
  $scope.v=function(){
    return test($scope.pass);
  };
});

function test(pass){
  if(pass == null)
    return -1;
  var s = 0;
  if(pass.length<6)
    return 0;
  if( /[0-9]/.test( pass ) )
    s++;
  if( /[a-z]/.test( pass ) )
    s++;
  if( /[A-Z]/.test( pass ) )
    s++;
  if( /[^A-Z-0-9]/i.test( pass ) )
    s++;
  return s;
}
html{
  font-size: 24px;
  text-align: center;
  margin: 30px;
  background-color: #777;
}

label{
  display: block;
  margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <label>
    password:
    <input
           autofocus
           type="text"
           ng-model="pass"/>
  </label>
  <label>
    {{v()}}
    <span ng-if="v() < 2">Weak passwrd!!</span>
    <span ng-if="v() > 3">Strong password</span>
  </label>
    
</div>
  • 0
    Спасибо Абхи! Но это не то, что я ищу, но есть некоторые идеи, которым я могу следовать
  • 0
    Звучит хорошо! Да, я знаю, что сейчас это правильный ответ, но вы можете взять некоторую идею из этого, ведь вы разработчик

Ещё вопросы

Сообщество Overcoder
Наверх
Меню