Pull to refresh

AXURE: делаем форму авторизации с проверкой

Доброго времени суток. Хочу показать пример реализации формы авторизации с простой проверкой в Axure RP.

Обычная ситуация: пользователь вводит логин и пароль, попадает в личный кабинет. Если оставляет поля пустые или вводит неверные данные – выводим ему сообщение об ошибке. Решается все очень просто с помощью виджета Dynamic Panel image

А теперь к делу.


Шаг 1. Подготовка
Для начала делаем две страницы: страница с формой авторизации и собственно страница личного кабинета.
Далее берем из библиотеки виджет динамической панели. Даем ей название: например, «login_panel». Также добавляем еще одно состояние для нашей панели. Можно их назвать для удобства «st1» и «st2». В первом состоянии у нас будет обычная форма регистрации, во втором – форма с выводом ошибки. Скрин для наглядности:

image

Шаг 2. Строим форму
1. Открываем для редактирования первое состояние панели «St1». В нем создаем необходимую нам форму. Берем два поля ввода, для одного из них (для поля с паролем) можем поставим свойство «mask text» (все по настоящему).
2. Для полей ввода желательно обозначить лейблы (Label) «login» и «password» – поможет потом нам их проще идентифицировать при расстановке условий.
Примерно это выглядит вот так:

image

Шаг 3. Форма с ошибкой
Переходим в редактирование состояния панели «st2». Здесь мы будем выводить форму с нужным нам сообщением. Для этого достаточно скопировать и вставить сюда созданную нами форму в Шаге №2 и добавить сообщение. Важно также, чтобы лейблы полей отличались от тех, которые у нас в Шаге №2. Должно выглядит примерно где-то вооот так:

image

Шаг 4. Действия
Теперь самое интересное. Нам нужно, чтобы пользователь вводя логин: admin и пароль: 123456, зашел в личный кабинет. Заходим в первое состояние формы «st1». Для кнопки «Ввойти» применяем следующие условия и действия:

если текст в поле login равен значению admin (как видите, Акшур сам генерирует сообщение: if text on widget Login equals «admin»)

и текст в поле password равен значению 123456 (and text on widget Password equals «123456»),

image

ПЕРЕХОДИМ на страницу «Личный кабинет» (Open Личный кабинет (/personal) in Current Window).

! Не забудьте продублировать условия и действия с первого состояния «st1» панели во второй «st2» (а проще тупо скопировать кнопку «Ввойти» в форму состояния «st2», но отредактировав при этом лейблы)

image

Шаг 5. Показываем форму с ошибкой
Хорошо. Но если пользователь просто нажал кнопку «Ввойти»?! Похожие действия с предыдущим шагом, только значения оставляем незаполненными: если текст в поле login равен значению «» (акшур сам генерирует сообщение: if text on widget Login equals "") и текст в поле password равен значению «» (and text on widget Password equals "")

image

ПОКАЗЫВАЕМ второе состояние нашей панели «st2»:

image

Генерируем прототип, смотрим.

Пример прототипа можно посмотреть здесь, файл Aкшура скачать здесь
Tags:
Hubs:
You can’t comment this publication because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author’s username will be hidden by an alias.