Enable a simple password field in Vuetify.

Validating passwords is a repetitive task, but a task nevertheless. But, how do you make sure that the password field is modern and the password complies to pre-defined rules?

I don’t quite build super sensitive applications, and tend to use a simple VeeValidate or Vuelidate expression to validate passwords.

Here’s the Vue component..

 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

<!-- PasswordChange.vue -->
<template>
  <v-container>
    <v-form ref="form" v-model="valid">
      <v-layout text-center wrap>
        <v-flex xs12></v-flex>

        <v-flex xs12 mb-4>
          <h1 class="display-1 font-weight-bold mb-3">Change thy password</h1>
          <p class="subheading font-weight-light grey--text">
            It is 2020, but password is still a thing.
          </p>
        </v-flex>
        <v-flex offset-md-3 xs6>
          <v-text-field
            autocomplete="current-password"
            :value="userPassword"
            label="Enter password"
            hint="Your password passed! Password rules are not meant to be broken!"
            :append-icon="value ? 'mdi-eye' : 'mdi-eye-off'"
            @click:append="() => (value = !value)"
            :type="value ? 'password' : 'text'"
            :rules="[rules.password]"
            @input="_=>userPassword=_"
          ></v-text-field>
        </v-flex>
      </v-layout>
    </v-form>
  </v-container>
</template>

We are doing a few basic things in the component -

• Basic layout using v-container and v-layout
• create a text field that is bound to a variable called userPassword
• the text field has an icon to show or hide password. It uses eye and eye-off icons to indicate the states and controls whether password is hidden using the type property

You may also observe that we use a :value and @input= to use a one-way bind and update the password when text in the password field is changed. We do not use a two-way bind here because the password value is most likely garbled and does not make sense to be displayed against the password field.

Again, why is password garbled? - because passwords are typically encrypted and stored. They should not be decrypted and passed to client.

Also observe that the form itself is bound to valid. We can use this variable in a button or any other event to do something only if all validations are passed.

So far we have just created a field and introduced bindings and rules. It is time to write all that in the <script> tag in the same component.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<!-- PasswordChange.vue -->
<script>
  export default {
    data: () => ({
      userPassword: "",
      valid: true,
      value: true,
      rules: {
        required: value => !!value || "Required.",
        password: value => {
          const pattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/;
          return (
            pattern.test(value) ||
            "Min. 8 characters with at least one capital letter, a number and a special character."
          );
        }
      }
    })
  };
</script>

The script rules use a simple validation library available in Vuetify to -

1. Validate that a password is present
2. Password complies to pre-defined rules - which in this case is a Regex. We want passwords to have min. 8 characters with at least one special character, capital letter and a digit
3. userPassword is a variable used for demonstration purposes. You can either have this from a service that ties back to the server, or pull this in from Vuex state (which ties back to server!)