auth

Форма авторизации

Необходимо реализовать компонент формы авторизации:

Описание компонента

Необходимо реализовать компонент AuthForm который имеет следующие атрибуты:

• onAuth — обработчик события авторизации, функция.

Компонент должен реализовать форму следующего вида:

<form class="ModalForm" action="/404/auth/" method="POST">
  <div class="Input">
    <input required type="text" placeholder="Имя">
    <label></label>
  </div>
  <div class="Input">
    <input type="email" placeholder="Электронная почта">
    <label></label>
  </div>
  <div class="Input">
    <input required type="password" placeholder="Пароль">
    <label></label>
  </div>
  <button type="submit">
    <span>Войти</span>
    <i class="fa fa-fw fa-chevron-right"></i>
  </button>
</form>

Форма не должна отправляться на сервер ни одним из возможных способов (клик по кнопке «Войти» или нажатие клавиши Enter в одном из полей ввода). При отправке формы необходимо вызвать обработчик события onAuth, если он передан в атрибуты и является функцией. В него следует передать первым аргументом объект пользователя имеющий следующие свойства:

• name — имя пользователя,
• email — электронная почта,
• password — пароль.

Необходимо запретить ввод (поля ввода должны просто игнорировать эти символы):

• в поле «Электронная почта» любых символов кроме латинских букв, цифр, символов @, ., _ и -;
• в поле «Пароль» любых символов кроме латинских букв, цифр и символа _.

Реализация

Необходимо реализовать компонет AuthForm.

Локально с использованием git

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

В песочнице CodePen

Реализуйте компонент во вкладке JS(Babel). Перед началом работы сделайте форк этого пена:

https://codepen.io/dfitiskin/pen/EXLONV