From 64e1ed1f869f5b1b00aa26306da8888158866eca Mon Sep 17 00:00:00 2001 From: Fergal Moran Date: Mon, 6 Mar 2023 17:11:43 +0000 Subject: [PATCH] Add login error handlers --- web/.env | 7 - web/src/components/pages/auth/LoginPage.tsx | 52 ++-- web/src/components/pages/auth/SignupPage.tsx | 309 +++++++++---------- web/src/lib/util/validationUtils.ts | 4 + web/src/pages/api/debug/index.ts | 2 +- 5 files changed, 181 insertions(+), 193 deletions(-) create mode 100644 web/src/lib/util/validationUtils.ts diff --git a/web/.env b/web/.env index abfa06f..4bbd326 100644 --- a/web/.env +++ b/web/.env @@ -5,11 +5,4 @@ QSTASH_CURRENT_SIGNING_KEY=khs3lpVBv1QtV/L9MTdXlcnoI8tTlg0aDfrFz+o8utA= #auth GOOGLE_APPLICATION_CREDENTIALS=serviceAccount.json -#calendar api -GOOGLE_CALENDAR_PROJECT_ID=47147490249 -GOOGLE_CALENDAR_ID=geh501qel59lf3505v2huebo18@group.calendar.google.com -LIVE_GOOGLE_CALENDAR_ID=geh501qel59lf3505v2huebo18@group.calendar.google.com -DEBUG_GOOGLE_CALENDAR_ID=7732f7973f574db2638371394769a94aad5e38b98362d528cd985728d98cf3bd@group.calendar.google.com -GOOGLE_CALENDAR_API_KEY=AIzaSyAMvrSrwqvz9o4Y8b-0zneU-REWDIzuKR0 -GOOGLE_CALENDAR_CREDENTIALS_CLIENT_EMAIL="otherway-calendar-proxy@radio-otherway.iam.gserviceaccount.com" diff --git a/web/src/components/pages/auth/LoginPage.tsx b/web/src/components/pages/auth/LoginPage.tsx index 47dfb37..fa3523c 100644 --- a/web/src/components/pages/auth/LoginPage.tsx +++ b/web/src/components/pages/auth/LoginPage.tsx @@ -21,11 +21,41 @@ const LoginPage = () => { const login = async ( event: React.SyntheticEvent ): Promise => { - const result = await signIn(email, password); + setError(""); + try { + const result = await signIn(email, password); + if (result && result.user) { + router.push("/"); + } else { + setError("Unable to log you in, please check your email & password"); + } + } catch (err) { + setError("Unable to log you in, please check your email & password"); + } }; return (

Account Login

+ {error && ( +
+
+ + + + {error} +
+
+ )}
- {error && ( -
-
- - - - {error} -
-
- )}
diff --git a/web/src/components/pages/auth/SignupPage.tsx b/web/src/components/pages/auth/SignupPage.tsx index a770798..768c7a6 100644 --- a/web/src/components/pages/auth/SignupPage.tsx +++ b/web/src/components/pages/auth/SignupPage.tsx @@ -5,173 +5,154 @@ import { IoLogoFacebook, IoLogoGoogle, IoLogoTwitter } from "react-icons/io"; import { AiOutlineExclamationCircle } from "react-icons/ai"; import { Info } from "react-feather"; +import useFirebaseAuth from "@/lib/auth/signin"; +import { FacebookButton, GoogleButton, TwitterButton } from "@/components/widgets/buttons/social"; +import ToastService from "@/components/widgets/toast"; +import { validateEmail } from "@/lib/util/validationUtils"; const SignupPage = () => { - return
Signup Page
; - // const { - // signInWithGoogle, - // signInWithFacebook, - // signInWithTwitter, - // profile, - // signUp, - // linkAccounts, - // } = useFirebaseAuth(); - // const router = useRouter(); - // const [error, setError] = React.useState(""); - // const [email, setEmail] = React.useState(""); - // const [password, setPassword] = React.useState(""); - // const [confirmPassword, setConfirmPassword] = React.useState(""); + const { + signInWithGoogle, + signInWithFacebook, + signInWithTwitter, + signUp + } = useFirebaseAuth(); + const router = useRouter(); + const [error, setError] = React.useState(""); + const [email, setEmail] = React.useState(""); + const [password, setPassword] = React.useState(""); + const [confirmPassword, setConfirmPassword] = React.useState(""); + const register = async ( + $event: React.SyntheticEvent + ): Promise => { + setError(""); + $event.preventDefault(); + if (!validateEmail(email)) { + setError("Please enter a valid email address"); + return; + } + if (!password) { + setError("Please enter a password"); + return; + } + if (password !== confirmPassword) { + setError("Passwords do not match"); + return; + } + setError(""); + const result = await signUp(email, password); + if (result === "") { + setError(""); + ToastService.success("Account successfully created"); + router.push("/"); + } else if (result === "auth/email-already-in-use") { + // setError(""); + setError("This email address has already been used to create an account."); + } else if (result === "auth/invalid-email") { + setError("Please enter a correct email address"); + } else { + setError("Unable to create an account for you at this time"); + } + }; + return ( +
+

+ Create New Account +

+ {error && ( +
+
+ + + + {error} +
+
+ )} +
+
+ + { + setEmail(event.target.value); + }} + /> +
+
+
+ +
+ { + setPassword(event.target.value); + }} + /> +
+
+
+ +
+ { + setConfirmPassword(event.target.value); + }} + /> +
+
+ +
- // const [linking, setLinking] = React.useState(false); - // const register = async ( - // $event: React.SyntheticEvent - // ): Promise => { - // $event.preventDefault(); - // setError(""); - // setLinking(false); - // const result = await signUp(email, password); - // if (result === "auth/email-already-in-use") { - // setLinking(true); - // setError(""); - // // setError("This email address has already been used to create an account."); - // } else if (result === "auth/invalid-email") { - // setError("Please enter a correct email address"); - // } else { - // setError("Unable to create an account for you at this time"); - // } - // }; - // return ( - //
- //

- // Create New Account - //

- // {error && ( - //
- //
- // - // - // - // {error} - //
- //
- // )} - // - //
- // - // { - // setEmail(event.target.value); - // }} - // /> - //
- //
- //
- // - //
- // { - // setPassword(event.target.value); - // }} - // /> - //
- //
- //
- // - //
- // { - // setConfirmPassword(event.target.value); - // }} - // /> - //
- //
- // - //
- - //
- // - // - // or sign up with - // - // - //
- // - // - // - //
- //
- // - //
- // ); +
+ + + or sign up with + + +
+ + + +
+
+ +
+ ); }; export default SignupPage; diff --git a/web/src/lib/util/validationUtils.ts b/web/src/lib/util/validationUtils.ts new file mode 100644 index 0000000..47d158a --- /dev/null +++ b/web/src/lib/util/validationUtils.ts @@ -0,0 +1,4 @@ +const validateEmail = (email: string) => + /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/.test(email); + +export { validateEmail }; diff --git a/web/src/pages/api/debug/index.ts b/web/src/pages/api/debug/index.ts index 1426aff..80d2da2 100644 --- a/web/src/pages/api/debug/index.ts +++ b/web/src/pages/api/debug/index.ts @@ -5,7 +5,7 @@ import { firebaseConfig } from "@/lib/db"; const handler = async (req: NextApiRequest, res: NextApiResponse) => { - res.status(StatusCodes.OK).json(firebaseConfig); + res.status(StatusCodes.OK).json(process.env); res.end(); };