Менеджер паролей

Всем привет!
В этой посте я расскажу про свое решение для управления паролями в компании. Это решение не претендует на то, чтобы считаться очень безопасным и конкурировать со специализированными решениями. Но тем не менее оно будет безопаснее общих наклеек на мониторе, пересылке паролей в мессенджерах и размещению их в публичных гугл документах. Приложение представляет собой приложение elma365, для хранения паролей и предоставления прав к записям различным сотрудникам.
Давайте сначала посмотрим как выглядит страница просмотра и редактирования записи пароля:




Приложение это иерархическое и позволяет разбивать пароли по папкам. На карточке приложения пароль скрыт, но есть кнопка отображения пароля (иконка глаза на карточке). Так же есть функция копирования логина и пароля в буфер обмена, чтобы удобно вставлять учетные записи в приложения. Так же присутствуют примечания и прикрепление файлов для дополнительной информации. В приложении включено управление правами на уровне отдельных записей, поэтому правами на каждый пароль можно будет управлять индивидуально. В режиме редактирование стоит отметить встроенный генератор паролей, позволяющий создавать случайные пароли с настраиваемой сложностью (с помощью предустановленных групп символов). По умолчанию, настроена генерация паролей средней сложности, которые легко вводить с клавиатуры. Пароль можно сразу вставить в поле пароля.
Приложение будет полезно как единый инструмент управления паролями всей организации, чтобы каждый сотрудник не выдумывал свои способы где хранить свои пароли, а так же будет служить готовым решением, как передать сотруднику учетные данные.

Рассмотрим интересные виджеты примененные в данном решении.

Кнопка копирования в буфер обмена
Реализовано в отдельном виджете, входящем в данное решение и которое можно переиспользовать. В компоненте добавлены 2 входных переменных в контекст: это подпись к иконке копирования, а так же копируемая строка. Копируемую строку необходимо при использовании виджета кнопки копирования необходимо связать с полем из которого необходимо скопировать строку в буфер обмена.
Сама кнопка копирования реализована при помощи виджета Код и имеет следующий код:

Спойлер: Код кнопки копирования в буфер обмена

HTML:

<button type="button" title="" class="btn btn-link" onclick="
  const el = document.createElement('textarea');
  el.value = '<%- Context.data.copied_string %>';
  el.setAttribute('readonly', '');
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
  ">
  <i class="elma-icons"> system_file_sel </i>
  <!----> <%- Context.data.button_title %>
</button>

Кнопка показать пароль
Данная кнопка отвечает за скрытие/показ (замены звездочками) строки пароля. Это стандартная кнопка, которая вызывает сценарий на TypeScript, который меняет html стиль у поля хранящего пароль и имеет следующий код:

Спойлер: Сценарий кнопки показать/скрыть пароль

Код:

async function show_password(): Promise<void> {
    const hide_password_style = "-webkit-text-security: disc;";
    if (ViewContext.data.password_html_style!.includes(hide_password_style))
    {
        ViewContext.data.password_html_style = ViewContext.data.password_html_style!.replace(hide_password_style,'');
    } else {
         ViewContext.data.password_html_style =  ViewContext.data.password_html_style + hide_password_style;
    }
}

Генерация пароля
Данный компонент работает как всплывающее окно, в котором содержатся настройки для генерации пароля. Это решение так же реализовано как отдельный виджет и может быть переиспользовано. Все настройки по умолчанию для генерации пароля, можно настроить на самой форме, на которой размещается виджет. Для того чтобы работала вставка пароля необходимо будет настроить связь с полем пароля, который будет использоваться на форме. Код генерации пароля не такой интересный поэтому не буду его тут выкладывать, но его можно будет посмотреть если установить себе данное решение.

Скачать данное решение можно по ссылке.

Благодарю за внимание! Это пока первая версия решения, и я планирую его еще развивать и выложить в ELMA365 Store. Поэтому жду в комментариях вашей критики и предложений, чего бы вы хотели видеть в данном решении. Если конечно вообще для вас эта тема актуальна.