Реализация проекта по форме регистрации и авторизации.
В рамках данного проекта были выполнены все задачи по ТЗ.
ТЗ проекта:
Этот проект представляет из себя две страницы: регистрации и логина. Вам предстоит добавить сюда страницу для залогиненного пользователя.
1 страница: Регистрация
Вам нужно изменить код валидации формы следующим образом:
- Все поля должны быть заполнены
- Full Name может содержать только буквы и пробел
- Your username - может содержать только буквы, цифры, символ подчеркивания и тире
- Реализовать проверку введенного E-mail на корректность
- Поле пароля должно содержать минимум 8 символов, среди которых есть:
- хотя бы одна буква в верхнем регистре
- хотя бы одна цифра
- хотя бы один спецсимвол
- Password и Repeat Password должны совпадать
- Пользователь должен согласиться с условиями
Если какое-то поле не прошло валидацию, рамка поля становится красной, а под полем появляется текст, поясняющий ошибку. К примеру, «Заполните поле E-mail» или «Full Name может содержать только буквы и пробел». Для проверок используйте регулярные выражения.
После того, как пользователь зарегистрировался, нужно сделать два действия:
- Показать модальное окно с текстом «На вашу почту выслана ссылка, перейдите по ней, чтобы завершить регистрацию» и кнопкой «ОК».
- Записать данные о пользователе в объект, а этот объект, в свою очередь, записать в массив clients, который будет храниться в Local Storage. Внимание! Local Storage должен хранить данные обо всех зарегистрированных пользователях в виде объектов в массиве clients. То есть когда на сайте регистрируется второй пользователь, данные о первом не должны удаляться.
2 страница: Страница входа
При нажатии на ссылку «Already have an account?» или на кнопку «ОК» в модальном окне происходит то же самое, что и было ранее - переход на страницу логина. Ссылку «Already have an account?» нужно заменить на ней текст на «Registration» и заменить слушатель на этой кнопке. Слушатель на кнопке «Sign In» также нужно будет заменить на другой.
- При нажатии на ссылку «Registration» страница должна просто перезагружаться (таким образом будет имитироваться переход на страницу регистрации, потому что при первой загрузке страницы мы попадаем на страницу регистрации).
- При нажатии на кнопку «Sign In» нужно проверять, заполнены ли поля Username и Password. Если какое-то поле не заполнено - выводим под ним ошибку и делаем рамку поля красной. Если оба поля заполнены, то нужно брать значения из полей Username и Password и проверять, есть ли пользователь с таким логином в массиве clients в Local Storage. Если пользователь не найден, то рамка поля логина становится красной и под полем выводится текст «Такой пользователь не зарегистрирован». Если пользователь найден, но пароль не совпадает - то красным подчеркивается поле пароля, и под полем появляется ошибка «Неверный пароль». Если пользователь найден в массиве clients и его пароль введен верно - то нужно имитировать переход в личный кабинет.
3 страница: Личный кабинет
Чтобы имитировать переход в личный кабинет, нужно:
- Текст заголовка необходимо заменить на «Welcome, name!», где name - это имя залогиненного пользователя.Внимание: имя - это не username, а то, что пользователь вводил в full name!
- Текст на кнопке «Sign In» заменить на «Exit» и заменить слушатель на этой кнопке: теперь она должна просто перезагружать страницу, чтобы имитировать выход на страницу регистрации.
- Все остальные элементы (текст под заголовком, поля Username и Password, ссылку "Registration") нужно удалить