Skip to content

Commit

Permalink
Making the button work better
Browse files Browse the repository at this point in the history
  • Loading branch information
charlotteconze committed Jan 21, 2024
1 parent ae8b7c5 commit d728f9b
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 9 deletions.
88 changes: 87 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,16 @@
"@fortawesome/fontawesome-svg-core": "^6.5.1",
"@fortawesome/free-solid-svg-icons": "^6.5.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"@hookform/resolvers": "^3.3.4",
"dotenv": "^16.3.1",
"moon-loader": "^0.1.0",
"react": "^18.2.0",
"react-calendar": "^4.8.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.48.2",
"react-router-dom": "^6.18.0",
"react-spinners": "^0.13.8"
"react-spinners": "^0.13.8",
"yup": "^1.3.3"
},
"devDependencies": {
"@testing-library/react": "^14.0.0",
Expand Down
37 changes: 30 additions & 7 deletions src/pages/Login/Login.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import styles from "./Login.module.css";
import Button from "../../components/Button/Button";
import Icon from "../../components/CustomIcon/Icon";
import Input from "../../components/Input/Input";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import { Link } from "react-router-dom";
import { useState } from "react";
import { useForm } from "react-hook-form";
Expand All @@ -24,18 +26,32 @@ const Login = () => {
password: string;
}

const schema = yup.object().shape({
[FormValueNames.email]: yup
.string()
.email("Please enter a valid email address")
.required("Please enter an email address"),
[FormValueNames.password]: yup
.string()
.min(8, "Password must be at least 8 characters")
.required("Please enter a password"),
});

const {
register,
handleSubmit,
formState: { errors, isValid },
formState: { errors },
} = useForm<FormValues>({
defaultValues: {
[FormValueNames.email]: "",
[FormValueNames.password]: "",
},
mode: "all", // Use 'all' mode to check all fields for validation
resolver: yupResolver(schema),
mode: "onChange",
});

console.log(errors);

return (
<>
<img
Expand All @@ -59,7 +75,7 @@ const Login = () => {
>
<div className={styles.loginInputContainerUpper}>
<Input
name="Email"
name="email"
register={register}
error={errors[FormValueNames.email]?.message}
label="Email"
Expand All @@ -69,10 +85,10 @@ const Login = () => {
</div>
<div className={styles.loginInputContainerLower}>
<Input
name="Email"
name="password"
register={register}
error={errors[FormValueNames.email]?.message}
label="Email"
error={errors[FormValueNames.password]?.message}
label="Password"
type={passwordVisible ? "text" : "password"}
placeholder="Password"
/>
Expand All @@ -91,7 +107,14 @@ const Login = () => {
Forgot password?
</Link>
</div>
<Button onClick={Submit} text={"Login"} disabled={!isValid} />
<Button
onClick={Submit}
text={"Login"}
disabled={
!!errors[FormValueNames.email] ||
!!errors[FormValueNames.password]
}
/>
</form>
</div>
</div>
Expand Down

0 comments on commit d728f9b

Please sign in to comment.