-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #94 from SEP4Y-S24/dev
Final product
- Loading branch information
Showing
13 changed files
with
203 additions
and
156 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| export const enum ERROR_HANDLING { | ||
| INVALID_EMAIL_FORMAT = 'Invalid email format. Please insert valid email.', | ||
| INVALID_PASSWORD_FORMAT = 'Password needs to be at least 1 character long.', | ||
| INVALID_NAME_FORMAT = 'Name needs to be at least 1 character long.', | ||
| EMAIL_REQUIRED = 'Email is required', | ||
| FAIL_LOADING_POKEMONS = "Error loading pokemons.", | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -12,12 +12,14 @@ import { useRegister } from "../../../lib/auth"; | |
| import { useQuery } from "@tanstack/react-query"; | ||
| import SpinnerComponent from "../../spinner/SpinnerComponent"; | ||
| import { CreateUserPropsRequest } from "../types"; | ||
| import {useNavigate} from "react-router"; | ||
| import { useNavigate } from "react-router"; | ||
| import PopUp from "../../../components/Elements/PopUp/PopUp"; | ||
| import {ERROR_HANDLING} from "./AuthenticationConstants"; | ||
|
|
||
| const schema = z.object({ | ||
| email: z.string().min(1, 'Email is required').email('Invalid email format. Please insert valid email.'), | ||
| password: z.string().min(1, 'Password needs to be at least 1 character long.'), | ||
| name: z.string().min(1, 'Name is required.') | ||
| email: z.string().min(1, ERROR_HANDLING.INVALID_EMAIL_FORMAT), | ||
| password: z.string().min(1, ERROR_HANDLING.INVALID_PASSWORD_FORMAT), | ||
| name: z.string().min(1, ERROR_HANDLING.INVALID_NAME_FORMAT), | ||
| }); | ||
|
|
||
| type RegisterValues = { | ||
|
|
@@ -32,20 +34,18 @@ const SLIDE_COUNT = 6 | |
| const SLIDES = Array.from(Array(SLIDE_COUNT).keys()) | ||
|
|
||
| export const Register = () => { | ||
| // for register form | ||
| const [values, setValues] = useState<RegisterValues>({ email: '', password: '', name: '', avatarId: '1' }); | ||
| const [errors, setErrors] = useState<{ [key: string]: string }>({}); | ||
| const [isSubmitting, setIsSubmitting] = useState(false); | ||
| // eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
| const [pokemonError, setPokemonError] = useState<string>(''); | ||
| const [showPopup, setShowPopup] = useState(false); // State to manage PopUp visibility | ||
| const [popupMessage, setPopupMessage] = useState(""); // State to manage PopUp message | ||
| const [emailsList, setEmailsList] = useState<string[]>([]); | ||
| const navigate = useNavigate(); | ||
|
|
||
| // for pokemon image slider | ||
| const [pokemonList, setPokemonList] = useState<Pokemon[]>([]); | ||
| const handlePokemonSelect = (pokemonId: string) => { | ||
| handleChange({ target: { name: 'avatarId', value: pokemonId } } as React.ChangeEvent<HTMLInputElement>) | ||
| }; | ||
| const navigate = useNavigate(); | ||
|
|
||
| const { isLoading, error, data } = useQuery({ | ||
| queryKey: ['pokemonList'], | ||
|
|
@@ -56,13 +56,6 @@ export const Register = () => { | |
| if (data) { | ||
| setPokemonList(data); | ||
| } | ||
| const emails: string[] = [ | ||
| "[email protected]", | ||
| "[email protected]" | ||
| ]; | ||
|
|
||
| setEmailsList(emails); | ||
|
|
||
| }, [data]); | ||
|
|
||
| const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { | ||
|
|
@@ -79,7 +72,11 @@ export const Register = () => { | |
| schema.parse(values); | ||
|
|
||
| if (emailsList.includes(values.email)) { | ||
| setErrors({ ...errors, email: 'Email is already taken' }); | ||
| // @ts-ignore | ||
| setErrors({ ...errors, email: register.error }); | ||
| // @ts-ignore | ||
| setPopupMessage(register.error); | ||
| setShowPopup(true); // Show PopUp with error message | ||
| setIsSubmitting(false); | ||
| return; | ||
| } | ||
|
|
@@ -95,21 +92,28 @@ export const Register = () => { | |
| onSuccess: () => { | ||
| navigate('/'); | ||
| }, | ||
| onError: () => { | ||
| onError: (error) => { | ||
| // @ts-ignore | ||
| setPopupMessage(error); | ||
| setShowPopup(true); // Show PopUp with error message | ||
| setIsSubmitting(false); | ||
| } | ||
| } ); | ||
| }); | ||
|
|
||
| setEmailsList([...emailsList, values.email]); | ||
| } catch (error) { | ||
| let displayedError:string = ''; | ||
| setIsSubmitting(false); | ||
| if (error instanceof z.ZodError) { | ||
| const fieldErrors: { [key: string]: string } = {}; | ||
| error.errors.forEach(err => { | ||
| const path = err.path.join('.'); | ||
| fieldErrors[path] = err.message; | ||
| displayedError = err.message; | ||
| }); | ||
| setErrors(fieldErrors); | ||
| setPopupMessage(displayedError); | ||
| setShowPopup(true); // Show PopUp with validation errors | ||
| } | ||
| } | ||
| }; | ||
|
|
@@ -123,34 +127,24 @@ export const Register = () => { | |
| </div> | ||
| <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm"> | ||
| <div> | ||
| <InputField type={"text"} id={"name"} labelText={"Name"} name={"name"} | ||
| onChange={handleChange} | ||
| error={errors.name} /> | ||
| <InputField type={"text"} id={"name"} labelText={"Name"} name={"name"} onChange={handleChange} /> | ||
| </div> | ||
| <div> | ||
| <InputField type={"email"} id={"email"} labelText={"Email address"} name={"email"} | ||
| onChange={handleChange} | ||
| error={errors.email} /> | ||
| <InputField type={"email"} id={"email"} labelText={"Email address"} name={"email"} onChange={handleChange}/> | ||
| </div> | ||
| <div> | ||
| <InputField type={"password"} id={"password"} labelText={"Password"} name={"password"} | ||
| onChange={handleChange} | ||
| error={errors.password} /> | ||
| <InputField type={"password"} id={"password"} labelText={"Password"} name={"password"} onChange={handleChange}/> | ||
| </div> | ||
| <label | ||
| className="block my-2 text-base font-normal text-dark"> Choose your avatar: | ||
| </label> | ||
| <label className="block my-2 text-base font-normal text-dark"> Choose your avatar:</label> | ||
| {isLoading && <SpinnerComponent />} | ||
| {error && <p className={"text-red-500"}>{"Error loading pokemons"}</p>} | ||
| {data && <EmblaCarousel data={pokemonList} slides={SLIDES} options={OPTIONS} | ||
| onSelect={handlePokemonSelect} />} | ||
| {error && <p className={"text-red-500"}>{ERROR_HANDLING.FAIL_LOADING_POKEMONS}</p>} | ||
| {data && <EmblaCarousel data={pokemonList} slides={SLIDES} options={OPTIONS} onSelect={handlePokemonSelect} />} | ||
|
|
||
| <div className={"pt-5"}> | ||
| {isSubmitting ? ( | ||
| <SpinnerComponent /> | ||
| ) : ( | ||
| <Button text={"Register"} styleType={"info"} className={"w-full justify-center"} | ||
| type="submit" /> | ||
| <Button text={"Register"} styleType={"info"} className={"w-full justify-center"} type="submit" /> | ||
| )} | ||
| </div> | ||
| <p className="mt-10 text-center text-sm text-gray-500"> | ||
|
|
@@ -160,6 +154,16 @@ export const Register = () => { | |
| </div> | ||
| </div> | ||
| </Form> | ||
|
|
||
| {showPopup && ( | ||
| <PopUp | ||
| title="Error" | ||
| textAlert={popupMessage} | ||
| type="danger" | ||
| buttonCancelText="Close" | ||
| onCancel={() => setShowPopup(false)} | ||
| /> | ||
| )} | ||
| </Layout> | ||
| ); | ||
| }; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.