Add password requirements to login page

packages/app/src/AuthPage.tsx

@@ -3,7 +3,7 @@ import { Button, Form } from 'react-bootstrap';
 import { NextSeo } from 'next-seo';
 import { API_SERVER_URL } from './config';
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import { KeyboardEventHandler, useState, useEffect } from 'react';
 import Link from 'next/link';
 import cx from 'classnames';
 
@@ -18,6 +18,8 @@ type FormData = {
   confirmPassword: string;
 };
 
+type FormControlElement = HTMLInputElement | HTMLTextAreaElement;
+
 export default function AuthPage({ action }: { action: 'register' | 'login' }) {
   const isRegister = action === 'register';
   const {
@@ -49,20 +51,17 @@ export default function AuthPage({ action }: { action: 'register' | 'login' }) {
   const [currentPassword, setCurrentPassword] = useState<string>('');
   const [confirmPassword, setConfirmPassword] = useState<string>('');
 
-  const updateCurrentPassword = () => {
-    const val = (document.getElementById('password') as HTMLInputElement).value;
-    console.log(val);
+  const updateCurrentPassword: KeyboardEventHandler<FormControlElement> = e => {
+    const val = (e.target as HTMLInputElement).value;
     setCurrentPassword(val);
   };
 
-  const updateConfirmPassword = () => {
-    const val = (document.getElementById('confirmPassword') as HTMLInputElement)
-      .value;
-    console.log(val);
+  const updateConfirmPassword: KeyboardEventHandler<FormControlElement> = e => {
+    const val = (e.target as HTMLInputElement).value;
     setConfirmPassword(val);
   };
 
-  const confirmPass = (password: string) => {
+  const confirmPass = () => {
     return currentPassword === confirmPassword;
   };
 
@@ -166,7 +165,7 @@ export default function AuthPage({ action }: { action: 'register' | 'login' }) {
                   className={cx('border-0', {
                     'mb-3': isRegister,
                   })}
-                  onKeyUp={isRegister ? updateCurrentPassword : () => {}}
+                  onKeyUp={updateCurrentPassword}
                   {...form.password}
                 />
                 {isRegister && (

packages/app/src/PasswordCheck.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useMemo } from 'react';
 
 const checkLength = (password: string) => password.length >= 12;
 const checkOneUpper = (password: string) => /[A-Z]+/.test(password);
@@ -45,14 +45,19 @@ export const CheckOrX = ({
   children,
 }: {
   handler: (password: string) => boolean;
-  password: string;
+  password: string | { password: string | null };
   children: React.ReactNode;
 }) => {
-  const [isValid, setIsValid] = useState(false);
-  useEffect(() => {
-    const actualPass = (password['password'] as string) ?? password;
-    setIsValid(handler(actualPass));
-  }, [handler, password]);
+  let actualPassword = '';
+  if (typeof password === 'string') {
+    actualPassword = password;
+  } else {
+    actualPassword = password.password ?? '';
+  }
+  const isValid = useMemo(
+    () => handler(actualPassword),
+    [handler, actualPassword],
+  );
   return (
     <span className={isValid ? 'text-success' : 'text-danger'}>
       {isValid ? <Check /> : <XShape />} {children}
@@ -63,39 +68,25 @@ export const CheckOrX = ({
 const Check = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
+    width="16"
+    height="16"
     fill="currentColor"
     className="bi bi-check2"
     viewBox="0 0 16 16"
   >
-    <path
-      fillRule="evenodd"
-      d="M13.854 3.146a.5.5 0 010 .708l-8 8a.5.5 0 01-.708 0l-4-4a.5.5 0 11.708-.708L5
-      10.293l8-8a.5.5 0 01.708 0z"
-      clipRule="evenodd"
-    />
+    <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" />
   </svg>
 );
 
 const XShape = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
+    width="16"
+    height="16"
     fill="currentColor"
     className="bi bi-x"
     viewBox="0 0 16 16"
   >
-    <path
-      fillRule="evenodd"
-      d="M1.146 1.146a.5.5 0 01.708 0L8
-      7.293l6.146-6.147a.5.5 0 01.708.708L8.707
-      8l6.147 6.146a.5.5 0 01-.708.708L8 8.707l-6.146
-      6.147a.5.5 0 01-.708-.708L7.293 8 .146 1.146z"
-      clipRule="evenodd"
-      stroke="currentColor"
-      stroke-width="1"
-    />
+    <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
   </svg>
 );