bootstrap-italia 2.9.2 → 2.10.0

package/src/js/plugins/input-password.js

@@ -3,7 +3,6 @@ import EventHandler from 'bootstrap/js/src/dom/event-handler'
 import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
 import Manipulator from 'bootstrap/js/src/dom/manipulator'
 
-//import Input from './input'
 import InputLabel from './input-label'
 
 const NAME = 'inputpassword'
@@ -12,38 +11,45 @@ const EVENT_KEY = `.${DATA_KEY}`
 const DATA_API_KEY = '.data-api'
 
 const Default = {
-  shortPass: 'Password molto debole',
-  badPass: 'Password debole',
-  goodPass: 'Password sicura',
-  strongPass: 'Password molto sicura',
-  enterPass: 'Inserisci almeno 8 caratteri e una lettera maiuscola',
-  alertCaps: 'CAPS LOCK inserito',
-  showText: true,
-  minimumLength: 4,
+  shortPass: 'Password troppo breve',
+  badPass: 'Password debole.',
+  goodPass: 'Password abbastanza sicura.',
+  strongPass: 'Password sicura.',
+  minimumLength: 8,
+  suggestionsLabel: 'Suggerimenti per una buona password:',
+  suggestionFollowed: 'suggerimenti seguito',
+  suggestionFollowedPlural: 'suggerimenti seguiti',
+  suggestionOf: 'di',
+  suggestionMetLabel: 'Soddisfatto: ',
+  suggestionMetIconPath: `
+    M9.6 16.9 4 11.4l.8-.7 4.8 4.8 8.5-8.4.7.7-9.2 9.1z
+  `,
+  suggestionLength: 'Almeno {minLength} caratteri.',
+  suggestionUppercase: 'Una o più maiuscole.',
+  suggestionLowercase: 'Una o più minuscole.',
+  suggestionNumber: 'Uno o più numeri.',
+  suggestionSpecial: 'Uno o più caratteri speciali.',
 }
 
 const EVENT_CLICK = `click${EVENT_KEY}`
 const EVENT_KEYUP = `keyup${EVENT_KEY}`
-const EVENT_KEYDOWN = `keydown${EVENT_KEY}`
-const EVENT_KEYPRESS = `keypress${EVENT_KEY}`
 const EVENT_SCORE = `score${EVENT_KEY}`
 const EVENT_TEXT = `text${EVENT_KEY}`
+const EVENT_SUGGS = `suggs${EVENT_KEY}`
 
 const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
 const EVENT_MOUSEDOWN_DATA_API = `mousedown${EVENT_KEY}${DATA_API_KEY}`
 const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}`
 
 const CLASS_NAME_PASSWORD = 'input-password'
-//const CLASS_NAME_METER = 'input-password-strength-meter'
-const CLASS_NAME_SHOW = 'show'
 
 const SELECTOR_PASSWORD = 'input[data-bs-input][type="password"]'
 const SELECTOR_BTN_SHOW_PWD = '.password-icon'
 const SELECTOR_METER = '.password-strength-meter'
 const SELECTOR_METER_GRAYBAR = '.password-meter'
 const SELECTOR_METER_COLBAR = '.progress-bar'
-const SELECTOR_CAPS = '.password-caps'
-const SELECTOR_TEXT = '.form-text'
+const SELECTOR_METER_TEXT = '.strength-meter-info'
+const SELECTOR_METER_SUGGS = '.strenght-meter-suggestions'
 
 class InputPassword extends BaseComponent {
   constructor(element, config) {
@@ -52,31 +58,54 @@ class InputPassword extends BaseComponent {
     this._config = this._getConfig(config)
     this._isCustom = this._element.classList.contains(CLASS_NAME_PASSWORD)
     this._meter = this._element.parentNode.querySelector(SELECTOR_METER)
-    this._isShiftPressed = false
-    this._isCapsOn = false
 
     this._grayBarElement = null
     this._colorBarElement = null
     this._textElement = null
-    this._capsElement = null
+    this._suggsElement = null
     this._showPwdElement = null
 
     this._text = {}
 
     this._label = new InputLabel(element)
 
+    this._suggestions = [
+      {
+        key: 'length',
+        text: (config) => config.suggestionLength.replace('{minLength}', config.minimumLength.toString()),
+        test: (password, config) => password.length >= config.minimumLength,
+      },
+      {
+        key: 'uppercase',
+        text: (config) => config.suggestionUppercase,
+        test: (password) => /[A-Z]/.test(password),
+      },
+      {
+        key: 'lowercase',
+        text: (config) => config.suggestionLowercase,
+        test: (password) => /[a-z]/.test(password),
+      },
+      {
+        key: 'number',
+        text: (config) => config.suggestionNumber,
+        test: (password) => /[0-9]/.test(password),
+      },
+      {
+        key: 'special',
+        text: (config) => config.suggestionSpecial,
+        test: (password) => /[^A-Za-z0-9]/.test(password),
+      },
+    ]
+
     this._init()
     this._bindEvents()
   }
 
   // Getters
-
   static get NAME() {
     return NAME
   }
 
-  // Public
-
   // Private
   _getConfig(config) {
     config = {
@@ -88,118 +117,174 @@ class InputPassword extends BaseComponent {
   }
 
   _init() {
-    if (this._meter) {
-      this._grayBarElement = this._meter.querySelector(SELECTOR_METER_GRAYBAR)
-      this._colorBarElement = this._meter.querySelector(SELECTOR_METER_COLBAR)
-      this._textElement = this._meter.querySelector(SELECTOR_TEXT)
-
-      if (this._textElement) {
-        this._config = Object.assign({}, this._config, { ...Manipulator.getDataAttributes(this._textElement) }, { enterPass: this._textElement.innerText })
-      }
-    }
     if (this._isCustom) {
-      this._capsElement = this._element.parentNode.querySelector(SELECTOR_CAPS)
+      this._handleAutofill()
+      this._showPwdElement = SelectorEngine.findOne(SELECTOR_BTN_SHOW_PWD, this._element.parentNode)
+      if (this._meter) {
+        this._grayBarElement = this._meter.querySelector(SELECTOR_METER_GRAYBAR)
+        this._colorBarElement = this._meter.querySelector(SELECTOR_METER_COLBAR)
+        this._textElement = this._meter.querySelector(SELECTOR_METER_TEXT)
+        this._suggsElement = this._meter.querySelector(SELECTOR_METER_SUGGS)
+        if (this._textElement) {
+          this._config = Object.assign({}, this._config, { ...Manipulator.getDataAttributes(this._textElement) })
+        }
+        if (this._suggsElement) {
+          this._createsuggestionsList()
+        }
+      }
     }
-
-    this._showPwdElement = SelectorEngine.findOne(SELECTOR_BTN_SHOW_PWD, this._element.parentNode)
   }
 
   _bindEvents() {
-    if (this._meter) {
-      EventHandler.on(this._element, EVENT_KEYUP, () => this._checkPassword())
-    }
-
     if (this._isCustom) {
-      EventHandler.on(this._element, EVENT_KEYDOWN, (evt) => {
-        if (evt.key === 'Shift') {
-          this._isShiftPressed = true
-        }
-      })
-      EventHandler.on(this._element, EVENT_KEYUP, (evt) => {
-        if (evt.key === 'Shift') {
-          this._isShiftPressed = false
-        }
-        if (evt.key === 'CapsLock') {
-          this._isCapsOn = !this._isCapsOn
-          if (this._isCapsOn) {
-            this._showCapsMsg()
-          } else {
-            this._hideCapsMsg()
-          }
-        }
-      })
-      EventHandler.on(this._element, EVENT_KEYPRESS, (evt) => {
-        const matches = evt.key.match(/[A-Z]$/) || []
-        if (matches.length > 0 && !this._isShiftPressed) {
-          this._isCapsOn = true
-          this._showCapsMsg()
-        } else if (this._isCapsOn) {
-          this._isCapsOn = false
-          this._hideCapsMsg()
-        }
-      })
-    }
-
-    if (this._showPwdElement) {
-      EventHandler.on(this._showPwdElement, EVENT_CLICK, () => this._toggleShowPassword())
+      if (this._showPwdElement) {
+        EventHandler.on(this._showPwdElement, EVENT_CLICK, () => this._toggleShowPassword())
+      }
+      if (this._meter) {
+        EventHandler.on(this._element, EVENT_KEYUP, () => this._checkPassword())
+        EventHandler.on(this._element, 'input', () => this._checkPassword())
+      }
     }
   }
 
-  _showCapsMsg() {
-    if (this._capsElement) {
-      this._capsElement.classList.add(CLASS_NAME_SHOW)
-    }
-  }
-  _hideCapsMsg() {
-    if (this._capsElement) {
-      this._capsElement.classList.remove(CLASS_NAME_SHOW)
+  _handleAutofill() {
+    const checkAndActivate = () => {
+      if (this._element.value !== '') {
+        this._label._labelOut()
+        this._checkPassword()
+      }
     }
+    checkAndActivate()
+    setTimeout(checkAndActivate, 100)
+    EventHandler.on(this._element, 'animationstart', (event) => {
+      if (event.animationName === 'onAutoFillStart') {
+        checkAndActivate()
+      }
+    })
   }
 
   _toggleShowPassword() {
     const toShow = this._element.getAttribute('type') === 'password'
     SelectorEngine.find('[class^="password-icon"]', this._showPwdElement).forEach((icon) => icon.classList.toggle('d-none'))
-    if (toShow) {
-      this._element.setAttribute('type', 'text')
-    } else {
-      this._element.setAttribute('type', 'password')
-    }
+    this._element.setAttribute('type', toShow ? 'text' : 'password')
+    this._showPwdElement.setAttribute('aria-checked', toShow.toString())
   }
 
   _checkPassword() {
-    const score = this._calculateScore(this._element.value)
-    const perc = score < 0 ? 0 : score
-
-    this._colorBarElement.classList.forEach((className) => {
-      if (className.match(/(^|\s)bg-\S+/g)) {
-        this._colorBarElement.classList.remove(className)
-      }
-    })
-    this._colorBarElement.classList.add('bg-' + this._scoreColor(score))
-    this._colorBarElement.style.width = perc + '%'
-    this._colorBarElement.setAttribute('aria-valuenow', perc)
+    const password = this._element.value
+    const score = this._calculateScore(password)
+    this._updateMeter(score)
+    this._updateText(score, password)
+    this._updateSuggestions(password)
+  }
 
+  _updateMeter(score) {
+    const perc = score < 0 ? 0 : score
+    if (this._colorBarElement) {
+      this._colorBarElement.classList.forEach((className) => {
+        if (className.match(/(^|\s)bg-\S+/g)) {
+          this._colorBarElement.classList.remove(className)
+        }
+      })
+      this._colorBarElement.classList.add(`bg-${this._scoreColor(score)}`)
+      this._colorBarElement.style.width = `${perc}%`
+      this._colorBarElement.setAttribute('aria-valuenow', perc)
+    }
     EventHandler.trigger(this._element, EVENT_SCORE)
+  }
 
+  _updateText(score, password) {
     if (this._textElement) {
       let text = this._scoreText(score)
-      if (this._element.value.length === 0 && score <= 0) {
-        text = this._config.enterPass
+      if (this._suggsElement) {
+        const { completedCount, totalCount } = this._getCompletedSuggestions(password)
+        const suggestionText = completedCount === 1 ? this._config.suggestionFollowed : this._config.suggestionFollowedPlural
+        text += ` ${completedCount} ${this._config.suggestionOf} ${totalCount} ${suggestionText}.`
       }
-
-      if (this._textElement.innerHTML.search(text) === -1) {
-        this._textElement.innerHTML = text
+      if (this._textElement.textContent !== text) {
+        this._textElement.textContent = text
         this._textElement.classList.forEach((className) => {
           if (className.match(/(^|\s)text-\S+/g)) {
             this._textElement.classList.remove(className)
           }
         })
-        this._textElement.classList.add('text-' + this._scoreColor(score))
+        this._textElement.classList.add(`text-${this._scoreColor(score)}`)
         EventHandler.trigger(this._element, EVENT_TEXT)
       }
     }
   }
 
+  _updateSuggestions(password) {
+    if (this._suggsElement) {
+      this._updateSuggestionsList(password)
+      EventHandler.trigger(this._element, EVENT_SUGGS)
+    }
+  }
+
+  _getCompletedSuggestions(password) {
+    let completedCount = 0
+    const totalCount = this._suggestions.length
+    this._suggestions.forEach((sugg) => {
+      if (sugg.test(password, this._config)) completedCount++
+    })
+    return { completedCount, totalCount }
+  }
+
+  _createsuggestionsList() {
+    if (this._suggsElement.querySelector('.password-suggestions')) {
+      return
+    }
+    const suggLabel = document.createElement('label')
+    suggLabel.className = 'visually-hidden'
+    suggLabel.htmlFor = 'suggestions'
+    suggLabel.textContent = Default.suggestionsLabel
+    const suggContainer = document.createElement('div')
+    suggContainer.id = 'suggestions'
+    suggContainer.className = 'password-suggestions'
+
+    this._suggestions.forEach((sugg) => {
+      const suggElement = document.createElement('div')
+      suggElement.className = 'suggestion'
+      suggElement.dataset.suggestion = sugg.key
+      const checkIcon = this._createIconCheck()
+      const textSpan = document.createElement('span')
+      textSpan.textContent = sugg.text(this._config)
+      suggElement.appendChild(checkIcon)
+      suggElement.appendChild(textSpan)
+      suggContainer.appendChild(suggElement)
+    })
+
+    this._suggsElement.appendChild(suggLabel)
+    this._suggsElement.appendChild(suggContainer)
+  }
+
+  _createIconCheck() {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+    svg.setAttribute('class', `icon icon-xs me-1 d-none`)
+    svg.setAttribute('aria-label', this._config.suggestionMetLabel)
+    svg.setAttribute('viewBox', '0 0 24 24')
+    svg.style.width = '1em'
+    svg.style.height = '1em'
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+    path.setAttribute('d', this._config.suggestionMetIconPath.trim())
+    svg.appendChild(path)
+    return svg
+  }
+
+  _updateSuggestionsList(password) {
+    if (!this._suggsElement) return
+    this._suggestions.forEach((sugg) => {
+      const suggElement = this._suggsElement.querySelector(`[data-suggestion="${sugg.key}"]`)
+      if (suggElement) {
+        const isMet = sugg.test(password, this._config)
+        const checkIcon = suggElement.querySelector('.icon')
+        if (checkIcon) {
+          checkIcon.classList.toggle('d-none', !isMet)
+        }
+      }
+    })
+  }
+
   /**
    * Returns strings based on the score given.
    *
@@ -211,10 +296,14 @@ class InputPassword extends BaseComponent {
       return this._config.shortPass
     }
 
+    if (score === -2) {
+      return ''
+    }
+
     score = score < 0 ? 0 : score
 
     if (score < 26) {
-      return this._config.shortPass
+      return this._config.badPass
     }
     if (score < 51) {
       return this._config.badPass
@@ -227,16 +316,7 @@ class InputPassword extends BaseComponent {
   }
 
   _scoreColor(score) {
-    if (score === -1) {
-      return 'danger'
-    }
-    if (score === -2) {
-      return 'muted'
-    }
-
-    score = score < 0 ? 0 : score
-
-    if (score < 26) {
+    if (score === -1 || score === -2 || score < 26) {
       return 'danger'
     }
     if (score < 51) {
@@ -245,7 +325,6 @@ class InputPassword extends BaseComponent {
     if (score < 76) {
       return 'success'
     }
-
     return 'success'
   }
 
@@ -281,7 +360,7 @@ class InputPassword extends BaseComponent {
       score += 5
     }
 
-    // password has at least 2 sybols
+    // password has at least 2 symbols
     var symbols = '.*[!,@,#,$,%,^,&,*,?,_,~]'
     symbols = new RegExp('(' + symbols + symbols + ')')
     if (password.match(symbols)) {
@@ -360,11 +439,6 @@ class InputPassword extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-/*const inputs = SelectorEngine.find(SELECTOR_PASSWORD)
-inputs.forEach((input) => {
-  InputPassword.getOrCreateInstance(input)
-})*/
-
 const createInput = (element) => {
   if (element && element.matches(SELECTOR_PASSWORD)) {
     return InputPassword.getOrCreateInstance(element)
@@ -372,6 +446,19 @@ const createInput = (element) => {
   return null
 }
 
+const initInputPassword = () => {
+  const element = SelectorEngine.findOne(SELECTOR_PASSWORD)
+  if (element) {
+    InputPassword.getOrCreateInstance(element)
+  }
+}
+
+if (document.readyState !== 'loading') {
+  initInputPassword()
+} else {
+  document.addEventListener('DOMContentLoaded', initInputPassword)
+}
+
 EventHandler.on(document, EVENT_MOUSEDOWN_DATA_API, SELECTOR_PASSWORD + ', label', function () {
   const target = InputLabel.getInputFromLabel(this) || this
   createInput(target)

package/src/js/version.js

@@ -1,5 +1,5 @@
 // bootstrap italia version variable
 // useful to check for the current version
 // eslint-disable-next-line no-unused-vars
-const BOOTSTRAP_ITALIA_VERSION = '2.9.2'
+const BOOTSTRAP_ITALIA_VERSION = '2.10.0'
 export default BOOTSTRAP_ITALIA_VERSION

package/src/scss/custom/_form-password.scss

@@ -12,7 +12,7 @@
 }
 .password-meter {
   height: 4px;
-  left: 10px;
+  left: 7px;
   bottom: -6px;
   width: 100%;
   max-width: 180px;

package/src/scss/custom/_version.scss

@@ -1,3 +1,3 @@
 :root {
-  --bootstrap-italia-version: '2.9.2';
+  --bootstrap-italia-version: '2.10.0';
 }