From cce41c709fc6403c7e4175d5e2b4e2b89144e365 Mon Sep 17 00:00:00 2001 From: Xharles Date: Wed, 28 Feb 2024 16:39:00 +0100 Subject: [PATCH 1/3] style auth input --- packages/frontend/src/components/auth/Auth.tsx | 2 +- packages/frontend/src/containers/dialogs/AuthContainer.tsx | 2 +- packages/ui-kit/src/mobile-components/auth/EmailInput.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/frontend/src/components/auth/Auth.tsx b/packages/frontend/src/components/auth/Auth.tsx index c9daec00..3089cf8c 100644 --- a/packages/frontend/src/components/auth/Auth.tsx +++ b/packages/frontend/src/components/auth/Auth.tsx @@ -28,7 +28,7 @@ export const Auth: FC = ({ const isValidEmail = useMemo(() => validateEmail(email), [email]); return authState.status === EAuthState.VerifyingEmail ? (
-

+

Enter the 6 digit verification code we sent to{" "}

diff --git a/packages/frontend/src/containers/dialogs/AuthContainer.tsx b/packages/frontend/src/containers/dialogs/AuthContainer.tsx index 479e57ac..8b3be1a4 100644 --- a/packages/frontend/src/containers/dialogs/AuthContainer.tsx +++ b/packages/frontend/src/containers/dialogs/AuthContainer.tsx @@ -86,7 +86,7 @@ const AuthContainer = () => { authState.status === EAuthState.SelectingMethod } useKeyPress={useKeyPress} - closeButtonProps={{ className: "border-0" }} + closeButtonProps={{ className: "border-0 [&_svg]:w-3 [&_svg]:h-3" }} onClose={resetAuthState} > = ({ return (

- + Enter your email address to get started Date: Wed, 28 Feb 2024 16:56:52 +0100 Subject: [PATCH 2/3] fix otp verification stuck after paste --- .../frontend/src/components/auth/Auth.tsx | 19 ++++++++++++++----- .../frontend/src/components/auth/OtpInput.tsx | 5 ++++- .../src/containers/dialogs/AuthContainer.tsx | 5 +++++ 3 files changed, 23 insertions(+), 6 deletions(-) diff --git a/packages/frontend/src/components/auth/Auth.tsx b/packages/frontend/src/components/auth/Auth.tsx index 3089cf8c..ca06f79e 100644 --- a/packages/frontend/src/components/auth/Auth.tsx +++ b/packages/frontend/src/components/auth/Auth.tsx @@ -1,4 +1,5 @@ import { FC, useMemo } from "react"; +import { Spinner } from "@alphaday/ui-kit"; import { EmailInput } from "@alphaday/ui-kit/src/mobile-components/auth/EmailInput"; import { EAuthMethod, EAuthState, TUserAccess } from "src/api/types"; import { validateEmail } from "src/api/utils/accountUtils"; @@ -13,6 +14,7 @@ export interface AuthProps { handleSSOCallback: (provider: EAuthMethod) => void; handleEmailSubmit: () => void; handleEmailChange: (e: React.ChangeEvent) => void; + isVerifyingOTP: boolean; } const ENABLE_APPLE_AUTH = false; const OTP_INPUT_LENGTH = 6; @@ -24,6 +26,7 @@ export const Auth: FC = ({ handleSSOCallback, handleEmailSubmit, handleEmailChange, + isVerifyingOTP, }) => { const isValidEmail = useMemo(() => validateEmail(email), [email]); return authState.status === EAuthState.VerifyingEmail ? ( @@ -36,11 +39,17 @@ export const Auth: FC = ({

- + {isVerifyingOTP ? ( +
+ +
+ ) : ( + + )}
Didn't get a verification code?
diff --git a/packages/frontend/src/components/auth/OtpInput.tsx b/packages/frontend/src/components/auth/OtpInput.tsx index bede95f5..926db8f0 100644 --- a/packages/frontend/src/components/auth/OtpInput.tsx +++ b/packages/frontend/src/components/auth/OtpInput.tsx @@ -209,9 +209,12 @@ export function OTPInput(props: IOTPInputProps) { }); setOTPValues(updatedOTPValues); setActiveInput(Math.min(nextFocusIndex + 1, length - 1)); + if (updatedOTPValues.length === length) { + handleOtpChange(updatedOTPValues); + } } }, - [activeInput, getRightValue, length, otpValues] + [activeInput, getRightValue, handleOtpChange, length, otpValues] ); return ( diff --git a/packages/frontend/src/containers/dialogs/AuthContainer.tsx b/packages/frontend/src/containers/dialogs/AuthContainer.tsx index 8b3be1a4..de3129ac 100644 --- a/packages/frontend/src/containers/dialogs/AuthContainer.tsx +++ b/packages/frontend/src/containers/dialogs/AuthContainer.tsx @@ -12,6 +12,7 @@ import AuthModule from "src/components/auth/AuthModule"; const AuthContainer = () => { const [email, setEmail] = useState(""); const dispatch = useAppDispatch(); + const [verifyingOTP, setVerifyingOTP] = useState(false); const { authState, resetAuthState, requestCode, ssoLogin, verifyToken } = useAuth(); @@ -43,12 +44,15 @@ const AuthContainer = () => { const handleOtpSubmit = useCallback( (otp: string) => { + setVerifyingOTP(true); verifyToken(email, otp) .then(() => { toast("Successfully verified email"); + setVerifyingOTP(false); }) .catch(() => { toast("We couldn't verify your email. Please try again."); + setVerifyingOTP(false); Logger.error("Failed to verify OTP", otp); }); }, @@ -96,6 +100,7 @@ const AuthContainer = () => { handleSSOCallback={handleSSOCallback} handleEmailSubmit={handleEmailSubmit} handleEmailChange={handleEmailChange} + isVerifyingOTP={verifyingOTP} /> ); From 7c126d695e31c04c96988c2f6f8222b65083fb87 Mon Sep 17 00:00:00 2001 From: Xharles Date: Thu, 29 Feb 2024 10:50:46 +0100 Subject: [PATCH 3/3] lint fix --- packages/frontend/src/components/auth/Auth.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/components/auth/Auth.tsx b/packages/frontend/src/components/auth/Auth.tsx index ca06f79e..3f03d2a2 100644 --- a/packages/frontend/src/components/auth/Auth.tsx +++ b/packages/frontend/src/components/auth/Auth.tsx @@ -14,7 +14,7 @@ export interface AuthProps { handleSSOCallback: (provider: EAuthMethod) => void; handleEmailSubmit: () => void; handleEmailChange: (e: React.ChangeEvent) => void; - isVerifyingOTP: boolean; + isVerifyingOTP?: boolean; } const ENABLE_APPLE_AUTH = false; const OTP_INPUT_LENGTH = 6;