Index: frontend/package-lock.json =================================================================== --- frontend/package-lock.json (revision 3487c01a2bdc2a11349375008d19da3c5b0c6d78) +++ frontend/package-lock.json (revision 6af7133d721b5e8b4e5f1c526496a7ba6bb780c4) @@ -11,4 +11,6 @@ "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", + "@headlessui/react": "^2.2.4", + "@heroicons/react": "^2.2.0", "@mui/icons-material": "^7.1.2", "@mui/material": "^7.1.2", @@ -1039,4 +1041,86 @@ } }, + "node_modules/@floating-ui/core": { + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.1.tgz", + "integrity": "sha512-azI0DrjMMfIug/ExbBaeDVJXcY0a7EPvPjb2xAJPa4HeimBX+Z18HK8QQR3jb6356SnDDdxx+hinMLcJEDdOjw==", + "license": "MIT", + "dependencies": { + "@floating-ui/utils": "^0.2.9" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.1.tgz", + "integrity": "sha512-cwsmW/zyw5ltYTUeeYJ60CnQuPqmGwuGVhG9w0PRaRKkAyi38BT5CKrpIbb+jtahSwUl04cWzSx9ZOIxeS6RsQ==", + "license": "MIT", + "dependencies": { + "@floating-ui/core": "^1.7.1", + "@floating-ui/utils": "^0.2.9" + } + }, + "node_modules/@floating-ui/react": { + "version": "0.26.28", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.28.tgz", + "integrity": "sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==", + "license": "MIT", + "dependencies": { + "@floating-ui/react-dom": "^2.1.2", + "@floating-ui/utils": "^0.2.8", + "tabbable": "^6.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.3.tgz", + "integrity": "sha512-huMBfiU9UnQ2oBwIhgzyIiSpVgvlDstU8CX0AF+wS+KzmYMs0J2a3GwuFHV1Lz+jlrQGeC1fF+Nv0QoumyV0bA==", + "license": "MIT", + "dependencies": { + "@floating-ui/dom": "^1.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.9", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz", + "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==", + "license": "MIT" + }, + "node_modules/@headlessui/react": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.2.4.tgz", + "integrity": "sha512-lz+OGcAH1dK93rgSMzXmm1qKOJkBUqZf1L4M8TWLNplftQD3IkoEDdUFNfAn4ylsN6WOTVtWaLmvmaHOUk1dTA==", + "license": "MIT", + "dependencies": { + "@floating-ui/react": "^0.26.16", + "@react-aria/focus": "^3.20.2", + "@react-aria/interactions": "^3.25.0", + "@tanstack/react-virtual": "^3.13.9", + "use-sync-external-store": "^1.5.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^18 || ^19 || ^19.0.0-rc", + "react-dom": "^18 || ^19 || ^19.0.0-rc" + } + }, + "node_modules/@heroicons/react": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz", + "integrity": "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==", + "license": "MIT", + "peerDependencies": { + "react": ">= 16 || ^19.0.0-rc" + } + }, "node_modules/@humanfs/core": { "version": "0.19.1", @@ -1446,4 +1530,101 @@ } }, + "node_modules/@react-aria/focus": { + "version": "3.20.5", + "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.20.5.tgz", + "integrity": "sha512-JpFtXmWQ0Oca7FcvkqgjSyo6xEP7v3oQOLUId6o0xTvm4AD5W0mU2r3lYrbhsJ+XxdUUX4AVR5473sZZ85kU4A==", + "license": "Apache-2.0", + "dependencies": { + "@react-aria/interactions": "^3.25.3", + "@react-aria/utils": "^3.29.1", + "@react-types/shared": "^3.30.0", + "@swc/helpers": "^0.5.0", + "clsx": "^2.0.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + } + }, + "node_modules/@react-aria/interactions": { + "version": "3.25.3", + "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.25.3.tgz", + "integrity": "sha512-J1bhlrNtjPS/fe5uJQ+0c7/jiXniwa4RQlP+Emjfc/iuqpW2RhbF9ou5vROcLzWIyaW8tVMZ468J68rAs/aZ5A==", + "license": "Apache-2.0", + "dependencies": { + "@react-aria/ssr": "^3.9.9", + "@react-aria/utils": "^3.29.1", + "@react-stately/flags": "^3.1.2", + "@react-types/shared": "^3.30.0", + "@swc/helpers": "^0.5.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + } + }, + "node_modules/@react-aria/ssr": { + "version": "3.9.9", + "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.9.tgz", + "integrity": "sha512-2P5thfjfPy/np18e5wD4WPt8ydNXhij1jwA8oehxZTFqlgVMGXzcWKxTb4RtJrLFsqPO7RUQTiY8QJk0M4Vy2g==", + "license": "Apache-2.0", + "dependencies": { + "@swc/helpers": "^0.5.0" + }, + "engines": { + "node": ">= 12" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + } + }, + "node_modules/@react-aria/utils": { + "version": "3.29.1", + "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.29.1.tgz", + "integrity": "sha512-yXMFVJ73rbQ/yYE/49n5Uidjw7kh192WNN9PNQGV0Xoc7EJUlSOxqhnpHmYTyO0EotJ8fdM1fMH8durHjUSI8g==", + "license": "Apache-2.0", + "dependencies": { + "@react-aria/ssr": "^3.9.9", + "@react-stately/flags": "^3.1.2", + "@react-stately/utils": "^3.10.7", + "@react-types/shared": "^3.30.0", + "@swc/helpers": "^0.5.0", + "clsx": "^2.0.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + } + }, + "node_modules/@react-stately/flags": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@react-stately/flags/-/flags-3.1.2.tgz", + "integrity": "sha512-2HjFcZx1MyQXoPqcBGALwWWmgFVUk2TuKVIQxCbRq7fPyWXIl6VHcakCLurdtYC2Iks7zizvz0Idv48MQ38DWg==", + "license": "Apache-2.0", + "dependencies": { + "@swc/helpers": "^0.5.0" + } + }, + "node_modules/@react-stately/utils": { + "version": "3.10.7", + "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.7.tgz", + "integrity": "sha512-cWvjGAocvy4abO9zbr6PW6taHgF24Mwy/LbQ4TC4Aq3tKdKDntxyD+sh7AkSRfJRT2ccMVaHVv2+FfHThd3PKQ==", + "license": "Apache-2.0", + "dependencies": { + "@swc/helpers": "^0.5.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + } + }, + "node_modules/@react-types/shared": { + "version": "3.30.0", + "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.30.0.tgz", + "integrity": "sha512-COIazDAx1ncDg046cTJ8SFYsX8aS3lB/08LDnbkH/SkdYrFPWDlXMrO/sUam8j1WWM+PJ+4d1mj7tODIKNiFog==", + "license": "Apache-2.0", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + } + }, "node_modules/@rolldown/pluginutils": { "version": "1.0.0-beta.11", @@ -1730,4 +1911,13 @@ "on-change": "^4.0.0", "semver-compare": "^1.0.0" + } + }, + "node_modules/@swc/helpers": { + "version": "0.5.17", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.17.tgz", + "integrity": "sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==", + "license": "Apache-2.0", + "dependencies": { + "tslib": "^2.8.0" } }, @@ -1992,4 +2182,31 @@ "peerDependencies": { "vite": "^5.2.0 || ^6" + } + }, + "node_modules/@tanstack/react-virtual": { + "version": "3.13.11", + "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.11.tgz", + "integrity": "sha512-u5EaOSJOq08T9NXFuDopMdxZBNDFuEMohIFFU45fBYDXXh9SjYdbpNq1OLFSOpQnDRPjqgmY96ipZTkzom9t9Q==", + "license": "MIT", + "dependencies": { + "@tanstack/virtual-core": "3.13.11" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, + "node_modules/@tanstack/virtual-core": { + "version": "3.13.11", + "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.11.tgz", + "integrity": "sha512-ORL6UyuZJ0D9X33LDR4TcgcM+K2YiS2j4xbvH1vnhhObwR1Z4dKwPTL/c0kj2Yeb4Yp2lBv1wpyVaqlohk8zpg==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" } }, @@ -4893,4 +5110,10 @@ } }, + "node_modules/tabbable": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", + "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==", + "license": "MIT" + }, "node_modules/tailwindcss": { "version": "4.1.10", @@ -5103,4 +5326,13 @@ "dependencies": { "punycode": "^2.1.0" + } + }, + "node_modules/use-sync-external-store": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz", + "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==", + "license": "MIT", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, Index: frontend/package.json =================================================================== --- frontend/package.json (revision 3487c01a2bdc2a11349375008d19da3c5b0c6d78) +++ frontend/package.json (revision 6af7133d721b5e8b4e5f1c526496a7ba6bb780c4) @@ -13,4 +13,6 @@ "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", + "@headlessui/react": "^2.2.4", + "@heroicons/react": "^2.2.0", "@mui/icons-material": "^7.1.2", "@mui/material": "^7.1.2", Index: frontend/src/components/inputs/RegisterInput.tsx =================================================================== --- frontend/src/components/inputs/RegisterInput.tsx (revision 6af7133d721b5e8b4e5f1c526496a7ba6bb780c4) +++ frontend/src/components/inputs/RegisterInput.tsx (revision 6af7133d721b5e8b4e5f1c526496a7ba6bb780c4) @@ -0,0 +1,66 @@ +import {Eye, EyeOff} from "lucide-react"; +import React from "react"; +import type { User } from "../../types/User.tsx"; + +type UserStrFields = 'email' | 'password' | 'passwordConfirmation' | 'name' | 'workPosition' | 'companyType'; +interface InputProps { + placeholder: string; + label: string; + name: UserStrFields; + type: string; + id: string; + showPassword?: boolean; + setShowPassword?: React.Dispatch>; + setUser: React.Dispatch>; + user: User; +} + +function RegisterInput(inputProps: InputProps) { + + return ( +
+ +
+
+ + inputProps.setUser((prev: User) => ({ + ...prev, + [inputProps.name]: e.target.value + })) + } + /> +
+
+ {inputProps.name.includes("password") && ( + + )} +
+
+ ); +} + +export default RegisterInput; Index: frontend/src/components/inputs/RegisterSelect.tsx =================================================================== --- frontend/src/components/inputs/RegisterSelect.tsx (revision 6af7133d721b5e8b4e5f1c526496a7ba6bb780c4) +++ frontend/src/components/inputs/RegisterSelect.tsx (revision 6af7133d721b5e8b4e5f1c526496a7ba6bb780c4) @@ -0,0 +1,45 @@ +import type {User} from "../../types/User.tsx"; +import type {SelectProps} from "../../types/SelectProps.tsx"; +import {toEnumFormat} from "../../utils/toEnumFormat.tsx"; + +function RegisterSelect(selectProps: SelectProps) { + + return ( +
+ +
+ +
+
+
+ ); +} + +export default RegisterSelect; Index: frontend/src/components/inputs/RegisterSlider.tsx =================================================================== --- frontend/src/components/inputs/RegisterSlider.tsx (revision 6af7133d721b5e8b4e5f1c526496a7ba6bb780c4) +++ frontend/src/components/inputs/RegisterSlider.tsx (revision 6af7133d721b5e8b4e5f1c526496a7ba6bb780c4) @@ -0,0 +1,81 @@ +import React from "react"; +import type {User} from "../../types/User.tsx"; +import type {SliderProps} from "../../types/SliderProps.tsx"; +import {toEnumFormat} from "../../utils/toEnumFormat.tsx"; + +function RegisterSlider(sliderProps: SliderProps) { + const [allOptions] = React.useState(sliderProps.options || []); + const [options, setOptions] = React.useState(allOptions); + const [filterText, setFilterText] = React.useState(""); + + const handleFilterChange = (e: React.ChangeEvent) => { + const value = e.target.value; + setFilterText(value); + setOptions(allOptions.filter(option => + option.toLowerCase().includes(value.toLowerCase()) + )); + }; + + const handleOptionClick = (option: string) => { + const newOption = toEnumFormat(option); + sliderProps.setUser((prev: User) => { + const arr = prev[sliderProps.name] as string[] || []; + const newArr = arr.includes(newOption) + ? arr.filter(item => item !== newOption) + : [...arr, newOption]; + + return { + ...prev, + [sliderProps.name]: newArr, + }; + }); + + // Reset filter input + setFilterText(""); + setOptions(allOptions); // Show all options again + }; + + return ( +
+
+ + { + sliderProps.name !== "interests" && + + } +
+ +
+ {options.map((option, index) => { + const isSelected = sliderProps.user[sliderProps.name]?.includes(toEnumFormat(option)) || false; + + return ( + + ); + })} + +
+
+
+ ); +} + +export default RegisterSlider; Index: frontend/src/components/steps/RegisterStepFive.tsx =================================================================== --- frontend/src/components/steps/RegisterStepFive.tsx (revision 6af7133d721b5e8b4e5f1c526496a7ba6bb780c4) +++ frontend/src/components/steps/RegisterStepFive.tsx (revision 6af7133d721b5e8b4e5f1c526496a7ba6bb780c4) @@ -0,0 +1,85 @@ +import React, {useEffect} from "react"; +import type {User} from "../../types/User.tsx"; +import RegisterSlider from "../inputs/RegisterSlider.tsx"; + +function RegisterStepFive({setUser, user, setCanContinue, setError}: { + setUser: React.Dispatch>, + user: User, + setCanContinue: React.Dispatch>, + setError: React.Dispatch> +}) { + const skills = [ + "Strategic Thinking", + "Strategic Planning", + "Business Development", + "Project Management", + "Operation Management", + "Logistics", + "Business Model Creation", + "Risk Management", + "Startup Methodologies", + + "Marketing", + "Digital Marketing", + "Traditional Marketing", + "Branding", + "Sales", + "Sales Techniques", + "B2b Tactics", + "B2c Tactics", + "Seo", + "Google Analytics", + "Ecommerce Platforms", + + "Leadership", + "People Management", + "Team Building", + "Delegation", + "Conflict Resolution", + "Decision Making", + "Performance Evaluation", + "Change Management", + + "Communication", + "Emotional Intelligence", + "Time Management", + "Adaptability", + "Critical Thinking", + "Creativity", + "Problem Solving", + + "Opportunity Identification", + "Fundraising Capital", + "Innovation Management", + + "Ai Tools", + + "Business Law", + "Business Ethics" + ]; + + useEffect(() => { + if (user.skillsGap.length === 0) { + setError("Please ensure all inputs are completed."); + setCanContinue(false); + } else { + setError(""); + setCanContinue(true); + } + }, [user.skillsGap]); + + return ( +
+ +
+ ) +} + +export default RegisterStepFive; Index: frontend/src/components/steps/RegisterStepFour.tsx =================================================================== --- frontend/src/components/steps/RegisterStepFour.tsx (revision 6af7133d721b5e8b4e5f1c526496a7ba6bb780c4) +++ frontend/src/components/steps/RegisterStepFour.tsx (revision 6af7133d721b5e8b4e5f1c526496a7ba6bb780c4) @@ -0,0 +1,85 @@ +import React, {useEffect} from "react"; +import type {User} from "../../types/User.tsx"; +import RegisterSlider from "../inputs/RegisterSlider.tsx"; + +function RegisterStepFour({setUser, user, setCanContinue, setError}: { + setUser: React.Dispatch>, + user: User, + setCanContinue: React.Dispatch>, + setError: React.Dispatch> +}) { + const skills = [ + "Strategic Thinking", + "Strategic Planning", + "Business Development", + "Project Management", + "Operation Management", + "Logistics", + "Business Model Creation", + "Risk Management", + "Startup Methodologies", + + "Marketing", + "Digital Marketing", + "Traditional Marketing", + "Branding", + "Sales", + "Sales Techniques", + "B2b Tactics", + "B2c Tactics", + "Seo", + "Google Analytics", + "Ecommerce Platforms", + + "Leadership", + "People Management", + "Team Building", + "Delegation", + "Conflict Resolution", + "Decision Making", + "Performance Evaluation", + "Change Management", + + "Communication", + "Emotional Intelligence", + "Time Management", + "Adaptability", + "Critical Thinking", + "Creativity", + "Problem Solving", + + "Opportunity Identification", + "Fundraising Capital", + "Innovation Management", + + "Ai Tools", + + "Business Law", + "Business Ethics" + ]; + + useEffect(() => { + if (user.skills.length === 0) { + setError("Please ensure all inputs are completed."); + setCanContinue(false); + } else { + setError(""); + setCanContinue(true); + } + }, [user.skills]); + + return ( +
+ +
+ ) +} + +export default RegisterStepFour; Index: frontend/src/components/steps/RegisterStepOne.tsx =================================================================== --- frontend/src/components/steps/RegisterStepOne.tsx (revision 6af7133d721b5e8b4e5f1c526496a7ba6bb780c4) +++ frontend/src/components/steps/RegisterStepOne.tsx (revision 6af7133d721b5e8b4e5f1c526496a7ba6bb780c4) @@ -0,0 +1,77 @@ +import React, {useEffect} from "react"; +import type {User} from "../../types/User.tsx"; +import RegisterInput from "../inputs/RegisterInput.tsx"; +import {isValidEmail, hasUppercase, hasDigit, hasSpecialChar} from "../../utils/validation.tsx"; + +function RegisterStepOne({setUser, user, setCanContinue, setError}: { + setUser: React.Dispatch>, + user: User, + setCanContinue: React.Dispatch>, + setError: React.Dispatch> +}) { + const [showPassword, setShowPassword] = React.useState(false); + + useEffect(() => { + if (!user.email || !user.password || !user.passwordConfirmation) { + setError("Please ensure all inputs are completed."); + setCanContinue(false); + } else if (user.email && !isValidEmail(user.email)) { + setError("Email must be valid"); + setCanContinue(false); + } else if (user.password && user.passwordConfirmation && user.password !== user.passwordConfirmation) { + setError("Passwords do not match"); + setCanContinue(false); + } else if (!hasUppercase(user.password)) { + setError("Password must contain at least one uppercase letter"); + setCanContinue(false); + } else if (!hasDigit(user.password)) { + setError("Password must contain at least one digit"); + setCanContinue(false); + } else if (!hasSpecialChar(user.password)) { + setError("Password must contain at least one special character"); + setCanContinue(false); + } else { + setError(""); + setCanContinue(true); + } + + }, [user.email, user.password, user.passwordConfirmation]) + + return ( +
+ + + +
+ ); +} + +export default RegisterStepOne; Index: frontend/src/components/steps/RegisterStepThree.tsx =================================================================== --- frontend/src/components/steps/RegisterStepThree.tsx (revision 6af7133d721b5e8b4e5f1c526496a7ba6bb780c4) +++ frontend/src/components/steps/RegisterStepThree.tsx (revision 6af7133d721b5e8b4e5f1c526496a7ba6bb780c4) @@ -0,0 +1,50 @@ +import React, {useEffect} from "react"; +import type {User} from "../../types/User.tsx"; +import RegisterSlider from "../inputs/RegisterSlider.tsx"; + +function RegisterStepThree({setUser, user, setCanContinue, setError}: + { + setUser: React.Dispatch>, + user: User, + setCanContinue: React.Dispatch>, + setError: React.Dispatch> + }) { + const interests = [ + "Sales Strategies", + "Marketing", + "Leadership", + "Management", + "Digital Transformation", + "Business Transformation", + "Entrepreneurship", + "Startup", + "Sales", + "Negotiation", + "Finance For Business" + ] + + useEffect(() => { + if (user.interests.length === 0) { + setError("Please ensure all inputs are completed."); + setCanContinue(false); + } else { + setError(""); + setCanContinue(true); + } + }, [user.interests]); + + return ( +
+ +
+ ) +} + +export default RegisterStepThree; Index: frontend/src/components/steps/RegisterStepTwo.tsx =================================================================== --- frontend/src/components/steps/RegisterStepTwo.tsx (revision 6af7133d721b5e8b4e5f1c526496a7ba6bb780c4) +++ frontend/src/components/steps/RegisterStepTwo.tsx (revision 6af7133d721b5e8b4e5f1c526496a7ba6bb780c4) @@ -0,0 +1,55 @@ +import React, {useEffect} from "react"; +import type {User} from "../../types/User.tsx"; +import RegisterInput from "../inputs/RegisterInput.tsx"; +import RegisterSelect from "../inputs/RegisterSelect.tsx"; + +function RegisterStepTwo({setUser, user, setCanContinue, setError}: { + setUser: React.Dispatch>, + user: User, + setCanContinue: React.Dispatch>, + setError: React.Dispatch> +}) { + + useEffect(() => { + if (!user.name || !user.workPosition || !user.companyType) { + setError("Please ensure all inputs are completed."); + setCanContinue(false); + } else { + setError(""); + setCanContinue(true); + } + }, [user.name, user.workPosition, user.companyType]); + + return ( +
+ + + +
+ ); +} + +export default RegisterStepTwo; Index: frontend/src/global.css =================================================================== --- frontend/src/global.css (revision 3487c01a2bdc2a11349375008d19da3c5b0c6d78) +++ frontend/src/global.css (revision 6af7133d721b5e8b4e5f1c526496a7ba6bb780c4) @@ -117,2 +117,14 @@ scrollbar-color: rgba(100, 100, 100, 0.5) #f0f0f0; } + +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus, +textarea:-webkit-autofill, +textarea:-webkit-autofill:hover, +textarea:-webkit-autofill:focus, +select:-webkit-autofill { + transition: background-color 9999s ease-in-out 0s; + -webkit-text-fill-color: #000 !important; +} + Index: frontend/src/pages/Register.tsx =================================================================== --- frontend/src/pages/Register.tsx (revision 3487c01a2bdc2a11349375008d19da3c5b0c6d78) +++ frontend/src/pages/Register.tsx (revision 6af7133d721b5e8b4e5f1c526496a7ba6bb780c4) @@ -1,4 +1,3 @@ -import React, {useEffect} from "react"; -import {Eye, EyeOff} from "lucide-react"; +import React from "react"; import ShifterLogo from "../assets/Shifter-Logo-S2W-Transparent.png"; import ShifterArrow from "../assets/Shifter-Arrow-White.png"; @@ -11,292 +10,18 @@ import {CustomStepperConnector, CustomStepperStepIcon} from "../components/CustomStepper"; import {Link} from "react-router-dom"; -import { motion, AnimatePresence } from "framer-motion"; - - -function StepOne({setUser, user, setCanContinue}: { setUser: React.Dispatch>, user: User, setCanContinue: React.Dispatch>}) { - const [showPassword, setShowPassword] = React.useState(false); - const [showError, setShowError] = React.useState(false); - const [error, setError] = React.useState(""); - - useEffect(() => { - function hasUppercase(str: string) { - return /[A-Z]/.test(str); - } - function hasDigit(str: string) { - return /\d/.test(str); - } - function hasSpecialChar(str: string) { - return /[^A-Za-z0-9]/.test(str); - } - - console.log(user.password, user.passwordConfirmation); - if (!user.password || !user.passwordConfirmation) { - - } else if (user.password && user.passwordConfirmation && user.password !== user.passwordConfirmation) { - setShowError(true); - setError("Passwords do not match"); - setCanContinue(false); - } else if (!hasUppercase(user.password)) { - setShowError(true); - setError("Password must contain at least one uppercase letter"); - setCanContinue(false); - } else if (!hasDigit(user.password)) { - setShowError(true); - setError("Password must contain at least one digit"); - setCanContinue(false); - } else if (!hasSpecialChar(user.password)) { - setShowError(true); - setError("Password must contain at least one special character"); - setCanContinue(false); - } else { - setError(""); - setShowError(false); - setCanContinue(true); - } - - }, [user.password, user.passwordConfirmation]) - - return ( -
- - - - { - showError && ( -

- {error} -

- ) - } -
- ); -} - -function StepTwo({setUser, user}: { setUser: React.Dispatch>, user: User }) { - return ( -
- - - -
- ); -} - -function StepThree({setUser, user}: { setUser: React.Dispatch>, user: User }) { - const interests = [ - "Sales Strategies", - "Marketing", - "Leadership", - "Management", - "Digital Transformation", - "Business Transformation", - "Entrepreneurship", - "Startup", - "Sales", - "Negotiation", - "Finance For Business" - ] - - return ( -
- -
- ) -} - -function StepFour({setUser, user}: { setUser: React.Dispatch>, user: User }) { - const skills = [ - "Strategic Thinking", - "Strategic Planning", - "Business Development", - "Project Management", - "Operation Management", - "Logistics", - "Business Model Creation", - "Risk Management", - "Startup Methodologies", - - "Marketing", - "Digital Marketing", - "Traditional Marketing", - "Branding", - "Sales", - "Sales Techniques", - "B2b Tactics", - "B2c Tactics", - "Seo", - "Google Analytics", - "Ecommerce Platforms", - - "Leadership", - "People Management", - "Team Building", - "Delegation", - "Conflict Resolution", - "Decision Making", - "Performance Evaluation", - "Change Management", - - "Communication", - "Emotional Intelligence", - "Time Management", - "Adaptability", - "Critical Thinking", - "Creativity", - "Problem Solving", - - "Opportunity Identification", - "Fundraising Capital", - "Innovation Management", - - "Ai Tools", - - "Business Law", - "Business Ethics" - ]; - - - return ( -
- -
- ) -} - -function StepFive({setUser, user}: { setUser: React.Dispatch>, user: User }) { - const skills = [ - "Strategic Thinking", - "Strategic Planning", - "Business Development", - "Project Management", - "Operation Management", - "Logistics", - "Business Model Creation", - "Risk Management", - "Startup Methodologies", - - "Marketing", - "Digital Marketing", - "Traditional Marketing", - "Branding", - "Sales", - "Sales Techniques", - "B2b Tactics", - "B2c Tactics", - "Seo", - "Google Analytics", - "Ecommerce Platforms", - - "Leadership", - "People Management", - "Team Building", - "Delegation", - "Conflict Resolution", - "Decision Making", - "Performance Evaluation", - "Change Management", - - "Communication", - "Emotional Intelligence", - "Time Management", - "Adaptability", - "Critical Thinking", - "Creativity", - "Problem Solving", - - "Opportunity Identification", - "Fundraising Capital", - "Innovation Management", - - "Ai Tools", - - "Business Law", - "Business Ethics" - ]; - - - return ( -
- -
- ) -} - +import {motion, AnimatePresence} from "framer-motion"; +import axios from "axios"; +import type { User } from "../types/User.tsx"; +import RegisterStepOne from "../components/steps/RegisterStepOne.tsx"; +import RegisterStepTwo from "../components/steps/RegisterStepTwo.tsx"; +import RegisterStepThree from "../components/steps/RegisterStepThree.tsx"; +import RegisterStepFour from "../components/steps/RegisterStepFour.tsx"; +import RegisterStepFive from "../components/steps/RegisterStepFive.tsx"; function Register() { const [activeStep, setActiveStep] = React.useState(0); const [canContinue, setCanContinue] = React.useState(true); + const [showError, setShowError] = React.useState(false); + const [error, setError] = React.useState(""); const [direction, setDirection] = React.useState(0); // 1 for next, -1 for back const [user, setUser] = React.useState({ @@ -304,5 +29,5 @@ password: "", passwordConfirmation: "", - fullName: "", + name: "", workPosition: "", companyType: "", @@ -313,7 +38,10 @@ - const stepsContent = [, , - , , - ]; + const stepsContent = [ + , + , + , + , + ]; const handleNext = () => { @@ -325,8 +53,4 @@ setActiveStep((prev) => prev - 1); }; - const handleReset = () => { - setDirection(0); - setActiveStep(0); - } const variants = { enter: (dir: number) => ({ @@ -344,4 +68,15 @@ }; + const handleRegister = () => { + console.log("user", user); + console.log(import.meta.env.VITE_BACKEND_URL) + axios.post(`http://localhost:8080/api/auth/register`, user) + .then(() => { + console.log("User registered successfully"); + }) + .catch(err => { + console.log("Error registering user:", err); + }) + } return ( @@ -399,6 +134,6 @@ exit="exit" transition={{ - x: { type: "spring", stiffness: 500, damping: 40 }, - opacity: { duration: 0.2 }, + x: {type: "spring", stiffness: 500, damping: 40}, + opacity: {duration: 0.2}, }} className="h-80 flex flex-col justify-center" @@ -409,12 +144,19 @@ - {/*STEPPER BUTTONS*/} + { + showError && ( +

+ {error} +

+ ) + }
- )} -
- - ); -} - -function SelectInput(selectProps: SelectProps) { - - return ( -
- -
- -
-
-
- ); -} - -function SliderInput(sliderProps: SliderProps) { - - return ( -
- -
- { - sliderProps.options?.map((option, index) => { - const isSelected = sliderProps.user[sliderProps.name]?.includes(option) || false; - - return ( - - ) - }) - } -
- -
- ); -} - -interface User { - email: string; - password: string; - passwordConfirmation: string; - fullName: string; - workPosition: string; - companyType: string; - interests: string[]; - skills: string[]; - skillsGap: string[]; -} - -type UserStrFields = 'email' | 'password' | 'passwordConfirmation' | 'fullName' | 'workPosition' | 'companyType'; -interface InputProps { - placeholder: string; - label: string; - name: UserStrFields; - type: string; - id: string; - showPassword?: boolean; - setShowPassword?: React.Dispatch>; - setUser: React.Dispatch>; - user: User; -} - -interface SelectProps { - label: string; - name: string; - id: string; - options?: string[]; - setUser: React.Dispatch>; - user: User; -} - -type UserArrayFields = 'interests' | 'skills' | 'skillsGap'; - -interface SliderProps { - label: string; - name: UserArrayFields; - id: string; - options?: string[]; - setUser: React.Dispatch>; - user: User; -} - export default Register; Index: frontend/src/types/SelectProps.tsx =================================================================== --- frontend/src/types/SelectProps.tsx (revision 6af7133d721b5e8b4e5f1c526496a7ba6bb780c4) +++ frontend/src/types/SelectProps.tsx (revision 6af7133d721b5e8b4e5f1c526496a7ba6bb780c4) @@ -0,0 +1,11 @@ +import React from "react"; +import type {User} from "./User.tsx"; + +export interface SelectProps { + label: string; + name: string; + id: string; + options?: string[]; + setUser: React.Dispatch>; + user: User; +} Index: frontend/src/types/SliderProps.tsx =================================================================== --- frontend/src/types/SliderProps.tsx (revision 6af7133d721b5e8b4e5f1c526496a7ba6bb780c4) +++ frontend/src/types/SliderProps.tsx (revision 6af7133d721b5e8b4e5f1c526496a7ba6bb780c4) @@ -0,0 +1,12 @@ +import React from "react"; +import type {User} from "./User.tsx"; + +type UserArrayFields = 'interests' | 'skills' | 'skillsGap'; +export interface SliderProps { + label: string; + name: UserArrayFields; + id: string; + options?: string[]; + setUser: React.Dispatch>; + user: User; +} Index: frontend/src/types/User.tsx =================================================================== --- frontend/src/types/User.tsx (revision 6af7133d721b5e8b4e5f1c526496a7ba6bb780c4) +++ frontend/src/types/User.tsx (revision 6af7133d721b5e8b4e5f1c526496a7ba6bb780c4) @@ -0,0 +1,11 @@ +export interface User { + email: string; + password: string; + passwordConfirmation: string; + name: string; + workPosition: string; + companyType: string; + interests: string[]; + skills: string[]; + skillsGap: string[]; +} Index: frontend/src/utils/toEnumFormat.tsx =================================================================== --- frontend/src/utils/toEnumFormat.tsx (revision 6af7133d721b5e8b4e5f1c526496a7ba6bb780c4) +++ frontend/src/utils/toEnumFormat.tsx (revision 6af7133d721b5e8b4e5f1c526496a7ba6bb780c4) @@ -0,0 +1,4 @@ + +export function toEnumFormat(str: string): string { + return str.trim().replace(/\s+/g, '_').toUpperCase(); +} Index: frontend/src/utils/validation.tsx =================================================================== --- frontend/src/utils/validation.tsx (revision 6af7133d721b5e8b4e5f1c526496a7ba6bb780c4) +++ frontend/src/utils/validation.tsx (revision 6af7133d721b5e8b4e5f1c526496a7ba6bb780c4) @@ -0,0 +1,15 @@ +export function hasDigit(str: string) { + return /\d/.test(str); +} + +export function hasUppercase(str: string) { + return /[A-Z]/.test(str); +} + +export function hasSpecialChar(str: string) { + return /[!@#$%^&*(),.?":{}|<>]/.test(str); +} + +export function isValidEmail(email: string) { + return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); +}