From 7068cbb51dba45dbe1b3c1d40ba65b4bf3cc37bb Mon Sep 17 00:00:00 2001
From: KaWaite <flippindaisy@gmail.com>
Date: Thu, 16 Sep 2021 12:59:39 +0900
Subject: [PATCH 01/19] Update TextBox atom to have message

---
 src/components/atoms/TextBox/index.tsx | 88 +++++++++++++++-----------
 1 file changed, 50 insertions(+), 38 deletions(-)

diff --git a/src/components/atoms/TextBox/index.tsx b/src/components/atoms/TextBox/index.tsx
index 71f39f537..d40a66f8b 100644
--- a/src/components/atoms/TextBox/index.tsx
+++ b/src/components/atoms/TextBox/index.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState, useCallback, useRef } from "react";
 
 import Flex from "@reearth/components/atoms/Flex";
+import Text from "@reearth/components/atoms/Text";
 import { styled, metrics } from "@reearth/theme";
 import fonts from "@reearth/theme/fonts";
 import { metricsSizes } from "@reearth/theme/metrics";
@@ -15,6 +16,7 @@ export type Props = {
   prefix?: string;
   suffix?: string;
   placeholder?: string;
+  message?: string;
   throttle?: boolean;
   throttleTimeout?: number;
   color?: string;
@@ -34,6 +36,7 @@ const TextBox: React.FC<Props> = ({
   prefix,
   suffix,
   placeholder,
+  message,
   throttle,
   throttleTimeout: throttleTimeout = 3000,
   color,
@@ -103,44 +106,47 @@ const TextBox: React.FC<Props> = ({
   }, [innerValue, onChange, throttle, throttleTimeout]);
 
   return (
-    <FormWrapper className={className} align="center">
-      {prefix && (
-        <FloatedText floatedTextColor={floatedTextColor} color={color}>
-          {prefix}
-        </FloatedText>
-      )}
-      {multiline ? (
-        <StyledTextarea
-          ref={textAreaRef}
-          value={innerValue ?? ""}
-          onChange={handleChangeTextArea}
-          onBlur={handleBlur}
-          color={color}
-          backgroundColor={backgroundColor}
-          disabled={disabled}
-          placeholder={placeholder}
-          rows={rows}
-        />
-      ) : (
-        <StyledInput
-          value={innerValue ?? ""}
-          onChange={handleChange}
-          onKeyPress={handleKeyPress}
-          onBlur={handleBlur}
-          color={color}
-          type={type}
-          backgroundColor={backgroundColor}
-          disabled={disabled}
-          placeholder={placeholder}
-          borderColor={borderColor}
-        />
-      )}
-      {suffix && (
-        <FloatedText floatedTextColor={floatedTextColor} color={color}>
-          {suffix}
-        </FloatedText>
-      )}
-    </FormWrapper>
+    <div className={className}>
+      <FormWrapper align="center">
+        {prefix && (
+          <FloatedText floatedTextColor={floatedTextColor} color={color}>
+            {prefix}
+          </FloatedText>
+        )}
+        {multiline ? (
+          <StyledTextarea
+            ref={textAreaRef}
+            value={innerValue ?? ""}
+            onChange={handleChangeTextArea}
+            onBlur={handleBlur}
+            color={color}
+            backgroundColor={backgroundColor}
+            disabled={disabled}
+            placeholder={placeholder}
+            rows={rows}
+          />
+        ) : (
+          <StyledInput
+            value={innerValue ?? ""}
+            onChange={handleChange}
+            onKeyPress={handleKeyPress}
+            onBlur={handleBlur}
+            color={color}
+            type={type}
+            backgroundColor={backgroundColor}
+            disabled={disabled}
+            placeholder={placeholder}
+            borderColor={borderColor}
+          />
+        )}
+        {suffix && (
+          <FloatedText floatedTextColor={floatedTextColor} color={color}>
+            {suffix}
+          </FloatedText>
+        )}
+      </FormWrapper>
+      {message && <StyledText size="xs">{message}</StyledText>}
+    </div>
   );
 };
 
@@ -194,4 +200,10 @@ const FloatedText = styled.span<InputProps>`
   user-select: none;
 `;
 
+const StyledText = styled(Text)`
+  margin-left: 12px;
+  margin-top: 5px;
+  font-style: italic;
+`;
+
 export default TextBox;

From fee2431e58ee9daca8c1b3708286f76d3928bfc9 Mon Sep 17 00:00:00 2001
From: KaWaite <flippindaisy@gmail.com>
Date: Thu, 16 Sep 2021 13:01:11 +0900
Subject: [PATCH 02/19] WIP: Password modal prepared for regex checking

---
 .../Settings/Account/PasswordModal/index.tsx  | 37 +++++++++++++++----
 1 file changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/components/molecules/Settings/Account/PasswordModal/index.tsx b/src/components/molecules/Settings/Account/PasswordModal/index.tsx
index 38e616a38..f0950e9ed 100644
--- a/src/components/molecules/Settings/Account/PasswordModal/index.tsx
+++ b/src/components/molecules/Settings/Account/PasswordModal/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from "react";
+import React, { useState, useCallback, useEffect, useMemo } from "react";
 import { useIntl } from "react-intl";
 
 import Button from "@reearth/components/atoms/Button";
@@ -33,12 +33,35 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
   const [passwordConfirmation, setPasswordConfirmation] = useState("");
   const [disabled, setDisabled] = useState(true);
 
+  const lowSecurityRegex = "";
+  const medSecurityRegex = "";
+  const highSecurityRegex = "";
+
+  const regexMessage = useMemo(() => {
+    switch (password) {
+      case highSecurityRegex:
+        return intl.formatMessage({ defaultMessage: "That password is great." });
+      case medSecurityRegex:
+        return intl.formatMessage({ defaultMessage: "That password is better." });
+      case lowSecurityRegex:
+        return intl.formatMessage({ defaultMessage: "That password is okay." });
+      default:
+        return intl.formatMessage({ defaultMessage: "That password is too weak." });
+    }
+  }, [password, intl]);
+
+  console.log(regexMessage, "regexmes");
+
   const handleClose = useCallback(() => {
     setPassword("");
     setPasswordConfirmation("");
     onClose?.();
   }, [onClose]);
 
+  useEffect(() => {
+    console.log(password, "password");
+  }, [password]);
+
   const save = useCallback(() => {
     if (password === passwordConfirmation) {
       updatePassword?.(password, passwordConfirmation);
@@ -94,18 +117,14 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
               </li>
             </StyledList>
           </Text>
-          <Label size="s">
-            {intl.formatMessage({ defaultMessage: "New password" })}
-            {/* {intl.formatMessage({
-                defaultMessage:
-                  "8 characters or more, 2 types or more from numbers, lowercase letters, uppercase letters",
-              })} */}
-          </Label>
+          <Label size="s">{intl.formatMessage({ defaultMessage: "New password" })}</Label>
           <StyledTextBox
             type="password"
             borderColor={"#3f3d45"}
             value={password}
+            message={password ? regexMessage : undefined}
             onChange={setPassword}
+            doesChangeEveryTime
           />
           <Label size="s">
             {intl.formatMessage({ defaultMessage: "New password (for confirmation)" })}
@@ -115,6 +134,7 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
             borderColor={"#3f3d45"}
             value={passwordConfirmation}
             onChange={setPasswordConfirmation}
+            doesChangeEveryTime
           />
         </div>
       ) : (
@@ -151,4 +171,5 @@ const Label = styled(Text)`
 const StyledList = styled.ul`
   margin: 20px auto;
 `;
+
 export default PasswordModal;

From 69c98fc2f0eb931904f793992480db9fced5cd9d Mon Sep 17 00:00:00 2001
From: KaWaite <flippindaisy@gmail.com>
Date: Thu, 16 Sep 2021 17:36:03 +0900
Subject: [PATCH 03/19] Add regex

---
 .../Settings/Account/PasswordModal/index.tsx  | 52 ++++++++++++-------
 1 file changed, 33 insertions(+), 19 deletions(-)

diff --git a/src/components/molecules/Settings/Account/PasswordModal/index.tsx b/src/components/molecules/Settings/Account/PasswordModal/index.tsx
index f0950e9ed..ff547a864 100644
--- a/src/components/molecules/Settings/Account/PasswordModal/index.tsx
+++ b/src/components/molecules/Settings/Account/PasswordModal/index.tsx
@@ -33,24 +33,39 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
   const [passwordConfirmation, setPasswordConfirmation] = useState("");
   const [disabled, setDisabled] = useState(true);
 
-  const lowSecurityRegex = "";
-  const medSecurityRegex = "";
-  const highSecurityRegex = "";
+  const tooShortRegex = /^(?=.{1,7}$)/;
+  const tooLongRegex = /^(?=.{25,}$)/;
+  const whitespaceRegex = /(?=.*\s)/;
+  const highSecurityRegex = /^(?=.*[a-z])(?=.*[A-Z])((?=(.*\d){2}))/;
+  const medSecurityRegex = /^((?=.*[a-z])(?=.*[A-Z])|(?=.*[A-Z])(?=.*\d)|(?=.*[a-z])(?=.*\d))/;
+  const lowSecurityRegex = /^((?=\d)|(?=[a-z])|(?=[A-Z]))/;
 
   const regexMessage = useMemo(() => {
-    switch (password) {
-      case highSecurityRegex:
-        return intl.formatMessage({ defaultMessage: "That password is great." });
-      case medSecurityRegex:
+    switch (true) {
+      case whitespaceRegex.test(password):
+        return intl.formatMessage({
+          defaultMessage: "No whitespace is allowed.",
+        });
+      case tooShortRegex.test(password):
+        return intl.formatMessage({
+          defaultMessage: "Too short.",
+        });
+      case tooLongRegex.test(password):
+        return intl.formatMessage({
+          defaultMessage: "That is terribly long.",
+        });
+      case highSecurityRegex.test(password):
+        return intl.formatMessage({ defaultMessage: "That password is great!" });
+      case medSecurityRegex.test(password):
         return intl.formatMessage({ defaultMessage: "That password is better." });
-      case lowSecurityRegex:
+      case lowSecurityRegex.test(password):
         return intl.formatMessage({ defaultMessage: "That password is okay." });
       default:
-        return intl.formatMessage({ defaultMessage: "That password is too weak." });
+        return intl.formatMessage({
+          defaultMessage: "That password confuses me, but might be okay.",
+        });
     }
-  }, [password, intl]);
-
-  console.log(regexMessage, "regexmes");
+  }, [password, intl]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const handleClose = useCallback(() => {
     setPassword("");
@@ -58,10 +73,6 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
     onClose?.();
   }, [onClose]);
 
-  useEffect(() => {
-    console.log(password, "password");
-  }, [password]);
-
   const save = useCallback(() => {
     if (password === passwordConfirmation) {
       updatePassword?.(password, passwordConfirmation);
@@ -102,17 +113,17 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
             <StyledList>
               <li>
                 {intl.formatMessage({
-                  defaultMessage: `Is Longer than 8 characters`,
+                  defaultMessage: `Is between 8 and 25 characters in length`,
                 })}
               </li>
               <li>
                 {intl.formatMessage({
-                  defaultMessage: `At least 2 different numbers`,
+                  defaultMessage: `Has at least 2 different numbers`,
                 })}
               </li>
               <li>
                 {intl.formatMessage({
-                  defaultMessage: `Use lowercase and uppercase letters`,
+                  defaultMessage: `Uses lowercase and uppercase letters`,
                 })}
               </li>
             </StyledList>
@@ -125,6 +136,9 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
             message={password ? regexMessage : undefined}
             onChange={setPassword}
             doesChangeEveryTime
+            color={
+              whitespaceRegex.test(password) || tooLongRegex.test(password) ? "red" : undefined
+            }
           />
           <Label size="s">
             {intl.formatMessage({ defaultMessage: "New password (for confirmation)" })}

From 904344c4c17a758a205e199aa0f9f2ebde784770 Mon Sep 17 00:00:00 2001
From: KaWaite <flippindaisy@gmail.com>
Date: Thu, 16 Sep 2021 17:56:12 +0900
Subject: [PATCH 04/19] Refactor PasswordModal

---
 .../Settings/Account/PasswordModal/index.tsx  | 116 +++++++++---------
 1 file changed, 58 insertions(+), 58 deletions(-)

diff --git a/src/components/molecules/Settings/Account/PasswordModal/index.tsx b/src/components/molecules/Settings/Account/PasswordModal/index.tsx
index ff547a864..4aa85884e 100644
--- a/src/components/molecules/Settings/Account/PasswordModal/index.tsx
+++ b/src/components/molecules/Settings/Account/PasswordModal/index.tsx
@@ -2,10 +2,11 @@ import React, { useState, useCallback, useEffect, useMemo } from "react";
 import { useIntl } from "react-intl";
 
 import Button from "@reearth/components/atoms/Button";
+import Flex from "@reearth/components/atoms/Flex";
 import Modal from "@reearth/components/atoms/Modal";
 import Text from "@reearth/components/atoms/Text";
 import TextBox from "@reearth/components/atoms/TextBox";
-import { styled, useTheme } from "@reearth/theme";
+import { styled } from "@reearth/theme";
 
 type Props = {
   className?: string;
@@ -27,7 +28,6 @@ type Props = {
 
 const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updatePassword }) => {
   const intl = useIntl();
-  const theme = useTheme();
 
   const [password, setPassword] = useState("");
   const [passwordConfirmation, setPasswordConfirmation] = useState("");
@@ -90,6 +90,7 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
 
   return (
     <Modal
+      size="sm"
       title={intl.formatMessage({ defaultMessage: "Change Password" })}
       isVisible={isVisible}
       onClose={handleClose}
@@ -98,63 +99,67 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
           large
           disabled={disabled}
           buttonType="primary"
-          text={intl.formatMessage({ defaultMessage: "Change your password now" })}
+          text={intl.formatMessage({ defaultMessage: "Change password" })}
           onClick={save}
         />
       }>
       {hasPassword ? (
         <div>
-          <Text size="s" color={theme.main.text} otherProperties={{ margin: "22px auto" }}>
-            <p>
+          <Text size="m">
+            {intl.formatMessage({
+              defaultMessage: `In order to protect your account, make sure your password:`,
+            })}
+          </Text>
+          <SubText>
+            <Text size="m">
               {intl.formatMessage({
-                defaultMessage: `In order to protect your account, make sure your password:`,
+                defaultMessage: `* Is between 8 and 25 characters in length`,
               })}
-            </p>
-            <StyledList>
-              <li>
-                {intl.formatMessage({
-                  defaultMessage: `Is between 8 and 25 characters in length`,
-                })}
-              </li>
-              <li>
-                {intl.formatMessage({
-                  defaultMessage: `Has at least 2 different numbers`,
-                })}
-              </li>
-              <li>
-                {intl.formatMessage({
-                  defaultMessage: `Uses lowercase and uppercase letters`,
-                })}
-              </li>
-            </StyledList>
-          </Text>
-          <Label size="s">{intl.formatMessage({ defaultMessage: "New password" })}</Label>
-          <StyledTextBox
-            type="password"
-            borderColor={"#3f3d45"}
-            value={password}
-            message={password ? regexMessage : undefined}
-            onChange={setPassword}
-            doesChangeEveryTime
-            color={
-              whitespaceRegex.test(password) || tooLongRegex.test(password) ? "red" : undefined
-            }
-          />
-          <Label size="s">
-            {intl.formatMessage({ defaultMessage: "New password (for confirmation)" })}
-          </Label>
-          <StyledTextBox
-            type="password"
-            borderColor={"#3f3d45"}
-            value={passwordConfirmation}
-            onChange={setPasswordConfirmation}
-            doesChangeEveryTime
-          />
+            </Text>
+
+            <Text size="m">
+              {intl.formatMessage({
+                defaultMessage: `* Has at least 2 different numbers`,
+              })}
+            </Text>
+
+            <Text size="m">
+              {intl.formatMessage({
+                defaultMessage: `* Uses lowercase and uppercase letters`,
+              })}
+            </Text>
+          </SubText>
+          <PasswordField direction="column">
+            <Text size="m">{intl.formatMessage({ defaultMessage: "New password" })}</Text>
+            <TextBox
+              type="password"
+              borderColor={"#3f3d45"}
+              value={password}
+              message={password ? regexMessage : undefined}
+              onChange={setPassword}
+              doesChangeEveryTime
+              color={
+                whitespaceRegex.test(password) || tooLongRegex.test(password) ? "red" : undefined
+              }
+            />
+          </PasswordField>
+          <PasswordField direction="column">
+            <Text size="m">
+              {intl.formatMessage({ defaultMessage: "New password (for confirmation)" })}
+            </Text>
+            <TextBox
+              type="password"
+              borderColor={"#3f3d45"}
+              value={passwordConfirmation}
+              onChange={setPasswordConfirmation}
+              doesChangeEveryTime
+            />
+          </PasswordField>
         </div>
       ) : (
         <div>
-          <Label size="s">{intl.formatMessage({ defaultMessage: "New password" })}</Label>
-          <StyledTextBox
+          <Text size="s">{intl.formatMessage({ defaultMessage: "New password" })}</Text>
+          <TextBox
             type="password"
             borderColor={"#3f3d45"}
             value={passwordConfirmation}
@@ -173,17 +178,12 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
   );
 };
 
-const StyledTextBox = styled(TextBox)`
-  padding: 0;
-  margin: 20px -5px 40px;
-`;
-
-const Label = styled(Text)`
-  margin: 20px auto;
+const SubText = styled.div`
+  margin: 20px auto auto 16px;
 `;
 
-const StyledList = styled.ul`
-  margin: 20px auto;
+const PasswordField = styled(Flex)`
+  margin: 16px auto;
 `;
 
 export default PasswordModal;

From 42f697e1567359095c67f0ee65c7866e83737400 Mon Sep 17 00:00:00 2001
From: KaWaite <flippindaisy@gmail.com>
Date: Thu, 16 Sep 2021 18:19:49 +0900
Subject: [PATCH 05/19] Add old password field. Use metric/theme for values.

---
 .../Settings/Account/PasswordModal/index.tsx  | 29 ++++++++++++++-----
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/molecules/Settings/Account/PasswordModal/index.tsx b/src/components/molecules/Settings/Account/PasswordModal/index.tsx
index 4aa85884e..3ef766218 100644
--- a/src/components/molecules/Settings/Account/PasswordModal/index.tsx
+++ b/src/components/molecules/Settings/Account/PasswordModal/index.tsx
@@ -6,7 +6,7 @@ import Flex from "@reearth/components/atoms/Flex";
 import Modal from "@reearth/components/atoms/Modal";
 import Text from "@reearth/components/atoms/Text";
 import TextBox from "@reearth/components/atoms/TextBox";
-import { styled } from "@reearth/theme";
+import { styled, useTheme } from "@reearth/theme";
 
 type Props = {
   className?: string;
@@ -28,7 +28,9 @@ type Props = {
 
 const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updatePassword }) => {
   const intl = useIntl();
+  const theme = useTheme();
 
+  const [oldPassword, setOldPassword] = useState("");
   const [password, setPassword] = useState("");
   const [passwordConfirmation, setPasswordConfirmation] = useState("");
   const [disabled, setDisabled] = useState(true);
@@ -68,6 +70,7 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
   }, [password, intl]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const handleClose = useCallback(() => {
+    setOldPassword("");
     setPassword("");
     setPasswordConfirmation("");
     onClose?.();
@@ -129,17 +132,29 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
               })}
             </Text>
           </SubText>
+          <PasswordField direction="column">
+            <Text size="m">{intl.formatMessage({ defaultMessage: "Old password" })}</Text>
+            <TextBox
+              type="password"
+              borderColor={theme.main.border}
+              value={oldPassword}
+              onChange={setOldPassword}
+              doesChangeEveryTime
+            />
+          </PasswordField>
           <PasswordField direction="column">
             <Text size="m">{intl.formatMessage({ defaultMessage: "New password" })}</Text>
             <TextBox
               type="password"
-              borderColor={"#3f3d45"}
+              borderColor={theme.main.border}
               value={password}
               message={password ? regexMessage : undefined}
               onChange={setPassword}
               doesChangeEveryTime
               color={
-                whitespaceRegex.test(password) || tooLongRegex.test(password) ? "red" : undefined
+                whitespaceRegex.test(password) || tooLongRegex.test(password)
+                  ? theme.main.danger
+                  : undefined
               }
             />
           </PasswordField>
@@ -149,7 +164,7 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
             </Text>
             <TextBox
               type="password"
-              borderColor={"#3f3d45"}
+              borderColor={theme.main.border}
               value={passwordConfirmation}
               onChange={setPasswordConfirmation}
               doesChangeEveryTime
@@ -161,7 +176,7 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
           <Text size="s">{intl.formatMessage({ defaultMessage: "New password" })}</Text>
           <TextBox
             type="password"
-            borderColor={"#3f3d45"}
+            borderColor={theme.main.border}
             value={passwordConfirmation}
             onChange={setPasswordConfirmation}
           />
@@ -179,11 +194,11 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
 };
 
 const SubText = styled.div`
-  margin: 20px auto auto 16px;
+  margin: ${({ theme }) => `${theme.metrics["xl"]}px auto auto ${theme.metrics.l}px`};
 `;
 
 const PasswordField = styled(Flex)`
-  margin: 16px auto;
+  margin: ${({ theme }) => theme.metrics.l}px auto;
 `;
 
 export default PasswordModal;

From d8f47b8fba52232c7274eac28848f848b3f860b2 Mon Sep 17 00:00:00 2001
From: KaWaite <flippindaisy@gmail.com>
Date: Tue, 21 Sep 2021 14:23:31 +0900
Subject: [PATCH 06/19] Refactor PasswordModal. Update TextBox styles.

---
 src/components/atoms/TextBox/index.tsx        |   4 +-
 .../Settings/Account/PasswordModal/index.tsx  | 102 ++++++++++++------
 2 files changed, 69 insertions(+), 37 deletions(-)

diff --git a/src/components/atoms/TextBox/index.tsx b/src/components/atoms/TextBox/index.tsx
index d40a66f8b..08d7351b2 100644
--- a/src/components/atoms/TextBox/index.tsx
+++ b/src/components/atoms/TextBox/index.tsx
@@ -201,8 +201,8 @@ const FloatedText = styled.span<InputProps>`
 `;
 
 const StyledText = styled(Text)`
-  margin-left: 12px;
-  margin-top: 5px;
+  margin-left: ${metricsSizes.m}px;
+  margin-top: ${metricsSizes["2xs"]}px;
   font-style: italic;
 `;
 
diff --git a/src/components/molecules/Settings/Account/PasswordModal/index.tsx b/src/components/molecules/Settings/Account/PasswordModal/index.tsx
index 3ef766218..3f9f6020d 100644
--- a/src/components/molecules/Settings/Account/PasswordModal/index.tsx
+++ b/src/components/molecules/Settings/Account/PasswordModal/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect, useMemo } from "react";
+import React, { useState, useCallback, useEffect } from "react";
 import { useIntl } from "react-intl";
 
 import Button from "@reearth/components/atoms/Button";
@@ -32,6 +32,7 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
 
   const [oldPassword, setOldPassword] = useState("");
   const [password, setPassword] = useState("");
+  const [regexMessage, setRegexMessage] = useState("");
   const [passwordConfirmation, setPasswordConfirmation] = useState("");
   const [disabled, setDisabled] = useState(true);
 
@@ -42,32 +43,57 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
   const medSecurityRegex = /^((?=.*[a-z])(?=.*[A-Z])|(?=.*[A-Z])(?=.*\d)|(?=.*[a-z])(?=.*\d))/;
   const lowSecurityRegex = /^((?=\d)|(?=[a-z])|(?=[A-Z]))/;
 
-  const regexMessage = useMemo(() => {
-    switch (true) {
-      case whitespaceRegex.test(password):
-        return intl.formatMessage({
-          defaultMessage: "No whitespace is allowed.",
-        });
-      case tooShortRegex.test(password):
-        return intl.formatMessage({
-          defaultMessage: "Too short.",
-        });
-      case tooLongRegex.test(password):
-        return intl.formatMessage({
-          defaultMessage: "That is terribly long.",
-        });
-      case highSecurityRegex.test(password):
-        return intl.formatMessage({ defaultMessage: "That password is great!" });
-      case medSecurityRegex.test(password):
-        return intl.formatMessage({ defaultMessage: "That password is better." });
-      case lowSecurityRegex.test(password):
-        return intl.formatMessage({ defaultMessage: "That password is okay." });
-      default:
-        return intl.formatMessage({
-          defaultMessage: "That password confuses me, but might be okay.",
-        });
-    }
-  }, [password, intl]); // eslint-disable-line react-hooks/exhaustive-deps
+  const handlePasswordChange = useCallback(
+    (password: string) => {
+      switch (true) {
+        case whitespaceRegex.test(password):
+          setPassword(password);
+          setRegexMessage(
+            intl.formatMessage({
+              defaultMessage: "No whitespace is allowed.",
+            }),
+          );
+          break;
+        case tooShortRegex.test(password):
+          setPassword(password);
+          setRegexMessage(
+            intl.formatMessage({
+              defaultMessage: "Too short.",
+            }),
+          );
+          break;
+        case tooLongRegex.test(password):
+          setPassword(password);
+          setRegexMessage(
+            intl.formatMessage({
+              defaultMessage: "That is terribly long.",
+            }),
+          );
+          break;
+        case highSecurityRegex.test(password):
+          setPassword(password);
+          setRegexMessage(intl.formatMessage({ defaultMessage: "That password is great!" }));
+          break;
+        case medSecurityRegex.test(password):
+          setPassword(password);
+          setRegexMessage(intl.formatMessage({ defaultMessage: "That password is better." }));
+          break;
+        case lowSecurityRegex.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.",
+            }),
+          );
+          break;
+      }
+    },
+    [intl, password], // eslint-disable-line react-hooks/exhaustive-deps
+  );
 
   const handleClose = useCallback(() => {
     setOldPassword("");
@@ -76,7 +102,7 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
     onClose?.();
   }, [onClose]);
 
-  const save = useCallback(() => {
+  const handleSave = useCallback(() => {
     if (password === passwordConfirmation) {
       updatePassword?.(password, passwordConfirmation);
       handleClose();
@@ -84,12 +110,16 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
   }, [updatePassword, handleClose, password, passwordConfirmation]);
 
   useEffect(() => {
-    if (password !== passwordConfirmation || password === "" || passwordConfirmation === "") {
+    if (
+      password !== passwordConfirmation ||
+      tooShortRegex.test(password) ||
+      tooLongRegex.test(password)
+    ) {
       setDisabled(true);
     } else {
       setDisabled(false);
     }
-  }, [password, passwordConfirmation]);
+  }, [password, passwordConfirmation]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <Modal
@@ -103,7 +133,7 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
           disabled={disabled}
           buttonType="primary"
           text={intl.formatMessage({ defaultMessage: "Change password" })}
-          onClick={save}
+          onClick={handleSave}
         />
       }>
       {hasPassword ? (
@@ -149,7 +179,7 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
               borderColor={theme.main.border}
               value={password}
               message={password ? regexMessage : undefined}
-              onChange={setPassword}
+              onChange={handlePasswordChange}
               doesChangeEveryTime
               color={
                 whitespaceRegex.test(password) || tooLongRegex.test(password)
@@ -185,7 +215,7 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
             disabled={disabled}
             buttonType="primary"
             text={intl.formatMessage({ defaultMessage: "Set your password now" })}
-            onClick={save}
+            onClick={handleSave}
           />
         </div>
       )}
@@ -194,11 +224,13 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
 };
 
 const SubText = styled.div`
-  margin: ${({ theme }) => `${theme.metrics["xl"]}px auto auto ${theme.metrics.l}px`};
+  margin: ${({ theme }) =>
+    `${theme.metrics["xl"]}px auto ${theme.metrics["xl"]}px ${theme.metrics.l}px`};
 `;
 
 const PasswordField = styled(Flex)`
-  margin: ${({ theme }) => theme.metrics.l}px auto;
+  // background: red;
+  height: 75px;
 `;
 
 export default PasswordModal;

From 322d054d9457e907922958a56667c530c7c602f9 Mon Sep 17 00:00:00 2001
From: KaWaite <flippindaisy@gmail.com>
Date: Tue, 21 Sep 2021 18:46:38 +0900
Subject: [PATCH 07/19] Remove old password field

---
 .../Settings/Account/PasswordModal/index.tsx         | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/src/components/molecules/Settings/Account/PasswordModal/index.tsx b/src/components/molecules/Settings/Account/PasswordModal/index.tsx
index 3f9f6020d..936561f22 100644
--- a/src/components/molecules/Settings/Account/PasswordModal/index.tsx
+++ b/src/components/molecules/Settings/Account/PasswordModal/index.tsx
@@ -30,7 +30,6 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
   const intl = useIntl();
   const theme = useTheme();
 
-  const [oldPassword, setOldPassword] = useState("");
   const [password, setPassword] = useState("");
   const [regexMessage, setRegexMessage] = useState("");
   const [passwordConfirmation, setPasswordConfirmation] = useState("");
@@ -96,7 +95,6 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
   );
 
   const handleClose = useCallback(() => {
-    setOldPassword("");
     setPassword("");
     setPasswordConfirmation("");
     onClose?.();
@@ -162,16 +160,6 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
               })}
             </Text>
           </SubText>
-          <PasswordField direction="column">
-            <Text size="m">{intl.formatMessage({ defaultMessage: "Old password" })}</Text>
-            <TextBox
-              type="password"
-              borderColor={theme.main.border}
-              value={oldPassword}
-              onChange={setOldPassword}
-              doesChangeEveryTime
-            />
-          </PasswordField>
           <PasswordField direction="column">
             <Text size="m">{intl.formatMessage({ defaultMessage: "New password" })}</Text>
             <TextBox

From 22a3df7516eede804f5ecb1c263f375c409098ff Mon Sep 17 00:00:00 2001
From: KaWaite <flippindaisy@gmail.com>
Date: Wed, 22 Sep 2021 11:39:51 +0900
Subject: [PATCH 08/19] Remove whitespace. Move regex code out of function.

---
 .../Settings/Account/PasswordModal/index.tsx     | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/molecules/Settings/Account/PasswordModal/index.tsx b/src/components/molecules/Settings/Account/PasswordModal/index.tsx
index 936561f22..d7a98fa1a 100644
--- a/src/components/molecules/Settings/Account/PasswordModal/index.tsx
+++ b/src/components/molecules/Settings/Account/PasswordModal/index.tsx
@@ -26,6 +26,13 @@ type Props = {
   updatePassword?: (password: string, passwordConfirmation: string) => void;
 };
 
+export const tooShortRegex = /^(?=.{1,7}$)/;
+export const tooLongRegex = /^(?=.{25,}$)/;
+export const whitespaceRegex = /(?=.*\s)/;
+export const highSecurityRegex = /^(?=.*[a-z])(?=.*[A-Z])((?=(.*\d){2}))/;
+export const medSecurityRegex = /^((?=.*[a-z])(?=.*[A-Z])|(?=.*[A-Z])(?=.*\d)|(?=.*[a-z])(?=.*\d))/;
+export const lowSecurityRegex = /^((?=\d)|(?=[a-z])|(?=[A-Z]))/;
+
 const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updatePassword }) => {
   const intl = useIntl();
   const theme = useTheme();
@@ -35,13 +42,6 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
   const [passwordConfirmation, setPasswordConfirmation] = useState("");
   const [disabled, setDisabled] = useState(true);
 
-  const tooShortRegex = /^(?=.{1,7}$)/;
-  const tooLongRegex = /^(?=.{25,}$)/;
-  const whitespaceRegex = /(?=.*\s)/;
-  const highSecurityRegex = /^(?=.*[a-z])(?=.*[A-Z])((?=(.*\d){2}))/;
-  const medSecurityRegex = /^((?=.*[a-z])(?=.*[A-Z])|(?=.*[A-Z])(?=.*\d)|(?=.*[a-z])(?=.*\d))/;
-  const lowSecurityRegex = /^((?=\d)|(?=[a-z])|(?=[A-Z]))/;
-
   const handlePasswordChange = useCallback(
     (password: string) => {
       switch (true) {
@@ -147,13 +147,11 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
                 defaultMessage: `* Is between 8 and 25 characters in length`,
               })}
             </Text>
-
             <Text size="m">
               {intl.formatMessage({
                 defaultMessage: `* Has at least 2 different numbers`,
               })}
             </Text>
-
             <Text size="m">
               {intl.formatMessage({
                 defaultMessage: `* Uses lowercase and uppercase letters`,

From 40e9823b52282c55b3475a15f969f80842990442 Mon Sep 17 00:00:00 2001
From: KaWaite <flippindaisy@gmail.com>
Date: Wed, 22 Sep 2021 11:41:27 +0900
Subject: [PATCH 09/19] translation generation.

---
 translations/en.yml | 15 +++++++++++----
 translations/ja.yml | 15 +++++++++++----
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/translations/en.yml b/translations/en.yml
index afd6ce114..eb3c83d12 100644
--- a/translations/en.yml
+++ b/translations/en.yml
@@ -241,15 +241,22 @@ src:
               Light theme is still in beta. Some UI may still not be supported
               (ie. public projects will not use light theme).
           PasswordModal:
+            '264517228': That password is better.
+            '324893002': No whitespace is allowed.
             '539787951': Set your password now
+            '619506016': That password is okay.
             '740918511': New password (for confirmation)
+            '856987295': '* Has at least 2 different numbers'
             '1000887516': 'In order to protect your account, make sure your password:'
-            '1068339636': Change your password now
-            '1515529938': Is Longer than 8 characters
             '2039038750': New password
             '2521568990': Change Password
-            '3546326308': Use lowercase and uppercase letters
-            '4270021428': At least 2 different numbers
+            '3020651684': '* Is between 8 and 25 characters in length'
+            '3497016136': Too short.
+            '3627357388': That password is great!
+            '3907506757': 'That password confuses me, but might be okay.'
+            '4016968397': '* Uses lowercase and uppercase letters'
+            '4066780408': That is terribly long.
+            '4188749693': Change password
           ProfileSection:
             '636461959': Name
             '1534468327': Profile
diff --git a/translations/ja.yml b/translations/ja.yml
index b94c4db68..98e246056 100644
--- a/translations/ja.yml
+++ b/translations/ja.yml
@@ -219,15 +219,22 @@ src:
             '3198092477': アカウント
             '3923994153': ライトテーマはまだベータ版です。サポートされていない機能があります。(例：ライトテーマで公開版プロジェクトは作成できません)
           PasswordModal:
+            '264517228': ''
+            '324893002': ''
             '539787951': 現在のパスワード
+            '619506016': ''
             '740918511': 新しいパスワード
+            '856987295': ''
             '1000887516': 'アカウント保護のためパスワードを確認:'
-            '1068339636': パスワードを変更
-            '1515529938': 8文字以上です
             '2039038750': 新しいパスワード
             '2521568990': パスワードを変更
-            '3546326308': 大文字小文字を使用できます
-            '4270021428': 最低2種類の数字が必要です
+            '3020651684': ''
+            '3497016136': ''
+            '3627357388': ''
+            '3907506757': ''
+            '4016968397': ''
+            '4066780408': ''
+            '4188749693': ''
           ProfileSection:
             '636461959': 名前
             '1534468327': プロフィール

From 0f815cc9c0f2e9e8fca73c85921fda871f6400ac Mon Sep 17 00:00:00 2001
From: KaWaite <flippindaisy@gmail.com>
Date: Wed, 22 Sep 2021 15:35:30 +0900
Subject: [PATCH 10/19] Move asterisks out of intl. Regenerate.

---
 .../Settings/Account/PasswordModal/index.tsx  | 24 +++++++++++--------
 translations/en.yml                           |  6 ++---
 translations/ja.yml                           |  6 ++---
 3 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/components/molecules/Settings/Account/PasswordModal/index.tsx b/src/components/molecules/Settings/Account/PasswordModal/index.tsx
index d7a98fa1a..0aeb9d14e 100644
--- a/src/components/molecules/Settings/Account/PasswordModal/index.tsx
+++ b/src/components/molecules/Settings/Account/PasswordModal/index.tsx
@@ -142,21 +142,24 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
             })}
           </Text>
           <SubText>
-            <Text size="m">
+            <StyledText size="m">
+              *{" "}
               {intl.formatMessage({
-                defaultMessage: `* Is between 8 and 25 characters in length`,
+                defaultMessage: `Is between 8 and 25 characters in length`,
               })}
-            </Text>
-            <Text size="m">
+            </StyledText>
+            <StyledText size="m">
+              *{" "}
               {intl.formatMessage({
-                defaultMessage: `* Has at least 2 different numbers`,
+                defaultMessage: `Has at least 2 different numbers`,
               })}
-            </Text>
-            <Text size="m">
+            </StyledText>
+            <StyledText size="m">
+              *{" "}
               {intl.formatMessage({
-                defaultMessage: `* Uses lowercase and uppercase letters`,
+                defaultMessage: `Uses lowercase and uppercase letters`,
               })}
-            </Text>
+            </StyledText>
           </SubText>
           <PasswordField direction="column">
             <Text size="m">{intl.formatMessage({ defaultMessage: "New password" })}</Text>
@@ -214,8 +217,9 @@ const SubText = styled.div`
     `${theme.metrics["xl"]}px auto ${theme.metrics["xl"]}px ${theme.metrics.l}px`};
 `;
 
+const StyledText = styled(Text)``;
+
 const PasswordField = styled(Flex)`
-  // background: red;
   height: 75px;
 `;
 
diff --git a/translations/en.yml b/translations/en.yml
index eb3c83d12..17d40d189 100644
--- a/translations/en.yml
+++ b/translations/en.yml
@@ -246,15 +246,15 @@ src:
             '539787951': Set your password now
             '619506016': That password is okay.
             '740918511': New password (for confirmation)
-            '856987295': '* Has at least 2 different numbers'
             '1000887516': 'In order to protect your account, make sure your password:'
+            '1578884909': Is between 8 and 25 characters in length
+            '1831673448': Has at least 2 different numbers
             '2039038750': New password
+            '2491671917': Uses lowercase and uppercase letters
             '2521568990': Change Password
-            '3020651684': '* Is between 8 and 25 characters in length'
             '3497016136': Too short.
             '3627357388': That password is great!
             '3907506757': 'That password confuses me, but might be okay.'
-            '4016968397': '* Uses lowercase and uppercase letters'
             '4066780408': That is terribly long.
             '4188749693': Change password
           ProfileSection:
diff --git a/translations/ja.yml b/translations/ja.yml
index 98e246056..59eedc38e 100644
--- a/translations/ja.yml
+++ b/translations/ja.yml
@@ -224,15 +224,15 @@ src:
             '539787951': 現在のパスワード
             '619506016': ''
             '740918511': 新しいパスワード
-            '856987295': ''
             '1000887516': 'アカウント保護のためパスワードを確認:'
+            '1578884909': ''
+            '1831673448': ''
             '2039038750': 新しいパスワード
+            '2491671917': ''
             '2521568990': パスワードを変更
-            '3020651684': ''
             '3497016136': ''
             '3627357388': ''
             '3907506757': ''
-            '4016968397': ''
             '4066780408': ''
             '4188749693': ''
           ProfileSection:

From bf34351881522837829af7284724e212b09a4cfb Mon Sep 17 00:00:00 2001
From: KaWaite <flippindaisy@gmail.com>
Date: Fri, 1 Oct 2021 13:04:12 +0900
Subject: [PATCH 11/19] setup for passwordPolicy

---
 .../Settings/Account/AccountSection/index.tsx | 10 +++++
 .../Settings/Account/PasswordModal/index.tsx  | 41 +++++++++++--------
 .../organisms/Settings/Account/hooks.ts       | 12 ++++++
 .../organisms/Settings/Account/index.tsx      |  2 +
 4 files changed, 48 insertions(+), 17 deletions(-)

diff --git a/src/components/molecules/Settings/Account/AccountSection/index.tsx b/src/components/molecules/Settings/Account/AccountSection/index.tsx
index 05bbb5f04..bc065ef57 100644
--- a/src/components/molecules/Settings/Account/AccountSection/index.tsx
+++ b/src/components/molecules/Settings/Account/AccountSection/index.tsx
@@ -17,6 +17,14 @@ export type Props = {
   appTheme?: string;
   lang?: string;
   hasPassword: boolean;
+  passwordPolicy: {
+    tooShort?: RegExp;
+    tooLong?: RegExp;
+    whitespace?: RegExp;
+    lowSecurity?: RegExp;
+    medSecurity?: RegExp;
+    highSecurity?: RegExp;
+  };
   updatePassword?: (password: string, passwordConfirmation: string) => void;
   updateLanguage?: (lang: string) => void;
   updateTheme?: (theme: string) => void;
@@ -31,6 +39,7 @@ const ProfileSection: React.FC<Props> = ({
   email,
   appTheme,
   hasPassword,
+  passwordPolicy,
   updatePassword,
   updateLanguage,
   updateTheme,
@@ -103,6 +112,7 @@ const ProfileSection: React.FC<Props> = ({
       </Section>
       <PasswordModal
         hasPassword={hasPassword}
+        passwordPolicy={passwordPolicy}
         updatePassword={handleUpdatePassword}
         isVisible={isOpen}
         onClose={() => setIsOpen(false)}
diff --git a/src/components/molecules/Settings/Account/PasswordModal/index.tsx b/src/components/molecules/Settings/Account/PasswordModal/index.tsx
index 0aeb9d14e..492dc3210 100644
--- a/src/components/molecules/Settings/Account/PasswordModal/index.tsx
+++ b/src/components/molecules/Settings/Account/PasswordModal/index.tsx
@@ -23,17 +23,24 @@ type Props = {
   archiveProject?: (archived: boolean) => void;
   onClose?: () => void;
   hasPassword: boolean;
+  passwordPolicy: {
+    tooShort?: RegExp;
+    tooLong?: RegExp;
+    whitespace?: RegExp;
+    lowSecurity?: RegExp;
+    medSecurity?: RegExp;
+    highSecurity?: RegExp;
+  };
   updatePassword?: (password: string, passwordConfirmation: string) => void;
 };
 
-export const tooShortRegex = /^(?=.{1,7}$)/;
-export const tooLongRegex = /^(?=.{25,}$)/;
-export const whitespaceRegex = /(?=.*\s)/;
-export const highSecurityRegex = /^(?=.*[a-z])(?=.*[A-Z])((?=(.*\d){2}))/;
-export const medSecurityRegex = /^((?=.*[a-z])(?=.*[A-Z])|(?=.*[A-Z])(?=.*\d)|(?=.*[a-z])(?=.*\d))/;
-export const lowSecurityRegex = /^((?=\d)|(?=[a-z])|(?=[A-Z]))/;
-
-const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updatePassword }) => {
+const PasswordModal: React.FC<Props> = ({
+  isVisible,
+  onClose,
+  hasPassword,
+  passwordPolicy,
+  updatePassword,
+}) => {
   const intl = useIntl();
   const theme = useTheme();
 
@@ -45,7 +52,7 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
   const handlePasswordChange = useCallback(
     (password: string) => {
       switch (true) {
-        case whitespaceRegex.test(password):
+        case passwordPolicy.whitespace?.test(password):
           setPassword(password);
           setRegexMessage(
             intl.formatMessage({
@@ -53,7 +60,7 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
             }),
           );
           break;
-        case tooShortRegex.test(password):
+        case passwordPolicy.tooShort?.test(password):
           setPassword(password);
           setRegexMessage(
             intl.formatMessage({
@@ -61,7 +68,7 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
             }),
           );
           break;
-        case tooLongRegex.test(password):
+        case passwordPolicy.tooLong?.test(password):
           setPassword(password);
           setRegexMessage(
             intl.formatMessage({
@@ -69,15 +76,15 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
             }),
           );
           break;
-        case highSecurityRegex.test(password):
+        case passwordPolicy.highSecurity?.test(password):
           setPassword(password);
           setRegexMessage(intl.formatMessage({ defaultMessage: "That password is great!" }));
           break;
-        case medSecurityRegex.test(password):
+        case passwordPolicy.medSecurity?.test(password):
           setPassword(password);
           setRegexMessage(intl.formatMessage({ defaultMessage: "That password is better." }));
           break;
-        case lowSecurityRegex.test(password):
+        case passwordPolicy.lowSecurity?.test(password):
           setPassword(password);
           setRegexMessage(intl.formatMessage({ defaultMessage: "That password is okay." }));
           break;
@@ -110,8 +117,8 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
   useEffect(() => {
     if (
       password !== passwordConfirmation ||
-      tooShortRegex.test(password) ||
-      tooLongRegex.test(password)
+      passwordPolicy.tooShort?.test(password) ||
+      passwordPolicy.tooLong?.test(password)
     ) {
       setDisabled(true);
     } else {
@@ -171,7 +178,7 @@ const PasswordModal: React.FC<Props> = ({ isVisible, onClose, hasPassword, updat
               onChange={handlePasswordChange}
               doesChangeEveryTime
               color={
-                whitespaceRegex.test(password) || tooLongRegex.test(password)
+                passwordPolicy.whitespace?.test(password) || passwordPolicy.tooLong?.test(password)
                   ? theme.main.danger
                   : undefined
               }
diff --git a/src/components/organisms/Settings/Account/hooks.ts b/src/components/organisms/Settings/Account/hooks.ts
index 4f1a132ca..e3667b265 100644
--- a/src/components/organisms/Settings/Account/hooks.ts
+++ b/src/components/organisms/Settings/Account/hooks.ts
@@ -23,6 +23,17 @@ export default () => {
   const auths = profileData?.me?.auths;
   const hasPassword = auths?.includes("auth0") ?? false;
 
+  // Currently Auth0 policy. In future will be passed from
+  // backend depending on choosen type of authentication.
+  const passwordPolicy = {
+    tooShort: /^(?=.{1,7}$)/,
+    tooLong: /^(?=.{128,}$)/,
+    whitespace: /(?=.*\s)/,
+    lowSecurity: /^((?=\d)|(?=[a-z])|(?=[A-Z]))/,
+    medSecurity: /^((?=.*[a-z])(?=.*[A-Z])|(?=.*[A-Z])(?=.*\d)|(?=.*[a-z])(?=.*\d))/,
+    highSecurity: /^(?=.*[a-z])(?=.*[A-Z])((?=(.*\d){2}))/,
+  };
+
   const [updateMeMutation] = useUpdateMeMutation();
 
   const updateName = useCallback(
@@ -89,6 +100,7 @@ export default () => {
     currentProject,
     me,
     hasPassword,
+    passwordPolicy,
     updateName,
     updatePassword,
     updateLanguage,
diff --git a/src/components/organisms/Settings/Account/index.tsx b/src/components/organisms/Settings/Account/index.tsx
index 653bdef64..1812e9147 100644
--- a/src/components/organisms/Settings/Account/index.tsx
+++ b/src/components/organisms/Settings/Account/index.tsx
@@ -17,6 +17,7 @@ const Account: React.FC<Props> = () => {
     currentProject,
     me,
     hasPassword,
+    passwordPolicy,
     updateName,
     updatePassword,
     updateLanguage,
@@ -33,6 +34,7 @@ const Account: React.FC<Props> = () => {
           lang={me?.lang}
           appTheme={me?.theme ? me.theme.toUpperCase() : "DARK"}
           hasPassword={hasPassword}
+          passwordPolicy={passwordPolicy}
           updatePassword={updatePassword}
           updateLanguage={updateLanguage}
           updateTheme={updateTheme}

From 26dfa0d1ac23de511f90df2bbb4a3d7552606645 Mon Sep 17 00:00:00 2001
From: KaWaite <flippindaisy@gmail.com>
Date: Fri, 1 Oct 2021 16:22:40 +0900
Subject: [PATCH 12/19] misc fixes

---
 .../molecules/Common/ProjectMenu/index.tsx        | 15 +--------------
 src/components/molecules/Dashboard/QuickStart.tsx |  2 +-
 src/components/molecules/Dashboard/Workspace.tsx  |  1 +
 src/components/molecules/TopPage/index.tsx        |  2 +-
 src/components/pages/TopPage/index.tsx            |  9 +--------
 5 files changed, 5 insertions(+), 24 deletions(-)

diff --git a/src/components/molecules/Common/ProjectMenu/index.tsx b/src/components/molecules/Common/ProjectMenu/index.tsx
index fa78219af..d00d22a9d 100644
--- a/src/components/molecules/Common/ProjectMenu/index.tsx
+++ b/src/components/molecules/Common/ProjectMenu/index.tsx
@@ -46,12 +46,6 @@ const ProjectMenu: React.FC<Props> = ({ currentProject, teamId }) => {
                 text={intl.formatMessage({ defaultMessage: "Datasets" })}
               />
             </MenuListItem>
-            {/* <MenuListItem>
-              <MenuListItemLabel
-                linkTo={`/settings/project/${currentProject.id}/plugins`}
-                text={intl.formatMessage({ defaultMessage: "Plugins" })}
-              />
-            </MenuListItem> */}
             <Spacer />
             <MenuListItem>
               <MenuListItemLabel
@@ -60,17 +54,10 @@ const ProjectMenu: React.FC<Props> = ({ currentProject, teamId }) => {
               />
             </MenuListItem>
             <Spacer />
-            <MenuListItem>
-              <MenuListItemLabel
-                icon="dashboard"
-                linkTo={`/dashboard/${teamId}`}
-                text={intl.formatMessage({ defaultMessage: "Top page" })}
-              />
-            </MenuListItem>
             <MenuListItem>
               <MenuListItemLabel
                 icon="help"
-                linkTo="/projects"
+                onClick={() => window.open("http://docs.reearth.io")}
                 text={intl.formatMessage({ defaultMessage: "Help" })}
               />
             </MenuListItem>
diff --git a/src/components/molecules/Dashboard/QuickStart.tsx b/src/components/molecules/Dashboard/QuickStart.tsx
index f3c84478a..2ed5a66e0 100644
--- a/src/components/molecules/Dashboard/QuickStart.tsx
+++ b/src/components/molecules/Dashboard/QuickStart.tsx
@@ -48,7 +48,7 @@ const QuickStart: React.FC<Props> = ({
         <LongBannerButton
           align="center"
           justify="center"
-          onClick={() => window.location.assign("http://docs.reearth.io")}>
+          onClick={() => window.open("http://docs.reearth.io")}>
           <MapIcon icon="map" />
           <Text size="m" weight="bold" customColor>
             {intl.formatMessage({ defaultMessage: "User guide" })}
diff --git a/src/components/molecules/Dashboard/Workspace.tsx b/src/components/molecules/Dashboard/Workspace.tsx
index 2c46ebdfa..cb8adf7c3 100644
--- a/src/components/molecules/Dashboard/Workspace.tsx
+++ b/src/components/molecules/Dashboard/Workspace.tsx
@@ -71,6 +71,7 @@ const StyledLink = styled(Link)`
   padding: ${metricsSizes["2xs"]}px;
   border-radius: ${metricsSizes.xs}px;
   align-self: flex-end;
+  display: flex;
 
   &:hover {
     text-decoration: none;
diff --git a/src/components/molecules/TopPage/index.tsx b/src/components/molecules/TopPage/index.tsx
index d71b3115e..02fe84b8a 100644
--- a/src/components/molecules/TopPage/index.tsx
+++ b/src/components/molecules/TopPage/index.tsx
@@ -22,7 +22,7 @@ const TopPage: React.FC<Props> = ({ children, login }) => {
           large
           buttonType="secondary"
           onClick={login}
-          text={intl.formatMessage({ defaultMessage: "Sign in" })}
+          text={intl.formatMessage({ defaultMessage: "Log in" })}
           margin="40px"
         />
       </LeftWrapper>
diff --git a/src/components/pages/TopPage/index.tsx b/src/components/pages/TopPage/index.tsx
index 0f0b21964..f8ae87b3f 100644
--- a/src/components/pages/TopPage/index.tsx
+++ b/src/components/pages/TopPage/index.tsx
@@ -2,7 +2,6 @@ import React from "react";
 
 import Loading from "@reearth/components/atoms/Loading";
 import MoleculeTopPage from "@reearth/components/molecules/TopPage";
-import NotificationBanner from "@reearth/components/organisms/Notification";
 
 import useHooks from "./hooks";
 
@@ -13,13 +12,7 @@ export type Props = {
 const TopPage: React.FC<Props> = () => {
   const { isLoading, isAuthenticated, login } = useHooks();
 
-  return isLoading ? (
-    <Loading />
-  ) : !isAuthenticated ? (
-    <MoleculeTopPage login={login}>
-      <NotificationBanner />
-    </MoleculeTopPage>
-  ) : null;
+  return isLoading ? <Loading /> : !isAuthenticated ? <MoleculeTopPage login={login} /> : null;
 };
 
 export default TopPage;

From 3d204d5f0f65acc2c0d389df13da3fe59594ca40 Mon Sep 17 00:00:00 2001
From: KaWaite <flippindaisy@gmail.com>
Date: Fri, 1 Oct 2021 16:26:57 +0900
Subject: [PATCH 13/19] fix: wording

---
 .../molecules/Settings/WorkspaceList/WorkspaceCell/index.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/molecules/Settings/WorkspaceList/WorkspaceCell/index.tsx b/src/components/molecules/Settings/WorkspaceList/WorkspaceCell/index.tsx
index e71c743f7..148082975 100644
--- a/src/components/molecules/Settings/WorkspaceList/WorkspaceCell/index.tsx
+++ b/src/components/molecules/Settings/WorkspaceList/WorkspaceCell/index.tsx
@@ -36,7 +36,7 @@ const WorkspaceCell: React.FC<Props> = ({ className, team, personal, onSelect })
         <Text size="m" color={theme.main.weak}>
           {intl.formatMessage({
             defaultMessage:
-              "This is your personal workspace, your projects and resource will be managed in this workspace.",
+              "This is your personal workspace. Your projects and resources will be managed in this workspace.",
           })}
         </Text>
       ) : (

From bcad539b3ab15b53d80d8748426510f060fe6cc9 Mon Sep 17 00:00:00 2001
From: KaWaite <flippindaisy@gmail.com>
Date: Fri, 1 Oct 2021 16:34:47 +0900
Subject: [PATCH 14/19] remove: auth0 specific password recommendations.

---
 .../Settings/Account/PasswordModal/index.tsx  | 29 +++----------------
 1 file changed, 4 insertions(+), 25 deletions(-)

diff --git a/src/components/molecules/Settings/Account/PasswordModal/index.tsx b/src/components/molecules/Settings/Account/PasswordModal/index.tsx
index 492dc3210..12e7adeb6 100644
--- a/src/components/molecules/Settings/Account/PasswordModal/index.tsx
+++ b/src/components/molecules/Settings/Account/PasswordModal/index.tsx
@@ -143,30 +143,12 @@ const PasswordModal: React.FC<Props> = ({
       }>
       {hasPassword ? (
         <div>
-          <Text size="m">
-            {intl.formatMessage({
-              defaultMessage: `In order to protect your account, make sure your password:`,
-            })}
-          </Text>
           <SubText>
-            <StyledText size="m">
-              *{" "}
-              {intl.formatMessage({
-                defaultMessage: `Is between 8 and 25 characters in length`,
-              })}
-            </StyledText>
-            <StyledText size="m">
-              *{" "}
-              {intl.formatMessage({
-                defaultMessage: `Has at least 2 different numbers`,
-              })}
-            </StyledText>
-            <StyledText size="m">
-              *{" "}
+            <Text size="m">
               {intl.formatMessage({
-                defaultMessage: `Uses lowercase and uppercase letters`,
+                defaultMessage: `In order to protect your account, make sure your password is unique and strong.`,
               })}
-            </StyledText>
+            </Text>
           </SubText>
           <PasswordField direction="column">
             <Text size="m">{intl.formatMessage({ defaultMessage: "New password" })}</Text>
@@ -220,12 +202,9 @@ const PasswordModal: React.FC<Props> = ({
 };
 
 const SubText = styled.div`
-  margin: ${({ theme }) =>
-    `${theme.metrics["xl"]}px auto ${theme.metrics["xl"]}px ${theme.metrics.l}px`};
+  margin: ${({ theme }) => `${theme.metrics["xl"]}px auto`};
 `;
 
-const StyledText = styled(Text)``;
-
 const PasswordField = styled(Flex)`
   height: 75px;
 `;

From 446a7d401773fe7f87ac057ba239ab6ed39ddddc Mon Sep 17 00:00:00 2001
From: KaWaite <flippindaisy@gmail.com>
Date: Mon, 4 Oct 2021 10:50:52 +0900
Subject: [PATCH 15/19] type passwordPolicy

---
 .../Settings/Account/AccountSection/index.tsx  | 13 ++++---------
 .../Settings/Account/PasswordModal/index.tsx   | 18 ++++++++++--------
 .../organisms/Settings/Account/hooks.ts        |  3 ++-
 3 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/components/molecules/Settings/Account/AccountSection/index.tsx b/src/components/molecules/Settings/Account/AccountSection/index.tsx
index bc065ef57..c88095ad0 100644
--- a/src/components/molecules/Settings/Account/AccountSection/index.tsx
+++ b/src/components/molecules/Settings/Account/AccountSection/index.tsx
@@ -4,7 +4,9 @@ import { useIntl } from "react-intl";
 import Flex from "@reearth/components/atoms/Flex";
 import Icon from "@reearth/components/atoms/Icon";
 import Text from "@reearth/components/atoms/Text";
-import PasswordModal from "@reearth/components/molecules/Settings/Account/PasswordModal";
+import PasswordModal, {
+  PasswordPolicy,
+} from "@reearth/components/molecules/Settings/Account/PasswordModal";
 import Field from "@reearth/components/molecules/Settings/Field";
 import EditableItem from "@reearth/components/molecules/Settings/Project/EditableItem";
 import Section from "@reearth/components/molecules/Settings/Section";
@@ -17,14 +19,7 @@ export type Props = {
   appTheme?: string;
   lang?: string;
   hasPassword: boolean;
-  passwordPolicy: {
-    tooShort?: RegExp;
-    tooLong?: RegExp;
-    whitespace?: RegExp;
-    lowSecurity?: RegExp;
-    medSecurity?: RegExp;
-    highSecurity?: RegExp;
-  };
+  passwordPolicy: PasswordPolicy;
   updatePassword?: (password: string, passwordConfirmation: string) => void;
   updateLanguage?: (lang: string) => void;
   updateTheme?: (theme: string) => void;
diff --git a/src/components/molecules/Settings/Account/PasswordModal/index.tsx b/src/components/molecules/Settings/Account/PasswordModal/index.tsx
index 12e7adeb6..470f62d1e 100644
--- a/src/components/molecules/Settings/Account/PasswordModal/index.tsx
+++ b/src/components/molecules/Settings/Account/PasswordModal/index.tsx
@@ -8,6 +8,15 @@ import Text from "@reearth/components/atoms/Text";
 import TextBox from "@reearth/components/atoms/TextBox";
 import { styled, useTheme } from "@reearth/theme";
 
+export type PasswordPolicy = {
+  tooShort?: RegExp;
+  tooLong?: RegExp;
+  whitespace?: RegExp;
+  lowSecurity?: RegExp;
+  medSecurity?: RegExp;
+  highSecurity?: RegExp;
+};
+
 type Props = {
   className?: string;
   project?: {
@@ -23,14 +32,7 @@ type Props = {
   archiveProject?: (archived: boolean) => void;
   onClose?: () => void;
   hasPassword: boolean;
-  passwordPolicy: {
-    tooShort?: RegExp;
-    tooLong?: RegExp;
-    whitespace?: RegExp;
-    lowSecurity?: RegExp;
-    medSecurity?: RegExp;
-    highSecurity?: RegExp;
-  };
+  passwordPolicy: PasswordPolicy;
   updatePassword?: (password: string, passwordConfirmation: string) => void;
 };
 
diff --git a/src/components/organisms/Settings/Account/hooks.ts b/src/components/organisms/Settings/Account/hooks.ts
index e3667b265..263b7037c 100644
--- a/src/components/organisms/Settings/Account/hooks.ts
+++ b/src/components/organisms/Settings/Account/hooks.ts
@@ -2,6 +2,7 @@ import { useApolloClient } from "@apollo/client";
 import { useCallback } from "react";
 import { useIntl } from "react-intl";
 
+import { PasswordPolicy } from "@reearth/components/molecules/Settings/Account/PasswordModal";
 import { useUpdateMeMutation, useProfileQuery } from "@reearth/gql";
 import { useTeam, useProject, useNotification } from "@reearth/state";
 
@@ -25,7 +26,7 @@ export default () => {
 
   // Currently Auth0 policy. In future will be passed from
   // backend depending on choosen type of authentication.
-  const passwordPolicy = {
+  const passwordPolicy: PasswordPolicy = {
     tooShort: /^(?=.{1,7}$)/,
     tooLong: /^(?=.{128,}$)/,
     whitespace: /(?=.*\s)/,

From 4081922e2dd938f294fc36a1a41435cd65120331 Mon Sep 17 00:00:00 2001
From: KaWaite <flippindaisy@gmail.com>
Date: Mon, 4 Oct 2021 10:53:24 +0900
Subject: [PATCH 16/19] Regen translations

---
 translations/en.yml | 16 +++++++---------
 translations/ja.yml | 10 +++-------
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/translations/en.yml b/translations/en.yml
index a9d098079..060144927 100644
--- a/translations/en.yml
+++ b/translations/en.yml
@@ -59,7 +59,6 @@ src:
           '3528672691': Cancel
           '4120989039': Create
         ProjectMenu:
-          '1936593459': Top page
           '2222696742': Help
           '2661706411': Datasets
           '3029638665': Project settings
@@ -256,11 +255,10 @@ src:
             '539787951': Set your password now
             '619506016': That password is okay.
             '740918511': New password (for confirmation)
-            '1000887516': 'In order to protect your account, make sure your password:'
-            '1578884909': Is between 8 and 25 characters in length
-            '1831673448': Has at least 2 different numbers
+            '1234886189': >-
+              In order to protect your account, make sure your password is
+              unique and strong.
             '2039038750': New password
-            '2491671917': Uses lowercase and uppercase letters
             '2521568990': Change Password
             '3497016136': Too short.
             '3627357388': That password is great!
@@ -418,15 +416,15 @@ src:
         WorkspaceList:
           WorkspaceCell:
             '808766300': No Title Workspace
-            '974692228': >-
-              This is your personal workspace, your projects and resource will
-              be managed in this workspace.
             '3230245813': 'Members:'
+            '4106929473': >-
+              This is your personal workspace. Your projects and resources will
+              be managed in this workspace.
           WorkspaceList:
             '3435539653': All workspaces
             '3828443189': New Workspace
       TopPage:
-        '1405865627': Sign in
+        '1135777802': Log in
       Visualizer:
         Block:
           Text:
diff --git a/translations/ja.yml b/translations/ja.yml
index e664fee80..2fb3a3464 100644
--- a/translations/ja.yml
+++ b/translations/ja.yml
@@ -51,7 +51,6 @@ src:
           '3528672691': キャンセル
           '4120989039': 作成
         ProjectMenu:
-          '1936593459': トップ
           '2222696742': ヘルプ
           '2661706411': データセット
           '3029638665': プロジェクト設定
@@ -230,11 +229,8 @@ src:
             '539787951': 現在のパスワード
             '619506016': ''
             '740918511': 新しいパスワード
-            '1000887516': 'アカウント保護のためパスワードを確認:'
-            '1578884909': ''
-            '1831673448': ''
+            '1234886189': ''
             '2039038750': 新しいパスワード
-            '2491671917': ''
             '2521568990': パスワードを変更
             '3497016136': ''
             '3627357388': ''
@@ -372,13 +368,13 @@ src:
         WorkspaceList:
           WorkspaceCell:
             '808766300': 無題のワークスペース
-            '974692228': これはあなたのパーソナルワークスペースです。あなたのプロジェクトやリソースはこのワークスペースで管理されます。
             '3230245813': メンバーズ
+            '4106929473': ''
           WorkspaceList:
             '3435539653': すべてのワークスペース
             '3828443189': 新規ワークスペース
       TopPage:
-        '1405865627': サインイン
+        '1135777802': ''
       Visualizer:
         Block:
           Text:

From e609f506821d65095e273138d6de7db34e1afd3b Mon Sep 17 00:00:00 2001
From: KaWaite <flippindaisy@gmail.com>
Date: Mon, 4 Oct 2021 17:57:27 +0900
Subject: [PATCH 17/19] Change so passwordPolicy comes from config

---
 .../Settings/Account/AccountSection/index.tsx |  2 +-
 .../Settings/Account/PasswordModal/index.tsx  | 21 ++++++++++---------
 .../organisms/Settings/Account/hooks.ts       | 12 +----------
 src/config.ts                                 | 16 +++++++++++++-
 4 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/src/components/molecules/Settings/Account/AccountSection/index.tsx b/src/components/molecules/Settings/Account/AccountSection/index.tsx
index c88095ad0..5ec57465b 100644
--- a/src/components/molecules/Settings/Account/AccountSection/index.tsx
+++ b/src/components/molecules/Settings/Account/AccountSection/index.tsx
@@ -19,7 +19,7 @@ export type Props = {
   appTheme?: string;
   lang?: string;
   hasPassword: boolean;
-  passwordPolicy: PasswordPolicy;
+  passwordPolicy?: PasswordPolicy;
   updatePassword?: (password: string, passwordConfirmation: string) => void;
   updateLanguage?: (lang: string) => void;
   updateTheme?: (theme: string) => void;
diff --git a/src/components/molecules/Settings/Account/PasswordModal/index.tsx b/src/components/molecules/Settings/Account/PasswordModal/index.tsx
index 470f62d1e..7e0615279 100644
--- a/src/components/molecules/Settings/Account/PasswordModal/index.tsx
+++ b/src/components/molecules/Settings/Account/PasswordModal/index.tsx
@@ -32,7 +32,7 @@ type Props = {
   archiveProject?: (archived: boolean) => void;
   onClose?: () => void;
   hasPassword: boolean;
-  passwordPolicy: PasswordPolicy;
+  passwordPolicy?: PasswordPolicy;
   updatePassword?: (password: string, passwordConfirmation: string) => void;
 };
 
@@ -54,7 +54,7 @@ const PasswordModal: React.FC<Props> = ({
   const handlePasswordChange = useCallback(
     (password: string) => {
       switch (true) {
-        case passwordPolicy.whitespace?.test(password):
+        case passwordPolicy?.whitespace?.test(password):
           setPassword(password);
           setRegexMessage(
             intl.formatMessage({
@@ -62,7 +62,7 @@ const PasswordModal: React.FC<Props> = ({
             }),
           );
           break;
-        case passwordPolicy.tooShort?.test(password):
+        case passwordPolicy?.tooShort?.test(password):
           setPassword(password);
           setRegexMessage(
             intl.formatMessage({
@@ -70,7 +70,7 @@ const PasswordModal: React.FC<Props> = ({
             }),
           );
           break;
-        case passwordPolicy.tooLong?.test(password):
+        case passwordPolicy?.tooLong?.test(password):
           setPassword(password);
           setRegexMessage(
             intl.formatMessage({
@@ -78,15 +78,15 @@ const PasswordModal: React.FC<Props> = ({
             }),
           );
           break;
-        case passwordPolicy.highSecurity?.test(password):
+        case passwordPolicy?.highSecurity?.test(password):
           setPassword(password);
           setRegexMessage(intl.formatMessage({ defaultMessage: "That password is great!" }));
           break;
-        case passwordPolicy.medSecurity?.test(password):
+        case passwordPolicy?.medSecurity?.test(password):
           setPassword(password);
           setRegexMessage(intl.formatMessage({ defaultMessage: "That password is better." }));
           break;
-        case passwordPolicy.lowSecurity?.test(password):
+        case passwordPolicy?.lowSecurity?.test(password):
           setPassword(password);
           setRegexMessage(intl.formatMessage({ defaultMessage: "That password is okay." }));
           break;
@@ -119,8 +119,8 @@ const PasswordModal: React.FC<Props> = ({
   useEffect(() => {
     if (
       password !== passwordConfirmation ||
-      passwordPolicy.tooShort?.test(password) ||
-      passwordPolicy.tooLong?.test(password)
+      passwordPolicy?.tooShort?.test(password) ||
+      passwordPolicy?.tooLong?.test(password)
     ) {
       setDisabled(true);
     } else {
@@ -162,7 +162,8 @@ const PasswordModal: React.FC<Props> = ({
               onChange={handlePasswordChange}
               doesChangeEveryTime
               color={
-                passwordPolicy.whitespace?.test(password) || passwordPolicy.tooLong?.test(password)
+                passwordPolicy?.whitespace?.test(password) ||
+                passwordPolicy?.tooLong?.test(password)
                   ? theme.main.danger
                   : undefined
               }
diff --git a/src/components/organisms/Settings/Account/hooks.ts b/src/components/organisms/Settings/Account/hooks.ts
index 263b7037c..79b6bba34 100644
--- a/src/components/organisms/Settings/Account/hooks.ts
+++ b/src/components/organisms/Settings/Account/hooks.ts
@@ -23,17 +23,7 @@ export default () => {
   const me = profileData?.me;
   const auths = profileData?.me?.auths;
   const hasPassword = auths?.includes("auth0") ?? false;
-
-  // Currently Auth0 policy. In future will be passed from
-  // backend depending on choosen type of authentication.
-  const passwordPolicy: PasswordPolicy = {
-    tooShort: /^(?=.{1,7}$)/,
-    tooLong: /^(?=.{128,}$)/,
-    whitespace: /(?=.*\s)/,
-    lowSecurity: /^((?=\d)|(?=[a-z])|(?=[A-Z]))/,
-    medSecurity: /^((?=.*[a-z])(?=.*[A-Z])|(?=.*[A-Z])(?=.*\d)|(?=.*[a-z])(?=.*\d))/,
-    highSecurity: /^(?=.*[a-z])(?=.*[A-Z])((?=(.*\d){2}))/,
-  };
+  const passwordPolicy = (window.REEARTH_CONFIG?.passwordPolicy as PasswordPolicy) ?? undefined;
 
   const [updateMeMutation] = useUpdateMeMutation();
 
diff --git a/src/config.ts b/src/config.ts
index b55d89671..c2109b90a 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -10,8 +10,15 @@ export type Config = {
   googleClientId?: string;
   sentryDsn?: string;
   sentryEnv?: string;
+  passwordPolicy?: {
+    tooShort?: RegExp | string;
+    tooLong?: RegExp | string;
+    whitespace?: RegExp | string;
+    lowSecurity?: RegExp | string;
+    medSecurity?: RegExp | string;
+    highSecurity?: RegExp | string;
+  };
 };
-
 declare global {
   interface Window {
     REEARTH_CONFIG?: Config;
@@ -31,4 +38,11 @@ export default async function loadConfig() {
     ...defaultConfig,
     ...(await (await fetch("/reearth_config.json")).json()),
   };
+
+  if (!window.REEARTH_CONFIG?.passwordPolicy) return;
+  try {
+    Object.keys(window.REEARTH_CONFIG.passwordPolicy).forEach(([value]) => new RegExp(value));
+  } catch {
+    window.REEARTH_CONFIG.passwordPolicy = undefined;
+  }
 }

From 37489d8f118b009484f320a9e00d0151687ee360 Mon Sep 17 00:00:00 2001
From: KaWaite <flippindaisy@gmail.com>
Date: Mon, 11 Oct 2021 15:12:46 +0900
Subject: [PATCH 18/19] Changes based on PR review

---
 src/components/atoms/TextBox/index.tsx                 | 10 ----------
 src/components/molecules/Common/ProjectMenu/index.tsx  |  2 +-
 .../molecules/Settings/Account/PasswordModal/index.tsx | 10 ++++++++--
 src/config.ts                                          |  2 +-
 4 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/components/atoms/TextBox/index.tsx b/src/components/atoms/TextBox/index.tsx
index 08d7351b2..517fa80e8 100644
--- a/src/components/atoms/TextBox/index.tsx
+++ b/src/components/atoms/TextBox/index.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState, useCallback, useRef } from "react";
 
 import Flex from "@reearth/components/atoms/Flex";
-import Text from "@reearth/components/atoms/Text";
 import { styled, metrics } from "@reearth/theme";
 import fonts from "@reearth/theme/fonts";
 import { metricsSizes } from "@reearth/theme/metrics";
@@ -16,7 +15,6 @@ export type Props = {
   prefix?: string;
   suffix?: string;
   placeholder?: string;
-  message?: string;
   throttle?: boolean;
   throttleTimeout?: number;
   color?: string;
@@ -36,7 +34,6 @@ const TextBox: React.FC<Props> = ({
   prefix,
   suffix,
   placeholder,
-  message,
   throttle,
   throttleTimeout: throttleTimeout = 3000,
   color,
@@ -145,7 +142,6 @@ const TextBox: React.FC<Props> = ({
           </FloatedText>
         )}
       </FormWrapper>
-      {message && <StyledText size="xs">{message}</StyledText>}
     </div>
   );
 };
@@ -200,10 +196,4 @@ const FloatedText = styled.span<InputProps>`
   user-select: none;
 `;
 
-const StyledText = styled(Text)`
-  margin-left: ${metricsSizes.m}px;
-  margin-top: ${metricsSizes["2xs"]}px;
-  font-style: italic;
-`;
-
 export default TextBox;
diff --git a/src/components/molecules/Common/ProjectMenu/index.tsx b/src/components/molecules/Common/ProjectMenu/index.tsx
index d00d22a9d..d1aca29aa 100644
--- a/src/components/molecules/Common/ProjectMenu/index.tsx
+++ b/src/components/molecules/Common/ProjectMenu/index.tsx
@@ -57,7 +57,7 @@ const ProjectMenu: React.FC<Props> = ({ currentProject, teamId }) => {
             <MenuListItem>
               <MenuListItemLabel
                 icon="help"
-                onClick={() => window.open("http://docs.reearth.io")}
+                onClick={() => window.open("http://docs.reearth.io", "_blank", "noopener")}
                 text={intl.formatMessage({ defaultMessage: "Help" })}
               />
             </MenuListItem>
diff --git a/src/components/molecules/Settings/Account/PasswordModal/index.tsx b/src/components/molecules/Settings/Account/PasswordModal/index.tsx
index 7e0615279..1786f450f 100644
--- a/src/components/molecules/Settings/Account/PasswordModal/index.tsx
+++ b/src/components/molecules/Settings/Account/PasswordModal/index.tsx
@@ -6,7 +6,7 @@ import Flex from "@reearth/components/atoms/Flex";
 import Modal from "@reearth/components/atoms/Modal";
 import Text from "@reearth/components/atoms/Text";
 import TextBox from "@reearth/components/atoms/TextBox";
-import { styled, useTheme } from "@reearth/theme";
+import { styled, useTheme, metricsSizes } from "@reearth/theme";
 
 export type PasswordPolicy = {
   tooShort?: RegExp;
@@ -158,7 +158,6 @@ const PasswordModal: React.FC<Props> = ({
               type="password"
               borderColor={theme.main.border}
               value={password}
-              message={password ? regexMessage : undefined}
               onChange={handlePasswordChange}
               doesChangeEveryTime
               color={
@@ -168,6 +167,7 @@ const PasswordModal: React.FC<Props> = ({
                   : undefined
               }
             />
+            <PasswordMessage size="xs">{password ? regexMessage : undefined}</PasswordMessage>
           </PasswordField>
           <PasswordField direction="column">
             <Text size="m">
@@ -212,4 +212,10 @@ const PasswordField = styled(Flex)`
   height: 75px;
 `;
 
+const PasswordMessage = styled(Text)`
+  margin-left: ${metricsSizes.m}px;
+  margin-top: ${metricsSizes["2xs"]}px;
+  font-style: italic;
+`;
+
 export default PasswordModal;
diff --git a/src/config.ts b/src/config.ts
index c2109b90a..d56f05ea3 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -41,7 +41,7 @@ export default async function loadConfig() {
 
   if (!window.REEARTH_CONFIG?.passwordPolicy) return;
   try {
-    Object.keys(window.REEARTH_CONFIG.passwordPolicy).forEach(([value]) => new RegExp(value));
+    Object.values(window.REEARTH_CONFIG.passwordPolicy).forEach(value => new RegExp(value));
   } catch {
     window.REEARTH_CONFIG.passwordPolicy = undefined;
   }

From a913b27274335b838a23ad23005a4859457b681a Mon Sep 17 00:00:00 2001
From: KaWaite <flippindaisy@gmail.com>
Date: Mon, 18 Oct 2021 15:38:32 +0900
Subject: [PATCH 19/19] update based on PR review

---
 .../organisms/Settings/Account/hooks.ts       |  3 +-
 src/config.ts                                 | 28 +++++++++++--------
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/components/organisms/Settings/Account/hooks.ts b/src/components/organisms/Settings/Account/hooks.ts
index 79b6bba34..f4ebf752b 100644
--- a/src/components/organisms/Settings/Account/hooks.ts
+++ b/src/components/organisms/Settings/Account/hooks.ts
@@ -2,7 +2,6 @@ import { useApolloClient } from "@apollo/client";
 import { useCallback } from "react";
 import { useIntl } from "react-intl";
 
-import { PasswordPolicy } from "@reearth/components/molecules/Settings/Account/PasswordModal";
 import { useUpdateMeMutation, useProfileQuery } from "@reearth/gql";
 import { useTeam, useProject, useNotification } from "@reearth/state";
 
@@ -23,7 +22,7 @@ export default () => {
   const me = profileData?.me;
   const auths = profileData?.me?.auths;
   const hasPassword = auths?.includes("auth0") ?? false;
-  const passwordPolicy = (window.REEARTH_CONFIG?.passwordPolicy as PasswordPolicy) ?? undefined;
+  const passwordPolicy = window.REEARTH_CONFIG?.passwordPolicy;
 
   const [updateMeMutation] = useUpdateMeMutation();
 
diff --git a/src/config.ts b/src/config.ts
index d56f05ea3..f83172e4b 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -11,12 +11,12 @@ export type Config = {
   sentryDsn?: string;
   sentryEnv?: string;
   passwordPolicy?: {
-    tooShort?: RegExp | string;
-    tooLong?: RegExp | string;
-    whitespace?: RegExp | string;
-    lowSecurity?: RegExp | string;
-    medSecurity?: RegExp | string;
-    highSecurity?: RegExp | string;
+    tooShort?: RegExp;
+    tooLong?: RegExp;
+    whitespace?: RegExp;
+    lowSecurity?: RegExp;
+    medSecurity?: RegExp;
+    highSecurity?: RegExp;
   };
 };
 declare global {
@@ -40,9 +40,15 @@ export default async function loadConfig() {
   };
 
   if (!window.REEARTH_CONFIG?.passwordPolicy) return;
-  try {
-    Object.values(window.REEARTH_CONFIG.passwordPolicy).forEach(value => new RegExp(value));
-  } catch {
-    window.REEARTH_CONFIG.passwordPolicy = undefined;
-  }
+
+  window.REEARTH_CONFIG.passwordPolicy = Object.entries(
+    Object.values(window.REEARTH_CONFIG.passwordPolicy).map((k, v) => {
+      if (typeof v !== "string") return undefined;
+      try {
+        return [k, new RegExp(v)];
+      } catch {
+        return undefined;
+      }
+    }),
+  ) as Config["passwordPolicy"];
 }