From 75841342c671636fcb1a9a45e9b71342edd172ee Mon Sep 17 00:00:00 2001 From: Kirill Date: Sun, 24 May 2026 12:45:54 +0500 Subject: [PATCH] =?UTF-8?q?=D0=BF=D0=B2=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2026-05-24-synthetic-email-warning.md | 227 ++++++++++++++++++ 1 file changed, 227 insertions(+) create mode 100644 docs/superpowers/plans/2026-05-24-synthetic-email-warning.md diff --git a/docs/superpowers/plans/2026-05-24-synthetic-email-warning.md b/docs/superpowers/plans/2026-05-24-synthetic-email-warning.md new file mode 100644 index 0000000..8c94650 --- /dev/null +++ b/docs/superpowers/plans/2026-05-24-synthetic-email-warning.md @@ -0,0 +1,227 @@ +# Synthetic Email Warning Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Display informational alerts in the personal account when the user's email is synthetic (e.g., `vk_@vk.local`), informing them they cannot receive email notifications. + +**Architecture:** Pure client-side utility checks email against known synthetic domains. Two MUI Alert components conditionally render in AuthMethodsSection and NotificationsPage. + +**Tech Stack:** TypeScript, React, MUI (Alert component), Vitest + +--- + +### Task 1: Create `isSyntheticEmail` utility + +**Files:** +- Create: `client/src/shared/lib/is-synthetic-email.ts` +- Test: `client/src/shared/lib/__tests__/is-synthetic-email.test.ts` + +- [ ] **Step 1: Write the failing test** + +```ts +// client/src/shared/lib/__tests__/is-synthetic-email.test.ts +import { describe, expect, it } from 'vitest' +import { isSyntheticEmail } from '../is-synthetic-email' + +describe('isSyntheticEmail', () => { + it('returns true for vk.local domain', () => { + expect(isSyntheticEmail('vk_12345@vk.local')).toBe(true) + }) + + it('returns false for real email', () => { + expect(isSyntheticEmail('user@gmail.com')).toBe(false) + }) + + it('returns false for yandex email', () => { + expect(isSyntheticEmail('user@yandex.ru')).toBe(false) + }) + + it('returns false for empty string', () => { + expect(isSyntheticEmail('')).toBe(false) + }) + + it('returns false for email with vk.local as part of username', () => { + expect(isSyntheticEmail('vk.local@gmail.com')).toBe(false) + }) +}) +``` + +- [ ] **Step 2: Run test to verify it fails** + +```bash +cd client && npx vitest run src/shared/lib/__tests__/is-synthetic-email.test.ts +``` + +Expected: FAIL with "Cannot find module '../is-synthetic-email'" + +- [ ] **Step 3: Write the implementation** + +```ts +// client/src/shared/lib/is-synthetic-email.ts +const SYNTHETIC_DOMAINS = ['vk.local'] + +export function isSyntheticEmail(email: string): boolean { + return SYNTHETIC_DOMAINS.some((domain) => email.endsWith(`@${domain}`)) +} +``` + +- [ ] **Step 4: Run test to verify it passes** + +```bash +cd client && npx vitest run src/shared/lib/__tests__/is-synthetic-email.test.ts +``` + +Expected: All 5 tests PASS + +- [ ] **Step 5: Commit** + +```bash +cd /mnt/d/my_projects/shop +git add client/src/shared/lib/is-synthetic-email.ts client/src/shared/lib/__tests__/is-synthetic-email.test.ts +git commit -m "feat: add isSyntheticEmail utility for detecting synthetic OAuth emails" +``` + +--- + +### Task 2: Add warning to AuthMethodsSection + +**Files:** +- Modify: `client/src/pages/me/ui/sections/AuthMethodsSection.tsx` + +- [ ] **Step 1: Add import and Alert below email display** + +Add import at line 22 (after existing imports): +```ts +import { isSyntheticEmail } from '@/shared/lib/is-synthetic-email' +``` + +Add Alert block after line 118 (`{user.email}`), before line 120 (`{!verificationUrl && (`): + +```tsx +{isSyntheticEmail(user.email) && ( + + Ваша почта сгенерирована автоматически. Без указания реальной почты вы не сможете получать уведомления о заказах. + +)} +``` + +The full relevant section should look like: +```tsx + + {user.email} + + +{isSyntheticEmail(user.email) && ( + + Ваша почта сгенерирована автоматически. Без указания реальной почты вы не сможете получать уведомления о заказах. + +)} + +{!verificationUrl && ( +``` + +- [ ] **Step 2: Verify lint passes** + +```bash +cd client && npm run lint +``` + +Expected: No errors + +- [ ] **Step 3: Commit** + +```bash +cd /mnt/d/my_projects/shop +git add client/src/pages/me/ui/sections/AuthMethodsSection.tsx +git commit -m "feat: show synthetic email warning in AuthMethodsSection" +``` + +--- + +### Task 3: Add warning to NotificationsPage + +**Files:** +- Modify: `client/src/pages/me/ui/sections/NotificationsPage.tsx` + +- [ ] **Step 1: Add import, user access, and Alert at page top** + +Add import at line 13 (after existing imports): +```ts +import { $user } from '@/shared/model/auth' +import { useUnit } from 'effector-react' +import { isSyntheticEmail } from '@/shared/lib/is-synthetic-email' +``` + +Add user hook inside the component, after `const [error, setError] = useState(null)` (line 28): +```ts +const user = useUnit($user) +``` + +Add Alert block after line 64 (after the subtitle Typography), before line 66 (`{error && (`): + +```tsx +{user && isSyntheticEmail(user.email) && ( + + Ваша почта сгенерирована автоматически. Для получения уведомлений укажите реальную почту в настройках профиля. + +)} +``` + +The full relevant section should look like: +```tsx + + Настройте, какие уведомления вы хотите получать на почту. + + +{user && isSyntheticEmail(user.email) && ( + + Ваша почта сгенерирована автоматически. Для получения уведомлений укажите реальную почту в настройках профиля. + +)} + +{error && ( +``` + +- [ ] **Step 2: Verify lint passes** + +```bash +cd client && npm run lint +``` + +Expected: No errors + +- [ ] **Step 3: Commit** + +```bash +cd /mnt/d/my_projects/shop +git add client/src/pages/me/ui/sections/NotificationsPage.tsx +git commit -m "feat: show synthetic email warning in NotificationsPage" +``` + +--- + +### Task 4: Final verification + +- [ ] **Step 1: Run full client test suite** + +```bash +cd client && npm test +``` + +Expected: All tests PASS + +- [ ] **Step 2: Run lint and format check** + +```bash +cd client && npm run lint && npm run format:check +``` + +Expected: No errors + +- [ ] **Step 3: Run TypeScript check** + +```bash +cd client && npx tsc --noEmit +``` + +Expected: No errors