js-login

Учебный проект по написанию авторизации и регистрации на JavaScript

Результат можно просмотреть здесь https://prostovix.info/xxx/js-login/

Для авторизации можно нажать на кнопку "Correct data", а затем на кнопку "Submit". При удачном входе будет показано зеленое сообщение, при ошибке красное. После авторизации придет информация в виде объекта, который можно посмотреть в консоли. Часть из этой информации выводится внизу страницы в разделе Новости. А именно автор, страна, дата и картинка.

На второй вкладке есть форма регистрации. После заполнения всех полей новый пользователь будет добавлен. Для подтверждения регистрации на указанный почтовый ящик придет ссылка для подтверждения. После регистрации появляется возможность входить в данную систему по своим данным.

Используемые технологии: HTML, CSS, Bootstrap 4, JavaScript, Webpack, API.

На обучении

Во время обучения была создана форма регистрации, реализовано выведение сообщения в случае успешной регистрации или при неверно введенных данных. При успешном входе в аккаунт получаются токены, а так же приходит объект с небольшим массивом данных. Реализовано выведение этих данных в консоль. Так же создана валидация формы авторизации.

Домашнее задание - выполнено

Реализовать регистрацию. Метод запроса: POST. Роут для запроса: /auth/signup

Пример передаваемых данных (ключи в объекте обязательно должны быть такими же как в примере):

    email: "email",
    password: "password",
    nickname: "nickname",
    first_name: "FName",
    last_name: "LName",
    phone: "0XXXXXXX",
    gender_orientation: "male", // or "female"
    city: "Lviv",
    country: "Ukrane",
    date_of_birth_day: 14,
    date_of_birth_month: 08,
    date_of_birth_year: 1964,

В ответе от сервера прейдет:

    {
    	error: false, 
    	message: "User created success. On your email sended link. Please verify your email."
    }

Для регистрации используйте обязательно настоящий email так как вам туда придет ссылка для активации аккаунта. Форму с регистрацией разместите на странице логина в виде табов т.е форма логина отдельный таб, форма регистрации отдельный таб.

Реализовать autocomplete в форме регистрации в полях countries и cities

Метод запроса: GET, Роут для запроса: /location/get-countries

Вам прийдет массив стран, при выборе страны берете индекс из массива на котором была страна и делаете GET запрос на адрес location/get-cities/{COUNTRY_INDEX}. Вместо COUNTRY_INDEX подставляете свой ранее полученный индекс страны индекс. В ответ вам прейдет список городов по этой стране, который вы должны вывести в селект. Изначально поля для ввода города должно быть disabled.

Добавлено от себя

Измен внешний вид всего сайта по авторизации и регистрации, а так же сделана адаптация под мобильные и планшеты.

Реализован вывод части информации внизу страницы после того, как пользователь вошел в свой аккаунт.

Как запускать?

npm i установка пакетов

npm run dev режим разработки