From 1bc2f2e5c74d4060c58c3a98498328c5a3eee083 Mon Sep 17 00:00:00 2001 From: Meliora Ho Date: Mon, 18 Mar 2024 22:23:59 +0000 Subject: [PATCH] Made a central error UI --- .vscode/settings.json | 1 - compass/app/auth/forgot_password/page.tsx | 75 ++++++++++------------- compass/app/auth/login/page.tsx | 29 +++++---- compass/app/auth/new_password/page.tsx | 20 +----- compass/app/page.tsx | 2 +- compass/components/auth/ErrorBanner.tsx | 19 ++++++ 6 files changed, 74 insertions(+), 72 deletions(-) delete mode 100644 .vscode/settings.json create mode 100644 compass/components/auth/ErrorBanner.tsx diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 9e26dfe..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1 +0,0 @@ -{} \ No newline at end of file diff --git a/compass/app/auth/forgot_password/page.tsx b/compass/app/auth/forgot_password/page.tsx index 5a57226..ed607b2 100644 --- a/compass/app/auth/forgot_password/page.tsx +++ b/compass/app/auth/forgot_password/page.tsx @@ -1,71 +1,65 @@ -"use client" +// pages/forgot-password.tsx +"use client"; + +import React, { useState, useEffect } from 'react'; +import Input from '@/components/Input'; import Button from '@/components/Button'; -import Input from '@/components/Input' import InlineLink from '@/components/InlineLink'; import Paper from '@/components/auth/Paper'; -import { useState, useEffect } from 'react'; +import ErrorBanner from '@/components/auth/ErrorBanner'; -function isValidEmail(email: string) { - //check email validation +function isValidEmail(email: string): string | null { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; - if (email.trim() === '') { - //check if input is empty return 'Email cannot be empty'; } else if (!emailRegex.test(email)) { - //check for incorrect email format return 'Invalid email format'; } - else{ - //return message for no error in input - return 'If your email exists in the database, you should receive a password reset in your inbox.' - } - + return null; // No error } -export default function Page() { +export default function ForgotPasswordPage() { + const [confirmEmail, setConfirmEmail] = useState(""); + const [emailError, setEmailError] = useState(null); const [isButtonDisabled, setIsButtonDisabled] = useState(true); - const [confirmEmail, setconfirmEmail] = useState(''); - const [emailError, setEmailError] = useState(''); useEffect(() => { - //when email string inputted it is checked in isValidEmail const error = isValidEmail(confirmEmail); - setEmailError(error); - //button is disabled if any error is detected - setIsButtonDisabled(error !== null && !error.includes('exists in the database')); + setEmailError(error); // set the error message based on validation + setIsButtonDisabled(!!error); // disable button if there is an error }, [confirmEmail]); return ( <>
-

Forgot password

-
- { - setconfirmEmail(e.target.value); - }}/> - {emailError && ( -

- {emailError} -

- //if email does not meet certain criteria, then issue an error - )} + onSubmit={(e) => { + e.preventDefault(); + // submit form logic here. since it's a "forgot password" form, + // typically you would send a reset password link to the email provided. + console.log('Form submitted with email:', confirmEmail); + }} + className="mb-0 m-auto mt-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white max-w-xl" + > +

Forgot Password

+
+ setConfirmEmail(e.target.value)} + />
+ {emailError && }
- {/* link back to login page */} + Back to Sign In -

@@ -74,5 +68,4 @@ export default function Page() { ); -}; - +} diff --git a/compass/app/auth/login/page.tsx b/compass/app/auth/login/page.tsx index 0284517..0439972 100644 --- a/compass/app/auth/login/page.tsx +++ b/compass/app/auth/login/page.tsx @@ -6,13 +6,15 @@ import Input from '@/components/Input' import InlineLink from '@/components/InlineLink'; import Paper from '@/components/auth/Paper'; import Image from 'next/image'; -import { ChangeEvent, useState } from "react"; +import { useState } from "react"; import PasswordInput from '@/components/auth/PasswordInput'; +import ErrorBanner from '@/components/auth/ErrorBanner'; export default function Page() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); - const [error, setError] = useState(""); + const [emailError, setEmailError] = useState(""); + const [passwordError, setPasswordError] = useState(""); const handleEmailChange = (event: React.ChangeEvent) => { setEmail(event.currentTarget.value); @@ -26,17 +28,17 @@ export default function Page() { // Priority: Incorrect combo > Missing email > Missing password if (password.trim().length === 0) { - setError("Please enter your password.") + setEmailError("Please enter your password.") event.preventDefault(); } // This shouldn't happen, already provides validation, but just in case. if (email.trim().length === 0) { - setError("Please enter your email.") + setPasswordError("Please enter your email.") event.preventDefault(); } // Placeholder for incorrect email + password combo. if (email === "incorrect@gmail.com" && password) { - setError("Incorrect password.") + setPasswordError("Incorrect password.") event.preventDefault(); } } @@ -44,7 +46,9 @@ export default function Page() { return ( <> -

+ { + e.preventDefault(); + }} className="mb-0 m-auto mt-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white max-w-xl"> Compass Center logo.Login -
- +
+ +
+ {emailError && }
- + +
+ {passwordError && }
@@ -69,9 +77,6 @@ export default function Page() { -
diff --git a/compass/app/auth/new_password/page.tsx b/compass/app/auth/new_password/page.tsx index ba9ebde..361b422 100644 --- a/compass/app/auth/new_password/page.tsx +++ b/compass/app/auth/new_password/page.tsx @@ -1,13 +1,11 @@ // pages/index.tsx "use client"; import { useState, useEffect } from 'react'; - -import Input from '@/components/Input'; - import Button from '@/components/Button'; import Paper from '@/components/auth/Paper'; import PasswordInput from '@/components/auth/PasswordInput'; +import ErrorBanner from '@/components/auth/ErrorBanner'; function isStrongPassword(password: string): boolean { @@ -45,7 +43,6 @@ export default function Page() {
- {isStrongPassword(newPassword) || newPassword === '' ? null :
- Password is not strong enough. -

- Tip: Use a mix of letters, numbers, and symbols for a strong password. Aim for at least 8 characters! -

-
} + {isStrongPassword(newPassword) || newPassword === '' ? null : }
- {newPassword === confirmPassword || confirmPassword === '' ? null :
- Passwords do not match. -

- Please make sure both passwords are the exact same! -

-
} + {newPassword === confirmPassword || confirmPassword === '' ? null : }