Как мне удалось настроить AWS усилить экраны входа

Индивидуальный вход/регистрация входа в систему для усиления Vue & Cognito

Первоначально опубликовано на среднем FEB 2019: Брайс Хахинсон

Я дизайнер интерфейса, который делает много CSS и какой-то JavaScript для приложений i Design. Я борюсь (прочитал, разбиваю голову против стены), чтобы настроить визуальный стиль/макет AWS усиливает VUE Поток аутентификации Cognito в течение нескольких месяцев по нескольким проектам.

Теперь я полностью понимаю, почему сообщество развития любит усиливать, так как он принимает взаимодействие с AWS SDK намного проще. Усилитель также производит что-то доступное с интерфейсом, который работает довольно хорошо из коробки. К сожалению, как дизайнер, я нахожу утомляю по умолчанию, не говоря уже о том, что он даже не удаленно соответствует брендам, для которых я создаю приложения.

Поэтому я закатал свои рукава и начал пробивать. Я рад сообщить, что я, наконец, побил усилитель Vue по умолчанию в подачу, хорошо в основном.

По умолчанию слева и моя настроенная версия справа. По-видимому, амплификация все еще борется с моим существующим приложением CSS даже до того, как я приму на заказ.

Где я приземлился:

Это не идеальное решение, но я оцениваю около 80% успеха в моей способности изменить предварительно запеченный интерфейс амплификации, чтобы соответствовать моим дизайнам.

Что можно изменить: Цвета, макет и любой контент, который обернутся по полям входа/регистрации. В основном, что вы можете сделать с CSS и контейнерами.

Что нельзя изменить: Форма полевого порядка, текст этикетки, текст заполнителя, проверка или сообщения об ошибках, как они являются частью оказанного HTML.

Примечание: Некоторые из этого решения применимы к AWS-Amblefify-Vue, особенно в том, что участки стилей должны работать на реакцию, угловые и т. Д.

Проблемы, которые я столкнулся

Основная проблема, когда дело доходит до модификации макета, – это селекторы CSS. Усиление VUE пакет содержит модульные CSS из веб-папака. Это означает, что классы/IDS выглядят что-то подобное: Класс = "Форма __input__ xfar73" Каждый раз, когда библиотека перекомпилируется с помощью WebPack, строка в конце классовых изменений. Таким образом, это плохое представление о том, чтобы написать CSS, чтобы переопределить эти классы, потому что они могут неожиданно меняться. Модули CSS принудительные имена классов, чтобы быть высокоэффективными (намерение состоит в том, чтобы сохранить CSS от борьбы с вашим приложением CSS), но это также усложнее переопределить стиль, который приходит предварительно сделано с усилением.

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

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

Шаги, чтобы настроить расход аутентификации AMPLIFE VUE COGNITO

1. Создайте новый компонент

Создайте новый вид/компонент, чтобы содержать усилитель компонентов и шина (рендеринг, как Vue Router). Это позволяет пользовательству, как брендинг, чтобы появиться в контексте входа или регистрации.

Чтобы убедиться, что у меня было все, я в основном скопировал весь код компонента из /node-modules/aws-amplify-vue/src/components/authenticator/authenticator.vue в мой новый компонент
Вам нужно будет изменить импорт для ссылки на пакет Импорт {компонентов, усилительEventBus, усилительPlugin} из «AWS-Amblefify-Vue»;
Теперь вы можете добавить дополнительный контент внутри шаблона, чтобы показать каждый экран входа или использовать V-если Чтобы показать содержимое, если определенные компоненты отображаются. Например, если вы хотите что-то показать только на знаке на экране, вы можете сделать это: Пожалуйста, войдите
Не забудьте обновить маршрутизатор к новому компоненту.

2. Улучшите стиль, добавляя идентификаторы и классы к вашему компоненту

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

Я дал первый Div внутри Шаблон Идентификатор “AUTH”
Поскольку мы могли бы захотеть изменить стили на основе экрана, я также добавил логику для изменения класса на основе которого отображается контент. Обратите внимание, как это зависит от карты усиления, так же, как показывает компоненты.

3. Переопределить стиль по умолчанию

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

Сначала я попробовал CSS ALL: Начальный На всем, но оказалось красивым ядерным вариантом. Такие вещи, такие как DIV, не сохраняли состояние уровня блока, и даже мой сброс CSS был переопределен. Итак … Окончательное решение было вручную сбросить большинство атрибутов div и Span, а затем гораздо сложный сброс на вход, кнопку и якорных тегах. Я также решил скрыть какие-либо этикетки, так как я не мог изменить текст на большинстве полей.

div,
span {
   margin: 0;
   padding: 0;
   background: none;
   text-align: left;
   max-width: 100%;
   min-width: 0;
   border-radius: 0;
   box-shadow: none;
}

input,
button,
a {
   all: initial;
   width: auto;
   margin: 0;
   padding: 0;
   cursor: pointer;
}

4. Решите, что изменить

Как только вы знаете, какие элементы называются, используйте сопоставление рисунка в селекторах CSS, чтобы нацелить префиксы в именах классов, что позволяет избежать изменений при усилении обновлений и веб-запада. Я открыл веб-инспектор, чтобы увидеть, что мне нужно было стильно.

Обратите внимание, насколько грязно все эти вещи. Я смог стистить большинство моего приложения только с несколькими избирателями и : Nth-Child () Ваш пробег может варьироваться. Большинство из того, что я хотел изменить, были Форма __fformfield___ 2dwht РАВ. Я боролся с лучшим способом ссылаться на эти элементы, не беспокоясь, если они изменились. Наконец я вспомнил, что вы можете сформировать селекторы сопоставления в CSS, поэтому я ссылался на вышеупомянутое: [Class ^ = "Form__fformfield"] {атрибут: значение} Это называется «сопоставление подстроки» и оказалось супер полезным в этом случае. Вот a Хорошее объяснение о том, как они работают.

Заключение

После того, как у меня была обертка с легкодоступным идентификатором, классы, обозначающие текущий контент и доступ к модулируемым элементам CSS, стиль был довольно прямым. Надеюсь, эта переписка сохраняет кого-то все головную боль, которую я испытал.

Днем я Стратект продукта Консультирование по всем вещам цифровой и дизайн Sprint Master. Ночью я Google Expert , стартап наставник и написание книги о начале работы UX. Следуй за мной в Twitter @howitson Отказ