[SOK-22] User profile page

packages/client/src/app/App.tsx

@@ -1,11 +1,10 @@
 // import { useEffect } from 'react'
 
-import '@/app/App.scss'
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
-import RootLayout from '@/layouts/root-layout'
-import PrivateLayout from '@/layouts/private-layout'
-import AuthLayout from '@/layouts/auth-layout'
-import PublicLayout from '@/layouts/public-layout'
+import RootLayout from '@/layouts/RootLayout/RootLayout'
+import PrivateLayout from '@/layouts/PrivateLayout/PrivateLayout'
+import AuthLayout from '@/layouts/AuthLayout/AuthLayout'
+import PublicLayout from '@/layouts/PublicLayout/PublicLayout'
 import { Main } from '@/pages/Main/Main'
 import { SignIn } from '@/pages/SignIn/SignIn'
 import { SignUp } from '@/pages/SignUp/SignUp'
@@ -15,7 +14,6 @@ import { Error } from '@/pages/Error/Error'
 import { Thread } from '@/pages/Thread/Thread'
 import { Leaderboard } from '@/pages/Leaderboard/Leaderboard'
 import { Profile } from '@/pages/Profile/Profile'
-import { ProfileEdit } from '@/pages/Profile/Edit'
 import { ChangePassword } from '@/pages/Profile/ChangePassword'
 
 const routerConfig = createBrowserRouter([
@@ -55,10 +53,6 @@ const routerConfig = createBrowserRouter([
             path: '/profile',
             element: <Profile />,
           },
-          {
-            path: '/profile/edit',
-            element: <ProfileEdit />,
-          },
           {
             path: '/profile/change-password',
             element: <ChangePassword />,

packages/client/src/components/ui/Avatar/Avatar.tsx

@@ -0,0 +1,72 @@
+import React, { useState, useRef, useEffect } from 'react'
+import { Image } from '@/components/ui/Image/Image'
+import { Button } from '@/components/ui/Button/Button'
+
+export const AVATAR_SRC = 'https://ya-praktikum.tech/api/v2/resources'
+
+export const Avatar = (props: {
+  src: string
+  containerClassName?: string
+  imageClassName?: string
+  onAvatarChange: (file: File) => void
+}) => {
+  const { src, containerClassName, imageClassName, onAvatarChange } = props
+  const [isHovered, setIsHovered] = useState(false)
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    return () => {
+      if (previewUrl) {
+        URL.revokeObjectURL(previewUrl)
+      }
+    }
+  }, [previewUrl])
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (file) {
+      const fileUrl = URL.createObjectURL(file)
+      setPreviewUrl(fileUrl)
+      onAvatarChange(file)
+    }
+  }
+
+  const handleButtonClick = () => {
+    fileInputRef.current?.click()
+  }
+
+  const displaySrc = previewUrl || src
+
+  return (
+    <div
+      className={`${containerClassName}`}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}>
+      {displaySrc ? (
+        <Image src={displaySrc} className={imageClassName} alt="Avatar" />
+      ) : (
+        <div className="avatar-placeholder">
+          {/* Здесь можно добавить иконку или текст для placeholder */}
+        </div>
+      )}
+      {isHovered && (
+        <div className="overlay">
+          <Button
+            text="Изменить аватар"
+            className="change-button"
+            useFixWidth={false}
+            onClick={handleButtonClick}
+          />
+        </div>
+      )}
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/*"
+        onChange={handleFileChange}
+        style={{ display: 'none' }}
+      />
+    </div>
+  )
+}

packages/client/src/components/ui/Button/Button.scss

@@ -47,3 +47,23 @@
     text-shadow: $main-text-shadow;
   }
 }
+
+.link-button {
+  background: none;
+  border: none;
+  font-size: $nav_link-font-size;
+  font-weight: $nav_link-font-weight;
+  letter-spacing: 1px;
+
+  text-shadow: $main-text-shadow;
+  text-transform: uppercase;
+  text-decoration: none;
+
+  color: $text-color;
+  transition: color $animation-base-speed;
+
+  &:hover,
+  &_active {
+    color: $primary-color;
+  }
+}

packages/client/src/components/ui/Button/Button.tsx

@@ -1,13 +1,19 @@
 import { Link } from 'react-router-dom'
 import './Button.scss'
+import React from 'react'
 
 export const Button = (props: {
   text: string
   className?: string | undefined
   useFixWidth?: boolean | undefined
   href?: string | undefined
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  onClick?: (() => Promise<void>) | (() => any) | undefined
+  onClick?:
+    | ((
+        event:
+          | React.MouseEvent<HTMLButtonElement>
+          | React.FormEvent<HTMLFormElement>
+      ) => void)
+    | (() => Promise<void>)
 }) => {
   const { text, className, useFixWidth = false, href = '/', onClick } = props
   return (

packages/client/src/components/ui/Form/Form.tsx

@@ -0,0 +1,17 @@
+import './Form.scss'
+import React from 'react'
+
+interface FormProps {
+  className?: string
+  children?: React.ReactNode
+  onSubmit?: () => void
+}
+
+export const Form = (props: FormProps) => {
+  const { onSubmit, className, children } = props
+  return (
+    <form onSubmit={onSubmit} className={`form ${className}`}>
+      {children}
+    </form>
+  )
+}

packages/client/src/components/ui/Image/Image.tsx

@@ -0,0 +1,10 @@
+interface ImageProps {
+  src: string
+  className?: string
+  alt?: string
+}
+
+export const Image = (props: ImageProps) => {
+  const { src, className, alt } = props
+  return <img {...props} />
+}

packages/client/src/components/ui/Input/Input.scss

@@ -0,0 +1,17 @@
+@import '../../../scss/vars';
+
+.input-default {
+  width: 301px;
+  height: 48px;
+  border-radius: 12px;
+  border: 2px solid $c_input-default-border;
+  text-align: center;
+  background-color: $c_default-background;
+  color: $c_font-default;
+
+  &:focus-visible,
+  &:hover {
+    outline: none;
+    border-color: $c_input-default-border-hover;
+  }
+}

packages/client/src/components/ui/Input/Input.tsx

@@ -0,0 +1,27 @@
+import './Input.scss'
+import React, { ChangeEventHandler, CSSProperties } from 'react'
+
+interface InputProps {
+  placeholder?: string
+  name?: string
+  className?: string
+  disabled?: boolean
+  value?: string
+  type?: string
+  onChange?: ChangeEventHandler | undefined
+  style?: CSSProperties | undefined
+}
+
+export const Input = (props: InputProps) => {
+  const { value, className, disabled, onChange, style } = props
+  return (
+    <input
+      value={value}
+      className={className}
+      disabled={disabled}
+      onChange={onChange}
+      style={style}
+      {...props}
+    />
+  )
+}

packages/client/src/pages/Profile/ChangePassword.tsx

@@ -1,3 +1,151 @@
+import './Profile.scss'
+import React from 'react'
+import { Image } from '@/components/ui/Image/Image'
+import ProfileSidebarImg from '@/assets/images/profile-sidebar.png'
+import ProfileRightSideImg from '@/assets/images/tank-dead.png'
+import { Form } from '@/components/ui/Form/Form'
+import { Input } from '@/components/ui/Input/Input'
+import { useState } from 'react'
+import { Button } from '@/components/ui/Button/Button'
+import { useNavigate } from 'react-router-dom'
+import { changeUserPassword } from '@/store/reducers/user-reducer'
+import { useAppDispatch } from '@/store'
+import { Header } from '@/components/common/Header/Header'
+import { CustomPageTitle } from '@/components/ui/CustomPageTitle/CustomPageTitle'
+
 export const ChangePassword = () => {
-  return <>Смена пароля</>
+  const dispatch = useAppDispatch()
+  const [showSaveMessage, setShowSaveMessage] = useState(false)
+  const [userData, setUserData] = useState({
+    old_password: '',
+    new_password: '',
+    new_password_confirm: '',
+  })
+  const [error, setError] = useState<string | null>(null)
+  const navigate = useNavigate()
+
+  const handleInputChange =
+    (field: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
+      setUserData(prevData => ({
+        ...prevData,
+        [field]: event.target.value,
+      }))
+    }
+
+  // TODO: перенести в компонент валдиации (добаваленно сюда времено)
+  const validatePassword = () => {
+    if (userData.new_password !== userData.new_password_confirm) {
+      setError('Пароли не совпадают')
+      return false
+    }
+    return true
+  }
+
+  const saveData = async (
+    event:
+      | React.FormEvent<HTMLFormElement>
+      | React.MouseEvent<HTMLButtonElement>
+  ) => {
+    event.preventDefault()
+    setError(null)
+    if (!validatePassword()) {
+      return
+    }
+
+    try {
+      await dispatch(
+        changeUserPassword({
+          oldPassword: userData.old_password,
+          newPassword: userData.new_password,
+        })
+      )
+
+      setShowSaveMessage(true)
+      setUserData({
+        old_password: '',
+        new_password: '',
+        new_password_confirm: '',
+      })
+
+      navigate('/profile', {
+        state: { successMessage: 'Пароль успешно изменен!' },
+      })
+    } catch (err) {
+      console.log(err)
+      setError('Ошибка при смене пароля')
+    }
+  }
+
+  return (
+    <div className={'profile-page-layout'}>
+      <Header className={'profile-page-layout__header'} />
+      <main className={'profile-page-layout__profile-page'}>
+        <div className={'profile-page-layout__profile-page__sidebar'}>
+          <Image
+            src={ProfileSidebarImg}
+            className={'profile-page-layout__profile-page__sidebar__image'}
+            alt={'Profile Sidebar'}
+          />
+        </div>
+        <div className="profile-page-layout__profile-page__profile-container">
+          <CustomPageTitle
+            className={
+              'profile-page-layout__profile-page__profile-container__title'
+            }
+            text={'Личный кабинет'}
+          />
+          <Form
+            className={
+              'profile-page-layout__profile-page__profile-container__profile-form__change-password'
+            }>
+            <Input
+              className={'input-default old_password'}
+              name={'oldPassword'}
+              type={'password'}
+              placeholder={'Текущий пароль'}
+              onChange={handleInputChange('old_password')}
+            />
+            <Input
+              className={'input-default new_password'}
+              name={'newPassword'}
+              type={'password'}
+              placeholder={'Новый пароль'}
+              onChange={handleInputChange('new_password')}
+            />
+            <Input
+              className={'input-default new_password_confirm'}
+              name={'new_password_confirm'}
+              type={'password'}
+              placeholder={'Подтвердите пароль'}
+              onChange={handleInputChange('new_password_confirm')}
+            />
+            {error && (
+              <div
+                className={
+                  'profile-page-layout__profile-page__profile-container__error-message'
+                }>
+                {error}
+              </div>
+            )}
+            <Button
+              text={'Сохранить'}
+              className={'save'}
+              useFixWidth={true}
+              onClick={saveData}
+            />
+          </Form>
+          <Button
+            text={'Назад'}
+            className={'link-button back'}
+            href={'/profile'}
+          />
+        </div>
+        <Image
+          src={ProfileRightSideImg}
+          className={'profile-page-layout__tank-dead'}
+          alt={'Profile Right Side'}
+        />
+      </main>
+    </div>
+  )
 }