diff --git a/src/components/CountryList/countryList.ts b/src/components/CountryList/countryList.ts new file mode 100644 index 0000000..6a01cf0 --- /dev/null +++ b/src/components/CountryList/countryList.ts @@ -0,0 +1,251 @@ +export const countryList = [ + 'Afghanistan', + 'Albania', + 'Algeria', + 'American Samoa', + 'Andorra', + 'Angola', + 'Anguilla', + 'Antarctica', + 'Antigua and Barbuda', + 'Argentina', + 'Armenia', + 'Aruba', + 'Australia', + 'Austria', + 'Azerbaijan', + 'Bahamas (the)', + 'Bahrain', + 'Bangladesh', + 'Barbados', + 'Belarus', + 'Belgium', + 'Belize', + 'Benin', + 'Bermuda', + 'Bhutan', + 'Bolivia (Plurinational State of)', + 'Bonaire, Sint Eustatius and Saba', + 'Bosnia and Herzegovina', + 'Botswana', + 'Bouvet Island', + 'Brazil', + 'British Indian Ocean Territory (the)', + 'Brunei Darussalam', + 'Bulgaria', + 'Burkina Faso', + 'Burundi', + 'Cabo Verde', + 'Cambodia', + 'Cameroon', + 'Canada', + 'Cayman Islands (the)', + 'Central African Republic (the)', + 'Chad', + 'Chile', + 'China', + 'Christmas Island', + 'Cocos (Keeling) Islands (the)', + 'Colombia', + 'Comoros (the)', + 'Congo (the Democratic Republic of the)', + 'Congo (the)', + 'Cook Islands (the)', + 'Costa Rica', + 'Croatia', + 'Cuba', + 'Curaçao', + 'Cyprus', + 'Czechia', + "Côte d'Ivoire", + 'Denmark', + 'Djibouti', + 'Dominica', + 'Dominican Republic (the)', + 'Ecuador', + 'Egypt', + 'El Salvador', + 'Equatorial Guinea', + 'Eritrea', + 'Estonia', + 'Eswatini', + 'Ethiopia', + 'Falkland Islands (the) [Malvinas]', + 'Faroe Islands (the)', + 'Fiji', + 'Finland', + 'France', + 'French Guiana', + 'French Polynesia', + 'French Southern Territories (the)', + 'Gabon', + 'Gambia (the)', + 'Georgia', + 'Germany', + 'Ghana', + 'Gibraltar', + 'Greece', + 'Greenland', + 'Grenada', + 'Guadeloupe', + 'Guam', + 'Guatemala', + 'Guernsey', + 'Guinea', + 'Guinea-Bissau', + 'Guyana', + 'Haiti', + 'Heard Island and McDonald Islands', + 'Holy See (the)', + 'Honduras', + 'Hong Kong', + 'Hungary', + 'Iceland', + 'India', + 'Indonesia', + 'Iran (Islamic Republic of)', + 'Iraq', + 'Ireland', + 'Isle of Man', + 'Israel', + 'Italy', + 'Jamaica', + 'Japan', + 'Jersey', + 'Jordan', + 'Kazakhstan', + 'Kenya', + 'Kiribati', + "Korea (the Democratic People's Republic of)", + 'Korea (the Republic of)', + 'Kuwait', + 'Kyrgyzstan', + "Lao People's Democratic Republic (the)", + 'Latvia', + 'Lebanon', + 'Lesotho', + 'Liberia', + 'Libya', + 'Liechtenstein', + 'Lithuania', + 'Luxembourg', + 'Macao', + 'Madagascar', + 'Malawi', + 'Malaysia', + 'Maldives', + 'Mali', + 'Malta', + 'Marshall Islands (the)', + 'Martinique', + 'Mauritania', + 'Mauritius', + 'Mayotte', + 'Mexico', + 'Micronesia (Federated States of)', + 'Moldova (the Republic of)', + 'Monaco', + 'Mongolia', + 'Montenegro', + 'Montserrat', + 'Morocco', + 'Mozambique', + 'Myanmar', + 'Namibia', + 'Nauru', + 'Nepal', + 'Netherlands (the)', + 'New Caledonia', + 'New Zealand', + 'Nicaragua', + 'Niger (the)', + 'Nigeria', + 'Niue', + 'Norfolk Island', + 'Northern Mariana Islands (the)', + 'Norway', + 'Oman', + 'Pakistan', + 'Palau', + 'Palestine, State of', + 'Panama', + 'Papua New Guinea', + 'Paraguay', + 'Peru', + 'Philippines (the)', + 'Pitcairn', + 'Poland', + 'Portugal', + 'Puerto Rico', + 'Qatar', + 'Republic of North Macedonia', + 'Romania', + 'Russian Federation (the)', + 'Rwanda', + 'Réunion', + 'Saint Barthélemy', + 'Saint Helena, Ascension and Tristan da Cunha', + 'Saint Kitts and Nevis', + 'Saint Lucia', + 'Saint Martin (French part)', + 'Saint Pierre and Miquelon', + 'Saint Vincent and the Grenadines', + 'Samoa', + 'San Marino', + 'Sao Tome and Principe', + 'Saudi Arabia', + 'Senegal', + 'Serbia', + 'Seychelles', + 'Sierra Leone', + 'Singapore', + 'Sint Maarten (Dutch part)', + 'Slovakia', + 'Slovenia', + 'Solomon Islands', + 'Somalia', + 'South Africa', + 'South Georgia and the South Sandwich Islands', + 'South Sudan', + 'Spain', + 'Sri Lanka', + 'Sudan (the)', + 'Suriname', + 'Svalbard and Jan Mayen', + 'Sweden', + 'Switzerland', + 'Syrian Arab Republic', + 'Taiwan', + 'Tajikistan', + 'Tanzania, United Republic of', + 'Thailand', + 'Timor-Leste', + 'Togo', + 'Tokelau', + 'Tonga', + 'Trinidad and Tobago', + 'Tunisia', + 'Turkey', + 'Turkmenistan', + 'Turks and Caicos Islands (the)', + 'Tuvalu', + 'Uganda', + 'Ukraine', + 'United Arab Emirates (the)', + 'United Kingdom of Great Britain and Northern Ireland (the)', + 'United States Minor Outlying Islands (the)', + 'United States of America (the)', + 'Uruguay', + 'Uzbekistan', + 'Vanuatu', + 'Venezuela (Bolivarian Republic of)', + 'Viet Nam', + 'Virgin Islands (British)', + 'Virgin Islands (U.S.)', + 'Wallis and Futuna', + 'Western Sahara', + 'Yemen', + 'Zambia', + 'Zimbabwe', + 'Åland Islands', +]; diff --git a/src/components/NavBar/NavBarUserActions/NavBarUserActions.tsx b/src/components/NavBar/NavBarUserActions/NavBarUserActions.tsx index a37811c..f147cdb 100644 --- a/src/components/NavBar/NavBarUserActions/NavBarUserActions.tsx +++ b/src/components/NavBar/NavBarUserActions/NavBarUserActions.tsx @@ -1,4 +1,4 @@ -import { Avatar, Box, Button, Dialog, DialogActions, DialogTitle, IconButton } from '@material-ui/core'; +import { Avatar, Box, Button, Dialog, DialogActions, DialogTitle, IconButton, Switch } from '@material-ui/core'; import { EmojiPeople, ExitToApp, PersonAdd } from '@material-ui/icons'; import React, { useCallback, useMemo, useState } from 'react'; import useAuthActions from '../../../Auth/useAuthActions'; @@ -8,6 +8,7 @@ import useTexts from '../../../hooks/useTexts'; import { theme } from '../../../utils/theme'; import Login from '../../LoginForm'; import RegisterForm from '../../RegisterForm'; +import RegisterFormCompany from '../../RegisterFormCompany'; import ModalForm from './ModalForm/ModalForm'; const NavBarUserActions: React.FC = () => { @@ -19,7 +20,11 @@ const NavBarUserActions: React.FC = () => { const [isLogoutDialogOpen, setIsLogoutDialogOpen] = useState(false); const [isLoginDialogOpen, setIsLoginDialogOpen] = useState(false); const [isRegisterDialogOpen, setIsRegisterDialogOpen] = useState(false); + const [registerFormSwitch, setRegisterFormSwitch] = React.useState(true); + const handleRegisterFormSwitch = useCallback(() => { + setRegisterFormSwitch((prevSwitch) => !prevSwitch); + }, []); const handleSwitchToRegister = useCallback(() => { setIsLoginDialogOpen(false); setIsRegisterDialogOpen(true); @@ -99,7 +104,13 @@ const NavBarUserActions: React.FC = () => { sidebarDescription={texts.navBarUserActionsRegisterModalSidebarDescription} maxWidth="lg" > - setIsRegisterDialogOpen(false)} /> + {registerFormSwitch ? ( + setIsRegisterDialogOpen(false)} /> + ) : ( + setIsRegisterDialogOpen(false)} /> + )} + + {snackBarComponent} {loggedIn ? loggedInContent : loggedOutContent} diff --git a/src/components/RegisterFormCompany/RegisterFormCompany.tsx b/src/components/RegisterFormCompany/RegisterFormCompany.tsx new file mode 100644 index 0000000..9f07719 --- /dev/null +++ b/src/components/RegisterFormCompany/RegisterFormCompany.tsx @@ -0,0 +1,288 @@ +import React, { useMemo, useState } from 'react'; +import { TextField, InputAdornment, Box, Button, LinearProgress, Divider, MenuItem } from '@material-ui/core'; +import { AccountCircle, Lock, Email, Phone, Language, Room } from '@material-ui/icons'; +import { theme } from '../../utils/theme'; +import useAuthActions from '../../Auth/useAuthActions'; +import useTexts from '../../hooks/useTexts'; +import { Alert } from '@material-ui/lab'; +import { useForm } from 'react-hook-form'; +import config from '../../config/config'; +import useResponsive from '../../hooks/useResponsive'; +import { countryList } from '../CountryList/countryList'; + +const EMAIL_VALIDATION_REGEX = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; + +interface Inputs { + email: string; + username: string; + password: string; + confirmPassword: string; + companyname: string; + number: string; + location: string; + website: string; +} + +interface Props { + onSuccess?: () => void; +} + +const RegisterFormCompany: React.FC = ({ onSuccess }) => { + const countrylist = countryList; + const texts = useTexts(); + const { register: userRegister } = useAuthActions(); + const { call: httpRegister, loading } = userRegister; + const { isTabletOrMobile } = useResponsive(); + + const [error, setError] = useState(false); + const [registerSuccess, setRegisterSuccess] = useState(false); + const [selectedRole, setSelectedLocation] = useState('Netherlands'); + + const { register, handleSubmit, setValue, errors, watch } = useForm(); + + const handleFormSubmit = async (inputs: Inputs) => { + const { email, username, password } = inputs; + setError(false); + + const result = await httpRegister({ email, username, password }); + + if (result.success) { + setRegisterSuccess(true); + + setTimeout(() => { + if (onSuccess) onSuccess(); + }, config.afterLoginRedirectTime); + } else { + setError(result.message); + } + }; + const handleLocationSelect = (event: React.ChangeEvent<{ value: unknown }>) => { + const value = event.target.value as string; + setSelectedLocation(value); + setValue('location', value); + }; + + const loader = useMemo( + () => ( + + + + ), + [registerSuccess] + ); + return ( +
+ + + {(loading || registerSuccess) && loader} + {error && ( + + {error} + + )} + {registerSuccess && ( + + {texts.registerSuccessfullText} + + )} + + + + ), + }} + /> + + + + ), + }} + /> + + + + ), + }} + /> + value === watch('password') || texts.registerErrorPasswordMatch, + })} + label={texts.registerCompanyConfirmPasswordLabel} + placeholder={texts.registerCompanyConfirmPasswordPlaceholder} + helperText={errors.confirmPassword && errors.confirmPassword.message} + disabled={loading} + error={!!errors.confirmPassword || !!error} + margin="normal" + fullWidth + InputProps={{ + startAdornment: ( + + + + ), + }} + /> + + + + + + + + + ), + }} + /> + + + + ), + }} + /> + + + + ), + }} + > + {countrylist.map((country) => ( + + {country} + + ))} + + + + + ), + }} + /> + + + + + +
+ ); +}; +export default RegisterFormCompany; diff --git a/src/components/RegisterFormCompany/index.ts b/src/components/RegisterFormCompany/index.ts new file mode 100644 index 0000000..301ddcb --- /dev/null +++ b/src/components/RegisterFormCompany/index.ts @@ -0,0 +1 @@ +export { default } from './RegisterFormCompany'; diff --git a/src/routes/Router.tsx b/src/routes/Router.tsx index da9bd26..c28ff52 100644 --- a/src/routes/Router.tsx +++ b/src/routes/Router.tsx @@ -6,6 +6,7 @@ import AddProductPage from '../pages/AddProductPage'; import ForCompanyPage from '../pages/ForCompanyPage'; import SearchProductsPage from '../pages/SearchProductsPage'; import RegisterForm from '../components/RegisterForm/RegisterForm'; +import RegisterCompany from '../components/RegisterFormCompany/RegisterFormCompany'; const Router: React.FC = () => { return ( @@ -14,6 +15,7 @@ const Router: React.FC = () => { + diff --git a/src/utils/defaultTexts.ts b/src/utils/defaultTexts.ts index 8f03ad3..13dc999 100644 --- a/src/utils/defaultTexts.ts +++ b/src/utils/defaultTexts.ts @@ -49,6 +49,24 @@ const defaultTexts = { registerErrorPasswordMatch: "Passwords don't match", registerErrorEmailNotValid: 'Please enter valid email address', + //RegisterFormCompany.tsx + registerCompanyEmailLabel: 'Email*', + registerCompanyEmailPlaceholder: 'fontys@fontys.nl', + registerCompanyUsernameLabel: 'Username*', + registerCompanyUsernamePlaceholder: 'fontysEdtech', + registerCompanyPasswordLabel: 'Password*', + registerCompanyPasswordPlaceholder: 'Password', + registerCompanyConfirmPasswordPlaceholder: 'Password', + registerCompanyConfirmPasswordLabel: 'Confirm Password*', + registerCompanyNameLabel: 'Name*', + registerCompanyNamePlaceholder: 'Fontys University', + registerCompanyNumberLabel: 'Mobile number (optional)', + registerCompanyNumberPlaceholder: '+31 00 00 001', + registerCompanyLocationLabel: 'Country*', + registerCompanyLocationPlaceholder: 'Netherlands', + registerCompanyWebsiteLabel: 'Website-url*', + registerCompanyWebsitePlaceholder: 'fontys.nl', + // NavBarUserActions.tsx navBarUserActionsLogin: 'Login', navBarUserActionsSignUp: 'Sign up',