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

Пользовательский стиль входа/регистрации для Amplify Vue и Cognito

Первоначально опубликовано на Medium, февраль 2019 г.: Брайс Ховитсон

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

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

Так что я закатал рукава и начал бить. Я рад сообщить, что я, наконец, преодолел настройки Amplify Vue по умолчанию, ну, в основном.



По умолчанию слева и моя настроенная версия справа. Судя по всему, Amplify все еще борется с моим существующим CSS приложения даже до того, как я приступлю к настройкам.

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

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

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

Что нельзя изменить: Порядок полей формы, текст метки, текст заполнителя, сообщения проверки или ошибки, поскольку они являются частью отображаемого HTML.

Примечание: Часть этого решения применима конкретно к AWS-Amplify-Vue, но части стиля должны работать для React, Angular и т. д.


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

Основная проблема, когда дело доходит до изменения макета, — это селекторы CSS. Пакет Amplify Vue содержит модульный CSS из Webpack. Это означает, что классы/идентификаторы выглядят примерно так: class="form __input__ xFAr73" Каждый раз, когда библиотека перекомпилируется с помощью Webpack, строка в конце класса меняется. Так что писать CSS для переопределения этих классов — плохая идея, потому что они могут неожиданно измениться. Модули CSS заставляют имена классов быть очень конкретными (намерение состоит в том, чтобы включить CSS от конфликтов с CSS вашего приложения), но это также затрудняет переопределение стиля, который поставляется предварительно созданным с помощью Amplify.

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

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

Действия по настройке потока аутентификации Cognito в Amplify Vue

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

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

  • Чтобы убедиться, что у меня есть все, я в основном скопировал весь код компонента из /node-modules/aws-amplify-vue/src/components/authenticator/Authenticator.vue в мой новый компонент
  • Вам нужно будет изменить импорт, чтобы ссылаться на пакетimport { components, AmplifyEventBus, AmplifyPlugin } from ‘aws-amplify-vue’;
  • Теперь вы можете добавить дополнительный контент внутри шаблона, чтобы показывать его на КАЖДОМ экране входа в систему или использовать v-если для отображения контента, если отображаются определенные компоненты. Например, если вы хотите, чтобы что-то отображалось только на экране входа, вы можете сделать это: <h2 v-if="displayMap.showSignIn">Please Login</h2>
  • Не забудьте обновить Router до вашего нового компонента.

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

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

  • я дал первый div внутри template идентификатор «auth»
  • Поскольку мы можем захотеть изменить стили в зависимости от экрана, я также добавил логику для изменения класса в зависимости от того, какой контент отображается. Обратите внимание, что это зависит от карты Amplify так же, как отображение компонентов.
<div id="auth" v-bind:class="[
displayMap.showSignIn ? 'signIn' : '',
displayMap.showSignUp ? 'signUp' : '',
displayMap.showConfirmSignUp ? 'confirmAccount' : '',
displayMap.showConfirmSignIn ? 'confirmSignIn' : '',
displayMap.showForgotPassword ? 'forgot' : '',
displayMap.requireNewPassword ? 'newPass' : '',
displayMap.showMfa ? 'showMfa' : ''
]">

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

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

Сначала я пытался css all:initial на всем, но это оказалось довольно ядерным вариантом. Такие вещи, как 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 для нацеливания префиксов в именах классов, чтобы избежать изменений при обновлении Amplify и запуске Webpack. Я открыл веб-инспектор, чтобы посмотреть, что мне нужно стилизовать.

Обратите внимание, как грязно все это. Я смог стилизовать большую часть своего приложения, используя лишь несколько селекторов и :nth-child() Ваш пробег может отличаться. Больше всего я хотел изменить Form __formField___ 2DWht дел. Я изо всех сил пытался найти лучший способ ссылаться на эти элементы, не беспокоясь об их изменении. Наконец-то я вспомнил, что в CSS можно использовать селекторы соответствия шаблону, поэтому я сослался на приведенное выше так: [class^=”Form__formField”] {attribute: value} Это называется «Сопоставление подстрок» ​​и оказалось очень полезным в данном случае. Вот хорошее объяснение того, как они работают.

Вывод

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


Днем я продуктовый стратег консультирование по всем цифровым вопросам и Мастер спринта по дизайну. Ночью я Гугл Эксперт, наставник стартапов и пишет книгу о том, как начать работу с UX. Подпишись на меня в Твиттере @ховитсон.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *