Quản Lý Người Dùng

+ + + { + console.log("curPage", curPage, "maxItem", maxItem) + setCurPage(curPage) + } + }} + + /> + + ) +} diff --git a/src/pages/admin/auth/ProtectedAdmin.tsx b/src/pages/admin/auth/ProtectedAdmin.tsx new file mode 100644 index 0000000..d4543ff --- /dev/null +++ b/src/pages/admin/auth/ProtectedAdmin.tsx @@ -0,0 +1,121 @@ +import { message, Modal } from 'antd'; +import React, { type FormEvent, type ReactNode } from 'react' +import { UserApi, type UserSignInDTO } from '../../../apis/core/user.api'; +import { Apis } from '../../../apis'; +import { UserRole, type User } from '../../../types/user.type'; +import { useSelector } from 'react-redux'; +import type { StoreType } from '../../../stores'; + +export default function ProtectedAdmin( + { children }: { + children: ReactNode; + }) { + const userStore = useSelector((store: StoreType) => { + return store.user + }) + + + if (userStore.data?.role == UserRole.MASTER || userStore.data?.role == UserRole.ADMIN) { + return ( + <> + {children} + + ) + } + + if (!userStore.data?.role) { + return ( +

+ {/* Header */} +

Rikkei Phone Store

Chào mừng bạn quay trở lại 👋

+ + {/* Form */} +

+ { + signInHandle(e) + }} className="space-y-5"> + {/* Email */} +

+ + Email của bạn + + +

+ + {/* Password */} +

+ + Mật khẩu của bạn + + +

+ + {/* Remember me + Forgot */} +

+ + Quên mật khẩu? + +

+ + {/* Submit */} + + +

+ + {/* Footer */} +

+ ) + } + + if (userStore.data?.role) { + window.location.href="/" + return <> + } + + async function signInHandle(e: FormEvent) { + e.preventDefault() + let data: UserSignInDTO = { + emailOrUserName: (e.target as any).emailOrUserName.value, + password: (e.target as any).password.value, + } + try { + let result = await Apis.user.signIn(data) + localStorage.setItem("userLogin", JSON.stringify(result.data)) + Modal.confirm({ + title: "Đăng nhập thành công", + content: result.message, + onOk: () => { + window.location.reload() + }, + onCancel: () => { + window.location.reload() + } + }) + } catch (err) { + message.error(err.message) + } + } +} diff --git a/src/pages/admin/components/Header.tsx b/src/pages/admin/components/Header.tsx new file mode 100644 index 0000000..23ac9d5 --- /dev/null +++ b/src/pages/admin/components/Header.tsx @@ -0,0 +1,36 @@ +import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'; +import { Button, Layout, theme } from 'antd'; +const { Header } = Layout; + +export default function HeaderCom({ collapsed, setCollapsed }: { collapsed: boolean, setCollapsed: any }) { + const { + token: { colorBgContainer }, + } = theme.useToken(); + return ( +

+ +

+ ) +} diff --git a/src/pages/admin/components/Slider.tsx b/src/pages/admin/components/Slider.tsx new file mode 100644 index 0000000..f4b96dd --- /dev/null +++ b/src/pages/admin/components/Slider.tsx @@ -0,0 +1,35 @@ +import { UploadOutlined, UserOutlined, VideoCameraOutlined } from '@ant-design/icons' +import { Menu } from 'antd' +import Sider from 'antd/es/layout/Sider' +import type { ItemType, MenuItemType } from 'antd/es/menu/interface' +import { useNavigate } from 'react-router' + +export default function Slider({ collapsed }: { collapsed: boolean }) { + + const navigate = useNavigate() + + let menuItem: ItemType[] = [ + { + key: 'user', + icon: , + label: "Quản lý người dùng", + } + ] + + return ( + +

+ { + navigate(e.key) + }} + /> + + ) +} diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx new file mode 100644 index 0000000..ec07a6f --- /dev/null +++ b/src/pages/home/Home.tsx @@ -0,0 +1,24 @@ +import React, { useContext } from 'react' +import { Link, Outlet } from 'react-router' +import type { User } from '../../types/user.type' +import './home.scss' +import Header from './components/Header/Header' +import Footer from './components/Footer/Footer' + +export default function Home() { + return ( +

+ {/* Header */} +

+ {/* Body */} +

+ +

+ + {/* Footer */} +

+ ) +} diff --git a/src/pages/home/auth/Auth.tsx b/src/pages/home/auth/Auth.tsx new file mode 100644 index 0000000..d23eec0 --- /dev/null +++ b/src/pages/home/auth/Auth.tsx @@ -0,0 +1,162 @@ +import React, { useEffect, useRef, type FormEvent } from 'react' +import './auth.scss' +import { UserRole, UserStatus, type User } from '../../../types/user.type' +import { Apis } from '../../../apis' +import { message, Modal } from 'antd' +import { FormUtil } from '../../../utils/form.util' +import type { UserSignInDTO } from '../../../apis/core/user.api' +import { useSelector } from 'react-redux' +import type { StoreType } from '../../../stores' +export default function Auth() { + const containerRef = useRef(null) + + + async function handleSignup(e: FormEvent) { + e.preventDefault() + + try { + let newUser = { + id: String(Date.now()), + userName: (e.target as any).userName.value, + password: (e.target as any).password.value, + role: UserRole.USER, + displayName: (e.target as any).displayName.value, + email: (e.target as any).email.value, + phoneNumber: (e.target as any).phoneNumber.value, + status: UserStatus.ACTIVE, + banReason: "" + } + let newUserResult = (await Apis.user.signUp(newUser)) as User + Modal.confirm({ + title: "Thông báo", + content: `Bạn đã đăng ký thành công với tên đăng nhập là: ${newUserResult.userName}, id của bạn là: ${newUserResult.id}`, + onOk: () => { + FormUtil.resetForm(e) + containerRef.current.classList.remove("right-panel-active"); + } + }) + } catch (err) { + message.error(err.mes) + } + } + + async function handleSignin(e: FormEvent) { + e.preventDefault() + let loginData: UserSignInDTO = { + emailOrUserName: (e.target as any).emailOrUserName.value, + password: (e.target as any).password.value + } + console.log("loginData", loginData) + try { + let data = await Apis.user.signIn(loginData) + localStorage.setItem("userLogin", data.data.id) + Modal.confirm({ + title: `Chào mừng ${data.data.userName} đã quay trở lại`, + content: ``, + onOk: () => { + window.location.href = "/" + }, + onCancel: () => { + window.location.href = "/" + } + }) + } catch (err) { + message.error(err.message) + } + } + + const userStore = useSelector((store: StoreType) => { + return store.user + }) + + useEffect(() => { + if (!userStore.loading && userStore.data) { + window.location.href = "/" + } + }, [userStore.data, userStore.loading]) + + return ( + <> + { + userStore.data ? <>Đã đăng nhập : ( +

+ {/* Form Đăng Ký */} +

+ { + handleSignup(e) + }}> +

Tạo tài khoản

+ + + + + + + + + +

+ + + + + + + +

+ {/* Form Đăng Nhập */} +
+
{ + handleSignin(e) + }}> +
Sign in
+
+ + + + + + + + + +
+ or use your account + + + Forgot your password? + + +
+ {/* Control */} +
+
+
+
Welcome Back!
+
To keep connected with us please login with your personal info
+ +
+
+
Hello, Friend!
+
Enter your personal details and start journey with us
+ +
+
+
+

+ ) + } + + ) +} diff --git a/src/pages/home/auth/auth.scss b/src/pages/home/auth/auth.scss new file mode 100644 index 0000000..ef0b4e2 --- /dev/null +++ b/src/pages/home/auth/auth.scss @@ -0,0 +1,254 @@ +@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800'); + +* { + box-sizing: border-box; +} + +.auth_page { + background: #f6f5f7; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + font-family: 'Montserrat', sans-serif; + height: 100vh; + margin: -20px 0 50px; + + h1 { + font-weight: bold; + margin: 0; + } + + h2 { + text-align: center; + } + + p { + font-size: 14px; + font-weight: 100; + line-height: 20px; + letter-spacing: 0.5px; + margin: 20px 0 30px; + } + + span { + font-size: 12px; + } + + a { + color: #333; + font-size: 14px; + text-decoration: none; + margin: 15px 0; + } + + button { + border-radius: 20px; + border: 1px solid #FF4B2B; + background-color: #FF4B2B; + color: #FFFFFF; + font-size: 12px; + font-weight: bold; + padding: 12px 45px; + letter-spacing: 1px; + text-transform: uppercase; + transition: transform 80ms ease-in; + } + + button:active { + transform: scale(0.95); + } + + button:focus { + outline: none; + } + + button.ghost { + background-color: transparent; + border-color: #FFFFFF; + } + + form { + background-color: #FFFFFF; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 50px; + height: 100%; + text-align: center; + } + + input { + background-color: #eee; + border: none; + padding: 12px 15px; + margin: 8px 0; + width: 100%; + } + + .container { + background-color: #fff; + border-radius: 10px; + box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), + 0 10px 10px rgba(0, 0, 0, 0.22); + position: relative; + overflow: hidden; + width: 768px; + max-width: 100%; + min-height: 480px; + } + + .form-container { + position: absolute; + top: 0; + height: 100%; + transition: all 0.6s ease-in-out; + } + + .sign-in-container { + left: 0; + width: 50%; + z-index: 2; + } + + .container.right-panel-active .sign-in-container { + transform: translateX(100%); + } + + .sign-up-container { + left: 0; + width: 50%; + opacity: 0; + z-index: 1; + } + + .container.right-panel-active .sign-up-container { + transform: translateX(100%); + opacity: 1; + z-index: 5; + animation: show 0.6s; + } + + @keyframes show { + + 0%, + 49.99% { + opacity: 0; + z-index: 1; + } + + 50%, + 100% { + opacity: 1; + z-index: 5; + } + } + + .overlay-container { + position: absolute; + top: 0; + left: 50%; + width: 50%; + height: 100%; + overflow: hidden; + transition: transform 0.6s ease-in-out; + z-index: 100; + } + + .container.right-panel-active .overlay-container { + transform: translateX(-100%); + } + + .overlay { + background: #FF416C; + background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C); + background: linear-gradient(to right, #FF4B2B, #FF416C); + background-repeat: no-repeat; + background-size: cover; + background-position: 0 0; + color: #FFFFFF; + position: relative; + left: -100%; + height: 100%; + width: 200%; + transform: translateX(0); + transition: transform 0.6s ease-in-out; + } + + .container.right-panel-active .overlay { + transform: translateX(50%); + } + + .overlay-panel { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 40px; + text-align: center; + top: 0; + height: 100%; + width: 50%; + transform: translateX(0); + transition: transform 0.6s ease-in-out; + } + + .overlay-left { + transform: translateX(-20%); + } + + .container.right-panel-active .overlay-left { + transform: translateX(0); + } + + .overlay-right { + right: 0; + transform: translateX(0); + } + + .container.right-panel-active .overlay-right { + transform: translateX(20%); + } + + .social-container { + margin: 20px 0; + } + + .social-container a { + border: 1px solid #DDDDDD; + border-radius: 50%; + display: inline-flex; + justify-content: center; + align-items: center; + margin: 0 5px; + height: 40px; + width: 40px; + } + + footer { + background-color: #222; + color: #fff; + font-size: 14px; + bottom: 0; + position: fixed; + left: 0; + right: 0; + text-align: center; + z-index: 999; + } + + footer p { + margin: 10px 0; + } + + footer i { + color: red; + } + + footer a { + color: #3c97bf; + text-decoration: none; + } +} \ No newline at end of file diff --git a/src/pages/home/components/Footer/Footer.tsx b/src/pages/home/components/Footer/Footer.tsx new file mode 100644 index 0000000..a2e4ed9 --- /dev/null +++ b/src/pages/home/components/Footer/Footer.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +export default function Footer() { + return ( +
+
+ Footer +
+
+ ) +} diff --git a/src/pages/home/components/Header/Header.tsx b/src/pages/home/components/Header/Header.tsx new file mode 100644 index 0000000..ebde218 --- /dev/null +++ b/src/pages/home/components/Header/Header.tsx @@ -0,0 +1,97 @@ +import React, { useState } from 'react' +import { UserRole, type User } from '../../../../types/user.type' +import './header.scss' +import { useNavigate } from 'react-router' +import logo from '../../../../assets/img/logo.png' +import Search from 'antd/es/input/Search' +import { useSelector } from 'react-redux' +import type { StoreType } from '../../../../stores' +export default function Header() { + const navigate = useNavigate() + const menu = [ + { + iconClass: "fa-solid fa-headphones", + text: ["Hotline", "1900.5301"], + path: "/hotline" + }, + { + iconClass: "fa-solid fa-location-dot", + text: ["Hệ thống", "Showroom"], + path: "/about" + }, + { + iconClass: "fa-solid fa-clipboard", + text: ["Tra cứu", "Đơn hàng"], + path: "/order-history" + } + ] + const userStore = useSelector((store: StoreType) => { + return store.user + }) + return ( +
+
+ { + navigate("/") + }} src={logo} /> + + +
+ { + menu.map((item) => { + return ( +
{ + navigate(item.path) + }} className='item'> + +
+
{item.text[0]}
+
{item.text[1]}
+
+
+ ) + }) + } +
+ +
0
+
+
Giỏ
+
Hàng
+
+
+
+
+ { + userStore.data ? ( +
+ {userStore.data.displayName} + {(userStore.data.role == UserRole.ADMIN || userStore.data.role == UserRole.MASTER) && { + window.location.href = "/admin" + }} className="fa-solid fa-lock">} + { + window.localStorage.removeItem("userLogin") + window.location.href = "/auth" + }} className="cursor-pointer fa-solid fa-right-from-bracket"> +
+ ) : ( +
+
+ +
{ + navigate("/auth") + }} className='text_box'> +
Đăng
+
Nhập
+
+
+
+ ) + } + + +
+
+
+ ) +} \ No newline at end of file diff --git a/src/pages/home/components/Header/header.scss b/src/pages/home/components/Header/header.scss new file mode 100644 index 0000000..72f4549 --- /dev/null +++ b/src/pages/home/components/Header/header.scss @@ -0,0 +1,124 @@ +header { + background-color: white; + position: sticky; + top: 0; + + .content { + height: 100%; + display: flex; + align-items: center; + justify-content: space-between; + + img { + height: 60px; + } + + .menu-btn { + color: red; + cursor: pointer; + font-size: 20px; + } + + .media_box { + height: 100%; + display: flex; + align-items: center; + + .item { + display: flex; + align-items: center; + font-size: 10px; + cursor: pointer; + + position: relative; + + i { + font-size: 2em; + color: red; + margin-right: 5px; + } + + &:last-child { + i { + margin-right: 12px; + } + } + + .text_box { + font-size: 1.5em; + color: red; + + p { + &:first-child {} + + &:last-child {} + } + } + + .cart_count { + position: absolute; + top: 0; + left: 30%; + width: 1.5em; + height: 1.5em; + font-size: 1em; + background-color: yellow; + color: black; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + border: 1px solid red; + } + + } + } + + .user_box { + width: 100px; + height: 100%; + display: flex; + align-items: center; + + .login {} + + .unlogin { + height: 100%; + display: flex; + align-items: center; + .unlogin-content { + background-color: rgba(220, 218, 218, 0.612); + padding: 2px; + display: flex; + align-items: center; + font-size: 10px; + cursor: pointer; + border-radius: 5px; + + i { + font-size: 2em; + color: red; + margin-right: 5px; + } + + &:last-child { + i { + margin-right: 12px; + } + } + + .text_box { + font-size: 1.5em; + color: red; + + p { + &:first-child {} + + &:last-child {} + } + } + } + } + } + } +} \ No newline at end of file diff --git a/src/pages/home/home.scss b/src/pages/home/home.scss new file mode 100644 index 0000000..04950f4 --- /dev/null +++ b/src/pages/home/home.scss @@ -0,0 +1,37 @@ +$maxWContent: 1080px; +$headerH: 60px; +$footerH: 120px; + +.home_page { + width: 100vw; + + header { + width: 100%; + height: $headerH; + display: flex; + justify-content: center; + + .content { + width: $maxWContent; + } + } + + #container { + display: flex; + justify-content: center; + height: calc(100vh - $headerH); + .content { + width: $maxWContent; + } + } + + footer { + display: flex; + justify-content: center; + height: $footerH; + + .content { + width: $maxWContent; + } + } +} \ No newline at end of file diff --git a/src/stores/index.ts b/src/stores/index.ts new file mode 100644 index 0000000..cc891b2 --- /dev/null +++ b/src/stores/index.ts @@ -0,0 +1,16 @@ +import { combineReducers, configureStore } from "@reduxjs/toolkit"; +import { userAction, userReducer } from "./slices/user.slice"; + + +const RootReducer = combineReducers({ + user: userReducer +}) + +export type StoreType = ReturnType + +export const store = configureStore({ + reducer: RootReducer +}) + + +store.dispatch(userAction.fetchUserData()) \ No newline at end of file diff --git a/src/stores/slices/user.slice.ts b/src/stores/slices/user.slice.ts new file mode 100644 index 0000000..b8ebcfc --- /dev/null +++ b/src/stores/slices/user.slice.ts @@ -0,0 +1,43 @@ +import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"; +import type { User } from "../../types/user.type"; +import { Apis } from "../../apis"; + + +interface UserState { + data: User | null, + loading: boolean; +} + +const InitUserState: UserState = { + data: null, + loading: false +} + + +const userSlice = createSlice({ + name: "user", + initialState: InitUserState, + reducers: { + + }, + extraReducers: (bd) => { + bd.addCase(fetchUserData.fulfilled, (state, action) => { + state.data = action.payload + }) + } +}) + + +const fetchUserData = createAsyncThunk( + "user/fetchUserData", + async () => { + let result = await Apis.user.findById(localStorage.getItem("userLogin")) + return result.data + } +) + +export const userReducer = userSlice.reducer; +export const userAction = { + ...userSlice.actions, + fetchUserData +} \ No newline at end of file diff --git a/src/types/user.type.ts b/src/types/user.type.ts new file mode 100644 index 0000000..5ea10d8 --- /dev/null +++ b/src/types/user.type.ts @@ -0,0 +1,24 @@ +export enum UserRole { + USER = "USER", /* người dùng bình thường, khách hàng, cần người dùng tự đăng ký */ + MASTER = "MASTER", /* người quản trị cao nhất hệ thống, tạo mặc định */ + ADMIN = "ADMIN" /* quản trị hệ thống do master tạo ra */ +} + +export enum UserStatus { + ACTIVE = "ACTIVE", /* dùng bình thường */ + INACTIVE = "INACTIVE", /* tạm khóa bởi người dùng */ + BAN = "BAN" /* khóa bởi quản trị viên */ +} + +/* Lưu trữ dữ liệu của người dùng và quản trị hệ thống */ +export interface User { + id: string /* id định danh duy nhất cho 1 user */ + userName: string /* tên đăng nhập */ + password: string /* mật khẩu đăng nhập */ + role: UserRole /* vai trò của người trên hệ thống */ + displayName: string /* tên hiển thị của người dùng trên hệ thống */ + email: string /* email của người dùng, để gửi thông báo, khôi phục tài khoản,.... */ + phoneNumber: string /* số điện thoại liên lạc, gửi thông báo, khôi phục tài khoản,... */ + status: UserStatus /* trạng thái tài khoản */ + banReason?: string /* lý do bị khóa nếu có */ +} \ No newline at end of file diff --git a/src/utils/api.util.ts b/src/utils/api.util.ts new file mode 100644 index 0000000..b478433 --- /dev/null +++ b/src/utils/api.util.ts @@ -0,0 +1,14 @@ +export const ApiUtil = { + writeQuery: (query: any) => { + console.log("query", query) + let resultStr = ``; + for(let key in query) { + if(query[key] == "") { + continue; + } + resultStr += `${key}=${query[key]}&` + } + + return resultStr.slice(0, resultStr.length - 1) + } +} \ No newline at end of file diff --git a/src/utils/form.util.ts b/src/utils/form.util.ts new file mode 100644 index 0000000..49d2282 --- /dev/null +++ b/src/utils/form.util.ts @@ -0,0 +1,8 @@ +import type { FormEvent } from "react"; + +export const FormUtil = { + resetForm: (e: FormEvent) => { + let form = (e.target) as any; + form.reset(); + } +} \ No newline at end of file diff --git a/tsconfig.app.json b/tsconfig.app.json new file mode 100644 index 0000000..02b3f16 --- /dev/null +++ b/tsconfig.app.json @@ -0,0 +1,28 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + "target": "ES2022", + "useDefineForClassFields": true, + "lib": ["ES2022", "DOM", "DOM.Iterable"], + "module": "ESNext", + "types": ["vite/client"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "moduleDetection": "force", + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": false, + "noUnusedLocals": false, + "noUnusedParameters": false, + "erasableSyntaxOnly": false, + "noFallthroughCasesInSwitch": false, + "noUncheckedSideEffectImports": false + }, + "include": ["src"] +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..1ffef60 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,7 @@ +{ + "files": [], + "references": [ + { "path": "./tsconfig.app.json" }, + { "path": "./tsconfig.node.json" } + ] +} diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000..71fb93c --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + "target": "ES2023", + "lib": ["ES2023"], + "module": "ESNext", + "types": [], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "moduleDetection": "force", + "noEmit": true, + + /* Linting */ + "strict": false, + "noUnusedLocals": false, + "noUnusedParameters": false, + "erasableSyntaxOnly": false, + "noFallthroughCasesInSwitch": false, + "noUncheckedSideEffectImports": false + }, + "include": ["vite.config.ts"] +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..a470452 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,15 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' +import tailwindcss from '@tailwindcss/vite' + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [ + react({ + babel: { + plugins: [['babel-plugin-react-compiler']], + }, + }), + tailwindcss() + ], +})