From be5fdb0f19e058d95b6917ea8cba8da5b952cc87 Mon Sep 17 00:00:00 2001 From: Souvik Khan Date: Sat, 10 Aug 2024 02:25:25 +0530 Subject: [PATCH 1/5] disabled login button when fields are empty --- src/components/Signin.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/Signin.tsx b/src/components/Signin.tsx index 6c0fd3e50..2119d7b8a 100644 --- a/src/components/Signin.tsx +++ b/src/components/Signin.tsx @@ -15,6 +15,10 @@ const Signin = () => { emailReq: false, passReq: false, }); + const [isButtonDisabled, setisButtonDisabled] = useState({ + isEmail: true, + isPassword: true, + }); function togglePasswordVisibility() { setIsPasswordVisible((prevState: any) => !prevState); @@ -72,6 +76,10 @@ const Signin = () => { ...prevState, emailReq: false, })); + setisButtonDisabled((prevState) => ({ + ...prevState, + isEmail: e.target.value.trim() === '' ? true : false, + })); email.current = e.target.value; }} /> @@ -93,6 +101,10 @@ const Signin = () => { ...prevState, passReq: false, })); + setisButtonDisabled((prevState) => ({ + ...prevState, + isPassword: e.target.value.trim() === '' ? true : false, + })); password.current = e.target.value; }} onKeyDown={async (e) => { @@ -151,7 +163,7 @@ const Signin = () => { - - -
- { - upiAddresses?.length !== 0 ? ( - upiAddresses?.map((upi, index) => ( -
-

{upi.value}

- -
- )) - ) : -
-

No addresses added yet!

-
- } -
- + return ( +
+
+
+

Payout Methods

+
+
+
+
+

UPI Addresses

+ + +
+
+ {upiAddresses?.length !== 0 ? ( + upiAddresses?.map((upi, index) => ( +
+

+ {upi.value} +

+ +
+ )) + ) : ( +
+

No addresses added yet!

-
-
-
-

Solana Addresses

- -
-
- { - solanaAddresses?.length !== 0 ? ( - solanaAddresses?.map((sol, index) => ( -
-

{sol.value}

- -
- )) - ) : -
-

No addresses added yet!

-
- } -
-
+ )} +
+
+
+
+
+
+

Solana Addresses

+ +
+
+ {solanaAddresses?.length !== 0 ? ( + solanaAddresses?.map((sol, index) => ( +
+

+ {sol.value} +

+ +
+ )) + ) : ( +
+

No addresses added yet!

- + )}
+
- ); -} \ No newline at end of file +
+
+ ); +} diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index dbeaada3f..78e2dac42 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -121,10 +121,11 @@ export function Sidebar({
@@ -189,12 +190,14 @@ export function ToggleButton({ className={`block h-0.5 w-6 rounded-sm bg-black transition-all duration-300 ease-out dark:bg-white ${!sidebarOpen ? 'translate-y-1 rotate-45' : '-translate-y-0.5'}`} > ); diff --git a/src/components/Signin.tsx b/src/components/Signin.tsx index 2119d7b8a..a8261dddc 100644 --- a/src/components/Signin.tsx +++ b/src/components/Signin.tsx @@ -1,31 +1,27 @@ 'use client'; + import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { signIn } from 'next-auth/react'; import { useRouter } from 'next/navigation'; -import React, { useRef, useState } from 'react'; - +import React, { useState } from 'react'; import { toast } from 'sonner'; + const Signin = () => { const [isPasswordVisible, setIsPasswordVisible] = useState(false); - const [checkingPassword, setCheckingPassword] = useState(false); const [requiredError, setRequiredError] = useState({ emailReq: false, passReq: false, }); - const [isButtonDisabled, setisButtonDisabled] = useState({ - isEmail: true, - isPassword: true, - }); + const router = useRouter(); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); function togglePasswordVisibility() { setIsPasswordVisible((prevState: any) => !prevState); } - const router = useRouter(); - const email = useRef(''); - const password = useRef(''); const handleSubmit = async (e?: React.FormEvent) => { const loadId = toast.loading('Signing in...'); @@ -33,18 +29,19 @@ const Signin = () => { e.preventDefault(); } - if (!email.current || !password.current) { + if (!email.trim() || !password.trim()) { setRequiredError({ - emailReq: email.current ? false : true, - passReq: password.current ? false : true, + emailReq: email.trim() ? false : true, + passReq: password.trim() ? false : true, }); - toast.dismiss(loadId); + setTimeout(() => { + toast.dismiss(loadId); + }, 0); return; } - setCheckingPassword(true); const res = await signIn('credentials', { - username: email.current, - password: password.current, + username: email, + password, redirect: false, }); @@ -53,8 +50,7 @@ const Signin = () => { router.push('/'); toast.success('Signed In'); } else { - toast.error('oops something went wrong..!'); - setCheckingPassword(false); + toast.error('Invalid credentials'); } }; return ( @@ -72,15 +68,11 @@ const Signin = () => { id="email" placeholder="name@email.com" onChange={(e) => { + setEmail(e.target.value); setRequiredError((prevState) => ({ ...prevState, emailReq: false, })); - setisButtonDisabled((prevState) => ({ - ...prevState, - isEmail: e.target.value.trim() === '' ? true : false, - })); - email.current = e.target.value; }} /> {requiredError.emailReq && ( @@ -97,15 +89,11 @@ const Signin = () => { id="password" placeholder="••••••••" onChange={(e) => { + setPassword(e.target.value); setRequiredError((prevState) => ({ ...prevState, passReq: false, })); - setisButtonDisabled((prevState) => ({ - ...prevState, - isPassword: e.target.value.trim() === '' ? true : false, - })); - password.current = e.target.value; }} onKeyDown={async (e) => { if (e.key === 'Enter') { @@ -163,7 +151,7 @@ const Signin = () => {
-
+
{ }} />