-
Notifications
You must be signed in to change notification settings - Fork 2
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 #55 from Bug-Bust3rs/dev
feat : backend connect
- Loading branch information
Showing
19 changed files
with
461 additions
and
116 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 |
|---|---|---|
|
|
@@ -13,3 +13,6 @@ export interface User { | |
| location: string; | ||
| password: string; | ||
| } | ||
|
|
||
|
|
||
|
|
||
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 |
|---|---|---|
|
|
@@ -7,6 +7,7 @@ yarn-error.log* | |
| pnpm-debug.log* | ||
| lerna-debug.log* | ||
|
|
||
| .env | ||
| node_modules | ||
| dist | ||
| dist-ssr | ||
|
|
||
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
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 |
|---|---|---|
| @@ -1,10 +1,12 @@ | ||
| import { useState } from "react"; | ||
| import log_img from "../../assets/login-animate.svg"; | ||
| import { Link } from "react-router-dom"; | ||
| import { useLogin } from "../../hooks/useLogin"; | ||
|
|
||
| export default function Login(): JSX.Element { | ||
| const [email, setEmail] = useState<string>(""); | ||
| const [password, setPassword] = useState<string>(""); | ||
| const { login, error, isLoading, isSucess } = useLogin(); | ||
|
|
||
| const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => { | ||
| setEmail(event.target.value); | ||
|
|
@@ -16,6 +18,11 @@ export default function Login(): JSX.Element { | |
|
|
||
| const handleClick = async (event: React.FormEvent<HTMLFormElement>) => { | ||
| event.preventDefault(); | ||
| const loginData = { | ||
| email, | ||
| password, | ||
| }; | ||
| await login(loginData); | ||
| }; | ||
|
|
||
| return ( | ||
|
|
@@ -26,45 +33,70 @@ export default function Login(): JSX.Element { | |
| </div> | ||
| <div className="p-5 flex flex-col justify-around"> | ||
| <form onSubmit={handleClick}> | ||
| <h1 className="text-4xl ml-[40px] font-medium mb-8 dark:text-white">Welcome<span className="text-blue-400"> Back!</span></h1> | ||
| <h1 className="text-4xl ml-[40px] font-medium mb-8 dark:text-white"> | ||
| Welcome <span className="text-blue-400">Back!</span> | ||
| </h1> | ||
| <div> | ||
| <label className="poppins-medium ml-1 text-slate-600 dark:text-slate-300">Email Address</label> | ||
| <label htmlFor="email" className="poppins-medium ml-1 text-slate-600 dark:text-slate-300"> | ||
| Email Address | ||
| </label> | ||
| <input | ||
| id="email" | ||
| className="border px-3 py-2 w-[350px] rounded-xl bg-slate-100 dark:bg-slate-600 mt-3 dark:border-slate-600" | ||
| type="text" | ||
| type="email" | ||
| placeholder="[email protected]" | ||
| value={email} | ||
| onChange={handleEmailChange} | ||
| required | ||
| /> | ||
| </div> | ||
| <div className="mt-3"> | ||
| <label className="poppins-medium ml-1 text-slate-600 dark:text-slate-300">Enter Password</label> | ||
| <label htmlFor="password" className="poppins-medium ml-1 text-slate-600 dark:text-slate-300"> | ||
| Enter Password | ||
| </label> | ||
| <input | ||
| id="password" | ||
| className="border px-3 py-2 w-[350px] rounded-xl bg-slate-100 dark:bg-slate-600 mt-3 dark:border-slate-600" | ||
| type="password" | ||
| placeholder="Your Password" | ||
| value={password} | ||
| onChange={handlePasswordChange} | ||
| required | ||
| /> | ||
| </div> | ||
| <div className="ml-56"> | ||
| <button className="mt-3 font-normal text-base text-blue-500"><Link to='/forgot-password'>Forgot Password?</Link></button> | ||
| <div className="ml-56 mt-3"> | ||
| <button className="font-normal text-base text-blue-500"> | ||
| <Link to='/forgot-password'>Forgot Password?</Link> | ||
| </button> | ||
| </div> | ||
| <button | ||
| type="submit" | ||
| disabled={isLoading} | ||
| className="ml-14 mt-3 w-[230px] active:scale-[.98] active:duration-75 hover:scale-[1.01] ease-in-out transition-all p-2.5 rounded-3xl bg-gradient-to-r from-blue-700 to-blue-500 text-white text-lg font-semibold poppins-extrabold" | ||
| key="1" | ||
| > | ||
| <p>Log in</p> | ||
| {isLoading ? "Logging in..." : "Log in"} | ||
| </button> | ||
| <div className="mt-6 flex ml-[50px]"> | ||
| <p className="font-medium text-base dark:text-slate-300">Did not have an Account?</p> | ||
| <button className="text-blue-500 text-base font-normal ml-2"> | ||
| <Link to="/register">Register</Link> | ||
| </button> | ||
| <p className="font-medium text-base dark:text-slate-300">Don't have an Account?</p> | ||
| <Link to="/register"> | ||
| <button className="text-blue-500 text-base font-normal ml-2"> | ||
| Register | ||
| </button> | ||
| </Link> | ||
| </div> | ||
| </form> | ||
| {error && ( | ||
| <div className="bg-rose-200 text-rose-500 p-5 rounded-lg mt-4"> | ||
| {error} | ||
| </div> | ||
| )} | ||
| {isSucess && ( | ||
| <div className="bg-green-200 text-green-500 p-5 rounded-lg mt-4"> | ||
| Successfully logged in! | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </main> | ||
| ); | ||
| } | ||
| } | ||
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.