app.js

"use strict"
import { symbols } from "./words.js";
import { randomChar, randomWord, presetConstuctor, arrayOfSymbolNames } from "./utils.js";
const generatePassButton = document.querySelector('.generate-btn');
const passWindow = document.querySelector('.pass-window');
const passReveal = document.querySelector('.password-reveal');
const passLength = document.querySelector('#how-num');
const checkBoxInputs = document.querySelectorAll('input[type="checkbox"');
const appHead = document.querySelector('.app-head')
const advanceBtn = document.querySelector('.advance-btn');
const ul = document.getElementById('items')
const chooseContainer = document.querySelector('.choose-content-container')
const advanceModeContainer = document.querySelector('.advance-mode-container')
const isAdvance = document.querySelector('.isAdvance');
const sliders = document.querySelectorAll('.slider');
const basicModeContainer = document.querySelector('.edit')

// make sliders act like a button
function addTabEventsForSliders(){
  sliders.forEach(el => {
    el.tabIndex = "0"
    el.role = "button"
    el.ariaPressed = 'false'
    el.ariaDisabled = 'false'
    el.addEventListener('keydown', (e) => {
      if(e.code === 'Enter' || e.code === 'NumpadEnter' || e.code === 'Space'){
        e.preventDefault()
          if(e.target.previousSibling.previousSibling.checked){
            e.target.previousSibling.previousSibling.checked = false
            return
          }
            e.target.previousSibling.previousSibling.checked = true
      }
    })
  })
}

addTabEventsForSliders()

generatePassButton.addEventListener('click', generatePassWord);

// generate presets in DOM
function generatePresets(){
  let obj = presetsMap();

  const select = document.createElement("select");
  
  insertHeaderButtons()
  showHistory()

  select.id = 'presets';
  document.querySelector('.head-panel').appendChild(select)
  
  for(const keys of Object.keys(obj)){
    const optgroup = document.createElement('optgroup')
    select.appendChild(optgroup)
    optgroup.label = keys.slice(0, 1).toUpperCase() + keys.slice(1)
    for(const key of obj[keys].keys()){
      const option = document.createElement("option");
      option.value = key;
      option.innerText = key
      optgroup.appendChild(option)
    }
  }
  
         
  

// execute functionality by selected option
  select.addEventListener('change', () => {
    let pres = ''
    for(const values of Object.values(obj)){
      if(values.has(select.selectedOptions[0].value)){
        pres = values.get(select.selectedOptions[0].value)
        break
      }
    }
    presetConstuctor(pres, checkBoxInputs, passLength, ul)

    // show advance mode by click on right option
      if(select.selectedOptions[0].parentElement.label === 'Basic'){
        isAdvance.checked = false
        // do...
        advanceModeContainer.style.display = 'none'
        basicModeContainer.style.display = 'block'
        advanceBtn.classList.remove('advance-now')
        return
      }
      // show advance settings
      basicModeContainer.style.display = 'none'
      advanceModeContainer.style.display = 'flex'
      advanceBtn.classList.add('advance-now')
      // enable advance mode
      isAdvance.checked = true
  })
}

generatePresets()

// insert header buttons
function insertHeaderButtons(){
  const headPanel = document.createElement('div')
  headPanel.classList.add('head-panel')
  const buttonsContainer = document.createElement('div')
  buttonsContainer.classList.add('buttons-container')
  appHead.prepend(headPanel)
  headPanel.append(buttonsContainer)
  //
  let arr = [
    ['help-btn', `<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="64px" height="64px" viewBox="0 0 24.00 24.00" stroke="#ffffff" stroke-width="0.00024000000000000003"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"></path></g></svg>`],
    ['settings-btn', `<svg fill="#ffffff" height="64px" width="64px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.00 16.00" stroke="#ffffff" stroke-width="0.00016"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path class="cls-1" d="M12.28592,11.7143,6.49472,5.92372a2.50375,2.50375,0,0,0,.16958-.7544,2.14905,2.14905,0,0,0-.09474-.81438,2.11972,2.11972,0,0,0-.54871-.90431,2.32771,2.32771,0,0,0-1.76079-.68447H4.21515a2.104,2.104,0,0,0-.71829.15488L4.59925,4.02518l.31921.31976.24445.24481a1.864,1.864,0,0,1-.21948.85435,1.04314,1.04314,0,0,1-.11475.14488,1.64822,1.64822,0,0,1-1.00259.33474L2.609,4.70468,2.16005,4.255a2.07386,2.07386,0,0,0-.13469.54457l-.015.10493a2.33671,2.33671,0,0,0,.38407,1.51882,2.50928,2.50928,0,0,0,.29431.35975A2.20549,2.20549,0,0,0,4.265,7.43257a2.45325,2.45325,0,0,0,.89789-.17485L9.95648,12.054l1.20212,1.19909H11.827l.66343-.6645v-.6695Zm-6.53561-2.806,1.3662,1.3662L4.12892,13.2621H3.20558l-.45037-.45038V11.8959ZM14,5.90569,12.19094,7.71475,10.89232,6.49869,9.5111,7.87992,8.1449,6.51372,9.51861,5.13249,7.89717,3.5111l.68312-.7732,2.252.45042Z"></path> </g></svg>`],
    ['history-btn', `<svg fill="#ffffff" height="64px" width="64px" version="1.1" id="XMLID_136_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-3.6 -3.6 31.20 31.20" xml:space="preserve" stroke="#ffffff" stroke-width="0.00024000000000000003"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.096"></g><g id="SVGRepo_iconCarrier"> <g id="history"> <g> <path d="M12,24C5.4,24,0,18.6,0,12h2c0,5.5,4.5,10,10,10s10-4.5,10-10S17.5,2,12,2C8.4,2,5.1,3.9,3.3,7H8v2H0V1h2v4.4 C4.2,2.1,8,0,12,0c6.6,0,12,5.4,12,12S18.6,24,12,24z M15.3,17.8L11,13.4V6h2v6.6l3.7,3.8L15.3,17.8z"></path> </g> </g> </g></svg>`]

  ]

  for(let i = 0; i < arr.length; i++){
    const div = document.createElement('div')
    const btn = document.createElement('button')
    btn.type = 'button'
    btn.ariaExpanded ='false'
    btn.classList.add(arr[i][0])
    btn.classList.add('head-btns-style')
    btn.innerHTML = arr[i][1]
    buttonsContainer.appendChild(div)
    div.appendChild(btn)
  }

  createSettingsTooltip()

  // help btn tooltip
  const tip = tippy(document.querySelector('.help-btn'), {
    // default
    trigger: 'click',
    content: `<h4>The app has two modes - <Strong><span style="color: #3fb950">Basic</span></Strong> and <Strong><span style="color: #33b3af">Advance</span></Strong>:</h4>
    <ul class="tooltip-main-ul">
    <li>Settings for each are separate except for <Strong><span style="color: #d1242f">Pass Length</span></Strong> which is shared!</li>
    <li>Click on <Strong><span style="color: #6e40c9">Pass Window</span></Strong> to copy the generated password to clipboard</li>
    <li>
      <ul class="tooltip-bottom-ul"><Strong><span style="color: #33b3af">Advance</span></Strong> mode is a constructor that uses 5 elements to create a password:
    <li>&bull; <Strong><span style="color: #f778ba">0-9</span></Strong> adds a number</li>
    <li>&bull; <Strong><span style="color: #f778ba">A-Z</span></Strong> adds an uppercase English letter</li>
    <li>&bull; <Strong><span style="color: #f778ba">a-z</span></Strong> adds a lowercase English letter</li>
    <li>&bull; <Strong><span style="color: #f778ba">#^$</span></Strong> adds a special symbol</li>
    <li>&bull; <Strong><span style="color: #f778ba">Word</span></Strong> adds a random English word</li>
        </ul>
      </li>
      <li>Elements can be both added and removed</li>
      <li>Element length can be customized</li>
    </ul>`,
    placement: 'bottom-start',
    allowHTML: true,
    maxWidth: 350,
  });
}


 // settings btn tooltip
 function createSettingsTooltip(){
  const settingToolTip = document.createElement('div')
  settingToolTip.classList.add('setting-tooltip')
  settingToolTip.classList.add('setting-tooltip-off')
  const settingBtn = document.querySelector('.settings-btn')
  settingToolTip.innerHTML = `
  <div class="settings-tooltip-container">
    <h4>Customize your symbols!</h4>
    <div class="settings-content-container">
        <div class="setting-list">
          <span class="notranslate setting-symbol">!@#$%^&*</span>
          </div>
      <div>
      <input class="settings-input" type="text" value="" maxlength="20" placeholder="Type any symbol! (max: 20)" name="sign-number">
        <div class="setting-btn-container">
          <button type="button" class="settings-btn-style settings-ok">Save&Exit</button>
          <button type="button" class="settings-btn-style settings-reset">Reset</button>
          </div>
      </div>
    </div>
  </div>
  `
  document.querySelector('.head').appendChild(settingToolTip)

  const saveSymbolsBtn = document.querySelector('.settings-ok')
  const resetSymbolsBtn = document.querySelector('.settings-reset')
  const settingsInput = document.querySelector('.settings-input')
  const settingWindowTxt = document.querySelector('.setting-symbol')

  settingBtn.addEventListener('click', () => {
    settingToolTip.style.animationDuration = '0.2s'
    settingToolTip.classList.toggle('setting-tooltip-off')
    settingToolTip.classList.toggle('setting-tooltip-on')
  })

  saveSymbolsBtn.addEventListener('click', () => {
    if(settingsInput.value.length < 1){
      settingToolTip.classList.toggle('setting-tooltip-off')
      settingToolTip.classList.toggle('setting-tooltip-on')
      return
    }
    settingWindowTxt.innerText = settingsInput.value
    settingToolTip.classList.toggle('setting-tooltip-off')
    settingToolTip.classList.toggle('setting-tooltip-on')
  })

  resetSymbolsBtn.addEventListener('click', () => {
    settingsInput.value = ''
    settingWindowTxt.innerText = '!@#$%^&*'
  })
}


// show / hide history
  function showHistory(){
    const historyBtn = document.querySelector('.history-btn')
    historyBtn.addEventListener('click', () => {
      const historyContainer = document.querySelector('.history-container')
      passWindow.classList.toggle('history-on')
      historyContainer.classList.toggle('history-visible')
    })
  }


// hardcode presets
function presetsMap(){
  let obj = {}
  let optionBasicMap = new Map()
  .set('Default', [18, true, true, true, false])
  .set('Easy', [4, true, false, true, false])
  .set('Medium', [12, false, true, true, false])
  .set('Strong', [20, true, true, true, true])

  let optionAdvanceMap = new Map()
  .set('Pattern1', [[18, false, false, false, false], ['Word', 'Special', 'Word', 'Digit'], [1, 1, 1, 2]])
  .set('Pattern2', [[20, false, false, false, false], ['Digit', 'Lower', 'Digit', 'Upper', 'Digit', 'Lower', 'Lower', 'Upper', 'Word'], [1, 1, 1, 1, 1, 1, 1, 1, 1]])
  .set('Pattern3', [[20, false, false, false, false], ['Digit', 'Special', 'Digit', 'Special', 'Digit', 'Special', 'Digit'], [4, 1, 4, 1, 4, 1, 4]])
  
  obj.basic = optionBasicMap
  obj.advance = optionAdvanceMap

  return obj
}

// load default preset
 function loadDefaultPreset(){
    let map = presetsMap().basic.get('Default');
    presetConstuctor(map, checkBoxInputs, passLength)
    
  }
  
loadDefaultPreset()




// Advance mode logic
advanceBtn.addEventListener('click', () => {
  if(isAdvance.checked){
    isAdvance.checked = false
    // do...
    advanceModeContainer.style.display = 'none'
    basicModeContainer.style.display = 'block'
    sliders.forEach(el => {
      el.ariaDisabled = 'false'
    })
    advanceBtn.classList.remove('advance-now')
    return
  }
  // hide basic mode
  basicModeContainer.style.display = 'none'
  // show advance settings  
  advanceModeContainer.style.display = 'flex'
  sliders.forEach(el => {
    el.ariaDisabled = 'true'
  })
  advanceBtn.classList.add('advance-now')
  // enable advance mode
  isAdvance.checked = true
})

// create default structure
function createDraggbleEffect(){
  // List with handle
  new Sortable(ul, {
    animation: 150,
    ghostClass: 'green-background-class'
  });
}

createDraggbleEffect()

function createPassUl(num, arr, value){
  const shorts = ['0-9', 'A-Z', 'a-z', '#^$', 'Word']
  for(let i = 0; i < num; i++){
    ul.innerHTML += `<li class="list-group-item">
        <span class="elem-name" value="${arr[i]}" >${arr[i]}</span>
        <input type="number" name="number" 
            min="1" max="20" value="${value[i]}" step="1" placeholder="" class="how-num">
    <span class=svg-icon>
    <svg viewBox="-4.56 -4.56 33.12 33.12" xmlns="http://www.w3.org/2000/svg" fill="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path fill="none" d="M0 0h24v24H0z"></path> <path fill-rule="nonzero" d="M16 13l6.964 4.062-2.973.85 2.125 3.681-1.732 1-2.125-3.68-2.223 2.15L16 13zm-2-7h2v2h5a1 1 0 0 1 1 1v4h-2v-3H10v10h4v2H9a1 1 0 0 1-1-1v-5H6v-2h2V9a1 1 0 0 1 1-1h5V6zM4 14v2H2v-2h2zm0-4v2H2v-2h2zm0-4v2H2V6h2zm0-4v2H2V2h2zm4 0v2H6V2h2zm4 0v2h-2V2h2zm4 0v2h-2V2h2z"></path> </g> </g></svg>
</span>
    <button type="button" class="style-close-btn close-cross">╳</button>
</li>`
    chooseContainer.innerHTML += `<button class="adv-style-btn add-pass-elem" id="choose-btn-${i}" type="button" value="${arrayOfSymbolNames()[i]}">${shorts[i]}</button>`
  }
}

createPassUl(5, arrayOfSymbolNames(), [1, 1, 1, 1, 1])


// Add elem onClick
function createPassElemOnClick(arr, value){
  const passElem = document.querySelectorAll('.add-pass-elem')
  passElem.forEach(elem => {
    elem.addEventListener('click', (e) => {
      const li = document.createElement('li')
      const spanElem = document.createElement('span')
      const spanTwo = document.createElement('span')
      const numInput = document.createElement('input')
      const closeBtn = document.createElement('button')
      li.classList.add('list-group-item')
      spanElem.classList.add('elem-name')
      numInput.classList.add('how-num')
      spanTwo.classList.add('svg-icon')
      closeBtn.classList.add('style-close-btn')
      closeBtn.classList.add('close-cross')
      // fix google translate issue
      if(e.target.parentElement.parentElement.classList.contains('adv-style-btn')){
        spanElem.innerText = `${arr[[...passElem].findIndex(el => el.value === e.target.parentElement.parentElement.value)]}`
        spanElem.setAttribute('value', `${arr[[...passElem].findIndex(el => el.value === e.target.parentElement.parentElement.value)]}`)
      } else {
        spanElem.innerText = `${arr[[...passElem].findIndex(el => el.value === e.target.value)]}`
        spanElem.setAttribute('value', `${arr[[...passElem].findIndex(el => el.value === e.target.value)]}`)
      }     
      spanTwo.innerHTML = `<svg viewBox="-4.56 -4.56 33.12 33.12" xmlns="http://www.w3.org/2000/svg" fill="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path fill="none" d="M0 0h24v24H0z"></path> <path fill-rule="nonzero" d="M16 13l6.964 4.062-2.973.85 2.125 3.681-1.732 1-2.125-3.68-2.223 2.15L16 13zm-2-7h2v2h5a1 1 0 0 1 1 1v4h-2v-3H10v10h4v2H9a1 1 0 0 1-1-1v-5H6v-2h2V9a1 1 0 0 1 1-1h5V6zM4 14v2H2v-2h2zm0-4v2H2v-2h2zm0-4v2H2V6h2zm0-4v2H2V2h2zm4 0v2H6V2h2zm4 0v2h-2V2h2zm4 0v2h-2V2h2z"></path> </g> </g></svg>`
      numInput.type = 'number'
      numInput.name = 'number'
      numInput.min = '1'
      numInput.max = '20'
      numInput.value = `${value}`
      numInput.step = '1'
      closeBtn.innerText = '╳'
      ul.appendChild(li)
      li.appendChild(spanElem)
      spanElem.after(numInput)
      numInput.after(spanTwo)
      spanTwo.after(closeBtn)

    deleteElemeOnCrossClick()
    saveInputValues()
    })
  })
}

// Delete Elem onCrossClick
function deleteElemeOnCrossClick(){
  const crosses = document.querySelectorAll('.close-cross')
  crosses.forEach(cross => {
    cross.addEventListener('click', (e) => {
      return e.target.parentElement.classList.contains('list-group-item')
      ? e.target.parentElement.remove()
      : e.target.parentElement.parentElement.parentElement.remove()
    })
  })
}

createPassElemOnClick(arrayOfSymbolNames(), 1)
deleteElemeOnCrossClick()

function saveInputValues(){
  const advanceInputValues = document.querySelectorAll('.how-num')
  advanceInputValues.forEach(input => {
    input.addEventListener('input', (e) => {
      input.value = e.target.value >= 20 ? 20 : e.target.value
    })
  })
}

saveInputValues()


function generatePassWord() {
  const boxesState = [...checkBoxInputs].map(el => el.checked);
  const settingsInput = document.querySelector('.settings-input')
  // optimization
  if(boxesState.every(el => el !== true) && !isAdvance.checked){
    passReveal.innerText = 'Empty ;(';
    return
  }
  const maxLength = 20;
  let passValue = passLength.value > maxLength ? maxLength : Math.floor(passLength.value)
  let arr = [];
  let checkboxArr = [];
    
  if(isAdvance.checked){
    const names = document.querySelectorAll('.elem-name')
    // optimization
    if(names.length < 1){
      passReveal.innerText = 'Empty :('
      return 
    }
    const inputs = document.querySelectorAll('.how-num')
    
    let advanceArr = []
    for(let i = 0; i < names.length; i++){
      advanceArr.push([`${names[i].getAttribute('value')}`, inputs[i].value > maxLength ? maxLength : inputs[i].value])
    }
    // make array short as possible
    let count = 0;
    for(let j = 0; j < advanceArr.length; j++){
      if(count >= maxLength){
        advanceArr = advanceArr.slice(0, j)
        break
      }
      count += +advanceArr[j][1]
    }
    //
    for(let k = 0; k < advanceArr.length; k++){
      for(let p = 0; p < advanceArr[k][1]; p++){
        arr.push(randomWord(symbols(settingsInput.value).get(advanceArr[k][0])))
      }
    }

      let generatedString = arr.join``;
      createHistoryElem(generatedString)
      passReveal.innerText = `${generatedString.slice(0, passValue)}`;
      return
    }
    // special
    let specialChars = settingsInput.value || '!@#$%^&*'
    specialChars = specialChars.split('').map(el => el.charCodeAt(0))
    let randNumbers = 0
    let randUpperChar = 0
    let randLowerChar = 0
    let randomSpecialChar = 0
    
for (let i = 0; i < `${passValue}`; i++){
    randNumbers = randomChar(48, 57)
    randUpperChar = randomChar(65, 90)
    randLowerChar = randomChar(97, 122)
    randomSpecialChar = randomWord(specialChars)

  checkboxArr = [randNumbers, randUpperChar, randLowerChar, randomSpecialChar];

  for(let k = 0; k < checkboxArr.length; k++){
    if(boxesState[k]){
      arr.push(checkboxArr[k]);
    }

  }

    // Swap elements in Array
    // arr.sort(() => Math.random() - 0.5);
    
    // Swap elements in Array v2
    for (let i = arr.length - 1; i > 0; i--) {
        let j = Math.floor(Math.random() * (i + 1)); // random index from 0 to i
    
        // swap elements array[i] and array[j]
        // we use "destructuring assignment" syntax to achieve that
        [arr[i], arr[j]] = [arr[j], arr[i]];
      }
}



let uniArray = arr.map(elem => String.fromCharCode(elem));
uniArray.length = passValue;
let generatedString = uniArray.join("");

createHistoryElem(generatedString)
passReveal.innerText = `${generatedString}`

}

// create history elements
function createHistoryElem(string){
  const li = document.createElement('li')
  li.classList.add('history-li')
  li.innerText = string
  document.querySelector('.history-ul').prepend(li)
  document.querySelector('.history-li').addEventListener('click', (e) => {
    passReveal.innerText = e.target.innerText
  })
}

// Copy Pass Into Clipboard

passWindow.addEventListener('click', addToClipBoard);

// copy clip on keyboard clicks
passWindow.addEventListener('keydown', (e) => {
  if(e.code === 'Enter' || e.code === 'NumpadEnter' || e.code === 'Space'){
    e.preventDefault()
    addToClipBoard()
  }
})

async function addToClipBoard(e){
    try {
      await  navigator.clipboard.writeText(passReveal.innerText);
      console.log(("Copied -> " + passReveal.innerText));
    } catch (err) {
        console.error('Failed to copy: ', err);
    }
    
}

function addCopyTooltip(){
 const tooltip = tippy(passWindow, {
    // default
    trigger: 'keydown click',
    content: 'Copied to clipboard',
    theme: 'light',
    arrow: false,
    onShow(instance) {
      setTimeout(() => {
        instance.hide();
      }, 200);
    }
  });
}

addCopyTooltip()