diff options
| -rw-r--r-- | src/app/profile/[username]/page.tsx | 7 | ||||
| -rw-r--r-- | src/components/settings/AccountButton.tsx | 17 | ||||
| -rw-r--r-- | src/components/settings/SecurityPage.tsx | 111 | ||||
| -rw-r--r-- | src/lib/contexts/Auth.context.tsx | 16 |
4 files changed, 88 insertions, 63 deletions
diff --git a/src/app/profile/[username]/page.tsx b/src/app/profile/[username]/page.tsx index cad11bb..ea13b36 100644 --- a/src/app/profile/[username]/page.tsx +++ b/src/app/profile/[username]/page.tsx @@ -1,11 +1,10 @@ -import Image from 'next/image'; -import { Button } from '@/components/ui'; +import AccountButton from '@/components/settings/AccountButton'; import { getUserByUsername } from '@/lib/api/user'; import { User } from '@/lib/contexts/Auth.context'; + interface ProfilePageProps { params: Promise<{ username: string }>; } - export default async function Profile({ params }: ProfilePageProps) { const { username } = await params; @@ -76,7 +75,7 @@ export default async function Profile({ params }: ProfilePageProps) { </div> </div> <div className="flex flex-row space-between flex-start gap-1.25 w-full h-[42px]"></div> - <Button>Управление аккаунтом</Button> + <AccountButton /> </div> </> ); diff --git a/src/components/settings/AccountButton.tsx b/src/components/settings/AccountButton.tsx new file mode 100644 index 0000000..ecd0eb4 --- /dev/null +++ b/src/components/settings/AccountButton.tsx @@ -0,0 +1,17 @@ +'use client'; + +import Link from 'next/link'; +import { Button } from '@/components/ui'; +import { useUser } from '@/lib/contexts/Auth.context'; + +export default function AccountButton() { + const user = useUser(); + + if (!user) return null; + + return ( + <Button> + <Link href="/settings">Управление аккаунтом</Link> + </Button> + ); +} diff --git a/src/components/settings/SecurityPage.tsx b/src/components/settings/SecurityPage.tsx index 6d4ab75..2135696 100644 --- a/src/components/settings/SecurityPage.tsx +++ b/src/components/settings/SecurityPage.tsx @@ -1,37 +1,43 @@ import { InputField } from '@/components/ui/inputfield'; import { Button } from '@/components/ui'; import { Separator } from '@/components/ui'; +import { useAuthContext } from '@/lib/contexts/Auth.context'; + export default function SecurityPage() { + const { user } = useAuthContext(); + + if (!user) return; + + const hasGoogle = !!user.google_id; + const hasPassword = !!user.password; + return ( <> <div className="flex flex-col flex-start gap-[40px] w-[900px] h-[816px]"> <div className="flex flex-col gap-[20px] w-[900px] "> - <div className="flex flex-col flex-start gap-[20px] w-[310px] h-[241px]"> - <p className="text-light-violet font-medium"> - ЗАДАТЬ ПАРОЛЬ - </p> - <div className="flex flex-col flex-start gap-[10px] w-[310px] h-[137px]"> - <InputField - placeholder="Почта аккаунта" - type="password" - name="password" - /> - <InputField - isPassword - placeholder="Введите пароль" - type="password" - name="password" - /> - <InputField - isPassword - placeholder="Повторите пароль" - type="password" - name="password" - /> + {hasGoogle && ( + <div className="flex flex-col flex-start gap-[20px] w-[310px] h-[241px]"> + <p className="text-light-violet font-medium"> + ЗАДАТЬ ПАРОЛЬ + </p> + <div className="flex flex-col flex-start gap-[10px] w-[310px] h-[137px]"> + <InputField + placeholder="Введите пароль" + type="password" + name="password" + /> + <InputField + isPassword + placeholder="Повторите пароль" + type="password" + name="repeat_password" + /> + </div> + <Button>Сменить</Button> + <Separator className="bg-violet/30 h-[1px]" /> </div> - <Button>Сменить</Button> - </div> - <Separator className="bg-violet/30 h-[1px]" /> + )} + <div className="flex flex-col flex-start gap-[20px] w-[310px] h-[192px]"> <p className="text-light-violet font-medium"> СМЕНА ПОЧТЫ @@ -52,34 +58,35 @@ export default function SecurityPage() { <Button>Сменить</Button> </div> <Separator className="bg-violet/30 h-[1px]" /> - <div className="flex flex-col flex-start gap-[20px] w-[310px] "> - <p className="text-light-violet font-medium"> - СМЕНА ПАРОЛЯ - </p> - <div className="flex flex-col flex-start gap-[10px] w-[310px]"> - <InputField - placeholder="Текущий пароль" - isPassword - type="password" - name="password" - /> - <InputField - isPassword - placeholder="Введите пароль" - type="password" - name="password" - /> - <InputField - isPassword - placeholder="Повторите пароль" - type="password" - name="password" - /> + {hasPassword && ( + <div className="flex flex-col flex-start gap-[20px] w-[310px] "> + <p className="text-light-violet font-medium"> + СМЕНА ПАРОЛЯ + </p> + <div className="flex flex-col flex-start gap-[10px] w-[310px]"> + <InputField + placeholder="Текущий пароль" + isPassword + type="password" + name="password" + /> + <InputField + isPassword + placeholder="Введите пароль" + type="password" + name="password" + /> + <InputField + isPassword + placeholder="Повторите пароль" + type="password" + name="password" + /> + </div> + <Button>Сменить</Button> + <Separator className="bg-violet/30 h-[1px]" /> </div> - <Button>Сменить</Button> - </div> - <Separator className="bg-violet/30 h-[1px]" /> - + )} <Button className="w-[310px]">Выйти из аккаунта</Button> </div> </div> diff --git a/src/lib/contexts/Auth.context.tsx b/src/lib/contexts/Auth.context.tsx index 4e567ba..127c942 100644 --- a/src/lib/contexts/Auth.context.tsx +++ b/src/lib/contexts/Auth.context.tsx @@ -5,7 +5,8 @@ export type User = { id: number; username: string; email: string; - password?: string; + password: boolean; + google_id?: string | null; avatar?: string; banner_file?: string; description?: string; @@ -49,18 +50,19 @@ export const AuthContextProvider = ({ children }: React.PropsWithChildren) => { useEffect(() => { const fetchUser = async () => { - const hasCookies = document.cookie.includes('access_token'); - if (!hasCookies) return; - try { const res = await fetch(`${API_URL}/api/me`, { credentials: 'include', }); - if (!res.ok) return; - const userData = await res.json(); - setUser(userData); + if (!res.ok) { + setUser(null); + return; + } + const data = await res.json(); + setUser(data.authenticated ? data.user : null); } catch (err) { console.error('Error fetching user:', err); + setUser(null); } }; |