From b57eaee5caa82da074471e9d4f1b082c01f9aeb3 Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Wed, 15 Dec 2021 11:10:38 -0800
Subject: [PATCH] Add password confirmation input

---
 src/RegisterPage.jsx | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

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 (
     <>
       <div className={styles.container}>
@@ -77,12 +86,25 @@ export function RegisterPage() {
               </FieldRow>
               <FieldRow>
                 <InputField
+                  required
                   type="password"
-                  ref={registerPasswordRef}
+                  onChange={(e) => setPassword(e.target.value)}
+                  value={password}
                   placeholder="Password"
                   label="Password"
                 />
               </FieldRow>
+              <FieldRow>
+                <InputField
+                  required
+                  type="password"
+                  onChange={(e) => setPasswordConfirmation(e.target.value)}
+                  value={passwordConfirmation}
+                  placeholder="Confirm Password"
+                  label="Confirm Password"
+                  ref={confirmPasswordRef}
+                />
+              </FieldRow>
               {error && (
                 <FieldRow>
                   <ErrorMessage>{error.message}</ErrorMessage>