Регистрация

Backend

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

{
    "email": "<email>",
    "username": "<username>",
    "password": "<password>"
}

на эндпоинт /auth/users/. В качестве ответа мы получаем либо refresh- и access-токены, либо сообщение о некорректно введённых полях. Пример исключения:

{
    "password": [
        "The password is too common."
    ]
}

Frontend

Логика получения токенов как результат соответствующего запроса реализована в stores/auth.store.js: сервис получает access и refresh токены, хранит их локально и прикрепляет access-токен к запросам.

Интерфейс реализован с помощью фреймворка Vue.js и библиотеки vuetify. Ниже приведена структура компонента регистрации RegisterComponent.vue

Скрипт:

1. Импорты:
2. ref из Vue.js для реактивности.
3. fetchWrapper для HTTP-запросов.

4. useAuthStore для управления состоянием аутентификации.

5. Переменные:

6. email, username, password, confirmPassword для хранения данных формы.

7. valid для валидации формы.

8. Правила Валидации:

9. emailRules, usernameRules, passwordRules, confirmPasswordRules для валидации данных формы.

10. Функция submit:

11. Отправляет запрос на регистрацию и обрабатывает ответ.

Разметка:

• Использует Vuetify компоненты (v-container, v-row, v-col, v-card и др.) для создания формы регистрации.
• Включает текстовые поля для ввода данных пользователя.
• Кнопки для отправки формы и перехода на страницу входа.

Логика Работы:

1. Ввод данных: Пользователь вводит данные в поля формы.
2. Валидация: Автоматическая проверка корректности данных.
3. Отправка данных: По нажатию кнопки "Register", данные отправляются на сервер.
4. Обработка ответа: В случае успешной регистрации, происходит вход пользователя в систему.

Стилизация компонента выполняется с использованием Vuetify и локальных стилей (раздел <style scoped>).

Пример работы

Если прощёлкать поля, пользователь увидит следующее:

Пример валидации данных:

Пример валидации пароля на сервере:

Если же с данными всё хорошо, происходит регистрация нового пользователя (ниже — скрин из админ-панели Django):