fix: password validation, add autofocus (#117)

* fix: password validation, add autofocus * add email fallback Co-authored-by: KaWaite <flippindaisy@gmail.com>
reearth · Oct 29, 2021 · 3484540 · 3484540
1 parent 5d57c4f
commit 3484540
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 16 deletions.
diff --git 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
@@ -53,45 +53,39 @@ 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.",
             }),
           );
           break;
         case passwordPolicy?.tooShort?.test(password):
-          setPassword(password);
           setRegexMessage(
             intl.formatMessage({
               defaultMessage: "Too short.",
             }),
           );
           break;
         case passwordPolicy?.tooLong?.test(password):
-          setPassword(password);
           setRegexMessage(
             intl.formatMessage({
               defaultMessage: "That is terribly long.",
             }),
           );
           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
@@ -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}