initial: client

client/src/features/auth-oauth/__tests__/OAuthButtons.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { OAuthButtons } from '../ui/OAuthButtons'
+
+describe('OAuthButtons', () => {
+  it('renders Yandex and VK buttons', () => {
+    render(<OAuthButtons />)
+    expect(screen.getByText('Войти через Яндекс ID')).toBeDefined()
+    expect(screen.getByText('Войти через VK ID')).toBeDefined()
+  })
+
+  it('buttons have correct href', () => {
+    render(<OAuthButtons />)
+    const yaBtn = screen.getByText('Войти через Яндекс ID').closest('a')
+    const vkBtn = screen.getByText('Войти через VK ID').closest('a')
+    expect(yaBtn?.getAttribute('href')).toContain('/auth/oauth/yandex')
+    expect(vkBtn?.getAttribute('href')).toContain('/auth/oauth/vk')
+  })
+})

client/src/features/auth-oauth/index.ts

@@ -0,0 +1 @@
+export { OAuthButtons } from './ui/OAuthButtons'

client/src/features/auth-oauth/lib/oauth-providers.ts

@@ -0,0 +1,24 @@
+import { oauthAuthorizeUrl } from '@/shared/lib/oauth-authorize-url'
+
+export type OAuthProvider = {
+  id: 'yandex' | 'vk'
+  label: string
+  color: string
+}
+
+export const oauthProviders: OAuthProvider[] = [
+  {
+    id: 'yandex',
+    label: 'Яндекс ID',
+    color: '#FC3F1D',
+  },
+  {
+    id: 'vk',
+    label: 'VK ID',
+    color: '#0077FF',
+  },
+]
+
+export function getOAuthUrl(provider: 'yandex' | 'vk'): string {
+  return oauthAuthorizeUrl(provider)
+}

client/src/features/auth-oauth/ui/OAuthButtons.tsx

@@ -0,0 +1,28 @@
+import Button from '@mui/material/Button'
+import Stack from '@mui/material/Stack'
+import { getOAuthUrl, oauthProviders } from '../lib/oauth-providers'
+
+export function OAuthButtons() {
+  return (
+    <Stack direction="row" spacing={1} sx={{ justifyContent: 'center' }}>
+      {oauthProviders.map((p) => (
+        <Button
+          key={p.id}
+          variant="outlined"
+          href={getOAuthUrl(p.id)}
+          sx={{
+            borderColor: p.color,
+            color: p.color,
+            '&:hover': {
+              borderColor: p.color,
+              bgcolor: `${p.color}14`,
+              borderWidth: '1px',
+            },
+          }}
+        >
+          Войти через {p.label}
+        </Button>
+      ))}
+    </Stack>
+  )
+}