From 5baeee1f97fec3ad4b629762e7dd7b11f7b6026d Mon Sep 17 00:00:00 2001 From: tylen Date: Fri, 31 Oct 2025 17:30:08 +0200 Subject: [PATCH] frontend: big upgrade --- frontend/Dockerfile | 29 +++++++++++++++++ frontend/package-lock.json | 15 +++++++++ frontend/package.json | 2 ++ frontend/src/components/Hosting.tsx | 2 +- frontend/src/components/InitialSetup.tsx | 31 ++++++++---------- frontend/src/constants/constants.ts | 2 +- frontend/src/utils/fetchHosting.tsx | 5 +-- frontend/src/utils/fetchUser.tsx | 40 ++++++++---------------- frontend/src/utils/hashPassword.tsx | 10 ++++++ frontend/vite.config.ts | 3 ++ 10 files changed, 90 insertions(+), 49 deletions(-) create mode 100644 frontend/Dockerfile create mode 100644 frontend/src/utils/hashPassword.tsx diff --git a/frontend/Dockerfile b/frontend/Dockerfile new file mode 100644 index 0000000..b990b97 --- /dev/null +++ b/frontend/Dockerfile @@ -0,0 +1,29 @@ +# Use the official Node.js image. +FROM node:18 AS build + +# Set the working directory +WORKDIR /app + +# Copy package.json and package-lock.json (or yarn.lock) to the working directory +COPY package*.json ./ + +# Install dependencies +RUN npm install + +# Copy the rest of the application +COPY . . + +# Build the application +RUN npm run build + +# Start a new stage to serve the application +FROM nginx:alpine + +# Copy the build output to Nginx's public folder +COPY --from=build /app/dist /usr/share/nginx/html + +# Expose port 80 +EXPOSE 80 + +# Start Nginx when the container runs +CMD ["nginx", "-g", "daemon off;"] diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 6787a40..16d5099 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -8,6 +8,7 @@ "name": "frontend", "version": "0.0.0", "dependencies": { + "crypto-js": "^4.2.0", "js-cookie": "^3.0.5", "react": "^19.2.0", "react-cookie": "^8.0.1", @@ -15,6 +16,7 @@ }, "devDependencies": { "@eslint/js": "^9.33.0", + "@types/crypto-js": "^4.2.2", "@types/react": "^19.1.10", "@types/react-dom": "^19.1.7", "@vitejs/plugin-react": "^5.0.0", @@ -1408,6 +1410,13 @@ "@babel/types": "^7.28.2" } }, + "node_modules/@types/crypto-js": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.2.2.tgz", + "integrity": "sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/estree": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz", @@ -1978,6 +1987,12 @@ "node": ">= 8" } }, + "node_modules/crypto-js": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz", + "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==", + "license": "MIT" + }, "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", diff --git a/frontend/package.json b/frontend/package.json index d9c6477..970becf 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "crypto-js": "^4.2.0", "js-cookie": "^3.0.5", "react": "^19.2.0", "react-cookie": "^8.0.1", @@ -17,6 +18,7 @@ }, "devDependencies": { "@eslint/js": "^9.33.0", + "@types/crypto-js": "^4.2.2", "@types/react": "^19.1.10", "@types/react-dom": "^19.1.7", "@vitejs/plugin-react": "^5.0.0", diff --git a/frontend/src/components/Hosting.tsx b/frontend/src/components/Hosting.tsx index a8c8b7c..a255700 100644 --- a/frontend/src/components/Hosting.tsx +++ b/frontend/src/components/Hosting.tsx @@ -65,7 +65,7 @@ function Hosting() { {item.name} {item.capacity} - {} + {} ))} diff --git a/frontend/src/components/InitialSetup.tsx b/frontend/src/components/InitialSetup.tsx index da6eebf..54c31a9 100644 --- a/frontend/src/components/InitialSetup.tsx +++ b/frontend/src/components/InitialSetup.tsx @@ -7,25 +7,29 @@ import { useNotification } from '../NotificationContext'; const InitialSetup = () => { const [cookie, setCookie] = useCookies(); const [selectedName, setSelectedName] = useState(cookie.userName); - const [token, setToken] = useState(cookie.token) + const [token] = useState(cookie.apiToken) const [isSubmitted, setIsSubmitted] = useState(false); const [password, setPassword] = useState(''); const [isPasswordSet, setIsPasswordSet] = useState(false); // To track if password is set - const [isSignIn, setIsSignIn] = useState(false); // To track if it should prompt for sign-in const { userSet, passwordCreate, signUser, validToken } = useFetchUser(); // Destructure functions from the hook const notify = useNotification(); useEffect(() => { - document.body.style.overflow = 'hidden'; - - return () => { - document.body.style.overflow = 'unset'; + const validateToken = async () => { + const isTokenValid = await validToken(token, selectedName); + setIsSubmitted(isTokenValid); }; - }, []); + + validateToken(); + if (selectedName) { + checkUserPassword(selectedName) + } + }, [selectedName]); const handleSelect = (event: React.ChangeEvent) => { const name = event.target.value; + setCookie('userName', name, { path: '/' }); setSelectedName(name); checkUserPassword(name); }; @@ -33,7 +37,6 @@ const InitialSetup = () => { const checkUserPassword = async (name: string) => { const passwordStatus = await userSet(name); setIsPasswordSet(passwordStatus); - setIsSignIn(!passwordStatus); // If password is not set, show sign-up }; const handlePasswordCreate = async () => { @@ -54,25 +57,17 @@ const InitialSetup = () => { setIsSubmitted(true); }; + if (isSubmitted) { console.log('Selected', selectedName); return null; // or you can redirect to another component or page } - useEffect(() => { - const validateToken = async () => { - const isTokenValid = await validToken(token); - setIsSubmitted(isTokenValid); - }; - - validateToken(); - }, [token]); - return (

Выбери себя