当前位置:主页 > 资料 >

Making an interactive password validator – WotW
栏目分类:资料   发布日期:2018-08-02   浏览次数:

导读:本文为去找网小编(www.7zhao.net)为您推荐的Making an interactive password validator – WotW,希望对您有所帮助,谢谢! Today we are going to create a password submit form, that validates the user input in real time.

本文为去找网小编(www.7zhao.net)为您推荐的Making an interactive password validator – WotW,希望对您有所帮助,谢谢!

内容来自www.7zhao.net



Today we are going to create a password submit form, that validates the user input in real time. 内容来自www.7zhao.net

The inspiration comes from this created by and looks like this: 本文来自去找www.7zhao.net

欢迎访问www.7zhao.net

Preparations

For today’s widget we will be using , and for some animations we’ll use .

内容来自www.7zhao.net

If you want to follow along you can fork this that already has the dependencies.

copyright www.7zhao.net

The markup

I always try to match the design as close as possible, but in this case there are some graphics that cannot be done unless I spend a couple of hours using a vector editing program to generate them, so instead of that I’ll match the most important interactive and animated elements.

本文来自去找www.7zhao.net

Let’s start by setting an app-container class to our main div, because we will need to style it. Bellow we should have a title and subtitle that correspond to the instructions of our widget 欢迎访问www.7zhao.net

<div id="app" class="app-container">
  
  <h1 class="title">Set a Password</h1>
  <p class="subtitle">Must contain at least</p> copyright www.7zhao.net 

Now for the list of rules we will make a rules-container , followed by an empty div for the pink-line that will make it look like a notebook sheet. 欢迎访问www.7zhao.net

<div class="rules-container">
    <div class="pink-line"></div> 

copyright www.7zhao.net

Next, we will use an unordered list for our rules-list , it will contain four rules-items each with a rule-text for the label and an empty green-line that will cross the rule when fulfilled. 内容来自www.7zhao.net

<ul class="rules-list">
      <li class="rule-item">
        <div>
          <span class="rule-text">1</span>          
        </div>
        <div class="green-line"></div>
      </li>
      
      <li class="rule-item">
        <div>
          <span class="rule-text">2</span>          
        </div>
        <div class="green-line"></div>
      </li>
      
      <li class="rule-item">
        <div>
          <span class="rule-text">3</span>          
        </div>
        <div class="green-line"></div>
      </li>
      
      <li class="rule-item">
        <div>
          <span class="rule-text">4</span>          
        </div>
        <div class="green-line"></div>
      </li>
    </ul>
  </div> <!-- rules-container --> www.7zhao.net 

Last but not least, we will make a form that will contain the password input and its submit button:

内容来自www.7zhao.net

<fo rm>
    <input class="password-input" type="password">
    <button class="save-button" type="submit">
      <strong>SAVE</strong>
    </button>
  </form>
  
</div> <!-- app-container --> www.7zhao.net 

We should have a really basic no-style form, like this:

copyright www.7zhao.net

去找(www.7zhao.net欢迎您

Making it look nice

We have quite some work ahead, right now our widget doesn’t look anything like the original post.

本文来自去找www.7zhao.net

Let’s begin with the app-container .

去找(www.7zhao.net欢迎您

I’ll constrain the width to be fixed to 320px and centered. Also I’ll set a white color for the text and a font. Then just a gradient background color to match the reference.

copyright www.7zhao.net

.app-container {
  width: 320px;
  margin: 0 auto; /* center */
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(#553096, #40266D); /* purple gradient background */
} 
去找(www.7zhao.net欢迎您

The next step is to style the text titles. It is actually really simple, we just need to center them and adjust sizes, margin and padding. copyright www.7zhao.net

.title {
  text-align: center;
  padding-top: 20px;
  font-size: 20px;
  margin-bottom: 0;
}
.subtitle {
  text-align: center;
  color: rgba(255, 255, 255, 0.5); /* semitransparent */
  font-size: 14px;
  margin: 0;
} 
www.7zhao.net

The rules-container will be our “sheet” of paper, so it should have a white background color, some border-radius for the rounded corners, a fixed width of 200px and also will be centered. It should also have a slight angle, transform: rotate should do the trick: 欢迎访问www.7zhao.net

.rules-container {
  width: 200px;
  margin: 0 auto; /* center */
  margin-bottom: 30px;
  color: #2A1E49;
  background-color: white;
  border-radius: 5px;
  transform: rotate(-3deg);
} 

去找(www.7zhao.net欢迎您

Now for the rules, we will basically set the spacing using padding and margins. We don’t want to see the default lists bullet points, so list-style-type: none takes care of that. Also a blue border-bottom should help with the notebook sheet lines. 本文来自去找www.7zhao.net

.rules-list {
  padding: 15px 0 10px 0;
}
.rule-item {
  position: relative;
  list-style-type: none; /* remove bullets */
  width: 100%;
  margin-bottom: 5px;
  border-bottom: solid blue 1px;
}
.rule-text {
  /* set text beside the pink line */
  margin-left: 25px;
} 
copyright www.7zhao.net

Now for the lines, both will have a position absolute, because they need to be positioned freely on top of the elements. copyright www.7zhao.net

With the pink line, the height was kind of a trial and error, because it depends on the number of rules, so if you plan to add or remove rules you should change that. copyright www.7zhao.net

The green line is different because it appears in every rule and should be ready to cross them, in this case we will start with no crossed rules, so the default width will be 0 .

内容来自www.7zhao.net

/* pink left line to make the list look like a notebook sheet */
.pink-line {
  position: absolute;
  border-left: solid #f84194 1px;
  height: 120px; /* depends on container height */
  left: 18px;
}
/* line that croses each rule */
.green-line {
  position: absolute;
  background-color: #32B997;
  height: 3px;
  top: 8px;
  left: 22px;
  transform: rotate(2deg);
  width: 0; /* starting width so it doesn't show */
} 
copyright www.7zhao.net

To finish styling our component we need to set the styles for the password-input and the save-button . They have some pretty straightforward rules, like removing the default border and outline for those elements, calculating the center, font size, etc. The most interesting part is with the save-button , it has a transition property to be able to animate the background color, and along with that a valid class rule that should be changed when the form is validated and has no problems. 欢迎访问www.7zhao.net

.password-input {
  width: 220px;
  outline: none;
  border: none;
  padding: 8px 10px 10px;
  border-radius: 2px;
  margin-bottom: 30px;
  margin-left: calc(50% - 120px);
  font-size: 20px;
}

.save-button {
  outline: none;
  border: none;
  width: 100%;
  padding: 10px;
  color: rgba(0, 0, 0, 0.4);
  font-size: 17px;
  background-color: #EDEDED;
  transition: background-color .3s; /* will animate the backround color when the class changes*/
}
.save-button.valid {
  background-color: #F9B800;
  cursor: pointer;
} 

去找(www.7zhao.net欢迎您

We should have now a nice looking widget like this: 内容来自www.7zhao.net

The interaction

Now for the interesting part, let’s code the widget interactions, but before getting into the Vue instance I’ll create an object that will help us with the password validation rules. 内容来自www.7zhao.net

In the original gif, the password needs to be 8 characters long, and have 1 special character, 1 upper case letter and 1 number. The first rule can be checked easily by just comparing the length of the password string, but the rest will need some *Regular Expressions* to easily detect if the password contains those characters. 欢迎访问www.7zhao.net

const specialCharsRegex = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/
const upperCaseRegex = /[A-Z]/
const numberRegex = /[0-9]/

const validationRules = [
  {
    label: '8 Characters', 
    validate: input => input.length>=8,
    labelWidth: 100 // this depends on the label length
  },
  {
    label: '1 Special Character', 
    validate: input => specialCharsRegex.test(input),
    labelWidth: 150
  },
  {
    label: '1 Upper Case', 
    validate: input => upperCaseRegex.test(input),
    labelWidth: 110
  },
  { 
    label: '1 Number', 
    validate: input => numberRegex.test(input),
    labelWidth: 80
  }
] 本文来自去找www.7zhao.net 

We could also have used a method that would go through each character and compare them, but RegEx have a better performance and we’ll need that to compare in real time when the user writes its password.

本文来自去找www.7zhao.net

Now that we have a list of rules with their validator, we can start binding those to Vue and use them to fill the HTML rules too:

www.7zhao.net

new Vue({
  el: '#app',
  data: {
    password: ''
  },
  computed: {
    rules () {
      return validationRules.map(rule => {
        return {
          label: rule.label,
          isValid: rule.validate(this.password),
          labelWidth: rule.labelWidth
        }
      })
    }
  }
}) 

欢迎访问www.7zhao.net

As you can see we are only declaring a password property that will hold the user input as they type it in. After that we create a computed rules property that basically takes the validationRules we did in the previous step and apply the validator to the password property. 内容来自www.7zhao.net

To reflect those changes, we need to replace the rules-list with one that is binded to our new Vue computed properties: www.7zhao.net

<ul class="rules-list">

      <li v-for="(rule, index) in rules" :key="index" class="rule-item">
        <div :ref="`label_${index}`">
          <span class="rule-text">{{rule.label}}</span>          
        </div>
        <div class="green-line" :ref="`line_${index}`"></div>
      </li>

    </ul> copyright www.7zhao.net 

Probably you noticed that apart from cycling through the rules I also declared a couple of refs for the label and the green line, they will be of use when animating them later. www.7zhao.net

Now we just need another computed property to know if the form is valid and a stub method that will be called when the form is valid and submitted. copyright www.7zhao.net

// computed...
    validForm () {
      // returns false if at least one rule is invalid
      return !this.rules.some(rule => !rule.isValid)
    }
  },
  methods: {
    submitForm() {
      if(this.validForm) {
        console.info('TODO: connect to your back-end');        
      }
    }
  } 
欢迎访问www.7zhao.net

And in the HTML code we can bind those to our form like this:

欢迎访问www.7zhao.net

<fo rm @submit.prevent="submitForm">
    <input class="password-input" type="password" v-model="password">
    <button class="save-button" :class="{'valid': validForm}" type="submit">
      <strong>SAVE</strong>
    </button>
  </form> 
本文来自去找www.7zhao.net

Notice the @submit.prevent part, that’s a shortcut to avoid having to write in your method event.preventDefault() and helps us to trigger the submitForm method without refreshing the page.

去找(www.7zhao.net欢迎您

We are almost there, actually if you set a password that fulfills all those requirements you can see the SAVE button change color: 去找(www.7zhao.net欢迎您

copyright www.7zhao.net

The animations

So technically the widget is fully functional but it is still missing the animations that tell you which rule is already checked when writing your password.

本文来自去找www.7zhao.net

First we will create a method that will take any rule and animates it depending if it is valid or not. When valid, the green line should increase its width to strike through the text, and at the same time the text should have some transparency and move horizontally a little. When it is not valid it should get back to normal. 去找(www.7zhao.net欢迎您

// methods ...
    animateRule(index, isValid) {
      const rule = this.rules[index]
      const greenLine = this.$refs[`line_${index}`]
      const ruleText = this.$refs[`label_${index}`]
      
      const greenLineWidth = isValid ? rule.labelWidth : 0
      const textOpacity = isValid ? 0.6 : 1
      const textPositionX = isValid ? 7 : -7
      
      // animate green line's width to strike element
      TweenLite.to(greenLine, 0.3, {
        width: greenLineWidth
      })
      
      // animate text transparency
      TweenLite.to(ruleText, 0.3, {
        opacity: textOpacity
      })
      
      // move the text to the side a little bit and then get back
      TweenLite.to(ruleText, 0.15, {
        x: textPositionX,
        onComplete: () => { // when the animation finishes, get it back
          TweenLite.to(ruleText, 0.15, {
            x: 0
          })
        }
      })
    }, 本文来自去找www.7zhao.net 

Basically what I’m doing in that method is get the animated elements by reference (remember the “refs” we declared before?), and then calculate the final state of each of them.

copyright www.7zhao.net

After that, using TweenLite, I just tween the desired property to that final state, or in the case of the text horizontal movement it goes back and forth by setting another TweenLite tween in the onComplete method.

欢迎访问www.7zhao.net

For this to work we need to trigger the animation only for the rules that changed, but how can we “inspect” our rules to see which ones were invalid and on are valid or the other way around?

www.7zhao.net

We can do that with a watcher. www.7zhao.net

A watcher is a method that you can execute each time any of your application data changes, and it receives both the old and the new value of that specific property. 欢迎访问www.7zhao.net

Let’s create a watcher that compare the rules values, if their isValid property got changed then we can call our animateRule method and animate only the rules that changed: copyright www.7zhao.net

watch: {
    // method that triggers when computed rules change
    rules: function (newRules, oldRules) {
      newRules.forEach((newRule, index) => {
        const oldRule = oldRules[index]
        if(newRule.isValid !== oldRule.isValid) {
          // rule changed its valid property
          this.animateRule(index, newRule.isValid)
        }
      })
    }
  }, 内容来自www.7zhao.net 

And now the final result! 欢迎访问www.7zhao.net

See the Pen by Eder Díaz ( ) on .0

本文来自去找www.7zhao.net

去找(www.7zhao.net欢迎您


本文原文地址:http://ederdiaz.com/blog/2018/07/31/making-an-interactive-password-validator-wotw/

以上为Making an interactive password validator – WotW文章的全部内容,若您也有好的文章,欢迎与我们分享! copyright www.7zhao.net

Copyright ©2008-2017去找网版权所有   皖ICP备12002049号-2 皖公网安备 34088102000435号   关于我们|联系我们| 免责声明|友情链接|网站地图|手机版