From b763690381f171bc89247ae02997f1727a7ec512 Mon Sep 17 00:00:00 2001
From: TeaCoder52
Date: Sat, 5 Apr 2025 12:34:08 +0300
Subject: [PATCH 1/5] feat: update AuthWrapper layout with responsive design
enhancements
---
src/app/layout.tsx | 2 +-
.../account/settings/display-name-form.tsx | 2 +-
src/components/auth/auth-wrapper.tsx | 110 ++++++++++--------
src/components/auth/login-form.tsx | 7 +-
src/components/auth/new-password-form.tsx | 5 +-
src/components/auth/register-form.tsx | 9 +-
src/components/auth/reset-password-form.tsx | 5 +-
src/components/shared/logo.tsx | 14 ++-
8 files changed, 87 insertions(+), 67 deletions(-)
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 5d72954..c9d5ecc 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -69,7 +69,7 @@ export const metadata: Metadata = {
export default function RootLayout({ children }: { children: ReactNode }) {
return (
-
+
diff --git a/src/components/auth/auth-wrapper.tsx b/src/components/auth/auth-wrapper.tsx
index e0c7abe..cc2eda3 100644
--- a/src/components/auth/auth-wrapper.tsx
+++ b/src/components/auth/auth-wrapper.tsx
@@ -1,69 +1,81 @@
import Link from 'next/link'
import type { ReactNode } from 'react'
-import {
- Card,
- CardContent,
- CardDescription,
- CardFooter,
- CardHeader,
- CardTitle
-} from '../ui/card'
-
-interface Props {
+interface AuthWrapperProps {
children: ReactNode
heading: string
description?: string
- backButtonLabel?: string
- backButtonHref?: string
+ bottomText?: string
+ bottomLinkText?: string
+ bottomLinkHref?: string
}
export function AuthWrapper({
children,
heading,
description,
- backButtonLabel,
- backButtonHref
-}: Props) {
+ bottomText,
+ bottomLinkText,
+ bottomLinkHref
+}: AuthWrapperProps) {
return (
-
-
-
-
- {heading}
- {description}
-
-
- {/* {isShowSocial && } */}
- {children}
-
-
- {/* {backButtonLabel && backButtonHref && (
-
- )} */}
-
- Нажимая продолжить, вы соглашаетесь с нашим{' '}
-
- Пользовательским соглашением
- {' '}
- и{' '}
+
+
+
+
+
{heading}
+
+ {description}
+
+
+
{children}
+ {/*
+ Нажимая продолжить, вы соглашаетесь с нашим{' '}
+
+ Пользовательским соглашением
+ {' '}
+ и{' '}
+
+ Политикой Конфиденциальности
+
+ .
+
*/}
+ {bottomText && bottomLinkText && bottomLinkHref && (
+
+ {bottomText}{' '}
- Политикой Конфиденциальности
+ {bottomLinkText}
- .
-
-
+ )}
+
+
+
+
+
+
{' '}
+ {/*
+
+
+
+
*/}
)
diff --git a/src/components/auth/login-form.tsx b/src/components/auth/login-form.tsx
index bfa585c..41eb29d 100644
--- a/src/components/auth/login-form.tsx
+++ b/src/components/auth/login-form.tsx
@@ -97,8 +97,9 @@ export function LoginForm() {
- {/*
+
*/}
+
-
+ */}
)
diff --git a/src/components/auth/auth-social.tsx b/src/components/auth/auth-social.tsx
new file mode 100644
index 0000000..c3d849d
--- /dev/null
+++ b/src/components/auth/auth-social.tsx
@@ -0,0 +1,22 @@
+import { FaGithub, FaGoogle, FaTelegram, FaYandex } from 'react-icons/fa6'
+
+import { Button } from '../ui/button'
+
+export function AuthSocial() {
+ return (
+
+
+
+
+
+
+ )
+}
diff --git a/src/components/auth/auth-wrapper.tsx b/src/components/auth/auth-wrapper.tsx
index cc2eda3..76eb6b5 100644
--- a/src/components/auth/auth-wrapper.tsx
+++ b/src/components/auth/auth-wrapper.tsx
@@ -1,6 +1,8 @@
import Link from 'next/link'
import type { ReactNode } from 'react'
+import { AuthSocial } from './auth-social'
+
interface AuthWrapperProps {
children: ReactNode
heading: string
@@ -8,6 +10,7 @@ interface AuthWrapperProps {
bottomText?: string
bottomLinkText?: string
bottomLinkHref?: string
+ isShowSocial?: boolean
}
export function AuthWrapper({
@@ -16,7 +19,8 @@ export function AuthWrapper({
description,
bottomText,
bottomLinkText,
- bottomLinkHref
+ bottomLinkHref,
+ isShowSocial
}: AuthWrapperProps) {
return (
@@ -24,10 +28,13 @@ export function AuthWrapper({
{heading}
-
- {description}
-
+ {description && (
+
+ {description}
+
+ )}
+ {isShowSocial &&
}
{children}
{/*
Нажимая продолжить, вы соглашаетесь с нашим{' '}
@@ -53,7 +60,7 @@ export function AuthWrapper({
{bottomText}{' '}
{bottomLinkText}
@@ -70,12 +77,7 @@ export function AuthWrapper({
-
{' '}
- {/*
-
-
-
-
*/}
+
)
diff --git a/src/components/auth/login-form.tsx b/src/components/auth/login-form.tsx
index 41eb29d..5156ce4 100644
--- a/src/components/auth/login-form.tsx
+++ b/src/components/auth/login-form.tsx
@@ -100,6 +100,7 @@ export function LoginForm() {
bottomText='Еще нет аккаунта?'
bottomLinkText='Регистрация'
bottomLinkHref='/auth/register'
+ isShowSocial
>
-
+ {data?.github ? (
+
+ ) : (
+
+ )}
-
+ {/*
@@ -63,26 +111,11 @@ export function Integrations() {
-
+
-
-
-
-
-
-
-
-
-
Telegram
-
- Set up a single sign-on with Telegram
- and login with one click.
-
-
-
-
-
-
+ */}
diff --git a/src/components/account/integrations/unlink-provider.tsx b/src/components/account/integrations/unlink-provider.tsx
new file mode 100644
index 0000000..e79fa24
--- /dev/null
+++ b/src/components/account/integrations/unlink-provider.tsx
@@ -0,0 +1,49 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { useState } from 'react'
+import { toast } from 'sonner'
+
+import { ConfirmDialog } from '../../shared/confirm-dialog'
+import { Button } from '../../ui/button'
+
+import { unlinkAccount } from '@/src/api/external'
+
+interface UnlinkProviderProps {
+ provider: 'google' | 'github'
+}
+
+export function UnlinkProvider({ provider }: UnlinkProviderProps) {
+ const [isOpen, setIsOpen] = useState(false)
+
+ const queryClient = useQueryClient()
+
+ const { mutate, isPending } = useMutation({
+ mutationKey: ['unlink account'],
+ mutationFn: () => unlinkAccount(provider),
+ onSuccess() {
+ queryClient.invalidateQueries({
+ queryKey: ['fetch external status']
+ })
+ setIsOpen(false)
+ },
+ onError(error: any) {
+ toast.error(
+ error.response?.data?.message ?? 'Ошибка при отключении'
+ )
+ }
+ })
+
+ return (
+ mutate()}
+ isLoading={isPending}
+ open={isOpen}
+ onOpenChange={setIsOpen}
+ >
+
+
+ )
+}
diff --git a/src/components/auth/auth-social.tsx b/src/components/auth/auth-social.tsx
index c3d849d..d0126d9 100644
--- a/src/components/auth/auth-social.tsx
+++ b/src/components/auth/auth-social.tsx
@@ -1,22 +1,49 @@
-import { FaGithub, FaGoogle, FaTelegram, FaYandex } from 'react-icons/fa6'
+'use client'
+
+import { useMutation } from '@tanstack/react-query'
+import { useRouter } from 'next/navigation'
+import { FaGithub } from 'react-icons/fa6'
+import { FcGoogle } from 'react-icons/fc'
+import { toast } from 'sonner'
import { Button } from '../ui/button'
+import { getAuthUrl } from '@/src/api/external'
+
export function AuthSocial() {
+ const router = useRouter()
+
+ const { mutate, isPending } = useMutation({
+ mutationKey: ['oauth login'],
+ mutationFn: (provider: 'google' | 'github') => getAuthUrl(provider),
+ onSuccess(data) {
+ router.push(data.url)
+ },
+ onError(error: any) {
+ toast.error(
+ error.response?.data?.message ?? 'Ошибка при создании URL'
+ )
+ }
+ })
+
return (
-
-