From 3484540f96766b3797a95646f2aa737025d9527b Mon Sep 17 00:00:00 2001
From: KaWaite <34051327+KaWaite@users.noreply.github.com>
Date: Fri, 29 Oct 2021 14:11:48 +0900
Subject: [PATCH] fix: password validation, add autofocus (#117)

* fix: password validation, add autofocus

* add email fallback

Co-authored-by: KaWaite <flippindaisy@gmail.com>
---
 src/components/atoms/TextBox/index.tsx        |  4 ++++
 .../Settings/Account/PasswordModal/index.tsx  | 21 ++++++-------------
 .../Workspace/MembersSection/index.tsx        |  2 +-
 3 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/src/components/atoms/TextBox/index.tsx b/src/components/atoms/TextBox/index.tsx
index 517fa80e8..742d0d98e 100644
--- a/src/components/atoms/TextBox/index.tsx
+++ b/src/components/atoms/TextBox/index.tsx
@@ -22,6 +22,7 @@ export type Props = {
   borderColor?: string;
   floatedTextColor?: string;
   doesChangeEveryTime?: boolean;
+  autofocus?: boolean;
 };
 
 const TextBox: React.FC<Props> = ({
@@ -41,6 +42,7 @@ const TextBox: React.FC<Props> = ({
   borderColor,
   floatedTextColor,
   doesChangeEveryTime = false,
+  autofocus = false,
 }) => {
   const isDirty = useRef(false);
   const [innerValue, setInnerValue] = useState(value);
@@ -121,6 +123,7 @@ const TextBox: React.FC<Props> = ({
             disabled={disabled}
             placeholder={placeholder}
             rows={rows}
+            autoFocus={autofocus}
           />
         ) : (
           <StyledInput
@@ -134,6 +137,7 @@ const TextBox: React.FC<Props> = ({
             disabled={disabled}
             placeholder={placeholder}
             borderColor={borderColor}
+            autoFocus={autofocus}
           />
         )}
         {suffix && (
diff --git a/src/components/molecules/Settings/Account/PasswordModal/index.tsx b/src/components/molecules/Settings/Account/PasswordModal/index.tsx
index 1786f450f..e2011d667 100644
--- a/src/components/molecules/Settings/Account/PasswordModal/index.tsx
+++ b/src/components/molecules/Settings/Account/PasswordModal/index.tsx
@@ -53,9 +53,9 @@ const PasswordModal: React.FC<Props> = ({
 
   const handlePasswordChange = useCallback(
     (password: string) => {
+      setPassword(password);
       switch (true) {
         case passwordPolicy?.whitespace?.test(password):
-          setPassword(password);
           setRegexMessage(
             intl.formatMessage({
               defaultMessage: "No whitespace is allowed.",
@@ -63,7 +63,6 @@ const PasswordModal: React.FC<Props> = ({
           );
           break;
         case passwordPolicy?.tooShort?.test(password):
-          setPassword(password);
           setRegexMessage(
             intl.formatMessage({
               defaultMessage: "Too short.",
@@ -71,7 +70,6 @@ const PasswordModal: React.FC<Props> = ({
           );
           break;
         case passwordPolicy?.tooLong?.test(password):
-          setPassword(password);
           setRegexMessage(
             intl.formatMessage({
               defaultMessage: "That is terribly long.",
@@ -79,19 +77,15 @@ const PasswordModal: React.FC<Props> = ({
           );
           break;
         case passwordPolicy?.highSecurity?.test(password):
-          setPassword(password);
           setRegexMessage(intl.formatMessage({ defaultMessage: "That password is great!" }));
           break;
         case passwordPolicy?.medSecurity?.test(password):
-          setPassword(password);
           setRegexMessage(intl.formatMessage({ defaultMessage: "That password is better." }));
           break;
         case passwordPolicy?.lowSecurity?.test(password):
-          setPassword(password);
           setRegexMessage(intl.formatMessage({ defaultMessage: "That password is okay." }));
           break;
         default:
-          setPassword(password);
           setRegexMessage(
             intl.formatMessage({
               defaultMessage: "That password confuses me, but might be okay.",
@@ -117,16 +111,12 @@ const PasswordModal: React.FC<Props> = ({
   }, [updatePassword, handleClose, password, passwordConfirmation]);
 
   useEffect(() => {
-    if (
-      password !== passwordConfirmation ||
-      passwordPolicy?.tooShort?.test(password) ||
-      passwordPolicy?.tooLong?.test(password)
-    ) {
-      setDisabled(true);
-    } else {
+    if (password === passwordConfirmation && passwordPolicy?.highSecurity?.test(password)) {
       setDisabled(false);
+    } else {
+      setDisabled(true);
     }
-  }, [password, passwordConfirmation]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [password, passwordConfirmation, passwordPolicy?.highSecurity]);
 
   return (
     <Modal
@@ -160,6 +150,7 @@ const PasswordModal: React.FC<Props> = ({
               value={password}
               onChange={handlePasswordChange}
               doesChangeEveryTime
+              autofocus
               color={
                 passwordPolicy?.whitespace?.test(password) ||
                 passwordPolicy?.tooLong?.test(password)
diff --git a/src/components/molecules/Settings/Workspace/MembersSection/index.tsx b/src/components/molecules/Settings/Workspace/MembersSection/index.tsx
index c2c6f3af4..0c152a857 100644
--- a/src/components/molecules/Settings/Workspace/MembersSection/index.tsx
+++ b/src/components/molecules/Settings/Workspace/MembersSection/index.tsx
@@ -83,7 +83,7 @@ const MembersSection: React.FC<Props> = ({
             user ? (
               <MemberListItem
                 key={user.id}
-                name={user.name}
+                name={user.name ?? user.email}
                 role={role}
                 owner={owner}
                 isMyself={me?.id === user.id}