Я хотел бы поделиться с вами своим последним генератором причудливых паролей.

Это будет выглядеть так:

Его особенности в основном;

  1. Ползунок надежности пароля с другими компонентами формы через Quasar Framework.
  2. Поля пароля могут быть замаскированы / демаскированы, поэтому нет необходимости в дополнительном поле проверки пароля.
  3. Имеет дактилоскопический дисплей в качестве измерителя прочности, благодаря Akryum / vue-progress-path.
  4. В поле сгенерированного пароля есть кнопки «копировать в буфер обмена» и «перейти в поле нового пароля».

Я должен пропустить, как создавать первые два поля текущего / нового пароля, эти инструкции хорошо документированы здесь.

Поле сгенерированного пароля также очень простое;

<q-input
  readonly
  stack-label
  type="text"
  autocomplete="off"
  v-model="generatedPassword"
  label="Generated password"
>
  <template v-slot:after>
    <q-btn round flat dense icon="mdi-clipboard-arrow-up-outline" @click="copyGeneratedPassword" />
  </template>
</q-input>

copyGeneratedPassword выглядит следующим образом:

import { copyToClipboard } from 'quasar'
...
data: {
  newPassword: ''
},
methods: {
  copyGeneratedPassword () {
    this.newPassword = this.generatedPassword
  
    copyToClipboard(this.generatedPassword)
  
    this.$q.notify({
      progress: true,
      type: 'positive',
      message: `Generated password has been copied to clipboard.`
    })
  }
}

Этот метод в основном копирует generatedPassword в буфер обмена, а также в newPassword (generatedPassword здесь является вычисляемым свойством и описано ниже).

this. $ q.notify - еще один плагин Quasar, описанный здесь.

Также помощник copyToClipboard происходит от utils Quasar. Мне очень нравится использовать Quasar.

Пришло время для ползунка:

<q-item>
  <q-item-section>
    <q-slider
      snap
      label
      markers
      :step="12"
      :min="0"
      :max="48"
      :color="strengthColor"
      :label-value="strengthLabel"
      v-model="strengthLevel"
    />
  </q-item-section>
  <q-item-section avatar>
    <loading-progress
      :progress="strengthLevel / 100"
      shape="M23,3.1c-3.1-1.6-5.8-2.3-9.1-2.3c-3.2,0-6.3,0.8-9.1,2.3 M27.1,11c-1.5-2.1-3.3-3.7-5.5-4.8 c-4.7-2.4-10.7-2.4-15.3,0C4,7.4,2.2,9,0.7,11 M22.2,18.7c0-4.3-3.7-7.8-8.2-7.8s-8.2,3.5-8.2,7.8c0,2.5,0.6,4.9,1.6,6.8 c1.1,2.1,1.9,2.9,3.3,4.3 M22.6,27.4c-1.9,0-3.7-0.5-5.1-1.5c-2.4-1.6-3.9-4.3-3.9-7.2 M18.5,30.8c-2.6-0.8-4.3-1.7-6.1-3.5 c-2.3-2.3-3.5-5.3-3.5-8.5c0-2.6,2.3-4.8,5-4.8s5,2.2,5,4.8c0,1.7,1.5,3.2,3.4,3.2c1.9,0,3.4-1.4,3.4-3.2c0-6.1-5.3-11.1-11.8-11.1 c-4.6,0-8.9,2.6-10.8,6.6c-0.6,1.3-1,2.9-1,4.6c0,1.3,0.1,3.3,1.1,5.9"
      fill-duration="2"
      height="32"
      width="30"
      size="32"
    />
  </q-item-section>
</q-item>

Пока клиент перемещается вправо или влево, StrengthLevel изменяется от 0 до 48 (позже я объясню, почему 48 является максимальным числом). StrengthColor и StrengthLabel - вычисляемые свойства, привязанные к StrengthLevel.

Компонент LoadingProgress здесь на самом деле Akryum / vue-progress-path с моим настраиваемым SVG отпечатка пальца. Изначально он не предназначен для этой цели, но комбинация с QSlider работает хорошо, а также объясняет, почему я использовал 48 для максимального значения QSlider. Длина SVG определяет максимальное количество.

Теперь вот вычисленные свойства:

data: {
  strengthLevel: 24 // default strength level on pageLoad
},
computed: {
  generatedPassword () {
    let charactersArray = 'a-z'.split(',')
    let CharacterSet = ''
    let password = ''
    let size = 8
    
    switch (this.strengthLevel) {
      case 12:
        size = 10
        charactersArray = 'a-z,A-Z'.split(',')
        break
      case 24:
        size = 12
        charactersArray = 'a-z,A-Z,0-9'.split(',')
        break
     case 36:
        size = 14
        charactersArray = 'a-z,A-Z,0-9,#'.split(',')
        break
     case 48:
        size = 16
        charactersArray = 'a-z,A-Z,0-9,#'.split(',')
        break
    }
    if (charactersArray.indexOf('a-z') >= 0) {
      CharacterSet += 'abcdefghijklmnopqrstuvwxyz'
    }
    if (charactersArray.indexOf('A-Z') >= 0) {
      CharacterSet += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
    }
    
    if (charactersArray.indexOf('0-9') >= 0) {
      CharacterSet += '0123456789'
    }
    if (charactersArray.indexOf('#') >= 0) {
      CharacterSet += '![]{}()%&*$#^<>~@|'
    }
    for (let i = 0; i < size; i++) {
      password += CharacterSet.charAt(Math.floor(Math.random() * CharacterSet.length))
    }
    
    return password
  },
  strengthLabel () {
    switch (this.strengthLevel) {
      case 12:
        return 'poor'
      case 24:
        return 'fair'
      case 36:
        return 'good'
      case 48:
        return 'excellent'
      default:
        return 'weak'
    }
  },
  strengthColor () {
    switch (this.strengthLevel) {
      case 12:
        return 'amber-10'
      case 24:
        return 'orange-6'
      case 36:
        return 'primary'
      case 48:
        return 'positive'
      default:
        return 'blue-grey-3'
    }
  }
}

StrengthColor возвращает значения из цветовой палитры Quasar.

Вычисляемое свойство createdPassword изначально создано Christophor Wilson, и я просто немного его изменил.

P.S .: Последний трюк со стилями vue-progress-path. Он имеет предопределенное значение ширины штриха для действия заполнения отпечатка пальца, которое довольно толстое, и вы можете сделать его тоньше, выполнив следующие действия:

<style>
  .vue-progress-path path {
    stroke-width:1 !important;
  }
</style>

Вот и все! Остальная часть моего кода - это проверка полей пароля и механизма мутации на стороне сервера. Я надеюсь, что вам понравилось.