Перейти к содержанию

Авторизация и онбординг (12 экранов)

/ — Landing

Назначение: Публичная страница продукта.

Компоновка:
  ├── Шапка: Логотип | Ссылки (Возможности, Тарифы, О нас) | [Войти] [Попробовать]
  ├── Hero-секция: заголовок, подзаголовок, CTA «Попробовать бесплатно»
  ├── Блок возможностей (3-4 карточки)
  ├── Тарифы (3 колонки)
  └── Footer

Редирект: если активная сессия → /home

/auth/signin — Sign In

Назначение: Вход в систему.

Компоновка (центрированная карточка):
  ├── Логотип
  ├── Заголовок: «Вход в Fairflow»
  ├── Поля:
  │   ├── Email (input, валидация формата)
  │   └── Пароль (input, toggle видимости)
  ├── Ссылка: «Забыли пароль?» → /auth/forgot-password
  ├── Кнопка: [Войти]
  └── Ссылка: «Нет аккаунта? Зарегистрироваться» → /auth/signup

Ошибки:
  ├── «Неверный email или пароль» (не раскрывать что именно)
  └── После 5 неудачных попыток: таймаут 5 минут

После успешного входа:
  ├── Если 2FA включен → /auth/2fa
  └── Если нет → /home (или последний активный проект)

/auth/signup — Sign Up

Назначение: Регистрация нового аккаунта.

Компоновка (центрированная карточка):
  ├── Логотип
  ├── Заголовок: «Регистрация»
  ├── Поля:
  │   ├── Имя (input)
  │   ├── Фамилия (input)
  │   ├── Email (input, валидация)
  │   ├── Пароль (input, индикатор сложности)
  │   └── Подтверждение пароля (input)
  ├── Чекбокс: «Согласен с условиями»
  ├── Переключатель: ○ Физлицо  ○ Организация
  │   (если «Организация» → после верификации email → /auth/signup/organization)
  ├── Кнопка: [Зарегистрироваться]
  └── Ссылка: «Уже есть аккаунт? Войти» → /auth/signin

После отправки:
  → Экран «Проверьте почту. Мы отправили ссылку для подтверждения.»

/auth/signup/organization — Org Setup

Назначение: Шаг 2 регистрации юрлица — ввод реквизитов организации.

Компоновка (центрированная карточка, шаг 2 из 2):
  ├── Прогресс: ●● Шаг 2 — Данные организации
  ├── Поля:
  │   ├── Название организации (input)
  │   ├── ИНН (input, валидация длины)
  │   ├── Юридический адрес (textarea)
  │   └── Телефон организации (input, маска)
  ├── Кнопка: [Создать организацию]
  └── Ссылка: «Пропустить, заполню позже»

После успеха: → /onboarding/profile

/auth/forgot-password — Forgot Password

Назначение: Запрос ссылки для сброса пароля.

Компоновка (центрированная карточка):
  ├── Заголовок: «Восстановление пароля»
  ├── Описание: «Введите email, мы отправим ссылку для сброса»
  ├── Поле: Email (input)
  ├── Кнопка: [Отправить ссылку]
  └── Ссылка: «Вспомнил пароль. Войти» → /auth/signin

После отправки: «Ссылка отправлена на ваш email» (показываем даже если email не найден — безопасность)

/auth/reset-password/:token — Reset Password

Назначение: Установка нового пароля по ссылке из email.

Компоновка (центрированная карточка):
  ├── Заголовок: «Новый пароль»
  ├── Поля:
  │   ├── Новый пароль (input, индикатор сложности)
  │   └── Подтверждение пароля (input)
  ├── Кнопка: [Сохранить пароль]
  └── Ошибка: «Ссылка истекла» → кнопка «Запросить новую»

/auth/verify-email/:token — Verify Email

Назначение: Подтверждение email по ссылке.

Компоновка (центрированная карточка):
  ├── Иконка: ✓
  ├── Заголовок: «Email подтверждён!»
  ├── Кнопка: [Продолжить] → /onboarding/profile
  └── Ошибка: «Ссылка недействительна» → «Запросить повторно»

/auth/2fa — Two-Factor Auth

Назначение: Ввод одноразового кода после логина.

Компоновка (центрированная карточка):
  ├── Заголовок: «Двухфакторная аутентификация»
  ├── Описание: «Введите код из приложения»
  ├── Поле: 6-значный код (input, автофокус, авто-submit при 6 цифрах)
  ├── Ссылка: «Использовать резервный код»
  └── Кнопка: [Подтвердить]

/auth/invite/:token — Accept Invitation

Назначение: Принятие приглашения в организацию/проект.

Компоновка (центрированная карточка):
  ├── Заголовок: «Вас пригласили в [Название организации]»
  ├── Приглашающий: имя, аватар
  │
  ├── Если нет аккаунта:
  │   ├── Поля: Имя, Фамилия, Пароль (email предзаполнен, read-only)
  │   └── Кнопка: [Принять приглашение и зарегистрироваться]
  │
  ├── Если аккаунт есть, но не залогинен:
  │   ├── Поля: Пароль
  │   └── Кнопка: [Войти и принять]
  │
  └── Если залогинен:
      ├── «Вы приглашены в организацию [X]. Присоединиться?»
      ├── Примечание: «Ваши личные проекты сохранятся.»
      └── Кнопка: [Присоединиться]

Ошибки: «Приглашение истекло» | «Приглашение уже использовано»

/onboarding/profile — Profile Setup

Назначение: Заполнение профиля после регистрации.

Компоновка (центрированная карточка, прогресс-бар):
  ├── Прогресс: ● ○ ○ (шаг 1 из 2-3)
  ├── Заголовок: «Расскажите о себе»
  ├── Поля:
  │   ├── Аватар (загрузка фото, drag & drop)
  │   ├── Должность (input, опционально)
  │   ├── Телефон (input, маска, опционально)
  │   ├── Часовой пояс (dropdown, авто-определение)
  │   └── Язык (dropdown: Русский / English)
  ├── Кнопка: [Продолжить]
  └── Ссылка: «Пропустить»

/onboarding/first-project — First Project

Назначение: Создание первого проекта (после самостоятельной регистрации).

Компоновка (центрированная, прогресс-бар):
  ├── Прогресс: ● ● ○ (шаг 2)
  ├── Заголовок: «Создайте первый проект»
  ├── Шаблоны (5 карточек-плиток):
  │   ├── Продажи B2B (рекомендован, выделен)
  │   ├── Колл-центр
  │   ├── Автосалон
  │   ├── Доставка
  │   └── По умолчанию
  │   Каждая плитка: иконка, название, краткое описание, список модулей
  ├── Поле: Название проекта (input, предзаполнено по шаблону)
  └── Кнопка: [Создать проект]

/onboarding/invite-team — Invite Team

Назначение: Приглашение сотрудников (только при создании организации).

Компоновка (центрированная, прогресс-бар):
  ├── Прогресс: ● ● ● (шаг 3)
  ├── Заголовок: «Пригласите команду»
  ├── Описание: «Добавьте email коллег. Они получат приглашение.»
  ├── Список email'ов:
  │   ├── Строка: [email input] [роль dropdown: Member ▼] [✕]
  │   ├── Строка: [email input] [роль dropdown] [✕]
  │   └── Ссылка: «+ Добавить ещё»
  ├── Кнопка: [Отправить приглашения]
  └── Ссылка: «Пропустить, приглашу позже»

Лимит: по тарифу организации.