+ {displaySrc ? (
+
+ )
+}
diff --git a/packages/client/src/components/ui/Button/Button.scss b/packages/client/src/components/ui/Button/Button.scss
index 1e961aa..fbe66e7 100644
--- a/packages/client/src/components/ui/Button/Button.scss
+++ b/packages/client/src/components/ui/Button/Button.scss
@@ -8,6 +8,7 @@
background-color: $c_button;
transition: border-color $animation-base-speed;
+ padding: 16px 12px;
padding: 16px 12px;
display: block;
@@ -47,3 +48,24 @@
text-shadow: $main-text-shadow;
}
}
+
+.link-button {
+ background: none;
+ border-color: transparent;
+ 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 {
+ border-color: transparent;
+ color: $primary-color;
+ }
+}
diff --git a/packages/client/src/components/ui/Button/Button.tsx b/packages/client/src/components/ui/Button/Button.tsx
index 0248857..95457c3 100644
--- a/packages/client/src/components/ui/Button/Button.tsx
+++ b/packages/client/src/components/ui/Button/Button.tsx
@@ -1,10 +1,11 @@
import './Button.scss'
+import React from 'react'
export const Button = (props: {
text: string
className?: string | undefined
useFixWidth?: boolean | undefined
- onClick?: () => void
+ onClick?: (event: React.MouseEvent
+
+
+
+
+ {label && }
+
+
+ )
+}
diff --git a/packages/client/src/layouts/PrivateLayout/PrivateLayout.tsx b/packages/client/src/layouts/PrivateLayout/PrivateLayout.tsx
index 5e9ca52..daad63a 100644
--- a/packages/client/src/layouts/PrivateLayout/PrivateLayout.tsx
+++ b/packages/client/src/layouts/PrivateLayout/PrivateLayout.tsx
@@ -1,10 +1,10 @@
import { Header } from '@/components/common/Header/Header'
-import {Outlet, useNavigate} from 'react-router-dom'
-import {useSelector} from "react-redux";
-import {RootState, useAppDispatch} from "@/store";
-import {actions, getUser, UserType} from "@/store/reducers/auth-reducer";
-import {useEffect} from "react";
-import {toast} from "react-toastify";
+import { Outlet, useNavigate } from 'react-router-dom'
+import { useSelector } from 'react-redux'
+import { RootState, useAppDispatch } from '@/store'
+import { actions, getUser, UserType } from '@/store/reducers/auth-reducer'
+import { useEffect } from 'react'
+import { toast } from 'react-toastify'
export default function PrivateLayout() {
const user = useSelectorЗагрузка...
:
+
+ )
}
diff --git a/packages/client/src/pages/Profile/Edit.tsx b/packages/client/src/pages/Profile/Edit.tsx
deleted file mode 100644
index bc808e9..0000000
--- a/packages/client/src/pages/Profile/Edit.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export const ProfileEdit = () => {
- return <>Редактирование профиля пользователя
-}
diff --git a/packages/client/src/pages/Profile/Profile.scss b/packages/client/src/pages/Profile/Profile.scss
new file mode 100644
index 0000000..842d7fd
--- /dev/null
+++ b/packages/client/src/pages/Profile/Profile.scss
@@ -0,0 +1,187 @@
+@import '../../scss/vars';
+
+@mixin notification-message (
+ $color: $c_font-success-message,
+ $font-size: 16px,
+ $line-height: 19px,
+ $font-weight: 500,
+ $text-align: center,
+ $margin-top: 10px
+) {
+ color: $color;
+ font-size: $font-size;
+ line-height: $line-height;
+ font-weight: $font-weight;
+ text-align: $text-align;
+ margin-top: $margin-top;
+}
+
+.profile-page {
+ background-image: $img_profile_background_right;
+ background-repeat: no-repeat;
+ background-position: left bottom;
+ background-size: contain;
+ display: flex;
+
+ &__profile-container {
+ background-image: $img_profile_background_left;
+ background-repeat: no-repeat;
+ background-position: right bottom;
+ position: relative;
+ z-index: 2;
+ flex: 1;
+ margin-left: 35%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 100vh;
+ box-sizing: border-box;
+
+ &__title {
+ margin-bottom: 48px;
+ }
+
+ &__profile-avatar {
+ margin: 0 auto 48px;
+ }
+
+ &__success-message {
+ @include notification-message();
+ }
+
+ &__error-message {
+ @include notification-message($color: $c_font-error-message);
+ }
+
+ &__profile-form {
+ display: flex;
+ flex-direction: column;
+ width: 90%;
+ max-width: 400px;
+ margin: 0 auto 48px;
+
+ .form-group {
+ display: flex;
+ align-items: baseline;
+ justify-content: flex-start;
+ margin-bottom: 16px;
+ overflow: hidden;
+
+ label {
+ flex: 0 0 auto;
+ color: $c_input-default-label;
+ white-space: nowrap;
+ font-size: 20px;
+ }
+
+ .dotted-line {
+ flex: 1;
+ height: 1px;
+ border-bottom: 1px dotted $c_font-default;
+ margin: 0 10px;
+ min-width: 20px;
+ }
+
+ .input-wrapper {
+ flex: 0 0 auto;
+ display: flex;
+ justify-content: flex-end;
+ max-width: 65%;
+ }
+
+ .dynamic-input {
+ background: transparent;
+ border: none;
+ color: $c_font-default;
+ padding: 0;
+ text-align: right;
+ transition: width 0.3s ease;
+ font-size: 20px;
+ border-radius: 0;
+ font-weight: 600;
+ }
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ &__edit-button, &__save-button {
+ margin-bottom: 16px;
+ font-size: 16px;
+ }
+
+ &__change-password {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 48px;
+ width: 301px;
+
+ .input-wrapper {
+ margin-bottom: 16px;
+ width: 100%;
+
+ .input-default {
+ width: 100%;
+ }
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+ }
+ }
+}
+
+@media (max-width: 768px) {
+ .profile-page {
+ flex-direction: column;
+
+ &__sidebar {
+ flex: 0 0 auto;
+ width: 100%;
+ max-height: 30vh;
+
+ &__image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+
+ &__profile-container {
+ padding: 1rem;
+
+ &__title {
+ &__frame {
+ width: 100%;
+ }
+
+ span {
+ font-size: 20px;
+ }
+ }
+
+ &__profile-form {
+ width: 100%;
+
+ .form-group {
+ flex-direction: column;
+ align-items: flex-start;
+
+ label {
+ flex: 0 0 auto;
+ text-align: left;
+ margin-bottom: 0.5rem;
+ }
+
+ input {
+ flex: 0 0 auto;
+ width: 100%;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/packages/client/src/pages/Profile/Profile.tsx b/packages/client/src/pages/Profile/Profile.tsx
index 198ec6a..429a358 100644
--- a/packages/client/src/pages/Profile/Profile.tsx
+++ b/packages/client/src/pages/Profile/Profile.tsx
@@ -1,21 +1,281 @@
-import { logoutUser } from '@/store/reducers/auth-reducer'
-import { useAppDispatch } from '@/store'
-import { useNavigate } from 'react-router-dom'
+import './Profile.scss'
+import React, { useState, useEffect, useCallback } from 'react'
+import { useSelector } from 'react-redux'
+import { Form } from '@/components/ui/Form/Form'
+import { Input } from '@/components/ui/Input/Input'
+import { saveUserData, changeUserAvatar } from '@/store/reducers/user-reducer'
+import { Button } from '@/components/ui/Button/Button'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { Avatar, AVATAR_SRC } from '@/components/ui/Avatar/Avatar'
+import {
+ actions,
+ getUser,
+ logoutUser,
+ UserType,
+} from '@/store/reducers/auth-reducer'
+import { RootState, useAppDispatch } from '@/store'
+import { CustomPageTitle } from '@/components/ui/CustomPageTitle/CustomPageTitle'
+
+const fieldLabels: { [key: string]: string } = {
+ first_name: 'Имя',
+ second_name: 'Фамилия',
+ login: 'Никнейм',
+ email: 'Email',
+ phone: 'Телефон',
+}
+
+interface LocationState {
+ successMessage?: string
+}
export const Profile = () => {
const dispatch = useAppDispatch()
+ const user = useSelector
+
+
+
+ )
+ }
+
+ if (!formData) {
+ return
+
+
+
+
+ Загрузка данных пользователя...
+Ошибка загрузки данных
+ } + return ( - <> - Страница профиля - - +
+
)
}
diff --git a/packages/client/src/scss/vars.scss b/packages/client/src/scss/vars.scss
index 0ab6285..983e34e 100644
--- a/packages/client/src/scss/vars.scss
+++ b/packages/client/src/scss/vars.scss
@@ -5,6 +5,8 @@ $f_default-font-family: 'Roboto', sans-serif;
// images
$img_default-background: url('@/assets/images/page-background.png');
+$img_profile_background_right: url('@/assets/images/profile-background-right.png');
+$img_profile_background_left: url('@/assets/images/tank-dead.png');
// main colors
$primary-color: #839d22;
@@ -24,11 +26,29 @@ $c_button_blue: $second-color;
$c_button-top_blue: #5fe1ff;
$c_button-bottom_blue: #0079a7;
+$c_input-default-border: #707070;
+$c_input-default-border-hover: #b1b1b1;
+$c_input-default-label: #a5a5a5;
+
+$c_avatar-border-color: #313131;
+$c_overlay-background: rgba(0, 0, 0, 0.5);
+$c_overlay-background-hover: rgba(0, 0, 0, 0.7);
+
+$c_success: #48c548;
+
+$c_white: #ffffff;
+
+$c_button_blue: $second-color;
+$c_button-top_blue: #5fe1ff;
+$c_button-bottom_blue: #0079a7;
+
$c_white: #fff;
$c_black: #000;
// fonts/links
$c_font-default: $c_white;
+$c_font-success-message: #a2c61d;
+$c_font-error-message: #ef2121;
// animations
$animation-base-speed: 0.18s;
diff --git a/packages/client/src/store/reducers/user-reducer.ts b/packages/client/src/store/reducers/user-reducer.ts
new file mode 100644
index 0000000..d003dda
--- /dev/null
+++ b/packages/client/src/store/reducers/user-reducer.ts
@@ -0,0 +1,104 @@
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
+import { InferAppActions } from '@/store'
+import backendApi from '@/api/backendApi'
+
+export type UserType = {
+ avatar: string | null
+ display_name: string | null
+ email: string | null
+ first_name: string | null
+ id: string | null
+ login: string | null
+ phone: string | null
+ second_name: string | null
+}
+
+type InitialState = {
+ user: UserType
+}
+
+const initialState: InitialState = {
+ user: null as unknown as UserType,
+}
+
+const slice = createSlice({
+ name: 'userReducer',
+ initialState,
+ reducers: {
+ setUser(state, action) {
+ state.user = action.payload
+ },
+ },
+})
+
+const userReducer = slice.reducer
+export const { actions } = slice
+
+export const saveUserData = createAsyncThunk(
+ 'User/saveUserData',
+ async (data: { form: UserType | null }, thunkAPI) => {
+ try {
+ const response = await backendApi({
+ method: 'put',
+ url: '/user/profile',
+ data: data.form,
+ })
+ return response.data
+ } catch (err: any) {
+ if (!err.response) {
+ throw err
+ }
+ return thunkAPI.rejectWithValue(err.response.data)
+ }
+ }
+)
+
+export const changeUserPassword = createAsyncThunk(
+ 'User/changeUserPassword',
+ async (
+ passwordData: { oldPassword: string; newPassword: string },
+ thunkAPI
+ ) => {
+ try {
+ const response = await backendApi({
+ method: 'put',
+ url: '/user/password',
+ data: passwordData,
+ })
+ return response.data
+ } catch (err: any) {
+ if (!err.response) {
+ throw err
+ }
+ return thunkAPI.rejectWithValue(err.response.data)
+ }
+ }
+)
+
+export const changeUserAvatar = createAsyncThunk(
+ 'User/changeUserAvatar',
+ async (file: File, thunkAPI) => {
+ try {
+ const formData = new FormData()
+ formData.append('avatar', file)
+
+ const response = await backendApi({
+ method: 'put',
+ url: '/user/profile/avatar',
+ data: formData,
+ headers: {
+ 'Content-Type': 'multipart/form-data',
+ },
+ })
+ return response.data.avatar
+ } catch (err: any) {
+ if (!err.response) {
+ throw err
+ }
+ return thunkAPI.rejectWithValue(err.response.data)
+ }
+ }
+)
+
+export type ActionsType = InferAppActions
+
+