diff --git a/backend/src/user.py b/backend/src/user.py index a4ca84f..7f34c71 100644 --- a/backend/src/user.py +++ b/backend/src/user.py @@ -7,6 +7,7 @@ user.py is a source for all user endpoints. from flask import request, jsonify import os +import mysql.connector def registerUserEndpoints(app, database): @app.route('/users/isSet', methods=['GET']) @@ -15,7 +16,7 @@ def registerUserEndpoints(app, database): try: query = "SELECT * FROM users WHERE Name=%s" result = database.query(query, params=(user_name,)) - return jsonify(bool(result and result[0][2])), 200 + return jsonify(bool(result)), 200 except mysql.connector.Error as err: # Log the error or handle it as necessary app.logger.error(f"Error: {err}") diff --git a/docker-compose.yaml b/docker-compose.yaml index 5e94f92..d4bb9a8 100644 --- a/docker-compose.yaml +++ b/docker-compose.yaml @@ -3,6 +3,7 @@ services: build: context: backend dockerfile: Dockerfile + restart: always ports: - "2027:5000" container_name: "${BACKEND_CT_NAME:-nyi-backend}" diff --git a/frontend/src/App.css b/frontend/src/App.css index b9d2f81..1183841 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1,9 +1,98 @@ #root { - width: 100%; - max-width: 1280px; - text-align: center; + width: 100%; + max-width: 1280px; + text-align: center; } +/* Overall Body Style */ +body { + background-color: #b8b6b6; /* Light background for contrast */ + color: #4b2e2e; /* Darker red brown for readability */ + font-family: 'Arial', sans-serif; + margin: 0; + padding: 20px; +} + +/* Header Style */ +header { + background-color: #a41e34; /* Christmas red */ + color: white; + text-align: center; + padding: 20px 0; + border-bottom: 5px solid #b7c9b5; /* Light green border */ +} + +header h1 { + font-size: 2.5em; +} + +/* Navigation Menu */ +nav a { + text-decoration: none; + color: white; + padding: 15px 25px; + border-radius: 5px; + transition: background-color 0.3s; +} + +nav a:hover { + background-color: #c28f8f; /* Softer red when hovering */ +} + +/* Section Style */ +section { + background-color: #e4f7e0; /* Light green background */ + padding: 20px; + border-radius: 10px; + margin: 15px 0; +} + +/* Festive Buttons */ +button { + background-color: #b77de5; /* Purple with a slight festive flair */ + color: white; + border: none; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; + font-size: 1.1em; +} + +button:hover { + background-color: #9b6bb5; /* Darker purple on hover */ +} + +/* Footer Style */ +footer { + text-align: center; + padding: 20px; + background-color: #a41e34; /* Same red as header */ + color: white; + position: relative; +} + +/* Christmas Decorations */ +.christmas-tree { + background-image: url('path/to/christmas-tree.png'); /* Add a Christmas tree image */ + width: 50px; + height: 100px; + display: inline-block; + background-size: cover; +} + +.snowflakes { + position: absolute; + z-index: 1; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: url('path/to/snowflake-pattern.png'); /* Snowflakes pattern */ + opacity: 0.3; /* Make it subtle */ + pointer-events: none; /* Allow clicks to go through */ +} + + /* General table styles */ table { width: 100%; @@ -15,22 +104,74 @@ table { /* Table header styles */ th { - background-color: #4CAF50; /* Green */ + background-color: #a41e34; + /* Christmas red */ color: white; text-align: left; + padding: 10px 15px; + border-bottom: 3px solid #b7c9b5; + /* Light green border for header */ } /* Table cell styles */ td { border: 1px solid #ddd; + padding: 10px 15px; + /* Added padding for better spacing */ + background-color: #e4f7e0; + /* Light green background for cells */ } /* Zebra striping for table rows */ tr:nth-child(even) { - background-color: #f2f2f2; + background-color: #f9f9f9; + /* Light gray for even rows */ } /* Hover effect for rows */ tr:hover { - background-color: #f1f1f1; + background-color: #c28f8f; + /* Softer red when hovering */ } + +/* Additional table styling for Christmas theme */ +table { + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); + /* Shadow for depth */ + border-radius: 8px; + /* Rounded corners */ + overflow: hidden; + /* Ensures border radius works */ +} + +/* Add some festive decorations */ +th::after { + content: '🎄'; + /* Small Christmas tree icon in the header */ + margin-left: 10px; + font-size: 1.2em; + /* Slightly larger */ +} + +td { + position: relative; + /* For potential decorations */ +} + +td::before { + content: ''; + /* Placeholder for decoration */ + position: absolute; + background-image: url('path/to/snowflake-icon.png'); + /* Snowflake icon */ + width: 16px; + /* Adjust as necessary */ + height: 16px; + opacity: 0.1; + /* Very subtle */ + top: 5px; + /* Position it nicely */ + left: 5px; + pointer-events: none; + /* Ignore mouse events */ +} \ No newline at end of file diff --git a/frontend/src/components/InitialSetup.tsx b/frontend/src/components/InitialSetup.tsx index 54c31a9..dfc2e7b 100644 --- a/frontend/src/components/InitialSetup.tsx +++ b/frontend/src/components/InitialSetup.tsx @@ -15,17 +15,10 @@ const InitialSetup = () => { const { userSet, passwordCreate, signUser, validToken } = useFetchUser(); // Destructure functions from the hook const notify = useNotification(); - useEffect(() => { - const validateToken = async () => { - const isTokenValid = await validToken(token, selectedName); - setIsSubmitted(isTokenValid); - }; - - validateToken(); - if (selectedName) { - checkUserPassword(selectedName) - } - }, [selectedName]); + const checkUserPassword = async (name: string) => { + const passwordStatus = await userSet(name); + setIsPasswordSet(passwordStatus); + }; const handleSelect = (event: React.ChangeEvent) => { const name = event.target.value; @@ -34,10 +27,15 @@ const InitialSetup = () => { checkUserPassword(name); }; - const checkUserPassword = async (name: string) => { - const passwordStatus = await userSet(name); - setIsPasswordSet(passwordStatus); - }; + useEffect(() => { + const validateToken = async () => { + const isTokenValid = await validToken(token, selectedName); + setIsSubmitted(isTokenValid); + }; + if (selectedName !== undefined) checkUserPassword(selectedName) + if (token && selectedName) validateToken(); + }, [selectedName]); + const handlePasswordCreate = async () => { const message= await passwordCreate(selectedName!, password);