REHCM_2E32/react_admin_upload_cloudinary
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

temp 2

Browse Source
This commit is contained in:
Nguyễn Phước
2025-10-08 07:44:27 +07:00
parent 4df6ba7843
commit 1a1fb7b67b
4 changed files with 35 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/App.tsx
View File

@@ -1,9 +1,18 @@
import { createContext } from 'react'
import RouterSetup from './RouterSetup'
import { useSelector } from 'react-redux'
import type { StoreType } from './stores'
import Loading from './components/Loading'
export default function App() {
const userStore = useSelector((store: StoreType) => store.user)
return (
<RouterSetup />
<>
{
userStore.loading ? <Loading />
: <RouterSetup />
}
</>
)
}

22
src/components/Loading.tsx Normal file
View File

@@ -0,0 +1,22 @@
import React from 'react'
export default function Loading() {
return (
<div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-white/70 backdrop-blur-sm">
<div className="relative mb-4">
<div className="h-14 w-14 rounded-full bg-gray-200 animate-pulse" />
<svg
className="absolute -right-2 -bottom-2 h-7 w-7 animate-spin"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden
>
<circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" className="text-gray-300 opacity-70" />
<path d="M22 12a10 10 0 00-10-10" stroke="currentColor" strokeWidth="3" className="text-indigo-500" strokeLinecap="round" />
</svg>
</div>
<div className="text-gray-600 font-medium">Đang tải dữ liệu xác thực...</div>
</div>
)
}

65
src/pages/admin/auth/ProtectedAdmin.tsx
View File

@@ -99,73 +99,8 @@ export default function ProtectedAdmin(
/* chưa vào case, default */
return (
<div className="w-full max-w-md mx-auto p-6 rounded-2xl bg-white/80 backdrop-blur-sm shadow-lg border border-gray-100">
<div className="flex items-center gap-4">
{/* avatar skeleton + spinner */}
<div className="relative">
<div className="h-14 w-14 rounded-full bg-gray-200 animate-pulse" />
<svg
className="absolute -right-2 -bottom-2 h-7 w-7 animate-spin"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden
>
<circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" className="text-gray-300 opacity-70" />
<path d="M22 12a10 10 0 00-10-10" stroke="currentColor" strokeWidth="3" className="text-indigo-500" strokeLinecap="round" />
</svg>
</div>
<div className="flex-1">
<div className="h-4 bg-gray-200 rounded-md w-3/4 mb-3 animate-pulse" />
<div className="h-3 bg-gray-200 rounded-md w-1/2 animate-pulse" />
</div>
</div>
<div className="mt-6 grid grid-cols-3 gap-3">
<div className="col-span-2">
<div className="h-10 rounded-lg bg-gradient-to-r from-gray-100 via-gray-200 to-gray-100 animate-shimmer" />
</div>
<div className="flex items-center justify-center">
<div className="h-10 w-10 rounded-lg border border-dashed border-gray-200 flex items-center justify-center">
<svg className="h-5 w-5 animate-bounce" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden>
<path d="M12 2v6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-indigo-500" />
<path d="M12 22v-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-indigo-300" />
</svg>
</div>
</div>
</div>
<div className="mt-4 text-center text-sm text-gray-500">
Đang xác thực — kết nối tới máy chủ...
</div>
{/* visually-hidden for screen readers */}
<span className="sr-only">Loading authentication information</span>
<style>{`/* tiny shimmer animation without external libraries */
@keyframes shimmer {
0% { background-position: -250px 0 }
100% { background-position: 250px 0 }
}
.animate-shimmer {
background-size: 500px 100%;
background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
animation: shimmer 1.6s infinite;
}
`}
</style>
</div>
)
async function signInHandle(e: FormEvent) {
e.preventDefault()
let data: UserSignInDTO = {

4
src/pages/home/auth/Auth.tsx
View File

@@ -49,9 +49,9 @@ export default function Auth() {
console.log("loginData", loginData)
try {
let data = await Apis.user.signIn(loginData)
localStorage.setItem("userLogin", data.data.id)
localStorage.setItem("token", data)
Modal.confirm({
title: `Chào mừng ${data.data.userName} đã quay trở lại`,
title: `Chào mừng bạn đã quay trở lại`,
content: ``,
onOk: () => {
window.location.href = "/"