diff --git a/src/RegisterPage.jsx b/src/RegisterPage.jsx index d6b59fe..a5cf3bb 100644 --- a/src/RegisterPage.jsx +++ b/src/RegisterPage.jsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { useCallback, useRef, useState } from "react"; +import React, { useCallback, useEffect, useRef, useState } from "react"; import { useHistory, useLocation, Link } from "react-router-dom"; import { FieldRow, InputField, ErrorMessage } from "./Input"; import { Button } from "./button"; @@ -23,14 +23,15 @@ import styles from "./LoginPage.module.css"; import { ReactComponent as Logo } from "./icons/LogoLarge.svg"; export function RegisterPage() { - // TODO: Handle hitting login page with authenticated client const { register } = useClient(); const registerUsernameRef = useRef(); - const registerPasswordRef = useRef(); + const confirmPasswordRef = useRef(); const history = useHistory(); const location = useLocation(); const [loading, setLoading] = useState(false); const [error, setError] = useState(); + const [password, setPassword] = useState(""); + const [passwordConfirmation, setPasswordConfirmation] = useState(""); const onSubmitRegisterForm = useCallback( (e) => { @@ -55,6 +56,14 @@ export function RegisterPage() { [register, location, history] ); + useEffect(() => { + if (password && passwordConfirmation && password !== passwordConfirmation) { + confirmPasswordRef.current.setCustomValidity("Passwords must match"); + } else { + confirmPasswordRef.current.setCustomValidity(""); + } + }, [password, passwordConfirmation]); + return ( <>
@@ -77,12 +86,25 @@ export function RegisterPage() { setPassword(e.target.value)} + value={password} placeholder="Password" label="Password" /> + + setPasswordConfirmation(e.target.value)} + value={passwordConfirmation} + placeholder="Confirm Password" + label="Confirm Password" + ref={confirmPasswordRef} + /> + {error && ( {error.message}