Реализация проекта по форме регистрации и авторизации.

Реализация проекта по форме регистрации и авторизации.

В рамках данного проекта были выполнены все задачи по ТЗ.

ТЗ проекта:

Этот проект представляет из себя две страницы: регистрации и логина. Вам предстоит добавить сюда страницу для залогиненного пользователя.

1 страница: Регистрация

Вам нужно изменить код валидации формы следующим образом:

1. Все поля должны быть заполнены
2. Full Name может содержать только буквы и пробел
3. Your username - может содержать только буквы, цифры, символ подчеркивания и тире
4. Реализовать проверку введенного E-mail на корректность
5. Поле пароля должно содержать минимум 8 символов, среди которых есть:

• хотя бы одна буква в верхнем регистре
• хотя бы одна цифра
• хотя бы один спецсимвол

1. Password и Repeat Password должны совпадать
2. Пользователь должен согласиться с условиями

Если какое-то поле не прошло валидацию, рамка поля становится красной, а под полем появляется текст, поясняющий ошибку. К примеру, «Заполните поле E-mail» или «Full Name может содержать только буквы и пробел». Для проверок используйте регулярные выражения.

После того, как пользователь зарегистрировался, нужно сделать два действия:

1. Показать модальное окно с текстом «На вашу почту выслана ссылка, перейдите по ней, чтобы завершить регистрацию» и кнопкой «ОК».
2. Записать данные о пользователе в объект, а этот объект, в свою очередь, записать в массив clients, который будет храниться в Local Storage. Внимание! Local Storage должен хранить данные обо всех зарегистрированных пользователях в виде объектов в массиве clients. То есть когда на сайте регистрируется второй пользователь, данные о первом не должны удаляться.

2 страница: Страница входа

При нажатии на ссылку «Already have an account?» или на кнопку «ОК» в модальном окне происходит то же самое, что и было ранее - переход на страницу логина. Ссылку «Already have an account?» нужно заменить на ней текст на «Registration» и заменить слушатель на этой кнопке. Слушатель на кнопке «Sign In» также нужно будет заменить на другой.

1. При нажатии на ссылку «Registration» страница должна просто перезагружаться (таким образом будет имитироваться переход на страницу регистрации, потому что при первой загрузке страницы мы попадаем на страницу регистрации).
2. При нажатии на кнопку «Sign In» нужно проверять, заполнены ли поля Username и Password. Если какое-то поле не заполнено - выводим под ним ошибку и делаем рамку поля красной. Если оба поля заполнены, то нужно брать значения из полей Username и Password и проверять, есть ли пользователь с таким логином в массиве clients в Local Storage. Если пользователь не найден, то рамка поля логина становится красной и под полем выводится текст «Такой пользователь не зарегистрирован». Если пользователь найден, но пароль не совпадает - то красным подчеркивается поле пароля, и под полем появляется ошибка «Неверный пароль». Если пользователь найден в массиве clients и его пароль введен верно - то нужно имитировать переход в личный кабинет.

3 страница: Личный кабинет

Чтобы имитировать переход в личный кабинет, нужно:

1. Текст заголовка необходимо заменить на «Welcome, name!», где name - это имя залогиненного пользователя.Внимание: имя - это не username, а то, что пользователь вводил в full name!
2. Текст на кнопке «Sign In» заменить на «Exit» и заменить слушатель на этой кнопке: теперь она должна просто перезагружать страницу, чтобы имитировать выход на страницу регистрации.
3. Все остальные элементы (текст под заголовком, поля Username и Password, ссылку "Registration") нужно удалить