finaly version
This commit is contained in:
parent
55c89568a5
commit
eb76f7457d
|
@ -1,67 +1,10 @@
|
||||||
'use client'
|
import Auth from '@/components/screens/admin/auth/Auth'
|
||||||
|
import React from 'react'
|
||||||
import MainButton from '@/components/UI/button/MainButton'
|
|
||||||
import FormInput from '@/components/UI/input/FormInput'
|
|
||||||
import { ChangeEvent, useState } from 'react'
|
|
||||||
import styled from 'styled-components'
|
|
||||||
|
|
||||||
type Props = {}
|
type Props = {}
|
||||||
|
|
||||||
const Container = styled.div`
|
|
||||||
width: 100%;
|
|
||||||
height: 100vh;
|
|
||||||
background-image: url('/image 12.png');
|
|
||||||
background-position: center;
|
|
||||||
background-size: cover;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
|
|
||||||
.form {
|
|
||||||
width: 440px;
|
|
||||||
padding: 20px;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 20px;
|
|
||||||
backdrop-filter: blur(4px);
|
|
||||||
background: rgba(129, 129, 129, 0.4);
|
|
||||||
color: ${(props) => props.theme.colors.white};
|
|
||||||
border-radius: 12px;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|
||||||
export default function page({}: Props) {
|
export default function page({}: Props) {
|
||||||
const [admin, setAdmin] = useState({
|
|
||||||
login: '',
|
|
||||||
password: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container>
|
<Auth />
|
||||||
<div className='form'>
|
|
||||||
<h2>Админ панель</h2>
|
|
||||||
<FormInput
|
|
||||||
value={admin.login}
|
|
||||||
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
|
||||||
setAdmin({ ...admin, login: e.target.value })
|
|
||||||
}
|
|
||||||
placeholder='Логин'
|
|
||||||
/>
|
|
||||||
<FormInput
|
|
||||||
value={admin.password}
|
|
||||||
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
|
||||||
setAdmin({ ...admin, password: e.target.value })
|
|
||||||
}
|
|
||||||
placeholder='Пароль'
|
|
||||||
/>
|
|
||||||
<MainButton>Войти</MainButton>
|
|
||||||
</div>
|
|
||||||
</Container>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
|
@ -9,7 +9,14 @@ export default function page({}: Props) {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
router.push('/admin/applications')
|
const hasCookie = document.cookie.includes('_identid')
|
||||||
|
if (!hasCookie) {
|
||||||
|
router.push('/admin/auth')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
router.push('/admin/applications')
|
||||||
|
}
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
return <></>
|
return <></>
|
||||||
|
|
|
@ -1,7 +1,9 @@
|
||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
|
import UserService from '@/services/user/userServices'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import { usePathname } from 'next/navigation'
|
import { usePathname, useRouter } from 'next/navigation'
|
||||||
|
import { useEffect } from 'react'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
|
|
||||||
type Props = {}
|
type Props = {}
|
||||||
|
@ -36,8 +38,32 @@ const Container = styled.div`
|
||||||
|
|
||||||
export default function AdminSideBar({}: Props) {
|
export default function AdminSideBar({}: Props) {
|
||||||
const pathname = usePathname()
|
const pathname = usePathname()
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
return pathname.startsWith('/admin') && pathname !== '/admin/auth' ? (
|
useEffect(() => {
|
||||||
|
const hasCookie = document.cookie.includes('_identid')
|
||||||
|
if (!hasCookie && pathname.startsWith('/admin')) {
|
||||||
|
router.push('/admin/auth')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const logout = async () => {
|
||||||
|
try {
|
||||||
|
const response = await UserService.exit()
|
||||||
|
if (response.status === 200) {
|
||||||
|
router.push('/admin/auth')
|
||||||
|
document.cookie =
|
||||||
|
'_identid=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return pathname.startsWith('/admin') &&
|
||||||
|
pathname !== '/admin/auth' &&
|
||||||
|
pathname !== '/admin' ? (
|
||||||
<Container>
|
<Container>
|
||||||
<img src='/logo.svg' alt='' />
|
<img src='/logo.svg' alt='' />
|
||||||
<div className='menu'>
|
<div className='menu'>
|
||||||
|
@ -59,12 +85,10 @@ export default function AdminSideBar({}: Props) {
|
||||||
<p>Вечная память</p>
|
<p>Вечная память</p>
|
||||||
</div>
|
</div>
|
||||||
</Link> */}
|
</Link> */}
|
||||||
<Link href='/'>
|
<div className='item' onClick={logout}>
|
||||||
<div className='item'>
|
|
||||||
<img src='/log-out.svg' alt='' />
|
<img src='/log-out.svg' alt='' />
|
||||||
<p>Выйти</p>
|
<p>Выйти</p>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
) : null
|
) : null
|
||||||
|
|
|
@ -0,0 +1,146 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import MainButton from '@/components/UI/button/MainButton'
|
||||||
|
import FormInput from '@/components/UI/input/FormInput'
|
||||||
|
import Loader from '@/components/UI/loader/Loader'
|
||||||
|
import UserService from '@/services/user/userServices'
|
||||||
|
import { useRouter } from 'next/navigation'
|
||||||
|
import { ChangeEvent, FormEvent, useState } from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
|
||||||
|
type Props = {}
|
||||||
|
|
||||||
|
const Container = styled.div`
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background-image: url('/image 12.png');
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
.form {
|
||||||
|
width: 440px;
|
||||||
|
padding: 20px;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
background: rgba(129, 129, 129, 0.4);
|
||||||
|
color: ${(props) => props.theme.colors.white};
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
const NotificationContainer = styled.div`
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
border-radius: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
background: ${(props) => props.theme.colors.white};
|
||||||
|
min-height: 100px;
|
||||||
|
min-width: 100px;
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 12px;
|
||||||
|
${(props) => props.theme.shadow}
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 15px;
|
||||||
|
color: ${(props) => props.theme.colors.black};
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export default function Auth({}: Props) {
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
const [admin, setAdmin] = useState({
|
||||||
|
login: '',
|
||||||
|
password: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const [errorMessage, setErrorMessage] = useState('')
|
||||||
|
const [errorState, setErrorState] = useState(false)
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
|
||||||
|
const authFunc = async (e: FormEvent<HTMLFormElement>) => {
|
||||||
|
e.preventDefault()
|
||||||
|
setLoading(true)
|
||||||
|
try {
|
||||||
|
const response = await UserService.auth(admin)
|
||||||
|
if (response.status === 200) {
|
||||||
|
router.push('/admin/applications')
|
||||||
|
} else {
|
||||||
|
setErrorMessage(response.data)
|
||||||
|
setErrorState(true)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
setErrorMessage('Сервер недоступен')
|
||||||
|
setErrorState(true)
|
||||||
|
}
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Container>
|
||||||
|
<form className='form' onSubmit={authFunc}>
|
||||||
|
<h2>Админ панель</h2>
|
||||||
|
<FormInput
|
||||||
|
value={admin.login}
|
||||||
|
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||||
|
setAdmin({ ...admin, login: e.target.value })
|
||||||
|
}
|
||||||
|
placeholder='Логин'
|
||||||
|
/>
|
||||||
|
<FormInput
|
||||||
|
value={admin.password}
|
||||||
|
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||||
|
setAdmin({ ...admin, password: e.target.value })
|
||||||
|
}
|
||||||
|
placeholder='Пароль'
|
||||||
|
type='password'
|
||||||
|
/>
|
||||||
|
<MainButton onClick={authFunc}>Войти</MainButton>
|
||||||
|
{loading ? (
|
||||||
|
<NotificationContainer>
|
||||||
|
<div className='container'>
|
||||||
|
<Loader />
|
||||||
|
</div>
|
||||||
|
</NotificationContainer>
|
||||||
|
) : (
|
||||||
|
errorState && (
|
||||||
|
<NotificationContainer>
|
||||||
|
<div className='container'>
|
||||||
|
<h3>{errorMessage}</h3>
|
||||||
|
<MainButton
|
||||||
|
fullWidth={true}
|
||||||
|
onClick={() => setErrorState(false)}
|
||||||
|
>
|
||||||
|
Закрыть
|
||||||
|
</MainButton>
|
||||||
|
</div>
|
||||||
|
</NotificationContainer>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</form>
|
||||||
|
</Container>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
|
@ -137,29 +137,23 @@ export default function Services({}: Props) {
|
||||||
</MainButton>
|
</MainButton>
|
||||||
</div>
|
</div>
|
||||||
{loadingState ? (
|
{loadingState ? (
|
||||||
<>
|
|
||||||
<NotificationContainer>
|
<NotificationContainer>
|
||||||
<Loader />
|
<Loader />
|
||||||
</NotificationContainer>
|
</NotificationContainer>
|
||||||
</>
|
|
||||||
) : services.length !== 0 ? (
|
) : services.length !== 0 ? (
|
||||||
<>
|
<div className='list'>
|
||||||
<div className='list'>
|
{services.map((item: T_Product, index) => (
|
||||||
{services.map((item: T_Product, index) => (
|
<ServiceItem
|
||||||
<ServiceItem
|
item={item}
|
||||||
item={item}
|
key={index}
|
||||||
key={index}
|
getServices={getServices}
|
||||||
getServices={getServices}
|
/>
|
||||||
/>
|
))}
|
||||||
))}
|
</div>
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
) : (
|
) : (
|
||||||
<>
|
<NotificationContainer>
|
||||||
<NotificationContainer>
|
<h3>Ничего не найдено</h3>
|
||||||
<h3>Ничего не найдено</h3>
|
</NotificationContainer>
|
||||||
</NotificationContainer>
|
|
||||||
</>
|
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
|
|
|
@ -127,6 +127,9 @@ export default function AddServiceForm({
|
||||||
OldPrice: ''
|
OldPrice: ''
|
||||||
})
|
})
|
||||||
setSelectedImage(null)
|
setSelectedImage(null)
|
||||||
|
if (iconInputRef.current) {
|
||||||
|
iconInputRef.current.value = ''
|
||||||
|
}
|
||||||
}, [modal])
|
}, [modal])
|
||||||
|
|
||||||
const [errorState, setErrorState] = useState(false)
|
const [errorState, setErrorState] = useState(false)
|
||||||
|
@ -161,16 +164,21 @@ export default function AddServiceForm({
|
||||||
setLoader(true)
|
setLoader(true)
|
||||||
const response = await ProductService.create(newProduct)
|
const response = await ProductService.create(newProduct)
|
||||||
if (response.status === 200 && selectedImage) {
|
if (response.status === 200 && selectedImage) {
|
||||||
const imageResponse = await ProductService.addImage(
|
try {
|
||||||
response.data.Id,
|
const imageResponse = await ProductService.addImage(
|
||||||
selectedImage
|
response.data.Id,
|
||||||
)
|
selectedImage
|
||||||
if (imageResponse.status === 200) {
|
)
|
||||||
getServices()
|
if (imageResponse.status === 200) {
|
||||||
setModal(false)
|
getServices()
|
||||||
} else {
|
setModal(false)
|
||||||
|
} else {
|
||||||
|
setErrorMessage(response.data)
|
||||||
|
setErrorState(true)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
setErrorMessage('Нет папки images')
|
||||||
setErrorState(true)
|
setErrorState(true)
|
||||||
setErrorMessage(response.data)
|
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
setErrorState(true)
|
setErrorState(true)
|
||||||
|
|
|
@ -4,6 +4,7 @@ import { useState } from 'react'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
import { T_Product } from '../../../../../services/product/type'
|
import { T_Product } from '../../../../../services/product/type'
|
||||||
import UpdateServiceForm from './UpdateServiceForm'
|
import UpdateServiceForm from './UpdateServiceForm'
|
||||||
|
import { hostName } from '../../../../../../config'
|
||||||
|
|
||||||
const Cart = styled.div`
|
const Cart = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -64,7 +65,7 @@ export default function ServiceItem({ item, getServices }: Props) {
|
||||||
<>
|
<>
|
||||||
<Cart>
|
<Cart>
|
||||||
<div className='block'>
|
<div className='block'>
|
||||||
<img src={item.ImageUrls[0]} alt='' />
|
<img src={'/'+item.ImageUrls[0]} alt='' />
|
||||||
<h3>{item.Name}</h3>
|
<h3>{item.Name}</h3>
|
||||||
<p>{item.FullDesc}</p>
|
<p>{item.FullDesc}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -116,16 +116,16 @@ export default function Services({}: Props) {
|
||||||
|
|
||||||
const getServices = async () => {
|
const getServices = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await ProductService.get()
|
const response = await ProductService.get('')
|
||||||
setServices(response.data.Data)
|
setServices(response.data.Data)
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
setErrorState(true)
|
setErrorState(true)
|
||||||
}
|
}
|
||||||
setLoadingState(false)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getServices()
|
getServices()
|
||||||
|
setLoadingState(false)
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
const [sliderHeight, setSliderHeight] = useState<number>(0)
|
const [sliderHeight, setSliderHeight] = useState<number>(0)
|
||||||
|
@ -153,15 +153,17 @@ export default function Services({}: Props) {
|
||||||
<ServicesContainer>
|
<ServicesContainer>
|
||||||
<h2>Наши услуги</h2>
|
<h2>Наши услуги</h2>
|
||||||
{loadingState ? (
|
{loadingState ? (
|
||||||
<>
|
<MessageContainer>
|
||||||
<MessageContainer>
|
<Loader />
|
||||||
<Loader />
|
</MessageContainer>
|
||||||
</MessageContainer>
|
|
||||||
</>
|
|
||||||
) : errorState ? (
|
) : errorState ? (
|
||||||
<MessageContainer>
|
<MessageContainer>
|
||||||
<h3>Ошибка, не удалось получить услуги, сервер не доступен.</h3>
|
<h3>Ошибка, не удалось получить услуги, сервер не доступен.</h3>
|
||||||
</MessageContainer>
|
</MessageContainer>
|
||||||
|
) : services.length === 0 ? (
|
||||||
|
<MessageContainer>
|
||||||
|
<h3>Услуг пока нет.</h3>
|
||||||
|
</MessageContainer>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<div className='list'>
|
<div className='list'>
|
||||||
|
@ -184,15 +186,17 @@ export default function Services({}: Props) {
|
||||||
<ServiceSliderContainer>
|
<ServiceSliderContainer>
|
||||||
<h2 className='container-title'>Наши услуги</h2>
|
<h2 className='container-title'>Наши услуги</h2>
|
||||||
{loadingState ? (
|
{loadingState ? (
|
||||||
<>
|
<MessageContainer>
|
||||||
<MessageContainer>
|
<Loader />
|
||||||
<Loader />
|
</MessageContainer>
|
||||||
</MessageContainer>
|
|
||||||
</>
|
|
||||||
) : errorState ? (
|
) : errorState ? (
|
||||||
<MessageContainer>
|
<MessageContainer>
|
||||||
<h3>Ошибка, не удалось получить услуги, сервер не доступен.</h3>
|
<h3>Ошибка, не удалось получить услуги, сервер не доступен.</h3>
|
||||||
</MessageContainer>
|
</MessageContainer>
|
||||||
|
) : services.length === 0 ? (
|
||||||
|
<MessageContainer>
|
||||||
|
<h3>Услуг пока нет.</h3>
|
||||||
|
</MessageContainer>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<div ref={sliderRef}>
|
<div ref={sliderRef}>
|
||||||
|
|
|
@ -59,7 +59,7 @@ export default function Services({}: Props) {
|
||||||
|
|
||||||
const getServices = async () => {
|
const getServices = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await ProductService.get()
|
const response = await ProductService.get('')
|
||||||
setServices(response.data.Data)
|
setServices(response.data.Data)
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
setErrorState(true)
|
setErrorState(true)
|
||||||
|
@ -85,6 +85,10 @@ export default function Services({}: Props) {
|
||||||
<MessageContainer>
|
<MessageContainer>
|
||||||
<h3>Ошибка, не удалось получить услуги, сервер не доступен.</h3>
|
<h3>Ошибка, не удалось получить услуги, сервер не доступен.</h3>
|
||||||
</MessageContainer>
|
</MessageContainer>
|
||||||
|
) : services.length === 0 ? (
|
||||||
|
<MessageContainer>
|
||||||
|
<h3>Услуг пока нет</h3>
|
||||||
|
</MessageContainer>
|
||||||
) : (
|
) : (
|
||||||
<List>
|
<List>
|
||||||
{services.map((item, index) => (
|
{services.map((item, index) => (
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { hostName } from '@/constants/host'
|
|
||||||
import axios, { AxiosResponse } from 'axios'
|
import axios, { AxiosResponse } from 'axios'
|
||||||
import { T_NewOrder } from './type'
|
import { T_NewOrder } from './type'
|
||||||
|
import { hostName } from '../../../config'
|
||||||
|
|
||||||
export default class OrdersService {
|
export default class OrdersService {
|
||||||
static async get(): Promise<AxiosResponse> {
|
static async get(): Promise<AxiosResponse> {
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { hostName } from '@/constants/host'
|
|
||||||
import axios, { AxiosResponse } from 'axios'
|
import axios, { AxiosResponse } from 'axios'
|
||||||
import { T_NewProduct, T_Product } from './type'
|
import { T_NewProduct, T_Product } from './type'
|
||||||
|
import { hostName } from '../../../config'
|
||||||
|
|
||||||
export default class ProductService {
|
export default class ProductService {
|
||||||
static async get(searchQuery: string): Promise<AxiosResponse> {
|
static async get(searchQuery: string): Promise<AxiosResponse> {
|
||||||
|
|
|
@ -0,0 +1,28 @@
|
||||||
|
import axios, { AxiosResponse } from 'axios'
|
||||||
|
import { hostName } from '../../../config'
|
||||||
|
|
||||||
|
type T_user = {
|
||||||
|
login: string
|
||||||
|
password: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class UserService {
|
||||||
|
static async auth(user: T_user): Promise<AxiosResponse> {
|
||||||
|
try {
|
||||||
|
const response = await axios.get(
|
||||||
|
`${hostName}/auth?a123=${user.login}&a321=${user.password}`
|
||||||
|
)
|
||||||
|
return response
|
||||||
|
} catch (error: any) {
|
||||||
|
return error.response
|
||||||
|
}
|
||||||
|
}
|
||||||
|
static async exit(): Promise<AxiosResponse> {
|
||||||
|
try {
|
||||||
|
const response = await axios.get(`${hostName}/exit`)
|
||||||
|
return response
|
||||||
|
} catch (error: any) {
|
||||||
|
return error.response
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue