Тестовое задание для Vue Frontend Developer

Необходимо реализовать форму управления учетными записями.

Время на выполнение задания: максимум 2 дня.

Результатом выполнения работы является ссылка на GitHub/GitLab репозиторий с историей коммитов.

Макет представлен для примера: главное соблюдать ТЗ, структуру и расположение полей, визуальное отображение можно сделать по своему предпочтению.

Стек

1. Vue.js 3 + Composition API (фреймворк)
2. TypeScript (язык)
3. Pinia (стейт-менеджер)
4. Любой UI-фреймворк на выбор

Форма состоит из

1. Заголовка и кнопки добавления учетной записи.
2. Подсказки для поля "Метка".
3. Списка учетных записей с лейблами полей.

Учетная запись состоит из

1. Метка: необязательное поле к заполнению. Максимум 50 символов. В поле вводятся текстовые метки через знак ;.
   • Для указания нескольких меток для одной пары логин/пароль используйте разделитель ;.
2. Тип записи: выпадающий список. Допускаются выборы из заранее предопределенных вариантов:
   • LDAP: при выборе этого типа поле "Пароль" скрывается и сохраняется как null.
   • Локальная: при выборе этого типа поле "Пароль" показывается и сохраняется как введенное значение.
3. Логин: обязательное к заполнению. Максимум 100 символов.
4. Пароль: обязательное к заполнению. Отображается в случае выбора значения "Локальная" в поле "Тип записи". Максимум 100 символов.
5. Кнопки удаления учетной записи.

Логика работы формы

1. По нажатию кнопки "+" в конец списка учетных записей добавляется новая пустая запись, состоящая из: Метки, Типа записи, Логина, Пароля.
2. При нажатии кнопки удаления учетная запись должна полностью удалиться.
3. По окончанию ввода значений в поля учетной записи (для текстовых: потеря фокуса; для селекта: изменение значения) происходит валидация обязательных полей.
   • В случае валидности учетная запись сохраняется/обновляется.
   • В обратном случае поля обозначаются красной обводкой.
4. Все поля сохраняются в текстовом виде, кроме поля "Метка".
   • Оно должно преобразовываться в массив, где один элемент это строковое значение до ;.
   • В массиве должен лежать объект, где поле text равно одному элементу метки: ({ text: элемент метки }).
5. Сохранение учетной записи должно происходить в стейт-менеджер. При обновлении страницы сохраненные учетные записи должны отображаться.